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


.border1{
	border:5px solid #ffda60;
	padding:2em;
	font-size: 1.1em;
	line-height: 2em;
	letter-spacing: 1px;
}

div.center{
	text-align: center;
}

h2.point:before{
	content: '';
	display: inline-block;
	width: 33px;
	height: 40px;
	background-image: url('https://www.alsoj.net/images/flute/article/271/img_rabbit.gif');
	background-repeat: no-repeat;
	position:relative;
	top:14px;
	
}

h2.point .none{
	margin: 0 0 0 1em;
}

#main_left #magazine_main h2.qa {
  position: relative;
  background: #ffffff;
  padding: 1em 0.5em;
  border-left: solid 4em #d283ac;
  border-top: solid 2px #d283ac;
  border-bottom: solid 2px #d283ac;
  border-right: solid 2px #d283ac;
  font-weight: 400;
  font-size: 1.4em;
  line-height: 1.6em;
}

h2.qa:before {
  position: absolute;
  padding: 0em;
  color: white;
  font-weight: bold;
  left: -2.6em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

h2.c01:before {content: "Q1";}
h2.c02:before {content: "Q2";}
h2.c03:before {content: "Q3";}
h2.c04:before {content: "Q4";}
h2.c05:before {content: "Q5";}
h2.c06:before {content: "Q6";}
h2.c07:before {content: "Q7";}

.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em auto;
  padding: 7px 10px;
width: 96%;
  color: #FFFFFF;
  font-size: 16px;
  background: #d283ac;
  border-radius: 15px;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #d283ac;
}

.midashi02{
position: relative;
left: 2em;
margin-bottom: 0;
}

.midashi02:before{
content: "●";
  position: absolute;
  padding: 0em;
  color: #d283ac;
  font-weight: bold;
  left: -1em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.midashi03{
position: relative;
left: 2em;
margin-bottom: 0;
}

.midashi03:before{
content: "♪";
  position: absolute;
  padding: 0em;
  color: #d283ac;
  font-weight: bold;
  left: -1em;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.comment_ans{
	padding: 1em 2em;
	margin: 0 0 2em;
	background-color: #db9cbd;
}

#main_left #magazine_main .item p{
	margin: 0 0 3rem;
	padding: 0;
}

div.question{
	background-image: url('https://www.alsoj.net/images/flute/article/271/bg_question.gif');
}

div.question span.none{
	background-color: #000000;
	font-weight: bold;
	color: #FFFFFF;
	padding: 1em;
	margin: 0 0 0 3em;
}

#main_left #magazine_main h2.question{
	font-size: 1rem;
	line-height: 2rem;
}

#main_left #magazine_main h2.question span.none{
	font-size: 2rem;
}

.percent{
	font-size: 3em;
}

#main_left #magazine_main #magazine_Pspace ul{
	list-style: disc;
}

#main_left #magazine_main #magazine_Pspace li{
	list-style: disc;
	font-size: 15px;
	margin: 0 0 1em;
}

#main_left #magazine_main #magazine_Pspace ul.fukidashi{
	list-style: none;
	list-style-position: outside;
	padding-left: 20px;
}

#main_left #magazine_main #magazine_Pspace ul.fukidashi li:before{

	content: '';
	display: inline-block;
	width: 40px;
	height: 27px;
	background-image: url('https://www.alsoj.net/images/flute/article/271/fukidashi.gif');
	background-repeat: no-repeat;
	position:relative;
	top:4px;
	
}

#main_left #magazine_main #magazine_Pspace ul.fukidashi li{
	list-style: none;
	text-indent:-40px;
	padding-left:1rem;
}


h2.chapter1,
h2.chapter2{
	border-bottom: 3px dotted #ffacb2;
	margin: 0 0 0 5rem;
}

h2.chapter1:before,
h2.chapter2:before{
	content: '';
	display: inline-block;
	width: 135px;
	height: 80px;
	background-repeat: no-repeat;
	position:relative;
	top:40px;
}

h2.chapter1:before{
	background-image: url('https://www.alsoj.net/images/flute/article/271/chapter1.gif');
}

h2.chapter2:before{
	background-image: url('https://www.alsoj.net/images/flute/article/271/chapter2.gif');
}

/* PC */
@media (min-width:1000px){ 

	.box2_rs,
	.box3_rs{
		display: flex;
		justify-content:space-between;
	}

	/* box2_rs */
	.box2_rs .item{
		width: 47%;
	}
	.box2_rs .item img{
		max-width: 100%;
	}

	/* box3_rs */
	.box3_rs .item{
		width: 33%;
	}
	.box3_rs .item img{
		max-width: 100%;
	}

	/**/
	.box2_31_rs .item{

	}

	.scroll,.scroll2 {
	    height: auto;
		margin:0.5em auto;
	    padding: 5px;
	    overflow: scroll;
	    -webkit-overflow-scrolling: touch;
	}

}
/* SP */
@media (max-width:999px){

	/* box2_rs */
	.box2_rs .item,
	.box3_rs .item{
		width: 100%;
	}

	.box2_rs .item img,
	.box3_rs .item img{
		max-width: 100%;
	}

	.box2_rs .caption,
	.box3_rs .caption{
		font-size: 0.8em;
		margin: 0 0 2em;
		display: block;
	}

	.scroll,.scroll2 {
	    height:auto;
		margin:1em auto;
	    padding: 5px;
	    overflow: scroll;
	    -webkit-overflow-scrolling: touch;
	}


	#magazine_main #magazine_Pspace .scroll img{
		width: auto;
		height: 400px;
	}

	#magazine_main #magazine_Pspace .scroll2 img{
		width: auto;
		height: 100px;
	}
}