@charset "UTF-8";

/************************************
** スマホ用CSS 780以下
************************************/
@media screen and (max-width: 780px){
/**/

/**********************
* 共通
**********************/
*{
	font-size: 15px;
}
body{
	min-width: 100%;
}
.inner{
	width: 100%;
	padding: 0 20px 0;
}
.wrap{
    width: 100%;
}
#content{
	padding: 90px 0 70px;
}
.content p{
    font-size: 15px;
}
#main.main{
	margin: 0;
	padding: 0;
}

/* pc、sp */
.pc {
  display: none!important;
}
.sp {
  display: block!important;
}

/**********************
* 固定ページ
**********************/
/* 各固定ページの先頭画像 */
.header-ttl-img p img{
	height: 270px;
}

/**********************
* 1カラム(フルワイド)
**********************/
body.column-full-wide .article-header{
    width: 100%;
    padding: 0 20px;
}
body.column-full-wide .breadcrumbs{
    width: 100%;
    padding: 0 20px;
}
body.column-full-wide #main.main{
	padding: 0;
}

/**********************
* サイドバー
**********************/
.sidebar {
    width: 100%;
}

/**********************
* 見出し
**********************/
/* page h1 */
body.page .article-header {
	margin-bottom: 30px;
}
body.page .article-header h1.entry-title{
	padding: 0;
	font-size: 33px;
}

/* 固定ページのみ h1 */
#h1-key-wrap{
	width: 100%;
	height: 200px;
}
#h1-key-wrap h1.h1-key-title{
	font-size: 22px;
	padding: 10px 20px 0;
	width: 80%;
	text-align: center;
}

/* h2-simple */
.article h2.h2-simple{
	font-size: 25px;
	margin-bottom: 30px;
}

/**********************
* btn 汎用
**********************/
.btn01 a{
	padding: 18px 80px;
	font-size: 15px;
}
.btn02 a{
	padding: 18px 80px;
	font-size: 15px;
}

/**********************
* table
**********************/
.table01 th{
	width: 33%;
}
.table01 th,
.table01 td{
	font-size: 15px;
}

/**********************
* ul li系
**********************/
/* list-box */
div.list-box ul li{
	padding: 15px 15px 15px 55px;
	width: 100%;
}

/**********************
* google-map
**********************/
.google-map iframe{
    height: 250px;
}

/**********************
* header
**********************/
#header-in-pc{
	display: none;
}
#header-in-sp{
	display: block;
	position: fixed;
	top: 0;
	z-index: 100;
	width: 100%;
}
#header {
	width: 100%;
	min-width: 100%;
	height: 73px;
	background: #fff;
	box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
}
#header-in{
	margin: 0;
	padding: 0;
	align-items: center;
}
#header .h-logo{
	width: 290px;
	position: absolute;
	top: 21px;
	left: 10px;
}

/* ボタン */
#header .btnMenu {
	width: 50px;
	height: auto;
	position: absolute;
	top: 9px;
	right: 15px;
	border: 0;
	color: #000;
	background: none;
}
#header .btnMenu .menu-text{
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: #1ea5da;
	letter-spacing: 0px;
}
#header .btnMenu i {
	width: 37px;
	height: 25px;
	display: flex;
	gap: 5px;
	color: #1ea5da;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	border-radius: 10px;
}
#header .btnMenu i span {
	display: inline-table;
	height: 4px;
	width: 100%;
	background: #1ea5da;
	border-radius: 2px;
	transition: all 0.2s cubic-bezier(0.84, 0.17, 0, 0.71);
}


/* 閉じる */
#header .closeBtn {
	width: 30px;
	height: auto;
	position: absolute;
	top: 14px;
	right: 24px;
	border: 0;
	background: none;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
#header .closeBtn i {
	width: 100%;
	display: block;
	position: relative;
	height: 47px;
	border-radius: 2px;
}
#header .closeBtn i:before,
#header .closeBtn i:after {
	content: "";
	display: block;
	width: 3px;
	height: 60%;
	position: absolute;
	top: 0;
	left: 49%;
	bottom: 0;
	margin: auto;
	z-index: 2;
	background: #1ea5da;
}
#header .closeBtn i:before {
    transform: rotate(45deg);
}
#header .closeBtn i:after {
    transform: rotate(-45deg);
}

/* navナビゲーション */
#header .sp-globalmenu {
	overflow: hidden;
	content-visibility: auto;
	contain-intrinsic-size: 1000px;
	position: fixed;
	width: 100vw;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease-in-out, visibility 0s 0.4s; /* visibilityは遅延で切り替え */
	z-index: 110;
	justify-content: flex-end;
	align-items: flex-start;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
}
#header .sp-globalmenu.visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s ease-in-out, visibility 0s 0s; /* visibilityを即切り替え */
}
.sp-nav-wrap {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 85px 0 0;
}
.sp-nav-wrap nav.sp-h-nav{
	width: 100%;
}
.sp-nav-wrap nav.sp-h-nav ul{
	display: flex;
	flex-direction: column;
}
.sp-nav-wrap nav.sp-h-nav ul li a{
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 15px;
	font-weight: 600;
	width: 100%;
	padding: 7px 20px;
	display: inline-block;
	color: #1A1A1A;
	position: relative;
}
.sp-nav-wrap nav.sp-h-nav ul li a:hover{
    background-color: #5fb5f3;
    color: #fff;
}
.sp-nav-wrap nav.sp-h-nav ul li a:hover span{
	color: #fff;
}
.sp-nav-wrap nav.sp-h-nav ul li a::after {
	content: "";
	background-image: url(img/top/btn01-icon-white.svg);
	background-repeat: no-repeat;
	background-size: 33px;
	width: 33px;
	height: 33px;
	position: absolute;
	right: 17px;
	top: 50%;
	transform: translateY(-50%);
}
.sp-nav-wrap nav.sp-h-nav ul li a span.en{
	font-size: 13px;
	letter-spacing: 1px;
	color: #1ea5da;
	display: block;
}
.sp-nav-wrap nav.sp-h-nav ul li a:hover span.en{
	color: #fff;
}

/**********************
* footer
**********************/
#footer{
	padding: 0 0 70px;
}
/* footer01 */
#footer01{
	max-width: 100%;
	margin: 0 20px;
	padding: 30px;
}
#footer01 .f-nav ul{
	gap: 20px;
	flex-direction: column;
}

/* footer02 */
#footer02{
	max-width: 100%;
	margin: 0 20px 0;
}
#footer02 #footer-in{
	flex-direction: column;
}
#footer02 .f-logo{
	width: 100%;
	margin: 0 0 20px;
}
#footer02 .f-info{
	width: 100%;
	margin: 0 0 20px;
}
#footer02 .f-btn{
	width: 75%;
	margin: 0 auto;
}

/**********************
* コンタクトフォーム問い合わせページ
**********************/
/* 全体のフォームスタイル */
.wpcf7-form {
    max-width: 100%;
    padding: 0;
}

/* テーブル */
#contact-form{
	padding: 0 15px;
}
#contact-form table{
	margin: 0;
}
#contact-form table tr{
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--cocoon-x-thin-color);
	padding: 20px 0 7px;
}
#contact-form table tr:first-child{
	border-top: 0;
}
#contact-form table th{
	padding: 0;
	margin: 0 0 10px;
}
#contact-form table td{
	padding: 0;
}
#contact-form table th,
#contact-form table td{
	width: 100%;
	border: 0;
	font-size: 15px;
}
#contact-form table tr:first-child th,
#contact-form table tr:first-child td{
	border: 0;
}
#contact-form table th span{
	font-size: 11px;
	width: 40px;
}

/**********************
* メインイメージ
**********************/
#main-img .main-img-in {
	height: 550px;
	max-width: 100%;
	padding: 0;
	background: url(img/top/main-img_sp.jpg);
	background-size: cover;
	align-items: flex-end;
	margin: 75px auto 0;
}
#main-img .main-text {
    margin: 0 30px 20px 30px;
}
#main-img .p-main .main-part{
	font-size: 7vw;
}
#main-img .p-sub .sub-part{
	font-size: 15px;
}
#main-img .p-sub .sub-part02{
	display: none;
}

/**********************
* TOPページ
**********************/
/*** TOP共通 ***/
.top-inner{
	max-width: 100%;
	margin: 0 auto;
}
.home #content h2{
	font-size: 27px;
	margin: 0 0 30px;
}
.home #content h2 span{
	font-size: 17px;
}
.top-wave01{
	top: -65px;
}

/*** TOPコンセプト ***/
#top-concept {
    padding: 60px 30px 60px;
    margin: 0 0 390px;
}
#top-concept .item{
	flex-direction: column;
}
#top-concept .item .text-box {
	width: 100%;
}
#top-concept .item .img-box {
	max-width: 446px;
	right: -50px;
	top: 94%;
	z-index: -1;
}
#top-concept .item01 {
    margin: 0 0 410px;
}
#top-concept .item02 .img-box{
    left: -86px;
    top: 98%;
}
#top-concept .item::before,
#top-concept .item02::after{
	display: none;
}

/*** TOP誓い7条 ***/
#top-company-oath{
	margin: 30px 0 70px;
	padding: 70px 20px 70px;
}
#top-company-oath .company-oath {
	width: 100%;
	padding: 0;
}

/*** TOP こんな心配ごとがあっても大丈夫 ***/
#top-support {
    margin: 0 0 70px;
    padding: 0 20px;
}
.home #content #top-support h2{
	font-size: 26px;
}
.home #content #top-support h2 span{
	font-size: 20px;
}
.top-support-in{
	width: 100%;
	padding: 0;
}
.item-wrap{
	width: 100%;
}
.top-support-in .item{
	height: 240px;
	padding: 44px 20px 30px;
}
.top-support-in .item-wrap .icon span{
	width: 80px;
}
#top-support .btn01 a{
    padding: 18px 45px;
}

/*** TOP よくあるご質問 ***/
#top_faq{
	padding: 0 20px;
    margin: 0 0 70px;
}
#top_faq dl{
    padding: 20px 38px 20px 25px;
}
#top_faq dt::after{
	right: -18px;
}
#top_faq dl p {
    font-size: 16px;
}
#top_faq dl p span{
	font-size: 19px;
}

/*** TOPお知らせ ***/
#top-news{
	padding: 0 20px 0;
}
#top-news::before,
#top-news::after{
	display: none;
}

/*** TOPお問い合わせ ***/
#top-contact{
    margin: 0 20px 70px;
}
#top-contact .top-contact-in{
	padding: 40px;
}
#top-contact ul{
	flex-direction: column;
}
#top-contact ul li a{
	text-align: center;
}

/**********************
* 事業所ページ
**********************/
.company-flow{
    flex-direction: column;
    gap: 30px;
}
.company-flow .item {
    width: 100%;
}
.company-gallery ul{
    flex-direction: column;
    align-items: center;
    gap: 30px;
}
.company-gallery ul li {
    width: 85%;
}
.company-oath ul li{
	font-size: 17px;
	padding: 25px 25px 25px 90px;
}
.company-oath span.color{
	font-size: 17px;
}
.company-oath ul li:before{
	left: 20px;
	width: 50px;
	height: 50px;
}

/**********************
* 求人情報ページ
**********************/
.recruit-box .item{
	padding: 30px 20px;
}
.recruit-box .item-in{
	gap: 10px;
}
.recruit-box .item-in div {
	width: 100%;
}
body.page .article .recruit-box .item p {
	margin: 0 0 20px;
}

/**********************
* 発達障害とはページ
**********************/
.hattatsu-intro{
	width: 100%;
	margin: 0 auto 70px;
}
.hattatsu-features-in{
	flex-direction: column;
	align-items: center;
}
.hattatsu-features-in .item{
	width: 87%;
	padding: 40px 30px;
}
.hattatsu-features-in .item .icon img {
    width: 110px;
}
.hattatsu-arrow img {
    width: 80%;
}
.hattatsu-features02{
    width: 100%;
    padding: 20px 30px 40px;
}
.hattatsu-box01{
	margin: 70px 0;
	flex-direction: column-reverse;
}
.hattatsu-box01 .text-box {
    width: 100%;
}
.hattatsu-box01 .img-box {
    width: 100%;
}
.hattatsu-box01 .img-box img{
	width: 70%;
}
.hattatsu-sasae{
    margin: 0 auto 70px;
}
.hattatsu-sasae .text-box {
	width: 100%;
	margin: 0 auto;
}
.hattatsu-shime{
	width: 100%;
	margin: 0 auto 0;
}

/**********************
* フッターポップアップ
**********************/
#footer #foot-pop {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10000;
}
#footer #foot-pop ul {
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	display: flex;
}
#footer #foot-pop ul li {
	width: 50%;
	height: auto;
	margin: 0;
	padding: 0;
	background: #f28c37;
	text-align: center;
}
#footer #foot-pop ul li.li02{
	background: #1ea5da;
}
#footer #foot-pop ul li a{
	color: #fff;
	padding: 21px 0;
	display: block;
	font-size: 14px;
}
#footer #foot-pop ul li a::before{
	margin: 0 10px 0 0;
	font-size: 17px;
}
#footer #foot-pop ul li.li01 a::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f095";
}
#footer #foot-pop ul li.li02 a::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f0e0";
}

/* 780px終了 */
}
/* 780px終了 */