@charset "UTF-8";

/*==================================================
アコーディオンのためのcss
===================================*/

#narrowing_down{
	width:auto;
	height:auto;
	min-width:100%;
	min-height:100%;
	position:relative;
	background:url(../img/review_bg.png)no-repeat;
  background-size: cover;
	padding-bottom:120px;
	padding-top:80px;
}
#narrowing_down h2{
	margin:0 auto;
	color:#000000;
	font-size:50px;
	margin-bottom:60px;
}
/*アコーディオン全体*/
.accordion-area{
    list-style: none;
    width:1024px;
    max-width:1024px;
    margin:0 auto;
}
.accordion-area ul{
  position:relative;
}
.accordion-area li:before{
    content:"Q";
    display:inline-block;
    padding:12px 17px;
    background-color:#ffffff;
    position:absolute;
    border-radius:25px;
    font-weight:bold;
    margin:20px;
    z-index:1;
}
.accordion-area li h3{
  color:#ffffff;
  background-color: #000000;
  margin:0px;
  margin-bottom:20px;
}
.accordion-area li p{
    color:#000000;
    font-size:16px;
    font-weight:bold;
    margin:0;    
    margin-bottom:12px;
}
.accordion-area li p:last-child{
    margin-bottom:40px;
}
.accordion-area li:nth-child(3){
  margin:0;
}
.accordion-area section.visual{
	background:url(../img/narrowing_visual.png) no-repeat;
  background-size:29%;
}
.accordion-area section.thumbnail{
	background:url(../img/narrowing_thumbnail.png) no-repeat;
  background-size:29%;
}
.accordion-area section.design{
	background:url(../img/narrowing_design.png) no-repeat;
  background-size:29%;
}
/*アコーディオンタイトル*/
.title {
    position: relative;/*+マークの位置基準とするためrelative指定*/
    cursor: pointer;
    font-size:1rem;
    font-weight: bold;
    padding: 3% 3% 3% 100px;
  transition: background-color .3s ease;
}

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

/*　closeというクラスがついたら形状変化　*/

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

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

/*アコーディオンで現れるエリア*/
.accordion-area li .box {
  height: 0;
  overflow: hidden;
}
.box {
    overflow: hidden;
}
.box::after {
  content: "";
  display: block;
  clear: both;
}
section.visual .box .lead{
  width:300px;
  margin:0 auto;
  padding-bottom:10px;
}
section.visual .box .copy{
  width:400px;
  margin:0 auto;
  padding-bottom:20px;
}
section.thumbnail .box .lead{
  width:400px;
  margin:0 auto;
  padding-bottom:10px;
}
section.thumbnail .box .copy{
  width:350px;
  margin:0 auto;
  padding-bottom:20px;
}
section.design .box .lead{
  width:400px;
  margin:0 auto;
  padding-bottom:10px;
}
section.design .box .copy{
  width:300px;
  margin:0 auto;
  padding-bottom:20px;
}
.box p{
  font-size:12px;
}
.box ul{
  overflow:hidden;
  width:540px;
  margin: 0 auto;
}
.box ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.box ul li{
  float: none;
}
.box div.thumbnail_img{
  width:400px;
  margin: 0 auto;
}

/*========= レイアウトのためのCSS ===============*/

h2{
    text-align: center;
    margin: 30px 0;
    font-size:1rem;
}





@media (max-width: 480px) { 
.box p{
  font-size:18px;
  margin:0;
}
.box ul{
  overflow:hidden;
  width:auto;
  margin: 0 auto;
}
.box ul li{
  width:auto;
  float:none;
  margin:0 auto;
  padding:20px 0;
}
.box div.thumbnail_img{
  width:auto;
  margin: 0 auto;
  padding:20px 0;
}
.accordion-area{
    list-style: none;
    width:auto;
    max-width:auto;
    margin:0 auto;
}
.title {
    font-size:20px;
    padding:3% 10% 3% 100px;
}
.accordion-area section.visual{
  background-size:39%;
}
.accordion-area section.thumbnail{
  background-size:39%;
}
.accordion-area section.design{
  background-size:39%;
}
section.visual .box .copy{
  width:auto;
  margin:0 20px;
}
section.visual .box .lead{
  width:auto;
}
section.thumbnail .box .lead{
  width:auto;
}
section.thumbnail .box .copy{
  width:auto;
}
section.design .box .lead{
  width:auto;
}
section.design .box .copy{
  width:auto;
}
/*=======================================
	#narrowing_down sp
=======================================*/
#narrowing_down{
	padding-top:60px;
	padding-bottom:80px;
}