@charset "utf-8";

html {
font-size: 62.5%;
}
body {
margin:0 auto;
padding:0;
text-align:center;
font-family:'Kosugi Maru', "メイリオ", "ヒラギノ角ゴ Pro W3", "MS PGothic", "MS UI Gothic", Helvetica, Arial, sans-serif;
font-size: 1.6em;
font-size: 1.6rem;
line-height: 1.6;
letter-spacing: 1px;
background: #00041f;
color:#fff;
}
#fmbody {
    background: #00041f url(../images/back.jpg) left top no-repeat;
}
article {
	width:100%;
	text-align:center;
	margin:0 auto;
}
img {
	vertical-align:bottom;
	border:0;
	width:100%;
	line-height:0;
	font-size:0;
	height: auto;
}
.nomrg {
	margin:0;
	padding:0;
	vertical-align:bottom;
	border:0;
	width:100%;
	line-height:0;
	font-size:0;
}
#hdarea {
position: relative;
width: 100%;
height: auto;
z-index: 3;
}
#hdarea:before {
content: "";
display: block;
padding-top:122%;
}
#hdarea h1 {
position: absolute;
top: 0;
left: 10%;
width:80%;
z-index: 2;
animation: 1s ease-out h1anime;
opacity: 1;
}
@keyframes h1anime {
0% {
transform: translate(0, 30px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
#hdarea div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
animation: 1s ease-out panime;
opacity: 1;
background:#fff;
}
@keyframes panime {
0% {
transform: translate(0, -30px);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}

#contentsarea {
position: relative;
width: 100%;
z-index: 4;
}
.copybox {
width: 80%;
margin: 3% auto 2% auto;   
}
.infobox {
    width: 100%;
    display: flex;
}
#gio {
    width: 20%;
    order: 3;
}
#pipi {
    width: 20%;
    order: 1;
}
#present {
    margin-bottom:2rem;
}
#datebox {
    width: 60%;
    order: 2;
}
#hdarea2 {
    width: 100%;
    display: flex;
    padding-top:3rem;
}
#hdarea2 #gio {
    width: 10%;
    order: 3;
}
#hdarea2 #pipi {
    width: 10%;
    order: 1;
}
#hdarea2 h1 {
    width: 80%;
    order: 2;
}


#cntbox {
width: 80%;
margin:0 auto;
}
#obobtn {
margin: 3rem 0 8rem 0;
}
#obobtn a {
display: block;
margin: 0;
padding: 2rem 0;
text-align: center;
font-size: 8em;
font-size: 8rem;
font-weight: bold;
line-height: 1.8;
color:#fff;
text-decoration: none;
border-radius: 10px;
background: #dd0000;
box-shadow:0px 15px 0px 0px #660000;
}
#obobtn a:hover {
background: #ff0000;
box-shadow:0px 10px 0px 0px #660000;
transform: translate3d(0, 3px, 0);
}
#obobtn2 {
margin: 3rem 0 5rem 0;
padding: 2rem 0;
text-align: center;
font-size: 8em;
font-size: 8rem;
font-weight: bold;
line-height: 1.8;
color:#eee;
text-decoration: none;
border-radius: 10px;
background: #999;
box-shadow:0px 15px 0px 0px #777;
}
.obobox {
text-align: left;
margin-bottom: 3rem;
}
.obobox p {
font-size: 1.75em;
font-size: 1.75rem;
line-height: 1.6;
margin: 0 0 1.5rem 0;
color:#eee;
}
.obobox h2 {
margin: 0;
padding: 1rem 1.5rem .75rem 1.5rem;
background: #1c4281;
color:#eee;
font-size: 2.2em;
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
border-radius: 5px 5px 0 0;
}
.obobox div {
padding: 2rem;
background: #122545;
border-radius: 0 0 5px 5px;
}
.obobox h3 {
padding: .75rem 1rem .5rem 1rem;
margin: 2rem 0 1rem 0;
background: #426fb8;
color:#eee;
font-size: 1.6em;
font-size: 1.6rem;
font-weight: normal;
border-radius: 3px;
}
.obobox h3:first-child {
margin: 0rem 0 1rem 0;
}
#dlbtn {
margin: 0 0 2rem 0;
}
#dlbtn a {
display: block;
margin: 0;
padding: 2.5rem 0;
text-align: center;
font-size: 3.6em;
font-size: 3.6rem;
font-weight: bold;
line-height: 1.6;
color:#fff;
text-decoration: none;
border-radius: 10px;
background: #008d90;
box-shadow:0px 10px 0px 0px #005f61;
}
#dlbtn a:hover {
background: #007274;
box-shadow:0px 7px 0px 0px #003b3c;
transform: translate3d(0, 3px, 0);
}

.formbox {
text-align: left;
margin: 3rem 0;
color:#fff;
}
.formbox p {
font-size: 1.6em;
font-size: 1.6rem;
font-weight: normal;
line-height: 1.6;
margin: 0 0 1.5rem 0;
}
.formbox h2 {
margin: 0;
padding: 1rem 1.5rem .75rem 1.5rem;
background: #1c4281;
color:#fff;
font-size: 2.2em;
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
border-radius: 5px 5px 0 0;
}
.formbox div.box {
padding: 3rem;
background: #122545;
border-radius: 0 0 10px 10px;
}
.formbox table td div {
margin-bottom: .5rem;
}
.cyuibox {
text-align: left;
margin-bottom: 3rem;
}
.cyuibox h2 {
margin: 0;
padding: 1rem 1.5rem .75rem 1.5rem;
background: #222;
color:#ffff33;
font-size: 2.2em;
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
border-radius: 5px 5px 0 0;
}
.cyuibox div {
padding: 2rem;
background: #131313;
border-radius: 0 0 5px 5px;
}
.cyuibox h3 {
padding: .75rem 1rem .5rem 1rem;
margin: 3rem 0 1rem 0;
background: #333;
color:#ffff33;
font-size: 1.6em;
font-size: 1.6rem;
font-weight: normal;
border-radius: 3px;
}
.cyuibox h3:first-child {
margin: 0rem 0 1rem 0;
}
.cyuibox p {
font-size: 1.4em;
font-size: 1.4rem;
font-weight: normal;
line-height: 1.6;
color:#eee;
margin: 0 0 1.5rem 0;
}
.cyuibox ul {
margin: 0 0 2rem 0;
padding: 0;
}
.cyuibox ul li {
margin: 0 0 .3rem 2.3rem;
padding: 0;
color:#eee;
list-style: none;
text-indent: -2.3rem;
font-size: 1.4em;
font-size: 1.4rem;
line-height: 1.6;
font-weight: normal;
}
.tweetbox {
text-align: left;
margin-bottom: 3rem;
}
.tweetbox h2 {
margin: 0;
padding: 1rem 1.5rem .75rem 1.5rem;
background: #3190dd;
color:#fff;
font-size: 2.2em;
font-size: 2.2rem;
font-weight: normal;
line-height: 1.4;
border-radius: 5px 5px 0 0;
}
.tweetbox div.box {
background: #e3f2ff;
color:#222;
border-radius: 0px 0px 5px 5px;
padding: 2rem;
display:flex;
  justify-content:space-between;
}
.twtimelinebox {
background: #3190dd;
padding: .3rem;
border-radius: 5px;
width: 40%;
}
.twtext {
width: 57%;
}
.twtext p:first-child {
margin-bottom: 1rem;
font-size: 1.6em;
font-size: 1.6rem;
line-height: 1.6;
}
.twtext p:nth-child(2) {
margin-bottom: 2rem;
font-size: 1.4em;
font-size: 1.4rem;
line-height: 1.6;
background: #f7fbff;
padding: .3rem .75rem;
border-radius: 3px;
}
footer {
margin:4rem auto;
}
footer p:first-child {
width:40%;
margin:0 auto;
}
footer p#copyright {
margin: 2rem 0 4rem 0;
text-align: center;
font-size: 1.2em;
font-size: 1.2rem;
line-height: 1.6;
color:#596093;
}

form {
margin: 0;
}
input,
textarea {
border: 1px solid #6b82a6;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input:focus {
    border-color: #6d9eee;
    background-color: #e2f6ff;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(205,255,255,.075),0 0 8px rgba(2205,255,255,.6);
    box-shadow: inset 0 1px 1px rgba(205,255,255,.075),0 0 8px rgba(205,255,255,.6);
}
input[name="clip-1"] {
border:none;
border-radius: 0;
-webkit-box-shadow: inset 0 0 0 rgba(0,0,0,.075);
box-shadow: inset 0 0 0 rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
input[name="_name"],
input[name="penname"],
input[name="_address"],
input[name="_email"],
input[name="_tel"]{
width: 96%;
padding: 2%;
}
input[name="_yubin"],
input[name="_age"],
input[name="_member"] {
padding: 2%;
}
.required {
    color: #ffff00;
}
.btnarea {
width: 100%;
display: flex;
}
.submitbtn {
	margin: 0 auto;
	text-align: center;
}
.submitbtn input[type="submit"] {
    padding: 1% 3%;
    font-size: 120%;
    line-height: 160%;
	background-color:#cc0000;
	color:#fff;
	border:#cc0000 2px solid;
	font-weight: bold;
	cursor: pointer
}
.backbtn {
	margin: 0 auto;
	text-align: center;
}
.backbtn input[type="button"] {
    padding: 1% 3%;
    font-size: 120%;
    line-height: 160%;
	background-color:#fff;
	color:#cc0000;
	border:#cc0000 2px solid;
	font-weight: bold;
	cursor: pointer
}
.btnarea .submitbtn,
.btnarea .backbtn {
width: 48%;
margin: 0 1%;
display: block;
}
.btnarea .submitbtn input,
.btnarea .backbtn input {
padding: 3% 3%;
display: block;
width: 100%;
}
.btnarea .submitbtn {
text-align: right;
}
.btnarea .backbtn {
text-align: left;
}

input[type="radio"] {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
	margin: -2px 5px 0 0;
}
.fadein-bottom {
transition: all 0.8s ease-out;
transform: translateY(50px);
opacity: 0;
}
.fadein-bottom.active {
transform: translateY(0%);
opacity: 1;
}
.fadein-left {
transition: all 0.8s ease-out;
transform: translateX(-50px);
opacity: 0;
}
.fadein-left.active {
transform: translateX(0);
opacity: 1;
}
.fadein-right {
transition: all 0.8s ease-out;
transform: translateX(-50px);
opacity: 0;
}
.fadein-right.active {
transform: translateX(0);
opacity: 1;
}
p.txt_ll {
font-size: 2.4em !important;
font-size: 2.4rem !important;
line-height: 1.4;
}
p.txt_l {
font-size: 1.8em !important;
font-size: 1.8rem !important;
line-height: 1.4;
}
p.txt {
font-size: 1.4em !important;
font-size: 1.4rem !important;
line-height: 1.4;
}
p.txt_s {
font-size: 1.2em !important;
font-size: 1.2rem !important;
line-height: 1.4;
}
p.txt_ss {
font-size: 1.1em !important;
font-size: 1.1rem !important;
line-height: 1.4;
}
.table {
padding:0;
border-collapse: collapse;
width:100%;
margin:15px 0 20px 0;
font-size: 1.4em;
font-size: 1.4rem;
line-height: 1.5;
}
.table th {
border-bottom:#7496cd 1px solid;
border-top:none;
border-left:none;
background-color:#426fb8;
font-weight:normal;
color: #fff;
padding:1%;
width:25%;
vertical-align: top;
text-align: left;
}
.table td {
border-bottom:#9badc9 1px solid;
border-top:none;
border-left:none;
background-color:#e4ecf9;
color:#222;
padding:1%;
width:75%;
vertical-align: top;
text-align: left;
}
.fltbox {
clear:both; zoom:1;
}
.fltbox:before,.fltbox:after {
content:"."; clear:both; display:block; height:0; line-height:0; visibility:hidden;
}
.fright {
float:right
}
.fleft {
float:left
}
a {
	color:#01b3b7;
	text-decoration:none;
}
a:hover {
	color:#00dadf;
	text-decoration:underline;
}

.gry {
	color:#333333 !important;
}
.red {
	color:#FF0000 !important;
}
.mrgT {
	margin-top:2em !important;
}
.mrgTs {
	margin-top:1em !important;
}
.mrgTss {
	margin-top:0.5em !important;
}
.mrgB {
	margin-bottom:2em !important;
}
.mrgBs {
	margin-bottom:1em !important;
}
.mrgBss {
	margin-bottom:0.5em !important;
}
.prltive {
	position:relative;
}
.center {
	text-align:center;
}
.right {
	text-align:right;
}
.indent {
	text-indent:-1.2em;
	margin-left:1.2em;
}



@media screen and (max-width: 1140px) {

}
@media screen and (max-width: 992px) {

#hdarea h1 {
width: 88%;
left: 6%;
}
.copybox {
    width: 94%;
    margin: 4rem auto 2% auto;
}
#datebox {
    width: 80%;
    order: 2;
}
#gio {
    width: 10%;
    order: 3;
}
#pipi {
    width: 10%;
    order: 1;
}
#cntbox {
    width: 90%;
    margin: 0 auto;
}
#hdarea2 {
    padding-top: 1.5rem;
}
#obobtn {
    margin: 1rem 0 2.4rem 0;
}
#obobtn a {
    padding: 1rem 0 .75rem 0;
    font-size: 3.6em;
    font-size: 3.6rem;
    border-radius: 5px;
    box-shadow: 0px 10px 0px 0px #660000;
}
#obobtn a:hover {
    box-shadow: 0px 5px 0px 0px #660000;
}
#obobtn2 {
    margin: 1rem 0 2.4rem 0;
    padding: 1rem 0 .75rem 0;
    font-size: 3.6em;
    font-size: 3.6rem;
    border-radius: 5px;
    box-shadow: 0px 10px 0px 0px #666;
}
.formbox {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.cyuibox h3 {
    margin: 1.5rem 0 1rem 0;
}
.obobox {
    text-align: left;
    margin-bottom: 1rem;
}
.obobox h2,
.cyuibox h2,
.formbox h2,
.tweetbox h2 {
    margin: 0;
    padding: 1rem 1.2rem .5rem 1.2rem;
    font-size: 1.8em;
    font-size: 1.8rem;
}
.obobox div,
.cyuibox div {
    padding: 1rem;
    border-radius: 0 0 3px 3px;
}
.formbox div.box {
    padding: 1rem;
    border-radius: 0 0 3px 3px;
}
.obobox p {
    margin: 0 0 1rem 0;
}
#dlbtn a {
    padding: 1rem 0;
    font-size: 2.2em;
    font-size: 2.2rem;
    border-radius: 5px;
}
.cyuibox {
    margin-bottom: 0rem;
}
.cyuibox p {
    margin: 0 0 1rem 0;
}
.cyuibox ul {
    margin: 0 0 1rem 0;
    padding: 0;
}
.cyuibox ul li {
    margin: 0 0 .3rem 2rem;
}
.tweetbox {
margin-bottom: 1rem;
}
.tweetbox div.box {
border-radius: 0px 0px 3px 3px;
padding: 1rem;
display:block;
}
.twtimelinebox {
margin-top: 1rem;
padding: .2rem;
border-radius: 3px;
width: 100%;
}
.twtext {
width: 100%;
}
.twtext p {
margin-bottom: 1rem;
}
#copyright {
    margin: 1rem 0 2rem 0;
    font-size: 1.1em;
    font-size: 1.1rem;
    line-height: 1.4;
}
.table th,
.table td {
width: 98%;
display: block;
}
.backbtn input[type="button"] {
    padding: 1rem .5rem;
    font-size: 100%;
}
.submitbtn input[type="submit"] {
    padding: 1rem .5rem;
    font-size: 100%;
}

}
@media screen and (max-width: 768px) {
#hdarea div p:nth-child(2),
#hdarea div p:last-child {
display: none;
}
footer {
margin:2rem auto;
}
footer p:first-child {
width:70%;
margin:0 auto;
}
p.txt_ll {
font-size: 2.0em !important;
font-size: 2.0rem !important;
line-height: 1.4;
}
}
@media screen and (max-width: 576px) {

}