@charset "UTF-8"; .sp { display: none !important; } header { display: block; position: relative; width: 100%; z-index: 1; } #topimg { display: block; position: relative; width: 100%; height: auto; overflow: hidden; } .bg02-rotate-wrapper { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; transform-origin: center center; -webkit-transform-origin: center center; } .bg02 { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .bg01 { display: block; position: relative; width: 100% !important; height: auto !important; margin: 0 !important; z-index: 32; } .maintitle { display: block; position: absolute; width: 45%; height: auto; left: 27.25%; bottom: 5.5%; z-index: 100; transform-origin: center center; -webkit-transform-origin: center center; opacity: 0; animation: titleIntroDown 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards; -webkit-animation: titleIntroDown 1.15s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards; } .maintitle img { display: block; width: 100%; height: auto; } .aeonmall { display: block; position: absolute; width: 26.56%; height: auto; left: 36.72%; bottom: 16%; z-index: 50; opacity: 0; transform: scale(0); -webkit-transform: scale(0); transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; -webkit-animation: aeonPopUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1s both; } .deco { display: block; position: absolute; width: 95%; height: auto; left: 2%; top: 2%; z-index: 28; opacity: 0; transform-origin: 50% 80%; -webkit-transform-origin: 50% 80%; animation: decoPopUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s forwards; -webkit-animation: decoPopUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s forwards; } .pop01 strong img { display: block; position: absolute; width: 18.5%; height: auto; left: 16%; top: -12% !important; z-index: 25; transform-origin: 250% 300%; -webkit-transform-origin: 250% 300%; animation: pop01ArcIntro 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.65s forwards; -webkit-animation: pop01ArcIntro 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2.65s forwards; opacity: 0; } .ribbon { display: block; position: absolute; width: 23.5%; height: auto; left: 41.2%; top: -10%; z-index: 28; clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); animation: ribbonWipeRightToLeft 0.33s linear 2.9s both; -webkit-animation: ribbonWipeRightToLeft 0.33s linear 2.9s both; } .balloon_20 { display: block; position: absolute; width: 22.5%; height: auto; left: 37.7%; bottom: 29%; z-index: 29; opacity: 0; animation: floatUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) 3s both, sway_20 2.5s ease-in-out infinite 5.5s; -webkit-animation: floatUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) 3s both, sway_20 2.5s ease-in-out infinite 5.5s; } .balloon_th { display: block; position: absolute; width: 12.5%; height: auto; left: 49%; bottom: 31.5%; z-index: 29; opacity: 0; animation: floatUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) 3.15s both, sway_th 2.5s ease-in-out infinite 5.65s; -webkit-animation: floatUp 2.5s cubic-bezier(0.25, 1, 0.5, 1) 3.15s both, sway_th 2.5s ease-in-out infinite 5.65s; } .balloon01 { display: block; position: absolute; width: 9.437%; height: auto; left: 60.5%; top: 2.5%; z-index: 43; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.65s both, sway_chara_fast 2.4s ease-in-out infinite 3.05s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.65s both, sway_chara_fast 2.4s ease-in-out infinite 3.05s; } .sakura { display: block; position: absolute; width: 10.5%; height: auto; left: 81.3%; top: 12%; z-index: 47; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s both; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.8s both; } .karuta { display: block; position: absolute; width: 15.5%; height: auto; left: 65.5%; bottom: 31.5%; z-index: 47; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.05s both; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.05s both; } .chara01 { display: block; position: absolute; width: 11.3%; height: auto; left: 19.8%; bottom: 5.7%; z-index: 45; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.55s both, sway_chara_slow 3s ease-in-out infinite 2.95s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.55s both, sway_chara_slow 3s ease-in-out infinite 2.95s; } .chara02 { display: block; position: absolute; width: 6.812%; height: auto; left: 31.81%; top: 25%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.15s both, sway_chara_slow 2.8s ease-in-out infinite 3.55s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.15s both, sway_chara_slow 2.8s ease-in-out infinite 3.55s; } .chara03 { display: block; position: absolute; width: 9.125%; height: auto; left: 65.62%; top: 20%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s both, sway_chara_fast 2.6s ease-in-out infinite 3.7s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s both, sway_chara_fast 2.6s ease-in-out infinite 3.7s; } .chara04 { display: block; position: absolute; width: 8.5%; height: auto; left: 77.5%; bottom: 40%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.4s both, sway_chara_slow 3.2s ease-in-out infinite 3.8s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.4s both, sway_chara_slow 3.2s ease-in-out infinite 3.8s; } .chara05 { display: block; position: absolute; width: 8.187%; height: auto; left: 72.5%; bottom: 6.5%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s both; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.4s both; } .chara06 { display: block; position: absolute; width: 7.187%; height: auto; left: 14.12%; bottom: 31%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.55s both, sway_chara_fast 2.5s ease-in-out infinite 3.95s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.55s both, sway_chara_fast 2.5s ease-in-out infinite 3.95s; } .chara07 { display: block; position: absolute; width: 5%; height: auto; left: 75.5%; top: 24%; z-index: 46; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.65s both, sway_chara_slow 2.7s ease-in-out infinite 4.05s; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 3.65s both, sway_chara_slow 2.7s ease-in-out infinite 4.05s; } .chara08 { display: block; position: absolute; width: 13.12%; height: auto; left: 57.8%; bottom: 13.5%; z-index: 48; opacity: 0; transform-origin: center center; -webkit-transform-origin: center center; animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.9s both; -webkit-animation: aeonPopUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 2.9s both; } .anniversary { display: block; position: absolute; width: 14.4%; height: auto; left: 27.62%; bottom: 26.5%; z-index: 50; clip-path: inset(0 100% 0 0); transform: scale(1); animation: wipeDeepPop 0.9s 4.15s cubic-bezier(0.25, 1, 0.5, 1) forwards; } .hanabi01 { width: 9.437%; left: 74%; top: -8%; z-index: 20; animation-delay: 5s; animation-name: path01; } .hanabi02 { width: 4.5%; left: 14%; top: -3%; z-index: 20; animation-delay: 6.25s; animation-name: path02; } .hanabi03 { width: 7%; left: 2%; top: 10%; z-index: 20; animation-delay: 7.5s; animation-name: path03; } .hanabi04 { width: 9%; left: 9%; top: 23%; z-index: 20; animation-delay: 8.75s; animation-name: path04; } .hanabi05 { width: 6%; right: 4%; top: 29%; z-index: 20; animation-delay: 10s; animation-name: path05; } .hanabi06 { width: 5.5%; left: 56%; top: -4%; z-index: 20; animation-delay: 11.25s; animation-name: path06; } .hanabi01, .hanabi02, .hanabi03, .hanabi04, .hanabi05, .hanabi06 { display: block; position: absolute; height: auto; clip-path: circle(0% at 50% 50%); opacity: 0; animation-duration: 6s; animation-timing-function: ease-out; animation-iteration-count: infinite; } @keyframes bgStepSwitch { 0% { transform: scale(1.25) rotate(-5deg) translate(-15px, 5px); } 50% { transform: scale(1.25) rotate(5deg) translate(15px, 5px); } 100% { transform: scale(1.25) rotate(-5deg) translate(-15px, 5px); } } @-webkit-keyframes bgStepSwitch { 0% { -webkit-transform: scale(1.25) rotate(-5deg) translate(-15px, 5px); } 50% { -webkit-transform: scale(1.25) rotate(5deg) translate(15px, 5px); } 100% { -webkit-transform: scale(1.25) rotate(-5deg) translate(-15px, 5px); } } @keyframes bgRotateLeft { 0% { transform: rotate(0deg); } 100% { transform: rotate(-5deg); } } @keyframes bgRotateRight { 0% { transform: rotate(0deg); } 100% { transform: rotate(5deg); } } @keyframes aeonPopUp { 0% { opacity: 0; transform: scale(0); } 15% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes aeonPopUp { 0% { opacity: 0; -webkit-transform: scale(0); } 15% { opacity: 1; } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes titleIntroDown { 0% { opacity: 0; transform: translateY(-500px) scale(4); filter: brightness(0) invert(1); } 40% { opacity: 1; filter: brightness(0) invert(1); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) invert(0); } } @-webkit-keyframes titleIntroDown { 0% { opacity: 0; -webkit-transform: translateY(-500px) scale(4); -webkit-filter: brightness(0) invert(1); } 40% { opacity: 1; -webkit-filter: brightness(0) invert(1); } 100% { opacity: 1; -webkit-transform: translateY(0) scale(1); -webkit-filter: brightness(1) invert(0); } } @keyframes decoPopUp { 0% { opacity: 0; transform: scale(0.2); } 15% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes decoPopUp { 0% { opacity: 0; -webkit-transform: scale(0.2); } 15% { opacity: 1; } 100% { opacity: 1; -webkit-transform: scale(1); } } @keyframes pop01ArcIntro { 0% { transform: rotate(-55deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: rotate(0deg); opacity: 1; } } @-webkit-keyframes pop01ArcIntro { 0% { -webkit-transform: rotate(-55deg); opacity: 0; } 15% { opacity: 1; } 100% { -webkit-transform: rotate(0deg); opacity: 1; } } @keyframes ribbonWipeRightToLeft { 0% { clip-path: inset(0 0 0 100%); } 100% { clip-path: inset(0 0 0 0); } } @-webkit-keyframes ribbonWipeRightToLeft { 0% { -webkit-clip-path: inset(0 0 0 100%); } 100% { -webkit-clip-path: inset(0 0 0 0); } } @keyframes floatUp { 0% { transform: translateY(150px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @-webkit-keyframes floatUp { 0% { -webkit-transform: translateY(150px); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @keyframes sway_20 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } } @-webkit-keyframes sway_20 { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(12px); } } @keyframes sway_th { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @-webkit-keyframes sway_th { 0%, 100% { -webkit-transform: translateY(0); } 50% { -webkit-transform: translateY(7px); } } @keyframes sway_chara_slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(6px) rotate(2deg); } } @-webkit-keyframes sway_chara_slow { 0%, 100% { -webkit-transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(6px) rotate(2deg); } } @keyframes sway_chara_fast { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(4px) rotate(-3deg); } } @-webkit-keyframes sway_chara_fast { 0%, 100% { -webkit-transform: translateY(0) rotate(0deg); } 50% { -webkit-transform: translateY(4px) rotate(-3deg); } } @keyframes wipeDeepPop { 0% { clip-path: inset(0 100% 0 0); transform: scale(1); } 20% { clip-path: inset(0 0 0 0); transform: scale(1); } 65% { transform: scale(1); } 85% { transform: scale(1.35); } 100% { clip-path: inset(0 0 0 0); transform: scale(1); } } @keyframes path01 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(-200px, 150px); } 62%, 92% { transform: translate(-100px, 200px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } @keyframes path02 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(150px, -20px); } 62%, 92% { transform: translate(250px, 120px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } @keyframes path03 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(200px, -80px); } 62%, 92% { transform: translate(120px, 40px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } @keyframes path04 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(220px, 60px); } 62%, 92% { transform: translate(140px, -120px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } @keyframes path05 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(-250px, -150px); } 62%, 92% { transform: translate(-180px, -30px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } @keyframes path06 { 0%, 30% { transform: translate(0, 0); } 31%, 61% { transform: translate(120px, 80px); } 62%, 92% { transform: translate(-150px, 40px); } 100% { transform: translate(0, 0); } 0%, 31%, 62% { clip-path: circle(0% at 50% 50%); opacity: 0; } 3%, 34%, 65% { opacity: 1; } 18%, 49%, 80% { clip-path: circle(75% at 50% 50%); opacity: 1; } 30%, 61%, 92%, 100% { clip-path: circle(75% at 50% 50%); opacity: 0; } } .card-wrap2 { display: flex; width: 107%; justify-content: space-between; margin: 50px 0 0 -4%; clear: both; } .card-wrap2 picture { display: block; width: 48%; height: auto; } .card-wrap2 picture img { display: block; width: 100%; height: auto; } .card-wrap2::after { content: ""; position: absolute; bottom: -25% !important; transform: translate(0, -10%); background: url(../images/people_02.png) center/contain no-repeat; width: 132px; height: 83px; } @media screen and (max-width: 1023px) { .card-wrap2::after { right: 0; bottom: 0; transform: translate(0, 50%); } .card-wrap2 { display: block; width: 103% !important; margin: 50px -1% 0 -2%; clear: both; } .card-wrap2 picture { display: block; width: 100% !important; height: auto; margin-bottom: 35px; clear: both; } } @media screen and (min-width: 1024px) { .card-wrap2::after { left: 34%; width: 227px; height: 143px; transform: translate(50%, -10%); } .card-wrap2 { display: flex; width: 107%; justify-content: space-between; margin: 50px 0 0 -4%; clear: both; } .card-wrap2 picture { display: block; width: 48%; height: auto; } } .info__bubble_green { background-color: #00b092 !important; margin-top: -60px !important; } .info__bubble_green::before { content: ""; position: absolute; left: 50%; bottom: 1px; width: 27px; height: 14px; transform: translate(-50%, 100%); background: url(../images/bubble_green.png) center/contain no-repeat !important; } .box2 { display: block; position: relative; background: var(--color-bg-base); border-radius: 2cqb; padding: 0 21px; margin-top: 25px !important; margin-bottom: 60px !important; border-bottom: solid 18px #00b092; z-index: 0; float: left; clear: both; } @media screen and (min-width: 1024px) { .box2 { border-radius: 50px; padding: 0 30px; margin-top: 32px !important; } } @media screen and (min-width: 1200px) { .box2 { padding: 0 50px; } } .info2 { position: relative; border-radius: 20px; padding: 0 22px 30px; margin-top: 60px !important; z-index: 1; } @media screen and (min-width: 1024px) { .info2 { border-radius: 50px; padding: 80px 30px 70px 90px; margin-top: 100px; } } @media screen and (min-width: 1200px) { .info2 { padding: 80px 100px 40px 70px; } } .box2::before { content: ""; position: absolute; top: -3.5%; transform: translate(30px, -20%); background: url(../images/people_03.png) center/contain no-repeat; width: 247px; height: 203px; } .subtitle_20th_event { display: block; width: 100% !important; max-width: 460px; height: auto; margin: -60px auto 0 auto !important; } .subtitle_20th_event::after { content: ""; position: absolute; transform: translate(25px, -50%); background: url("../images/balloon02.png") center/contain no-repeat; width: 120px; height: 120px; } .event_block_area2 { display: flex; width: 100% !important; justify-content: space-between; flex-wrap: wrap; } .event_block_area2 .event_block { display: block; width: calc(51% - 20px) !important; padding: 10px; margin-bottom: 40px; background-color: #f2f2f2; border-radius: 12px; } .event_block_area3 { display: flex; width: 100%; justify-content: space-between; } .event_block_area3 .event_block { display: block; width: 32.5% !important; padding: 10px 10px 20px 10px; margin-bottom: 30px; background-color: #f2f2f2; border-radius: 12px; } .event_block .title_area { display: flex; width: 100%; justify-content: space-between; margin-bottom: 12px; clear: both; } .event_block_area2 .event_block .date { display: flex; width: 22%; text-align: center; align-items: center; justify-content: center; color: #fff; font-size: 3rem; line-height: 120% !important; font-weight: bolder; padding: 10px 0; background-color: #00b092; border-radius: 8px; float: left; } .event_block_area2 .event_block .date span { display: block; width: 100%; font-size: 2rem !important; clear: both; } .event_block_area2 .event_block h3 { display: flex; width: calc(78% - 10px); color: #00b092; font-size: 2.2rem !important; line-height: 150% !important; padding: 10px !important; background-color: #fff; border-radius: 8px; align-items: center; flex-wrap: wrap; float: right; } .event_block_area3 .event_block .date { display: flex; width: 25%; text-align: center; align-items: center; justify-content: center; color: #fff; font-size: 2.3rem; line-height: 120% !important; font-weight: bolder; padding: 10px 0; background-color: #00b092; border-radius: 8px; float: left; } .event_block_area3 .event_block .date span { display: block; width: 100%; font-size: 1.8rem !important; clear: both; } .event_block_area3 .event_block h3 { display: flex; width: calc(75% - 10px); color: #00b092; font-size: 1.8rem !important; line-height: 150% !important; padding: 0px 10px !important; background-color: #fff; border-radius: 8px; align-items: center; float: right; } .event_block h3 span { display: block; width: 100% !important; font-size: 1.5rem !important; margin-bottom: -15px !important; clear: both !important; } .event_block_area2 .text_area { display: flex; width: 50%; height: 70%; flex-direction: column; justify-content: flex-start; } .event_block_area3 .text { min-height: 80px !important; } .text { display: block; } .event_block p { font-size: 1.4rem; line-height: 180%; } .event_block img { border-radius: 5px; } .event_block_area2 .event_block .thumbnail { display: block; width: 49% !important; margin: 0 0 10px 1%; float: right; } .event_block_area3 .event_block .thumbnail { display: block; width: 65% !important; margin: 0 17.5% 10px 17.5%; clear: both; } .event_block dl { display: inline-block; width: 100%; font-size: 1.8rem !important; font-weight: bold; margin-top: 10px !important; } .event_block dl dt { display: inline-block; width: 50px; text-align: center; color: #fff; font-size: 1.2rem !important; padding: 1px 0 3px 0; margin-right: 8px; margin-bottom: 6px; background-color: #404040 !important; border-radius: 6px; vertical-align: bottom; } .event_block dl dd { display: inline-block; width: calc(100% - 58px); margin-bottom: 3px; vertical-align: bottom; } .bt_more { display: block; width: 100% !important; margin-top: auto !important; padding-top: 15px; } .event_block_area2 .event_block .bt_more { width: 100% !important; max-width: 200px; margin-left: -4px; } .event_block_area3 .event_block .bt_more { width: 100% !important; max-width: 200px; margin: 0 auto 0 auto !important; } .bt_more a { display: block; width: 100% !important; margin: 0; } .bt_more a img { display: block; width: 100%; height: auto; transition: transform 0.2s, opacity 0.2s, filter 0.2s; transform-origin: center center; float: left !important; } .bt_more a:hover img { transform: scale(1.1); opacity: 0.7; filter: brightness(0.5) sepia(1) hue-rotate(125deg) saturate(5) brightness(1.2); } .bt_more2 { display: block; width: 100% !important; height: auto; margin: 20px 0 50px 0; float: left; clear: both; } .bt_more2 a { display: block; width: 100% !important; max-width: 450px; margin: 0 auto !important; } .bt_more2 a img { display: block; width: 100%; height: auto; transition: transform 0.2s, opacity 0.2s, filter 0.2s; transform-origin: center center; float: left !important; } .bt_more2 a:hover img { transform: scale(1.1); opacity: 0.7; filter: brightness(0.5) sepia(1) hue-rotate(125deg) saturate(5) brightness(1.2); }