@charset "utf-8";

/* -------------------------------------------------- */
/* #block-mv */
/* -------------------------------------------------- */
#block-mv{margin-bottom:80px;}
#block-mv .common-wrap.right{padding-bottom:80px;}
#block-mv .common-wrap.right::before{background:#f3f3f3;}
#block-mv .inner{padding:40px 80px;display:flex;gap:40px;flex-direction:row-reverse;align-items:center;justify-content:space-between;max-width:1340px;margin:auto;}
#block-mv .img{opacity:0;transform:scale(0.6);}
#block-mv .scroll{position:absolute;top:0;right:0;width:82px;height:100%;border-left:2px solid #000;display:flex;align-items:flex-end;justify-content:center;padding-bottom:155px;}
#block-mv .scroll span{writing-mode:vertical-rl;font-size:1.6rem;letter-spacing:0.1em;}
#block-mv .scroll span::after{content:"";display:block;width:2px;height:120px;background:#000;position:absolute;bottom:0;left:50%;margin-left:-1px;}
#block-mv .copyright{position:absolute;top:0;left:0;width:82px;height:100%;display:flex;align-items:center;justify-content:center;}
#block-mv .copyright span{font-size:1.2rem;letter-spacing:0.05em;white-space:nowrap;transform:rotate(90deg);}

#block-mv .ttl{width:420px;}
#block-mv .ttl .txt01{display:block;margin-bottom:12px;transform:translateX(-40px);opacity:0;}
#block-mv .ttl .txt01 > span{padding:0 15px;font-size:5.2rem;line-height:1.4;display:block;width:fit-content;background:var(--color);border:2px solid #000;border-bottom:0;position:relative;z-index:2;}
#block-mv .ttl .txt01 > span + span{margin-top:-2px;z-index:1;border-bottom:2px solid #000;}
#block-mv .ttl .txt02{display:block;opacity:0;transform:translateX(-40px);}
#block-mv .ttl .txt02 > span{font-size:8rem;font-weight:500;line-height:1.4;border-bottom:3px solid #000;}
#block-mv .img{flex:1;text-align:right;}
#block-mv .box{max-width:calc(100% - 240px);margin:-80px 80px 0 160px;padding:70px;font-size:1.8rem;text-align:center;line-height:2.4;background:#fff;border:2px solid #000;position:relative;z-index:1;opacity:0;transform:scale(0.8);}
#block-mv.animated .img{transform:none;opacity:1;transition:.6s cubic-bezier(0.6,-0.5,0.2,1.5) .2s;}
#block-mv.animated .txt01{transform:none;opacity:1;transition:.5s ease .6s;}
#block-mv.animated .txt02{transform:none;opacity:1;transition:.5s ease .8s;}
#block-mv .box.animated{transform:none;opacity:1;transition:.5s cubic-bezier(0.6,-0.5,0.2,1.5);}

@media screen and (min-width:1px) and (max-width:1339px){
  #block-mv .inner{padding-top:80px;padding-bottom:80px;}
  #block-mv .ttl{width:45%;}
  #block-mv .ttl .txt01 > span{font-size:3.8vw;white-space:nowrap;}
  #block-mv .ttl .txt02 > span{font-size:6vw;white-space:nowrap;}
}
@media screen and (min-width:1px) and (max-width:999px){
  #block-mv .inner{display:block;padding-top:40px;padding-bottom:60px;}
  #block-mv .img{max-width:450px;margin:auto;}
  #block-mv .ttl{width:100%;text-align:center;margin-top:30px;}
  #block-mv .ttl .txt01 > span{margin:auto;}  
}
@media screen and (min-width:1px) and (max-width:767px){
  #block-mv{margin-bottom:30px;overflow:hidden;}
  #block-mv .common-wrap.right{padding-bottom:40px;}
  #block-mv .inner{padding:40px 50px 40px 30px;}
  #block-mv .img{width:98%;}
  #block-mv .ttl{margin-top:20px;}
  #block-mv .ttl .txt01{margin-bottom:8px;}
  #block-mv .ttl .txt01 > span{font-size:clamp(10px,6vw,3.2rem);}
  #block-mv .ttl .txt02 > span{font-size:clamp(10px,10vw,6rem);}
  #block-mv .scroll{width:20px;padding-bottom:110px;}
  #block-mv .scroll span{font-size:1rem;}
  #block-mv .scroll span::after{height:100px;}
  #block-mv .copyright{width:20px;}
  #block-mv .copyright span{font-size:1rem;}
  #block-mv .box{max-width:calc(100% - 58px);margin:-40px 18px 0 40px;padding:25px 15px calc(25px + 10vw);font-size:clamp(10px,3.8vw,1.6rem);line-height:2;}
}

/* -------------------------------------------------- */
/* #block-contents */
/* -------------------------------------------------- */
#block-contents{position:relative;z-index:1;}
#block-contents .container::before{content:"";display:block;width:278px;height:170px;background:url(/se/important_story/img/top/contents_img01.png) no-repeat center bottom;background-size:100% auto;position:absolute;bottom:calc(100% - 40px);left:50%;transform:translate(-50%,20%);max-width:35%;opacity:0;}
#block-contents .container::after{content:"";display:block;width:400px;height:247px;background:url(/se/important_story/img/top/contents_img02.png) no-repeat center bottom;background-size:100% auto;position:absolute;top:calc(100% + 40px);right:10%;transform:translate(0,-61%);max-width:45%;opacity:0;}
#block-contents .list-contents{display:flex;gap:30px;flex-wrap:wrap;}
#block-contents .list-contents > li{width:calc((100% - 30px) / 2);}
#block-contents .list-contents > li .common-btn02{width:100%;height:100%;display:flex;align-items:center;}
#block-contents .list-contents > li .common-btn02 > span{flex:1;}
#block-contents.animated .container::before{opacity:1;transition:.6s .3s;bottom:100%;}
#block-contents.animated .container::after{opacity:1;transition:.6s .3s;top:100%;}

@media screen and (min-width:1px) and (max-width:1179px){
  #block-contents .container{padding-bottom:15vw;}
  #block-contents .container::after{right:-40px;}
  #block-contents .list-contents{display:block;max-width:560px;margin:auto;}
  #block-contents .list-contents > li{width:100%;}
  #block-contents .list-contents > li + li{margin-top:15px;}
}
@media screen and (min-width:1px) and (max-width:767px){
  #block-contents .container::before{width:45%;max-width:200px;transform:translate(-50%,15%);}
  #block-contents .container::after{width:55%;max-width:340px;right:30px;top:auto;bottom:-30px;transform:translate(0,40px);}
  #block-contents .list-contents{max-width:360px;}
  #block-contents .container{padding-bottom:calc(36vw - 40px);}
  #block-contents.animated .container::after{top:auto;bottom:0;}
}

/* -------------------------------------------------- */
/* #block-character */
/* -------------------------------------------------- */
#block-character .list-character{display:flex;flex-wrap:wrap;gap:35px;max-width:1040px;margin:auto;}
#block-character .list-character > li{width:calc((100% - 70px) / 3);}
#block-character .list-character > li .img{text-align:center;}
#block-character .list-character > li .img img{margin:auto;}
#block-character .list-character > li .ttl{font-size:2rem;font-weight:bold;text-align:center;background:#000;color:#fff;border-radius:100px;width:fit-content;margin:20px auto 15px;padding:10px 40px;min-width:120px;line-height:1;}
#block-character .list-character > li p{letter-spacing:0.05em;}

@media screen and (min-width:1px) and (max-width:767px){
  #block-character .list-character{display:block;}
  #block-character .list-character > li{width:100%;display:flex;align-items:center;gap:25px;}
  #block-character .list-character > li + li{margin-top:35px;}
  #block-character .list-character > li .ttl{font-size:1.6rem;margin:0 0 5px;min-width:100px;padding:6px 30px 8px;}
  #block-character .list-character > li .img{width:35%;max-width:150px;margin:0;padding-left:10px;}
  #block-character .list-character > li .inner{flex:1;}
  #block-character .list-character > li p{line-height:1.8;}
}