@charset "utf-8";

/*********************************************************************
* Built       : 2017/09/12
* Last update : 2017/09/13
* Made by     : Suga Yui
* Updated by  : Suga Yui
**********************************************************************/
a,
a:hover{ text-decoration: none; outline:none;}
.about *,
.flow *,
.reward *,
.a8net *{ box-sizing:border-box; line-height: 1.75;}

/*************************************************************************************************************************
* デフォルト：640px以下用の記述
*************************************************************************************************************************/
.affiliBox{ padding: 0 10px;}

/* affiliate
**********************************************************************/
.affiTxt{ margin: 30px 0 0;}
.affiTxt span{ display: block; font-weight: bold;}
.affiliBox section{ margin: 30px 0 0;}
/**about**/
.about div{ margin: 20px 0 0; text-align: center;}
.about div h4{ font-size: 16px; font-weight: bold; color: #074274; letter-spacing: 1px;}
.about div img{ display: block; width: 100%; max-width: 785px; margin: 10px auto 0;}
.about dl{ margin: 20px 0 0;}
.about dl dt{ font-size: 14px; font-weight: bold; letter-spacing: 1px;}
.about dl dd{ margin: 6px 0 0;}

/**flow**/
.flow .flowimg{ background: #eff4f7; padding: 14px 10px 20px; margin: 20px 0 0;}
.flow .flowimg li{ margin: 16px 0 0; }
.flow .flowimg li:first-child{ margin: 0;}
.flow .flowimg li h4{ width: calc(100% - 40px); height: 30px; padding:4px 0 0 12px; position: relative; font-size: 14px; color: #fff; line-height: 1;}
.flow .flowimg li h4:before{ content: ""; display: block; width: 40px; height: 100%; position: absolute; top: 0; right: -40px;}
.flow .flowimg li h4 span{ margin: 0 8px 0 0;}
.flow .flowimg li img{ display: block; width: 170px; margin: 14px auto 0;}
.flow .flowimg li p{ margin: 14px 0 0; line-height: 1.6;}
/*bg*/
.flow .flowimg >*:first-child h4{ background: #1f7bda;}
.flow .flowimg >*:first-child +* h4{ background: #1f91da;}
.flow .flowimg >*:first-child +* +* h4{ background: #1fa7da;}
.flow .flowimg >*:first-child +* +* +* h4{ background: #1fb9da; width: 100%;}
.flow .flowimg >*:first-child h4:before{ 
  background: url(images/flow_arrow01.png) no-repeat; background-size: cover;}
.flow .flowimg >*:first-child +* h4:before{ 
  background: url(images/flow_arrow02.png) no-repeat; background-size: cover;}
.flow .flowimg >*:first-child +* +* h4:before{ 
  background: url(images/flow_arrow03.png) no-repeat; background-size: cover;}
.flow .flowimg >*:first-child +* +* +* h4:before{ display: none;}

/**reward**/
.reward p .attTxt{ display: block; margin: 4px 0 0; padding: 0 0 0 0.9rem;position: relative; color: #666; font-size: 12px;}
.reward p .attTxt:before{ content: "※"; display: block; position: absolute; top: 0; left: 0;}
.reward h4{ width: 100%; margin: 20px 0 0; font-size: 15px; position: relative; font-weight: bold;}
.reward h4 a{ position: absolute; top: 2px; left: 140px; font-weight: normal;}

.reward .scroll{ width: 100%; overflow-x: scroll;}
.reward table{ width: 100%; min-width: 700px; margin: 10px 0 0; border: #D6D6D6 1px solid;}
.reward table tr th{ vertical-align: middle; border-bottom: none;}
.reward table tr td{ border-left: #D6D6D6 1px solid; border-bottom: none;}
.reward table thead{ font-weight: bold; text-align: center;}
.reward table thead tr th{ background: #e8e8e8; padding: 10px 0; font-weight: bold; text-align: center; border-left: #D6D6D6 1px solid;}
.reward table thead tr th:first-child{ border-left: none;}
.reward table tbody tr{ border-top: #D6D6D6 1px solid!important; }
.reward table tbody tr th{ background: #f8f8f8; width: 38%; padding: 10px; font-weight: bold; text-align: left;}
.reward table tbody tr td{ text-align: center;}
.reward table tbody tr .more{ width: 17.93%; padding: 0 8px; text-align: center; border-left: #D6D6D6 1px solid;}
.reward table tbody tr .more a{ display: block; background: #707070; width: 120px; height: 24px; padding: 7px 10px 0 0; position: relative; font-size: 11px; color: #fff; line-height: 1; text-align: center;}
.reward table tbody tr .more a:before{ content: ""; display: block; background: url(images/blank02.png) no-repeat; background-size: cover; width: 10px; height: 9px; position: absolute; top: 7px; right: 10px;}
.reward .scrollTxt{ display: table; margin: 8px auto 0; padding: 0 20px; position: relative; font-size: 12px; line-height: 1.9; letter-spacing: 0;}
.reward .scrollTxt:before{ content: ""; display: block; background: #222; width: 100%; height: 2px; margin: -1px 0 0; position: absolute; top: 50%; left: 0;}
.reward .scrollTxt span{ display: inline-block; background: #fff; padding: 0 8px; position: relative; }
.reward .scrollTxt span:before,
.reward .scrollTxt span:after{ content: ""; display: block; width: 0; height: 0; position: absolute; top: 6px;  border: 5px solid transparent;}
.reward .scrollTxt span:before{ border-right: 10px solid #222; left: -30px; }
.reward .scrollTxt span:after{ border-left: 10px solid #222; right: -30px;}

.txtlink{ display: table; position: relative; color: #003399; font-size: 12px; }
.txtlink:before,
.txtlink:after{ content: ""; display: block; position: absolute;}
.txtlink:before{ background: url(images/arrow_gray.png) no-repeat; background-size: cover; width: 7px; height: 10px; top: 5px; left: 0; }
.txtlink:after{ background: url(images/blank01.png) no-repeat; background-size: cover; width: 10px; height: 9px; top: 6px; right: -16px;}
.txtlink span{ padding: 0 0 0 12px; text-decoration: underline;}

/**a8net**/
.a8net > div{ margin: 30px 0 0;}
.a8net div img{ display: block; width: 159px; margin: 0 auto;}
.a8net div .txt{ margin: 20px 0 0;}
.a8net div .txt ul{ margin: 10px 0 0; }
.a8net div .txt ul >*:first-child +*{ margin: 4px 0 0;}
.a8net div .txt ul li a{ font-size: 13px;}
.a8net .a8entry{ margin: 26px auto 0; letter-spacing: 1px;}
.a8net .a8entry a{ display: block; background:#828282; width: 250px; height: 50px; margin: 0 auto; padding: 13px 0 0; font-size: 15px; color: #fff; text-align: center; border-radius: 4px;}
.a8net .a8entry a .blank{ display: inline-block; padding: 0 18px 0 0; position: relative;}
.a8net .a8entry a .blank:before{ content: ""; display: block; background: url(images/blank02.png) no-repeat; background-size: cover; width: 10px; height: 9px; position: absolute; top: 7px; right: 0;}
.a8net .a8entry p{ margin: 4px 0 0; font-size: 12px; color: #df0000; text-align: center;}

/*************************************************************************************************************************
* 641px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:641px){
  .affiliPage #contentsArea{ float: none; width: 100%;}
  
  /* affiliate
  **********************************************************************/
  .affiTxt{ letter-spacing: 1px;}
  .affiTxt span{ font-size: 16px; margin:0 0 4px;}
  .affiliBox section{ margin: 60px 0 0;}
  .affiliBox section:last-of-type{ margin: 60px  0 80px;}
  
  /**about**/
  .about div{ margin: 28px 0 0; }
  .about div h4{ font-size: 21px;}
  .about div img{ margin: 40px auto 0;}
  .about dl{ margin: 42px 0 0;}
  .about dl dt{ font-size: 16px;}
  .about dl dd{ margin: 10px 0 0;}

  /**flow**/
  .flow .flowimg{ padding: 30px 30px 0; margin: 30px 0 0; overflow: hidden;}
  .flow .flowimg li{ width: 47.5%; margin: 0 0 0 5%; float: left; }
  .flow .flowimg >*:first-child +* +*{ margin: 0;}
  .flow .flowimg li p{min-height: 70px; font-size: 13px;}

  /**reward**/
  .reward p .attTxt{ margin: 10px 0 0; font-size: 13px;}
  .reward h4{ margin: 40px 0 0; }
  .reward table{ margin: 20px 0 0; }
  .reward table thead tr th{ height: 47px; padding: 0;}
  .reward table tbody tr th{ width: 40.63%; height: 47px; padding: 10px 14px 8px; }
  .reward table thead tr .program{ width: 44%;}
  .reward table tbody tr .more a{ margin: 0 auto;}

  /**a8net**/
  .a8net > div{ margin:24px 0 0; overflow: hidden;}
  .a8net div img{ width: 16.22%; max-width: 159px; margin: 6px 0 0; float: left;}
  .a8net div .txt{ width: 79.9%; margin: 0 0 0 3.88%; float: left;}
  .a8net div .txt ul{ margin: 10px 0 0; overflow: hidden;}
  .a8net div .txt ul li{ float: left;}
  .a8net div .txt ul >*:first-child +*{ margin: 0 0 0 44px;}
  .a8net .a8entry{ margin: 46px auto 0;}
  .a8net .a8entry a{width: 300px; padding: 11px 0 0;}
  .a8net .a8entry a .blank:before{ top: 10px;}
  .a8net .a8entry p{ margin: 6px 0 0; font-size: 13px;}
}

@media print, screen and (min-width:730px){
  .reward .scrollTxt{ display: none;}
}

/*************************************************************************************************************************
* 960px以上用の記述
*************************************************************************************************************************/
@media print, screen and (min-width:960px){
  .affiliBox{ padding: 0;}
  .txtlink span:hover{ text-decoration: none;}
  .reward table tbody tr .more a{ transition: background 0.3s ease-in-out 0s;}
  .reward table tbody tr .more a:hover{ background: #919191;}
  .a8net .a8entry a{ transition: background 0.3s ease-in-out 0s;}
  .a8net .a8entry a:hover{ background:#9A9A9A;}
}

@media print, screen and (min-width:1060px){
  /**flow**/
  .flow .flowimg { padding: 30px 30px 16px;}
  .flow .flowimg li{ width: 22.83%; margin: 0 0 0 2.89%; }
  .flow .flowimg >*:first-child +* +*{ margin: 0 0 0 26px;}
}