@charset "utf-8";
/* ---------------------------------------------------------------------------------
© 2026 すてっぷわん 東京都指定 児童発達支援・放課後等デイサービス

HTML CSS Selectors common 

$Revision: 1.0 $
--------------------------------------------------------------------------------- */

/*---------------------------------------------------------------------------------
初期設定
--------------------------------------------------------------------------------- */
:root {
  --min-width:1200px;
  --font-jp: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
  --font-en: "Manrope", sans-serif;
  --font-zen: "Zen Kaku Gothic Antique", sans-serif;
}
*, *::before, *::after {
  box-sizing: border-box;
}
body {
  margin: 0px;
  padding: 0px;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  color: #485345;
  -webkit-text-size-adjust: none; /* フォントサイズ自動調整 */
  font-optical-sizing: auto;
  /*font-feature-settings: "palt";*/
  text-decoration-skip-ink: none;
}

h1,h2,h3,h4,h5,h6,
ul,ol,dl,
p,li,dt,dd,th,td,em,strong,blockquote {
  margin: 0px;
  padding: 0px;
  border: 0;
  vertical-align: baseline;
  font-weight: inherit;
}
em {
  font-style: normal;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
  margin: 0px;
  padding: 0px;
}
p,dd,li {
  list-style: none;
}
em,strong {
  font-weight: inherit;
}
table {
  border-collapse: collapse;
}

img {
  vertical-align:top;
  max-width: 100%;
  height: auto;
}
.fit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
a img {
  border: none;
}
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
  outline: none;
}
a,.btn {
	transition: 0.2s ease-in-out;
  cursor: pointer;
}
a:hover,
.btn:hover {
  opacity: 0.5;
}

.none {
  display: none!important;
}

.nolink {
  pointer-events: none;
}
.anchor {
  display: block;
  width: 100%;
  height: 0;
  position: relative;
  top: -140px;
}

.fit-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}
.js_accordion_head {
  cursor: pointer;
}

/*---------------------------------------------------------------------------------
エフェクト
--------------------------------------------------------------------------------- */

/*ファーストビューエフェクト*/
.fv-effect {
  opacity: 0;
  transition : all 500ms 300ms ease-out;
}
.loaded .fv-effect {
  opacity: 1;
  transform: translate(0,0px)!important;
}

/* 画面外にいる状態 */
.effect,.fade-effect,.d-effect {
  opacity : 0;
  transform: translate(0,50px);
}
.no-fade {
  opacity: 1.0;
  transform: translate(0,0px)!important;
}
.fade-drop {
  transform: translate(0,-50px);
}
.fade-rize {
  transform: translate(0,50px);
}
.fade-left-in {
  transform: translate(-50px,0);
}
.fade-right-in {
  transform: translate(50px,0);
}
.fade-in {
  transform: translate(0,0);
}

.contents-line {
  opacity: 1.0;
  transform: translate(0,0px)!important;
  position: relative;
}
.contents-line::before {
  width: 0;
  height: 1px;
  background-color: #ACACAC;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -600px;
  content:"";
}


/* 画面内に入った状態 */
.effect-on {
  opacity: 1.0;
  transform: translate(0,0px)!important;
  transition : all 300ms 300ms ease-out;
}
.effect-on.contents-line::before {
  width: 1200px;
  transition : all 500ms 300ms cubic-bezier(0.420, 0.000, 0.180, 1.005);
}

/*アニメーション*/
.delay0.effect-on {
  transition-delay:0ms;
}

.fluid {
  width: 100%;
  height: 100%;
  border-radius: 100px;
}



/*---------------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------------- */
body {

}
#header-wrapper {
  width: 330px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 21;
  transition-delay:1000ms;
  overflow:hidden;
}
.header-wrapper-fluid {
  width: 340px;
  height: 340px;
  position: absolute;
  top: -150px;
  left: -100px;
  z-index: 1;
  transform: rotate(45deg);
}
.header-wrapper-fluid .fluid {
  background-color: #fff;
  box-shadow: 3px 3px 17px 0px rgba(0, 0, 0, 0.08);
}
.site-header {
  width: 240px;
  padding-top: 12px;
  position: relative;
  z-index: 3;
}
.site-header__logo {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  line-height: 1;
  margin-bottom: 65px;
}
.site-header__logo .txt1 {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.site-header__logo .txt2 {
  margin-bottom: 35px;
  font-size: 10px;
  font-weight: 400;
}
.site-header__logo img {
  width: 120px;
}


/*お問い合せ*/
#toggle_menu {
  width: 100px;
  height: 130px;
  padding-top: 65px;
  background-color: #14569b;
  border-radius: 0 0 0 15px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  cursor: pointer;
}
#toggle_menu::before {
  width: 30px;
  height: 33px;
  background: url("../img/common/icon_contact.webp") no-repeat center;
  background-size: 100% auto;
  position: absolute;
  top: 24px;
  right: 0;
  left: 0;
  margin: auto;
  content:"";
}

#nav-background {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index:98;
  background-color: rgba(255,255,255,0.30);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}
.open #nav-background{
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.nav-background-inner {
  width: 450px;
  height: 620px;
  padding: 90px 0 0 95px;
  margin-left: auto;
  background-color: #14569b;
  border-radius: 0 0 0 15px;
  font-family: var(--font-zen);
  color: #fff;
  position: relative;
}
.nav-background-inner ul {
  
}
.nav-background-inner li {
  margin-bottom: 30px;
  line-height: 1;
  position: relative;
}
.nav-background-inner li::before {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius:100vmax;
  position: absolute;
  text-transform: 2px;
  left: -40px;
  content:"";
}
.nav-background-inner .txt1 {
  margin-bottom: 18px;
  font-size: 14px;  
}
.nav-background-inner .tel {
  margin-bottom: 10px;
  font-family: var(--font-en);
  font-size: 36px;
  color: #f08512;
}
.nav-background-inner li a {
  display: block;
  width: 220px;
  font-family: var(--font-en);
  font-size: 36px;
  margin-bottom: 10px;
  position: relative;
}
.nav-background-inner li a::after {
  width: 17px;
  height: 14px;
  background: url("../img/common/h_nav_arrow.svg") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  content:"";
}
.nav-background-inner .txt2 {
  font-size: 11px;
}

.nav-background-inner__banner {
  width: 140px;
  font-size: 12px;
}
.nav-background-inner__banner span {
  display: block;
  margin-top:7px;
  margin-left: 6px;
}
.menu-close {
  width: 22px;
  height: 22px;
  background: url("../img/common/h_menu_close.png") no-repeat;
  background-size: 100% auto;
  position: absolute;
  bottom: 30px;
  left: 33px;
  cursor: pointer;
}

.site-header-nav {
  width: 100%;
  height: 110px;
  background-color: rgba(255,255,255,0.75);
  position: fixed;
  top: -110px;
  left: 0;
  transition : all 300ms 300ms ease-out;
  z-index: 20;
}
.sc .site-header-nav {
  top: 0;
}
.site-header-nav ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 808px;
  height: 100%;
  padding-left: 92px;
  margin: 0 auto;
}
.site-header-nav li {
  font-size: 14px;
  line-height: 1;
  color: #485345;
}
.site-header-nav .tel {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 165px;
  height: 48px;
  border: 1px solid #485345;
  border-radius: 24px;
  color: #485345;
}
.site-header-nav .tel span {
  padding-left: 5px;
  font-family: var(--font-en);
  font-weight: 700;
}

/*---------------------------------------------------------------------------------
コンテンツ
--------------------------------------------------------------------------------- */
#contents-wrapper {
  width: 100%;
  min-width: var(--min-width);
  overflow: hidden;
}


/*---------------------------------------------------------------------------------
フッター
--------------------------------------------------------------------------------- */
#footer-wrapper {
  width: 100%;
  min-width: var(--min-width);
  position: relative;
  overflow:hidden;
}
.footer-wrapper-img {
  width: 100%;
  height: 450px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.site-footer {
  width: 100%;
  position: relative;
  z-index: 2;
}
.site-footer-wave {
  width: 100%;
  height: 450px;
}
.site-footer-wrap {
  width: 100%;
  padding: 20px 0 15px;
  background-color: #e9efe4;
}
.site-footer__logo {
  display: flex;
  align-items: center;
  align-content: center;
  flex-direction: column;
  text-align: center;
  line-height: 1;
  margin: 0 auto 25px;
  margin-bottom: 25px;
}
.site-footer__logo .txt1 {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
}
.site-footer__logo .txt2 {
  margin-bottom: 35px;
  font-size: 10px;
  font-weight: 400;
}
.site-footer__logo img {
  width: 120px;
}
.site-footer-read {
  margin-bottom: 38px;
  text-align: center;
}
.site-footer-read__ttl {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.site-footer-read__ttl em {
  color: #f08512;
}
.site-footer-read__txt {
  font-size: 12px;
  line-height: 1.75;
}

.site-footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  width: 830px;
  margin: 0 auto 30px;
}
.site-footer-info__map {
  width: 400px;
  height: 300px;
  border: 1px solid #14569b;
  border-radius: 25px;
  overflow:hidden;
}
.site-footer-info__map iframe {
  width: 100%;
  height: 100%;
}
.site-footer-info-data {
  width: 385px;
}
.site-footer-info-data__add {
  padding-bottom: 8px;
  font-size: 14px;
  line-height: 1.75;
}
.site-footer-info-data__tel {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1;
}
.site-footer-info-data__tel em {
  color: #14569b;
}
.site-footer-info-data__time {
  padding-bottom: 15px;
  font-size: 14px;
  line-height: 1.75;
}
.site-footer-info-data__map {
  margin-bottom: 22px;
}
.site-footer-info-data__map a {
  display: block;
  width: fit-content;
  font-size: 16px;
  line-height: 1;
  text-decoration: underline;
  text-decoration-color:#004593;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  position: relative;
}
.site-footer-info-data__map a::after {
  width: 20px;
  height: 15px;
  background: url("../img/common/f_map_arrow.svg") no-repeat;
  background-size: 100% auto;
  position: absolute;
  top: 0;
  right: -20px;
  content:"";
}

.site-footer-info-data-access {}
.site-footer-info-data-access__ttl {
  margin-bottom: 13px;
  font-family: var(--font-en);
  font-size: 18px;
  font-weight: 500;
  color: #14569b;
}
.site-footer-info-data-access li {
  font-size: 11px;
  line-height: 1.63;
}

.site-footer-banner {
  width: 316px;
  margin: 0 auto 25px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.site-footer-banner a {
  display: block;
  margin-bottom: 10px;
}

.site-footer-copyright {
  font-size: 11px;
  line-height: 1;
  text-align: center;
}


/*---------------------------------------------------------------------------------
JS
--------------------------------------------------------------------------------- */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#fff; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:32px; overflow:visible; background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; padding:1px;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-20px; background:url(../images/controls.png) no-repeat 0 0;}
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:44px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:22px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px; right:0;}
        #cboxClose:hover{background-position:-50px -25px;}
        .cboxSlideshow_on #cboxPrevious, .cboxSlideshow_off #cboxPrevious{right:66px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-75px -25px; right:44px;}
        .cboxSlideshow_on #cboxSlideshow:hover{background-position:-100px -25px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-100px 0px; right:44px;}
        .cboxSlideshow_off #cboxSlideshow:hover{background-position:-75px -25px;}

/* Slick */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}
.slick-initialized.slick-slider {
  opacity: 1;
}
.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  display: table;
  content: '';
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slick-prev {
  background-position: left top;
}
.slick-next {
  background-position: right top;
}
.slick-prev:before, .slick-next:before {
  display: none !important;
}
.slick-prev:active, .slick-next:active {
  border: none;
}
.slick-disabled {
  display: none !important;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
  outline: none;
  opacity: 0.5;
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}
.slick-dots {
  position: absolute;
  bottom: -30px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  z-index: 20;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 12px;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 12px;
  height: 12px;
  padding: 0px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: '';
  text-align: center;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button {
  width: 15px;
  height: 15px;
}
.slick-dots li.slick-active button:before {
  background-color: #f79876;
}