a {
text-decoration: none;
}
.lc-inner {
box-sizing: border-box;
padding: 30px 40px 0 40px;
}
.lc-bg {
position: relative;
}
.lc-bg::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 52%;
height: 80%;
background-color: #f7f7f8;
z-index: 0;
}
.lc-bg > * {
position: relative;
z-index: 1;
}
.lc-underline {
position: relative;
display: inline-block;
padding-bottom: 8px;
max-width: 100%;
}
.lc-underline::before, .lc-underline::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 90%;
height: 1px;
background-color: #969696;
}
.lc-letter-spacing {
letter-spacing: -8px;
}
.lc-flex-container {
max-width: 1120px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
box-sizing: border-box;
align-items: center;
gap: 20px;
}
.lc-flex-item-left {
flex: 1;
min-width: 42%;
}
.lc-flex-item-right {
flex-shrink: 0;
}
.lc-fontsize-m {
font-size: 3.4rem;
}
.lc-red {
color: #cc0000;
}
.lc-gray {
color: #767676;
}
@keyframes horizontal-animation {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
.lc-slider-container {
display: flex;
overflow: hidden;
}
.lc-slider-wrapper {
display: flex;
animation: horizontal-animation 30s linear infinite;
}
.lc-slide img {
width: 100%;
height: auto;
vertical-align: bottom;
}
.mod-box.of-background {
border-color: #f7f7f8;
background-color: #f7f7f8;
}
.mod-hdg-al2::before, .mod-hdg-al2::after {
display: none;
}
.mod-hdg-al2 > h2 > span:not(:last-child) {
display: inline-block;
}
.lc-red-circle {
position: relative;
padding-left: 15px;
}
.lc-red-circle::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 10px;
background-color: #cc0000;
border-radius: 50%;
}
.lc-align-center {
align-items: center;
}
.lc-bg-gray {
background: #f7f7f8 !important;
}
.lc-border {
border: 2px solid #dbdbdb;
padding: 20px;
background-color: #fff;
}
.lc-margin-auto {
margin: 0 auto;
}
.mod-media > .inner > .lc-ml-auto {
margin-left: auto;
}
.lc-text-red {
color: #cc0000;
}
.mod-btn a, .mod-btn button[type] {
border-radius: 50px;
}
.c-accordion:not(.of-step) .accordion-list .accordion-summary{
display:none;
}
.mod-general-filter__actions.of-horizontal {
display:none;
}
.mod-general-search-form__label{
border-bottom:none;
margin-bottom:0;
padding-bottom:0;
}
.c-accordion .accordion-list {
border: 1px solid #f7f7f8;
border-radius: 42px;
background: #f7f7f8;
}
.mod-box-product-header .hdg {
min-height: 3.6em;
}
.mod-box-product-body .recommend .recommend-target {
border: 1px solid #ffebeb;
background: #ffebeb;
}
.lc-pic-man {
position: relative;
}
.lc-pic-man::after {
content: "";
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
width: 73px;
height: 152px;
background-image: url(/-/media/Project/Canon/CanonJP/Website/biz/solution/logichange/image/logichange-solutionlineup01.png);
background-repeat: no-repeat;
background-size: contain;
}
.lc-pic-bg {
position: relative;
height: 378px;
margin-top: -200px;
}
.lc-pic-bg::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 396px;
height: 378px;
background-image: url(/-/media/Project/Canon/CanonJP/Website/biz/solution/logichange/image/logichange-solutionlineup02.png);
background-position: right;
background-repeat: no-repeat;
background-size: contain;
z-index: -1;
}
@media screen and (min-width: 768px), print {
.lc-sp-only {
display: none;
}
.lc-pc-fontsize-20 {
font-size: 2rem;
}
.lc-fontsize-pc20-sp18 {
font-size: 2rem;
}
.lc-fontsize-pc20-sp16 {
font-size: 2rem;
}
.lc-font-pc24-sp20 {
font-size: 2.4rem;
}
.lc-fontsize-pc28-sp30 {
font-size: 2.8rem;
}
.lc-fontsize-pc20-sp14 {
font-size: 2rem;
}
.lc-sp-fontsize-12 {
color: #767676
}
.mod-media-lyt > .inner > .media > .mod-media {
margin-top: 0;
}
.str-pageTitle > .inner > .hdg > .text-unit > .main {
font-size: 6.6rem;
}
.lc-main-margin {
margin-top: 40px;
}
.lc-pic-animation {
max-width: 100%;
min-height: 0;
text-align: center;
width: 850px;
height: 583px;
background-image: url(/-/media/Project/Canon/CanonJP/Website/biz/solution/logichange/image/logichange-mv-pc.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: auto 100%;
animation: change-images 3s steps(6, jump-none) 3 forwards;
}
@keyframes change-images {
0% {
background-position: 0px 0px;
}
100% {
background-position: -4250px 0;
}
}
.str-pageTitle {
margin: 0 0 30px;
padding: 0;
}
.lc-slider-container {
margin-top: -20px;
}
.lc-slide {
width: 400px;
margin-right: 20px;
}
.lc-mb-pc80-sp40 {
margin-bottom: 80px !important;
}
.mod-media-lyt[data-fix-media-ratio-wide]:not(.of-imageTop-wide):not(.of-imageBottom-wide)[data-fix-media-ratio-wide="50"] > .inner > .media {
min-width: 52.632%;
}
.lc-about-text {
width: 415px;
margin: 0 auto;
}
.lc-pc-pt-10 {
padding-top: 10px !important;
}
.lc-mb-pc80-sp60 {
margin-bottom: 80px !important;
}
.lc-pl-26 {
padding-left: 26px !important;
}
.lc-border:not(:first-child) {
border-left: none;
}
.lc-sp-border-yellow {
background-image: none;
}
.lc-pc-border-yellow {
background-image: linear-gradient(#ffd83d, #ffd83d);
background-position: 0 100%;
background-size: 100% 25%;
background-repeat: no-repeat;
display: inline;
padding: 0 4px;
}
}
@media screen and (min-width: 1049px) and (max-width: 1400px) {
.lc-underline::before, .lc-underline::after {
width: 96%;
}
.lc-flex-item-left {
min-width: 39%;
}
.lc-pic-animation {
width: 595px;
height: 408.1px;
}
@keyframes change-images {
0% {
background-position: 0px 0px;
}
100% {
background-position: -2975px 0;
}
}
.str-pageTitle {
margin: 60px 0 20px;
}
.str-pageTitle > .inner > .hdg > .text-unit > .main {
font-size: 5.5rem;
}
.lc-slider-container {
margin-top: -15px;
}
.lc-slide {
width: 300px;
margin-right: 20px;
}
.lc-pic-man::after {
right: -40px;
}
.lc-pic-bg {
margin-top: 0;
}
}
@media screen and (min-width: 768px) and (max-width: 1048px) {
.lc-bg::after {
width: 45%;
}
.lc-underline::before, .lc-underline::after {
width: 96%;
}
.str-pageTitle > .inner > .hdg > .text-unit > .main {
font-size: 4.4rem;
}
.lc-flex-item-left {
min-width: 39%;
}
.lc-pic-animation {
width: 425px;
height: 291.5px;
}
@keyframes change-images {
0% {
background-position: 0px 0px;
}
100% {
background-position: -2125px 0;
}
}
.lc-slider-container {
margin-top: -15px;
}
.lc-slide {
width: 250px;
margin-right: 20px;
}
.str-pageTitle {
margin: 60px 0 20px;
}
.lc-pic-man::after {
right: 0;
top: -80px;
}
.lc-pic-bg {
margin-top: 0;
}
.lc-about-text {
width: 310px;
}
.lc-font-pc24-sp20 {
font-size: 1.9rem;
}
}
@media screen and (max-width: 767px), print {
.lc-pc-only {
display: none;
}
.lc-fontsize-pc20-sp18 {
font-size: 1.8rem;
}
.lc-fontsize-pc20-sp16 {
font-size: 1.6rem;
}
.lc-fontsize-pc28-sp30 {
font-size: 3rem;
}
.lc-fontsize-pc20-sp14 {
font-size: 1.4rem;
}
.lc-sp-fontsize-12 {
font-size: 1.2rem;
color: #767676
}
.lc-sp-fontsize-14 {
font-size: 1.4rem;
}
.lc-fontsize-m {
font-size: 2.4rem;
}
.lc-sp-t-a-c {
text-align: center;
}
.lc-inner {
padding: 0;	
}
.lc-bg::after {
width: 100%;
height: 100%;
}
.lc-sp-h1-inner {
background-color: #fff;
margin-top: 60px;
padding: 30px 0;
}
.lc-underline::before, .lc-underline::after {
width: 100%;
}
.lc-flex-container {
flex-wrap: wrap;
gap: 0;
margin-top: -60px;
}
.lc-flex-item-left, .lc-flex-item-right {
width: 100%;
box-sizing: border-box;
}
.lc-flex-item-right {
margin-top: -20px;
}
.str-pageTitle {
margin: 0;
}
.str-pageTitle > .inner > .hdg {
font-size: 4.5rem;
}
.lc-main-margin {
margin-top: 20px;
}
.lc-pic-animation {
max-width: 100%;
min-height: 0;
text-align: center;
margin: 0 auto;
width: 375px;
height: 253px;
background: url(/-/media/Project/Canon/CanonJP/Website/biz/solution/logichange/image/logichange-mv-sp.png) no-repeat;
background-repeat: no-repeat;
background-position: 0 0;
background-size: auto 100%;
animation: change-images 3s steps(6, jump-none) 3 forwards;
}
@keyframes change-images {
0% {
background-position: 0px 0px;
}
100% {
background-position: -1875px 0;
}
}
.mod-media-lyt.of-imageLeft > .inner, .mod-media-lyt.of-imageRight > .inner, .mod-media-lyt.of-imageLeft-wide-float > .inner, .mod-media-lyt.of-imageRight-wide-float > .inner {
flex-direction: column-reverse;
}
.str-pageTitle > .inner > .hdg > .text-unit > .main {
text-align: center;
}
.str-pageTitle > .inner > .hdg > .text-unit > .sub {
margin: 0 auto 4px;
text-align: center;
}
.lc-sp-text-align-center {
text-align: center;
}
.lc-sp-mb-0 {
margin-bottom: 0;
}
.lc-sp-mt-15 {
margin-top: 15px;
}
.lc-slider-container {
margin-top: -5px;
}
.lc-slide {
width: 150px;
margin-right: 20px;
}
.lc-mb-pc80-sp40 {
margin-bottom: 40px !important;
}
.mod-media-lyt > .inner > .content, .mod-media-lyt > .inner > .media {
padding: 0 0 0 20px;
}
.mod-media-lyt.of-imageLeft > .inner, .mod-media-lyt.of-imageRight > .inner, .mod-media-lyt.of-imageLeft-wide-float > .inner, .mod-media-lyt.of-imageRight-wide-float > .inner {
flex-direction: column;
}
.mod-media > .inner > .lc-ml-auto {
margin: 0 auto;
}
.lc-mb-pc80-sp60 {
margin-bottom: 60px !important;
}
.lc-sp-mt-10 {
margin-top: 10px;
}
.lc-border:not(:first-child) {
border-top: none;
}
.lc-pic-man::after {
right: -10px;
top: -80px;
width: 50px;
height: 140px;
}
.lc-pic-bg {
margin-top: 0;
height: auto;
padding-top: 210px;
padding-bottom: 40px;
}
.lc-pic-bg::after {
width: 85%;
aspect-ratio: 396 / 378;
}
.lc-pc-border-yellow {
background-image: none;
}
.lc-sp-border-yellow {
background-image: linear-gradient(#ffd83d, #ffd83d);
background-position: 0 100%;
background-size: 100% 25%;
background-repeat: no-repeat;
display: inline;
padding: 0 4px;
}
.lc-font-pc24-sp20 {
font-size: 2rem;
}
.c-accordion .accordion-list {
border-radius: 10px;
}
}