+
+.more {
+ display: block;
+ margin-top: .5em;
+}
+
+
+section {
+ margin-top: 2em;
+}
+
+
+.tag-box-section {
+ @media screen and (min-width: 768px) {
+ display: inline-block;
+ width: 48%;
+ margin-right: 2%;
+ vertical-align: top;
+
+ .tag-box {
+ display: block;
+ width: 100%;
+ }
+ }
+}
+
+#main-theme {
+ .white-box {
+ position: relative;
+
+ .cite-text, .cite-text-small {
+ display: none;
+
+ @media screen and (min-width: 768px) {
+ display: block;
+ position: absolute;
+ right: 1em;
+ top: 7em;
+ background: #F7F7F7;
+ width: 200px;
+ padding-left: 20px;
+ }
+
+ @media screen and (min-width: 1024px) {
+ width: 340px;
+ padding-left: 80px;
+ }
+ }
+ }
+}
+
+
+.carousel {
+ position: relative;
+ width: 100%;
+ height: 315/975*100vw;
+ overflow: hidden;
+
+ @media screen and (min-width: 62.5em) {
+ width: 975px;
+ height: 315px;
+ }
+
+ .cycle-prev {
+ left: 0;
+ &::after {
+ content: "◀";
+ }
+ }
+ .cycle-next {
+ right: 0;
+ &::after {
+ content: "▶";
+ }
+ }
+
+ .cycle-prev, .cycle-next {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: 15%;
+ z-index: 1000;
+ background: black;
+ color: white;
+ opacity: 0;
+
+ &::after {
+ font-size: 100/975*100vw;
+ display: block;
+ line-height: 315/975*100vw;
+ text-align: center;
+
+ @media screen and (min-width: 62.5em) {
+ font-size: 100px;
+ line-height: 315px;
+ }
+ }
+ &:hover {
+ opacity: .33;
+ }
+ }
+}