@charset "utf-8";
  
/*----------Reset-------*/

*{ margin: 0;padding: 0}
a { text-decoration : none}
a:hover, a:focus { text-decoration: underline;}
ul, ol { list-style : none;}
img { vertical-align : middle;}

.clearfix:after {clear: both;}
.clearfix:before, .clearfix:after {content: " ";display: table;}

button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;}
button, input { line-height: normal;}

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

select {
padding: 3px;}

textarea, input[type="text"], input[type="email"], input[type="password"] {
display: block;
width: 100%;
border-radius: 5px;
border: 2px solid #ccc;
padding: 5px 10px;
outline: none;}


/*----------Fluid-img-------*/
img { width : 100%; height: auto;}

.mb20 { margin-bottom : 20px;}
.mt20 { margin-top : 20px;}

/*----------Body-------*/
body {
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, 'ＭＳ Ｐゴシック', 'ＭＳ ゴシック', sans-serif !important;
font-size: 100%;
font-style: normal;
line-height:1.4em;
color: #000;
background: #0aaefd url(../images/background-s.jpg) repeat-y left top;
background-size: 100% auto;
}

header { 
background-color: rgba(255,255,255,0.5);
-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.6);  
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.6);}

header h1 { 
padding : 10px;}

header a.logo { 
float : left; width: 30%;}
header a.tel { 
float : right; width: 60%;}


/*----------balloon-------*/

#baloon{
     margin: 10px;}
     
#baloon img{ vertical-align: bottom;}

.question_box,
.answer_box{
     width:86%;
     position: relative;
     margin: 10px 0;}

.question_box{float: right;}
.answer_box{float: left; text-align:right;}

img.left-image,
img.right_image{
     width:12%;}

img.left-image{float: left;}
img.right_image{float: right;}

img.btn_counseling{margin: 10px 0;}

p.name02,
p.name{
     margin:0;
     font-size: 60%;
     line-height: 120%;}

p.name02{text-align: right;}

p.question_time,
p.answer_time{
     font-size: 55%;
     line-height: 120%;
     display: inline-block;}

p.stamp {
     display: inline-block;
     width: 40%;}
p.photo {
     display: inline-block;
     margin-top: 3px;
     width: 70%;}
p.photo img {
     border-radius: 20px; }

#arrow_answer,
#arrow_question {
     position: relative;
     display: inline-block;
     padding: 12px;
     max-width: 75%;
     margin-top: 3px;
     border-radius: 20px;
     font-size: 80%;
     line-height: 150%;}

#arrow_question {
     background: #fcc;}

#arrow_answer {
     background: #f8f8f8;
     text-align:left;}

#arrow_answer:before,
#arrow_question:before {
     position: absolute;
     top: 0px;
     display: block;
     z-index: 1;}

#arrow_question:before {
     content: " ";
     display: inline-block;
     width: 15px;
     height: 15px;
     background: url("../images/arrow_question.png"); 
     background-size: contain;
     left: -3px;}

#arrow_answer:before{
     content:" ";
     display:inline-block;
     width:15px;
     height:15px;
     background: url("../images/arrow_answer.png");
     background-size: contain;
     right: -3px;}
     

/*----------Contents-------*/

#contents { 
margin : 0 auto;}

#set2 { margin-bottom: 20px;}

#set3 { margin-bottom: 20px;}
#set3 h3 { margin-bottom: 10px;}
#set3 h4 { margin-bottom: 10px;}

#set3 .box { margin: 10px;
background-color: rgba(255,255,255,0.5);}

#set3 .box-in { padding: 0 10px 10px 10px;}
#set3 .box p { margin-bottom: 10px;}
#set3 .left { float: left; width: 30%; margin-right: 10px;}
#set3 .right { float: right; width: 30%;}

#set3 span.notes-num { 
font-size: 80%;
color: #e60044;
margin-right: 0.3em;}
#set3 span.notes { 
display: inline-block;
font-weight: bold;
background-color: #e60044;
color: #fff;
padding: 2px 5px;
text-align: left; }

#set4, #set5 { background-color: rgba(255,255,255,0.3);}
#set4 .box { margin: 20px;}
#set5 .box { margin: 20px 20px 40px 20px;}

#set4 .box-img { 
display: inline-block;
width: 48%;}
#set4 .center { 
text-align: center;}

#set5 .step {
width: 55%;
padding-left: 10px;}
#set5 .step-txt { 
border-bottom: dashed 1px #fff;
margin-bottom: 20px;
padding: 10px 10px 10px 10px;
line-height:1.5em;}
#set5 .step-txt:last-child { 
margin-bottom: 0px;}

#set5 .box-right { 
float: right;
width: 40%;
vertical-align:middle;
padding: 0 0 10px 10px;}
#set5 .box-txt { 
margin-bottom: 50px;}

p.notes { 
font-size: 80%;
color: #666;
text-align: center;}


  
/*----------Footer-------*/

footer {
text-align: center;
margin-top: 30px;}

footer .box { 
margin-bottom: 10px;}
footer p { 
padding-top: 20px;
color: #039;}