@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300,700");

/*第4回 OTTO会
======================================================== */
html {
	font-size: calc(100vw / 130);
}

body {
	font-family: "Open Sans",arial,sans-serif;
	font-weight: 300;
	font-style: normal;
	width: 100%;
	color: #000;
	margin: 0;
	padding: 0;
	line-height: 2.0rem;
	letter-spacing: 1.5px;
	height: 100%;
	word-break: break-word;
}

a { overflow:hidden; outline:none }
a:visited { color: #1587c2; text-decoration: none }
a:link { color: #1587c2; text-decoration: none }
a:hover { color: #e78c83; text-decoration: none }
a:active { text-decoration: none }


/* 画面共通
======================================================== */
h1 {
	font-size: 3rem;
	font-weight: 500;
	text-align: center;
	color: #fff;
	background: #008edf;
	margin: 0;
	padding: 50px 0 50px 0;
}

h3 {
	font-size: 2rem;
	font-weight: 500;
	background: #8fd5fd;
	margin: 0;
	padding: 15px;
}

.container {
	width: 95%;
	margin: 0 auto;
}

p {
	font-size: 1.6rem;
	line-height: 2.9rem;
	text-align: justify;
}

p.center_block {
	text-align: center;
}

textarea {
	width: 100%;
	border: #cdcdcd 1px solid;
	padding: 0.5rem 1rem;
	font-size: 1.6rem;
	color: #333;
	font-family: inherit;
}

input[type=radio] {
    display: none;
}

.radio01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}

.radio01::before {
    background: #fff;
    border: 1px solid #231815;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}

.radio01::after {
    background: #ed7a9c;
    border-radius: 50%;
    content: '';
    display: block;
    height: 10px;
    left: 9px;
    margin-top: -4px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 10px;
}

input[type=radio]:checked + .radio01::after {
    opacity: 1;
}

/* チェックボックス01 */
input[type=checkbox] {
    display: none;
}
.check01 {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}
.check01::before {
    background: #fff;
    border: 1px solid #231815;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.check01::after {
    border-right: 3px solid #ed7a9c;
    border-bottom: 3px solid #ed7a9c;
    content: '';
    display: block;
    height: 9px;
    left: 10px;
    margin-top: -7px;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 5px;
}
input[type=checkbox]:checked + .check01::after {
    opacity: 1;
}

table {
	width: 100%;
	margin: 100px 0;
}

table th {
	background-color: #f5fafe;
	font-weight: 500;
	width: 30%;
	position: relative;
	padding: 1rem 1.5rem;
	text-align: left;
	font-size: 1.4rem;
	vertical-align: middle;
	display: table-cell;
}

table td {
	padding: 1rem 1.5rem;
	text-align: left;
	font-size: 1.6rem;
	vertical-align: middle;
	display: table-cell;
}

table td input[type="text"],
table td textarea {
	width: 100%;
	border: #cdcdcd 1px solid;
	padding: 0.5rem 1rem;
	font-size: 1.6rem;
	color: #333;
	font-family: inherit;
}

table th span.required{
	width: 4rem;
	font-size: 1rem;
	font-weight: 400;
	color: #d00707;
	text-align: center;
	display: inline-block;
	border: #d00707 1px solid;
	padding: 0 0.5rem;
	position: absolute;
	top: 2rem;
	right: 1rem;
}

.blue-button {
	width: 29rem;
	max-width: 100%;
	height: 4rem;
	padding: 0.6rem 2.5rem;
	background: linear-gradient(-135deg,#00A0E9,#0078F0);
	display: block;
	color: #fff;
	text-align: center;
	font-size: 1.6rem;
	position: relative;
	margin: 0 auto;
	border: none;
	transition: 0.3s;
	cursor: pointer;
}
.blue-button::after {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	font-weight: 900;
	position: absolute;
	right: 1rem;
	top: 26%;
	font-size: 1.8rem;
	color: #fff;
}


/* Footer
======================================================== */
#footer_Area {
	clear: both;
	width: 100%;
	height: 100px;
	margin-top: 100px;
	background-color:#000000;
}

#footer_Area #copy{;
	font-size: 60%;
	padding-top: 30px;
	text-align: center;
	color: #ffffff;
}


/* Color & txt
======================================================== */
.red { color: #ff0000}
.blue { color: #0000ff}
.yellow { color: #ffff00}
.green { color: #67a425}


/* ClearFix
======================================================== */
.clearfix {
	display: block;
	clear: both;
	overflow:hidden;
	height: 100%;
}