@charset "utf-8";

body#pink{
	background:#FDF0F4;
	font-size:80%;
	margin:0;
	padding:0;
	color:#333;
	letter-spacing:0.1em;
}
body#blue{
	background:#bbe2f1;
	font-size:80%;
	margin:0;
	padding:0;
	color:#333;
	letter-spacing:0.1em;
}
body#green{
	background:#ECF4E5;
	font-size:80%;
	margin:0;
	padding:0;
	color:#333;
	letter-spacing:0.1em;
}
body#purple{
	background:#CCBFFF;
	font-size:80%;
	margin:0;
	padding:0;
	color:#333;
	letter-spacing:0.1em;
}
body#orange{
	background:#FFE6CC;
	font-size:80%;
	margin:0;
	padding:0;
	color:#333;
	letter-spacing:0.1em;
}
img{
	border:none;
}
a{
	color:#333;
	text-decoration:underline;
}
a:hover{
	text-decoration:none;
}

/* login
----------------------------------------------- */
div#login_area{
	margin:0 auto;
	background:#FFF;
	width:400px;
	padding:20px 20px 10px;
	margin-top:30px;
}

div#login_area p{
}
div#login_area p.head{
	text-align:center;
}

div#login_area div{
	width:250px;
	/*margin-left:60px;*/
	margin:auto;
}
div#login_area div img{
	margin-top:15px;
}

div#login_area div p.title{
	font-weight:bold;
	line-height:normal;
	margin:15px 0 5px;
	padding:0;
	font-size:110%;
}

p.back_top{
	text-align:center;
	background:#F9D1DD;
	padding:8px 0;
	margin-top:25px;
}
p.back_top_blue{
	text-align:center;
	background:#bbe2f1;
	padding:8px 0;
	margin-top:25px;
}
p.back_top_green{
	text-align:center;
	background:#ECF4E5;
	padding:8px 0;
	margin-top:25px;
}
p.back_top_purple{
	text-align:center;
	background:#CCBFFF;
	padding:8px 0;
	margin-top:25px;
}
p.back_top_orange{
	text-align:center;
	background:#FFE6CC;
	padding:8px 0;
	margin-top:25px;
}
img.header_img{
	margin-left:100px;
	margin-bottom:20px;
}

/* text_link
----------------------------------------------- */
div#text_link_area{
	margin-top:20px;
	margin:auto;
}
a.text_link{
	background:url(../img2/heart.gif) left no-repeat;
	padding-left:15px;
}

/* input
----------------------------------------------- */
div#login_area input{
}
input.id{
	width:250px;
	height:25px;
	font-size:110%;
	ime-mode:disabled;
	padding-left:25px;
	background:url(../img2/id.gif) left no-repeat;
}
input.ps{
	width:250px;
	height:25px;
	font-size:110%;
	ime-mode:disabled;
	padding-left:25px;
	background:url(../img2/ps.gif) left no-repeat;
}
.ondes{
	/*color:#EC668E;*/
	color:#999;
}

/* page-header
----------------------------------------------- */
div#header_area{
	width:100%;
	height:100px;
	background:#FFF;
	margin:0;
	padding:0;
}
img.logo{
	margin-top:10px;
	padding-left:20px;
	width:304px;
	height:30px;
}

div#header_right{
	padding:0 20px 0 0;
	float:right;
}
div#user{
	float:right;
	margin-top:5px;
	margin-right:30px;
	background:#f3f3f3;
	height:30px;
}
div#user img{
	float:right;
	margin-top:10px;
}
div#user p{
	text-align:left;
	float:left;
	margin-right:10px;
}
div#user p span{
	font-weight:bold;
}

div#another_link{
	float:right;
	height:30px;
	margin-top:5px;
	margin-left:10px;
}

/* contents
----------------------------------------------- */

div#contents_area{
	width:100%;
	background:#FFF;
	line-height:1.6;
	margin:15px 0;
}

/* footer
----------------------------------------------- */

div#footer_area{
	width:100%;
	background:#FFF;
	margin:0;
	padding:0;
	height:500px;
}

p.copy{
	text-align:right;
	font-weight:bold;
	color:#EC668E;
	padding-right:20px;
	float:right;
}
p.copy_blue{
	text-align:right;
	font-weight:bold;
	color:#54B8FF;
	padding-right:20px;
	float:right;
}
p.copy_green{
	text-align:right;
	font-weight:bold;
	color:#458F00;
	padding-right:20px;
	float:right;
}
p.copy_purple{
	text-align:right;
	font-weight:bold;
	color:#9933FF;
	padding-right:20px;
	float:right;
}
p.copy_orange{
	text-align:right;
	font-weight:bold;
	color:#FFE6CC;
	padding-right:20px;
	float:right;
}
p.footer_left{
	padding:10px 0 10px 10px;
	float:left;
}

/* error_area
----------------------------------------------- */

div#error_area{
	width:100%;
	background:#FFF;
	color:red;
	margin:0;
	padding:0;
	float:center;
}

/* button_seiyaku */
.button_seiyaku a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 15px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #6bb6ff;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    border-radius: 50px;
}
.button_seiyaku a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 46%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button_seiyaku a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
/* button_back */
.button_back a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 15px 25px;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #838689;
    filter: drop-shadow(0px 2px 4px #ccc);
    border-radius: 3px;
    border-radius: 50px;
}
.button_back a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 3px solid #FFF;
    border-right: 3px solid #FFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 46%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.button_back a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}