@charset "UTF-8";
/* CSS Document */


@media only screen and (max-width : 768px) {

/*-------------------------------------------------------------------------------------
スマホ用レイアウト（768px以下スクリーン）
----------------------------------------------------------------------------------------*/

/*--------------------------------------------------
共通設定(スマホ)
-----------------------------------------------------*/
	
/*body全体の初期スタイル調整*/
body {
	width: 100%;
  -webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}

/*--------------------------------------------------
見出しタグ設定（スマホ）
-----------------------------------------------------*/
h2 {
    font-size: 1.6em;
    margin: 1em auto;
}

    
/*--------------------------------------------------
全体レイアウト／背景設定（スマホ）
-----------------------------------------------------*/
/*全体エリア（全体背景を設定するにはここ）*/
.main {
}
/*記事(ボディ)エリア*/
.article {
  border-left: none;
  border-right: none;
  font-size: 1.5em; /*=16px*/
}
/*記事(ボディ)エリアの行間*/
.article p {
  line-height: 1.8;
}
/*カラム全体の幅を変更する*/
.article, .top_image_in {
  width: 100%;
  margin: 0 auto; /*真ん中に要素を置きたいときに使う*/
}
/*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
/*ヘッダー内部をカラム幅にする*/
.header_inr {
  max-width: 100%;
  margin: 0.5em auto;
}
/*ヘッダーのロゴ*/
.header_logo {
  width: 30%;
}

h2 {
        font-size: 1.6em;
        letter-spacing: 1px;
    }
    
    h3 {
        font-size: 1.4em;
        margin: 1em 0 0.5em;
        padding: 6px;
    
    }

    h4 {
      font-size: 1.2em;
    
    }
    
    .mincyo {
    font-size: 1.3em;
    }
    
    
    



/*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
.top_image {
  background-image: none;
}
.top_image_in img {
  width: 100%;
}
/*--------------------------------------------------
CTA
-----------------------------------------------------*/


.ctn_cta {
  background-image: url("../images/bg_cta.jpg");
  background-size: cover;
  padding: 2em 0.5em;
  }
  
  .btn_cta {
    width: 95%;
  
  }
  .tit_cta {
    width: 85%;
    margin: 0 auto 2em;
  }


/*--------------------------------------------------
voice
-----------------------------------------------------*/
.sec_voice {
  padding: 2em 0.5em;
 
 }
.tit_voice {
  width: 80%;
  margin: 0 auto 2em;
}

.box_voice {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  margin-bottom: 1em;
}

.img_voice {
  width: 90%;
  margin: 0 auto;
}

.txt_voice {
  padding-top: 1em;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;


}

/*--------------------------------------------------
point
-----------------------------------------------------*/
.sec_point {
  background-image: url("../images/bg_point.jpg");
  background-size: cover;
  padding: 2em 0;
 
 }
.tit_point {
  width: 70%;
  margin: 0 auto 2em;
}

.box_point {
  margin-bottom: 1em;
}

/*--------------------------------------------------
case
-----------------------------------------------------*/
.sec_case {
  background-image: url("../images/bg_case.jpg");
  background-size: cover;
  padding: 2em 0;
 
 }

 .box_case {
  background-color: #fff;
  padding: 1em;
  border-radius: 20px;
  width: 95%;
  margin: 1em auto 0.5em;
}
.txt_case {
  padding: 0.5em;
}


/*--------------------------------------------------
スライダー
-----------------------------------------------------*/

.slider {
  margin: 20px auto 0;
  max-width: 950px;
  width: 100%;
}
.slider-img {
  margin: 0 5px;
}
.slider-img img {
  height: auto;
  width: 100%;
}


/*--------------------------------------------------
price
-----------------------------------------------------*/
.sec_price {
  background-color: #c7b286;
  padding: 2em 0.5em;
 
 }

.ctn_price {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 1em;
}



 .box_taiken {
  padding: 1em ;
  width: 100%;
  margin: 0 auto ;

}
.inr_taiken  {
  border: 1px solid #c7b286;
  padding: 1em;
}



.box_kobetu {
  padding: 1em 1em;
}

/*--------------------------------------------------
story
-----------------------------------------------------*/
.sec_story {
  padding: 2em 0.5em;
 
 }

 .box_story {
  padding: 1em ;
  width: 100%;
}
.inr_story  {
  border: 1px solid #c7b286;
  padding: 1em;
}

.box_lesson {
  background-color: #fff;
  padding: 0.5em 0 1em;
}

.ctn_lesson {
  padding: 1em ;
}


/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
.sec_faq {
  background-color: #eee8e0;
  padding: 1em 0.5em;

}

.accordion {
  max-width: 100%;
  padding: 1em 0em ;
  text-align: left;
  margin: 0 auto;
}

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

ここからアコーディオンのCSS

------------------------------*/
/* チェックボックスは非表示 */
.accordion-hidden {
  display: none;
}

/* Question部分 */
.accordion-open {
  display: block;
  padding: 0.5em 2em 0.5em 0.5em;
  cursor: pointer;
  margin: 5px 0;
  position: relative;
  font-weight: bold;
  text-align: left;
  background: #fff;
  /* 変更部分 */
}

/* 開閉状態を示すアイコン+の作成 */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 15px;
  height: 2px;
  background: #c7b286;
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translateY(-50%);
}

/* 一本は縦にして+を作る */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたら縦棒を横棒にして-にする */
.accordion-hidden:checked + .accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* Answer部分 */
.accordion-close {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
}

/* チェックボックスにチェックが入ったらAnswer部分を表示する */
.accordion-hidden:checked + .accordion-open + .accordion-close {
  height: auto;
  opacity: 1;
  background: #eee;
  padding: 10px 0.5em;

}

.sec_form {
  background-image: url("../images/bg_form.jpg");
  background-size: cover;
  padding: 2em 0.5em;
}




}