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



/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 80%;
    max-width: 900px;
    margin:0 auto;
}

.accordion-area li{
    margin: 10px 0;
}

.accordion-area section {
	border: 1px solid #D1A0C9;
}

/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
    padding: 3% 3% 3% 50px;
    transition: all .5s ease;
	font-family:" メイリオ", Meiryo, Osaka,"Hiragino Maru Gothic ProN","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro,"Yu Gothic", YuGothic,"ヒラギノ丸ゴ ProN W4", " ＭＳ Ｐゴシック", MS PGothic," sans-serif","Droid Sans";
	text-align: center;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    background-color: #D1A0C9;
    
}
.title::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
	transform: rotate(45deg);
}

.title.close::after{
	transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.accordion {
    display: none;/*はじめは非表示*/
    background: #fff;
	margin:0 3% 3% 3%;
    padding: 3%;
}


 /*sakamoto アコーディオンメニュー*/
/*
  アコーディオンそのものの横幅と余白を指定。
  開閉動作に影響なし。
*/
.accordion__list {
  list-style: none;
	width: 80%;
	max-width: 
  padding: 10px;
	border: 1px solid #D1A0C9;
	margin: 0 auto;
	margin-bottom: 40px;
}
.title02{
	position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: normal;
   /* padding: 0.5% 0% 0.5% 40px;*/
    transition: all .5s ease;
	font-family:" メイリオ", Meiryo, Osaka,"Hiragino Maru Gothic ProN","ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro,"Yu Gothic", YuGothic,"ヒラギノ丸ゴ ProN W4", " ＭＳ Ｐゴシック", MS PGothic," sans-serif","Droid Sans";
	text-align: center;
}
.title02::before,
.title02::after{
    position: absolute;
    content:'';
    width: 15px;
    height: 2px;
    /*background-color: #D1A0C9;*/
    
}
.title02::before{
    top:48%;
    left: 15px;
    transform: rotate(0deg);
    
}
.title02::after{    
    top:48%;
    left: 15px;
    transform: rotate(90deg);

}

/*　closeというクラスがついたら形状変化　*/
.title02.close::before{
	transform: rotate(45deg);
}

.title02.close::after{
	transform: rotate(-45deg);
}

/*
  アコーディオンの開閉をつかさどる、
  type="checkbox" を指定しているinputタグ。
  inputタグそのものは非表示にする。
*/
.accordion__input {
  display: none;
}

/*
  アコーディオンの2つ目以降、上に余白を取る。
  開閉動作に影響なし。
*/
.accordion__item:nth-child(n+2) {
  margin-top: 10px;
}

/*
  アコーディオンの開閉ボタンの装飾。
  position: relative;が無いと、
  「+」「-」の位置がずれるので注意。
*/
.accordion__head {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
  color: #fff;
  background: #fff;
  cursor: pointer;
}

/*
  アコーディオンの開閉ボタンの右側に「+」を表示。
*/
.accordion__head::after {
  content: "+";
  position: absolute;
  top: 8px;
  right: 10px;
}

/*
  アコーディオンの閉じている部分の装飾。
  height: 0; overflow: hidden;にすることで、
  通常時は表示されないようにする。
*/
.accordion__body {
  overflow: hidden;
  width: 100%;
  height: 0;
  padding: 0 10px;
  background: #fff;
  transition: all .25s ease;
}

/*
  アコーディオンの開閉ボタン（labelタグ、class="accordion__head"）をクリックすると、
  対となっているinputタグ（class="accordion__input"）がチェック状態（checked）になる。

  チェック状態のinputタグの隣の隣にある、
  アコーディオンの閉じている部分（class="accordion__body"）の
  heightとpaddingを変更し、アコーディオンを開いた状態にする。
*/
.accordion__input:checked + .accordion__head + .accordion__body {
  height: auto;
  padding: 10px;
}

/*
  チェック状態のinputタグの隣にある、開閉ボタンの「+」を「-」に変更する。
*/
.accordion__input:checked + .accordion__head::after
  {
  content: "-";
  right: 13px;
}