/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

@charset "UTF-8";
/* CSS Document */
/* 
Theme name: 古賀順子ピアノ教室
Theme URI: https://koga-junko-piano.com/
Description: 古賀順子ピアノ教室
Version: 1.0
Author: jono
 */


html{
  font-size:
    62.5%;/*16px ×　62.5%=10px*/
}
body{
  overflow-x: hidden;
  max-width: 100%;
	background-color:#fffdf7;
  margin: 0;
  padding: 0;
  color: #707070;
  font-family: source-han-sans-japanese, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.2rem;
}
.title,.nav_container{
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-style: normal;
  font-weight: 700;
}
body{
	-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
	animation: fadeIn 1.5s ease 0s 1 normal;
}
@keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
	0% {opacity: 0}
	100% {opacity: 1}
}
section{
  margin: 0 auto;
}
ul{
	padding: 0;
	margin: 0;
}
img{
  max-width: 100%;
}
.inner{
  max-width: 100%;
  overflow-x: hidden;
}
.pc_br{
  display: none;
}
a{
  text-decoration: none;
}

/* -----------共通クラス名-------------------- */

.section_inner{
  margin-bottom: 60px;
  max-width: 100%;
}
.text_center{
  text-align: center;
}
.shadow{
  -webkit-box-shadow: 0 6px 10px -6px rgba(0,0,0,.3);
          box-shadow: 0 6px 10px -6px rgba(0,0,0,.3);
}
.uppercase{
  text-transform: uppercase;
}
.btn_gp{
  list-style: none;
  width: 80%;
  margin: 0 auto;
}
._btn{
  margin: 20px 0;
}
/* -----------反転文字色-------------------- */
.white{
  color: #fcfaf2;
}

/* -------------slick--------------- */

.slick-dots li button::before{
  content: "♪";
  font-size: 2.0rem;
}

/* //////////////////////////////////////
スマートフォン
////////////////////////////////////// */
/* -----------sp-title-------------------- */
/* h1 */
.site_title{
  font-size: 1.8rem;
  line-height: 1;
  top: -4px;
}
/* h2 */
.site_subtitle{
  font-size: 1.6rem;
}
/* h3 */
.section_title{
  font-size: 2.0rem;
  background-image: url(../images/new/sp_h3bgi.png);
  background-size: cover;
  width: 100vw;
  text-align: center;
  vertical-align: middle;
  line-height: 60px;
  position: relative;
  margin: 50px 0 40px;
}
.first{
  margin-top: 0;
}
/* h4 */
.element_title{
  font-size: 1.8rem;
  text-align: center;
  width: 240px; 
  line-height: 40px;
  border-bottom: dotted 3px #EF8C58;
  border-top: dotted 3px #EF8C58;
  margin: 40px auto 32px;
}
/* h6 */
.paragraph_title{
  font-size: 1.2rem;
}
/* ----------------共通テキスト------------------ */
.text_container{
  width: 80vw;
  margin: 0 auto;
}
.text_container p{
  margin-bottom: 16px;
  line-height: 1.8;
}
.element_container{
  margin-bottom: 60px;
}
.text_shadow{
  text-shadow:0 0 10px #7fa2b9;
}
/* -----------ナビゲーション--------------------- */
body{
  position: absolute;
}
nav{
  position: relative;
  display: none;
  z-index: 9998; 
}
nav a{
  text-decoration: none;
  color: #fff;
}
.nav_container{
  width: 100vw;
  height: 100vh;
  background-image: url(../images/nav_img.jpg);
  background-size: 130%;
}
.nav_container dl{
  line-height: 1.5;
  padding: 100px 24px 0;
}
.nav_container dt:first-of-type{
  margin-top: 0;
}
.nav_container dt{
  font-size: 2.0rem;
  margin:24px 0 16px;
  text-shadow:0 0 10px #bed1dd;
}
.nav_container dd{
  font-size: 1.6rem;
  margin-bottom: 12px;
  padding-left: 20px;
  text-shadow:0 0 10px #bed1dd;
}
.tel_btn{
  width: 80%;
  margin: 60px auto ;
}
nav{
  color:#fff;
}
/* -----------sp-header--------------------- */
.header_inner{
  background-image: url(../images/new/sp_header.jpg);
  background-size: cover;
  height: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 16px;
  position: fixed;
  width: 100%;
  z-index: 9999;
}
.site_title span{
  font-size: 1.0rem;
  padding-left: 2px;
}
/* -----------sp-header-btn--------------------- */
/*menu_btn*/
.header_title{
	position: relative;
}
.btn-trigger{
	position: absolute;
	top: 5.5px;
	right: 15px;
	/* background-color: #EF8C58; */
	height: 40px;
	width: 40px;
	padding: 0;
	border-radius:0;
}
/*btn-close*/
.side_menu{
	position: relative;
}
.btn-close{
  position: absolute;
  display: none;
  right: 15px;
	padding: 0;
	height: 40px;
	width: 40px;
	/* top: 16px; */
	/* left  : -48px; */
	/* background-color: #8fafc3; */
}
.btn-close use:nth-of-type(1) {
	-webkit-transform: translateY(30px) rotate(-45deg);
	-ms-transform: translateY(30px) rotate(-45deg);
	    transform: translateY(30px) rotate(-45deg);
}
.btn-close use:nth-of-type(2) {
	-webkit-transform: translateX(35px) translateY(-15px) rotate(45deg);
	-ms-transform: translateX(35px) translateY(-15px) rotate(45deg);
	    transform: translateX(35px) translateY(-15px) rotate(45deg);
}
/* -----------スマホファーストビュー--------------------- */
.fv{
  height: 100vh;
  background-image: url(../images/fv_bgi2.png);
  background-size: cover;
  background-position: bottom;
}
.fv_items{
  padding-top: 20vh;
}
.site_subtitle{
  padding-bottom: 15vh;
  width: 90vw;
  margin: 0 auto;
}
.fv_text{
  margin-bottom: 32px;
  font-size: 1.4rem;
  width: 90vw;
  margin: 0 auto;
}
.fv .tel_btn{
  margin-top: 32px;
}
.site_subtitle span{
  font-size: 2.4rem;
}
/* ----------------年齢別------------------- */
.item_box{
  width: 90vw;
  height: auto;
  margin: 0 auto 40px;
  border-radius: 24px;
  padding: 16px;
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
          box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.item_box img{
  width: 65%;
  display: block;
  margin: 0 auto;
}
.item_box:first-of-type{
  background-color: #FFE4EF;
}
.item_box:nth-of-type(2){
  background-color: #E0F3FA;
}
.item_box:last-of-type{
  background-color: #FFF2CC;
}
.in_box_title{
  font-size: 1.8rem;
  border-bottom: dotted 3px #EF8C58;
  text-align: center;
  margin-bottom: 16px;
}
/* ----------------地頭力・本番力------------------- */
.skill_image img:first-of-type{
  margin-bottom: 16px;
}
/* ----------------生徒さんの声------------------- */
.voice_box{
  width: 90vw;
  padding: 16px;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 8px;
}
.voice_box .text_container{
  margin-left: 0;
}
.voice_box .title{
  margin-left: -6px;
  margin-bottom: 8px;
  line-height: 2;
}
.voice .element_title{
 width: 100%;
}
.kids {
  background-color: #F1EDDB;
}
.ad {
  background-color: #DFF1DB;
}
.voice_box .title{
  font-size: 1.4rem;
  border: none;
  text-align: left;
}
/* ----------------大人のピアノレッスン------------------- */
.img_title{
  width: 60vw;
  margin: 0 auto;
  margin-bottom: 16px;
}
.ad_class .text_container{
  margin-bottom: 32px;
}
.ad_item{
  margin-bottom: 16px;
}
.voice .ad .text_center:last-of-type{
  height: auto;
}
/* ----------------教室詳細のご案内------------------- */




/* ----------------講師プロフィール------------------- */
.name{
  font-size: 1.8rem;
}
.plofile_img{
  padding-top: 16px;
}
/* ----------------イベントスケジュール------------------- */
.event_text{
  padding-left: 16px;
}
.event_text p{
  font-size: 1.6rem;
  line-height: 1;
  padding: 0 0 8px 8px;
}
.tikushi{
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-style: normal;
  font-weight: 700;
}
.event .slick01 li img{
  width: 90%;
  margin: 0 auto;
  margin-bottom: 16px;
}
.event_img_container{
  padding-left: 24px;
}
.schedule{
  margin: 32px 0;
}
.event2{
  margin-bottom: 32px;
}
.colona_bnr{
  margin: 0 5% 20px 5%;
}
.event_text{
  margin-bottom: 16px;
}
/* ----------------教室詳細------------------- */
.detail img{
  width: 98vw;
  margin: 0 auto;
}
/* ----------------アクセス------------------- */
.map_container{
  width: 300px;
  margin: 0 auto;
  margin-bottom: 32px;
}
.access .in_box_title{
  border-bottom: none;
  margin-bottom: 8px;
  line-height: 1;
  text-align: left;
}
.map{
  text-align: center;
}
.address_text{
  font-size: 1.4rem;
}
/* ----------------スマホフッター------------------- */
footer{
  background-image: url(../images/new/sp_footer.jpg);
  background-position: center;
  background-size: cover;
  text-align: center;
  line-height: 1;
}
.footer_inner{
  padding: 16px;
}
footer h2{
  font-size: 1.8rem;
}
.footer_title{
  margin-bottom: 16px;
}
.footer_title p{
  margin-bottom: 8px;
}
footer address{
  font-style: normal;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
@media screen and (min-width:768px){
/* //////////////////////////////////////
PC
////////////////////////////////////// */
body{
  font-size: 1.4rem;
  max-width: 100%;
  overflow-x: hidden;
}
header .btn-close .btn-trigger{
  display: none;
}
.btn_gp{
  list-style: none;
  display: flex;
  width: 900px;
  margin: 0 auto;
}




/* -----------PC-text_container-------------------- */
.text_container{
  width: 60vw;
}
.element_container{
  margin-bottom: 96px;
}
.pc_br{
  display: inline;
}
.btn_gp{
  justify-content: space-between;
}
.footer_btn{
  text-align: center;
  width: 30%;
}
.fv .tel_btn{
  margin-top: 60px;
  text-align: center;
}
/* -----------PC-header-------------------- */
.header_inner{
  background-image: url(../images/new/pc_header.png);
  height: 60px;
}

/* -----------PC-title-------------------- */
/* h1 */
.site_title{
  font-size: 2.4rem;
  margin-bottom: 16px;
  margin-left: 80px;
}
.site_title span{
  display: inline-block;
  font-size: 1.4rem;
  margin-bottom: 4px;
}
/* h2 */
.site_subtitle{
  font-size: 2.0rem;
  padding-bottom: 10vh;
}
.site_subtitle span{
  font-size: 3.2rem;
}
/* h3 */
.section_title{
  background-image: url(../images/new/pc_h3bgi.png);
  font-size: 2.4rem;
  margin: 60px 0 80px;
}
.first{
  margin-top: 0;
}
/* h4 */
.element_title{
  font-size: 2.4rem;
  width: 320px;
  line-height: 48px;
  margin-bottom: 64px;
}
/* -----------PC-FV-------------------- */
.fv_items{
  padding-top: 15vh;
}
.fv_text{
  font-size: 1.6rem;
}
.fv .tel_btn img{
  width: 360px;
}

.nav_container{
  background-size: 100%;
  background-position-y: 50%;
}
.lesson_img{
  width: 40%;
}
/* ----------------年齢別------------------- */
.kids_old{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.kids_old .item_box{
  width: 30vw;
  margin: 16px;
  height: auto;
}
.kids_old .text_container{
  width: 80%;
}
/* ----------------SKILL------------------- */
.skill_image img:first-of-type{
  margin: 0;
}
.skill_image{
  margin: 0 auto;
  text-align: center;
}
/* ----------------生徒さんの声------------------- */
.voice{
  max-width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.voice_box{
  width: 40vw;
  margin: 0 10px 24px;
}
.voice_box .text_container{ 
  width: 100%;
}
.voice_box .title{
  width: 100%;
  font-size: 1.8rem;
}
.voice_box .element_title{
  font-size: 2.4rem;
}
/* ----------------大人のピアノ教室------------------- */
.ad_class{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.ad_class .img_title{
  width: 200px;
}
.ad_item{
  width: 28vw;
  margin: 40px 10px 0;
}
.ad_class .main_text{
  width: 100%;
}
.main_text p,.ad_class span{
  width: 60%;
  display: block;
  margin: 0 auto;
}
.ad_item .text_container{
  width: 80%;
}
.voice .ad .text_center:last-of-type{
  height: auto;
}
.ad_class .tel_btn{
  margin-bottom: 0;
}
/* ----------------講師紹介-------------------*/
.plof{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.name{
  font-size: 2rem;
  margin: 0;
}
.plof .text_container{
  width: 35%;
}
.plofile_img{
  width: 24%;
  height: 270px;
  padding-right: 24px;
}
.plof .text_container{
  margin: 0;
}
/* ----------------イベント-------------------*/
.event{
  text-align: center;
}
.event2{
  margin-bottom: 96px;
}
.colona_bnr{
  width: 60%;
  margin: 0 auto;
  margin-bottom: 40px;
}
.event .slick01 li img{
  width: 40%;
  margin: 0 auto;
}
/* ----------------教室詳細-------------------*/
.detail img{
  width: 50%;
}
.detail{
  text-align: center;
}
/* ----------------MAP------------------- */
.access{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.map_container{
  margin: 0 40px;
}
/* ----------------footer------------------- */
footer{
  background-image: url(../images/new/pc_footer.jpg);
}
.footer_inner{
  padding: 32px;
}
.footer_title{
  font-size: 2rem;
}
.footer_title h2{
  font-size: 2.8rem;
}
footer address{
  font-size: 1.2rem;
}
}
/*font-color//////////// 
header/footer...
#8CB8CA

font/bgc...
#FCFAF2

3-5sai...
#FFE4EF

5-9sai...
#E0F3FA

9-12sai...
#FFF2CC

kidscomme...
#F1EDDB

adcomme...
#DFF1DB

point/btn...
#EF8C58
///////////////////////*/
/* font-family ///////////////////////////////////
原ノ角ゴシック
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;

font-family: source-han-sans-japanese, sans-serif;
font-weight: 300;
font-style: normal;

font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
--------------------------------------------------
筑紫丸ゴシックA
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;

font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
--------------------------------------------------
筑紫丸ゴシックB
font-family: fot-tsukubrdgothic-std, sans-serif;
font-style: normal;
font-weight: 400;

font-family: fot-tsukubrdgothic-std, sans-serif;
font-style: normal;
font-weight: 700;
/////////////////////////////////////////////////*/