@charset "utf-8";

/*   Common
******************************************/
*,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
*:focus {
	outline: none;
}

html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dt,dd,label {
    margin: 0;
    padding: 0;
}

html {
	font-size: 62.5%;
}

body {
    font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

button, input, optgroup, select, textarea, ul, ol, li, dl, dt, dd {
    font-family: 'Hiragino Sans', 'Yu Gothic', 'Meiryo', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	font-size: 1.5rem;
}
body {
	width: 100%;
	position:relative;
	font-size: 1.5rem;
	line-height: 1.6;
	word-wrap: break-word;
	color: #222222;
}

article, section {
    position: relative;
}

ul, ol {
    list-style: none;
    list-style-type: none;
    list-style-position: outside;
}

dl, dt, dd, li{
	font-weight:normal;
    line-height: 1.6;
}

img {
    max-width: 100%;
    max-height: 100%;
	image-rendering: auto;
	border:none;
	vertical-align:bottom;
	display: block;
    -webkit-backface-visibility: hidden;
}

input, textarea, select {
    font: inherit;
}

span {
    display: inline-block;
}

i {
    display: block;
    font-style: normal;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
	font-weight:normal;
	letter-spacing:normal;
}

/* text */
input::-ms-clear {
	visibility: hidden;
    display: none;
}

/* password */
input::-ms-reveal {
	visibility: hidden;
    display: none;
}


@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/*///// clearfix /////*/
.clearfix:after {
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content: '';
}
.clearfix {
	min-height: 1px; /*IE6、7対策*/
}
* html .clearfix {
	height: 1px;
	height: auto;
	overflow: hidden;
}


/*///// Page fade /////*/
.wrbody {
    animation: fadeIn 1s ease 0s 1 normal;
    -webkit-animation: fadeIn 1s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


/*//////// LINK ////////*/
*:focus {
	outline: none;
}
a {
    color: #222222;
	outline: none;
    cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease-out;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	display: block;
}
a:focus {
	text-decoration: none;
	outline: none;
}


/*   btn
******************************************/
.btn {
    font-size: 1.4rem;
    line-height: 1;
    position: relative;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    outline: none;
    cursor: pointer;
    cursor: hand;
    text-decoration: none;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    border: none;
    color: #2b2b2b;
    margin: 0;
    padding: 0;
    width: 100%;
    font-weight: 600;
    background: none;
    vertical-align: middle;
}

/*///// login-btn /////*/
.login-btn {
    width: auto;
    height: auto;
    border-radius: 5px;
    font-size: 1.5rem;
    color: #fff;
    background-color: #0066cc;
    font-weight: 500;
    box-shadow: 0 0 5px 0 #999;
    overflow: hidden;
}
.login-btn:hover {
    box-shadow: none;
}
/* Sweep To Right */
.login-btn {
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.login-btn:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    background: #f8da2b;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.login-btn:hover,
.login-btn:focus,
.login-btn:active {
  color: #222222;
}
.login-btn:hover:before,
.login-btn:focus:before,
.login-btn:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/*   ie9 message
******************************************/
.ie-mestxt {
	background-color: #de3d3f;
    padding-top: 30px;
    padding-bottom: 30px;
}
.ie-mestxt p {
	max-width: 1040px;
    padding-left: 20px;
    padding-right: 20px;
    margin: auto;
    color: #fff;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 600;
}


/*   input
******************************************/
input {
    display: block;
	outline: none;
    background: none;
    border: 1px solid #bbb;
    background-color: #f9f9f9;
    padding: 5px 10px;
    font-size: inherit;
	border-radius: 3px;
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
}
input {
    height: 40px;
    width: 100%;
}


/*   form focus
******************************************/
input:focus,
textarea:focus {
	background-color: #ffffff;
    border: 1px solid rgb(47 41 140 / 50%);
    box-shadow: 0 0 4px 0px rgb(47 41 140 / 50%);
}
input[type="button"]:focus {
    box-shadow: none;
}
input[type="file"]:focus,
input[type="checkbox"]:focus {
	border: none;
	background: none;
    box-shadow:none;
}


/*   form placeholder
******************************************/
.form :placeholder-shown {
	color: #a0a0a0;
    font-size: 1.4rem;
}
.form ::-webkit-input-placeholder {
	color: #a0a0a0;
    font-size: 1.4rem;
}
.form :-moz-placeholder {
	color: #a0a0a0;
	opacity: 1;
    font-size: 1.4rem;
}
.form ::-moz-placeholder {
	color: #a0a0a0;
	opacity: 1;
    font-size: 1.4rem;
}
.form :-ms-input-placeholder {
	color: #a0a0a0;
    font-size: 1.4rem;
}