html {}

body {background:#ffdf00; position:relative; z-index:0; height: 100vh;}

canvas {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1;
}

header{position:relative; margin:0 auto; width:90%; z-index:2;}

header .row h2{ padding-top:40px; margin-left:-30px;}
/*header .row h2{ padding-top:40px; margin-left:-30px;}*/
header .row h3{ padding-top:60px; margin-left:-120px;}

@media (max-width: 767px) {
	/*header .row h1 img{ width:80%;}*/
	header .row h1 img{ width:100%;}
	header .row h2{ margin-top:5px; padding-top:0px; margin-left:30px;}
	header .row h3{ margin-top:-5px; padding-top:0px; margin-left:0px;}
		}


#wrap {
	position:absolute;
	left:5%;
	width:90%;
	padding-bottom:150px;
	z-index:2;
}

footer{position:fixed; bottom:0; right:2%; z-index:6; width:100%; text-align:right;}
@media (max-width: 767px) {
	footer p{ text-align:center;}
}
#attention{color:#ff0000; font-weight:bold; display:none;}

ul.filtr-container {list-style:none; margin-bottom:1em;}
ul.filtr-container li{
	text-align:left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position:relative;
	padding-top:20px;
	display:none;
}
ul.filtr-container li img{
	width:100%;
	height:auto;
	}
/*
ul.filtr-container li > img:hover{
	cursor:url("../images/cur_like.gif") 0 0, auto;
}
*/
ul.filtr-container li .modal-open img{
	position:absolute;
	right:3%;
	bottom:0.5%;
	width:55%;
	height:auto;
}
.clear {clear:both;}

.item-desc {
    background-color: rgba(0,0,0,0.5);
    color: white;
    position: absolute;
    text-transform: uppercase;
    text-align: center;
    padding: 1rem;
    z-index: 1;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}



.sendmail{
	position: fixed;
    bottom: 0;
    z-index: 5;
	padding:1.5% 5%;
	padding-bottom:40px;
	margin:0px;
	overflow:hidden;
	background-color:#ec77a3;
	border-top: 3px solid #fff;
}
.sendmail p{ font-size:130%; margin:0; line-height:130%; height:100%; padding-top:5px; white-space: nowrap; color: #fff;}
.sendmail p span{ font-size:180%; color: #ffdf00;}
@media (max-width: 767px) {
	.sendmail p{ margin-bottom:0.5em;}
	}
.sendmail .mailbox{display:inline-table; vertical-align:bottom;}
.sendmail .mailbox label,
.sendmail .mailbox button{
	display:table-cell;
	}
.sendmail .mailbox label{ width:80%; padding-right:10px;}
.sendmail .mailbox button.btn-primary{ width:100%; background-color: #48aee1;border-color: #fff;}



#attention {
	margin-top: 5px;
    margin-left: -10px;
	font-size:100%;
}


.modal-overlay {
    z-index:3;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
	height:100%;/*for old Safari*/
    height:100vh;
    background-color:rgba(0,0,0,.5)}
.modal-overlay (:target) {height:100%\9} /* IE9,10 */
a.modal-open:hover {cursor:pointer}
.modal-content {
    position:absolute;
    top:5%;
    display:none;
    z-index:4;
    margin:10px 5%;
    background:#ec77a3;
    text-align:center;
    border-radius:20px;
	max-width:800px;
}
.modal-content .imgbox{width:100%; background-color:#fff; text-align:center; padding:20px; display:table; box-sizing:border-box; margin-bottom:20px; table-layout: fixed;}
.modal-content h2 {font-size:140%; margin-bottom:0.5em; color:#fff; font-weight:bold;}
.modal-content .tablebox {display:table-cell; vertical-align:bottom; width: 60%;}
.modal-content table { width:auto; text-align:left; border-top:1px solid #ec77a3; border-left:1px solid #ec77a3;background-color:#fff;}
.modal-content table th,
.modal-content table td{padding:0.8em; border-right:1px solid #ec77a3; border-bottom:1px solid #ec77a3;}
.modal-content table th{white-space:nowrap; color:#ec77a3;}


.modal-content .imgArea{position:relative; display:table-cell; padding-right:10px; width:40%; }	
.imgArea .arR,
.imgArea .arL{ position:absolute; z-index:9999;}
.imgArea .arR{ right:20px;}
.imgArea .arL{ left:10px;}	
.imgArea .arR:before,
.imgArea .arL:before {
    content: '';
    width: 25px;
    height: 25px;
    background: #ff69b4;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -8px;
}
.imgArea .arR:after,
.imgArea .arL:after {
    content: '';
    width: 0;
    height: 0;
    border: solid 6px transparent;
    position: absolute;
    top: 50%;
    margin-top: -2px;
}
.imgArea .arR:after {
    border-left: solid 5px #ffffff;
	left: 10px;
}
.imgArea .arL:after {
    border-right: solid 5px #ffffff;
	left: 3px;
}


@media screen and (max-width: 640px) {
.modal-content .imgbox{display:block; width:100%; box-sizing:border-box; table-layout:auto;}
.modal-content img {display:block; padding-right: 0px; margin-bottom:20px; height: auto; max-width:100%; width:100%;}
.modal-content .tablebox {display:block; width:100%;}
.modal-content .imgArea{display:block; width:100%;padding-right:0px;}	
.modal-content .imgArea .arR{ right:10%;}

}

.modal-content .youkouBox{ width:100%; background-color:#fff; text-align:center; padding:20px; margin-bottom:20px; display:block;}
.modal-content .youkouBox p{ text-align:left;}
.modal-content .youkouBox table { width:100%; text-align:left; border-top:1px solid #ec77a3; border-left:1px solid #ec77a3; background-color:#fff; margin-top:-1em; margin-bottom:1em; }
.modal-content .youkouBox ul { 
  list-style-type: none;
  counter-reset: section;
  margin-left: 3.5em;
}
.modal-content .youkouBox li {
    counter-increment: section;
	margin-bottom:0.3em;
}
.modal-content .youkouBox li:before {
    content: "Step" counters(section,"");
    display: inline-block;
    float: left;
    width: auto;
    height: auto;
    margin-left: -5rem;
    margin-right: 1rem;
	font-weight:bold;
}


a.modal-close {
	position:absolute;
	top:5px;
	right:15px;
	color:#fff;
	font-size:35px;
	line-height:1;
	font-weight:bold;
	text-decoration:none}
a.modal-close:hover {
	cursor:pointer;
	opacity:.6}
@media screen and (max-height: 640px) {
	.modal-content {padding:0px; width:auto; max-width:90%;min-width:270px;}
	.modal-content h1 {font-size:100%; margin-bottom:3px}
	.modal-content p {font-size:75%;width:70%; margin:auto}
	a.modal-close:hover {opacity:1}
}
@media screen and (max-width: 640px) {
	.modal-content {padding:0px; width:auto; max-width:90%;min-width:270px;}
	.modal-content img {max-height:inherit; width:100%; height:auto}
	.modal-content table{width:100%;}
	.modal-content p {font-size:75%; width:100%;}
	a.modal-close:hover {opacity:1}
}


.thanksBox {
    background:#ec77a3;
    text-align:center;
    border-radius:20px;
	padding:0px;
	margin-top:20px;
}
.thanksBox div {
	background-color:#fff;
	padding:20px;
	margin:20px 0px;
	min-height:500px;
	}
.thanksBox h3{
	font-size:140%;
	margin-bottom:1em;
	color: #ec77a3;
	font-weight:bold;
}
.thanksBox p{
	margin:0;
	padding:0;
	margin-bottom:1em;
}
.thanksBox a{
	color:#48aee1;
	text-decoration:underline;}
@media screen and (max-width: 767px) {
	.thanksBox div {
	min-height:auto;
	}
	
}

.tw-button,
.blog-button{
	margin-bottom:3px;
	}

img.insta{max-width:137px; display: inline-block; margin-bottom:3px;}
#send{float:left;}
#email{float:left;}

.tw-button,
.blog-button{
	color:#fff;
	text-decoration:none;
	font-size:70%;
	padding:0.3em 0.5em;
	border-radius:5px;
	display: inline-block;
	}
.tw-button{background-color:#1b95e0;}
.blog-button{background-color:#666;}
.tw-button:hover,
.blog-button:hover{
	text-decoration:none;
	color:#fff;
	opacity: .8;
}
.tw-button::before,
.blog-button::before{
    display:inline-block;
    width:16px;
    height:16px;
    padding-left:20px;
	vertical-align:middle;
}
.tw-button::before{
	content: '';
 	background:url(../images/twlogo.png) center left no-repeat;
	background-size:contain;
}
.blog-button::before{
	content: '';
 	background:url(../images/bloglogo.png) center left no-repeat;
	background-size:contain;
}
.ui-widget.ui-widget-content {
	border: 5px solid #48aee1;
    padding: 0;
    border-radius: 10px;
}
.ui-widget-content {
    border: 1px solid #dddddd;
    background: #ffffff;
    color: #333333;
	margin:0 1em;
}
.ui-dialog .ui-dialog-content {
    padding: 1em;
}
.ui-dialog .ui-dialog-buttonpane {
    margin-top: 0;
    padding: 0; 
}
.ui-dialog .ui-dialog-buttonpane button {
    background-color: #48aee1;
	color:#fff;
}
.ui-widget-header {
	border: none;
    border-radius: initial;
    background: #48aee1;
    color: #ffffff;
    font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

.lead{
	border-radius:10px;
	border:3px solid #ec77a3;
	background-color:#fff;
	font-size:95%;
	padding:1em;
	background: rgba(255,255,255,0.8);
	text-align:center;
}
.lead .pink{color:#ec77a3; font-weight:bold; font-size:140%;}

/*
.lead a {
	background-color:#48aee1;
	padding:0.5em 2em;
	text-decoration:none;
	display:inline-block;
	border-radius:10px;
	color:#fff;
}*/
.present{
	padding-top:20px;
}
.present img{
	width:100%;
	max-width:650px;
	margin:0px auto;
	}
/*
.ui-dialog {
	position:fixed;!important}*/
	
.social{ 
	padding-bottom:10px;
}
.social a {
	display:inline-block;
	}
.social .fb_iframe_widget_fluid{
	display:inline-block;
}

.yoteiImg img  { margin-left: auto; margin-right: auto;}

.yotei { margin-bottom:1em;margin-left: auto; margin-right: auto; width:100%; max-width:600px;}
.yotei th { border-bottom:1px solid #ec77a3; text-align:center; padding:0.5em; font-size:120%;}
.yotei td { border-bottom:1px solid #ec77a3; text-align:left; padding:0.5em;}
.yotei .date{width:6em;}
.yotei .name{}
.yotei .menber{width:9em;}
@media (max-width: 767px) {
	.yotei .menber{width:9em;}
}


/* パソコン解像度時の画像 */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォン解像度時の画像 */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}