@charset "UTF-8";
/*======================================================
	Reset Html5Doctor
=========================================================*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}

ul, li {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

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

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
    border: none;
}

input[type="submit"],
input[type="button"],
button {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
  padding:0;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration,
button::-webkit-search-decoration {
  display: none;
}

input[type="submit"]::focus,
input[type="button"]::focus,
button::focus {
  outline-offset: -2px;
}

img {vertical-align: top;}



/*======================================================
 Common
=========================================================*/
html, body {
	width:100%;
	height:100%;
}
body{
	color: #5b5951;
	line-height:130%;
	font-size: 26px;
	width:100%;
	height:100%;
}
.textbox{
	max-width:650px;
	margin:0 auto;
	padding: 10px;
	border-radius: 10px;
	box-sizing: border-box;
	background-color: #FFF;
	box-shadow: 0 0 15px rgba(255, 107, 127, 0.7);
}
.copyright{color:#a66c22; padding-bottom:10px;}



/*======================================================
=========================================================
	 Untilities
=========================================================
=========================================================*/

/*======= テキスト色共通クラス  ==========*/
.txt-pink {color: #e4485d !important;}
.txt-violet {color: #5a49dc !important;}
.txt-cyan {color: #007a8c !important;}
.txt-red { color: #f03a51 !important;}
.txt-orange {color: #eb6833 !important;}
.txt-green { color: #3fb25d !important;}
.txt-brown {color: #a66c22 !important;}
.txt-gold { color: #b88b00 !important;}
.txt-gold-02 { color: #85752c !important;}
.txt-black { color: #000 !important;}
.txt-white { color: #fff !important;}
.txt-blue { color: #36f !important; }

/*======= テキスト帯共通クラス  ==========*/
.txt-border{
	padding: 2%;
	margin: 0 auto;
	color: #FFF;
	width: 96%;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.txt-border.violet{background-color:#b93ed3;}
.txt-border.pink{background-color:#ff42ca;}
.txt-border.red{background-color:#f03a51;}
.txt-border.cyan{background-color:#0099ad;}
.txt-border.gold{background-color:#c29d43;}
.txt-border.white{background-color:#FFF;color:#c29d43;}

/*======= Width ==========*/
.w130{width:130px !important;}
.w160{width:160px !important;}
.w170{width:170px !important;}
.w180{width:180px !important;}
.w190{width:190px !important;}
.w200{width:200px !important;}
.w210{width:210px !important;}
.w220{width:220px !important;}
.w230{width:230px !important;}
.w260{width:260px !important;}
.w280{width:280px !important;}
.w320{width:320px !important;}
.w360{width:360px !important;}
.w370{width:370px !important;}
.w380{width:380px !important;}
.w390{width:390px !important;}
.w400{width:400px !important;}
.w410{width:410px !important;}
.w420{width:420px !important;}
.w430{width:430px !important;}
.w440{width:440px !important;}
.w450{width:450px !important;}
.w640{width:640px !important;}

/*======= Margin-top ==========*/
.mt0 {margin-top: 0 !important;}
.mt5 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt90 {margin-top: 90px !important;}
.mt100 {margin-top: 100px !important;}
.mt110 {margin-top: 110px !important;}
.mt120 {margin-top: 120px !important;}
.mt130 {margin-top: 130px !important;}
.mt140 {margin-top: 140px !important;}
.mt150 {margin-top: 150px !important;}
.mt200 {margin-top: 200px !important;}
.mt300 {margin-top: 300px !important;}

/*======= Margin-left ==========*/
.ml0 {margin-left: 0px !important;}
.ml20{margin-left: 20px !important;}
.ml40{margin-left: 40px !important;}
.ml60 {margin-left: 60px !important;}
.ml150 {margin-left: 150px !important;}

/*======= Margin-right ==========*/
.mr0 {margin-right: 0px !important;}
.mr20{margin-right: 20px !important;}
.mr60 {margin-right: 60px !important;}

/*======= Margin-bottom ==========*/
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb60 {margin-bottom: 60px !important;}
.mb70 {margin-bottom: 70px !important;}
.mb80 {margin-bottom: 80px !important;}
.mb90 {margin-bottom: 90px !important;}
.mb100 {margin-bottom: 100px !important;}
.mb200 {margin-bottom: 200px !important;}

/*======= padding-left ==========*/
.pl0 {padding-left: 0px !important;}
.pl10 {padding-left: 10px !important;}
.pl20 {padding-left: 20px !important;}
.pl30 {padding-left: 30px !important;}

/*======= padding-top ==========*/
.pt0 {padding-top: 0px !important;}
.pt5 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt20 {padding-top: 20px !important;}
.pt30 {padding-top: 30px !important;}

/*======= padding-bottom ==========*/
.pb0 {padding-bottom: 0px !important;}
.pb5 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb100 {padding-bottom: 100px !important;}

/*======= reset ==========*/
.no-bg { background: none !important;}
.no-bd { border: none !important;}
.no-bd-rad {-webkit-border-radius: 0px !important; border-radius: 0px !important;}
.no-mg { margin: 0 !important;}
.no-pd { padding: 0 !important;}
.no-wid { width: auto !important;}
.no-bold { font-weight: normal !important;}

/*======= Float ==========*/
.f-left { float: left !important;}
.f-right { float: right !important;}

/*======= text align ==========*/
.txt-l { text-align: left !important;}
.txt-c { text-align: center !important;}
.txt-r { text-align: right !important;}

/*======= vertical align ==========*/
.va-t { vertical-align: top;}
.va-m { vertical-align: middle;}
.va-b { vertical-align: bottom;}

/*======= font size ==========*/
.fs14 { font-size: 14px !important;}
.fs16 { font-size: 16px !important;}
.fs18 { font-size: 18px !important;}
.fs20 { font-size: 20px !important;}
.fs22 { font-size: 22px !important;}
.fs24 { font-size: 24px !important;}
.fs25 { font-size: 25px !important;}
.fs26 { font-size: 26px !important;}
.fs28 { font-size: 28px !important;}
.fs30 { font-size: 30px !important;}
.fs32 { font-size: 32px !important;}
.fs34 { font-size: 34px !important;}
.fs36 { font-size: 36px !important;}

/*======= font weight ==========*/
.fwn { font-weight: normal !important;}
.fwb { font-weight: bold !important;}

/*======= lign height ==========*/
.lh1 { line-height: 1; }
.lh15 { line-height: 1.5; }

/*======= pointer-events ==========*/
.ptr-none {pointer-events: none;}

/*======= display ==========*/
.disp-block{display:block !important;}

/*======= clear fix ==========*/
.cf:after{
	position: relative;
	display: block;
	content: " ";
	clear: both;
	line-height: 0;
	visibility: visible;
}


/*======= contents ==========*/
#wrap{
	background-image:url('images/bg.png');
	width:100%;
	background-size:100%;
	background-repeat: repeat;
}
#content{
	background-image:url('images/main.png');
	background-repeat: no-repeat;
	background-size: 100%;
	height:3150px;
	width:100%;
	position:relative;
}
#register-button{
	position:absolute;
	top:790px;
	left:75px;
}
#login-button{
	position:absolute;
	top:985px;
	left:215px;
}
#movie, #twitter, #instagram{
	width:750px;
	height:550px;
	background-image:url('images/movie.png');
	background-repeat: no-repeat;
	background-size: 100%;
	margin-bottom:30px;
	position:relative;
}
#movie iframe{
	position:absolute;
	top: 135px;
    left: 50px;
}
#twitter{
	background-image:url('images/twitter.png');
}
#twitter .twitter{
	position:absolute;
	top: 135px;
    left: 50px;
}
#instagram{
	background-image:url('images/instagram.png');
	height:1138px;
}
#instagram .linkarea{
	position:absolute;
	top: 135px;
    left: 50px;
	width:650px;
	height:950px;
	cursor: pointer;
}

#icons{
	width:420px;
	margin:0 auto;
	overflow: hidden;
	margin-bottom:50px;
}
#icons li{
	width:70px;
	height:70px;
	margin:20px 35px;
	float:left;
	text-indent:-9999px;
}
#icons .instagram-icon, #icons .line-icon, #icons .twitter-icon{
	background-image:url('images/icon_instagram.png');
	width:70px;
	height:70px;
	background-size: 100%;
}
#icons .line-icon{
	background-image:url('images/icon_LINE.png');
}
#icons .twitter-icon{
	background-image:url('images/icon_twitter.png');
}
#footer{
	margin-bottom:30px;
	text-align: center;
	height:100px;
}