@charset "UTF-8";
@import url(reset.css);
html, body, #wrapper, main {
		height: 100%;
}

body {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
		font-size: 16px;
		font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", arial, helvetica, sans-serif;
		font-feature-settings: "pwid" 1;
		-webkit-font-smoothing: subpixel-antialiased;
		-moz-osx-font-smoothing: unset;
		-webkit-text-size-adjust: 100%;
		text-rendering: optimizeLegibility;
		word-wrap: break-word;
		color: #3d3d3d;
}

* {
		box-sizing: border-box;
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
}

li {
		list-style: none;
}

img {
		max-width: 100%;
		vertical-align: top;
		height:auto;
		width:100%;
		display: block;
		margin:0 auto;
}
.relative{position: relative;}
.absolute{position: absolute;top: 59%;left: 50%;transform: translate(-50%, -50%);}
@keyframes shiny{
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
      transform: scale(0) rotate(45deg);
      opacity: 0.3;
  }
  81% {
      transform: scale(4) rotate(45deg);
      opacity: 0.85;
  }
  100% {
      transform: scale(40) rotate(45deg);
      opacity: 0;
  }
}



/* ページのスタイル */
/* まずFV */

header.logo_area,
header.logo_area * {
	box-sizing: border-box;
}

header.logo_area {
	max-width: 560px;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 5;
	background: #ffffff;
	box-shadow: 0 6px 14px -7px rgba(0, 0, 0, 0.5);
	padding: 0;
	padding-right: 8px;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	left: 50%;
	transform: translate(-50%, 0%);
}

header.logo_area>img {
	width: 22%;
	margin: 0;
}

header.logo_area>a {
	width: 46.8%;
	margin: 1% 0 0;
}
#wrapper {
	padding-top: 18.5%;
}

main {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: 0 auto;
	display: block;
}



.bubble {
	position: absolute;
	bottom: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 4px rgba(255, 230, 150, 0.3);
}

#bubbleCanvas {
	width: 100%;
	max-width: 580px;
	height: 160vw;
	max-height: 928px;
	overflow: hidden;
	text-align: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 1;
	pointer-events: none;
}


img.ticket{
	z-index: 3;
	top: 70.8%;
	width: 90%;
}
.cta{
	width: 90.4%;
	top: 89%;
}

img.fv2024cont1{
	transform: translate(-50%, 0%);
	top: 0;
	top:2.2%;
	z-index: 2;
}


div.kiran_outer {
  position: absolute;
	width: 90%;
	height: 10%;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 89%;
  border-radius: 13px;
  opacity: 0.7;
  overflow: hidden;
}
div.kiran{
  position: absolute;
  height: 100%;
  width: 10%;
  top: 0%;
  left: 0;
  background-color: #fff;
  opacity: 0;
  overflow: inherit;
  transform: rotate(45deg);
  -webkit-animation: shiny 3.5s ease-in-out infinite;
  animation: shiny 3.5s ease-in-out infinite;
}



/*後半のCTAの方*/
img.ti1{
	top:64%;
}
.ticket + div.kiran_outer{
   top: 60%;
}

.ticket + div.kiran_outer{
  height: 44%;
  border-radius:0;
  width:90%;
}

/*teller*/
.teller {
		position: relative;
		width: 100%;
		background: url("../img/teller_bg.webp");
	  background-size: 100% auto;
	  background-repeat: repeat-y;
	  background-position: top center;
}

.teller:before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
		box-shadow: 0 -18px 15px -14px rgba(0, 0, 0, 0.2) inset, 0 16px 15px -14px rgba(0, 0, 0, 0.4) inset;
}

.teller .inner {
		position: relative;
}

.teller .title {
		width: 74%;
		margin: 0 auto;
		padding: 6% 0;
		display: block;
}

.teller .contents {
		padding-bottom: 4%;
}

.teller .contents li {
		display: block;
		width: 90%;
		padding: 4px 4px 20px;
		margin: 0 auto 7%;
		background: #fff;
		border-radius: 16px;
		box-shadow: 0 7px 17px -6px rgba(0, 0, 0, 0.6);
		transition: .6s ease-in-out;
		-webkit-transition: .6s ease-in-out;
}


.teller ul.contents > li{
	font-family:"NotoSansCJKjp";
	display:flex;margin:4% auto;padding:4% 0;width: 94%;
}
ul.contents > li > img:first-child{
	width:37%;border-radius: 10%;margin:auto 4%;
}
div.prf{
	font-size:0.9rem;margin-right:4%;
}
div.prf> div{font-size:1.7rem;}
div.prf> div::after{content:"先生";font-size:1.2rem;}
div.prf span{
	border-radius: 30px;font-weight: bold;padding: 0.1em 1em;color: #ffffff;width: fit-content;background-color: #ee4f70;
}




/* スタイル */
div.fix {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 2% 0;
  z-index: 11;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 580px;
  margin: 0 auto;
}
div.fix a {
  position: relative;
  display: block;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
}
div.fix img {
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 90%;
  position: relative;
  padding: 0.7% 0;
}


.popup_campaign{
  opacity:0;
}
@keyframes popup_campaign_frombright{
  0%{
    opacity: 0;
      transform: translate(-50%, -50%) translateY(59px);
  }
  100%{
    opacity:1;
    transform: translate(-50%, -50%) translateY(0);
  }
}



.teller .contents li{
  padding:20px;
}
.teller .title{
  width: 100%;
  padding:0;
  padding-top:5%;
}
.teller:before{
  content: none;
}
.teller .contents li{
  box-shadow:0 7px 17px -6px rgb(0 0 0 / 5%);
}
.teller .contents{
  padding-bottom:6%;
}
div.prf> div::after{
  content:none;
}

.cont3{
  top:63%;
  width:81%;
}

/*ここからフォーム*/

.after_form {
		width: 89%;
		margin: 0 auto 5%;;
		display: block;
		text-align:center;
}

.mg10 {
		margin-top: 10px;
}

.prfset_input {
		position: relative;
		background-color: #ffffff;
		padding: 0 3% 10px 3%;
		width: 93%;
		margin: 0 auto;
		border-radius: 0 0 10px 10px;
}

.prfset_input div p:nth-child(1) {
		font-size: 14px;
		border-radius: 15px;
		padding: 14px 0 3px;
		display: block;
		font-weight: bold;
}

.s1 {
		position: relative;
		width: 100%;
		border-radius: 6px;
		background: #ff698a;
}

.s1 select {
		padding: 8px 5%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-weight: bold;
}

.s1 .alw {
		position: absolute;
		top: 50%;
		right: 5%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		width: 18px;
		height: 10px;
		pointer-events: none;
}

.s1 .alw:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		-webkit-transform: translateY(-50%) rotate(45deg);
		width: 59%;
		height: 2px;
		background: #fff;
}

.s1 .alw:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(-45deg);
		-webkit-transform: translateY(-50%) rotate(-45deg);
		width: 59%;
		height: 2px;
		background: #fff;
}

.birth_frame {
		letter-spacing: -.4em;
}

.s2 {
		position: relative;
		width: 40%;
		border-radius: 6px;
		border: 1px solid #a4a4a4;
		display: inline-block;
		letter-spacing: normal;
}

.s2 select {
		padding: 8px 5%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		font-weight: bold;
}

.s2 .alw {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		width: 12px;
		height: 10px;
		pointer-events: none;
}

.s2 .alw:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		-webkit-transform: translateY(-50%) rotate(45deg);
		width: 59%;
		height: 2px;
		background: #3d3d3d;
}

.s2 .alw:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(-45deg);
		-webkit-transform: translateY(-50%) rotate(-45deg);
		width: 59%;
		height: 2px;
		background: #3d3d3d;
}

.s3 {
		position: relative;
		width: 27%;
		margin-left: 3%;
		border-radius: 6px;
		border: 1px solid #a4a4a4;
		display: inline-block;
		letter-spacing: normal;
}

.s3 select {
		padding: 8px 5%;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		font-weight: bold;
}

.s3 .alw {
		position: absolute;
		top: 50%;
		right: 10%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		width: 12px;
		height: 10px;
		pointer-events: none;
}

.s3 .alw:after {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%) rotate(45deg);
		-webkit-transform: translateY(-50%) rotate(45deg);
		width: 59%;
		height: 2px;
		background: #3d3d3d;
}

.s3 .alw:before {
		content: "";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%) rotate(-45deg);
		-webkit-transform: translateY(-50%) rotate(-45deg);
		width: 59%;
		height: 2px;
		background: #3d3d3d;
}
p.form_r20{
	font-size:90%;
}
.input {
		position: relative;
		width: 100%;
		border-radius: 6px;
		border: 1px solid #a4a4a4;
		display: block;
		padding: 8px 5%;
		font-weight: bold;
}

.pp_txt {
		font-size: 12px;
		width: 100%;
		padding: 12px 0 0;
		margin: 0 auto;
}

.pp_area {
		position: relative;
		width: 100%;
		height: 140px;
		border-radius: 6px;
		border: 1px solid #a4a4a4;
		display: block;
		overflow: scroll;
}

.pp_area textarea {
		width: 100%;
		height: 100% !important;
		padding: 8px 5%;
		resize: none;
}

.normal_btn {
		margin-top: 20px;
}

.footer1 {
		text-align: center;
		padding: 8px 2% 5px;
		background-color: #ffb8c6;
}

.footer2 {
		text-align: center;
		padding: 5px 2% 10px;
		background-color: #ffb8c6;
}

#copy {
		text-align: center;
		background-color: #FDB0AE;
		line-height: 2rem;
		color: #F8F8F0;
}

footer {
		position: relative;
}

footer a {
		outline: none;
		outline: medium none;
		text-decoration: none;
		color: #FF497D;
}

.footer1 li {
		display: inline;
		list-style: outside none none;
		text-align: center;
		color: #FF497D;
		font-size: 12px;
}

.footer2 li {
		display: inline;
		list-style: outside none none;
		text-align: center;
		color: #FF497D;
		font-size: 12px;
}
/* ここまでフォーム */





div#form{
  background: url("../img/teller_bg.webp");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: top center;
}



.s1 , div.pp_area{
  background: #c165c6;
}
.s1 select , div.pp_area{
  color:#fff;
}
form > div > p > input , .s2 select , .s3 select {
	background: white;
	color:black;
}
.s2 , .s3{
	border-radius: 0;
}
div.pp_area{
	color:black;
	background: initial;
	height:100px;
}
.prfset_input{
  background: initial;
}
.after_form{
  width:100%;
	padding-top:7%;
	margin-bottom:1%;
}

a.registered{
	text-align: center;
	text-decoration:revert;
	display:block;
	color:revert;
	font-size: 1rem;
	margin-bottom:2rem;
}
.normal_btn{
	margin-bottom:1rem;
}

.pp_txt span.show5 {
	color: #0036d3;
	text-decoration: underline;
}

/*テスト*/
.teller .contents li{
	padding:20px;
}