﻿/*====================
 - 1280px～：大型PC
 - 960px～1279px：小型PC
 - 600px～959px：タブレット
 - 480px～599px：SP横
 - ～479px：SP縦
====================*/

@charset "UTF-8";
@import "reset.css";
@import "style.css";
body { font-weight: normal; }
a {text-decoration:none;}
.mT20 {margin-top: 20px; float: left; clear: both; }
.mT40 {margin: 40px 0 20px; }
.mT50 {margin-top: 50px; }
.mT100 {margin-top: 100px; }
.btn { margin: 20px 25%; width: 50%; text-align: center; color: #FFF; float: left; clear: both; border-radius: 10px; background: #CC0000; }
.btn a{ color: #FFF; padding: 10px; text-align: center; display: block; }

.step-list__line { border-bottom: 1px solid #DDD; }
.step-list__line:first-child { border-top: 1px solid #DDD; }
.step-list__cell01 { padding-top: 20px; padding-right: 20px; vertical-align: top; width: 25%; }
.step-list__cell02 { padding-top: 20px; padding-right: 20px; vertical-align: top; width: 75%; }
.step-list__down--blue .step-list__rect { background-color: #F3DEE6; }
.step-list__down--blue .step-list__tri { border-top: 30px solid #F3DEE6; }
.step-list__down--red .step-list__rect { background-color: #c0392b; }
.step-list__down--red .step-list__tri { border-top: 30px solid #c0392b; }
.step-list__down--yellow .step-list__rect { background-color: #f39c12; }
.step-list__down--yellow .step-list__tri { border-top: 30px solid #f39c12; }
.step-list__rect {
  width: 100%;
  min-height: 100px;
  background-color: #3498db;
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
  color: #CC0000;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}
.step-list__rect02 {
  width: 100%;
  min-height: 100px;
  background-color: #c0392b;
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}
.step-list__rect03 {
  width: 100%;
  min-height: 100px;
  background-color: #f39c12;
  -moz-border-radius: 3px 3px 0 0;
  -webkit-border-radius: 3px;
  border-radius: 3px 3px 0 0;
  color: #FFF;
  text-align: center;
  font-weight: bold;
  padding: 10px;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
}

.step-list__tri { width: 0; height: 0; border: 30px solid transparent; border-top: -5px solid #3498db; text-align: center; margin: 0 auto; }
.step-list__heading { font-size: 1.3rem; font-weight: bold; margin-bottom: 10px; padding: 0 0 5px 0; border-bottom: 1px solid #333; }
.step-list__text { font-size: 0.875rem; margin: 10px 1% 20px 1%; line-hight: 2rem; font-weight: normal; width: 100%; }

.voicebox { margin: 10px 0% 40px; float: left; clear: both; width: 100%; }
.voicebox .name{ margin: 0; float: left; width: 20%; font-size: 0.875rem; text-align: center; }
.voicebox .name span{ font-size: 3rem; }
.voicebox .speech-bubble-box{ margin: 0 0 0 3%; float: left; width: 70%; }
.speech-bubble { position: relative; background: #ffeaf4; border-radius: .4em; padding: 15px; }
.speech-bubble:after { content: ''; position: absolute; left: 0; top: 50%; width: 0; height: 0; border: 22px solid transparent; border-right-color: #ffeaf4; border-left: 0; border-top: 0; margin-top: -11px; margin-left: -22px; }
.speech-bubble .txt{ font-size: 0.875rem; line-height: 1.8rem; text-align: left;  }




/* ------------------------------ */
/* 1280px～：大型PC
/* ------------------------------ */
@media screen and (min-width:1280px) {


}



/* ------------------------------ */
/* 960px～1279px：小型PC
/* ------------------------------ */
@media screen and (min-width:960px) and (max-width:1279px) {

}




/* ------------------------------ */
/* 600px～959px：タブレット
/* ------------------------------ */
@media screen and (min-width:600px) and (max-width:959px) {

}


/* ------------------------------ */
/* 480px～599px：SP横
/* ------------------------------ */
@media screen and (min-width:480px) and (max-width:599px) { 

}



/* ------------------------------ */
/* ～479px：SP縦
/* ------------------------------ */
@media screen and (max-width:479px) {

}

