@charset "UTF-8";

:root {
  --color_green     : rgb(  3 120 121 / 1);
  --color_beige     : rgb(203 188 146 / 1);
  --color_yellow    : rgb(242 249 103 / 1);
  --color_orange    : rgb(251 114 101 / 1);
  --color_bg_white  : rgb(255 255 255 / 0.8);
  --color_bg_yellow : rgb(242 249 153 / 0.9);
}

/*PC*/
@media screen and ( min-width:700px ){
}

/*SP*/
@media screen and ( max-width:699px ){
}


body,html{
	margin:0;
	padding:0;
}
body {
	background-image:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 609 8000">  <defs><style>      .color_orange {        fill: %23fb9285;      }      .color_beige {        fill: %23dbcca2;      }    </style>  </defs>  <g>    <g id="_Layer_1" data-name="Layer_1">      <polygon class="color_orange" points="611 8000 -1.3 8000 -1.3 366 611 170 611 801.3"/>      <path class="color_beige" d="M611,203.1c-35.1,122.2-269.3,151.7-360.6,160.8C119.7,381.4-1.3,490.9-1.3,490.9V229s64.5-72.4,200.6-83.3,164.9,17.4,252.1-.2S611,6,611,6v197.1Z"/>    </g>  </g></svg>'), url("./bg.jpg");
	background-repeat:no-repeat, no-repeat;
	background-size:100%;
	background-position:center 250px, center 0px;
	font-family: sans-serif;
}

main{
	margin:0 auto;
	overflow:hidden;
	box-sizing: border-box;
	display:block;
	background-image: ;
	background-repeat:no-repeat;
	width:1040px;
}
header {
	position:relative;
	overflow:relative;
}
.color_orange{
	fill:var(--color_yellow);
}
.color_beige{
	fill:var(--color_beige);
}
#top_bar{
	background-color:rgba(255, 255, 255, 1);
}
#top_bar span{
	max-width:1050px;
	margin:0 auto 0;
	padding:4px 0 2px;
	display:block;
}

#header_title{
	max-width:1050px;
	padding:1em 0;
	margin:0 auto;
	position:relative;
}
#title_presents{
	display:block;
	margin:1em auto 1em;
	width:98%;
}

@media screen and ( min-width:700px ){
	#header_content{
		top:0;
		width:40%;
		position:relative;
	}
}
#title_date{
	margin:0 0;
	display:block;
	height:660px;
	max-height:80vw;
}
@media screen and ( max-width:699px ){
	#title_date{
		/*height:100vw;
		max-height:85vw;*/
	}
}
#title_img{
	z-index:10;
	position:absolute;
	width:1200px;
	max-width:100%;
	top:-10px;
	filter: drop-shadow(2px 2px 5px rgb(0,0,0,0.4));
}

#date_img{
	z-index:10;
	position:absolute;
	width:300px;
	max-width:30%;
	top:-10px;
	right:0px;
	margin:auto 0%;
}

@media screen and ( max-width:699px ){
	#date_img{
	}
}

#minna_img{
	z-index:10;
	position:absolute;
	width:650px;
	max-width:65%;
	bottom:50px;
	overflow:show;
	filter: drop-shadow(2px 2px 5px rgb(0,0,0,0.2));
}
@media screen and ( max-width:699px ){
	#minna_img{
	}
}


#title_date span{
}
/*PC*/
@media screen and ( min-width:700px ){
	#title_date{
		/*width:60%;*/
	}
}

/*SP*/
@media screen and ( max-width:699px ){
}



#family{
	position:absolute;
	right:0%;
	z-index:2;
	max-width:50vw;
	width:400px;
	bottom:-20px;
}

#family img{
	width:100%;
}



#pre_photo{
	top:40px;
	position:relative;
}

#pre_title{
	position:absolute;
	top:0;
	left:50%;
	transform: rotate(0deg)  translate(-50%, -70%);
	z-index:20;
	font-size:95%;
}

#pre_photo{
}

#oyako{
	position:absolute;
	bottom:130px;
	left:0%;
	display:block;
	max-height:50vh;
	z-index:0;
}
#oyako img{
	width:400px;
}

/*PC*/
@media screen and ( min-width:700px ){
	#pre_photo div > span{
		display:block;
		text-align:center;
		font-size:80%;
		background-color:#FFF;
		padding:4px;
		box-shadow: 2px 3px 5px 4px rgba(0,0,0,0.4);
	}
	#pre_pankui{
		transform: rotate(10deg)  translate(-30%, 0%);
		width:45%;
		z-index:5;
		position:relative;
	}
	#pre_run{
		width:40%;
		z-index:10;
		transform: rotate(-10deg)  translate(160%, -100%);
		position:relative;
	
	}
	#pre_tamaire{
		transform: rotate(-3deg)  translate(65%, -180%);
		width:45%;
		z-index:1;
	}
}

/*SP*/
@media screen and ( max-width:699px ){
	#pre_photo div{
		display:table;
		border-collapse:separate;
		background-color:#FFF;
		padding:2px;
	}
	#pre_photo > div > span{
		display:table-cell;
		border:2px solid rgba(255,255,255,0);
	}
	#pre_photo > span{
	}
	#pre_photo #pre_title{
	}
}


.balloon{
	position:absolute;
	width:100px;
	z-index:-1;
	overflow:hiddden;
	opacity:0.8;
}
.balloon img{
	width:100%;
	height:auto;
}
#balloon_pan{
	top:10px;
	right:7px;
	width:80px;
}
#balloon_run{
	bottom:-50px;
	right:-50px;
	width:70px;
}
#balloon_toss{
	bottom:-10px;
	left:8px;
	width:90px;
}

.balloon{
    transform-origin: center bottom;
    /*animation: fuwari 5s ease-in-out infinite;*/
}
.balloon img{
    transform-origin: center bottom;
}
#balloon_pan{
    animation: fuwari 9s infinite ease-in-out ;
}
#balloon_pan img{
	animation: yurari 7s infinite ease-in-out ;
}
#balloon_run{
    animation: fuwari 7s ease-in-out infinite;
}
#balloon_run img{
	animation: yurari 8s infinite ease-in-out ;
}
#balloon_toss{
    animation: fuwari 8s ease-in-out infinite;
}
#balloon_toss img{
	animation: yurari 6s infinite ease-in-out ;
}


@keyframes fuwari {
  0% , 100%{
    transform: translateY(-10%);
  }
  50%{
    transform: translateY(10%);
  }
}

@keyframes yurari {
  0% , 100%{
      transform: rotate(5deg);
  }
  50%{
      transform: rotate(-5deg);
  }
}

#otanoshimi{
	
}
#otanoshimi #otanoshimi_title{
	box-sizing:border-box;
	display:table-cell;
	background-color:rgba(252,240,24,1);
	border-radius:50%;
	height:5.5em;
	width:5.5em;
	padding:1.7em 0 0;
	text-align:center;
	vertical-align:middle;
	font-weight:900;
	color:rgba(20, 60, 120, 1);
	line-height:1.2em;
	position:absolute;
	font-size:120%;
	right:50%;
	transform: rotate(0deg)  translate(50%, -70%);
}
#otanoshimi div{
	display:table-row;

}
#otanoshimi div span{
	background-color:rgba(255, 255, 255, 0.5);
	display:table-cell;
	padding:4px;
	margin:1em;
	text-align:center;
	border:4px solid rgba(255, 255, 255, 0);
	width:45%;
	border-collapse:separate;
	border-spacing:1em;
	
}
#otanoshimi #otanoshimi_chusenkai{
	/*background-color:rgba(252,240,24,0.8);*/
	background-color:rgba(255,255,255,0.8);
	font-weight:bold;
}
#otanoshimi #otanoshimi_taiseikan{
	background-color:rgba(20, 60, 160, 0.8);
	color:#FFF;
	font-weight:bold;
}

/*PC*/
@media screen and ( min-width:700px ){
	#otanoshimi{
		top:0;
		background-color:rgba(252,240,24, 0.6);
		padding:.5em;
		box-sizing:border-box;
		position:relative;
		transform: translate(0%, -80%);
		font-size:80%;
		margin:0 0 -20% 0;
		
	}
}

/*SP*/
@media screen and ( max-width:699px ){
	#otanoshimi{
		font-size:80%;
		margin:9em 0 0 0;
		
	}
}


/*----------*/
#moshikomi_kikan{
	padding:5px 10px;
	background-color:rgba(255, 220, 75, 0.2);
	border-radius:1em;

}
img{
	vertical-align:top;
}

#sankahi{
	font-size:110%;
	font-weight:bold;
	border-spacing:0 0.4em ;
}
#sankahi th,
#sankahi td{
	padding:0.1em 0em;
	text-align:center;
}
#sankahi th{
}
#sankahi td.fee{
	text-align:right;
	padding-left:1em;
}
@media screen and ( max-width:699px ){
	#sankahi{
		width:100%;
	}
}

li{
	margin-bottom:0.5em;
}

@media screen and ( min-width:700px ){
	#rule{
		padding-left:4em;
	}
}
@media screen and ( max-width:699px ){
	#rule{
		padding-left:2em;
	}
}
#rule ol{
	margin-top:0;
	margin-bottom:0;
}
#rule li{
	list-style-type: none;
	counter-increment: cnt;
}

#rule li::before{
	content: "Rule " counter(cnt) " ";
	display:inline-block;
	margin:0 0 0 -4em;
	width:4em;
	font-weight:bold;
	color:var(--color_green);
}
/*------*/


.photo_item{
	padding-left:30px;
	padding-ight:30px;
}

#basho{
}
#basho img{
	max-width:480px;
}
#dd_guest{
	padding-left: 0;
	padding-right: 0;
}

/*PC*/
@media screen and ( min-width:700px ){
	#dd_guest table{
		float:left;
		width:20em;
	}
}

/*SP*/
@media screen and ( max-width:699px ){
	#dd_guest table{
		width:20em;
		margin-left:auto;
		margin-right:auto;
		
	}
}

#guest_photo,
#run_photo{
  position: relative;
  width:400px;
  padding:0;
  text-align:center;
  max-width:100%;
}
#guest_photo img,
#run_photo img{
	width:100%;
}
#guest_photo span,
#run_photo span{
  position: absolute;
  bottom: 0;
  left: 0;
  background-color:rgba(255, 255, 255, 0.7);
  width:100%;
  padding:0.5em;
  box-sizing: border-box;
  text-align:center;
  
}


@media screen and ( min-width:700px ){
	#kyosan ul{
		margin:0;
		padding:0 30px;
	}
	
	#kyosan li{
		display:inline-block;
		list-style-type:none;
		margin:0;
	}
	#kyosan li::after{
		content: ' / ';
	}
	#kyosan li:last-of-type::after{
		content: '';
	}
}
/*----------------*/

.heder_content_title{
	box-sizing:border-box;
	display:table-cell;
	background-color:rgba(252,240,24,1);
	border-radius:50%;
	height:5.5em;
	width:5.5em;
	padding:1.7em 0 0;
	text-align:center;
	vertical-align:middle;
	font-weight:900;
	color:rgba(20, 60, 120, 1);
	line-height:1.2em;
	position:absolute;
	font-size:120%;
	right:50%;
	transform: rotate(0deg)  translate(50%, -70%);

}
strong{
	color:#C00;
	font-weight:bold;
	font-size:120%
}
dd.strong{
	background-color:rgba(252,240,24,1);
	
}

em{
	font-style:normal;
	color: var(--color_green);
	font-weight:bold;
}
a{
	text-decoration:none;

}
img.auto{
	width:100%;
	height:auto;
}
main{
	padding:0.3em;
	width:1050px;
	margin:0 auto;
	overflow:hidden;
	box-sizing: border-box;
	display:block;
	max-width:100%;
}
.kyosan_logo{
	height:2em;
	width:auto;
	vertical-align:middle;
}
.center{
	text-align:center;
}
dt{
	background-color:var(--color_bg_yellow);
	letter-spacing:0.1em;
	display:block;
	position: relative;
	color: var(--color_green);
	margin:1em 0 0em;
	padding:0.4em 1em 0.2em;
	font-weight:bold;
	font-size:1.2em;
	border-radius: 10px 10px 0px 0px;
}


dd{
	margin:0em 0em 1em 0em;
	padding:0.9em 0.7em 1em;
	background-color:var(--color_bg_white);
	border-radius: 0px 0px 10px 10px ;
	position: relative;
}
dd img{
	max-width:100%;
}

#kikan img{
	margin-top:-60px;
	z-index:100;
	position: relative;

}

ul.default{
	margin-top:0em;
	margin-bottom:0em;
}
article {
}

aside {
}

footer {
	text-align:center;
	font-size:90%;
	padding:2em 0 2em;
	margin: 0 0;
	color:#FFF;
	background-color:var(--color_green);

	font-weight:bold;
}
.btns{
	overflow:hidden;
}
@media screen and ( max-width:699px ){
	.pc{ display:none}
}

.btncell{
	text-align:center;
}
@media screen and ( min-width:700px ){
	.sp{ display:none}
	.btnbox{
		display:table;
		width:50%;
		border-collapse:separate;
		margin-left:auto;
		margin-right:auto;
	}
	.btns{
		display:table-row;
		width:100%;
	}
	.btncell{
		display:table-cell;
		width:50%;
		padding:2%;
	}
	.btns a{
		
	}
		
}

.btn {
	box-sizing: border-box;
	transition: all 300ms 0s ease;
	text-align:center;
	background-color:#b20000;
	box-sizing: border-box;
	font-size: 100%;
	display:block;
	color: #ffffff;
	font-weight:bold;
	padding: 1em 0em;
	margin:0em 1em 1em;
	background: linear-gradient(#ff2222 0%, #d80000 50%, #ca0000 50%, #a20000 100%);
	border-radius: 20px;
	border: 1px solid #ffffff;
	box-shadow:
		1px 1px 5px rgba(000,000,000,0.8),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(255,255,255,0.2);

	animation: pulse 2s  linear infinite; 
}

.btn:hover{
	color:#FF6;
	background: linear-gradient(#ff4545 0%, #e00000 50%, #d10000 50%, #b20000 100%);
	box-shadow:
		1px 1px 5px rgba(000,000,000,0.4),
		inset 0px 0px 1px rgba(255,255,255,0.6);


}
@keyframes pulse {
  0% {
    color: #FFF;
    opacity:1;
  }
  50%{
    color: #FFA;
    opacity:0.85;
  }
  100% {
    color: #FFF;
    opacity:1;
  }
}

.pc{
}