@charset "UTF-8";


.main-visual { margin: 0 -12px; background: #FFFFFF; }

@-webkit-keyframes fadein { 0% { opacity: 0; }
  100% { opacity: 1; } }

@keyframes fadein { 0% { opacity: 0; }
  100% { opacity: 1; } }

@-webkit-keyframes slidedown { 0% { height: 0; }
  100% { height: 100%; } }

@keyframes slidedown { 0% { height: 0; }
  100% { height: 100%; } }

@-webkit-keyframes leftmove { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(50%); transform: translateX(50%); } }

@keyframes leftmove { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(50%); transform: translateX(50%); } }

@-webkit-keyframes rightmove { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-120%); transform: translateX(-120%); } }

@keyframes rightmove { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-120%); transform: translateX(-120%); } }

@-webkit-keyframes rightmove2 { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-76px); transform: translateX(-76px); } }

@keyframes rightmove2 { 0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-76px); transform: translateX(-76px); } }

.main-visual-core { position: relative; padding-top: 100%; height: 0; background: url("/our-goals/mirai/image/mv_sp.png") no-repeat center/cover; opacity: 0; -webkit-animation: fadein 3s ease-out 1s forwards; animation: fadein 3s ease-out 1s forwards; }

.main-visual-core::after { content: ''; position: absolute; inset: 0; opacity: 0; -webkit-animation: fadein 1.2s ease-out 5s forwards; animation: fadein 1.2s ease-out 5s forwards; background: url("/our-goals/mirai/image/mv_bg_sp.svg") no-repeat center/cover; width: 100%; height: 100%; }

.main-visual-hdg-wrap { font-size: 0; line-height: 1; position: absolute; inset: 0; margin-top: 8%; }

.main-visual-hdg-core { line-height: 1; display: flex; position: absolute; margin: auto; flex-direction: column; align-items: center; overflow: hidden; height: 0; top: 0; right: 0; left: 0; z-index: 10; -webkit-animation: slidedown 1s ease-out 3s forwards; animation: slidedown 1s ease-out 3s forwards; }

.main-visual-hdg-core img { width: 19.4%; display: block; }

.main-visual-hdg-sub { line-height: 1; display: flex; position: absolute; margin: auto; flex-direction: column; align-items: center; top: 0; right: 0; left: 0; height: 100%; z-index: 1; opacity: 0; -webkit-animation: fadein .5s ease-out 3.5s forwards; animation: fadein .5s ease-out 3.5s forwards; }

.main-visual-hdg-sub img { width: 13.333%; display: block; -webkit-animation: rightmove 1s ease-out 3.5s forwards; animation: rightmove 1s ease-out 3.5s forwards; }

.main-visual-hdg-txt { visibility: hidden; opacity: 0; position: absolute; }

.main-content { padding-bottom: 30px; }

.main-content .wrap-content { margin-top: 30px; }

.main-content .wrap-box-top { padding: 20px 0 35px; }

.main-content .box-top .box-inner { position: relative; padding: 0 20px 56px; }

.main-content .box-top .box-hdg { position: relative; -webkit-transform: translateY(-20px); transform: translateY(-20px); }

.main-content .box-top .box-hdg .box-img { margin: 0 -12px; }

.main-content .box-top .box-ttl { position: absolute; top: -20px; left: 20px; color: #FFFFFF; font-size: 10.256vw; font-family: "秀英明朝 M", "Shuei Mincho M", 游明朝体, 'Yu Mincho', YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif; line-height: 1.2; letter-spacing: 7px; display: inline-block; background: #1432AA; -ms-writing-mode: tb-rl; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; padding: 16px 11px 10px; }

.main-content .box-top .box-ttl.ttl-wide { letter-spacing: -3px; padding: 11px 11px 19px; }

.main-content .box-top .box-lead { color: #1432AA; font-family: "秀英角ゴシック金 B JIS2004", "Shuei KakuGo Kin B JIS2004"; margin-top: -7px; }

.main-content .box-top .box-txt { margin-top: 10px; }

.main-content .box-top .box-btn { margin-top: 34px; margin-bottom: -90px; }

.main-content .box-top .box-btn.pc-btn-wide .btn-std.btn-top { font-size: 1.8rem; }

.main-content .box-top.pt01 .box-inner { background: url("/our-goals/mirai/image/bg_top_pink_sp.png") repeat-y center top; background-size: 118% auto; }

.main-content .box-top.pt02 .box-inner { background: url("/our-goals/mirai/image/bg_top_yellow_sp.png") repeat-y center top; background-size: 118% auto; }

.main-content .box-top.pt03 .box-inner { background: url("/our-goals/mirai/image/bg_top_green_sp.png") repeat-y center top; background-size: 118% auto; }

.main-content .box-top.pt04 .box-inner { background: url("/our-goals/mirai/image/bg_top_purple_sp.png") repeat-y center top; background-size: 118% auto; }

.main-content .mov-top { padding: 23px 23px 16px; box-shadow: 0px 0px 15px 0 #ABCAD0; }

.main-content .mov-top .txt-large { color: #1432AA; font-weight: bold; margin-top: 20px; }

.main-content .box-about-dnp { background: #1432AA; padding-top: 40px; padding-bottom: 40px; }

.main-content .box-about-dnp .box-inner .box-top { color: #FFFFFF; font-family: "秀英角ゴシック金 B JIS2004", "Shuei KakuGo Kin B JIS2004"; }

.main-content .box-about-dnp .box-inner .box-top .txt-hdg { text-align: center; }

.main-content .box-about-dnp .box-inner .box-top .wrap-img { margin: 4px auto 20px; width: 52%; }

.main-content .box-about-dnp .box-inner .box-dtl .wrap-content { margin-top: 0; }

.main-content .box-about-dnp .box-inner .box-dtl .wrap-content + .wrap-content { margin-top: 40px; }

.main-content .box-about-dnp .box-inner .box-dtl .txt-hdg { color: #1432AA; font-size: 2rem; font-family: "秀英角ゴシック金 B JIS2004", "Shuei KakuGo Kin B JIS2004"; text-align: center; font-weight: bold; }

.main-content .box-about-dnp .box-inner .box-dtl .txt-std { margin-top: 16px; }

.main-content .box-about-dnp .box-inner .box-dtl .wrap-img { margin-top: 20px; }

.main-content .box-about-dnp .box-inner .box-dtl .img-pt01 > * + * { margin-top: 3px; }

.main-content .box-about-dnp .box-inner .box-dtl .box-brand { margin-top: -20px; }

.main-content .box-about-dnp .box-inner .box-dtl .box-brand .brand-lead { color: #1432AA; font-size: 2rem; font-family: "秀英角ゴシック金 B JIS2004", "Shuei KakuGo Kin B JIS2004"; text-align: center; line-height: 1.5; font-weight: bold; margin: 0 -20px; }

.main-content .box-about-dnp .box-inner .box-dtl .box-brand .txt-sub { display: block; }

.main-content .accordion-top { border-top: 2px solid rgba(255, 255, 255, 0.5); }

.main-content .accordion-top .accordion-btn { position: relative; display: block; color: #FFFFFF; text-decoration: none; padding: 18px 17px 18px 46px; border-top: 3px solid #1432AA; border-bottom: 2px solid rgba(255, 255, 255, 0.5); }

.main-content .accordion-top .accordion-btn:before, .main-content .accordion-top .accordion-btn:after { content: ""; position: absolute; top: 0; bottom: 0; margin: auto; display: inline-block; background: #1432AA; z-index: 1; }

.main-content .accordion-top .accordion-btn:before { left: 14px; width: 16px; height: 4px; }

.main-content .accordion-top .accordion-btn:after { left: 20px; width: 4px; height: 16px; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; }

.main-content .accordion-top .accordion-btn span:before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; margin: auto; display: block; width: 24px; height: 24px; background: rgba(255, 255, 255, 0.5); }

.main-content .accordion-top .accordion-btn.accordionActive:after { -webkit-transform: rotate(90deg); transform: rotate(90deg); }

.main-content .accordion-top .accordion-btn-close { position: relative; display: none; color: #FFFFFF; font-size: 2.4rem; font-weight: bold; text-decoration: none; padding-left: 30px; }

.main-content .accordion-top .accordion-btn-close:before, .main-content .accordion-top .accordion-btn-close:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; display: inline-block; width: 24px; height: 4px; background: #FFFFFF; }

.main-content .accordion-top .accordion-btn-close:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.main-content .accordion-top .accordion-btn-close:after { -webkit-transform: rotate(135deg); transform: rotate(135deg); }

.main-content .accordion-top .accordion-btn-close.accordionActive { display: inline-block; }

.main-content .accordion-top .wrap-close-btn { text-align: center; margin: 20px auto -15px; }

.main-content .accordion-top .accordion-area { background: #FFFFFF; padding: 30px 20px 25px; }

@media all and (min-width: 768px) and (max-width: 1279px) { .main-visual { margin: 0 -40px; overflow: hidden; } }

@media all and (min-width: 1280px) { .main-visual { margin-right: calc(50% - 50vw); margin-left: calc(50% - 50vw); } }

@media print, all and (min-width: 768px) { .main-visual-core { padding-top: 0; height: 500px; background: url("/our-goals/mirai/image/mv_pc.png") no-repeat center/1920px auto; } .main-visual-core::after { -webkit-animation: fadein 1.2s ease-out 4.5s forwards; animation: fadein 1.2s ease-out 4.5s forwards; background: url("/our-goals/mirai/image/mv_bg_pc.svg") no-repeat center/1920px auto; } .main-visual-hdg-wrap { margin-top: 20px; } .main-visual-hdg-core { left: -84px; -webkit-animation: slidedown .5s ease-out 3s forwards; animation: slidedown .5s ease-out 3s forwards; } .main-visual-hdg-core img { width: 130px; -webkit-animation: leftmove .5s ease-out 3.5s forwards; animation: leftmove .5s ease-out 3.5s forwards; } .main-visual-hdg-sub { right: 18px; -webkit-animation: fadein .5s ease-out 3.5s forwards; animation: fadein .5s ease-out 3.5s forwards; } .main-visual-hdg-sub img { width: 88px; -webkit-animation: rightmove2 .5s ease-out 4s forwards; animation: rightmove2 .5s ease-out 4s forwards; } .main-content { padding-bottom: 60px; }
  .main-content .wrap-content { margin-top: 60px; } .main-content .box-top .box-inner { display: flex; padding: 0 40px 0 0; }
  .main-content .box-top .box-hdg { width: 580px; margin-top: 0px; }
  .main-content .box-top .box-hdg .box-ttl { left: 40px; }
  .main-content .box-top .box-hdg .box-img { margin: 0 0 -40px 0; }
  .main-content .box-top .box-dtl { width: calc(100% - 600px); margin: 72px 0 0 20px; }
  .main-content .box-top .box-ttl { font-size: 6rem; padding: 36px 14px 30px; }
  .main-content .box-top .box-ttl.ttl-wide { letter-spacing: -2px; padding: 20px 11px 40px; }
  .main-content .box-top .box-lead { margin-top: 0; margin-bottom: 23px; }
  .main-content .box-top .box-btn { width: 600px; margin: 50px 0 0 auto; -webkit-transform: translateX(20px); transform: translateX(20px); }
  .main-content .box-top .box-btn > * { display: block; }
  .main-content .box-top .box-btn.pc-btn-wide { width: 620px; margin: 50px 0 0 auto; -webkit-transform: translateX(0); transform: translateX(0); }
  .main-content .box-top .box-btn.pc-btn-wide .btn-std.btn-top { font-size: 2.6rem; }
  .main-content .box-top.pt01 .box-inner { background: url("/our-goals/mirai/image/bg_top_pink_pc.png") repeat-y center top; background-size: 100% auto; }
  .main-content .box-top.pt02 .box-inner { background: url("/our-goals/mirai/image/bg_top_yellow_pc.png") repeat-y center top; background-size: 100% auto; }
  .main-content .box-top.pt03 .box-inner { background: url("/our-goals/mirai/image/bg_top_green_pc.png") repeat-y center top; background-size: 100% auto; }
  .main-content .box-top.pt04 .box-inner { background: url("/our-goals/mirai/image/bg_top_purple_pc.png") repeat-y center top; background-size: 100% auto; } .main-content .mov-top { width: 920px; padding: 60px 60px 50px; margin: auto; } .main-content .box-about-dnp { padding-top: 110px; padding-bottom: 108px; max-width: initial; }
  .main-content .box-about-dnp .box-inner { width: 995px; margin: auto; }
  .main-content .box-about-dnp .box-inner .box-top { position: relative; width: 620px; margin-bottom: 55px; }
  .main-content .box-about-dnp .box-inner .box-top .txt-hdg { text-align: left; }
  .main-content .box-about-dnp .box-inner .box-top .txt-medium { margin-top: 24px; }
  .main-content .box-about-dnp .box-inner .box-top .wrap-img { position: absolute; top: -20px; right: -375px; width: 300px; z-index: 1; margin: 0; max-width: none; }
  .main-content .box-about-dnp .box-inner .box-dtl .wrap-content + .wrap-content { margin-top: 60px; }
  .main-content .box-about-dnp .box-inner .box-dtl .txt-hdg { font-size: 2.8rem; }
  .main-content .box-about-dnp .box-inner .box-dtl .txt-std { margin-top: 20px; }
  .main-content .box-about-dnp .box-inner .box-dtl .img-cap { width: 536px; margin: auto; }
  .main-content .box-about-dnp .box-inner .box-dtl .box-brand .brand-lead { font-size: 4rem; margin: 0; } .main-content .accordion-top .accordion-btn-close { font-size: 2.4rem; padding-left: 30px; }
  .main-content .accordion-top .accordion-btn-close:before, .main-content .accordion-top .accordion-btn-close:after { width: 24px; height: 4px; }
  .main-content .accordion-top .wrap-close-btn { margin: 35px auto -60px; }
  .main-content .accordion-top .accordion-area { padding: 55px 45px 60px; } }