@charset "UTF-8";
* {
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

body {
    font-size: 16px;
    font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    color: #000000
}

html,body,h1,h2,h3,h4,ul,ol,dl,li,dt,dd,p,div,span,img,a,table,tr,th,td {
    margin: 0;
    padding: 0;
    line-height: 1em;
    border: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0
}

* html .clearfix {
    zoom:1}

*:first-child+html .clearfix {
    zoom:1}

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure {
    margin: 0px;
    padding: 0px;
    font-size: 1em;
    font-weight: normal
}

ul,ol {
    list-style-type: none
}

img {
    border: none
}

a {
    color: #000000;
    text-decoration: none;
    cursor: pointer
}

input {
    padding: 0 10px;
    border-radius: 4px;
    border: 0;
    background-color: #fff
}

label {
    display: block;
    width: 100%
}

select {
    padding: 0 10px;
    height: 40px;
    border-radius: 4px;
    border: 2px solid #ccc;
    cursor: pointer
}

textarea {
    padding: 10px;
    border-radius: 4px;
    border: 0
}

.button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    height: 50px;
    color: #fff;
    background-color: #00a0e9
}

.button span {
    padding-top: 2px
}

.button.yellow {
    background-color: #fff505
}

.button.black {
    background-color: #272727
}

.button.gray {
    background-color: rgba(39,39,39,0.6)
}

.button.dred {
    background-color: #880000;
}

.button.darkdred {
    background-color: #6d0000;
}

.button.darkblue {
    background-color: #0080ba;
}

.button.border {
    color: #272727;
    background-color: transparent;
    border: 1px solid #00a0e9
}

.button i {
    margin: 0 10px
}

.keep {
    position: fixed;
    right: 0;
    top: 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 40px;
    height: 90px;
    font-weight: bold;
    border-radius: 6px 0 0 6px;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-color: #fff505;
    cursor: pointer
}

.keep i {
    margin-bottom: 5px
}

.save {
    background-color: red;
}

h2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 20px;
    height: 50px;
    font-size: 20px;
    background-color: rgba(39,39,39,0.7);
    color: #fff
}

h3 {
    padding: 15px 10px;
    background-color: rgba(39,39,39,0.9);
    color: #fff
}

p {
    line-height: 1.5em
}

.attention {
    padding: 10px;
    font-size: 14px;
    border: 1px dashed rgba(0,160,233,0.3);
    border-radius: 4px;
    line-height: 1.5em
}

.attention-red {
    border: 1px dashed rgba(255,0,0,0.3);
}

.w-10p {
    width: 10%
}

.w-10p {
    width: 10%
}

.w-300 {
    width: 300px
}

.w-450 {
    width: 450px
}

.w-100p {
    width: 100%
}

.h-50px {
	height: 50px
}

.header {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 70px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #00a0e9
}

.header__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 2px;
    width: 70px;
    height: 70px;
    background-color: #fff
}

.header__logo img {
    width: 100%;
    height: auto
}

.header h1 {
    margin-left: 20px;
    font-size: 20px;
    color: #fff;
    letter-spacing: 2px
}

.header h1 a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    letter-spacing: 2px
}

.header h1 span {
    font-size: 12px
}

nav {
    position: fixed;
    top: 0;
    left: -300px;
    bottom: 0;
    display: block;
    width: 300px;
    background: #ffffff;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .5s;
    transition: all .5s;
    z-index: 3;
    opacity: 0
}

nav ul li {
    border-bottom: 1px solid #ccc
}

nav ul li a {
    display: block;
    padding: 20px;
    color: #333;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s
}

nav ul li a:hover {
    background: #e4e4e4
}

nav ul li a i {
    margin-right: 5px;
    color: #00a0e9
}

.toggle_btn {
    position: fixed;
    top: 20px;
    right: 20px;
    display: block;
    width: 30px;
    height: 30px;
    -webkit-transition: all .5s;
    transition: all .5s;
    cursor: pointer;
    z-index: 3
}

.toggle_no_btn {
    position: fixed;
    top: 20px;
    right: 20px;
    display: block;
    width: 30px;
    height: 30px;
    -webkit-transition: all .5s;
    transition: all .5s;
    cursor: default;
    z-index: 3
}

.toggle_btn span {
    position: absolute;
    left: 0;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: all .5s;
    transition: all .5s
}

.toggle_no_btn span {
    position: absolute;
    left: 0;
    display: block;
    width: 30px;
    height: 2px;
    background-color: #fff;
    border-radius: 4px;
    -webkit-transition: all .5s;
    transition: all .5s
}

.toggle_btn span:nth-child(1) {
    top: 4px
}

.toggle_btn span:nth-child(2) {
    top: 14px
}

.toggle_btn span:nth-child(3) {
    bottom: 4px
}

.toggle_no_btn span:nth-child(1) {
    top: 4px
}

.toggle_no_btn span:nth-child(2) {
    top: 14px
}

.toggle_no_btn span:nth-child(3) {
    bottom: 4px
}

#mask {
    display: none;
    -webkit-transition: all .5s;
    transition: all .5s
}

.open nav {
    left: 0;
    opacity: 1
}

.open .toggle_btn span {
    background-color: #fff
}

.open .toggle_btn span:nth-child(1) {
    -webkit-transform: translateY(10px) rotate(-315deg);
    transform: translateY(10px) rotate(-315deg)
}

.open .toggle_btn span:nth-child(2) {
    opacity: 0
}

.open .toggle_btn span:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(315deg);
    transform: translateY(-10px) rotate(315deg)
}

.open #mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .8;
    z-index: 2;
    cursor: pointer
}

.login_form {
    padding: 0px;
}
.button__wrapper_01 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 30px
}

.button__wrapper_01 li:first-child {
    width: 30%
}

.button__wrapper_01 li:last-child {
    width: 65%
}

.button__wrapper_03 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 10% 10% 10%
}

.button__wrapper_03 li:first-child {
    width: 30%
}

.button__wrapper_03 li:last-child {
    width: 65%
}

.button__wrapper_04 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10% 10% 10%
}

.button__wrapper_04 li {
    width: 65%;
}

.button__wrapper_05 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 30px
}
.button__wrapper_05 li:first-child {
    width: 25%
}

.button__wrapper_05 li {
    width: 25%
}

.button__wrapper_05 li:last-child {
    width: 45%
}

.button__wrapper_06 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px 10% 30px 10%
}

.button__wrapper_06 li:first-child {
    width: 25%;
}

.button__wrapper_06 li {
	padding: 20px;
    width: 25%;
}

.button__wrapper_06 li:last-child {
    width: 25%;
}

.login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: -webkit-gradient(linear, left bottom, left top, from(#00a0e9), to(rgba(0,160,233,0.5)));
    background: linear-gradient(0deg, #00a0e9, rgba(0,160,233,0.5));
    height: 100vh
}

.login__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.login__wrapper ul {
    margin-top: 50px
}

.login__wrapper li {
    width: 100%;
    padding: 20px
}

.login__button {
    width: 100%
}

.login__forget {
    text-align: center
}

.login__forget a {
    color: #fff;
    font-size: 12px;
    opacity: .8;
    text-decoration: underline
}

.pass_forget {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.pass_forget__wrapper {
    margin-top: 100px
}

.pass_forget__logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.pass_forget p {
    margin-top: 50px;
    text-align: center
}

.pass_forget ul {
    margin-top: 50px
}

.pass_forget li {
    width: 100%;
    padding: 20px
}

.pass_forget li input {
    border: 1px solid #272727
}

.home__global-nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.home__global-nav li {
    width: 50%;
    padding: 20px;
    height: calc(calc(100vh - 60px) / 3);
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd
}

.home__global-nav li:nth-last-child {
    border-bottom: 0
}

.home__global-nav li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: center top 40%
}

.home__global-nav li a span {
    position: absolute;
    top: 80%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: inline-block;
    font-size: 12px
}

.home__global-nav li a.customer {
    background-image: url(../images/common/icon-customer.png)
}

.home__global-nav li a.assessment {
    background-image: url(../images/common/icon-assessment.png)
}

.home__global-nav li a.camera {
    background-image: url(../images/common/icon-camera.png)
}

.home__global-nav li a.camera {
    background-image: url(../images/common/icon-camera.png)
}

.home__global-nav li a.folder {
    background-image: url(../images/common/icon-folder.png)
}

.home__global-nav li a.statement {
    background-image: url(../images/common/icon-statement.png)
}

.home__global-nav li a.chat {
    background-image: url(../images/common/icon-chat.png)
}

.home__global-nav li a.gallery {
    background-image: url(../images/common/icon-gallery.png)
}

.home__global-nav li a.payment {
    background-image: url(../images/common/icon-payment.png)
}

.customer__button {
    margin-top: 40px
}

.customer__wrapper a {
    position: relative;
    display: block;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #eee
}

.customer__wrapper a span {
    display: block
}

.customer__wrapper a i {
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 30px;
    color: #00a0e9
}

.customer__wrapper a:hover {
    background-color: #eee
}

.customer__wrapper_02 {
    padding: 10%
}

.customer__address {
    opacity: .8
}

.customer__name {
    margin-top: 10px;
    font-size: 20px
}

.customer__item {
    margin-top: 30px
}

.customer__item dt {
    padding: 10px;
    background-color: rgba(39,39,39,0.1)
}

.customer__item dd {
    padding: 20px 10px;
    font-size: 20px;
    background-color: rgba(39,39,39,0.2)
}



.statement__wrapper {
    padding: 10%
}

.statement__wrapper li:last-child {
    margin-top: 30px
}

.statement__item dt {
    padding: 10px;
    background-color: rgba(39,39,39,0.1)
}

.statement__item dd {
    padding: 20px 10px;
    font-size: 20px;
    background-color: rgba(39,39,39,0.2)
}

.cooling-off__wrapper {
    padding: 10%
}

.cooling-off__movie {
    width: 100%;
    height: 80vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px
}

.agreement__wrapper {
    padding: 10%
}

.agreement__item li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1px;
    background-color: rgba(39,39,39,0.1)
}

.agreement__item li:nth-child(even) {
    background-color: rgba(39,39,39,0.2)
}

.agreement__text {
    padding: 20px;
    width: 70%;
    line-height: 1.5em;
}

.agreement__text-red {
    color: rgba(255,0,0,0.5)
}

.agreement__check {
    padding: 20px;
    width: 30%;
    height: 100%
}

.agreement .attention {
    margin-top: 20px
}

.agreement input[type="checkbox"] {
    display: none
}

.agreement input[type="checkbox"]+label.check {
    position: relative;
    width: 100%;
    height: 40px;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer
}

.agreement input[type="checkbox"]+label.check::before {
    content: "NO";
    position: absolute;
    top: 50%;
    right: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.agreement input[type="checkbox"]+label.check>div {
    position: absolute;
    top: 50%;
    left: 20px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: #ddd;
    border-radius: 100%;
    -webkit-transition: 0.2s;
    transition: 0.2s
}

.agreement input[type="checkbox"]:checked+label.check {
    background-color: #4db4e4
}

.agreement input[type="checkbox"]:checked+label.check::before {
    content: "YES";
    position: absolute;
    left: 20px;
    color: #fff
}

.agreement input[type="checkbox"]:checked+label.check>div {
    left: calc(100% - 40px);
    background-color: #fff
}

.agreement .button__wrapper_03 {
    margin-top: 30px
}

.sign__wrapper {
    padding: 1% 5% 5% 5%
}

.sign__area {

    border: 1px solid #ddd;

}

.sign__area i {
    font-size: 200px;
    opacity: .2
}

.contract__wrapper {
    padding: 10%;
    padding-top: 10px;
    clear: both;
}

.contract .attention {
    margin-top: 30px
}

.contract__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 30px
}

.contract__date {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 14px
}

.contract__date dt {
    margin-top: 10px;
    width: 30%
}

.contract__date dd {
    margin-top: 10px;
    width: 70%
}

.contract__logo {
    width: 20%
}

.contract__logo img {
    width: 30%;
    height: auto
}

.contract .statement__wrapper {
    margin-top: 30px;
    padding: 0
}

.contract__sign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 30px;
    width: 100%;
    height: 200px;
    border: 1px solid #ddd
}

.contract__sign i {
    font-size: 200px;
    opacity: .2
}

.payment__wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.payment ul {
    margin-top: 50px
}

.payment li {
    width: 100%;
    padding: 20px
}

.payment li input {
    border: 1px solid #272727
}

.payment__button {
    width: 100%
}

.pagebreak {
  display: block;
  page-break-before: always;
}


.agreement__wrapper3 {
	align-items: center;
    float: left;
    padding-top: 5%;
    padding-left: 10%;
}
.after{
  clear:both;
}

.red {
	color: red;
}

.birthday {
	width: 25%
}

.statement_more_long_text {
    width: 100%;
}

.statement_long_text {
    width: 75%;
}

.statement_more_long_text {
    width: 100%;
}

.statement_text {
    width: 50%;
}

.statement_short {
    width: 25%;
}