@charset "UTF-8";

/*=== アコーディオンのためのcss ===*/
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width: 230px;
    max-width: 900px;
    margin:0 auto;
    letter-spacing: 1.6px;
}
@media screen and (max-width: 576px){
 .accordion-area{
    width: 100%;
	margin-bottom: 24px;
 }
}
.accordion-area li{
 text-align: left;
 margin: 0 0;
 width: 100%;
 clear: both;
}
.accordion-area section {
 border-bottom: 1px solid #ddd;
}
.accordion-area h3:first-of-type {

}
.accordion-area h3:last-of-type {

}

/*メインカテゴリ*/
.menu_icon {
    display:inline-block;
    width: 10%;
    height:auto;
}
.title,
.titleNonCnts {
    position: relative; /*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: normal;
    padding: 18px 12px 16px 2px;
    background-color: #fff;
	transition: all .5s ease;
}

/*開閉アイコンの形状*/
.title::before,
.title::after{
    position: absolute;
    content:'';
    width: 8px;
    height: 2px;
	background-color: #666;
}
.title::before{
    top:48%;
    right: 16px;
    transform: rotate(-45deg);
}
.title::after{    
    top:48%;
    right: 20px;
    transform: rotate(45deg);
}
.title img,
.titleNonCnts img{
	display: inline-block;
	margin: 0 8px 0 10px;
}

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

.titleNonCnts::before,
.titleNonCnts::after{
    position: absolute;
    content:'';
    width: 8px;
    height: 2px;
    background-color: #666;
}
.titleNonCnts::before{
    top:44%;
    right: 17px;
    transform: rotate(45deg);
}
.titleNonCnts::after{    
    top:52%;
    right: 17px;
    transform: rotate(-45deg);
}
/*　closeというクラスがついたら形状変化　*/
.titleNonCnts.close::before{
 transform: rotate(315deg);
}
.titleNonCnts.close::after{
 transform: rotate(45deg);
}

.titleNonCnts a,
.titleNonCnts a:visited {
 display: block;
 color: #333;
 text-decoration: none;
}


/*アコーディオンで現れるエリア*/
.box {
    list-style: none;
    display: none;/*はじめは非表示*/
    margin:0 3% 0 3%;
    padding: 0;
}
.box li {
 display: block;
 text-align: left;

 border-bottom: 1px solid #efefef;
}
.box li:first-child {
 border-top: 1px solid #efefef;
}
.box li:last-child {
 border-bottom: none;
}
.box li a {
 display: block;
 padding: 1.2em 1em 1.2em;
 color: #333;
 text-decoration: none;
 transition:background 1s ease;
}
.box li a:hover {
 background-color: #eee;
}

.titleNonCnts a {
 display: block;
 padding: 18px 12px 16px 2px;
}

.titleNonCnts {
 padding: 0;
}

/*=== レイアウトのためのCSS ===*/
h2{
    text-align: center;
    margin: 30px 0;
    font-size:1rem;
}

.buttonBlock {
 margin: 2em 0 1em;
 width: 350px; 
}
.button {
 display:inline-block;
 background:#fff url(/blog/images/arrow.png) right 12px center no-repeat;
 width:100%;
 height:70px;
 line-height: 70px;
 border: 2px solid #e7e7e7; 
 border-radius: 4px;
 text-align: center;
 text-decoration: none;
 color: #9c887e!important;
 vertical-align:center;
 margin: 6px 0;
}

.button img {
 margin:12px 0 0;
}
.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .5s;
}
.button:hover {
 text-decoration: none;
 color: #9c887e;
 opacity: 0.7;
}

/*=== SNSボタンのcss ===*/
div.footerTop {
 display: flex;
 align-items: flex-end;
}
div.footerTopL {
 width: 68%;
}
div.footerTopR {
 width: 32%;
 margin: 0 auto;
 font-size: 40px;
}
div.footerTopR a {
 color:#444;
}

div.footerTopR a i.fa-facebook-square,
div.footerTopR a i.fa-instagram,
div.footerTopR a i.fa-line {
 margin-right: 24px;
}
div.footerTopR a:hover {
 color:#888;
}

/*=== ページトップのためのCSS ===*/
/*リンクの形状*/
p#page-top a{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #7c7c7c;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase; 
  text-decoration: none;
  font-size: 30px;
  transition:all 0.3s;
}

p#page-top a:hover{
  background: #aaa;
  color: #fff;
}

/*リンクを右下に固定*/
p#page-top {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 2;
  /*はじめは非表示*/
  opacity: 0;
  transform: translateY(100px);
}

/*　上に上がる動き　*/
p#page-top.UpMove{
  animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }
  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*　下に下がる動き　*/
p#page-top.DownMove{
  animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
    opacity: 1;
  transform: translateY(0);
  }
  to {
    opacity: 1;
  transform: translateY(100px);
  }
}


/* スマホ 上段Nav */
.navBar ul li {
 text-align:center;
}
.spNav {
 font-size:0.8em;
 list-style: none;
 display: flex;
 width: 100%;
 justify-content: space-between;
 margin: 0;
 padding: 0;
 border-bottom: 1px solid #ccc;
}
.spNav li {
 width: 33%;
 align-items: center;
 text-align: center;
 border-right: 1px solid #ccc;
 display: flex;

 align-items: center;
}
.spNav li.laste {
 border-right: none;
}
.spNav li span {
 font-size:0.8em;
 display: block;
}
.spNav li a {
 display: block;
 width: 100%;
 margin: auto;
 padding: 12px 0 10px;
 text-decoration: none;
 text-align: center;
 background: #fff;
 color: #555; 
}

/* スマホ sideメニュー */
#sideMenu .loginBtn li img.spClose {
    width:180%;
    height:auto;
    padding:10% 8%;
}
#sideMenu .menu_text_box {
    display:inline-block;
    width: 90%;
	font-size:1em;
	letter-spacing: 1.6px;
    padding: 8px 0;
    margin:0;
    vertical-align:bottom;
    text-align:left;
}
.menu_text_box i.fas {
 color: #aaa;
}

.menu_box {
    width:92%;
    padding-top:3%;
    padding-bottom:1%;
    padding-right:4%;
    padding-left:4%;

}