@charset "UTF-8";
/*----------------------------------------------------------------------------------------------------
 *
 * Theme Name: dream-music-camp, Inc ver1.0
 * Theme URI: 
 * Author: Kinjo Aimi
 * Author URI: 
 * Description: dream-music-campのテーマ
 * Version: 1.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: 3b
 *
 *--------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------------
 *
 *
 * リセット
 *
 *
--------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; font:inherit; font-size:100%; vertical-align:baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
html, body { width:100%; height:100%; line-height:1; }
ol, ul { list-style:none; }
blockquote, q {quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; }

/*--------------------------------------------------

   Clearfix

--------------------------------------------------*/
.cf { zoom:1; } .cf:before,.cf:after { content:""; display:table; } .cf:after { clear:both; }

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 基本設定
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
html { overflow:auto; background-color: #fefbf7;color: #251e1c;}
@media screen and (max-width:1000px){ body { width:1000px; } }
@media screen and (max-width:768px){ body { width:100%; background:#fff; } }
body {display: flex;
  flex-direction: column;
  min-height: 100vh; font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 3.4vw, 16px);
  background: #fefbf7;
}
a:link,
a:visited { color:#000 ; text-decoration:none; transition:.3s ease; }
a:hover,
a:active { color:#000; text-decoration:none; transition:.3s ease; }
img { max-width:100%; height:auto; vertical-align:top; backface-visibility:hidden; }
a:link img,
a:visited img {opacity:1.0; transition:.3s ease; }
a:hover img,
a:active img {opacity: 0.6; transition: .3s ease; }
video::-webkit-media-controls-enclosure { overflow:hidden; }
video::-webkit-media-controls-panel { width: calc(100% + 30px); }
.fa, .far, .fas {font-family: "Font Awesome 5 Free";}
/* ------------------------------小見出し属性------------------------------　*/
h1 , h2 ,h3 ,h4 ,h5 { margin:0; padding:0; line-height:1.7; margin:0 0 20px 0; font-weight: 500; color: #251e1c;}
h1 { font-size:30px; }
h2 { font-size:26px; text-align:center; }
h3 { font-size:22px; }
h4 { font-size:18px; }
h5 { font-size:16px; }

@media screen and (max-width:768px){
	h1 { font-size:24px;}
	h2 { font-size:19px; }
	h3 { font-size:18px; }
	h4 { font-size:16px; }
	h5 { font-size:16px; }
}
p { font-size:18px; margin:0 0 20px 0; padding:0; line-height: 2; display:block; color:#333; font-weight: 400;text-align: justify;}
p.lead {margin-bottom: 20px;}
ul { margin:0; padding:0; }
li { margin:0; padding:0; font-size:16px; line-height:1.8;}
/* i { padding-right:6px; } */
img { max-width:100%; height:auto; display:block; }
@media screen and (max-width:768px){
	p { font-size:4vw; line-height: 1.8;}
	li { font-size:4vw; line-height: 1.8;}
}
img.center,.aligncenter { margin:0 auto; display:block; }
img.left { float:left; margin:0 30px 30px 0; }
img.right { float:right; margin:0 0 30px 30px; }
img.photo00 { background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-left { transform:rotate(-4deg); -moz-transform:rotate(-4deg); -webkit-transform:rotate(-4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
img.photo-right { transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); background:#ffffff; padding:5px; box-shadow:0px 0px 5px 5px rgba(0,0,0,0.05); }
.bold { font-weight:bold; }
.underline { text-decoration:underline; font-weight:bold; }
.em {font-weight: 700;}
.white {color: #fff !important;}
.red {color: #E94235;}
.yellow {color:#FAFF00 !important;}
.border {background: linear-gradient(transparent 50%, #FAFF00 50%);}
.center { text-align:center; }
.big { font-size:20px; }
.sp00 { margin-top:0 !important; }
.sp10 { margin-top:10px !important; }
.sp20 { margin-top:20px !important; }
.sp30 { margin-top:30px !important; }
.sp50 { margin-top:50px !important; }
.sp70 { margin-top:70px !important; }
.sp100 { margin-top:100px !important; }
.align_left { text-align:left; }
.align_right { text-align:right; }
.align_center { text-align:center; }
.ffffff { background:#ffffff!important; }
.f7f7f7 { background:#f7f7f7!important; }
@media screen and (max-width:768px){
	img.left , img.right  { float:none; margin:0 auto 20px auto; display:block; }
	.big { font-size:16px; }
}
.pc { display:block!important; }
.sp { display:none!important; }
.back-main-color {background: #ffdc00;}
ul.note > li {font-size: 18px;position: relative;padding-left: 1.1em;}
ul.note > li:before {content: '※'; position: absolute;left: 0;}
sup {vertical-align: top;font-size: 70%;}

@media screen and (max-width:766px){
	.pc { display:none!important; }
	.sp { display:block!important; }
	ul.note > li {font-size: 14px;}
}

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * ヘッダー
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
/* ------------------------------ロゴ・メニューバーエリア------------------------------　*/
.header {
	width: 100%;
	background-color: #fefbf7;
	padding: 20px 0;
  }

.header-wrapper {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
} 

.logo h1 {
	margin-bottom: 0;
}
nav.header-top-nav {
	margin-left:auto;
}
nav.header-top-nav ul {
	display: flex;
	align-items: center;
}
nav.header-top-nav ul li a {
	display: block;
	font-size: 15px;
	padding: 0 15px;
}

.header-tel a.header-tel-btn {
	color: #f7931e;
	font-size: 25px;
	display: flex;
	align-items: center;
}
.header-tel a.header-tel-btn img {
	display: inline-block;
	margin-right: 10px;
}

.header-contact a.header-contact-btn {
	background-color: #f7931e;
	font-size: 16px;
	color: #fff;
	padding: 5px 31px;
	border-radius: 5px;
	margin-left: 20px;
}

.header-wrapper-bottom {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
nav.header-bottom-nav {
	background-color: #fff;
	border-radius: 10px;
	width: calc(100% - 83px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	margin-right: auto;
}
nav.header-bottom-nav ul {
	display: flex;
	align-items: center;
	justify-content: center;
}
nav.header-bottom-nav ul li a {
	display: inline-block;
	padding: 15px 16px;
	font-size: 14px;
}

@media screen and (max-width:766px){
	.header {
		background-color: #fff;
		height: 75px;
		padding: 20px;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 10;
		border-bottom: 1px solid #eee;
	} 
	.header-wrapper {width: 90%; max-width: 100%;
		display: flex;
		flex-direction: column-reverse;
		align-items: flex-end;
		padding: 60px 0 30px;
	}
	.logo h1 {
		margin: 0;
	}
	.logo h1 img {
		width: 35vw;
	}
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * グローバルナビゲーション
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
html.noscroll {overflow: hidden;}  

button {-webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: 0; border-radius: 0; color: inherit; cursor: pointer; font: inherit; margin: 0; outline: none; padding: 0; vertical-align: middle;}
.burger-btn {
	display: block;
	 width: 45px;
	height: 50px;
	z-index: 30;
	border: none;
	top: 0px;
	right: 0;
	position: absolute;
	z-index: 100;
}
	
.bar {
	background-color: #3f3034;
	display: block;
	height: 3px;
	left: 50%;
	right: 0;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 30px;
}
.burger-btn.close  .bar {background-color: #3f3034;}    
.bar_top {top: 7px; width: 45px;}
.bar_mid {top: 20px; transform: translate(-50%,-50%); width: 45px; /* left: 15px; */ right: 0;}
.bar_bottom {top: 33px; width: 45px;}
.bar_txt {
	bottom: -11px;
	width: 45px;
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #3f3034;
	font-size: 13px;
	letter-spacing: .2em;
}
.burger-btn.close .bar_top {transform: translate(-50%,10px) rotate(45deg); transition: transform .3s; width: 40px; right: 0;top: 10px;}

.burger-btn.close .bar_mid {opacity: 0; transition: opacity .3s;}
.burger-btn.close .bar_bottom {transform: translate(-50%,-8px) rotate(-45deg); transition: transform .3s; width: 40px; right: 0;top: 28px;} 
button.burger-btn.scroll-nav .bar {background-color: #3f3034;}
.nav-wrapper {visibility: hidden; height: 100%; right: 0; position: fixed; top: 93px; width: min-content; opacity: 0; transition: opacity .5s ; z-index: 20;}
.header-nav {
	background-color: #fff; height: 100%; width: 100%; z-index: 2; padding: 90px 0 30px; transition: 0.5s ease 0s; display: flex; padding-left: 0; padding-right: 0; overflow: scroll;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	justify-content: space-evenly;
}
.header-nav-list h2 {
	color: #f7931e;
}

h2.nav-lhythmic {
	color: #e72290 !important;
}
h2.nav-english-lhythmic {
	color: #ffd200 !important;
}

h2.nav-education-preschool {
	color: #02933f !important;
}
h2.nav-baby {
	color: #5b91ca !important;
}
h2.nav-music {
	color: #9f56a7 !important;
}

.header-nav-list h2 {
	font-size: 27px; font-weight: 400;text-align: left;
	margin-bottom: 0;
} 
.nav-list {
	margin-bottom: 30px;
}
.nav-list li {flex-basis: 100%; text-align: left;margin: 3px 0; position: relative;}
.nav-list li a {position: relative; text-decoration: none; transition: 0.5s ease 0s;}

.nav-wrapper.fade {opacity: 1; visibility: visible;}
.header-nav > div ul.header-nav > div ul {position: fixed; top: 20px; right: 0;}
.header-nav > div ul a  {font-size: 15px;display: block;
	border-bottom: 1px solid #ccc;padding: 6px 0; position: relative;}
.header-nav > div ul a::after {
	content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  margin: auto;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
  box-sizing: border-box;
}
.nav-item a {padding: 3% 5%;}
.nav-wrapper {width: 100%;}
.nav-wrapper.fade {width: 100%;background-color: #fff;}


@media screen and (orientation: landscape) {
	.header-nav {padding-bottom: 0;}
}

@media screen and (max-width:766px) {
	.header-nav {
		padding: 5vw 6vw 20vw;
		
	}
	.header-nav-list {
		width: 100%;
	}
	
	nav.header-bottom-nav {
		display: none;
	}
	.header-top-nav {
		display: none;
	}
	
	.header-nav > div ul a {
		padding: 4vw 0;
	}
	.nav-item a {padding: 3% 5%;}
	.burger-btn {
		position: fixed;
		top: 6px;
		right: 10px;
	}
	.nav-wrapper {
		top: 75px;
		
	}
	.header-nav-list h2 {
		font-size: 6vw;
		margin-bottom: -3vw;
	}
	.burger-btn_sp {
		display: block;
		 width: 45px;
		height: 50px;
		z-index: 30;
		border: none;
		top: 9px;
		right: 17px;
		position: absolute;
		z-index: 100;
	}
}	

/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * コンテンツ
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------共通------------------------------　*/
section { width:100%; }
section .inner { max-width:1200px; width: 90%; margin:0 auto; padding:100px 0; }
.ttl-wrapper {
	text-align: center;
	margin-bottom: 70px;
	position: relative;
}
.ttl-garland {
	display: inline-flex;
	flex-direction: column-reverse;
	
}
.ttl-garland h1 {
	text-align: center;
	font-weight: 500;
	letter-spacing: .2rem;
	position: relative;
	padding-left: 150px;
	padding-right: 150px;
}
.ttl-garland h1::before {
	content: '';
	background-image: url(img/top/img-garland-left.png);
	display: inline-block;
	  width: 105px;/*画像の幅*/
	  height: 25px;/*画像の高さ*/
	  background-size: contain;
	  vertical-align: middle;
	  position: absolute;
	top: 50%;
	left: 0%;
	-webkit-transform : translate(0%,-50%);
	transform : translate(0%,-50%);
}

.ttl-garland h1::after {
	content: '';
	background-image: url(img/top/img-garland-right.png);
	display: inline-block;
	  width: 105px;/*画像の幅*/
	  height: 25px;/*画像の高さ*/
	  background-size: contain;
	  vertical-align: middle;
	  position: absolute;
	top: 50%;
	right: 0%;
	-webkit-transform : translate(0%,-50%);
	transform : translate(0%,-50%);
	
}

.sub-ttl {
	text-align: center;
}
.txt_color {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .2rem;
  text-align: center;
  color: #f7931e; 
}

.colored-text span:nth-child(6n+1) {
  color: #dc4182;
}
.colored-text span:nth-child(6n+2) {
  color: #ffd500;
}
.colored-text span:nth-child(6n+3) {
  color: #3d77b2;
}
.colored-text span:nth-child(6n+4) {
  color: #dc4182;
}
.colored-text span:nth-child(6n+5) {
  color: #3d77b2;
}
.colored-text span:nth-child(6n+6) {
  color: #711a7c;
}

.ttl h1 img {display: block; margin: 0 auto;}
.ttl h2 img {display: block; margin: 0 auto;}
.btn-wrapper {margin-top: 40px;}
.bigbtn-wrapper {margin: 4rem auto 0; text-align: center;}

.btn {
	position: relative;
}
.btn::after {
	content: '';
	width: 7px;
	height: 7px;
	border: 0;
	border-top: solid 2px #fff;
	border-right: solid 2px #fff;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	right: 11px;
	bottom: 0;
	margin: auto;
	top: 2px;
}
a.more_btn {
	background-color: #f7931e;
	font-size: 15px;
	color: #fff;
	display: inline-block;
	padding: 15px 15px;
	border-radius: 5px;
	max-width: 260px;
	width: 100%;
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	transition: border-color .3s;
	line-height: 1;
	position: relative;
}
a.more_btn::after {
	content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  right: 15px;
	  width: 9px;
	  height: 9px;
	  margin: auto;
	  border-top: 2px solid #fff;
	  border-right: 2px solid #fff;
	  transform: rotate(45deg);
	  box-sizing: border-box;
}
a.more_bigbtn {
	background-color: #f7931e;
	font-size: 15px;
	color: #fff;
	display: inline-block;
	padding: 20px 15px;
	border-radius: 5px;
	max-width: 400px;
	width: 100%;
	font-size: 20px;
	font-weight: 500;
	text-align: center;
	letter-spacing: .1rem;
	position: relative;
}
a.more_bigbtn::after {
	content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  right: 15px;
	  width: 9px;
	  height: 9px;
	  margin: auto;
	  border-top: 2px solid #fff;
	  border-right: 2px solid #fff;
	  transform: rotate(45deg);
	  box-sizing: border-box;
}
ul.dots-list {
	list-style: disc;
	padding-left: 20px;
}
.btn-right {
	text-align: right;
}
a.btn_link {
	position: relative;
	text-decoration: underline;
	display: inline-block;
	padding: 10px 13px;
}
a.btn_link::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 9px;
	height: 9px;
	margin: auto;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	transform: rotate(45deg);
	box-sizing: border-box;
}


@media screen and (max-width:1200px){
	.ttl h1 {font-size: 3.9vw;}
}

@media screen and (max-width:766px) {
	main {
		margin-top: 75px;
	} 
	section .inner { width:90%; padding:60px 0; }
	
	.ttl-wrapper {
		margin-bottom: 50px;
	}
	.ttl {
		
	}
	.ttl h1 {
		font-size: 5vw;
	}
	.ttl-garland h1 {
		font-size: 7vw;
		padding-left: 0px;
		padding-right: 0px;
	}
	.ttl-garland h1::before {
		background-image: none;
	}
	.ttl-garland h1::after {
		background-image: none;
	}
	
	.txt_color {font-size: 4vw;
		letter-spacing: 0.4vw;}
	.img-garland {
		text-align: center;
		margin: 0 auto;
		width: 60vw;
	}
	.page-top {
    margin-top: -60px;
	}
	a.more_bigbtn {
		font-size: 5vw;
		max-width: 100%;
	}
	a.more_btn {
		font-size: 5vw;
		max-width: 100%;
	}
}

.page-top {position: relative;}

/*--------------------------------------------------------------------------------
 * kv
--------------------------------------------------------------------------------*/
.kv {
	background-color: #fefbf7;
}
.kv .inner {
	max-width: 1360px;
	padding: 0;
}

@media screen and (max-width:766px) {
	.kv .inner {
		padding: 8vw 0;
	}
}


/*--------------------------------------------------------------------------------
 * news
--------------------------------------------------------------------------------*/
.news .inner {
	padding: 0;
}
.news-wrapper {
	background-color: #ffeeda;
	display: flex;
	justify-content: space-between;
	padding: 37px 40px;
	box-shadow: 10px 10px 0 rgba(255, 219, 178, 1);
	margin-right: 10px;
}
.news .ttl {
	flex-basis: 15%;
	margin-bottom: 0;
}
.news .ttl h1 {
	/* 3f3034 */
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.6em;
	text-align: center;
}
.news .ttl h1 span {
	color: #ff9400;
	font-size: 30px;
	letter-spacing: 0.3em;
	display: block;
	font-weight: 500;
}
.news ul {
	flex-basis: 80%;
	
}
.news ul li {
	padding: 5px 0;
	border-bottom: 2px solid transparent;
	border-image: url('img/common/border-crayon.png') 30 repeat;
	/* background-image: url(img/common/svg/icon_tel.svg); */
}
.news ul li a {
	padding: 5px 0;
	display: block;
}
.news ul li dl {
	display: flex;
	flex-wrap: wrap;
}
.news ul li dt {
	margin-right: 30px; 
	font-size: 16px;
	color: #666666;
}
.news ul li dd {
	padding: 0;
	font-size: 16px;
}
.news .btn-wrapper {
	text-align: right;
}

@media screen and (max-width:766px) {
	.news {
		background-color: #fefbf7;
	}
	.news .inner {
		padding: 5vw 0;
	}
	.news-wrapper {
		background-color: #fefbf7;
		display: block;
		justify-content: space-between;
		padding: 0;
		box-shadow: none;
		margin-right: 0;
	}
	.news .ttl h1 {
		text-align: left;
		display: flex;
		align-items: baseline;
		font-size: 4vw;
		margin-right: 1vw;
	}
	.news .ttl h1 span {
		font-size: 5vw;
	}
	.news ul li dt {
		font-size: 4vw;
		flex-basis: 100%;
	}
	.news ul li dd {
		font-size: 4vw;
		flex-basis: 100%;
	}
	.news .btn-wrapper {
		text-align: center;
	}
}


/*--------------------------------------------------------------------------------
 * studios
--------------------------------------------------------------------------------*/
.studios p.lead {text-align: center; font-size: 18px;margin-bottom: 3rem;}
.studios-wrapper {
	display: flex;
	justify-content: space-between;
}
dl.search-box {
	flex-basis: 49%;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	background: #fff;
}
dl.search-box dt {
	background-color: #fed5a5;
	color: #4d4246;
	border-radius: 10px 10px 0 0;
	font-size: 26px;
	padding: 13px;
	text-align: center;
}
dl.search-box dd {
	padding: 2em 1.5em;
}

dl.search-box dd p.note {
	font-size: 14px;
	text-align: center;
	margin-top: 1rem;
}

@media screen and (max-width:766px) {
	.studios p.lead {
		text-align: justify;
		font-size: 4vw;
	}
	.studios-wrapper {
		flex-wrap: wrap;
	}
	dl.search-box {
		flex-basis: 100%;
		width: 100%;
		margin: 3vw 0;
	}
	dl.search-box dt {
		font-size: 5vw;
	}
}


/*----------------------------------- search -----------------------------------*/
.area-search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* flex-wrap: wrap; */
  box-sizing: border-box;
}

.area-search-form select {
  flex: 1;
  min-width: 250px;
  font-size: 16px;
  padding: 1em 1.5em;
  border: none;
  border-radius: 3rem;
  background-color: #fefbf7;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  background-image: url(img/common/svg/icon-chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 20px;
  border: 2px solid #f7931e;
}

select#area-select {
  flex: 1;
  min-width: calc(100% - 60px);
  font-size: 16px;
  padding: 1em 1.5em;
  border: none;
  border-radius: 3rem;
  background-color: #fefbf7;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  background-image: url(img/common/svg/icon-chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 1em center;
  background-size: 20px;
  border: 2px solid #f7931e;
}

.area-search-form .search-button {
  width: 50px;
  height: 50px;
  background-color: #f7931e;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  padding: 0;
}

.area-search-form .search-button:hover {
  transform: translateY(-2px);
}

.area-search-form .search-button .search-icon i {
	color: #fff; font-size: 1.2rem;
}




/*----------------------------------- keyword-search -----------------------------------*/
.keyword-search-form {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
/* flex-wrap: wrap; */
box-sizing: border-box;
}

.keyword-search-form input[type="text"] {
  flex: 1;
  min-width: calc(100% - 60px);
  font-size: 16px;
  padding: 1em 1.5em;
  border: none;
  border-radius: 10px;
  background-color: #fefbf7;
  outline: none;
  box-sizing: border-box;
  border: 2px solid #f7931e;
  border-radius: 3rem;
}

.keyword-search-form .search-button {
  width: 50px;
	height: 50px;
	background-color: #f7931e;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s;
	padding: 0;
}

.keyword-search-form .search-button:hover {
  transform: translateY(-2px);
}

.keyword-search-form .search-icon i {
	color: #fff; font-size: 1.2rem;
}

/*--------------------------------------------------------------------------------
 * pick up
--------------------------------------------------------------------------------*/
.pickup .inner {padding-bottom: 40px;}
.pickup .btn-wrapper {text-align: right;}

@media screen and (max-width:768px){
	.pickup .btn-wrapper {
		text-align: center;
	}
}


/* ------------------------------新着情報（トップページ）------------------------------　*/
ul.post { display:-webkit-box; display:-ms-flexbox; display:flex;
-ms-flex-wrap:wrap; flex-wrap:wrap; /*折り返す*/ 
margin-top:50px;}
ul.post li {flex-basis: 22.5%; margin-right: 3.3%;}
ul.post li img {border-radius: 5px; width:100%; height:190px; object-fit:cover; margin: 0 auto 30px; padding:0; }
ul.post li:nth-child(4n) {margin-right: 0;} 
ul.post li:nth-child(1) img {box-shadow: 10px 10px #f6c9d9;}
ul.post li:nth-child(2) img {box-shadow: 10px 10px #c7f5d5;}
ul.post li:nth-child(3) img {box-shadow: 10px 10px #fde983;}
ul.post li:nth-child(4) img {box-shadow: 10px 10px #c4e6f2;}
ul.post li p { font-size:14px; margin:0;}
ul.post li h3 { font-size:18px; margin:0; font-weight: 500;}


@media screen and (max-width:766px){
	ul.post {justify-content: space-between;}
	ul.post li {flex-basis:48%; margin:10px 0; padding:0 0 20px 0;}
	ul.post li h3 {font-size: 4vw;}
	ul.post li img {height: 30vw;margin: 0 auto 4vw;}
	ul.post li:nth-child(1) img {box-shadow: 5px 5px #f6c9d9;}
	ul.post li:nth-child(2) img {box-shadow: 5px 5px #c7f5d5;}
	ul.post li:nth-child(3) img {box-shadow: 5px 5px #fde983;}
	ul.post li:nth-child(4) img {box-shadow: 5px 5px #c4e6f2;}
}

/*--------------------------------------------------------------------------------
 * useful-information
--------------------------------------------------------------------------------*/
.useful-information .inner {
	max-width: 1260px;
	padding-top: 40px;
}

.useful-information-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: baseline; 
}
.useful-information-wrapper .ttl {
	margin-bottom: 30px;
}
.img-pickup-01 {flex-basis: 20%;}
.img-pickup-02 {flex-basis: 24%;}
.oyakudachi-box {flex-basis: 53%;}

.oyakudachi-box iframe {
	width: 100%;
}

.useful-information .btn-wrapper {margin-top: 40px;text-align: center;}

@media screen and (max-width:766px){
	.oyakudachi-box {flex-basis: 100%;}
	.oyakudachi-box .ttl + img {
		width: 100%;
	}
	.oyakudachi-box iframe {
		height: 60vw;
	}
}


/*--------------------------------------------------------------------------------
 * ourThoughts
--------------------------------------------------------------------------------*/
.ourThoughts-bg {
	background-color: #ffefda;
	padding-bottom: 50px;
}
.bottom-bg {position: relative;}
.bg-clover {position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 3%);
	transform: translate(-50%, 3%);}

.ourThoughts .inner {padding-bottom: 0;}
.ourThoughts-wrapper {display: flex; justify-content: space-between;margin-bottom: 4rem;}
.ourThoughts-wrapper .txt-wrapper {
	flex-basis: 65%;
}
.ourThoughts-wrapper .txt-wrapper h2 {
	font-size: 34px; font-weight: 500;
	text-align: left;
	margin-bottom: 30px;
}
.ourThoughts-wrapper .txt-wrapper p {
	font-size: 20px;
	line-height: 2.5;
}
.ourThoughts-wrapper .img-wrapper {
	margin-right: -30px;
}
.ourThoughts-wrapper .img-wrapper img {
	margin-bottom: 20px;
}
.ourThoughts-wrapper .img-wrapper p.name {
	font-size: 16px;
	text-align: center;
	margin-right: 30px;
}
.ourThoughts-wrapper .img-wrapper p.name span {
	font-size: 20px;
}

@media screen and (max-width:766px) {
	.ourThoughts-wrapper {
		flex-wrap: wrap;
		margin: 0;
	}
	.ourThoughts-wrapper .txt-wrapper {
		flex-basis: 100%;
	}
	.ourThoughts-wrapper .txt-wrapper h2 {
		font-size: 6vw;
	}
	.ourThoughts-wrapper .txt-wrapper p {
		font-size: 4vw;
	}
	.ourThoughts-wrapper .img-wrapper {
		flex-basis: 100%;
		margin-bottom: 6vw;
	}
	.ourThoughts-wrapper .img-wrapper img {
		display: block;
		margin: 0 auto 4vw;
	}
	.ourThoughts-wrapper .img-wrapper p.name {
		margin: 0;
	}
	
}

/*--------------------------------------------------------------------------------
 * lesson
--------------------------------------------------------------------------------*/
.lesson {
	background-image: url(img/top/bg-lhythmic-01.png),url(img/top/bg-lhythmic-02.png);
	background-repeat: no-repeat;
	background-size: 26vw , 15.5vw;
	background-position: 10% 7% , 92% 87%;
}
.lesson .inner {
	padding-bottom: 60px;
}
.lesson-wrapper {padding: 100px 0;}

/* ------------------------------lesson-ttl-wrapper------------------------------　*/
.lesson-ttl-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 6rem;
}
.lesson-ttl-wrapper .img-wrapper {
	flex-basis: 33%;
}
.lesson-ttl-wrapper .txt-wrapper {
	flex-basis: 65%;
}
.lesson-ttl-wrapper .txt-wrapper p {
	font-size: 18px;
}
.lesson-lhythmic-ttl {
	margin-left: -30px;
	position: relative;
}
.img-lhythmic {
	position: absolute;
	top: -180px;
	right: 0;
}

h2.lesson-ttl {
	font-size: 45px;
	font-weight: 500;
	text-align: left;
	letter-spacing: .1rem;
	position: relative;
	padding-left: 6rem;
}
h2.lesson-ttl::before {
	content: '';
	width: 77px;
	height: 81px;
	background-size: 77px;
	position: absolute;
	background-repeat: no-repeat;
	left: 0;
}
h2.lesson-ttl span {font-size: 15px; margin-left: 15px;letter-spacing: .15rem;}
h3.sub-ttl {font-size: 32px; font-weight: 500;}
h3.sub-ttl span {font-size: 18px; margin: 0 1rem 0; color: #333;} 
.lesson-wrapper h3 {font-size: 25px;font-weight: 500;text-align: left;}

@media screen and (max-width: 766px) {
	.lesson-ttl-wrapper {
		flex-wrap: wrap;
	}
	.lesson-ttl-wrapper .img-wrapper {
		flex-basis: 100%;
		margin-bottom: 5vw;
	}
	.lesson-ttl-wrapper .img-wrapper img {
		display: block;
		margin: 0 auto;
	}
	.lesson-ttl-wrapper .txt-wrapper {
		flex-basis: 100%;
		text-align: center;
	}
	.lesson-ttl-wrapper .txt-wrapper p {
		font-size: 4vw;
	}
	h2.lesson-ttl {
		text-align: center;
		padding-left: 0;
		font-size: 8vw;
	}
	h2.lesson-ttl::before {
		content: none;
	}
	h2.lesson-ttl span {
		display: block;
		margin-left: 0;
		font-size: 3vw;
		letter-spacing: .3vw;
	}
	.lesson-wrapper {
		padding: 6vw 0;
	}
	.lesson-ttl-wrapper h3 {
		font-size: 5.5vw;
		border-bottom: 1px solid #cccccc;
		border-top: 1px solid #cccccc;
		padding: 4vw 0;
		text-align: center;
	}

}

/*-------- lesson-lhythmic --------*/
h2.ttl-lhythmic {color: #e4007f;}
h2.ttl-lhythmic::before {background-image: url(img/top/icon-pink.png);}
h2.ttl-lhythmic span {color: #fd9fbd;}
.lesson-lhythmic h3.sub-ttl {color: #e4007f;}

/*-------- lesson-lhythmic-en --------*/
.lesson-lhythmic-en .lesson-ttl-wrapper {flex-direction: row-reverse;}
.lesson-lhythmic-en .lesson-ttl-wrapper .txt-wrapper {flex-basis: 66%;}

h2.ttl-lhythmic-en {color: #ff9400;}
h2.ttl-lhythmic-en::before {background-image: url(img/top/icon-orange.png);}
h2.ttl-lhythmic-en span {color: #ffa43a;}
.lesson-lhythmic-en h3.sub-ttl {color: #ff9400;}

@media screen and (max-width: 766px) {
	.lesson-lhythmic-en .lesson-ttl-wrapper .txt-wrapper {flex-basis: 100%;}
}





/* --------------------------
lesson-voice
------------------------------　*/
.lesson-voice-wrapper {
	display: flex;
	justify-content: space-between;
	position: relative;
}
.lesson-voice-wrapper .txt-wrapper p {
	line-height: 1.8;
}
.lesson-voice-wrapper .txt-wrapper .voice_name {font-weight: bold; text-align: right;}
.lhythmic-voice-wrapper h3.sub-ttl {text-align: right;}


@media screen and (min-width: 767px) {
	.lesson-voice-wrapper .txt-wrapper {
		background-color: #fff;
		padding: 45px 100px 45px 55px;
		max-width: 917px;
		border-radius: 10px;
		border: 1px solid;
	}
	
	/*-------- lesson-lhythmic --------*/
	.lhythmic-voice-wrapper .img-wrapper {
		position: absolute;
		top: -40px;
		right: 0;
	}
	.lhythmic-voice-wrapper .txt-wrapper {
		border-color: #e4007f;
	}
	
	/*-------- lesson-lhythmic-en --------*/
	.lesson-lhythmic-en .lhythmic-en-voice-wrapper {flex-direction: row-reverse;} 
	.lesson-lhythmic-en .lesson-voice-wrapper .txt-wrapper {border-color: #fcc478; padding: 45px 55px 45px 100px;}
	.lesson-lhythmic-en .lesson-voice-wrapper .img-wrapper {
		display: flex; flex-direction: column-reverse;
		position: absolute;
		bottom: -40px;
		left: 0;
	}
	.lesson-lhythmic-en .lesson-voice-wrapper .img-wrapper h3.sub-ttl {
		display: flex;
			flex-flow: row-reverse;
			text-align: left;
			align-items: baseline;
			margin-right: auto;
	}
}

@media screen and (max-width: 766px) {
	.lesson-voice-wrapper {
		flex-wrap: wrap;
		padding: 5vw;
		border-radius: 3vw;
	}
	.lesson-voice-wrapper h3 {
		font-size: 5vw;
	}
	.lesson-voice-wrapper .txt-wrapper {
		background-color: #fff;
		padding: 5vw;
		border-radius: 3vw 3vw 0 0;
	}
	.lesson-voice-wrapper .img-wrapper {
		flex-basis: 100%;
		background: #fff;
		padding: 3vw;
		border-radius: 0 0 3vw 3vw;
	}
	.lesson-voice-wrapper .img-wrapper  img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}
	
	/*-------- lesson-lhythmic --------*/
	.lhythmic-voice-wrapper {
		background-color: #fedde8;
	}
	.lhythmic-voice-wrapper .img-wrapper {
		position: relative;
	}
	
	/*-------- lesson-lhythmic-en --------*/
	
	.lhythmic-en-voice-wrapper {
		background-color: #ffeb76;
		
	}
}














/*-------- lesson-education --------*/
h2.ttl-education {color: #00960c;text-align: center;
	display: inline-block;padding-left: 0;}
h2.ttl-education::before {background-image: url(img/top/icon-green.png);left: -6rem;}
h2.ttl-education span {color: #52ce5c;}

@media screen and (max-width: 766px) {
	h2.ttl-education::before {
		left: -12vw;
	}
}



/*-------- lesson-baby --------*/
h2.ttl-baby {color: #3f7ec1;text-align: center;
	display: inline-block;padding-left: 0;}
h2.ttl-baby::before {background-image: url(img/top/icon-blue.png);left: -6rem;}
h2.ttl-baby span {color: #73abe8;}

@media screen and (max-width: 766px) {
	h2.ttl-baby::before {
		left: -12vw;
	}
}

/*-------- lesson-music --------*/
.lesson-music-ttl {
	position: relative;
	align-items: center;
}
.img-music {
	position: absolute;
	top: -40px;
	right: 0;
}
h2.ttl-music {color: #9c50a3;}
h2.ttl-music::before {background-image: url(img/top/icon-purple.png);}
h2.ttl-music span {color: #d88ce0;}


@media screen and (max-width: 766px) {
	h2.ttl-music::before {
		left: -7vw;
	}
	.lesson-music-ttl {
		margin: 32vw 0 11vw;
	}
}

/*-------- lesson-flex --------*/
.lesson-flex {display: flex; flex-wrap: wrap;justify-content: space-around;}
.lesson-box {flex-basis: 45%;}
.lesson-box .ttl-wrapper {text-align: center;margin-bottom: 20px;}
.lesson-box .img-wrapper {margin-bottom: 30px;}
.lesson-box .img-wrapper img {display: block; margin: 0 auto;}
.lesson-box .txt-wrapper {width: 80%; margin: 0 auto;}
.lesson-box h2.lesson-ttl span {display: block;}
.lesson-box .bigbtn-wrapper {margin: 2rem auto 0;}



@media screen and (max-width: 766px) {
	
	
	
	
	/*-------- lesson-lhythmic --------*/
	.lesson-lhythmic-ttl {
		margin-left: 0;
	}
	
	
	/*-------- lesson-flex --------*/
	.lesson-box  {
		flex-basis: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10vw;
	}
	
	.lesson-box .img-wrapper {order: 1;flex-basis: 100%;}
	.lesson-box .ttl-wrapper {order: 2;flex-basis: 100%;}
	.lesson-box .txt-wrapper {order: 3;flex-basis: 100%;}
	.lesson-box .bigbtn-wrapper{order: 4;flex-basis: 100%;}
}

/* ----------------------------lesson-teacher------------------------------　*/
.lesson-teacher-wrapper {padding: 100px 0 0 0;}
.lesson-teacher-wrapper h3.sub-ttl {border-bottom:1px solid #cccccc;padding-bottom: 10px;}
ul.lesson-teacher-list {display: flex;flex-wrap: wrap;margin-top: 120px;}
ul.lesson-teacher-list li {flex-basis: 32%; background-color: #fff; margin-right: 2%;padding: 35px;
	border-radius: 10px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);}
ul.lesson-teacher-list li:last-of-type {margin-right: 0;}
ul.lesson-teacher-list li .img-wrapper {display: block; width: 127px; height: 127px; border-radius: 50%; border: 5px solid;margin: -100px auto 30px;}
.lhythmic-teacher-voice ul.lesson-teacher-list li .img-wrapper {border-color: #ffcedf;}

h4.teacher-company {font-size: 16px; font-weight: 400;margin: 0; text-align: center;}
h4.teacher-name {font-size: 16px; font-weight: 500;text-align: center;border-bottom: 1px solid #cccccc; padding-bottom: 20px;} 
h4.teacher-name span {font-size: 20px; font-weight: 600;}


@media screen and (max-width: 766px) {
	ul.lesson-teacher-list li {
		flex-basis: 100%;
		padding: 7vw;
	}
	ul.lesson-teacher-list li:not(:last-of-type) {
		margin-bottom: 25vw;
	} 
	.lhythmic-teacher-voice ul.lesson-teacher-list li .img-wrapper {
		margin: -23vw auto 2vw;
	}
}



/*-------- lesson-lhythmic-en --------*/
.lhythmic-en-teacher-voice .img-wrapper {border-color: #ffeb76 !important;}
.lhythmic-en-teacher-voice .bigbtn-wrapper {position: relative;}
.img-lhythmic-en {position: absolute; bottom: -45px; left: 100px;}
	
/*-------- lesson-features --------*/	
.lesson-features-wrapper{display: flex;justify-content: space-between;}
.lesson-features {flex-basis: 48.5%;
	padding: 30px;
	border: 3px dashed #d88ce0;
	position: relative;
}
.lesson-features h3 {
	background-image: url(img/top/icon-purple-dark.png);
		background-repeat: no-repeat;
		position: absolute;
		background-size: 6.8rem;
		width: 6.8rem;
		height: 6.8rem;
		color: #fff;
		top: -2rem;
		left: -2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
}
.lesson-features h4 {
	font-size: 24px;
	text-align: center;
}
.lesson-features-box {display: flex;justify-content: space-between;margin-bottom: 12px;}
.lesson-features-box .img-wrapper {flex-basis: 48%;}
.lesson-features-box .img-wrapper img {
	width: 100%;
}
.lesson-features .bigbtn-wrapper {
	margin: 1rem auto 0;
}

@media screen and (max-width: 766px) {
	.lesson-features-wrapper {
		 flex-wrap: wrap;
	}
	.lesson-features {
		flex-basis: 100%;
		padding: 4vw;
	}
	.lesson-features:not(:last-of-type) {
		margin-bottom: 11vw;
	} 
	.lesson-features p {
		
	}
	
	.img-lhythmic-en {
		bottom: 17vw;
		right: 5vw;
		width: 38vw;
		left: auto;
	}
}




/*--------------------------------------------------------------------------------
 * if
--------------------------------------------------------------------------------*/
.teachers_voice {
	background-color:  #ffefda;
	
	position: relative;
}
.teachers_voice::before {
	content: '';
	background-image: url(img/top/bg-giza.png);
	background-repeat: repeat-x;
	position: absolute;
	top: -10px;
	background-size: contain;
	left: 0;
	width: 100%;
	background-position: 0 0%;
	height: 100%;
}
.teachers_voice::after {
	content: '';
	background-image: url(img/top/bg-giza.png);
	background-repeat: repeat-x;
	transform: rotate(180deg);/* 回転 */
	position: absolute;
	bottom: -10px;
	background-size: contain;
	left: 0;
	width: 100%;
	background-position: 0 0%;
	height: 100%;
}

.teachers_voice .ttl {
	border-bottom: 1px solid #cccccc;
	margin-bottom: 4rem;
}
.teachers_voice .ttl h1 {
	/* 3f3034 */
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 0.4em;
}
.teachers_voice .ttl h1 span {
	color: #ff9400;
	font-size: 32px;
	letter-spacing: 0.2em;
	font-weight: 500;
	margin-right: 2rem;
}

.balloon {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
}

.balloon .faceicon {
  margin-right: 30px;
  width: 130px;
  background: #aaa;
  height: 130px;
  border-radius: 50%;
}

.balloon .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #fff;
  border-radius: 50%;
}

.balloon .chatting {
  width: calc(100% - 150px);
}


.says {
  display: inline-block;
  position: relative; 
  padding: 30px;
  border-radius: 12px;
  background: #fff;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #fff;
}

.says p {
  margin: 0;
  padding: 0;
  font-size: 18px;
}
.says p.name {
	text-align: right;
	font-size: 16px;
}


@media screen and (max-width:766px) {
	.teachers_voice .ttl h1 {
		font-size: 6vw;
	}
	.teachers_voice .ttl h1 span {
		font-size: 6vw;
		display: block;
	}
	.balloon .faceicon {
		width: 60px;
		height: 60px;
		margin-right: 0;
	}
	.balloon .chatting {
		max-width: -webkit-calc(100% - 70px);
		max-width: calc(100% - 70px);
		width: calc(100% - 70px);
		margin-left: 20px;
	}
	.says {
		padding: 5vw;
	}
	.says p {
		font-size: 4vw;
	}
}

/*--------------------------------------------------------------------------------
 * course
--------------------------------------------------------------------------------*/
.course {
	background-image: url(img/top/bg-course.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
ul.course-wrapper li {
	display: flex;
	justify-content: space-between;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
	background-color: #fff;
}
ul.course-wrapper li:not(:last-of-type) {
	margin-bottom: 30px;
}
ul.course-wrapper li .txt-wrapper {
	padding: 30px;
	flex-basis: 70%;
}
ul.course-wrapper li .txt-wrapper h2 {
	font-size: 28px;
	color: #f7931e;
	font-weight: 500;
	text-align: left;
	margin-bottom: 10px;
}
ul.course-wrapper li .txt-wrapper p {
	font-size: 18px;
}

ul.course-wrapper li .img-wrapper {
	flex-basis: 30%;
}
ul.course-wrapper li .img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
ul.course-wrapper li .btn-wrapper {
	margin-top: 5px;
	text-align: right;
}

@media screen and (max-width:766px) {
	ul.course-wrapper li {
		flex-wrap: wrap;
		flex-direction: column-reverse;
		border-radius: 10px;
		overflow: hidden;
	}
	ul.course-wrapper li .txt-wrapper {
		flex-basis: 100%;
		padding: 6vw;
	}
	ul.course-wrapper li .txt-wrapper h2 {
		font-size: 5vw;
	}
	ul.course-wrapper li .txt-wrapper p {
		font-size: 4vw;
	}
	ul.course-wrapper li .img-wrapper {
		flex-basis: 100%;
	}
	ul.course-wrapper li .btn-wrapper {
		text-align: center;
	}
}


/*--------------------------------------------------------------------------------
 * CTA
--------------------------------------------------------------------------------*/

.cta {}
ul.cta-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 30px;
}
ul.cta-wrapper li.contact-btn {
	flex-basis: 48%;
	position: relative;
}
ul.cta-wrapper li.contact-btn img {
	display: block;
	margin: 0 auto;
}
ul.cta-wrapper li.contact-btn a {
	font-size: 32px;
	display: block;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
}
ul.cta-wrapper li.contact-btn a:hover {
	opacity: 0.7;
}
a.contact-school-btn {
	background-color: #ff3f86;
	color: #fff;
}
a.contact-lesson-btn {
	background-color: #ffd500;
	color: #333;
}
.cta .btn-wrapper {
	background-color: #0083c7;
	border-radius: 10px;
	padding: 30px;
}
.cta .btn-wrapper h2 { color: #fff; 
	text-align: center;
	font-size: 32px;
}
a.contact-tel-btn {
	background-color: #fff;
	color: #0083c7;
	position: relative;
}
a.contact-tel-btn::before {
	content: '';
	background-image: url(img/common/icon-phone-blue.png);
	display: inline-block;
	width: 36px;
	height: 62px;
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	background-repeat: no-repeat;
	left: 30px;
}

a.contact-mail-btn  {
	background-color: #fff;
	color: #0083c7;
	position: relative;
}

a.contact-mail-btn::before {
	content: '';
	background-image: url(img/common/icon-mail.png);
	display: inline-block;
	width: 55px;
	height: 36px;
	background-size: contain;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(0%, -50%);
	transform: translate(0%, -50%);
	background-repeat: no-repeat;
	left: 30px;
}

@media screen and (max-width:766px){
	.cta .btn-wrapper {
		padding: 30px 5vw;
	}
	.cta .btn-wrapper h2 {
		font-size: 5vw;
	}
	ul.cta-wrapper {
		flex-wrap: wrap;
		margin: 0;
	}
	ul.cta-wrapper li.contact-btn {
		flex-basis: 100%;
		margin: 2vw 0;
	}
	
	ul.cta-wrapper li.contact-btn a {
		font-size: 4vw;
	}
	a.contact-tel-btn {
		font-size: 6vw !important;
		padding: 13px 0 !important;
	}
	a.contact-tel-btn::before { 
		width: 6vw;
		height: 10vw;
		left: 6.5vw;
	}
	a.contact-mail-btn::before {
		width: 9vw;
		height: 6vw;
		left: 5vw;
	}
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 問い合わせフォーム（page_contact.php）
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
.page_contact .img-01 {
	position: absolute;
	top: -40px;
	left: 90px;
}
.page_contact .img-02 {
	position: absolute;
	top: -100px;
	right: 160px;
}

dl.form{ width:100%; margin:50px 0 0 0; }
dl.form dt,dl.form dd { padding:30px 0; }
dl.form dt { clear:left; float:left; width:34%; font-size:14px; border-top:1px solid #ccc; }
dl.form dt:first-child { border-top:0; }
dl.form dd { margin-left:33%; border-top:1px solid #ccc; padding-left: 20px;}
dl.form dt:first-child,
dl.form dt:first-child + dd { border-top:0; }
.acceptance-wrapper {
	margin: 30px auto;
}
.acceptance-wrapper p {
	text-align: center !important;
}
.acceptance-wrapper a {
	text-decoration: underline;
}
@media screen and (max-width:768px){
	dl.form dt,dl.form dd { padding:0; }
	dl.form dt { clear:both; float:none; width:100%; font-size:12px; border-top:1px solid #ccc; padding:20px 0 10px 0; }
	dl.form dd { margin-left:0%; border-top:none; padding-bottom:20px; }
}

/* ------------------------------プレースホルダーの色・サイズ指定------------------------------　*/
input::-webkit-input-placeholder { color:#999999; font-size:14px; }
input:-moz-placeholder { color:#999999; font-size:14px; }
textarea::-webkit-input-placeholder { color:#999999; font-size:14px; }
textarea:-moz-placeholder { color:#999999; font-size:14px; }

/* ------------------------------コンタクトフォーム７------------------------------　*/
div.wpcf7 { display:block; width:100%; margin:0 auto!important; box-shadow:none; background:transparent; }
div.wpcf7 p { padding:0; margin:0; line-height:1.5; text-align: left;}
div.wpcf7 input, .wpcf7 textarea , .wpcf7 select { 
	width: 100%;
	/* border: 1px solid #fef5e9; */
	padding: 25px;
	font-size: 16px;
	border-radius: 5px;
	background: #fef5e9;
	border: 1px solid #f7931e;
}
div.wpcf7 textarea { height:215px; }
div.wpcf7 select { height:60px; padding:15px; }
.wpcf7 input:focus, .wpcf7 textarea:focus { border:1px solid #009de1; }
.wpcf7-captchac { border:1px solid #ccc; }
span.wpcf7-list-item { margin:0!important; }

@media screen and (max-width:768px){
	div.wpcf7 { width:100%; }
	div.wpcf7 p { margin:0; }
	div.wpcf7 input, .wpcf7 textarea , .wpcf7 select { padding:15px; }

}

/* ------------------------------エラー個所をわかりやすく表示------------------------------　*/
.wpcf7 .wpcf7-not-valid { background:#ffb6c1; }
.wpcf7 span.wpcf7-not-valid-tip { font-size:80%; }
.wpcf7 .wpcf7-response-output {margin:10px 0 0; padding:8px 35px 8px 14px; text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 4px; -moz-border-radius:4px; border-radius:4px; }
.wpcf7 .wpcf7-validation-errors { color:#B94A48; background-color:#F2DEDE; border:1px solid #EED3D7;}
.wpcf7 .wpcf7-mail-sent-ok { color:#3A87AD; background-color:#D9EDF7; border:1px solid #BCE8F1;}
/* 必須赤色表示 */
.wpcf7 .required { color: #000000;}
/* 任意緑色表示 */
.wpcf7 .any{ color: #080;}
/* select { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:100%; } */
.hissu{ background:#cd4a38; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-weight:bold; border-radius:3px; font-size:10px; }
.nini{ background:#777777; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-weight:bold; border-radius:3px; font-size:10px; }

/* ------------------------------送信ボタン------------------------------　*/
div.wpcf7 input[type="submit"] {  }
div.wpcf7 input.wpcf7-submit { -webkit-appearance:none; margin:0 auto; background:none; display:block; font-size:18px; width:100%; height:100px; margin:0 auto; border:2px solid #fff!important; border-radius:5px; color:#fff; background:linear-gradient(-135deg , #f7931e, #f7931e); }
div.wpcf7 input.wpcf7-submit:hover { border:2px solid #fff; background:linear-gradient(135deg , #f7931e, #f7931e); color:#fff; transition:.3s ease; }

/* ------------------------------チェックボックスのデザイン------------------------------　*/
input[type=checkbox] { display:none; }
.wpcf7-list-item  { padding:10px 0; }
.wpcf7-list-item-label { position:relative; padding:0 10px 0 50px; top:0px; }
.wpcf7-list-item-label:hover:after { border-color:#dce5eb; }
.wpcf7-list-item-label:after,  .wpcf7-list-item-label:before { position:absolute; content:""; display:block; top:50%; }
.wpcf7-list-item-label:after { left:0px; margin-top:-20px; width:36px; height:36px; border:1px solid #dce5eb; border-radius:3px; background:#f1f5f7; z-index:997; }
.wpcf7-list-item-label:before { left:15px; margin-top:-9px; width:5px; height:9px; border-right:3px solid #c1272d; border-bottom:3px solid #c1272d; transform:rotate(45deg); opacity:0; z-index:998; }
input[type=checkbox]:checked + .wpcf7-list-item-label:before { opacity:1; }

input[type=radio] { display:none; }
input[type=radio] + .wpcf7-list-item-label:after { border-radius:100%!important }
input[type=radio] + .wpcf7-list-item-label:before { border:none; width:10px; height:10px; border-radius:5px; background:#102942; left:14px; margin-top:-6px; }
input[type=radio]:checked + .wpcf7-list-item-label:before { opacity:1; }

@media screen and (max-width:768px){
	.wpcf7-list-item  { padding:10px 0; }
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * フッター
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
.footer { 
	position:relative; width:100%; margin:0; background:#fff;   
}
.color-border {
  width: 100%;
	height: 4px;
	background: linear-gradient(
	  to right,
	 #ffd500 0%,
	   #ffd500 14.29%,
	   #009435 14.29%,
	   #009435 28.57%,
	   #0083c7 28.57%,
	   #0083c7 42.86%,
	   #b95faf 42.86%,
	   #b95faf 57.14%,
	   #ff3f86 57.14%,
	   #ff3f86 71.43%,
	   #ff9400 71.43%,
	   #ff9400 85.71%,
	   #ffd500 85.71%,
	   #ffd500 100%
	);
}
.footer .inner {
	/* max-width: 1200px; */
	width: 95%;
	margin: 0 auto;
	padding: 10px 0 20px;
}
ul.footer-top,
ul.footer-middle{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 10px 0;
}
ul.footer-top li,
ul.footer-middle li
 {
	position: relative;
}
ul.footer-top li:not(:last-of-type)::after {
	content: '|';
}
ul.footer-top li a,
ul.footer-middle li a {
	display: inline-block;
	padding: 10px 20px;
	font-size: 14px;
}
.footer .logo-wrapper {text-align: center;text-align: center;margin: 20px 0;}
.footer .logo-wrapper a {display: inline-block;padding: 10px;}
.footer .logo-wrapper p {color: #fff; font-size: 14px; text-align: center;}
.footer ul.sns-wrapper{display: flex;justify-content: center;margin-bottom: 20px;}
.footer ul.sns-wrapper li a {display: block;padding: 13px;}
.footer ul.sns-wrapper i {font-size: 36px;}
address { font-size:13px; text-align:center;}


@media screen and (max-width:766px){
	ul.footer-top {
		display: none;
	}
	ul.footer-middle li {
		flex-basis: 50%;
	}
	.footer .logo-wrapper {
		width: 80%;
		margin: 0 auto;
	}
}


/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * その他（jQueryなど）
 *
 *
 *
 *
--------------------------------------------------------------------------------*/

/* ------------------------------ページトップへ戻る------------------------------　*/
#pageTop { position:fixed; bottom:20px; right:20px;z-index: 10;}
#pageTop a { display:block; z-index:999; margin:0; padding:0; width:90px; height:90px; 
	/* background:url(img/top.png) no-repeat 0 0;  */
	background: #f7931e;
	color: #fff;
	border-radius: 50%;
	display: flex;
		align-items: center;
		justify-content: center;
		
}
#pageTop a:hover { text-decoration:none; opacity:0.7; }
@media screen and (max-width:768px){
	#pageTop , #pageTop a { display:none; }
}

/* ------------------------------グローバルナビ上部固定------------------------------　*/
.fixed { position:fixed; top:0; width:100%; z-index:10000; }
@media screen and (max-width:768px){
.fixed { position:static; }
}

/* ------------------------------ページ下部固定CTA------------------------------　*/
#buttonTow , #buttonTow a { display:none; }
@media screen and (max-width:768px){
#buttonTow { position:fixed; bottom:0; background:rgba(0,0,0,0.5); width:100%; height:auto; z-index:1000; }
#buttonTow #box01 { width:50%; float:left; background:#fdbbc5; background-size:contain; padding:20px 10px;}
#buttonTow #box02 { width:50%; float:right; background:#fc9eae; background-size:contain; padding:20px 10px;}
#buttonTow a { display:block; text-align:center; font-size:14px; color:#ffffff; }
#buttonTow a img { margin:0 auto; padding:0; }
#buttonTow a:hover { text-decoration:none; opacity:0.7; }
}

/* ------------------------------ページ下部固定CTA_PC------------------------------　*/
#buttonPc { position:fixed; bottom:0; background:#191e32; width:100%; height:auto; z-index:1000; }
#buttonPc a#pc_box { display:block; width:100%; height:auto; color:#ffffff; padding:15px 0; text-align:center; font-size:16px; }
#buttonPc a:hover { text-decoration:none }

@media screen and (max-width:768px){
	#buttonPc { display:none; }
	#buttonPc a#pc_box { display:none; }
}

/* ------------------------------アコーディオン------------------------------　*/
.accordion dl, .accordion dt, .accordion dd{ margin:0; padding:0; }
.accordion dl {background-color: #fff; margin: 15px 0;padding: 0 20px;}
.accordion dt {display: block; width: 100%;height: auto;cursor: pointer;background: #ffffff;margin: 0;padding: 27px 30px 27px 16px;position: relative;}
.accordion dt::before, .faq dt:after {position: absolute;right: 0; content: ""; display: block; margin-left: auto;width: 26px;height: 2px;background-color: #f7931e;top: 50%; }
.accordion dt::after {-webkit-transform: rotate(90deg); transform: rotate(90deg);-webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
.accordion dt.close {border-bottom: 1px solid #cccccc;}
.accordion dt.close:after {-webkit-transform: rotate(0);transform: rotate(0); } 
.accordion dt p {line-height: 1.4; position: relative; padding-left: 50px;margin: 0;}
.accordion dt p::before {content: 'Q'; color: #e8380d; font-size: 30px;position: absolute; top: -10px; left: 0;}
.accordion dd { width:100%; height:auto; display:none; margin:0; padding: 27px 30px 27px 65px; position: relative; line-height: 1.6;}
.accordion dd::before {content: 'A';color: #333333;font-size: 30px;
position: absolute;
top: 22px;
left: 20px;
}
.accordion dd h2 {text-align: left;font-size: 22px;}
.accordion dd img { border-radius:20px; border:3px solid #000000; box-shadow:6px 6px rgba(0,0,0,0.3); margin:0 0 30px 0;}
.accordion br { display:inline; }

@media screen and (max-width:766px){
	.accordion dl {padding: 0 4vw;}
	.accordion dt {padding: 5vw 10vw 5vw 0vw;}
	.accordion dt p {padding-left: 8vw; font-style: 4.5vw;}
	.accordion dt.close {margin-bottom: 20px;}
	
	.accordion dt p::before {font-size: 22px;top: -3px;}
	.accordion dd {padding: 0vw 0vw 8vw 11vw;}
	.accordion dd::before {font-size: 22px;top: 0px;
		left: 3px;}
	.accordion dd h2 {font-size: 18px;}
}

@media screen and (max-width:466px){
	.accordion dt p {font-size: 16px;padding-left: 35px;}
	.accordion dd h2 {font-size: 16px;}
}


/* ------------------------------フェードインアニメーション------------------------------　*/
.sa {opacity: 0; transition: all .5s ease; } /* ノーマル */
.sa.show {opacity: 1; transform: none; } /* ノーマル */
.sa-lr {transform: translate(-100px, 0); } /* 右から */
.sa-rl {transform: translate(100px, 0); } /* 左から */
.sa-up {transform: translate(0, 100px); } /* 下から */
.sa-down {transform: translate(0, -100px); } /* 上から */
.sa-scaleUp {transform: scale(.5); } /* 縮小→拡大 */
.sa-scaleDown {transform: scale(1.5); } /* 拡大→縮小 */
.sa-rotateL {transform: rotate(180deg); } /* 左回転 */
.sa-rotateR {transform: rotate(-180deg); } /* 右回転 */

/* ------------------------------ふわふわ------------------------------　*/
@keyframes horizontal {
    0% { transform:translateX( -5px); }
  100% { transform:translateX(  0px); }
}
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
img.huwahuwa { animation: horizontal 2s ease-in-out infinite alternate; }
img.huwahuwa { animation: vertical 2s ease-in-out infinite alternate; }
img.huwa01 { animation-duration: 1.1s}
img.huwa02 { animation-duration: 1.3s}
img.huwa03 { animation-duration: 1.5s}

/* ------------------------------吹き出しを作る------------------------------　*/
/* .balloon { margin:0 0 2em 0; position:relative; }
.balloon:before,.balloon:after { clear:both; content: ""; display: block; }
.balloon figure { width:80px; height:80px; margin:0; padding:0; }
.balloon-image-left {float:left; margin-right:20px; margin-left:0; }
.balloon-image-right {float:right; margin-left:20px; }
.balloon figure img { width:100%; height:100%; border-radius:50%; border:1px solid #cccccc; }
.balloon-image-description { padding:5px 0 0; font-size:10px; text-align:center; }

.balloon-text-right,
.balloon-text-left { position:relative; padding:15px 20px; border-radius:10px; max-width: -webkit-calc(100% - 120px); max-width: calc(100% - 120px); display:inline-block; background:#ffffff; border:1px solid #cccccc; }
.balloon-text-right { float:left; margin-left:10px; }
.balloon-text-left { float:right; margin-right:10px; background:#00bee6; }
.balloon-text-left p { color:#ffffff; }

.balloon p { margin:0; padding:0; font-size:14px; }
.balloon p:last-child { margin-bottom:0; } */
/* 三角部分 */
/* .balloon-text-right:before {position:absolute; content: ''; border:10px solid transparent; border-right:10px solid #cccccc; top:15px; left:-20px; }
.balloon-text-right:after {position:absolute; content: ''; border:10px solid transparent; border-right:10px solid #fff; top: 15px; left:-19px; }
.balloon-text-left:before {position:absolute; content: ''; border:10px solid transparent; border-left:10px solid #cccccc; top: 15px; right:-20px; }
.balloon-text-left:after {position:absolute; content: ''; border:10px solid transparent; border-left:10px solid #00bee6; top:15px; right:-19px; } */

/