@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:wght@100..900&display=swap');



/* ==============================================
setting
============================================== */

html {
font-size: calc(100vw * 1 / 375);
line-height: calc(100vw * 1 / 375);
}
@media screen and (min-width:750px) {
html {
font-size: 1.6px;
line-height: 1.6px;
}
}
* {
font-family:"Roboto","Noto Sans JP","sans-serif";
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 500;
color:#fff;
margin:0;
padding:0;
box-sizing: border-box;
}
img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
ul {
list-style:none;
}
ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
a{
text-decoration: none;
}
@media screen and (min-width:750px) {
a{
transition: 0.2s ease-out;
}
a:hover{
opacity: 0.64;
}
}



.pc{
display:none;
}
@media screen and (min-width:750px) {
.pc{
display:block;
}
.sp{
display:none;
}
}
.none{
display: none;
}



/* ==============================================
body
============================================== */

body{
background: url("../images/lt_cmn_bg.png");
background-size: 375rem auto;
}
@media screen and (min-width:750px) {
body{
background: #000;
}
body::after{
content: "";
display: block;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 320px;
background: linear-gradient(0deg, rgba(0,0,0,1.0) 0%, rgba(0,0,0,0.0) 100%);
z-index: -1;
}
}



/* ==============================================
header
============================================== */

header{
}
header p:nth-child(1){
position: absolute;
top: 7rem;
left: 8rem;
}
@media screen and (min-width:750px) {
header p:nth-child(1){
position: fixed;
top: 12rem;
left: 12rem;
filter: drop-shadow(0 0 4px rgba(0,0,0,1.0));
z-index: 10;
}
}
header p:nth-child(1) a{
}
header p:nth-child(1) a img{
max-width: 44rem;
}
header p:nth-child(2){
position: absolute;
top: 7rem;
right: 8rem;
}
@media screen and (min-width:750px) {
header p:nth-child(2){
position: fixed;
top: 12rem;
right: 12rem;
filter: drop-shadow(0 0 4px rgba(0,0,0,1.0));
z-index: 10;
}
}
header p:nth-child(2) img{
max-width: 225rem;
}



/* ==============================================
#hero
============================================== */

#hero{
padding: 32rem 8rem 0 8rem;
}
@media screen and (max-width:750px) {
#hero{
height: inherit!important;
}
}
@media screen and (min-width:750px) {
#hero{
padding: 0;
}
}
#hero .inner{
}
#hero .inner h1{
}
#hero .inner h1 img{
filter: drop-shadow(0 8rem 2rem rgba(80,0,0,0.32));
}
@media screen and (min-width:750px) {
#hero .inner h1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
#hero .inner h1 img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
}



/* ==============================================
main
============================================== */

main{
overflow: hidden;
margin: -258rem 0 0 0;
}
@media screen and (min-width:750px) {
main{
max-width: 600px;
margin: -240px auto 0 auto;
}
}



/* ==============================================
#introduction
============================================== */

#introduction{
position: relative;
z-index: 1;
}
@media screen and (min-width:750px) {
#introduction{
background: linear-gradient(0deg, rgba(0,0,0,1.0) 0%, rgba(0,0,0,0.0) 100%);
}
}
#introduction .inner{
}
#introduction .inner figure{
text-align: center;
}
#introduction .inner figure img{
max-width: 359rem;
}
@media screen and (min-width:750px) {
#introduction .inner figure img{
filter: drop-shadow(0 8rem 2rem rgba(60,40,0,0.32));
}
}
#introduction .inner p:nth-child(2){
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 500;
color: #FFF;
text-align: center;
margin: 14rem 0 0 0;
}
@media screen and (min-width:750px) {
#introduction .inner p:nth-child(2){
padding: 2rem 0 0 0;
filter: drop-shadow(0 2px 4px rgba(0,0,0,1.0));
}
}
#introduction .inner p:nth-child(2) strong{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 700;
color: #222;
display: inline-block;
position: relative;
z-index: 1;
margin: 0 2rem 0 0;
}
#introduction .inner p:nth-child(2) strong::before{
content: "";
position: absolute;
top: 2rem;
left: -1rem;
width: calc(100% + 2rem);
height: 16rem;
background: linear-gradient(90deg, #f3c91d 0%, #ad7620 16%, #eec21a 30%, #f8f7cd 44%, #f3c91d 58%, #f8f7cd 72%, #eec21a 86%, #ad7620 100%);
z-index: -1;
}
#introduction .inner p:nth-child(3){
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 500;
color: #FFF;
text-align: center;
margin: 40rem 0 0 0;
padding: 0 0 44rem 0;
}
@media screen and (min-width:750px) {
#introduction .inner p:nth-child(3){
background: url("../images/lt_int_bg.png") top no-repeat;
background-size: 600px auto;
margin: 24px 0 0 0;
padding: 64px 0 96px 0;
}
}
#introduction .inner p:nth-child(3) strong{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0;
font-weight: 700;
color: #fff000;
}



/* ==============================================
#present-01
============================================== */

#present-01{
position: relative;
display: inline-block;
background: #000;
z-index: 1;
}
#present-01 .inner{
}
#present-01 .inner h2{
margin: -32rem 0 0 0;
}
#present-01 .inner h2 img{
}
#present-01 .inner h2 + h3{
text-align: center;
margin: -48rem 0 0 0;
}
#present-01 .inner h2 + h3 img{
max-width: 160rem;
}



#present-01 .inner .present{
height: 1761rem;
background: url("../images/lt_prs1_bg.jpg") no-repeat;
background-size: 375rem 1761rem;
margin: 16rem 0 0 0;
}
#present-01 .inner .present .list{
}
#present-01 .inner .present .list ul{
}
#present-01 .inner .present .list ul li{
position: relative;
margin: 48rem 0 0 0;
}
#present-01 .inner .present .list ul li:nth-child(1){
margin: 0;
padding: 18rem 0 0 0;
}
#present-01 .inner .present .list ul li::before{
content: "";
display: block;
background: url("../images/lt_prs1_lst_icn-plus.png");
background-size: 31rem 31rem;
width: 31rem;
height: 31rem;
position: absolute;
top: -31rem;
left: 0;
right: 0;
margin: auto;
}
#present-01 .inner .present .list ul li:nth-child(1)::before{
display: none;
}
#present-01 .inner .present .list ul li img{
filter: drop-shadow(0 8rem 2rem rgba(60,40,0,0.32));
}



#present-01 .inner .present .quiz{
}
#present-01 .inner .present .quiz h3{
text-align: center;
margin: 32rem 0 0 0;
}
#present-01 .inner .present .quiz h3 img{
max-width: 70rem;
}
#present-01 .inner .present .quiz div{
position: relative;
background: url("../images/lt_prs1_qz_bg.png");
background-size: 343rem 250rem;
width: 343rem;
height: 250rem;
margin: 32rem auto 0 auto;
}
#present-01 .inner .present .quiz div + div{
margin: -16rem auto 0 auto;
}
#present-01 .inner .present .quiz div h4{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0;
font-weight: 900;
color: #222;
text-align: center;
padding: 18rem 0 0 0;
}
#present-01 .inner .present .quiz div h4 img{
position: absolute;
top: -8rem;
left: -8rem;
max-width: 48rem;
}
#present-01 .inner .present .quiz div ul{
margin: 14rem 20rem 0 20rem;
}
#present-01 .inner .present .quiz div ul li{
font-size: 14rem;
line-height: 22rem;
letter-spacing: 0;
font-weight: 500;
color: #FFF;
position: relative;
background: #222222;
height: 32rem;
margin: 8rem 0 0 0;
padding: 5rem 0 0 40rem;
}
#present-01 .inner .present .quiz div ul li span{
font-size: 21rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #FFF;
text-align: center;
display: block;
position: absolute;
top: 0;
left: 0;
width: 32rem;
height: 32rem;
background: #dc2800;
padding: 4rem 0 0 1rem;
}



#present-01 .inner .present .link{
position: relative;
text-align: center;
margin: -22rem 0 0 0;
display: block;
z-index: 1;
}
#present-01 .inner .present .link a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #FFF;
background: url("../images/lt_cmn_dln.png") bottom repeat-x;
background-size: 2rem 1rem;
filter: drop-shadow(0 1rem 2rem rgba(0,0,0,1.0));
}
#present-01 .inner .present .button{
text-align: center;
margin: 10rem 0 0 0;
}
#present-01 .inner .present .button a{
}
#present-01 .inner .present .button a img{
max-width: 247rem;
}



/* ==============================================
#present-02
============================================== */

#present-02{
background: #000;
}
#present-02 .inner{
}
#present-02 .inner h2{
}
#present-02 .inner h2 img{
}



#present-02 .inner #step{
overflow: hidden;
height: 0;
margin: -32rem 0 0 0;
animation-name: step;
animation-fill-mode: both;
}
@keyframes step {
0% {
height: 0;
}
100% {
height: 410rem;
}
}
#present-02 .inner #step h3{
text-align: center;
}
#present-02 .inner #step h3 img{
max-width: 130rem;
}
#present-02 .inner #step figure{
margin: 28rem 0 0 0;
}
#present-02 .inner #step figure img{
}
#present-02 .inner #step p{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 1.6rem;
font-weight: 700;
color: #fff000;
text-align: center;
margin: 16rem 0 0 0;
}
#present-02 .inner #step .button{
text-align: center;
margin: 28rem 0 0 0;
}
#present-02 .inner #step .button a{
}
#present-02 .inner #step .button a img{
max-width: 311rem;
}
#present-02 .inner #step .link{
text-align: center;
margin: -20rem 0 0 0;
}
#present-02 .inner #step .link a{
font-size: 15rem;
line-height: 19rem;
letter-spacing: 0.4rem;
font-weight: 500;
color: #FFF;
background: url("../images/lt_cmn_dln.png") bottom repeat-x;
background-size: 2rem 1rem;
}



#present-02 .inner .present{
}
#present-02 .inner .present h3{
text-align: center;
margin: -16rem 0 0 0;
}
#present-02 .inner .present h3 img{
max-width: 165rem;
}
#present-02 .inner .present .list{
background: url("../images/lt_prs2_bg.jpg");
background-size: 375rem 598rem;
width: 375rem;
height: 598rem;
margin: 16rem 0 0 0;
}
#present-02 .inner .present .list ul{
}
#present-02 .inner .present .list ul li{
margin: 8rem 0 0 0;
}
#present-02 .inner .present .list ul li:first-child{
margin: 0;
padding: 10rem 0 0 0;
}
#present-02 .inner .present .list ul li img{
filter: drop-shadow(0 8rem 2rem rgba(60,40,0,0.32));
}



#present-02 .inner .present + .button{
text-align: center;
margin: -32rem 0 0 0;
}
#present-02 .inner .present + .button a{
font-size: 19rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #FFF;
display: inline-block;
width: 240rem;
height: 44rem;
border-radius: 22rem;
background: #00b43c;
padding: 11rem 0 0 0;
}
#present-02 .inner .present + .button a img{
max-width: 10rem;
display: inline-block;
vertical-align: middle;
margin: -4rem 0 0 4rem;
}



/* ==============================================
#outline
============================================== */

#outline{
background: #000;
}
#outline .inner{
}
#outline .inner h2{
text-align: center;
padding: 64rem 0 0 0;
}
#outline .inner h2 img{
max-width: 165rem;
}
#outline .inner h3{
font-size: 17rem;
line-height: 25rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #FFF;
text-align: center;
margin: 32rem 0 0 0;
}
#outline .inner table{
margin: 24rem 0 0 0;
border-collapse:collapse;
border-spacing:0;
}
#outline .inner table th{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.8rem;
font-weight: 700;
color: #FFF;
display: block;
text-align: left;
background: rgba(255,255,255,0.16);
padding: 12rem 16rem 12rem 16rem;
}
#outline .inner table td{
display: block;
padding: 16rem 16rem 16rem 16rem;
}
#outline .inner table td h4{
font-size: 15rem;
line-height: 23rem;
letter-spacing: 0.4rem;
font-weight: 700;
color: #FFF;
margin: 16rem 0 0 0;
}
#outline .inner table td h4:first-child{
margin: 0;
}
#outline .inner table td p{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #FFF;
margin: 8rem 0 0 0;
}
#outline .inner table td p:first-child{
margin: 0;
}
#outline .inner table td ul{
margin: 8rem 0 0 0;
}
#outline .inner table td ul li{
font-size: 13rem;
line-height: 21rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #FFF;
text-indent: -13rem;
margin: 0 0 0 13rem;
}
#outline .inner table td .center{
text-align: center;
}



/* ==============================================
footer
============================================== */

footer{
background: #000;
padding: 0 0 64rem 0;
}
@media screen and (min-width:750px) {
footer{
max-width: 600px;
margin: auto;
}
}
footer p{
font-size: 10rem;
line-height: 14rem;
letter-spacing: 0.4rem;
font-weight: 400;
color: #FFF;
text-align: center;
padding: 40rem 0 0 0;
}



/* ==============================================
animation
============================================== */

.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.hinge {
animation-duration: 2s;
}



.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}



.fadeInUp {
animation-name: fadeInUp;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20rem);
}

100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInDown {
animation-name: fadeInDown;
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20rem);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



.fadeInLeft {
animation-name: fadeInLeft;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20rem);
}
100% {
opacity: 1;
transform: translateX(0);
}
}



.fadeInRight {
animation-name: fadeInRight;
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20rem);
}

100% {
opacity: 1;
transform: translateX(0);
}
}



.pon {
animation-name: pon;
}
@keyframes pon {
0% {
opacity: 0;
transform: scale(.5);
}
50% {
opacity: 1;
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}



.zoomIn {
animation-name: zoomIn;
}
@keyframes zoomIn {
0% {
opacity: 0;
transform: scale(0.96,0.96);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}



.zoomOut {
animation-name: zoomOut;
}
@keyframes zoomOut {
0% {
opacity: 0;
transform: scale(1.04,1.04);
}
100% {
opacity: 1;
transform: scale(1.0,1.0);
}
}