@charset "utf-8";

/* -----------------------------------------------------------------------------

  subscription
  
----------------------------------------------------------------------------- */

@media screen and (min-width: 751px) {


/* method
---------------------------------------------*/
#method .inner{
  max-width: 800px;
}

/* tit_wrap */
#method .tit_wrap {
  letter-spacing: -.50em;
  margin-bottom: 2.7%;
}
#method .tit_wrap > *{
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
  line-height: 1.2;
}
#method .tit_wrap .tit{
  font-size: 180%;
  margin-right: 3.625%;
  font-weight: normal;
}
#method .tit_wrap .sub{
  font-size: 120%;
}

/* flow */
#method .flow{
  margin-bottom: 9.125%;
  -webkit-align-items: center;
  align-items: center;
}
#method .flow li{
  font-size: 140%;
  line-height: 1.2;
  /*margin-left: 0.625%;
  margin-right: 2.125%;*/
}
#method .flow li.arrow{
  width: 10%;
  margin-left: 0;
  margin-right: 2.5%;
  font-size: 130%;
  height: 3.538em;
  background-color: #eee;
  position: relative;
}
#method .flow li.arrow::before{
  content: "";
  display: block;
  width: 25%;
  height: 100%;
  background: url(../img/flow_arrow.png) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  right: -25%;
}
#method .flow li.arrow > p{
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 16.25%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
#method .flow li.last{
  background-color: #8f8fab;
  color: #fff;
  width: 12.5%;
  padding-top:3.285em;
  position: relative;
}
#method .flow li.last > p{
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 16%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* form
---------------------------------------------*/
/* q01 */
.form_wrap .q01 dd input{
  width: 99%;
}

/* q02 */
.form_wrap .q02 dd input{
  width: 99%;
}

/* q03 */
.form_wrap .q03 dd input{
  width: 99%;
}
/* q05 */
.form_wrap .q05 dd input{
  width: 25%;
}	
.form_wrap .q05 dd ul {
 }
.form_wrap .q05 dd ul li{
  display: inline;
  position: relative;
}	
.form_wrap .q05 dd ul li .error {
  position: absolute;
  top: 160%;
  left: 0;
  width: 6em;
}	
		

/* q06 */
.form_wrap .q06 dd input{
  width: 72.5%;
}

/* q07 */
.form_wrap .q07 dd input{
  width: 72.5%;
}

/* q08 */
.form_wrap .q08 dd input{
  width: 72.5%;
}

/* q10 */
.form_wrap .q10 dd ul{
  letter-spacing: -.50em;
}
.form_wrap .q10 dd input{
  width: 100%;
}
.form_wrap .q10 dd ul > *{
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}
.form_wrap .q10 dd ul li:nth-child(1){
  width: 18.5%;
  margin-right: 2.1%;
}
.form_wrap.conf .q10 dd ul li:nth-child(1){
  width: auto;
}

/* q11 */
.form_wrap .q11 dd input{
  width: 72.5%;
}

/* q12 */
.form_wrap .q12{
  margin-bottom: 7%;
}
.form_wrap .q12 dd textarea{
  width: 99%;
  height: 169px;
}

/*-----endPC------------------------------------------------------------*/}
@media screen and (max-width: 750px) {

/* method
---------------------------------------------*/
#method .inner{
  width: 92%;
  margin: auto;
}

/* tit_wrap */
#method .tit_wrap {
  margin-bottom: 30px;
}
#method .tit_wrap > *{
  line-height: 1;
}
#method .tit_wrap .tit{
  font-size: 130%;
  margin-right: 3.625%;
  margin-bottom: 2%;
}
#method .tit_wrap .sub{
  font-size: 90%;
}

/* flow */
#method .flow{
  margin: auto;
  margin-bottom: 36px;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
#method .flow li{
  font-size: 95%;
  line-height: 1.2;
  margin-bottom: 25px;
}
  #method .flow li:not(.arrow){
    margin-right:1em; 
  }

  #method .flow li:nth-child(4n):not(.arrow){
    margin-right:0; 
  }
#method .flow li.arrow{
  font-size: 90%;
  padding:1.157em 1em 1.157em 0.5em;
  margin-right: 2.055em;
  background-color: #eee;
  position: relative;
}
#method .flow li.arrow::before{
  content: "";
  display: block;
  width: 1.555em;
  height:100%;
  background: url(../img/flow_arrow.png) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left:100%;
}

#method .flow li.last{
  background-color: #8f8fab;
  color: #fff;
  padding:0.578em 1.263em;
  position: relative;
}
/* form
---------------------------------------------*/
/* q01 */
.form_wrap .q01 dd input{
  width: 99%;
}

/* q02 */
.form_wrap .q02 dd input{
  width: 99%;
}

/* q03 */
.form_wrap .q03 dd input{
  width: 99%;
}

/* q04 */
.form_wrap .q04 dd ul li .error {
  position: absolute;
  top: 100%;
  left: 0;
  width: 6em;
}	

.form_wrap .q05 dd ul {
  letter-spacing: -.50em;
}
.form_wrap .q05 dd ul li{
	display:  inline;
}	
.form_wrap .q05 dd input {
  width: 25%;
}
.form_wrap .q05 dd ul > * {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}
.form_wrap .q05 dd ul li:nth-child(2), .form_wrap .q05 dd ul li:nth-child(4), .form_wrap .q05 dd ul li:nth-child(6) {
  width: 18.5%;
  margin: 0 1.5%;
}
.form_wrap.conf .q05 dd ul li:nth-child(2), .form_wrap.conf .q05 dd ul li:nth-child(4), .form_wrap.conf .q05 dd ul li:nth-child(6) {
  width: auto;
}

	.form_wrap .q05 dd ul li .error {
  position: absolute;
  top: 25%;
  left: 0;
  width: 6em;
}	

	
/* q06 */
.form_wrap .q06 dd input{
  width: 100%;
}

/* q07 */
.form_wrap .q07 dd input{
  width: 100%;
}

/* q08 */
.form_wrap .q08 dd input{
  width: 100%;
}

/* q10 */
.form_wrap .q10 dd ul{
  letter-spacing: -.50em;
}
.form_wrap .q10 dd input{
  width: 100%;
}
.form_wrap .q10 dd ul > *{
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}
.form_wrap .q10 dd ul li:nth-child(1){
  width: 21%;
  margin-right: 2.1%;
  font-size: 90%;
}
.form_wrap.conf .q10 dd ul li:nth-child(1){
  width: auto;
}

/* q11 */
.form_wrap .q11 dd input{
  width: 100%;
}

/* q12 */
.form_wrap .q12{
  margin-bottom: 7%;
}
.form_wrap .q12 dd textarea{
  width: 99%;
  height: 169px;
}



/*-----endSP------------------------------------------------------------*/}