@charset "UTF-8"; .lp-cardNovelty01071050 { display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; margin: 30px 10px 30px 0; padding: 20px 10px 5px 40px; border-top: 4px solid #ffc61a; border-bottom: 4px solid #ffc61a; background-color: #fff7d6; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 { margin: 30px 30px 20px 20px; padding-left: 30px; } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 { flex-direction: column; margin: 30px 20px 15px; padding: 10px 20px 10px; } } .lp-cardNovelty01071050 .lp-cardNovelty01071050-title { width: 85%; margin-bottom: 15px; margin-left: 40px; color: #333; font-size: 3.4rem; font-weight: normal; text-align: center; } .lp-cardNovelty01071050.lp-cardNovelty01071050-col5 .lp-cardNovelty01071050-title { flex: 1; } .lp-cardNovelty01071050 .lp-cardNovelty01071050-title.lp-cardNovelty01071050-longTitle { font-size: 2.5rem; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-title { margin-left: 50px; font-size: calc(1.8rem + ((1vw - 0.64rem) * (4.86322))); } .lp-cardNovelty01071050 .lp-cardNovelty01071050-title.lp-cardNovelty01071050-longTitle { font-size: calc(1.8rem + ((1vw - 0.84rem) * (2.86322))); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-title { margin-bottom: 20px; margin-left: 0; font-size: 2rem; text-align: center; } .lp-cardNovelty01071050 .lp-cardNovelty01071050-title.lp-cardNovelty01071050-longTitle { font-size: 2.5rem; } } .lp-cardNovelty01071050 .lp-cardNovelty01071050-text { display: flex; z-index: 1; position: relative; align-items: center; padding: 5px 0; color: #fff; font-size: 2.4rem; justify-content: center; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-text { font-size: calc(1.8rem + ((1vw - 0.64rem) * (5.47112))); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-text { display: block; padding: 0; font-size: 2.4rem; } } .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::before { display: block; z-index: -1; position: absolute; top: 0; right: -20px; width: calc(100% + 35px); height: 100%; background-color: #e53631; content: ""; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::before { width: calc(100% + 55px); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::before { right: -20px; width: calc(100% + 40px); } } .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::after { display: block; position: absolute; right: -20px; bottom: -10px; border-bottom: 10px solid transparent; border-left: 10px solid #aa0500; content: ""; } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::after { display: none; } } .lp-cardNovelty01071050 .lp-listNovelty01071050 { display: flex; height: 100%; margin: 0 0 0 -15px; width: 75%; } .lp-cardNovelty01071050.lp-cardNovelty01071050-col5 .lp-listNovelty01071050 { flex-wrap: wrap; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050.lp-cardNovelty01071050-col5 .lp-listNovelty01071050 { flex: 2; } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-listNovelty01071050 { flex-direction: row; justify-content: center; width: 100%; margin: 0 0 0 -8px; } } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li { min-width: calc((100% - 60px)/ 4); margin-left: 15px; padding: 0; border: 1px solid #ffc61a; box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.16); margin-bottom: 15px; } .lp-cardNovelty01071050.lp-cardNovelty01071050-col5 .lp-listNovelty01071050 > li { flex: 0; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-listNovelty01071050 > li { min-width: calc((100% - 30px) / 2); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-listNovelty01071050 > li { width: 100%; min-width: initial; margin-left: 10px; } .lp-cardNovelty01071050.lp-cardNovelty01071050-col5 .lp-listNovelty01071050 > li { width: 45%; flex: none; } } /* .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n+1) { background: #f7941d; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n+1) .lp-mediaNovelty01071050-icon { color: #f7941d; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n+2) { background: #f25a29; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n+2) .lp-mediaNovelty01071050-icon { color: #f25a29; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n) { background: #e50011; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(3n) .lp-mediaNovelty01071050-icon { color: #e50011; } */ .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(2n+1) { background: #f7941d; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(2n+1) .lp-mediaNovelty01071050-icon { color: #f7941d; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(2n) { background: #f25a29; } .lp-cardNovelty01071050 .lp-listNovelty01071050 > li:nth-of-type(2n) .lp-mediaNovelty01071050-icon { color: #f25a29; } .lp-cardNovelty01071050 .lp-listNovelty01071050 .lp-mediaNovelty01071050-icon { height: auto; font-size: 2rem; } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-listNovelty01071050 .lp-mediaNovelty01071050-icon { font-size: 1.6rem; } } .lp-cardNovelty01071050 .lp-mediaNovelty01071050 { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050 { padding: 0; } } .lp-cardNovelty01071050 .lp-mediaNovelty01071050 > li { margin-left: 10px; padding: 0; } .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon { display: flex; flex: 1 0 auto; justify-content: center; order: 1; width: 100%; height: auto; margin-bottom: 0; padding: 0 5px; border-radius: 0; background: #fff; font-size: 2rem; font-weight: bold; text-align: center; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon { font-size: calc(1.6rem + ((1vw - 0.64rem) * (1.21581))); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon { flex-direction: column; justify-content: flex-start; font-size: 1.6rem; } } .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-item { padding-right: 3px; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-item { font-size: calc(1.6rem + ((1vw - 0.64rem) * (1.21581))); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-item { padding-right: 0; } } .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { padding-top: 5px; padding-bottom: 2px; color: #333; font-size: 1.5rem; font-weight: normal; line-height: 1.3; } @media only screen and (max-width: 969px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { font-size: calc(1.3rem + ((1vw - 0.64rem) * (0.6079))); } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { padding-top: 0; font-size: 1.3rem; } } .lp-cardNovelty01071050 .lp-mediaNovelty01071050-image { width: 100%; min-height: 0%; margin-bottom: 0; padding: 5px; text-align: center; } .lp-cardNovelty01071050 .lp-mediaNovelty01071050-image > img{ max-width: 100%; } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-image { width: 100%; padding: 3px; } } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-mediaNovelty01071050-image > img { max-width: 100%; min-height: 100%; } } .lp-cardNovelty01071050 .lp-smallScreen-hide { display: block; } @media only screen and (max-width: 640px) { .lp-cardNovelty01071050 .lp-smallScreen-hide { display: none; } } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-smallScreen-hide { display: block; } } #MainContent .lp-cardNovelty01071050 { min-width: 910px; line-height: 1.5; } @media only screen and (max-width: 969px) { #MainContent .lp-cardNovelty01071050 { margin: 30px 10px 15px 0; padding-left: 40px; } } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 { flex-direction: row-reverse; padding: 20px 10px 20px 40px; } } #MainContent .lp-cardNovelty01071050 * { box-sizing: border-box; } #MainContent .lp-cardNovelty01071050 p { margin: 0; } #MainContent .lp-cardNovelty01071050 ul { margin: 0 0 0 -15px; } #MainContent .lp-cardNovelty01071050 ul li { margin: 0 0 0 15px; padding: 0; background: none; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(1) { background: #f7941d; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(1) .lp-mediaNovelty01071050-icon { color: #f7941d; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(2) { background: #f25a29; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(2) .lp-mediaNovelty01071050-icon { color: #f25a29; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(3) { background: #e50011; } #MainContent .lp-cardNovelty01071050 ul li:nth-of-type(3) .lp-mediaNovelty01071050-icon { color: #e50011; } #MainContent .lp-cardNovelty01071050 ul li .lp-mediaNovelty01071050-icon { font-size: 20px; flex-direction: row; justify-content: center; } @media only screen and (max-width: 969px) { #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-item { font-size: 20px; } } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-item { padding-right: 3px; } } #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { font-size: 15px; } @media only screen and (max-width: 969px) { #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { font-size: 15px; } } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-icon > .lp-mediaNovelty01071050-icon-text { padding-top: 5px; font-size: 15px; } } #MainContent .lp-cardNovelty01071050 .lp-cardNovelty01071050-title { -moz-text-align-last: left; width: 342px; font-size: 34px; text-align-last: left; } #MainContent .lp-cardNovelty01071050 .lp-cardNovelty01071050-text { font-size: 36px; } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-cardNovelty01071050-text { padding: 5px 0; } } #MainContent .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::before { width: 412px; } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-cardNovelty01071050-text::after { display: block; } } #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050 { max-width: 144px; } @media only screen and (max-width: 640px) { #MainContent .lp-cardNovelty01071050 .lp-mediaNovelty01071050-image { padding: 5px; } } #MainContent .lp-cardNovelty01071050 .lp-listNovelty01071050 { width: inherit; } .pc-view{ } .sp-view{ display: none; } @media only screen and (max-width: 640px) { .pc-view{ display: none; } .sp-view{ display: block; } }