@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
@import url("ress.css");
@import url("kiso.css");

body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
}
br.smp {display: block;}
br.smpc {display: none;}

.wrap {
	width: 100%;
}

/* header */
.header {
	background-color: #5ba8da;
	padding: 40px;
}

/* KV */
.kv {
 width: 100%;
 aspect-ratio: 2800 / 1400;
 background: url("../img/kv-bg-pc.png") no-repeat center/cover;
	padding: 2%;
}
.logo {
	width: 10vw;
}
.logo img {
 width: 100%;
}
picture.maintitle {
	display: block;
	text-align: center;
	margin-top: 10%;
}
.maintitle img {
	max-width: 68%; height:auto;
}

/* 映画タイアップとは */
.about {
 position: relative;
 background-color: #f4f4f4;
 isolation: isolate;
 padding: 0 50px 40px;
}
.about-intro {
	position: relative;
 max-width: 920px;
 border: 4px solid #d7d7d7;
 padding: 110px 80px 14px;
 background-color: #fff;
 border-radius: 200px;
 margin: 160px auto 0;
 text-align: center;
 transform: translateY(-150px);
 z-index: 2;
}
.wave-bottom-1 { position: relative; }
.wave-bottom-1::before{
 content:"";
 position:absolute;
 left:0; right:0; top:-19px;
 height:19px;
 background: url("../img/wave-1.png") repeat-x left bottom;
 background-size: auto 10px;
 z-index: 1;
 pointer-events: none;
}
.aboutttl {
	position: relative;
 width: 265px;
 margin: 0 auto;
	margin-top: -68px;
	padding-bottom: 20px;
	z-index: 2;
}
.aboutttl img {
 width: 100%;
}
.aboutimg {
 max-width: 600px;
 margin: 0 auto;
 padding: 20px 0 10px;
}
.aboutimg img {
 width: 100%;
}

/* 6つのパネル */
.about-wrap {
	max-width: 1200px;
	margin: -100px auto 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 50px 30px;
}
.panel {
	flex: 1 1 calc(33.333% - 20px);
 min-width: 300px; 
	padding: 40px 24px;
	text-align: center;
	border-radius: 0 100px 0 100px;
}
.yellow { background-color: #ffd564; }
.pink { background-color: #ff93c2; }
.green { background-color: #68e3bc; }
.blue { background-color: #64b8ed; }
.orange { background-color: #ff897d; }
.purple { background-color: #d199f4; }

.panel-ttl {
	padding-bottom: 20px;
}
.panel-txt {
	padding-bottom: 20px;
}
.panel-img {
	width: 100%;
	margin: 0 auto;
}
.panel-img img {
	width: 100%;
}
.about-cap {
	text-align: center;
	padding-top: 40px;
}

/* サポート */
.support {
 width: 100%;
 aspect-ratio: 2521 / 1235;
 background: url("../img/support-bg.png") no-repeat center/cover;
	padding-bottom: 6%;
}
picture.support-img {
	display: block;
	text-align: center;
	margin-top: 6%;
}
.support-img img {
	max-width: 68%; height:auto;
}
.btn-1 {
 max-width: 427px;
 margin: 0 auto;
 padding: 20px 0 10px;
}
.btn-1 img {
 width: 100%;
}
.btn-1 a {
  transition: opacity 0.3s ease;
}
.btn-1 a:hover {
  opacity: 0.8;
}

/* お問い合わせ */
.contact {
 background-color: #5ba8da;
 background-image: url("../img/contact-bg.png");
 background-repeat: repeat-x;
 background-position: bottom center;
 background-size: auto 300px;    
 padding-bottom: 200px; 
}
.wave-bottom-2 { position: relative; }
.wave-bottom-2::before{
 content:"";
 position:absolute;
 left:0; right:0; top:-19px;
 height:19px;
 background: url("../img/wave-2.png") repeat-x left bottom;
 background-size: auto 10px;
 z-index: 1;
 pointer-events: none;
}
.contact-ttl {
	width: 265px;
	margin: 0 auto;
	padding: 80px 0 30px;
}
.contact-ttl img,.footerlogo img {
	width: 100%;
}
.contact-txt,.footer-txt {
	text-align: center;
}
.contact-cap {
	text-align: center;
	padding-bottom: 50px;
}
.tel {
	width: 600px;
	text-align: center;
	background-color: #fff;
	margin: 0 auto;
	padding: 30px 0 30px;
	border-radius: 30px;
}

/* お問い合わせフォーム */
.contact-form {
	width: 600px;
	max-width: 100%;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.14);
	margin: 0 auto;
	border-radius: 30px;
	padding-block: 50px 70px;
	padding-inline: 76px;
	margin-block: 30px;
}

.contact-input {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	text-align: left;
	white-space: pre-line;
	margin-bottom: 65px;
}

.contact-form dt,
.contact-form dd {
	font-size: 18px;
	font-weight: 500;
}

.contact-input dt .required {
	color: #ff0000;
}

.contact-input input,
.contact-input textarea {
	width: 100%;
	background-color: #fff;
	border-radius: 10px;
	padding: 11px;
}

.contact-check {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	column-gap: 10px;
}

.contact-check dt {
	font-size: 16px;
}

.contact-check dt a {
	text-decoration: underline;
	transition: opacity 0.3s ease;
}

.contact-check dt a:hover {
	opacity: 0.6;
}

.contact-input input::placeholder,
.contact-input textarea::placeholder {
	color: #dcdcdc;
	font-weight: 500;
}

.contact-form-btn {
	display: flex;
	justify-content: center;
	column-gap: 20px;
	margin-top: 40px;
}

.contact-form-btn .btn-comfirm {
	position: relative;
	background-image: url(../img/btn-2.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 274px;
	height: 0;
	padding-top: 63px;
	transition: opacity 0.3s ease;
}

.contact-form-btn .btn-submit {
	position: relative;
	background-image: url(../img/btn-3.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 274px;
	height: 0;
	padding-top: 63px;
	transition: opacity 0.3s ease;
}

.contact-form-btn .btn-back {
	position: relative;
	background-image: url(../img/btn-4.png);
	background-repeat: no-repeat;
	background-size: contain;
	width: 118.5px;
	height: 0;
	padding-top: 63px;
	transition: opacity 0.3s ease;
}

.contact-form-btn .btn:hover {
	opacity: 0.8;
}

/* FOOTER */
.footerlogo {
	width: 232px;
	margin: 0 auto;
	padding: 60px 0 10px;
}
footer {
	text-align: center;
	padding-bottom: 60px;
}
.wave-bottom-3 { position: relative; }
.wave-bottom-3::before{
 content:"";
 position:absolute;
 left:0; right:0; top:-19px;
 height:19px;
 background: url("../img/wave-3.png") repeat-x left bottom;
 background-size: auto 10px;
 z-index: 1;
 pointer-events: none;
}

/* TEXT */
.about-intro {
	font-size: 18px;
 line-height: 1.6em;
 padding: 40px;
}
.about-intro-bold {
	font-size: 22px;
	font-weight: bold;
	color: #eb3484;
}
.panel-txt {
	font-size: clamp(12px, 8vw, 16px);
 line-height: 1.4em;
}
.about-cap {
	font-size: 16px;
 line-height: 1.8em;
}
.contact-txt {
	font-size: 22px;
	font-weight: bold;
 line-height: 2.4em;
 color: #fff;
}
.contact-cap {
	font-size: 16px;
 line-height: 1.6em;
 color: #fff;
}
.red {
	color: #ff0000;
}
.tel-ttl {
	font-size: 30px;
	font-weight: bold;
 line-height: 1.6em;
 padding-bottom: 4px;
}
.tel-txt {
	font-size: 16px;
 line-height: 1.6em;
 padding-bottom: 6px;
}
.tel-num {
	font-size: 36px;
	font-weight: bold;
 line-height: 1.6em;
 color: #00b3e0;
}
.footer-txt {
	font-size: 14px;
 line-height: 1.6em;
 color: #666;
}

/* SP Style */
@media screen and (max-width: 750px) {
	
	br.smp {display: none;}
 br.smpc {display: block;}
	
	/* KV */
	.kv {
		width: 100%;
		aspect-ratio: 750 / 1024;
		background: url("../img/kv-bg-sp.png") no-repeat center/cover;
		padding: 3% 5%;
	}
	.logo {
		width: 26vw;
	}
	picture.maintitle {
		display: block;
		text-align: center;
		margin-top: 20%;
	}
	.maintitle img {
		max-width: 98%; height:auto;
	}
	
	/* 映画タイアップとは */
 .about {
  padding: 0 2% 5%;
 }
 .about-intro {
  max-width: 90%;
  border: 2px solid #d7d7d7;
  padding: 4% 3% 6%;
  border-radius: 50px;
  margin: 40% auto 0;
  transform: translateY(-150px);
 }
 .wave-bottom-1 { position: relative; }
 .wave-bottom-1::before{
  background-size: auto 8px;
 }
 .aboutttl {
  width: 60%;
	 margin-top: -10%;
	 padding-bottom: 5%;
 }
 .aboutimg {
  max-width: 90%;
  padding: 4% 0 2%;
 }
	
	/* 6つのパネル */
	.about-wrap {
	 max-width: 96%;
	 margin: -35% auto 0;
  gap: 20px 2%;
 }
 .panel {
	 border-radius: 0 20px 0 20px;
  flex: 1 1 calc(50% - 15px);
 	padding: 5% 3%;
  min-width: auto;
 }
 .panel-ttl {
	 padding-bottom: 5%;
 }
 .panel-txt {
	 padding-bottom: 5%;
 }
 .panel-img {
	 width: 100%;
	 margin: 0 auto;
 }
 .panel-img img {
	 width: 100%;
 }
 .about-cap {
	 text-align: center;
	 padding-top: 5%;
 }
	
	/* サポート */
 picture.support-img {
	 margin-top: 10%;
 }
 .support-img img {
	 max-width: 90%; height:auto;
 }
 .btn-1 {
  max-width: 70%;
  padding: 5% 0;
 }
	
	/* お問い合わせ */
	.contact {
  background-size: auto 8.25%;    
  padding-bottom: 40%; 
 }
 .contact-ttl {
	 width: 44%;
	 margin: 0 auto;
	 padding: 14% 0 5%;
 }
 .contact-cap {
	 padding-bottom: 6%;
 }
	.tel {
	 width: 100%;
	 padding: 6%;
	 border-radius: 10px;
 }
 .wave-bottom-2::before{
  background-size: auto 8px;
 }

 /* お問い合わせフォーム */
 .contact-form {
	padding-inline: 27px;
 }

 .contact-form dt,
 .contact-form dd {
	font-size: 14px;
 }

 .contact-check dt {
	font-size: 12px;
 }

 .contact-input {
	margin-bottom: 45px;
 }

 .contact-form-btn .btn-comfirm {
	width: 207px;
	padding-top: 54px;

 }
	
 /* FOOTER */
 .footerlogo {
	 width: 40%;
	 margin: 0 auto;
	 padding: 10% 0 3%;
 }
 footer {
	 padding-bottom: 6%;
 }
 .wave-bottom-3::before{
  background-size: auto 8px;
 }
 
 /* TEXT */
 .about-intro {
	 font-size: 0.7rem;
  line-height: 1.1rem;
 }
 .about-intro-bold {
	 font-size: 1rem;
	 line-height: 1.6rem;
 }
 .panel-txt {
	 font-size: 0.6rem;
  line-height: 1.4em;
 }
 .contact-txt {
	 font-size: 0.9rem;
	 line-height: 1.2rem;
  padding-bottom: 1rem;
 }
 .about-cap {
	 font-size: 0.7rem;
	 line-height: 1.2rem;
 }
 .contact-cap {
	 font-size: 0.7rem;
	 line-height: 1.2rem;
  color: #fff;
 }
 .tel-ttl {
	 font-size: 1rem;
  padding-bottom: 0.2rem;
 }
 .tel-txt {
	 font-size: 0.7rem;
  padding-bottom: 0.2rem;
 }
 .tel-num {
	 font-size: 1.6rem;
  color: #00b3e0;
 }
 .footer-txt {
	 font-size: 0.6rem;
  line-height: 1rem;
  color: #666;
 }
}

.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/* サンクスページ */
.btn-5 {
	max-width: 275px;
	margin: 0 auto;
	padding: 20px 0 10px;
	margin-block: 120px;
}

.btn-5 img {
	width: 100%;
}
.btn-5 a {
	 transition: opacity 0.3s ease;
}
.btn-5 a:hover {
	 opacity: 0.8;
}

@media screen and (max-width: 750px) {
	.btn-5 {
		margin-top: 50px;
	}
}