@charset "UTF-8";

#contentsend{ margin-top: 0;}
@media screen and (min-width: 768px),print {

#contentsmain {margin: 0 auto 7.6rem 5rem;position: relative;padding: 12rem 5vw 0rem;}
#contentsmain .inner-Box {margin: 0 auto;position: relative;max-width: 120rem;}
#contentsmain .inner-Box ul {display: flex;flex-wrap: wrap;gap: 1.3333%;padding-top: 2rem;margin-bottom: 3.6rem;}
#contentsmain .inner-Box ul li {width: 18.9167%;position: relative;background: #fff;padding: 2rem 2rem 2.9rem;}

#contentsmain .inner-Box span.f-en{position: absolute;top: -1.9rem;left: 1rem;width: 4rem;height: 4.5rem;display: block;background: url(../images/tokuten/contentsmain-icon01.svg) no-repeat  top center;background-size: 100% auto;font-size: 1.7rem;line-height: 1.59;letter-spacing: 0.05em;font-weight: 500;text-align: center;color: #fff;padding-top: 0.6rem;}
#contentsmain .inner-Box figure.img {position: relative;top: 0;left: 0;text-align: center;margin-bottom: 1.6rem;}
#contentsmain .inner-Box figure.img img{max-width: 100%;}
#contentsmain .inner-Box h2 {margin-bottom: 0.6rem;position: relative;text-align: center;color: var(--main-blue);font-size: 1.8rem;line-height: 1.5;letter-spacing: 0.05em;font-weight: 700;text-align: center;}
#contentsmain .inner-Box p.ltext {position: relative;font-size: 1.4rem;line-height: 1.7;letter-spacing: 0.05em;font-weight: 400;text-align: left;}
#contentsmain .inner-Box p.text {margin-bottom: 30px;position: relative;font-size: 1.2rem;line-height: 2;letter-spacing: 0.05em;font-weight: 400;text-align: center;}

#contents01 {margin: 0 auto 16rem 5rem;position: relative;padding: 0 5vw 0rem;}
#contents01 .inner-Box {margin: 0 auto;position: relative;max-width: 100rem;background: url(../images/tokuten/contents01-icon01.svg) no-repeat  top right,url(../images/tokuten/contents01-icon02.svg) no-repeat  bottom left #E2E5EA;border: 1px solid #333FA1;text-align: center;padding: 3.8rem 0 4.5rem;}
#contents01 .inner-Box h2 {margin-bottom: 1.1rem;position: relative;color: var(--main-blue);font-size: 2.8rem;line-height: 1.5;letter-spacing: 0.05em;font-weight: 700;text-align: center;padding-right: 4.7rem;}
#contents01 .inner-Box p.text {position: relative;font-size: 1.6rem;line-height: 2.0;letter-spacing: 0.05em;font-weight: 400;text-align: center;margin-bottom: 1.2rem;z-index: 3;}
#contents01 .inner-Box p.text2 {position: relative;font-size: 1.2rem;line-height: 1.5;letter-spacing: 0.05em;font-weight: 400;text-align: center;margin-bottom: 3.1rem;z-index: 3;}

#contents01 .inner-Box .deco{ opacity:0; }
#contents01 .inner-Box .deco--left{/* left:6rem; *//* top:-1rem; */}
#contents01 .inner-Box .deco--right{/* left:-2rem; *//* top:-1.5rem; */}
@keyframes explodeLeft { 0% { opacity: 0; transform: translate(4.0rem, 2.0rem) scale(0.3) rotate(-20deg); } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } }
@keyframes explodeRight { 0% { opacity: 0; transform: translate(-4.0rem, 2.0rem) scale(0.3) rotate(20deg); } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } }
#contents01 .inner-Box .deco img{ width: 100%; height: auto;}
#contents01 .inner-Box .deco--left{width: 13.94%;position: absolute;top: 7.8rem;left: 7rem;}
#contents01 .inner-Box .deco--right{width: 14.61%;position: absolute;right: 6.2rem;top: 13.7rem;}
#contents01 .inner-Box .gl-btn{width: 30rem;margin: 0 auto;}

#contents01 .inner-Box.is-active .deco--left{ animation: explodeLeft 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards; animation-delay:0.2s; }
#contents01 .inner-Box.is-active .deco--right{ animation: explodeRight 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards; animation-delay:0.4s; }


}
@media screen and (min-width:768px) and ( max-width:1280px) {

#contents01 .inner-Box .deco--left{left: 1rem;}
#contents01 .inner-Box .deco--right{right: 0.2rem;}

	
}
@media screen and (min-width:768px) and ( max-width:1023px) {
#contentsmain, #contents01 {margin-left: 0rem!important;}



}

@media screen and (max-width: 767px) {
#mainttl .main-title{
    padding-top: 16vw;
}
#contentsmain {margin: 0 auto 8.2667vw;position: relative;padding: 6.2vw 4vw 0vw;}
#contentsmain .inner-Box {position: relative;}
#contentsmain .inner-Box ul {display: flex;flex-wrap: wrap;gap: 1.3333%;padding-top: 5.3333vw;margin-bottom: 2.9vw;}
#contentsmain .inner-Box ul li {width: 47.53335%;position: relative;background: #fff;padding: 2.5333vw 5.3333vw 6.7333vw;margin-bottom: 3.7vw;}
#contentsmain .inner-Box ul li:nth-child(2n){margin-right: 0;right: -2.8vw;}

#contentsmain .inner-Box span.f-en{position: absolute;top: -2.6667vw;left: 2.6667vw;width: 8.1667vw;height: 12vw;display: block;background: url(../images/tokuten/contentsmain-icon01.svg) no-repeat  top center;background-size: 100% auto;font-size: 3.91vw;line-height: 1.59;letter-spacing: 0.05em;font-weight: 500;text-align: center;color: #fff;padding-top: 0.8vw;}
#contentsmain .inner-Box figure.img {position: relative;top: 0;left: 0;text-align: center;margin: 0 2.5vw 1.8667vw;}
#contentsmain .inner-Box figure.img img{max-width: 100%;}
#contentsmain .inner-Box h2 {margin-bottom: 1.6vw;position: relative;color: var(--main-blue);font-size: 3.73vw;line-height: 1.5;letter-spacing: 0.05em;font-weight: 700;text-align: center;}
#contentsmain .inner-Box p.ltext {position: relative;font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.05em;font-weight: 400;text-align: left;margin: 0 -2.6vw;}
#contentsmain .inner-Box p.text {margin-bottom: 7.25vw;position: relative;font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.05em;font-weight: 400;text-align: left;}
#contentsmain .inner-Box p.text span {display: block;margin-top: 1.7vw;}

#contents01 {position: relative;padding-bottom: 15vw;}
#contents01 .inner-Box {margin: 0 4.3vw;position: relative;max-width: 266.6667vw;background: url(../images/tokuten/contents01-icon01.svg) no-repeat  top -3.5vw right,url(../images/tokuten/contents01-icon02.svg) no-repeat  bottom -4vw left #E2E5EA;border: 0.24vw solid #333FA1;text-align: center;padding: 6.2333vw 0vw 8.2vw;background-size: 17vw auto,17vw auto;}
#contents01 .inner-Box h2 {margin-bottom: 1.3333vw;position: relative;color: var(--main-blue);font-size: 4.8vw;line-height: 1.6;letter-spacing: 0.05em;font-weight: 700;text-align: center;margin-right: 1.2vw;}
#contents01 .inner-Box p.text {position: relative;margin: 0 6vw 1.9vw;z-index: 3;font-size: 3.73vw;line-height: 1.8;letter-spacing: 0.05em;font-weight: 400;text-align: left;}
#contents01 .inner-Box p.text2 {position: relative;margin: 0 6vw 6.0667vw;z-index: 3;font-size: 3.2vw;line-height: 1.5;letter-spacing: 0.05em;font-weight: 400;text-align: left;}

#contents01 .inner-Box .deco{ opacity:0; }
#contents01 .inner-Box .deco--left{/* left:16vw; *//* top:-2.6667vw; */}
#contents01 .inner-Box .deco--right{/* left:-5.3333vw; *//* top:-4vw; */}
@keyframes explodeLeft { 0% { opacity: 0; transform: translate(10.6667vw, 5.3333vw) scale(0.3) rotate(-20deg); } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } }
@keyframes explodeRight { 0% { opacity: 0; transform: translate(-10.6667vw, 5.3333vw) scale(0.3) rotate(20deg); } 100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); } }
#contents01 .inner-Box .deco img{ width: 100%; height: auto;}
#contents01 .inner-Box .deco--left{width: 16.74%;position: absolute;top: 9.4vw;left: 3.9667vw;}
#contents01 .inner-Box .deco--right{width: 17.61%;position: absolute;right: 5.3vw;top: 5.1333vw;}
#contents01 .inner-Box .gl-btn{width: 78.8vw;margin: 0vw 6vw;}
#contents01 .inner-Box .gl-btn a{ height: 15vw; text-align: center; padding-right: 4vw; }

#contents01 .inner-Box.is-active .deco--left{ animation: explodeLeft 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards; animation-delay:0.2s; }
#contents01 .inner-Box.is-active .deco--right{ animation: explodeRight 0.8s cubic-bezier(0.175,0.885,0.32,1.275) forwards; animation-delay:0.4s; }


}