@charset "UTF-8";
@import "default.css";
::-moz-selection {
  background: #fff100;
  color: #000;
}
::selection {
  background: #fff100;
  color: #000;
}

::-moz-selection {
  background: #fff100;
  color: #000;
}

.clrfix {
  min-height: 1px;
}
.clrfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

* html .clrfix {
  height: 1px;
  /*\*/ /*/
height:auto;
overflow:hidden;
/**/
}

span.maker {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, #ffff00));
  background: linear-gradient(transparent 60%, #ffff00 60%);
}

/* ----------------------------------------------------
	pageTop
-------------------------------------------------------*/
/* ----------------------------------------------------
	stickyHeader
-------------------------------------------------------*/
/* ----------------------------------------------------
	横型キャンペーンバナー（左：バナー/右:テキスト）
-------------------------------------------------------*/
/* ----------------------------------------------------
	read(normalText)
-------------------------------------------------------*/
.readHead {
  line-height: 24px;
  margin-bottom: 20px;
}

.read {
  line-height: 24px;
  margin-bottom: 5px;
}
.read span {
  color: #c00;
}

.read_pic_left {
  padding: 0 10px 10px 0;
  float: left;
}

.read_pic_right {
  padding: 0 0 10px 10px;
  float: right;
}

/* ----------------------------------------------------
	gNavi
-------------------------------------------------------*/
/* ----------------------------------------------------
	fNavi
-------------------------------------------------------*/
/* ----------------------------------------------------
	fontFamily
-------------------------------------------------------*/
/* ----------------------------------------------------
	prograssBar
-------------------------------------------------------
	<!-- progress -->
	<div id="progress">
	    <ul id="progressWrap">
	        <li id="progressBar"></li>
	        <li id="progressTxt"></li>
	    </ul>
	</div>
	<!-- /progress -->
-------------------------------------------------------*/
/* ----------------------------------------------------
	lazyloadPage01
-------------------------------------------------------
	//記述例
	header,main,footer{
		position:relative;
	}
	(){
		position:relative;
		animation-name:lazyloadPage01;
		animation-duration:2s;
	}
---------------------------------------------------- */
/* ----------------------------------------------------
	sp_hamburgerMenu()
-------------------------------------------------------
//記述JS
$(function(){
    $("#menuButton").click(function(){
	$(this).toggleClass("active"); //メニューボタンの切り替え
        return false;
    });
});
---------------------------------------------------- */
/* ----------------------------------------------------
	modalWindow[result]
	-> button.click.find(modalData)
---------------------------------------------------- */
/* ----------------------------------------------------
	special tools
---------------------------------------------------- */
.txtLink_line {
  text-decoration: none;
}
.txtLink_line:hover {
  text-decoration: underline;
}

.button {
  text-align: center;
  padding: 20px 0;
}
.button button {
  border: 0;
}
.button img {
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
.button img:hover {
  opacity: 0.5;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.buttonBack {
  text-align: center;
}
.buttonBack a {
  width: 80px;
  font-size: 14px;
  color: #fff;
  margin: 0 auto;
  padding: 5px;
  background: #000;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.buttonBack a:hover {
  text-decoration: none;
  background: #00a0e9;
  color: #fff;
}

div.pager {
  overflow: hidden;
  padding: 20px 0;
}
div.pager ul {
  position: relative;
  left: 50%;
  float: left;
}
div.pager ul li {
  width: 80px;
  margin: 0 5px;
  position: relative;
  left: -50%;
  float: left;
}
div.pager ul li.current a {
  background: #656565;
}
div.pager ul li span, div.pager ul li a {
  display: block;
  font-size: 12px;
  padding: 0.6em 1em;
}
div.pager ul li a {
  border-radius: 0 !important;
  min-width: 20px;
  text-align: center;
  background: #000;
  color: #fff;
  text-decoration: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
div.pager ul li a:hover {
  -webkit-animation: none;
          animation: none;
  background: #00a0e9;
  color: #fff;
}

/* ----------------------------------------------------
	gradient
---------------------------------------------------- */
/* ----------------------------------------------------
	animation
---------------------------------------------------- */
@-webkit-keyframes commonAni01 {
  0% {
    margin: 0;
  }
  100% {
    margin-top: -5px;
  }
}
@keyframes commonAni01 {
  0% {
    margin: 0;
  }
  100% {
    margin-top: -5px;
  }
}
@-webkit-keyframes pagerAni01 {
  0% {
    margin: 0;
  }
  100% {
    margin-top: -5px;
  }
}
@keyframes pagerAni01 {
  0% {
    margin: 0;
  }
  100% {
    margin-top: -5px;
  }
}
@-webkit-keyframes buruburu {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(3px, 3px) rotateZ(1deg);
            transform: translate(3px, 3px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 3px) rotateZ(0deg);
            transform: translate(0px, 3px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(3px, 0px) rotateZ(-1deg);
            transform: translate(3px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}
@keyframes buruburu {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(3px, 3px) rotateZ(1deg);
            transform: translate(3px, 3px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 3px) rotateZ(0deg);
            transform: translate(0px, 3px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(3px, 0px) rotateZ(-1deg);
            transform: translate(3px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}
@-webkit-keyframes buruburu02 {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(1px, 1px) rotateZ(1deg);
            transform: translate(1px, 1px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 1px) rotateZ(0deg);
            transform: translate(0px, 1px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(1px, 0px) rotateZ(-1deg);
            transform: translate(1px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}
@keyframes buruburu02 {
  0% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
  25% {
    -webkit-transform: translate(1px, 1px) rotateZ(1deg);
            transform: translate(1px, 1px) rotateZ(1deg);
  }
  50% {
    -webkit-transform: translate(0px, 1px) rotateZ(0deg);
            transform: translate(0px, 1px) rotateZ(0deg);
  }
  75% {
    -webkit-transform: translate(1px, 0px) rotateZ(-1deg);
            transform: translate(1px, 0px) rotateZ(-1deg);
  }
  100% {
    -webkit-transform: translate(0px, 0px) rotateZ(0deg);
            transform: translate(0px, 0px) rotateZ(0deg);
  }
}
/*
//style.css [mainCampaign -> &.camp_click]
@keyframes camp_clickAni01 {
	0% {top:130px; left:240px;}
	100% {top:120px; left:240px;}
}
//style.css [stage -> &.camp_click]
@keyframes camp_clickAni02 {
	0% {top:150px; left:225px;}
	100% {top:140px; left:225px;}
}
//style.css [campList]
@keyframes camp_clickAni03 {
	0% {top:70px; left:65px;}
	100% {top:65px; left:65px;}
}
*/
@-webkit-keyframes camp_hankoAni {
  0% {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
  }
}
@keyframes camp_hankoAni {
  0% {
    -webkit-transform: scale(0.8, 0.8);
            transform: scale(0.8, 0.8);
  }
}
@-webkit-keyframes result_hankoAni {
  0% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
@keyframes result_hankoAni {
  0% {
    -webkit-transform: scale(0.7, 0.7);
            transform: scale(0.7, 0.7);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
/* ----------------------------------------------------
	smartPhone
---------------------------------------------------- */
@media only screen and (min-width:0px) and (orientation:portrait) {
  .spBtt_white01 {
    border: solid 1px #ccc;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, left bottom, from(#f6f8f9), color-stop(50%, #e5ebee), color-stop(51%, #d7dee3), to(#f5f7f9)) !important;
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) !important;
    text-indent: 0 !important;
    text-decoration: none;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
  }
  .spBtt_gold01 {
    border: solid 1px #666;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, left bottom, from(#dfd08b), color-stop(42%, #fff7d8), color-stop(63%, #e3d8aa), to(#dfd08b)) !important;
    background: linear-gradient(to bottom, #dfd08b 0%, #fff7d8 42%, #e3d8aa 63%, #dfd08b 100%) !important;
    text-indent: 0 !important;
    text-decoration: none;
    color: #000;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
  }
}
/* ----------------------------------------------------
	function
---------------------------------------------------- */
/* ----------------------------------------------------
	radioButton(後回し)
---------------------------------------------------- */
/*
$iconColor:red;

input[type=radio] {
	display:none;
  box-sizing: border-box;
  -webkit-transition: background-color 0.2s linear;
  transition: background-color 0.2s linear;
  position: relative;
  display: inline-block;
  margin: 0 20px 8px 0;
  padding: 12px 12px 12px 42px;
  border-radius: 8px;
  background-color: #f6f7f8;
  vertical-align: middle;
  cursor: pointer;

  &:hover {
    background-color: #e2edd7;
    &:after {
      border-color: $iconColor;
    }
  }

  &:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 6px;
    content: '';
  }
}
.radio {
  &:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    margin-top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: $iconColor;
    content: '';
    opacity: 0;
    input[type=radio]:checked + & {
      opacity: 1;
    }
  }
}

.checkbox {
  &:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 21px;
    display: block;
    margin-top: -7px;
    width: 5px;
    height: 9px;
    border-right: 3px solid $iconColor;
    border-bottom: 3px solid $iconColor;
    content: '';
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    input[type=checkbox]:checked + & {
      opacity: 1;
    }
  }
}
*/
table#select {
  margin-bottom: 30px;
}
table#select th {
  font-size: 100%;
  color: #fff;
  text-shadow: none;
  background: #00a0e9;
  border: none;
}

table#paidy_myInfo {
  width: 751px;
  border: solid 3px #00a0e9;
}
table#paidy_myInfo tr:first-child th {
  font-size: 100%;
  color: #fff;
  text-shadow: none;
  background: #00a0e9;
  border: none;
}
table#paidy_myInfo tr:not(:first-child) th {
  font-size: 100%;
  font-weight: normal;
  vertical-align: middle;
}
table#paidy_myInfo td {
  width: 75%;
}
table#paidy_myInfo span {
  padding: 10px;
}
table#paidy_myInfo input {
  border: solid 1px #333;
  padding: 10px;
}
table#paidy_myInfo input[name*=name] {
  width: 150px;
  margin-right: 10px;
}
table#paidy_myInfo input[name*=zip] {
  width: 80px;
}
table#paidy_myInfo input[name^=pref], table#paidy_myInfo input[name^=address], table#paidy_myInfo input[name^=address2] {
  margin-bottom: 10px;
}
table#paidy_myInfo input[name*=pref], table#paidy_myInfo input[name*=address] {
  width: 100px;
}
table#paidy_myInfo input[name*=pref] {
  margin-right: 10px;
}
table#paidy_myInfo input[name*=address2], table#paidy_myInfo input[name*=address3] {
  width: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}