div.yyi-rinker-contents { margin: 1.5em 0; border: solid 1px #dbdbdb; background-color: #fff; box-shadow: 2px 3px 8px -5px rgba(0,0,0,.25); } div.yyi-rinker-contents a { border: none; } div.yyi-rinker-contents div.yyi-rinker-box{ display: flex; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; box-sizing: border-box; padding: 12px; } div.yyi-rinker-contents div.yyi-rinker-image { padding: 0; display: flex; vertical-align: middle; justify-content: center; align-items: center; } .yyi-rinker-img-s .yyi-rinker-image { width: 75px; min-width: 75px; } .yyi-rinker-img-m .yyi-rinker-image { width: 175px; min-width: 175px; } .yyi-rinker-img-l div.yyi-rinker-image{ width: 200px; min-width: 200px; } /* for IE widthに合わせる*/ div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{ width: calc(100% - 75px); } div.yyi-rinker-contents div.yyi-rinker-info{ width: calc(100% - 175px); } div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{ width: calc(100% - 200px); } div.yyi-rinker-contents div.yyi-rinker-title a { color: #333; text-decoration: none; } div.yyi-rinker-contents div.yyi-rinker-title p{ margin: 5px; } div.yyi-rinker-contents div.yyi-rinker-detail { font-size: 0.8em; color: #999; padding-left: 15px; } div.yyi-rinker-contents div.yyi-rinker-detail a { text-decoration: underline; } div.yyi-rinker-contents div.yyi-rinker-detail .price-box { color: #aaa; } div.yyi-rinker-contents div.yyi-rinker-detail .free-text { color: #aaa; } div.yyi-rinker-contents ul.yyi-rinker-links { border: none; list-style-type: none; display: inline-flex; display: -ms-inline-flexbox; display: -webkit-inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 10px auto; padding: 0; width: 100%; } div.yyi-rinker-contents ul.yyi-rinker-links li { content: ''; position: static; margin: 2px 5px; padding: 0; border-radius: 2px; border: none; box-shadow: 0 6px 12px -5px rgba(0, 0, 0, .30); -ms-flex: 0 0 auto; } div.yyi-rinker-contents ul.yyi-rinker-links li:before { content: ''; position: static; } div.yyi-rinker-contents ul.yyi-rinker-links li:hover { box-shadow: 0 5px 8px -5px rgba(0, 0, 0, .30); } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { background: #f6a306; } div.yyi-rinker-contents ul.yyi-rinker-links li a { position: relative; display: block; color: #fff; font-weight: bold; text-decoration: none; font-size: 0.9em; width: 100%; height: 30px; line-height: 30px; padding: 0 18px; } div.yyi-rinker-contents ul.yyi-rinker-links li a:hover { border: none; opacity: 0.7; } div.yyi-rinker-contents ul.yyi-rinker-links li a:before { position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; color: white; text-align: center; border: none; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink { order: 20; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a:before{ content: ''; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink { background: #666; order: 15; } div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink a:before{ content: ''; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink { background: #cf4944; order: 30; } div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink a:before{ content: ''; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink { background: #51a7e8; order: 40; } div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink a:before{ content: ''; } div.yyi-rinker-contents ul.yyi-rinker-links li.freelink1 { background: #4072B3; order: 10; } div.yyi-rinker-contents ul.yyi-rinker-links li.freelink2 { background: #4DC0B2; order: 50; } div.yyi-rinker-contents ul.yyi-rinker-links li.freelink3 { background: #6f63ad; order: 15; } div.yyi-rinker-contents ul.yyi-rinker-links li.freelink4 { background: #63ad87; order: 55; } div.yyi-rinker-contents ul.yyi-rinker-links img, div.yyi-rinker-contents div.yyi-rinker-title img, div.yyi-rinker-contents div.yyi-rinker-image a + img{ display: none; } div.yyi-rinker-detail .credit { font-size: 75%; } ul.yyi-rinker-links li::before { background-color: transparent; } @media all and (max-width: 420px) and (min-width: 321px) { body div.yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0 0 0 15px; } div.yyi-rinker-contents ul.yyi-rinker-links { -webkit-flex-flow: column; flex-direction: column; } .yyi-rinker-img-s .yyi-rinker-image { width: 75px; min-width: 75px; } .yyi-rinker-img-m .yyi-rinker-image { width: 125px; min-width: 125px; } .yyi-rinker-img-l div.yyi-rinker-image{ width: 150px; min-width: 150px; } div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{ width: calc(100% - 75px); } div.yyi-rinker-contents div.yyi-rinker-info { width: calc(100% - 125px); } div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{ width: calc(100% - 150px); } } @media all and (max-width: 320px) { div.yyi-rinker-contents ul.yyi-rinker-links li a { padding: 0 0 0 7px; } div.yyi-rinker-contents ul.yyi-rinker-links { -webkit-flex-flow: column; flex-direction: column; } .yyi-rinker-img-s .yyi-rinker-image { width: 75px; min-width: 75px; } .yyi-rinker-img-m .yyi-rinker-image { width: 100px; min-width: 100px; } .yyi-rinker-img-l div.yyi-rinker-image{ width: 125px; min-width: 125px; } div.yyi-rinker-contents.yyi-rinker-img-s div.yyi-rinker-info{ width: calc(100% - 75px); } div.yyi-rinker-contents div.yyi-rinker-info { width: calc(100% - 100px); } div.yyi-rinker-contents.yyi-rinker-img-l div.yyi-rinker-info{ width: calc(100% - 125px); } } body div.yyi-rinker-contents ul.yyi-rinker-links li { list-style: none; } body div.yyi-rinker-contents ul.yyi-rinker-links li:before { position: absolute; } div.yyi-rinker-contents p{ padding: 0; } div.yyi-rinker-contents img{ margin-bottom: 0; } /* for Gutengerg */ div.yyi_rinker-gutenberg input.rinkerg-richtext{ width: 300px; }