/* -----reset----- */ *, ::before, ::after { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } a { text-decoration: none; } li { list-style: none; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; appearance: none; } button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default; } input[type="submit"], input[type="text"], input[type="email"], input[type="password"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } /* -----/reset----- */ :root { /*-----color ライトモード-----*/ --renta-green: #8FC31F; --black: #000; --white: #FFF; --base: #FFF; --background-high: #EEE; --background-medium: #F8F8F8; --background-low: #FAFAFA; --background-ui-green-low: #F2F8E6; --background-ui-orange-low: #FEF2EC; --background-ui-red-low: #FCEDED; --background-modal: rgba(0, 0, 0, 0.60); --text-headline: #202020; --text-body: #303030; --text-caption-high: #646464; --text-caption-medium: #747474; --text-caption-low: #848484; --ui-green: #7EB802; --ui-orange: #F97942; --ui-red: #E34D4D; --text-link-high: #545454; --text-link-medium: #646464; --text-link-low: #848484; --text-link-blue: #2861D4; --border-highest: #C8C8C8; --border-high: #DEDEDE; --border-medium: #EAEAEA; --border-low: #F0F0F0; --arrow-high: #949494; --arrow-low: #BCBCBC; --button-secondary: #D4D4D4; --button-tertiary: #EAEAEA; --button-quarternary: #F0F0F0; --button-free: #F5B8B8; --button-buy: #F09813; --button-increase: #FCBCA0; --button-upgrade: #F09813; --dots-dot-regular: #BCBCBC; --dots-dot-recommend: #22D7B7; --dots-dot-rank: #FBCC27; --dots-dot-cart: #90BCD7; --common-red: #ED4343; --common-orange: #F89247; --common-yellow: #F7B90F; --common-lightgreen: #8CC712; --common-green: #40C346; --common-lightblue: #2DB4EE; --common-blue: #527EF7; --common-purple: #9C55F5; --common-pink: #FA64BA; --common-magenta: #F84790; --common-red-medium: #FBD9D9; --common-orange-medium: #FEE9DA; --common-yellow-medium: #FDF1CF; --common-lightgreen-medium: #E8F4D0; --common-green-medium: #D9F3DA; --common-lightblue-medium: #D5F0FC; --common-blue-medium: #DCE5FD; --common-purple-medium: #EBDDFD; --common-pink-medium: #FEE0F1; --common-magenta-medium: #FEDAE9; --common-red-low: #FCE1E1; --common-orange-low: #FEEEE2; --common-yellow-low: #FEF4D9; --common-lightgreen-low: #EDF6D9; --common-green-low: #E0F5E1; --common-lightblue-low: #DDF3FC; --common-blue-low: #E3EAFE; --common-purple-low: #EFE4FD; --common-pink-low: #FEE6F4; --common-magenta-low: #FEE2ED; /*-----size-----*/ --vw: 1vw; --vh: 1vh; --scrollbar-w: 0; --header-h: 54px; scroll-padding: calc(var(--header-h) + 8px); --side-p: 16px; /*-----font-size-----*/ --size-headline-large: 18px; --size-headline-medium: 16px; --size-headline-small: 14px; --size-body-large: 13px; --size-body-small: 12px; --size-caption-large: 11px; --size-caption-small: 10px; /*-----box-shadow-----*/ --box-shadow-low: 0px 2px 8px 0px rgba(0, 0, 0, 0.08); --box-shadow-high: 0px 2px 12px 0px rgba(0, 0, 0, 0.12); --sheet-shadow-top: 0px -4px 8px 0px rgba(0, 0, 0, 0.04); --sheet-shadow-bottom: 0px 4px 8px 0px rgba(0, 0, 0, 0.04); /*-----parts-----*/ --popup-btn-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.24); --popup-btn-background:rgba(255, 255, 255, 0.9); } .c-darkmode { /*-----color ダークモード-----*/ --renta-green: #8FC31F; --black: #000; --white: #FFF; --base: #000; --background-high: #404040; --background-medium: #282828; --background-low: #1C1C1C; --background-ui-green-low: #F2F8E6; --background-ui-orange-low: #FEF2EC; --background-ui-red-low: #FCEDED; --background-modal: rgba(0, 0, 0, 0.60); --text-headline: #DEDEDE; --text-body: #DCDCDC; --text-caption-high: #A4A4A4; --text-caption-medium: #7B7B7B; --text-caption-low: #6B6B6B; --ui-green: #95DA00; --ui-orange: #F97942; --ui-red: #E34D4D; --text-link-high: #BABABA; --text-link-medium: #A4A4A4; --text-link-low: #6B6B6B; --text-link-blue: #3771E6; --border-highest: #545454; --border-high: #3E3E3E; --border-medium: #282828; --border-low: #222; --arrow-high: #6B6B6B; --arrow-low: #434343; --button-secondary: #5E5E5E; --button-tertiary: #303030; --button-quarternary: #2C2C2C; --button-free: #F5B8B8; --button-buy: #F09813; --button-increase: #FCBCA0; --button-upgrade: #F09813; --dots-dot-regular: #BCBCBC; --dots-dot-recommend: #22D7B7; --dots-dot-rank: #FBCC27; --dots-dot-cart: #90BCD7; --common-red: #ED4343; --common-orange: #F89247; --common-yellow: #F7B90F; --common-lightgreen: #8CC712; --common-green: #40C346; --common-lightblue: #2DB4EE; --common-blue: #527EF7; --common-purple: #9C55F5; --common-pink: #FA64BA; --common-magenta: #F84790; --common-red-medium: #6D1F1F; --common-orange-medium: #724321; --common-yellow-medium: #725507; --common-lightgreen-medium: #405C08; --common-green-medium: #1D5A20; --common-lightblue-medium: #15536D; --common-blue-medium: #263A72; --common-purple-medium: #482771; --common-pink-medium: #732E56; --common-magenta-medium: #722142; --common-red-low: #5F1B1B; --common-orange-low: #633A1C; --common-yellow-low: #634A06; --common-lightgreen-low: #385007; --common-green-low: #1A4E1C; --common-lightblue-low: #12485F; --common-blue-low: #213263; --common-purple-low: #3E2262; --common-pink-low: #64284A; --common-magenta-low: #631C3A; } /* -----共通----- */ html { font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans","Helvetica Neue",Helvetica,Arial,メイリオ,"Meiryo UI",sans-serif; line-height: 1.6; color: var(--text-body); } a { color: var(--text-link-blue); } .clearfix:after { content: ""; display: block; clear: both; } /* PC版表示されていた場合の最適化表示 */ .optimize { display: flex; padding: 4px 16px; align-items: center; gap: 8px; justify-content: space-between; background: var(--background-medium); } .optimize p { font-size: var(--size-body-small); font-weight: bold; line-height: 1.6; } /* PC版表示されていた場合の最適化 */ /* 海外アクセス表示・非表示 */ [data-oversea="1"] .c-oversea_none{ display: none !important; } .c-oversea_block { display: none; } [data-oversea="1"] .c-oversea_block { display: block; } /* 見出し表示上非表示 */ .c-visually_hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Android・iOSアプリ表示・非表示 */ #frame_iosapp .c-app_none, #frame_andapp .c-app_none, #frame_iosapp .c-iosapp_none, #frame_andapp .c-andapp_none { display: none !important; } .c-app_block, .c-app_block, .c-iosapp_block, .c-andapp_block { display: none !important; } #frame_iosapp .c-app_block, #frame_andapp .c-app_block, #frame_iosapp .c-iosapp_block, #frame_andapp .c-andapp_block { display: block !important; } .c-app_flex, .c-app_flex, .c-iosapp_flex, .c-andapp_flex { display: none !important; } #frame_iosapp .c-app_flex, #frame_andapp .c-app_flex, #frame_iosapp .c-iosapp_flex, #frame_andapp .c-andapp_flex { display: flex !important; } /* sp.css 20180502 半角英数字折り返し追加 */ #mainwrap { word-wrap: break-word; } /* -----section----- */ .c-section_large{ margin-top: 32px; } .c-section_medium{ margin-top: 30px; } .c-section_small{ margin-top: 28px; } /* -----bgcolor----- */ .c-section_large.c-bgcolor{ margin-top: 32px; padding: 32px 0 16px; } .c-section_medium.c-bgcolor{ margin-top: 30px; padding: 30px 0 14px; } .c-section_small.c-bgcolor{ margin-top: 28px; padding: 28px 0 12px; } .c-bgcolor_high{ background-color: var(--background-high); } .c-bgcolor_medium{ background-color: var(--background-medium); } .c-bgcolor_low{ background-color: var(--background-low); } .c-bgcolor_ui_green{ background-color: var(--background-ui-green-low); } .c-bgcolor_ui_orange{ background-color: var(--background-ui-orange-low); } .c-bgcolor_ui_red{ background-color: var(--background-ui-red-low); } .c-bgcolor_red{ background-color: var(--common-red-low); } .c-bgcolor_orange{ background-color: var(--common-orange-low); } .c-bgcolor_yellow{ background-color: var(--common-yellow-low); } .c-bgcolor_lightgreen{ background-color: var(--common-lightgreen-low); } .c-bgcolor_green{ background-color: var(--common-green-low); } .c-bgcolor_lightblue{ background-color: var(--common-lightblue-low); } .c-bgcolor_blue{ background-color: var(--common-blue-low); } .c-bgcolor_purple{ background-color: var(--common-purple-low); } .c-bgcolor_pink{ background-color: var(--common-pink-low); } .c-bgcolor_magenta{ background-color: var(--common-magenta-low); } /* -----Headline----- */ .c-headline_large, .c-headline_medium, .c-headline_small, .c-headline_caption { display: flex; align-items: center; color: var(--text-headline); font-weight: bold; } .c-headline_large { font-size: var(--size-headline-large); margin-bottom: 16px; line-height: 1; } .c-headline_medium { font-size: var(--size-headline-medium); margin-bottom: 14px; line-height: 1; } .c-headline_small { font-size: var(--size-headline-small); margin-bottom: 12px; line-height: 1; } .c-headline_caption { font-size: var(--size-body-small); font-weight: normal; margin-top: -6px; margin-bottom: 10px; line-height: 1.6; } .c-headline_txt { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 1.1; padding-right: 0.1em; } .c-headline_dot_regular::before, .c-headline_dot_official::before, .c-headline_dot_recommend::before, .c-headline_dot_free::before, .c-headline_dot_campaign::before, .c-headline_dot_rank::before, .c-headline_dot_cart::before, .c-headline_dot_red::before, .c-headline_dot_orange::before, .c-headline_dot_yellow::before, .c-headline_dot_lightgreen::before, .c-headline_dot_green::before, .c-headline_dot_lightblue::before, .c-headline_dot_blue::before, .c-headline_dot_purple::before, .c-headline_dot_pink::before, .c-headline_dot_magenta::before{ content: ""; display: inline-block; flex-shrink:0; width: 8px; height: 8px; border-radius: 1px; margin-right: 4px; } .c-headline_dot_regular::before { background-color: var(--dots-dot-regular); } .c-headline_dot_official::before { background-color: var(--renta-green); } .c-headline_dot_recommend::before { background-color: var(--dots-dot-recommend); } .c-headline_dot_free::before{ background-color: var(--ui-red); } .c-headline_dot_campaign::before { background-color: var(--ui-orange); } .c-headline_dot_rank::before { background-color: var(--dots-dot-rank); } .c-headline_dot_cart::before { background-color: var(--dots-dot-cart); } .c-headline_dot_red::before { background-color: var(--common-red); } .c-headline_dot_orange::before { background-color: var(--common-orange); } .c-headline_dot_yellow::before { background-color: var(--common-yellow); } .c-headline_dot_lightgreen::before { background-color: var(--common-lightgreen); } .c-headline_dot_green::before { background-color: var(--common-green); } .c-headline_dot_lightblue::before { background-color: var(--common-lightblue); } .c-headline_dot_blue::before { background-color: var(--common-blue); } .c-headline_dot_purple::before { background-color: var(--common-purple); } .c-headline_dot_pink::before { background-color: var(--common-pink); } .c-headline_dot_magenta::before { background-color: var(--common-magenta); } .c-headline_viewmore::after { content: ""; display: block; height: 4px; margin: 0 4px; flex-grow: 1; order: 1; background-size: auto auto; background-image: repeating-linear-gradient(90deg, transparent, transparent 4px, var(--border-high) 4px, var(--border-high) 8px ); } .c-headline_viewmore_icon { display: block; line-height: 0; order: 2; margin: -14px; padding: 14px; } .c-headline_large .c-headline_viewmore_icon img { width: 22px; height: 22px; } .c-headline_medium .c-headline_viewmore_icon img { width: 20px; height: 20px; } .c-headline_small .c-headline_viewmore_icon img { width: 18px; height: 18px; } .c-headline_popup { position: relative; cursor: pointer; margin: -16px 0; padding: 16px 20px 16px 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .c-headline_popup::after { content: ""; display: block; width: 8px; height: 8px; position: absolute; top: 50%; right: 3px; margin-top: -4px; background: url("/pub/img/icon/popupbutton_arrow.svg") no-repeat center / contain; } .c-headline_popup_btnwrap { display: none; position: absolute; top: calc(100% - 12px); right: 0; z-index: 2; border-radius: 8px; background: var(--popup-btn-background); box-shadow: var(--popup-btn-shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateZ(0); overflow: hidden; } .c-headline_popup.on .c-headline_popup_btnwrap { display: block; } .c-headline_popup_btn { display: block; padding: 8px 10px; color: var(--text-body); font-size: 13px; font-weight: bold; line-height: 1.6; cursor: pointer; } .c-headline_popup_btn:not(:last-of-type) { border-bottom: solid 1px var(--border-high); } .c-headline_img_section{ margin-top: 66px; margin-bottom: 34px; padding-bottom: 32px; } .c-headline_img_section > .c-section_large:first-of-type, .c-headline_img_section > .c-section_medium:first-of-type, .c-headline_img_section > .c-section_small:first-of-type{ margin-top: 0; } .c-headline_img_section_rank{ background-color: #FFFCEC; } .c-headline_img_section_precede { background: #F2FCF2; } .c-headline_img{ margin-bottom: 16px; } .c-headline_img_title{ width: calc(100% - 38px); max-width: 305px; } .c-headline_img_section .c-headline_img{ position: relative; margin-bottom: 0; padding-top: 36px; } .c-headline_img_section .c-headline_img_title{ position: absolute; bottom: calc(100% - 20px); } .c-headline_img_viewmore_icon{ position: absolute; right: 0; bottom: calc(100% + 4px); display: block; width: 22px; height: 22px; margin: -14px; padding: 14px; line-height: 0; } .c-headline_img_viewmore_icon img{ width: 100%; } .c-headline_img_section_deepcolor .c-headline_large, .c-headline_img_section_deepcolor .c-headline_medium, .c-headline_img_section_deepcolor .c-headline_small, .c-headline_img_section_deepcolor .c-headline_caption, .c-headline_img_section_deepcolor .c-contents_title, .c-headline_img_section_deepcolor .c-contents_caption, .c-headline_img_section_deepcolor .c-contents_caption .red, .c-headline_img_section_deepcolor .c-textbtn_regular, .c-headline_img_section_deepcolor .c-textbtn_bold{ color: var(--white) !important; } .c-headline_mainpage_wrap{ display: flex; padding: 12px var(--side-p); align-items: center; gap: 16px; position: relative; } .c-headline_mainpage{ display: flex; align-items: center; gap: 8px; color: var(--text-headline); font-size: var(--size-headline-large); font-weight: bold; line-height: 140%; } .c-headline_mainpage_icon{ width: 24px; height: 24px; object-fit: contain; } .c-headline_mainpage_btnwrap{ position: absolute; top: 0; right: var(--side-p); display: flex; align-items: center; height: 100%; } /* -----/Headline----- */ /* -----Text----- */ .c-text_headline_large { font-size: var(--size-headline-large); line-height: 1.4; } .c-text_headline_medium { font-size: var(--size-headline-medium); line-height: 1.4; } .c-text_headline_small { font-size: var(--size-headline-small); line-height: 1.4; } .c-text_body_large { font-size: var(--size-body-large); line-height: 1.6; } .c-text_body_small { font-size: var(--size-body-small); line-height: 1.6; } .c-text_caption_large { font-size: var(--size-caption-large); line-height: 1.6; } .c-text_caption_small { font-size: var(--size-caption-small); line-height: 1.6; } /* -----/Text----- */ /* -----Button----- */ /*---size---*/ .c-btn_small, .c-btn_medium, .c-btn_large { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; min-width: 80px; text-align: center; font-weight: bold; line-height: 1; cursor: pointer; } .c-btn_small:hover, .c-btn_medium:hover, .c-btn_large:hover { text-decoration: none; } .c-btn_small{ height: 30px; padding: 0 8px; border-radius: 16px; font-size: 12px; } .c-btn_medium{ height: 44px; padding: 0 24px; border-radius: 22px; font-size: 14px; } .c-btn_large{ height: 56px; padding: 0 24px; border-radius: 28px; font-size: 16px; } .c-btn_block { display: flex; width: 100%; } /*---type---*/ .c-btn_primary{ background: var(--ui-green); border: none; color: var(--white); } .c-btn_secondary{ background: var(--base); border: solid 2px var(--button-secondary); color: var(--text-body); } .c-btn_teriary, .c-btn_tertiary{ background: var(--button-tertiary); border: none; color: var(--text-body); } .c-btn_quarternary{ background: var(--button-quarternary); border: none; color: var(--text-body); } .c-btn_free{ background: var(--base); border: solid 2px var(--button-free); color: var(--ui-red); } .c-btn_buy{ background: var(--button-buy); border: none; color: var(--white); } .c-btn_increase{ background: var(--base); border: solid 2px var(--button-increase); color: var(--ui-orange); } .c-btn_upgrade{ background: var(--button-upgrade); border: none; color: var(--white); } .c-btn_delete{ background: var(--ui-red); border: none; color: var(--white); } .c-btn_close-black{ background: transparent; border: solid 2px var(--button-secondary); color: var(--text-body); } .c-btn_close-white{ background: transparent; border: solid 2px var(--white); color: var(--white); } .c-btn_close-black::before, .c-btn_close-white::before{ content: ""; display: inline-block; margin-right: 2px; } .c-btn_close-black::before{ background: url("/pub/img/icon/close_black.svg") no-repeat center / contain; } .c-btn_close-white::before{ background: url("/pub/img/icon/close_white.svg") no-repeat center / contain; } .c-btn_small.c-btn_close-black::before, .c-btn_small.c-btn_close-white::before{ width: 10px; height: 10px; } .c-btn_medium.c-btn_close-black::before, .c-btn_medium.c-btn_close-white::before{ width: 11px; height: 11px; } .c-btn_large.c-btn_close-black::before, .c-btn_large.c-btn_close-white::before{ width: 12px; height: 12px; } /*試し読みボタンn巻無料出し分け*/ [data-sample="無料"] span { display: inline; } [data-sample="試し読み"] span { display: none; } /*---style---*/ .c-btn_arrow::after{ content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_low.svg") no-repeat center / contain; } .c-btn_primary.c-btn_arrow::after{ background-image: url("/pub/img/icon/arrow/arrow_white.svg"); opacity: 0.72; } .c-btn_small.c-btn_arrow::after{ width: 8px; height: 11px; } .c-btn_medium.c-btn_arrow::after{ width: 9px; height: 12px; } .c-btn_large.c-btn_arrow::after{ width: 11px; height: 14px; } .c-btn_viewmore::after{ content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_viewmore_low.svg") no-repeat center / contain; transition: 0.3s ease; } .c-btn_primary.c-btn_viewmore::after{ background-image: url("/pub/img/icon/arrow/arrow_viewmore_white.svg"); opacity: 0.72; } .c-btn_small.c-btn_viewmore::after{ width: 12px; height: 9px; } .c-btn_medium.c-btn_viewmore::after{ width: 14px; height: 10px; } .c-btn_large.c-btn_viewmore::after{ width: 17px; height: 12px; } /*open用*/ .on.c-btn_viewmore::after { transform: rotate(180deg); } /* -----/Button----- */ /* -----Text Button----- */ .c-textbtn_wrap{ text-align: left; } .c-textbtn_wrap_right{ text-align: right; } .c-textbtn_small{ font-size: 12px; } .c-textbtn_medium{ font-size: 14px; } .c-textbtn_large{ font-size: 16px; } .c-textbtn_regular, .c-textbtn_bold { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; color: var(--text-link-medium); } .c-textbtn_regular::after, .c-textbtn_bold::after { content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_low.svg") no-repeat center / contain; transition: 0.3s ease; } .c-textbtn_small.c-textbtn_regular::after, .c-textbtn_small.c-textbtn_bold::after { width: 8px; height: 11px; } .c-textbtn_medium.c-textbtn_regular::after, .c-textbtn_medium.c-textbtn_bold::after { width: 9px; height: 12px; } .c-textbtn_large.c-textbtn_regular::after, .c-textbtn_large.c-textbtn_bold::after { width: 11px; height: 14px; } .c-textbtn_regular{ font-weight: normal; } .c-textbtn_bold{ font-weight: bold; } .c-textbtn_viewmore_regular, .c-textbtn_viewmore_bold { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; color: var(--text-link-medium); } .c-textbtn_viewmore_regular::after, .c-textbtn_viewmore_bold::after { content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_viewmore_low.svg") no-repeat center / contain; transition: 0.3s ease; } /*open用*/ .on.c-textbtn_viewmore_regular::after, .on.c-textbtn_viewmore_bold::after { transform: rotate(180deg); } .c-textbtn_small.c-textbtn_viewmore_regular::after, .c-textbtn_small.c-textbtn_viewmore_bold::after { width: 12px; height: 9px; } .c-textbtn_medium.c-textbtn_viewmore_regular::after, .c-textbtn_medium.c-textbtn_viewmore_bold::after { width: 14px; height: 10px; } .c-textbtn_large.c-textbtn_viewmore_regular::after, .c-textbtn_large.c-textbtn_viewmore_bold::after { width: 17px; height: 12px; } .c-textbtn_viewmore_regular{ font-weight: normal; } .c-textbtn_viewmore_bold{ font-weight: bold; } .c-textbtn_green.c-textbtn_regular::after, .c-textbtn_green.c-textbtn_bold::after, .c-textbtn_textgreen.c-textbtn_regular::after, .c-textbtn_textgreen.c-textbtn_bold::after { background: url("/pub/img/icon/arrow/arrow_uigreen.svg") no-repeat center / contain; } .c-textbtn_green.c-textbtn_viewmore_regular::after, .c-textbtn_green.c-textbtn_viewmore_bold::after, .c-textbtn_textgreen.c-textbtn_viewmore_regular::after, .c-textbtn_textgreen.c-textbtn_viewmore_bold::after { background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center / contain; } .c-textbtn_textgreen.c-textbtn_regular, .c-textbtn_textgreen.c-textbtn_bold, .c-textbtn_textgreen.c-textbtn_viewmore_regular, .c-textbtn_textgreen.c-textbtn_viewmore_bold { color: var(--ui-green); } /* -----/Text Button----- */ /* -----Link list----- */ .c-linklist_text { display: flex; flex-wrap: wrap; } .c-linklist_text li { width: 100%; margin-bottom: 16px; } .c-linklist_text li a { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; color: var(--text-link-medium); font-size: 12px; font-weight: bold; line-height: 1.6; margin: -8px; padding: 8px; } .c-linklist_text li a::after { width: 8px; height: 11px; content: ""; display: inline-block; margin-left: 4px; background: url("/pub/img/icon/arrow/arrow_low.svg") no-repeat center / contain; } .c-linklist_btn{ display: flex; flex-wrap: wrap; margin: 0 -2px; } .c-linklist_btn li{ width: calc(100% / 3 - 4px); margin: 0 2px 8px; } .c-linklist_btn li a{ display: flex; height: 100%; box-sizing: border-box; padding: 8px; justify-content: center; align-items: center; border-radius: 4px; background: var(--button-quarternary, #F4F4F4); text-align: center; color: var(--text-body); font-size: 12px; font-weight: bold; line-height: 120%; } .c-linklist_label{ display: flex; flex-wrap: wrap; } .c-linklist_label li{ width: calc(100% / 3 - 8px / 3); margin-right: 4px; margin-bottom: 8px; } .c-linklist_label li:nth-child(3n){ margin-right: 0; } .c-linklist_label li a{ display: block; box-sizing: border-box; padding: 8px 16px; text-align: center; line-height: 0; } .c-linklist_label li a img{ width: 100%; max-width: 120px; } /* -----Banner----- */ .c-banner_wrap{ line-height: 0; } .c-banner_wrap:not(:last-of-type) { margin-bottom: 16px; } .c-banner_pc{ display: none; width: 100%; max-width: max-content; margin: 0 auto; border-radius: 8px; } .c-banner_sp{ display: block; width: 100%; border-radius: 8px; } .c-bannerlist_wrap{ font-size: 0; } .c-bannerlist{ display: inline-block; width: calc(100%/2 - 8px/2); margin-right: 8px; margin-bottom: 16px; } .c-bannerlist:nth-child(2n){ margin-right: 0; } .c-bannerlist_img{ width: 100%; border-radius: 8px; margin-bottom: 4px; } .c-bannerlist_title{ font-size: 12px; color: var(--text-body); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } /* -----/Banner----- */ /* -----Page Base----- */ .c-innerwrap{ margin-left: 0; margin-right: 0; box-sizing: border-box; } .c-innerwrap_side { margin-left: 0; margin-right: 0; padding-left: var(--side-p) !important; padding-right: var(--side-p) !important; box-sizing: border-box; } .c-overbg { margin-left: 0; margin-right: 0; box-sizing: border-box; } .c-sidep_none{ margin-left: calc(0px - var(--side-p)); margin-right: calc(0px - var(--side-p)); } /* -----/Page Base----- */ /*------popup------*/ .c-popup_small, .c-popup_large { position: fixed; background: var(--base); top: 50%; left: 50%; z-index: 701; border-radius: 24px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: opacity 0.3s; visibility: hidden; opacity: 0; font-size: 0; } #frame_iosapp .c-popup_small, #frame_iosapp .c-popup_large { -webkit-transform: translate(-50%, calc(-50% - 48px)); transform: translate(-50%, calc(-50% - 48px)); } .c-popup_on { visibility: visible; opacity: 1; } .c-popup_small { width: 80%; max-width: 400px; } .c-popup_large { width: 86%; max-width: 700px; } .c-popup_small .c-popup_innerwrap, .c-popup_small .c-popup_scrollwrap{ max-height: calc(var(--vh)* 100 - 120px); } .c-popup_large, .c-popup_large .c-popup_innerwrap, .c-popup_large .c-popup_scrollwrap{ max-height: 560px; max-height: calc(var(--vh)* 100 - 120px); } #frame_iosapp .c-popup_small .c-popup_innerwrap, #frame_iosapp .c-popup_small .c-popup_scrollwrap, #frame_iosapp .c-popup_large, #frame_iosapp .c-popup_large .c-popup_innerwrap, #frame_iosapp .c-popup_large .c-popup_scrollwrap{ max-height: calc(var(--vh)* 100 - 170px); } @media screen and (max-height: 680px){ .c-popup_small { max-width: calc(var(--vh)* 75 - 120px); min-width: 300px; } .c-popup_large, .c-popup_large .c-popup_innerwrap, .c-popup_large .c-popup_scrollwrap{ max-height: calc(var(--vh)* 100 - 120px); } #frame_iosapp .c-popup_small .c-popup_innerwrap, #frame_iosapp .c-popup_small .c-popup_scrollwrap, #frame_iosapp .c-popup_large, #frame_iosapp .c-popup_large .c-popup_innerwrap, #frame_iosapp .c-popup_large .c-popup_scrollwrap{ max-height: calc(var(--vh)* 100 - 170px); } } .c-popup_small .c-popup_scrollwrap::-webkit-scrollbar, .c-popup_large .c-popup_scrollwrap::-webkit-scrollbar { display: none; } .c-popup_innerwrap{ overflow: hidden; border-radius: 24px; } .c-popup_scrollwrap{ overflow-y: auto; } .c-popup_contens_banner img{ width: 100%; } .c-popup_contens_regular{ padding: 32px; } .c-popup_contens_hl{ margin-bottom: 24px; color: var(--text-headline); text-align: center; font-size: var(--size-headline-small); font-weight: bold; } .c-popup_contens_desc, .c-popup_contens_desc_center{ color: var(--text-body); font-size: var(--size-body-small); } .red.c-popup_contens_desc, .red.c-popup_contens_desc_center{ color: var(--ui-red); } .c-popup_contens_desc_center{ text-align: center; } .c-popup_illust_wrap{ margin-bottom: 24px; padding: 24px; text-align: center; background-color: var(--background-medium); border-radius: 16px; } .c-popup_illust_fullwidth_wrap { overflow: hidden; margin-bottom: 24px; text-align: center; border-radius: 16px; } .c-popup_illust_fullwidth { width: 100%; } .c-popup_illust{ width: 92px; } .c-popup_close { display: block; width: auto; position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%); } .c-popup_dialog_wrap{ display: flex; border-top: solid 1px var(--border-highest); } .c-popup_dialog_btn{ width: 100%; padding: 20px; text-align: center; color: var(--text-body); font-size: 14px; font-weight: bold; } .c-popup_dialog_btn:nth-child(n+2){ border-left: solid 1px var(--border-highest); } /*------sheet------*/ .c-sheet { position: fixed; background: var(--base); bottom: 0; width: 100%; z-index: 701; font-size: 0; border-radius: 16px 16px 0 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: max-height 0.3s; visibility: hidden; height: auto; max-height: 0; opacity: 0; } .c-sheet.c-sheet_large { height: 100%; } .c-sheet_on { visibility: visible; max-height: calc(var(--vh) * 100 - 32px); opacity: 1; } .c-sheet_innerwrap, .c-sheet_scrollwrap{ height: 100%; max-height: calc(var(--vh) * 100 - 32px); } .c-sheet_innerwrap{ overflow: hidden; border-radius: 16px 16px 0 0; position: relative; } .c-sheet_scrollwrap{ overflow-y: auto; } body:not(#frame_1) .c-sheet_scrollwrap::-webkit-scrollbar { display: none; } .c-sheet_header{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 48px; display: flex; background: var(--base); border: 1px solid var(--border-medium); } .c-sheet_header + .c-sheet_contens{ padding-top: 48px; } .c-sheet_header_headline{ padding: 16px; color: var(--text-body); font-size: var(--size-headline-small); font-weight: bold; line-height: 100%; } .c-sheet_header_closetxt, .c-sheet_header_closeicon{ position: absolute; top: 0; right: 0; padding: 16px; color: var(--text-caption-high); font-size: var(--size-body-large); font-weight: bold; line-height: 100%; } .c-sheet_header_closeicon::before{ content: ""; display: inline-block; width: 14px; height: 14px; background: url("/pub/img/icon/close_black.svg") no-repeat center / contain; } .c-sheet_contens{ padding-bottom: 88px; } #frame_iosapp .c-sheet_contens{ padding-bottom: calc(88px + 48px); } .c-sheet_close_sp { display: block; width: 100%; height: 40px; position: absolute; bottom: 0; left: 0; text-align: center; background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 100%); } #frame_iosapp .c-sheet_close_sp { height: calc(40px + 48px); } .c-sheet_close_sp a { display: inline-block; padding: 13px; background: var(--base); border-radius: 50%; box-shadow: var(--box-shadow-high); position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } #frame_iosapp .c-sheet_close_sp a { bottom: calc(32px + 48px); } .c-sheet_close_sp img { height: 16px; } .c-sheet_close_pc { display: none; } .c-backScreen { height: 100%; width: 100%; position: fixed; top: 0; left: 0; visibility: hidden; opacity: 0; transition: 0.2s; background-color: rgba(0, 0, 0, 0.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transform: translateZ(0); text-align: center; font-size: 0; z-index: 700; cursor: pointer; } .c-backScreen:not([onclick]), .c-backScreen[onclick=""] { cursor: auto; } .c-onScreen { visibility: visible; opacity: 1; } body.c-scrollstop{ overflow: hidden; margin-right: var(--scrollbar-w); } .top_header_wrap.c-scrollstop{ padding-right: var(--scrollbar-w); } /*------Slider--------*/ /*.c-slidelistは.c-slider_contentsに移行したら削除する*/ .c-slider_contents_wrap, .c-slider_adlist_wrap, .c-slidelist_wrap{ position: relative; margin-bottom: 16px; } .c-slider_contents, .c-slider_adlist, .c-slider_adlist_checked, .c-slidelist { position: unset !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-bottom: -1px; padding-bottom: 1px !important; } .c-slider_contents .swiper-button-prev, .c-slider_contents .swiper-button-next, .c-slider_adlist .swiper-button-prev, .c-slider_adlist .swiper-button-next, .c-slider_adlist_checked .swiper-button-prev, .c-slider_adlist_checked .swiper-button-next, .c-slidelist .swiper-button-prev, .c-slidelist .swiper-button-next { background: var(--white); border-radius: 50%; width: 32px; height: 32px; padding: 0; margin-top: -16px; font-size: 0; opacity: 1; box-shadow: var(--box-shadow-high); } .c-slider_contents .swiper-button-prev, .c-slider_adlist .swiper-button-prev, .c-slider_adlist_checked .swiper-button-prev, .c-slidelist .swiper-button-prev, .swiper-rtl .swiper-button-next { left: -16px; right: auto } .c-slider_contents .swiper-button-next, .c-slider_adlist .swiper-button-next, .c-slider_adlist_checked .swiper-button-next, .c-slidelist .swiper-button-next, .swiper-rtl .swiper-button-prev { right: -16px; left: auto } .c-slider_contents .swiper-button-prev::after, .c-slider_contents .swiper-button-next::after, .c-slider_adlist .swiper-button-prev::after, .c-slider_adlist .swiper-button-next::after, .c-slider_adlist_checked .swiper-button-prev::after, .c-slider_adlist_checked .swiper-button-next::after, .c-slidelist .swiper-button-prev::after, .c-slidelist .swiper-button-next::after{ display: block; content: url("/pub/img/icon/arrow/arrow_uigreen.svg"); width: 12px; height: 16px; position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -6px; font-size: 0; } .c-slider_contents .swiper-button-prev::after, .c-slider_adlist .swiper-button-prev::after, .c-slider_adlist_checked .swiper-button-prev::after, .c-slidelist .swiper-button-prev::after{ transform: rotate(180deg); } .c-slider_contents .swiper-button-prev, .c-slider_contents .swiper-button-next, .c-slider_adlist .swiper-button-prev, .c-slider_adlist .swiper-button-next, .c-slider_adlist_checked .swiper-button-prev, .c-slider_adlist_checked .swiper-button-next, .c-slidelist .swiper-button-prev, .c-slidelist .swiper-button-next { display: none; } .c-slidelist .swiper-slide { width: 108px; padding-right: 8px; } /* スライドサイズ */ .c-slider_change_primary .swiper-slide, .c-slider_contents_primary .swiper-slide { width: 109px; text-align: center; padding-right: 8px; } .c-slider_change_secondary .swiper-slide, .c-slider_contents_secondary .swiper-slide { width: 92px; text-align: center; padding-right: 8px; } .c-slider_adlist .swiper-slide, .c-slider_adlist_checked .swiper-slide { width: 280px; font-size: 0; padding-right: 12px; } .c-slider_adlist_link { display: flex; align-items: center; padding: 8px; background: #fff; gap: 0 4px; } .c-slider_adlist_inner { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-high); box-sizing: border-box; } .c-slider_adlist .swiper-wrapper, .c-slider_adlist_checked .swiper-wrapper { align-items: flex-end; } /*------Contents--------*/ .c-contents_list_wrap{ display: flex; flex-wrap: wrap; gap: 16px 8px; margin-bottom: 16px; } .c-contents_list{ width: calc(100%/3 - 16px/3); text-align: center; } .c-contents_coverwrap{ overflow: hidden; display: block; padding-top: 142%; position: relative; border-radius: 2px; margin-bottom: 4px; } .c-contents_coverwrap::after{ content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 2px; border: 1px solid rgba(0, 0, 0, 0.08); box-sizing: border-box; z-index: 2; } .c-contents_cover{ display: block; width: 100%; height: 100%; margin-left: 0; position: absolute; top: 0; left: 50%; transform: translateX(-50%); object-fit: contain; } /*スタイル統一後に削除*/ .cover_imgwrap img, .simpleTopics-cover_imgwrap img{ width: 100% !important; object-fit: contain !important; } .c-contents_coverwrap .rental_label{ display: block; position: absolute; width: 42%; height: auto; margin: 0; top: 0; left: 0; transform: none; z-index: 1; } .c-contents_label_wrap{ position: relative; padding-top: 2px; } .c-contents_label_orign, .c-contents_label_first, .c-contents_label_type{ position: absolute; z-index: 2; } .c-contents_label_orign[data-orign="1"]{ top: 0; left: -1px; width: 44.03%; padding-top: 12.84%; border-radius: 20vw 70vw 70vw 20vw; border: solid 1px rgba(0, 0, 0, 0.1); overflow: hidden; } .c-contents_label_orign[data-orign="1"]::before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.95) url("/pub/img/icon/label_original.svg") no-repeat center / contain; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transform: translateZ(0); } .c-contents_label_first{ bottom: 2px; right: 2px; width: 27.52%; padding-top: 27.52%; } .c-contents_label_first[data-first="先行配信"]{ background: url("/pub/img/icon/icon_first.svg") no-repeat center / contain; } .c-contents_label_first[data-first="独占先行配信"]{ background: url("/pub/img/icon/icon_exclusive.svg") no-repeat center / contain; } .c-contents_label_type{ bottom: 4px; left: 4px; padding: 2px; border-radius: 2px; background: rgba(0, 0, 0, 0.60); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transform: translateZ(0); color: var(--white); font-size: 8.5px; font-weight: bold; line-height: 1.1; letter-spacing: -0.2px; } .c-contents_label_new{ display: inline-block; width: 1.1em; height: 1.1em; margin-top: -0.2em; margin-right: 4px; vertical-align: middle; } .c-contents_label_new[data-new="new"]{ background: url("/pub/img/icon/icon_trim_new.svg") no-repeat center / contain; } .c-contents_label_new[data-new="up"]{ background: url("/pub/img/icon/icon_trim_up.svg") no-repeat center / contain; } .c-contents_label_orign[data-orign=""], .c-contents_label_first[data-first=""], .c-contents_label_type[data-type=""], .c-contents_label_new[data-new=""], .contents_ranknumber .c-contents_label_new{ display: none; } .c-contents_title{ font-size: 12px; font-weight: normal; text-align: left; line-height: 1.4; color: var(--text-body); margin-bottom: 2px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .c-contents_caption{ font-size: 10px; font-weight: normal; text-align: left; line-height: 1.4; color: var(--text-caption-medium); margin-bottom: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .c-contents_caption .red{ color: var(--ui-red); } .c-contents_rankdesc{ display: flex; align-items: center; flex-wrap: wrap; position: relative; min-height: 22px; padding-left: 20px; } .c-contents_ranknumber{ width: 22px; height: 22px; line-height: 0; position: absolute; top: 50%; left: -2px; margin-top: -11px; } .c-contents_ranknumber img{ width: 100%; } .c-contents_rankdesc .c-contents_title:last-child, .c-contents_rankdesc .c-contents_caption:last-child{ margin-bottom: 0; } .c-contents_review{ font-size: 12px; font-weight: bold; text-align: left; line-height: 1.4; color: var(--text-body); margin-bottom: 4px; padding-left: 16px; position: relative; } .c-contents_caption + .c-contents_review{ margin-top: -2px; } .c-contents_review::before{ content: ""; display: block; background: url("/pub/img/icon/icon_reviewstar.svg") no-repeat center center / contain; width: 12px; height: 12px; position: absolute; top: 50%; left: 0; margin-top: -6px; } /*------balloonComment------*/ .c-contents_balloon{ display: flex; align-items: center; justify-content: center; height: 2.4em; margin-bottom: 5px; padding: 5px 4px; border-radius: 4px; position: relative; font-size: 12px; } .c-contents_balloon p{ max-width: 110px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--white); font-size: 13px; font-weight: bold; line-height: 120%; text-align: center; } .c-contents_balloon .c-svg_arrow_horn{ width: 17px; height: 5px; position: absolute; bottom: -4.5px; left: calc(50% - 8.5px); } .c-contents_balloon .c-svg_arrow_horn .st0{ stroke-width:0px; } .c-contents_balloon_red{ background-color: var(--common-red); } .c-contents_balloon_red .c-svg_arrow_horn .st0{ fill: var(--common-red); } .c-contents_balloon_orange{ background-color: var(--common-orange); } .c-contents_balloon_orange .c-svg_arrow_horn .st0{ fill: var(--common-orange); } .c-contents_balloon_yellow{ background-color: var(--common-yellow); } .c-contents_balloon_yellow .c-svg_arrow_horn .st0{ fill: var(--common-yellow); } .c-contents_balloon_lightgreen{ background-color: var(--common-lightgreen); } .c-contents_balloon_lightgreen .c-svg_arrow_horn .st0{ fill: var(--common-lightgreen); } .c-contents_balloon_green{ background-color: var(--common-green); } .c-contents_balloon_green .c-svg_arrow_horn .st0{ fill: var(--common-green); } .c-contents_balloon_lightblue{ background-color: var(--common-lightblue); } .c-contents_balloon_lightblue .c-svg_arrow_horn .st0{ fill: var(--common-lightblue); } .c-contents_balloon_blue{ background-color: var(--common-blue); } .c-contents_balloon_blue .c-svg_arrow_horn .st0{ fill: var(--common-blue); } .c-contents_balloon_purple{ background-color: var(--common-purple); } .c-contents_balloon_purple .c-svg_arrow_horn .st0{ fill: var(--common-purple); } .c-contents_balloon_pink{ background-color: var(--common-pink); } .c-contents_balloon_pink .c-svg_arrow_horn .st0{ fill: var(--common-pink); } .c-contents_balloon_magenta{ background-color: var(--common-magenta); } .c-contents_balloon_magenta .c-svg_arrow_horn .st0{ fill: var(--common-magenta); } .c-contents_balloon_grey{ background-color: var(--text-caption-low); } .c-contents_balloon_grey .c-svg_arrow_horn .st0{ fill: var(--text-caption-low); } .c-contents_balloon_red_low{ background-color: var(--common-red-medium); } .c-contents_balloon_red_low .c-svg_arrow_horn .st0{ fill: var(--common-red-medium); } .c-contents_balloon_red_low p{ color: var(--common-red); } .c-contents_balloon_orange_low{ background-color: var(--common-orange-medium); } .c-contents_balloon_orange_low .c-svg_arrow_horn .st0{ fill: var(--common-orange-medium); } .c-contents_balloon_orange_low p{ color: var(--common-orange); } .c-contents_balloon_yellow_low{ background-color: var(--common-yellow-medium); } .c-contents_balloon_yellow_low .c-svg_arrow_horn .st0{ fill: var(--common-yellow-medium); } .c-contents_balloon_yellow_low p{ color: var(--common-yellow); } .c-contents_balloon_lightgreen_low{ background-color: var(--common-lightgreen-medium); } .c-contents_balloon_lightgreen_low .c-svg_arrow_horn .st0{ fill: var(--common-lightgreen-medium); } .c-contents_balloon_lightgreen_low p{ color: var(--common-lightgreen); } .c-contents_balloon_green_low{ background-color: var(--common-green-medium); } .c-contents_balloon_green_low .c-svg_arrow_horn .st0{ fill: var(--common-green-medium); } .c-contents_balloon_green_low p{ color: var(--common-green); } .c-contents_balloon_lightblue_low{ background-color: var(--common-lightblue-medium); } .c-contents_balloon_lightblue_low .c-svg_arrow_horn .st0{ fill: var(--common-lightblue-medium); } .c-contents_balloon_lightblue_low p{ color: var(--common-lightblue); } .c-contents_balloon_blue_low{ background-color: var(--common-blue-medium); } .c-contents_balloon_blue_low .c-svg_arrow_horn .st0{ fill: var(--common-blue-medium); } .c-contents_balloon_blue_low p{ color: var(--common-blue); } .c-contents_balloon_purple_low{ background-color: var(--common-purple-medium); } .c-contents_balloon_purple_low .c-svg_arrow_horn .st0{ fill: var(--common-purple-medium); } .c-contents_balloon_purple_low p{ color: var(--common-purple); } .c-contents_balloon_pink_low{ background-color: var(--common-pink-medium); } .c-contents_balloon_pink_low .c-svg_arrow_horn .st0{ fill: var(--common-pink-medium); } .c-contents_balloon_pink_low p{ color: var(--common-pink); } .c-contents_balloon_magenta_low{ background-color: var(--common-magenta-medium); } .c-contents_balloon_magenta_low .c-svg_arrow_horn .st0{ fill: var(--common-magenta-medium); } .c-contents_balloon_magenta_low p{ color: var(--common-magenta); } .c-contents_balloon_grey_low{ background-color: var(--border-high); } .c-contents_balloon_grey_low .c-svg_arrow_horn .st0{ fill: var(--border-high); } .c-contents_balloon_grey_low p{ color: var(--text-caption-high); } /*------adlist------*/ .c-adlist_section { padding: 24px 0 32px; background-color: #FFF9EB; } .c-adlist_link { display: block; position: relative; line-height: 0; } .c-adlist_btn { display: flex; align-items: center; justify-content: center; height: 34px; } .c-adlist_text { width: calc(100% - 80px); } .c-adlist_title { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 12px; color: var(--text-body); line-height: 1.2; text-align: left; color: var(--text-body); font-weight: bold; } .c-adlist_banner { position: absolute; top: 0; right: 0; z-index: 1; width: 100%; } .c-adlist_load { width: 100%; box-sizing: border-box; background: var(--background-medium); } .c-adlist_img { width: 100%; } /*ジャンル内書影用*/ .c-adlist_cover_link { position: relative; display: block; background: var(--background-medium); } .c-adlist_cover_caption { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); font-size: 12px; font-weight: bold; white-space: nowrap; color: var(--text-body); } .c-slider_adlist_inner .c-contents_cover { position: absolute; top: 38px; left: 50%; transform: translateX(-50%) translateZ(0); -webkit-transform: translateX(-50%) translateZ(0); text-align: center; height: 76%; filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 12%)); } .c-adlist_check_cover { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translateZ(0); -webkit-transform: translate(-50%, -50%) translateZ(0); -ms-transform: translate(-50%, -50%) translateZ(0); text-align: center; height: 76%; filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 12%)); } .c-adlist_caption { font-size: 11px; font-weight: normal; text-align: left; line-height: 1.4; color: var(--text-caption-medium); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top: 4px; } .c-adlist_inner { border-radius: 4px; overflow: hidden; border: 1px solid var(--border-high); box-sizing: border-box; } .c-adlist_fixed { padding: 0 16px 24px; } .c-adlist_fixed_list { margin-bottom: 16px; } .c-oversea_none .c-adlist_link img { width: 100%; } /*------popcard--------*/ .c-popcard, .c-popcard_new{ background: var(--base); padding: 24px 24px 0; border-radius: 16px; box-shadow: var(--box-shadow-high); position: relative; } .c-popcard:after, .c-popcard_new:after { content: ""; display: block; clear: both; } .c-popcard::before, .c-popcard_new::before{ display: block; content: url("/pub/img/icon/popcard_ring_green.svg"); width: 20px; height: 20px; position: absolute; top: -3px; left: -2px; font-size: 0; } .c-popcard_new::before{ content: url("/pub/img/icon/popcard_ring_red.svg"); } .c-popcard_cover{ width: 87px; float: right; margin-left: 16px; margin-bottom: 8px; } .c-popcard_desc_wrap{ margin-bottom: 8px; } .c-popcard_headline{ margin-bottom: 4px; font-size: 11px; font-weight: bold; color: var(--ui-green); } .c-popcard_new .c-popcard_headline{ color: var(--ui-red); } .c-popcard_title{ margin-bottom: 4px; font-size: 14px; font-weight: bold; color: var(--text-headline); overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .c-popcard_title a{ color: var(--text-headline); } .c-popcard_comment{ margin-bottom: 8px; font-size: 12px; color: var(--text-body); } .c-popcard_desc_wrap.close .c-popcard_comment{ overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .c-popcard_desc_bottom{ clear: both; } .c-popcard_desc_wrap.close .c-popcard_desc_bottom{ display: none; } .c-popcard_credit{ margin-bottom: 16px; font-size: 11px; color: var(--text-caption-medium); } .c-popcard_btn_wrap{ margin-bottom: 16px; font-size: 0; } .c-popcard_btn_wrap .c-btn_small{ width: calc(50% - 4px); } .c-popcard_btn_wrap .c-btn_small:first-child{ margin-right: 8px; } .c-popcard_editor, .c-popcard_date{ font-size: 11px; color: var(--text-caption-high); } .c-popcard_editor{ float: left; } .c-popcard_date{ float: right; } .c-popcard_viewmore{ clear: both; height: 26px; margin-top: -8px; position: relative; } .c-popcard_viewmore::after{ display: block; content: url("/pub/img/icon/arrow/arrow_viewmore_low.svg"); width: 12px; height: 9px; position: absolute; top: 50%; left: 50%; margin-top: -4.5px; margin-left: -6px; font-size: 0; } .c-popcard_viewmore.on::after{ transform: rotate(180deg); } /*------selectbox--------*/ .c-selectbox_wrap { margin: -4px 0 12px; } .c-selectbox { display: inline-block; position: relative; } .c-selectbox select { -webkit-appearance: none; -moz-appearance: none; width: auto; height: calc(1.6em + 4px); padding: 2px 18px 2px 6px; background: #fff; border: solid 1px var(--border-high); border-radius: 4px; appearance: none; font-size: 12px; color: var(--text-link-high); cursor: pointer; } .c-selectbox:after { position: absolute; content: ''; top: calc(50% - 6px); right: 6px; width: 12px; height: 12px; background: url("/pub/img/icon/arrow/arrow_viewmore_low.svg") no-repeat center / contain; pointer-events: none; } /*------localnavi--------*/ .c-slider_localnavi{ display: inline-block; max-width: 100%; margin-top: 12px; box-sizing: border-box; } .c-localnavi{ box-sizing: border-box; background: var(--button-quarternary); border-radius: 4px; } .c-localnavi_list{ width: auto !important; background: var(--button-quarternary); box-sizing: border-box; border: 1px solid var(--border-high); } .c-localnavi_list_current{ background: var(--base); } .c-localnavi_list_current a { pointer-events: none; } .c-localnavi_list:not(:first-child){ border-left: none; } .c-localnavi_list:first-child{ border-radius: 4px 0 0 4px; } .c-localnavi_list:last-child{ border-radius: 0 4px 4px 0; } .c-localnavi_list a{ display: flex; padding: 6px 8px; justify-content: center; align-items: center; gap: 2px; } .c-localnavi_list a img{ width: 12px; height: auto; } .c-localnavi_list a span{ color: var(--text-caption-high); font-size: var(--size-caption-large); font-weight: bold; line-height: 160%; } /*------Tab middle--------*/ .c-tab_middle{ display: flex; align-items: center; justify-content: space-around; padding: 0 var(--side-p); border-bottom: solid 1px var(--border-high); } .c-tab_middle li{ display: flex; align-items: center; font-size: var(--size-body-large); line-height: 1.6; } .c-tab_middle li .c-tab_middle_btn{ display: flex; padding: 6px 0px 10px; justify-content: center; align-items: center; align-self: stretch; font-weight: normal; cursor: pointer; color: var(--text-headline); text-align: center; font-size: var(--size-headline-small); font-weight: bold; line-height: 140%; position: relative; } .c-tab_middle li .c-tab_middle_btn span{ color: var(--text-headline); font-size: var(--size-body-large); font-weight: normal; line-height: 160%; } .c-tab_middle li .c-tab_middle_btn.c-tab_middle_current::after{ content: ""; display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--ui-green); position: absolute; left: 0; bottom: 0; } /*------Tab small--------*/ .c-tab_small{ display: flex; align-items: center; margin-left: -8px; } .c-tab_small li{ display: flex; align-items: center; font-size: var(--size-body-large); line-height: 1.6; } .c-tab_small li:not(:first-child)::before{ content: ""; display: block; width: 1px; height: 1em; background-color: var(--border-high); } .c-tab_small li .c-tab_small_btn{ display: block; appearance: none; border: none; background-color: transparent; padding: 8px; color: var(--text-caption-low); font-weight: normal; cursor: pointer; } .c-tab_small li .c-tab_small_btn.c-tab_small_current{ color: var(--text-body); font-weight: bold; } .c-headline_mainpage_wrap .c-tab_small li .c-tab_small_btn.c-tab_small_current{ color: var(--text-caption-high); } /*------Tab icon--------*/ .c-tab_icon{ display: flex; align-items: center; margin-right: -8px; } .c-tab_icon li{ display: flex; align-items: center; font-size: var(--size-body-large); line-height: 1.6; } .c-tab_icon li:not(:first-child)::before{ content: ""; display: block; width: 1px; height: 1em; background-color: var(--border-high); } .c-tab_icon li .c-tab_icon_btn{ display: block; width: 20px; height: 20px; padding: 8px; color: var(--text-caption-low); font-weight: normal; background: no-repeat center center/ 20px 20px; cursor: pointer; } .c-sort_filter_wrap{ display: flex; justify-content: space-between; align-items: center; gap: 12px; } .c-sort_filter_left{ display: flex; align-items: center; } .c-sort_filter_right{ display: flex; align-items: center; } /*------Pager--------*/ .c-pager_wrap{ display: flex; justify-content: space-between; align-items: center; align-self: stretch; padding: 6px var(--side-p); } .c-pager_select{ display: inline-block; min-width: 70px; padding: 2px 24px 2px 8px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--border-high); -moz-appearance: none; -webkit-appearance: none; appearance: none; color: var(--text-headline); font-size: var(--size-body-large); font-weight: 600; line-height: 160%; background: url("/pub/img/icon/arrow/arrow_viewmore_low.svg") no-repeat right 8px center / 14px 10px; } .c-pager_prev, .c-pager_next{ display: flex; padding: 6px 0px; align-items: center; gap: 2px; color: var(--text-body); font-size: var(--size-body-large,); } .c-pager_prev::before, .c-pager_next::after{ content: ""; display: block; width: 9px; height: 12px; background: url("/pub/img/icon/arrow/arrow_high.svg") no-repeat center / contain; } .c-pager_prev::before{ transform: rotate(180deg); } .c-pager_prev[data-pagerflag="1"], .c-pager_next[data-pagerflag="1"]{ opacity: 0.4; cursor: default; pointer-events: none; } /*------Select--------*/ .c-selectarea_wrap{ display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; } .c-selectarea_left{ display: flex; align-items: center; flex-grow: 1; margin-right: auto; gap: 4px; } .c-selectarea_right{ display: flex; align-items: center; flex-grow: 1; justify-content: end; margin-left: auto; gap: 4px; } .c-select_wrap{ display: inline-block; position: relative; } .c-select{ display: inline-flex; align-items: center; gap: 2px; padding: 6px; box-sizing: border-box; color: var(--text-body); font-size: var(--size-body-large); font-weight: normal; line-height: 140%; cursor: pointer; } .c-select.on{ border-radius: 6px; background: var(--button-quarternary); } .c-select::after{ content: ""; display: inline-block; width: 14px; height: 10px; background: url("/pub/img/icon/arrow/arrow_viewmore_high.svg") no-repeat center center / 14px 10px; } .c-select.c-select_green::after{ background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center center / 14px 10px; } .c-select_wrap:first-child .c-select[data-type="left"]{ margin-left: -6px; } .c-select[data-type="week"], .c-select[data-type="month"]{ padding: 4px; color: var(--text-headline); font-size: var(--size-headline-medium); font-weight: bold; } .c-select_wrap:first-child .c-select[data-type="week"], .c-select_wrap:first-child .c-select[data-type="month"]{ margin-left: -4px; } .c-select[data-type="week"] span.now, .c-select[data-type="month"] span.now{ margin-left: 4px; font-size: var(--size-body-large); font-weight: normal; } .c-select_option_wrap{ display: none; width: max-content; max-height: 400px; overflow-y: auto; min-width: 120px; padding: 8px 0; border-radius: 8px; background: rgba(255, 255, 255, 0.90); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.24); backdrop-filter: blur(12px); transform: translateZ(0); position: absolute; top: calc(100% + 8px); right: 0; z-index: 3; } .c-select[data-type="left"] + .c-select_option_wrap, .c-select[data-type="week"] + .c-select_option_wrap, .c-select[data-type="month"] + .c-select_option_wrap{ right: auto; left: 0; } .c-select_option{ display: block; width: 100%; min-width: 120px; padding: 12px 16px; box-sizing: border-box; color: var(--text-body); font-size: var(--size-headline-small); font-weight: bold; line-height: 140%; } .c-select_option:hover, .c-select_option.selected{ background: var(--button-quarternary); } .c-select_option span.now{ margin-left: 4px; font-size: var(--size-body-large); font-weight: normal; } .c-date_pager_wrap{ display: flex; align-items: center; margin-right: -10px; } .c-date_pager_prev, .c-date_pager_next{ display: flex; padding: 6px 10px; align-items: center; gap: 2px; color: var(--text-body); font-size: var(--size-body-large); font-weight: bold; position: relative; } .c-date_pager_prev{ padding-right: 11px; } .c-date_pager_prev::before, .c-date_pager_next::after{ content: ""; display: block; width: 9px; height: 12px; background: url("/pub/img/icon/arrow/arrow_high.svg") no-repeat center / contain; } .c-date_pager_prev::after{ content: ""; display: block; width: 1px; height: 1em; background: var(--border-high); position: absolute; top: 50%; right: 0; margin-top: -0.5em; } .c-date_pager_prev::before{ transform: rotate(180deg); } .c-date_pager_prev[data-flag="1"], .c-date_pager_next[data-flag="1"]{ opacity: 0.4; cursor: default; pointer-events: none; } /*------Switch--------*/ .c-switch_wrap{ display: inline-flex; padding: 6px; justify-content: center; align-items: center; gap: 2px; cursor: pointer; } .c-switch_text{ color: var(--text-body); font-size: var(--size-body-large); font-weight: normal; line-height: 140%; } .c-switch{ -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 27px; height: 16px; border-radius: 10px; background-color: var(--button-secondary); position: relative; transition: background-color .3s; } .c-switch::after{ content: ""; display: block; width: 10px; height: 10px; border-radius: 10px; background: var(--white); position: absolute; top: 50%; left: 3px; transform: translateY(-50%); transition: left .3s; } .c-switch:checked{ background-color: var(--ui-green); } .c-switch:checked::after{ left: 14px; } /*------Genre Tab--------*/ .c-genretab_wrap{ background: var(--base); border-top: 1px solid var(--border-low); border-bottom: 1px solid var(--border-low); } .c-genretab_wrap.fixed{ position: fixed; width: 100%; top: var(--header-h); left: 0; z-index: 99; } .c-slider_genretab{ width: 100%; max-width: 990px; padding: 8px 42px 8px var(--side-p); box-sizing: border-box; position: relative; } .c-genretab_switch{ display: flex; align-items: center; width: 42px; height: 100%; max-height: 46px; padding: 0 16px 0 12px; box-sizing: border-box; background: var(--base); cursor: pointer; position: absolute; top: 0; right: 0; z-index: 1; } .c-genretab_switch::after{ content: ""; display: block; width: 14px; height: 10px; background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center / contain; transition: 0.3s ease; } .c-genretab_switch.open::after{ transform: rotate(180deg); } .c-genretab{ display: flex; } .c-genretab .swiper-slide{ width: auto; } .c-genretab .swiper-slide:not(:first-child){ margin-left: 4px; } .c-genretab .swiper-slide a{ display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 60px; background: var(--button-quarternary); color: var(--text-body); text-align: center; font-size: var(--size-body-small); font-weight: bold; } .c-genretab .swiper-slide.current a{ background: var(--ui-green); color: var(--white); } .c-slider_genretab.open .c-genretab{ flex-wrap: wrap; gap: 4px; } .c-slider_genretab.open .c-genretab .swiper-slide:not(:first-child){ margin-left: 0 } /*------searchbox--------*/ .c-searchbox{ position: relative; padding: 0 var(--side-p); } .c-searchbox_keyword{ position: relative; overflow: hidden; display: flex; box-sizing: border-box; align-items: center; border-radius: 8px; background: var(--button-quarternary); } .c-searchbox_keyword::after{ content: ""; display: block; width: 1px; height: 28px; background: var(--border-high); order: 3; } .c-searchbox_keyword:has(input:focus) { outline: solid 1px var(--border-high); } .c-searchbox_word{ padding: 12px 12px; color: var(--text-caption-low); box-sizing: border-box; -moz-appearance: none; -webkit-appearance: none; appearance: none; background: transparent; border: none; border-radius: 8px; font-size: 13px; line-height: 1.6; flex-grow: 1; order: 1; } .c-searchbox_word:focus, .c-searchbox_word:focus-visible, .c-searchbox_word:focus-within{ border: none; outline: none; } .c-searchbox_cancel{ display: none; width: 20px; height: 20px; padding: 12px 12px; box-sizing: content-box; background: url("/pub/img/icon/close_gray.svg") no-repeat center center / 10px 10px; order: 2; cursor: pointer; } .c-searchbox_submit{ display: block; width: 20px; height: 20px; padding: 12px 12px; box-sizing: content-box; background: url("/pub/img/icon/icon_search_gray.svg") no-repeat center center / 20px 20px; border: none; order: 4; } /*------header--------*/ .top_header_wrap { background:var(--white); position: fixed; z-index: 100; width: 100%; top: 0px; left: 0px; box-sizing: border-box; } .top_header{ position: relative; } .header_fixed_wrap { display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-pack:justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:center; -ms-flex-align: center; align-items:center; padding: 0 10px 0 16px; } .renta_logo_wrap { font-size: 0; } .renta_logo_link { display:inline-block; font-size: 0; } .renta_logo_img { width: 80px; display: inline-block; vertical-align: middle; } .renta_logo_anniversary{ width: 35px; margin-left: 4px; display: inline-block; vertical-align: middle; } .header_icon_wrap { display:-webkit-box; display:-ms-flexbox; display: flex; -webkit-box-pack:justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align:center; -ms-flex-align: center; align-items: center; padding: 10px 0 7px; } .header_icon_item { width: 40px; } .header_icon_item a{ display:block; width:100%; margin: -6px 0; padding: 6px 0; cursor: pointer; } .header_icon_item img{ display:block; width: 100%; } #head_hajimete { display: none; } .header_icon_wrap #head_buysel, .header_icon_wrap #head_giftcode, .header_icon_wrap #head_stamp_logoff, .header_icon_wrap #head_help, .header_icon_wrap #head_info{ display: none; } .header_join{ margin-left: 8px; } .header_join_btn::before{ content: ""; display: inline-block; background: url("/pub/img/icon/icon_account_white.svg") no-repeat center / contain; width: 16px; height: 16px; margin-right: 2px; } .js-header_border{ border-bottom: 1px solid var(--border-low); } #js-header_cart { position: relative; } #js-cart_count { display: inline-flex; justify-content: center; align-items: center; position: absolute; right: calc(50% - 10px); top: -2px; transform: translateX(50%); z-index: 100; min-width: 13px; min-height: 13px; padding: 2px 3px; box-sizing: border-box; border-radius: 7px; background-color: var(--ui-red); color: var(--white); font-size: 9px; text-align: center; font-weight: bold; line-height: 0; } #js-cart_count[data-cartcount="0"] { display: none!important; } [data-cartheader=""] { display: none; } /*------/header--------*/ /*------categoryTab--------*/ .categoryTab_wrap{ background: var(--background-high); padding-top: 8px; } .categoryTab_innerwrap{ display: flex; gap: 12px; } .categoryTab_innerwrap li{ width: calc(50% - 6px); border-radius: 8px 8px 0px 0px; background: var(--button-secondary); position: relative; } /*--カテゴリタブcurrent表示--*/ [data-ctgry="comic"] .categoryTab_innerwrap li#cate_c, [data-ctgry="short"] .categoryTab_innerwrap li#cate_s { background: var(--base); box-shadow: var(--sheet-shadow-top); } [data-ctgry="comic"] .categoryTab_innerwrap li#cate_c::before, [data-ctgry="short"] .categoryTab_innerwrap li#cate_s::before, [data-ctgry="comic"] .categoryTab_innerwrap li#cate_c::after, [data-ctgry="short"] .categoryTab_innerwrap li#cate_s::after { content: ""; display: block; background: url("/pub/img/icon/corner_category.svg") no-repeat center / contain; width: 8px; height: 9px; position: absolute; bottom: 0; } [data-ctgry="comic"] .categoryTab_innerwrap li#cate_c::before, [data-ctgry="short"] .categoryTab_innerwrap li#cate_s::before { left: -8px; } [data-ctgry="comic"] .categoryTab_innerwrap li#cate_c::after, [data-ctgry="short"] .categoryTab_innerwrap li#cate_s::after { right: -8px; transform: scale(-1, 1); } .categoryTab_innerwrap li a{ display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; padding: 8px; color: var(--text-headline); font-size: var(--size-headline-small); font-weight: bold; line-height: 140%; } .categoryTab_innerwrap li a img{ width: 16px; margin-right: 4px; } .categoryTab_labelnew{ display: inline-block; border-radius: 3px; background: var(--ui-red); margin-left: 4px; padding: 2px; color: var(--white); font-size: 8px; font-weight: bold; line-height: 100%; } /*------floorTab--------*/ .slider-floorTab { display: none; } [data-ctgry="comic"] #floorTab_c.slider-floorTab, [data-ctgry="short"] #floorTab_s.slider-floorTab { display: block; } .floorTab_wrap{ display: none; background:var(--base); border-bottom: 1px solid var(--border-high); } .slider-floorTab .swiper-slide{ display: flex; align-items: center; box-sizing: border-box; width: auto!important; height: auto!important; padding: 11px 0 15px; position: relative; } .slider-floorTab .swiper-slide:not(:last-child){ margin-right: 16px; } .slider-floorTab #tab_x:not([data-adltTab="1"]){ display: none; } .slider-floorTab .swiper-slide a{ display: flex; align-items: center; justify-content: center; color: var(--text-headline); font-size: var(--size-headline-small); font-weight: bold; } .slider-floorTab #tab_o a span{ font-size: 0; color: transparent; display: inline-block; width: 68px; height: 16px; background-image: url("data:image/svg+xml;base64,IDxzdmcgd2lkdGg9Ijc3IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgNzcgMTgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMF8zOF8xMTY3KSI+IDxwYXRoIGQ9Ik0xOC40Nzk1IDcuNzgyNzhDMTguMDkyMiA3Ljc4Mjc4IDE3LjIyNTQgNy43NDU4OSAxNy4yMjU0IDYuNTg0MDFDMTcuMjI1NCA1LjU4ODEgMTcuODE1NiA1LjM4NTI0IDE4LjQ3OTUgNS4zODUyNEgyMy4yMzc3VjQuNDk5OTlDMjMuMjM3NyAzLjgzNjA2IDIzLjUxNDMgMy4zMzgxIDI0LjQ3MzQgMy4zMzgxQzI1LjIxMTEgMy4zMzgxIDI1LjcyNzUgMy42MTQ3NCAyNS43Mjc1IDQuNDk5OTlWNS4zODUyNEgyNy40MDU3QzI3LjgxMTUgNS4zODUyNCAyOC42NzgzIDUuNDIyMTIgMjguNjc4MyA2LjU4NDAxQzI4LjY3ODMgNy41Nzk5MSAyOC4wNjk3IDcuNzgyNzggMjcuNDA1NyA3Ljc4Mjc4SDI1LjcyNzVWMTIuOTQ2N0MyNS43Mjc1IDE0Ljk3NTQgMjQuMjcwNSAxNC45NzU0IDIzLjE0NTUgMTQuOTc1NEMyMS44NzMgMTQuOTc1NCAyMC45NTA4IDE0Ljk3NTQgMjAuOTUwOCAxMy42NDc1QzIwLjk1MDggMTMuMDIwNSAyMS4yMDkgMTIuNTA0MSAyMi4wMDIxIDEyLjUwNDFDMjIuMTMxMSAxMi41MDQxIDIyLjY4NDQgMTIuNTIyNSAyMi43OTUxIDEyLjUyMjVDMjMuMTYzOSAxMi41MjI1IDIzLjI1NjEgMTIuNDg1NiAyMy4yNTYxIDEyLjE5MDZWOS43MTkyNUMyMi4xMzExIDExLjEyMDkgMjAuOTg3NyAxMi4wMDYxIDIwLjIzMTYgMTIuNTU5NEMxOS42NDE0IDEyLjk4MzYgMTguOTc3NSAxMy40ODE1IDE4LjM1MDQgMTMuNDgxNUMxNy41Mzg5IDEzLjQ4MTUgMTcuMTUxNiAxMi42NzAxIDE3LjE1MTYgMTIuMTE2OEMxNy4xNTE2IDExLjU2MzUgMTcuNTk0MyAxMS4zMjM4IDE4LjA1NTMgMTEuMDQ3MUMxOC45MDM3IDEwLjU4NjEgMTkuNjk2NyAxMC4wMzI4IDIwLjQxNiA5LjQyNDE3QzIxLjE5MDYgOC43NDE3OSAyMS40ODU3IDguNDQ2NzEgMjIuMDk0MyA3LjgwMTIySDE4LjQ3OTVWNy43ODI3OFoiIGZpbGw9IiM0NDQ0NDQiLz4gPHBhdGggZD0iTTMyLjU1MTIgOS45NTkwMkMzMi41NTEyIDEwLjc1MiAzMi4xNDU1IDExLjE1NzggMzEuMjQxOCAxMS4xNTc4QzMwLjUwNDEgMTEuMTU3OCAyOS45MTM5IDEwLjg5OTYgMjkuOTEzOSA5Ljk1OTAyVjQuOTA1NzRDMjkuOTEzOSA0LjE4NjQ4IDMwLjI2NDQgMy43MDY5NyAzMS4yMDQ5IDMuNzA2OTdDMzEuOTI0MiAzLjcwNjk3IDMyLjUzMjggMy45NDY3MiAzMi41MzI4IDQuOTA1NzRWOS45NTkwMkgzMi41NTEyWk0zOC44NDAyIDkuMjM5NzZDMzguODQwMiAxMC42NTk4IDM4LjYwMDQgMTIuMDk4NCAzNy4yMTcyIDEzLjMzNEMzNS43MDQ5IDE0LjY4MDMgMzMuMTA0NSAxNC45NTcgMzIuMjE5MyAxNC45NTdDMzEuMzM0IDE0Ljk1NyAzMC44NzMgMTQuNDU5IDMwLjg3MyAxMy42MTA3QzMwLjg3MyAxMi41Nzc5IDMxLjU5MjIgMTIuNTA0MSAzMi4yOTMgMTIuNDQ4OEMzNS42MzEyIDEyLjEzNTIgMzYuMTg0NCAxMC45NTQ5IDM2LjE4NDQgOS4zMzE5N1Y0Ljc1ODJDMzYuMTg0NCAzLjkwOTg0IDM2LjY2MzkgMy41NDA5OSAzNy41MTIzIDMuNTQwOTlDMzguMTU3OCAzLjU0MDk5IDM4Ljg0MDIgMy43NDM4NSAzOC44NDAyIDQuNzU4MlY5LjI1ODJWOS4yMzk3NloiIGZpbGw9IiM0NDQ0NDQiLz4gPHBhdGggZD0iTTQyLjg2MDcgOS43OTMwM0M0Mi41Mjg3IDkuNjQ1NDkgNDIuMjUyIDkuNTM0ODMgNDEuNDAzNyA5LjI1ODE5QzQwLjk0MjYgOS4xMTA2NSA0MC4zMzQgOC44ODkzNCA0MC4zMzQgOC4xNTE2NEM0MC4zMzQgNy43NjQzNCA0MC41NzM4IDYuODQyMjEgNDEuNDc3NSA2Ljg0MjIxQzQyLjA2NzYgNi44NDIyMSA0My40NTA4IDcuMzc3MDUgNDQuMDk2MyA3LjY1MzY4QzQ0LjkwNzggNy45ODU2NSA0NS40MjQyIDguMTg4NTIgNDUuNDI0MiA4LjkyNjIzQzQ1LjQyNDIgOS40NjEwNiA0NS4wNTUzIDEwLjI5MSA0NC4yNDM4IDEwLjI5MUM0My45ODU3IDEwLjI5MSA0My45NDg4IDEwLjI3MjUgNDIuODc5MSA5Ljc5MzAzSDQyLjg2MDdaTTUxLjU2NTYgNi44MjM3N0M1MS41NjU2IDcuNDg3NyA1MC40NDA2IDEwLjQ3NTQgNDguMzc1IDEyLjMzODFDNDcuMDI4NyAxMy41NzM4IDQ1LjU3MTcgMTQuMjAwOCA0My43MDkgMTQuNjQzNEM0My40MTM5IDE0LjcxNzIgNDIuNzEzMSAxNC44NjQ3IDQyLjI4ODkgMTQuODY0N0M0MS4zNDg0IDE0Ljg2NDcgNDEuMDkwMiAxMy45Nzk1IDQxLjA5MDIgMTMuNDYzMUM0MS4wOTAyIDEyLjQ4NTcgNDEuOTAxNiAxMi4zMzgxIDQyLjI4ODkgMTIuMjY0M0M0NC41OTQzIDExLjg1ODYgNDcuMDg0IDExLjM0MjIgNDguNjUxNiA3LjU5ODM2QzQ5LjI0MTggNi4xNTk4MyA0OS4yNzg3IDYuMDg2MDYgNDkuNTM2OSA1Ljg4MzE5QzQ5LjYxMDcgNS44MDk0MiA0OS43NzY2IDUuNzM1NjUgNTAuMjE5MyA1LjczNTY1QzUwLjQ5NTkgNS43MzU2NSA1MS41NjU2IDUuOTc1NDEgNTEuNTY1NiA2LjgyMzc3Wk00NC4wMDQxIDYuNDczMzZDNDMuNjcyMSA2LjMyNTgyIDQzLjM5NTUgNi4yMTUxNiA0Mi41NDcxIDUuOTM4NTJDNDIuMDg2MSA1Ljc5MDk4IDQxLjQ3NzUgNS41Njk2NyA0MS40Nzc1IDQuODUwNDFDNDEuNDc3NSA0LjQ0NDY3IDQxLjcxNzIgMy41MjI1NCA0Mi42MjA5IDMuNTIyNTRDNDMuMjExMSAzLjUyMjU0IDQ0LjU5NDMgNC4wNzU4MiA0NS4yMjEzIDQuMzM0MDFDNDYuMDUxMiA0LjY4NDQyIDQ2LjU0OTIgNC44Njg4NSA0Ni41NDkyIDUuNjA2NTVDNDYuNTQ5MiA2LjE0MTM5IDQ2LjE5ODggNi45NzEzMSA0NS4zODczIDYuOTcxMzFDNDUuMTI5MSA2Ljk3MTMxIDQ1LjA5MjIgNi45NTI4NiA0NC4wMjI1IDYuNDczMzZINDQuMDA0MVpNNDkuMTMxMSAzLjcyNTQxQzQ5LjEzMTEgMy43MjU0MSA0OS4wOTQzIDMuNTU5NDIgNDkuMDk0MyAzLjQ4NTY1QzQ5LjA5NDMgMy4wOTgzNiA0OS41NTUzIDMuMDQzMDMgNDkuNjY2IDMuMDQzMDNDNDkuOTA1NyAzLjA0MzAzIDUwLjA1MzMgMy4xNTM2OSA1MC4yMTkzIDMuNjMzMTlDNTAuMjU2MSAzLjcyNTQxIDUwLjQ5NTkgNC40MDc3OCA1MC40OTU5IDQuNzc2NjRDNTAuNDk1OSA1LjI3NDU5IDQ5Ljk5NzkgNS4yNzQ1OSA0OS45NDI2IDUuMjc0NTlDNDkuNjQ3NSA1LjI3NDU5IDQ5LjU3MzggNS4wOTAxNiA0OS41IDQuOTA1NzNDNDkuNDgxNiA0LjgxMzUyIDQ5LjM1MjUgNC4zNzA5IDQ5LjMzNCA0LjI5NzEzQzQ5LjI5NzEgNC4xODY0NyA0OS4xNDk2IDMuNzk5MTggNDkuMTMxMSAzLjcwNjk2VjMuNzI1NDFaTTUwLjYwNjYgMy42NzAwOEM1MC42MDY2IDMuNjcwMDggNTAuNTY5NyAzLjUwNDA5IDUwLjU2OTcgMy40MzAzMkM1MC41Njk3IDMuMDQzMDMgNTEuMDMwNyAyLjk4NzcgNTEuMTQxNCAyLjk4NzdDNTEuMzgxMSAyLjk4NzcgNTEuNTI4NyAzLjA5ODM2IDUxLjY5NDcgMy41Nzc4N0M1MS43MzE2IDMuNjcwMDggNTEuOTcxMyA0LjM1MjQ2IDUxLjk3MTMgNC43MjEzMUM1MS45NzEzIDUuMjE5MjYgNTEuNDczNCA1LjIxOTI2IDUxLjQxOCA1LjIxOTI2QzUxLjEyMjkgNS4yMTkyNiA1MS4wNDkyIDUuMDM0ODMgNTAuOTc1NCA0Ljg1MDQxQzUwLjk1NyA0Ljc1ODE5IDUwLjgyNzkgNC4zMTU1NyA1MC44MDk0IDQuMjQxOEM1MC43NzI1IDQuMTMxMTQgNTAuNjI1IDMuNzQzODUgNTAuNjA2NiAzLjY1MTY0VjMuNjcwMDhaIiBmaWxsPSIjNDQ0NDQ0Ii8+IDxwYXRoIGQ9Ik01NC4wOTIyIDguNDY1MTVDNTMuMjA3IDguNDY1MTUgNTIuODU2NiA3LjkzMDMyIDUyLjg1NjYgNy4yNjYzOEM1Mi44NTY2IDYuNDczMzUgNTMuMzE3NiA2LjAzMDczIDU0LjA5MjIgNi4wMzA3M0g1Ny41MDQxVjQuNjI5MDlDNTcuNTA0MSAzLjkwOTgzIDU3Ljg3MyAzLjQ0ODc2IDU4Ljc3NjcgMy40NDg3NkM1OS41MzI4IDMuNDQ4NzYgNjAuMDg2MSAzLjcyNTQgNjAuMDg2MSA0LjYyOTA5VjYuMDMwNzNINjMuMTQ3NkM2NC4wMzI4IDYuMDMwNzMgNjQuMzgzMiA2LjU2NTU2IDY0LjM4MzIgNy4yMjk1QzY0LjM4MzIgOC4wMDQwOSA2My45NTkgOC40NjUxNSA2My4xNDc2IDguNDY1MTVINjAuMDg2MUM2MC4wODYxIDEwLjEwNjUgNTkuNjI1IDExLjcxMTEgNTguNTU1MyAxMi45MDk4QzU3LjQ4NTcgMTQuMTQ1NSA1NS43NTIxIDE0Ljk3NTQgNTUuMDE0NCAxNC45NzU0QzU0LjEyOTEgMTQuOTc1NCA1My43NDE4IDE0LjEyNyA1My43NDE4IDEzLjU1NTNDNTMuNzQxOCAxMi45MDk4IDU0LjA3MzggMTIuNzYyMyA1NC44ODUzIDEyLjQxMTlDNTYuMzc5MSAxMS43NjY0IDU3LjQ4NTcgMTAuNzcwNSA1Ny40ODU3IDguNDQ2NzFINTQuMDczOEg1NC4wOTIyVjguNDY1MTVaIiBmaWxsPSIjNDQ0NDQ0Ii8+IDxwYXRoIGQ9Ik02OC4xODI0IDcuNDg3NzFDNjguMTgyNCA5LjkwMzY5IDY4LjEyNyAxMS43MTExIDY3LjA3NTggMTMuNDgxNkM2Ni42NTE2IDE0LjIwMDggNjYuMDk4NCAxNC44NDYzIDY1LjQzNDQgMTQuODQ2M0M2NC44NDQzIDE0Ljg0NjMgNjMuOTc3NCAxNC4zNDg0IDYzLjk3NzQgMTMuNTE4NEM2My45Nzc0IDEzLjI0MTggNjQuMDMyOCAxMy4wMjA1IDY0LjQwMTYgMTIuNTc3OUM2NS41NjM1IDExLjE3NjIgNjUuNjM3MyAxMC40NTcgNjUuNjM3MyA3LjM5NTQ5VjQuOTQyNjNDNjUuNjM3MyA0LjI2MDI1IDY1Ljk4NzcgMy43OTkxOCA2Ni44OTE0IDMuNzk5MThDNjcuNjQ3NSAzLjc5OTE4IDY4LjE2MzkgNC4wOTQyNiA2OC4xNjM5IDQuOTQyNjNWNy40ODc3MUg2OC4xODI0Wk02OS4xNzgzIDQuNzk1MDhDNjkuMTc4MyA0LjEzMTE1IDY5LjUxMDIgMy42NTE2NCA3MC40MTM5IDMuNjUxNjRDNzEuMTUxNiAzLjY1MTY0IDcxLjY4NjUgMy45MjgyOCA3MS42ODY1IDQuNzk1MDhWMTEuNTI2NkM3MS42ODY1IDExLjUyNjYgNzEuNjg2NSAxMS42NzQyIDcxLjc5NzEgMTEuNjc0MkM3Mi4wMTg0IDExLjY3NDIgNzMuMDg4MSAxMS4wMTAyIDczLjY3ODMgOS4xNDc1NEM3My44NDQzIDguNjMxMTUgNzQuMDEwMiA4LjA5NjMxIDc0Ljc2NjQgOC4wOTYzMUM3NS4wNDMgOC4wOTYzMSA3Ni4xNjggOC4yNDM4NSA3Ni4xNjggOS4yMDI4N0M3Ni4xNjggOS44Mjk5MiA3NS42ODg1IDExLjA2NTYgNzUuMDYxNSAxMS45NjkzQzczLjY3ODMgMTQuMDE2NCA3MS41MjA1IDE0Ljc3MjUgNzAuNDg3NyAxNC43NzI1QzY5LjE3ODMgMTQuNzcyNSA2OS4xNzgzIDEzLjY2NiA2OS4xNzgzIDEzLjM3MDlWNC43NzY2NFY0Ljc5NTA4WiIgZmlsbD0iIzQ0NDQ0NCIvPiA8cGF0aCBkPSJNNS45MjAwOCAxMS4yMTMxSDQuNDI2MjNWMTUuMDEyM0M0LjQyNjIzIDE2LjAwODIgNC40MjYyMyAxNi4zNzcgNC4xNDk1OSAxNi44OTM0QzMuODM2MDcgMTcuNTIwNSAzLjA5ODM2IDE3Ljk4MTYgMi4yMTMxMSAxNy45ODE2QzEuMzI3ODcgMTcuOTgxNiAwLjU5MDE2NCAxNy41MjA1IDAuMjc2NjM5IDE2Ljg5MzRDMC4wMTg0NDI2IDE2LjM1ODYgMCAxNi4wMDgyIDAgMTUuMDEyM1YyLjY5MjYyQzAgMi4wNDcxMyAwIDEuMjE3MjEgMC42MDg2MDcgMC42MDg2MDdDMS4yMTcyMSAwIDIuMDQ3MTMgMCAyLjY5MjYyIDBINy4xMDA0MUMxMS4wNjU2IDAgMTMuMjA0OSAyLjgyMTcyIDEzLjIwNDkgNS43NTQxQzEzLjIwNDkgNy42NTM2OSAxMi4yMDkgOS40MjQxOCAxMC4zNDYzIDEwLjQwMTZMMTIuNDQ4OCAxNC4xMDg2QzEyLjk0NjcgMTQuOTkzOSAxMy4wOTQzIDE1LjM4MTEgMTMuMDk0MyAxNS45MzQ0QzEzLjA5NDMgMTYuNjkwNiAxMi43MjU0IDE3LjI4MDcgMTIuMDA2MSAxNy42ODY1QzExLjY1NTcgMTcuODg5MyAxMS4yODY5IDE4IDEwLjg5OTYgMThDOS43NzQ1OSAxOCA5LjIyMTMxIDE3LjExNDggOC43MjMzNiAxNi4yNDhMNS44NjQ3NSAxMS4yNUw1LjkyMDA4IDExLjIxMzFaIiBmaWxsPSIjOERDMjFGIi8+IDxwYXRoIGQ9Ik0zLjgzNjA3IDguMTE0NzRDMi45NTA4MiA4LjExNDc0IDIuMjUgNy4zOTU0OCAyLjI1IDYuNTI4NjhWNC43MDI4NkMyLjI1IDMuODE3NjEgMi45NjkyNiAzLjExNjc5IDMuODM2MDcgMy4xMTY3OUM0LjcwMjg3IDMuMTE2NzkgNS40MjIxMyAzLjgzNjA1IDUuNDIyMTMgNC43MDI4NlY2LjUyODY4QzUuNDIyMTMgNy40MTM5MiA0LjcwMjg3IDguMTE0NzQgMy44MzYwNyA4LjExNDc0WiIgZmlsbD0id2hpdGUiLz4gPHBhdGggZD0iTTguNTk0MjcgOC4xMTQ3NEM3LjcwOTAzIDguMTE0NzQgNy4wMDgyMSA3LjM5NTQ4IDcuMDA4MjEgNi41Mjg2OFY0LjcwMjg2QzcuMDA4MjEgMy44MTc2MSA3LjcyNzQ3IDMuMTE2NzkgOC41OTQyNyAzLjExNjc5QzkuNDYxMDggMy4xMTY3OSAxMC4xODAzIDMuODM2MDUgMTAuMTgwMyA0LjcwMjg2VjYuNTI4NjhDMTAuMTgwMyA3LjQxMzkyIDkuNDYxMDggOC4xMTQ3NCA4LjU5NDI3IDguMTE0NzRaIiBmaWxsPSJ3aGl0ZSIvPiA8cGF0aCBkPSJNMTAuODYyNyA1LjYwNjU3QzEwLjg2MjcgNi4zMjU4MyAxMC4yOTEgNi44OTc1NSA5LjU3MTcyIDYuODk3NTVDOC44NTI0NSA2Ljg5NzU1IDguMjgwNzMgNi4zMjU4MyA4LjI4MDczIDUuNjA2NTdDOC4yODA3MyA0Ljg4NzMgOC44NTI0NSA0LjMxNTU4IDkuNTcxNzIgNC4zMTU1OEMxMC4yOTEgNC4zMTU1OCAxMC44NjI3IDQuODg3MyAxMC44NjI3IDUuNjA2NTdaIiBmaWxsPSIjMjMxODE1Ii8+IDxwYXRoIGQ9Ik02LjEwNDUyIDUuNjA2NTdDNi4xMDQ1MiA2LjMyNTgzIDUuNTMyOCA2Ljg5NzU1IDQuODEzNTQgNi44OTc1NUM0LjA5NDI3IDYuODk3NTUgMy41MjI1NSA2LjMyNTgzIDMuNTIyNTUgNS42MDY1N0MzLjUyMjU1IDQuODg3MyA0LjA5NDI3IDQuMzE1NTggNC44MTM1NCA0LjMxNTU4QzUuNTMyOCA0LjMxNTU4IDYuMTA0NTIgNC44ODczIDYuMTA0NTIgNS42MDY1N1oiIGZpbGw9IiMyMzE4MTUiLz4gPC9nPiA8ZGVmcz4gPGNsaXBQYXRoIGlkPSJjbGlwMF8zOF8xMTY3Ij4gPHJlY3Qgd2lkdGg9Ijc2LjE2OCIgaGVpZ2h0PSIxOCIgZmlsbD0id2hpdGUiLz4gPC9jbGlwUGF0aD4gPC9kZWZzPiA8L3N2Zz4="); background-size: contain; background-repeat: no-repeat; } /*--フロアタブcurrent表示--*/ [data-floor_c="a"] #tab_a a, [data-floor_c="c"] #tab_c a, [data-floor_c="d"] #tab_d a, [data-floor_c="bl"] #tab_bl a, [data-floor_c="tl"] #tab_tl a, [data-floor_c="o"] #tab_o a, [data-floor_c="t"] #tab_t a, [data-floor_c="b"] #tab_b a, [data-floor_c="p"] #tab_p a, [data-floor_c="x"] #tab_x a, [data-floor_s="v"] #tab_v a, [data-floor_s="t"] #tab_st a{ color: var(--ui-green); } [data-floor_c="a"] #tab_a a::after, [data-floor_c="c"] #tab_c a::after, [data-floor_c="d"] #tab_d a::after, [data-floor_c="bl"] #tab_bl a::after, [data-floor_c="tl"] #tab_tl a::after, [data-floor_c="o"] #tab_o a::after, [data-floor_c="t"] #tab_t a::after, [data-floor_c="b"] #tab_b a::after, [data-floor_c="p"] #tab_p a::after, [data-floor_c="x"] #tab_x a::after, [data-floor_s="v"] #tab_v a::after, [data-floor_s="t"] #tab_st a::after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; border-radius: 2px; background-color: var(--ui-green); } .slider-floorTab .swiper-slide a.genreMenu_btn{ display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; line-height: 160%; cursor: pointer; position: relative; color: var(--text-body); font-size: var(--size-body-small); font-weight: bold; padding: 0px 6px; border-radius: 25px; background: var(--button-tertiary); } .slider-floorTab .swiper-slide a.genreMenu_btn::after{ content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center / contain; transition: 0.3s ease; width: 12px; height: 9px; } .genreMenu_section{ margin-top: 32px; padding: 0 16px; } .genreMenu_list{ display: flex; flex-wrap: wrap; margin: 0 -2px; } .genreMenu_list li{ width: calc(100% / 3 - 4px); margin: 0 2px 8px; } .genreMenu_list li a{ display: flex; height: 100%; box-sizing: border-box; padding: 8px; justify-content: center; align-items: center; border-radius: 4px; background: var(--button-quarternary, #F4F4F4); text-align: center; color: var(--text-body); font-size: 12px; font-weight: bold; line-height: 120%; } .js-genreMenu_list_adlt{ display: none; } /*--------------- floorAnchor ---------------*/ .floorAnchor_wrap{ /*margin-top: -6px;*/ position: sticky; top: var(--header-h); z-index: 11; } .floorAnchor{ background: var(--base); } .floorAnchor_wrap.sticky .floorAnchor{ border-top: 1px solid var(--border-high); } .slider_floorAnchor{ box-sizing: border-box; padding-top: 8px !important; padding-bottom: 8px !important; } .slider_floorAnchor li { width: auto !important; height: auto !important; margin-right: 4px; } .slider_floorAnchor li a{ display: inline-flex; padding: 6px 12px; align-items: center; border-radius: 32px; background: var(--button-quarternary); color: var(--text-body); font-size: var(--size-body-small); font-weight: bold; } .slider_floorAnchor li a::after{ content: ""; display: inline-block; margin-left: 2px; background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center / contain; width: 12px; height: 9px; } @media screen and (min-width: 600px){ .floorAnchor_wrap_bottom_padding{ width: 100%; height: 8px; } } /*--------------- footer ---------------*/ .inc_foot { color: var(--text-body); font-weight: bold; font-size: 0; } .footer_topBack_wrap { text-align: center; padding: 24px 0; background: var(--base); } .footer_topBack_wrap a{ display: inline-block; line-height: 14px; } .footer_topBack_wrap img{ vertical-align: middle; height: 12px; margin: -1.5px 4px 0px 0; } .footer_topBack_wrap span { vertical-align: middle; font-size: 14px; color: var(--text-link-low); } .footer_contentsNavi_wrap { background: var(--base); border-radius: 0 0 16px 16px; overflow: hidden; box-shadow: var(--sheet-shadow-bottom); } .footer_contentsNavi_wrap li{ width: calc(100%/3); display: inline-block; border-top: solid 1px var(--border-high); border-right: solid 1px var(--border-high); box-sizing: border-box; } .footer_contentsNavi_wrap li:last-of-type { border-right: none; } .footer_topBack_wrap a:hover { text-decoration: none; } .footer_contentsNavi_wrap a:hover { background: var(--background-high); text-decoration: none; } .footer_contentsNavi_wrap a { font-size: 12px; color: var(--text-body); padding: 12px 0; text-align: center; display: block; } .footer_bg_wrap { background: var(--background-low); } .footer_sns_wrap { text-align: center; padding: 24px 0 12px; } .footer_sns_wrap div { margin-bottom: 12px; } .footer_sns_wrap div img { width: 140px; } .footer_sns_wrap li { display: inline-block; margin: 0 4px; font-size: 0; } .footer_sns_wrap li a { display: inline-block; width: 32px; height: 32px; border-radius: 50%; background: var(--base); border: solid 2px var(--border-medium); overflow: hidden; } .footer_sns_wrap li img { width: 100%; } .footer_sns_wrap li:nth-child(1) img { width: 50%; margin: 25%; } .footer_textlink_wrap { text-align: center; padding-bottom: 16px; } .footer_textlink_wrap a { display: inline-block; font-size: 11px; color: var(--text-link-high); line-height: 2.5; padding: 0 8px; position: relative; } .footer_textlink_wrap a:after { content: ""; width: 1px; height: 10px; border-right: solid 1px var(--border-high); position: absolute; right: 0px; top: 8px; } .footer_textlink_wrap a:nth-of-type(4):after, .footer_textlink_wrap a:nth-of-type(7):after, .footer_textlink_wrap a:nth-of-type(10):after, .footer_textlink_wrap a:nth-of-type(12):after, .footer_textlink_wrap a:nth-of-type(15):after { content: none; } .footer_copy_lang_wrap { position: relative; max-width: 1200px; margin: 0 auto; } .footer_copy_wrap { font-size: 9px; color: var(--text-link-medium); font-weight: normal; text-align: center; padding-bottom: 24px; } .footer_lang_wrap { position: absolute; top: -3px; right: 24px; } .footer_lang_wrap select:focus { outline: none; } .footer_lang_wrap select { background: var(--background-low); border: solid 1px var(--border-high); border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-size: 10px; color: var(--text-body); width: auto; height: 20px; padding: 2px 16px 1px 6px; cursor: pointer; } .footer_lang_wrap:after { position: absolute; content: ""; top: 8px; right: 5px; font-size: 9px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 5px solid var(--text-body); pointer-events: none; } .footer_abj_wrap { padding: 16px 8px; border-top: solid 1px var(--border-high); } .footer_abj_wrap img { display: inline-block; width: 24%; padding-right: 8px; box-sizing: border-box; vertical-align: middle; max-width: 100px; } .footer_abj_innerwrap { max-width: 560px; } .footer_abj_innerwrap div { display: inline-block; width: 76%; vertical-align: middle; } .footer_abj_innerwrap div span { font-size: 9px; color: var(--text-body); font-weight: normal; } .footer_abj_innerwrap div span a { color: var(--text-link-low); display: block; } /* -----フローティングスタイル----- */ .c-stamp_floating { display: none; position: fixed; bottom: 32px; right: 16px; transition: .5s; z-index: 50; } .c-stamp_floating a { display: inline-block; position: relative; transition: .3s; transform: scale(1); width: 100px; z-index: 50; } .c-stamp_floating img { width: 100%; } .c-stamp_floating_on { display: block; } .c-stamp_floating_out { z-index: -1; } .c-stamp_floating_out a { transform: scale(0); } #frame_iosapp .c-stamp_floating { bottom: 76px; } /*--------------- 雑誌枠 ---------------*/ /* レイアウトシフト用 */ .magazine-section_wrap .c-slider_contents_wrap { height: 185px; } /* タブ切り替え */ .magazine-slider_filtertab { margin-top: -8px; padding-bottom: 4px; font-size: 0; } .magazine-slider_filtertab li { display: inline-block; position: relative; padding-right: 16px; } .magazine-slider_filtertab li:not(:last-of-type):after { content: ""; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 1px; height: 12px; background: var(--border-high); } .magazine-slider_filtertab button { padding: 8px 0; border: none; background: var(--base); font-size: 13px; color: var(--text-link-low); -webkit-tap-highlight-color: transparent; } section#mf button[data-focus="mf"], section#f button[data-focus="f"], section#m button[data-focus="m"], section#bl button[data-focus="bl"] { color: var(--text-body); font-weight: bold; } .slider_mf, .slider_f, .slider_m, .slider_bl { display: none; } section#mf .slider_mf, section#f .slider_f, section#m .slider_m, section#bl .slider_bl { display: block; } /* ロゴ部分 */ .magazine-slider_logo { width: 100%; } /* 本日発売テキスト */ .magazine-slider_text { line-height: 1; text-align: center; } [data-release="1"]::before { content: '本日発売'; font-size: var(--size-caption-large); font-weight: bold; color: var(--ui-red); } /*--------------- /雑誌枠 ---------------*/ /*--------------- ジャンルだしわけ ---------------*/ .data_gender { display: none; } [data-genderbl="BL"] { display: block; } [data-gendertl="TL"] { display: block; } /*--------------- レコメンド枠 ---------------*/ .recom_dispAction, [data-recom="1"] .c-slider_contents_wrap { display: none; } [data-recom="1"] [data-disp="0"] { display: block; } [data-recom="none"] { display: none; } [data-recom="0"] [data-disp="1"], [data-recom="0"] [data-disp="clear"] { display: block; } .recom_clear_text { font-size: var(--size-body-large); } /*--------------- 最近チェックした広告 ---------------*/ .ad-delete_btn{ width: 30px; height: 30px; right: -1px; position: absolute; z-index: 100; top: -14px; display: flex; justify-content: center; align-items: center; } .ad-delete_btn img{ width: 14px; height: 14px; } .parts_cookie_banner-headline_large{ display: flex; align-items: center; color: var(--text-headline); font-weight: bold; font-size: 18px; line-height: 1.4; } .parts_cookie_banner_swiper{ padding-top: 10px!important; margin-top: -10px!important; } .no_cookie_banner_text{ display: none; font-size: 14px!important; } /*--------------- ヘッダー画像 ---------------*/ .header-banner { display: none; font-size: 0; background: linear-gradient(to bottom, #d2261f 30%, #ec2420); } .header-banner img { width: 100%; max-width: 990px; margin: 0 auto; } .header-banner_sp { display: block; } .header-banner_tab, .header-banner_pc { display: none; } /*--------------- pagetop ---------------*/ /* #page-top { position: fixed; right: 5%; bottom: 10%; z-index: 15; } #page-top a { display: block; width: 50px; height: 50px; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; } #page-top a:hover { text-decoration: none; } p#page-top a::after { content: ""; position: absolute; z-index: 20; right: 0; top: 0; background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/topbtn.png") no-repeat center / contain; width: 50px; height: 50px; } */ /* イベント時の上書き */ /* #page-top a { width: 64px; height: 64px; } p#page-top a::after { width: 64px; height: 64px; background: url("https://img.papy.co.jp/lc/renta/img/mark/event/cat/topbtn_cat.svg") no-repeat center / contain; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -1.5px 0 #fff); } */ /*--------------- 書店員追加 ---------------*/ .c-rentastaff-writer { margin: 16px 16px; border: 1px solid var(--border-high); border-radius: 12px; background-color: var(--background-medium); overflow: hidden; } .c-rentastaff-writer_heading { margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--border-high); font-size: 14px; font-weight: bold; line-height: 1.4; color: var(--text-caption-low); } .c-rentastaff-writer_link { display: block; color: inherit; text-decoration: none; } .c-rentastaff-writer_link + .c-rentastaff-writer_link { border-top: 1px solid var(--border-high); } .c-rentastaff-writer_inner { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 14px; } .c-rentastaff-writer_imgwrap { flex-shrink: 0; } .c-rentastaff-writer_img { display: block; width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border-high); object-fit: cover; } .c-rentastaff-writer_body { flex: 1; min-width: 0; } .c-rentastaff-writer_name { margin: 4px 0 0 0; font-size: 14px; font-weight: bold; line-height: 1.2; color: var(--text-headline); } .c-rentastaff-writer_text { margin: 2px 0 0; font-size: 13px; line-height: 1.6; text-indent: -0.5em; color: var(--text-body); } .c-rentastaff-writer_arrow { flex-shrink: 0; width: 12px; margin-left: 8px; } .c-rentastaff-writer_wrap { padding: 0px; margin: 0px; } /*--------------- パンくずリスト ---------------*/ .c-breadcrumb { overflow: hidden; } .c-breadcrumb__list { display: flex; flex-wrap: nowrap; align-items: center; font-size: 12px; list-style: none; overflow-x: scroll; white-space: nowrap; padding: 4px var(--side-p); } .c-breadcrumb__list::-webkit-scrollbar { display: none; } .c-breadcrumb__item { display: flex; align-items: center; color: var(--text-caption-low); } .c-breadcrumb__item a { display: inline; white-space: nowrap; color: var(--text-caption-low); } .c-breadcrumb__item:not(:last-child)::after { content: ">"; margin: 0 4px; color: #C8C8CB; } /*--------------- 「探す」内にバナー設置 ---------------*/ .search-recom_banner { margin-bottom: 16px; } .search-recom_banner img { width: 100%; } .search-recom_banner a { display: block; } .search-recom_banner_pc { display: none; } /*--------------- itemやsearchの作品タグ ---------------*/ .c-status_text { font-weight: bold; line-height: 1; color: var(--text-body); font-size: 13px; } .c-status_badge { display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 4px; background: var(--ui-green); border-radius: 2px; box-sizing: border-box; color: #fff; font-size: 10px; font-weight: bold; line-height: 1; white-space: nowrap; font-feature-settings: "palt"; vertical-align: middle; } .c-status_badge[data-badge="先行配信"], .c-status_badge[data-badge="独占先行配信"] { background: #E40280; } .c-status_badge[data-badge="無料"], .c-status_badge[data-badge="レンタル追加"], .c-status_badge[data-badge="値下げ"], .c-status_badge[data-badge="サンプル増量"], .c-status_badge[data-badge="キャンペーン中"] { background: var(--ui-orange); } .c-status_badge[data-badge="レンタル済み"], .c-status_badge[data-badge="レンタル中"], .c-status_badge[data-badge="購入済み"] { background: var(--ui-red); } .c-status_badge[data-badge="人気急上昇"] { background: #BF0107; } .c-status_badge[data-badge="ロングセラー"] { background: #93539D; } .c-status_badge[data-badge="殿堂入り"] { background: #584D9D; } .c-status_badge[data-badge="読み上げ対応"] { background: #CC3367; } .c-status_badge[data-badge="読み上げ可能"] { background: #FDE2EB; color: #CC3367; } .c-status_badge[data-badge="マンガ"], .c-status_badge[data-badge="タテコミ"] { background: #fff; border: 1px solid #FF9900; color: #FF9900; } .c-status_badge[data-badge="ノベル"], .c-status_badge[data-badge="実用書"], .c-status_badge[data-badge="写真集"] { background: #fff; border: 1px solid #CC3367; color: #CC3367; } .c-status_badge[data-badge="オトナ"] { background: #fff; border: 1px solid #E456E6; color: #E456E6; } .c-status_badge[data-badge="ドラマ"], .c-status_badge[data-badge="動画"] { background: #fff; border: 1px solid #807E83; color: #807E83; } .c-status_badge[data-badge="アニメ"] { background: #fff; border: 1px solid #2989D3; color: #2989D3; } .c-status_badge[data-badge="絵ノベル"], .c-status_badge[data-badge="動くマンガ"] { background: #fff; border: 1px solid #FE5488; color: #FE5488; } .c-status_badge[data-badge="音声"] { background: #fff; border: 1px solid #12B283; color: #12B283; } /*--------------- 書店員のおすすめ ---------------*/ .c-staffdiary_wrap { margin-bottom: 8px; padding: 32px 0 16px; background-image: linear-gradient(#E8E8E8 1px, transparent 1px), linear-gradient(90deg, #E8E8E8 1px, transparent 1px); background-color: #F5F5F5; background-size: 30px 30px; } .c-staffdiary { overflow: hidden; margin-bottom: 8px; padding: 16px 16px 0; border-radius: 10px; border: 1px solid #E4E4E4; background: #FFF; box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.04); } .staff_diary .c-staffdiary_recently + .c-headline_small { margin-top: 24px; } .c-staffdiary_item { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .c-staffdiary_cover { width: 107px; } .c-staffdiary_desc { width: calc( 100% - 107px - 16px ); } .c-staffdiary_desc_date { color: var(--ui-green); font-size: var(--size-caption-large); font-style: normal; font-weight: bold; line-height: 1.6; } .c-staffdiary_desc h3 { color: var(--text-headline); font-size: var(--size-headline-small); font-weight: bold; line-height: 1.4; } .c-staffdiary_desc h4 { color: var(--text-body); font-size: var(--size-body-small); font-weight: normal; line-height: 1.6; } .c-staffdiary_desc_btn { display: flex; align-items: center; gap: 8px; margin-top: 16px; } .c-staffdiary_article { background: #fff; padding: var(--space-side) var(--space-side) 0; } .c-staffdiary_comment { position: relative; margin-bottom: 8px; } .c-staffdiary_comment button { padding: 0; border: 0; background: none; cursor: pointer; position: absolute; bottom: 0; right: 0; color: var(--ui-green); font-size: var(--size-body-small); font-weight: bold; background: #FFF; } .c-staffdiary_comment p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: var(--text-body); font-size: var(--size-body-large); line-height: 1.6; } .c-staffdiary_comment p br { display: none; } .c-staffdiary_comment p a { display: inline; } .c-staffdiary_staff_wrap { display: flex; align-items: center; justify-content: space-between; } .c-staffdiary_staff_wrap h5 { color: var(--text-caption-low); font-size: var(--size-body-small); font-weight: bold; line-height: 1.6; } .c-staffdiary_staff_wrap span { color: var(--text-caption-low); font-size: var(--size-body-small); font-weight: bold; line-height: 1.6; } .c-staffdiary_staff_name { display: flex; align-items: center; gap: 8px; } .c-staffdiary_staff_name span::before { content: '書店員'; } [data-itemstaff="6"] span::before { content: '春日'; } [data-itemstaff="18"] span::before { content: '100ソム'; } [data-itemstaff="19"] span::before { content: 'ハダ'; } [data-itemstaff="20"] span::before { content: '溝口'; } [data-itemstaff="16"] span::before { content: '山科'; } [data-itemstaff="14"] span::before { content: 'さとう'; } [data-itemstaff="5"] span::before { content: '町田'; } [data-itemstaff="21"] span::before { content: '平日部長'; } [data-itemstaff="100"] span::before { content: 'イッヌのしもべ'; } [data-itemstaff="101"] span::before { content: 'ぱゆ'; } .c-staffdiary_staff_icon::before { content: ''; display: block; width: 36px; height: 36px; background: url('/pub/img/icon/staff/staff_renta_main.png') center / contain no-repeat; } [data-itemstaff="19"] .c-staffdiary_staff_icon::before, [data-staff="ハダ"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_hada_main.png') center / contain no-repeat; } [data-itemstaff="14"] .c-staffdiary_staff_icon::before, [data-staff="さとう"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_sato_main.png') center / contain no-repeat; } [data-itemstaff="18"] .c-staffdiary_staff_icon::before, [data-staff="100ソム"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_100som_main.png') center / contain no-repeat; } [data-itemstaff="5"] .c-staffdiary_staff_icon::before, [data-staff="町田"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_machida_main.png') center / contain no-repeat; } [data-itemstaff="16"] .c-staffdiary_staff_icon::before, [data-staff="山科"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_yamashina_main.png') center / contain no-repeat; } [data-itemstaff="20"] .c-staffdiary_staff_icon::before, [data-staff="溝口"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_mizoguchi_main.png') center / contain no-repeat; } [data-itemstaff="6"] .c-staffdiary_staff_icon::before, [data-staff="春日"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_kasuga_main.png') center / contain no-repeat; } [data-itemstaff="21"] .c-staffdiary_staff_icon::before, [data-staff="平日部長"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_heijitsu_main.png') center / contain no-repeat; } [data-itemstaff="100"] .c-staffdiary_staff_icon::before, [data-staff="イッヌのしもべ"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_innu_main.png') center / contain no-repeat; } [data-itemstaff="101"] .c-staffdiary_staff_icon::before, [data-staff="ぱゆ"].c-staffdiary_staff_icon::before { background: url('/pub/img/icon/staff/staff_payu_main.png') center / contain no-repeat; } /* 2個目以降 */ .c-staffdiary_recently { padding: 8px; } .c-staffdiary_recently_item { display: flex; align-items: center; gap: 4px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; } .c-staffdiary_recently_item::after { content: ""; display: inline-block; background: url("/pub/img/icon/arrow/arrow_viewmore_uigreen.svg") no-repeat center / contain; width: 14px; height: 10px; } .c-staffdiary_recently_item span { width: 26px; height: 26px; } .c-staffdiary_recently_item span::before { content: ''; display: block; width: 26px; height: 26px; border-radius: 26px; background: url('/pub/img/icon/staff/staff_renta_icon.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="ハダ"]::before { background: url('/pub/img/icon/staff/staff_hada_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="さとう"]::before { background: url('/pub/img/icon/staff/staff_sato_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="100ソム"]::before { background: url('/pub/img/icon/staff/staff_100som_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="町田"]::before { background: url('/pub/img/icon/staff/staff_machida_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="山科"]::before { background: url('/pub/img/icon/staff/staff_yamashina_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="溝口"]::before { background: url('/pub/img/icon/staff/staff_mizoguchi_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="春日"]::before { background: url('/pub/img/icon/staff/staff_kasuga_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="平日部長"]::before { background: url('/pub/img/icon/staff/staff_heijitsu_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="イッヌのしもべ"]::before { background: url('/pub/img/icon/staff/staff_innu_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item [data-staff="ぱゆ"]::before { background: url('/pub/img/icon/staff/staff_payu_main.png') center / 26px 26px no-repeat; } .c-staffdiary_recently_item p { display: block; width: calc(100% - 26px - 14px - 8px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: var(--text-body); font-size: 12px; line-height: 1.4; } .c-staffdiary_recently_more, .c-staffdiary_recently_item p br { display: none; } .c-staffdiary_on.c-staffdiary_recently { padding: 16px 16px 0; } .c-staffdiary_on .c-staffdiary_recently_more, .c-staffdiary_on .c-staffdiary_recently_item p br, .c-staffdiary_on .c-staffdiary_comment p br, .c-staffdiary_on .c-staffdiary_comment p { display: block; } .c-staffdiary_on .c-staffdiary_comment button, .c-staffdiary_on .c-staffdiary_recently_item { display: none; } /* スタッフ紹介 */ .c-staff_iconlink li { width: 50px; text-align: center; } .c-staff_iconlink a { display: block; } .c-staff_iconlink img { width: 50px; border-radius: 50px; vertical-align: bottom; } .c-staff_iconlink span { display: block; padding-top: 4px; color: var(--text-body); font-size: var(--size-caption-large); line-height: 1; } @media screen and (max-width: 320px){ .c-contents_label_type{ font-size: 7.5px; } } @media screen and (max-width: 330px){ .renta_logo_anniversary{ display: none; } } @media screen and (max-width: 360px){ .renta_logo_img { width: 66px; } .renta_logo_anniversary{ width: 30px; } .header_join { margin-left: 4px; } .header_join_btn{ min-width: auto; } .header_join_btn::before{ display: none; } } @media screen and (min-width: 600px){ :root { /*-----size-----*/ --side-p: 24px; /*-----font-size-----*/ --size-headline-large: 20px; --size-headline-medium: 18px; --size-headline-small: 16px; --size-body-large: 15px; --size-body-small: 14px; --size-caption-large: 13px; --size-caption-small: 12px; /*-----size-----*/ --header-h: 56.7px; } .floorTab_innerwrap{ height: 55px; } #head_hajimete, #head_stamp_logon { display: block; } .c-stamp_floating { display: none; } #frame_iosapp .c-stamp_floating { display: block; } .slider_floorAnchor li { margin-right: 6px; } /* -----section----- */ .c-section_large{ margin-top: 34px; } .c-section_medium{ margin-top: 32px; } .c-section_small{ margin-top: 30px; } .c-section_large.c-bgcolor{ padding: 34px 0 18px; } .c-section_medium.c-bgcolor{ padding: 32px 0 16px; } .c-section_small.c-bgcolor{ padding: 30px 0 14px; } /* -----Headline----- */ .c-headline_large { margin-bottom: 18px; } .c-headline_medium { margin-bottom: 16px; } .c-headline_small { margin-bottom: 14px; } .c-headline_caption { margin-top: -10px; margin-bottom: 12px; } .c-headline_large .c-headline_viewmore_icon img { width: 24px; height: 24px; } .c-headline_medium .c-headline_viewmore_icon img { width: 22px; height: 22px; } .c-headline_small .c-headline_viewmore_icon img { width: 20px; height: 20px; } /* -----Link list----- */ .c-linklist_text li { width: calc(100% / 2 - 12px); margin-right: 12px; } .c-linklist_text li a { font-size: 14px; } .c-linklist_text li a::after { width: 9px; height: 12px; } .c-linklist_btn{ display: flex; flex-wrap: wrap; } .c-linklist_btn li{ width: calc(100% / 5 - 4px); } .c-linklist_label li{ width: calc(100% / 5 - 16px / 5); } .c-linklist_label li:nth-child(3n){ margin-right: 4px; } .c-linklist_label li:nth-child(5n){ margin-right: 0; } /* -----Banner----- */ .c-banner_pc{ display: block; } .c-banner_sp{ display: none; } .c-bannerlist{ width: calc(100%/4 - 30px/4); margin-right: 10px; } .c-bannerlist:nth-child(2n){ margin-right: 10px; } .c-bannerlist:nth-child(4n){ margin-right: 0; } /* -----Page Base----- */ .c-innerwrap_side { padding-left: var(--side-p) !important; padding-right: var(--side-p) !important; } /*------adlist------*/ .c-adlist_section { padding: 32px 0; } .c-adlist_caption { font-size: 12px; } .c-adlist_fixed { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 24px 24px; } .c-adlist_fixed_list { width: calc(50% - 4px); } .parts_cookie_banner-headline_large{ font-size: 20px; } /*------popup------*/ .c-popup_illust_wrap{ padding: 32px; } /*------sheet------*/ .c-sheet { width: 86%; top: 50%; left: 50%; bottom: auto; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); transition: max-height 0s; max-width: 700px; border-radius: 24px; } .c-sheet_on, .c-sheet_innerwrap, .c-sheet_scrollwrap{ max-height: 560px; max-height: calc(var(--vh)* 100 - 120px); } @media screen and (max-height: 680px){ .c-sheet_on, .c-sheet_innerwrap, .c-sheet_scrollwrap{ max-height: calc(var(--vh)* 100 - 120px); } } .c-sheet_innerwrap{ border-radius: 24px; } .c-sheet_header{ height: 66px; } .c-sheet_header + .c-sheet_contens{ padding-top: 66px; } .c-sheet_header_headline{ padding: 24px; } .c-sheet_header_closetxt, .c-sheet_header_closeicon{ padding: 24px; } .c-sheet_header_closeicon::before{ width: 16px; height: 16px; } .c-sheet_contens, #frame_iosapp .c-sheet_contens{ padding-bottom: 0; } .c-sheet_close_sp { display: none; } .c-sheet_close_pc { display: block; width: auto; position: absolute; bottom: -46px; left: 50%; transform: translateX(-50%); } /*------Slider--------*/ .c-slidelist .swiper-slide { width: 145px; } .c-slider_change_primary .swiper-slide, .c-slider_contents_primary .swiper-slide { width: 122px; } .c-slider_change_secondary .swiper-slide, .c-slider_contents_secondary .swiper-slide { width: 92px; } /*------contents--------*/ .c-contents_list_wrap{ gap: 16px 10px; } .c-contents_list{ width: calc(100%/5 - 40px/5); } /*------popcard--------*/ .c-popcard_cover { width: 150px; } .c-popcard_headline{ font-size: 13px; } .c-popcard_title{ font-size: 16px; } .c-popcard_comment{ font-size: 14px; } .c-popcard_desc_wrap.close .c-popcard_comment{ -webkit-line-clamp: 7; } .c-popcard_credit{ font-size: 13px; } .c-popcard_editor, .c-popcard_date{ font-size: 13px; } /*------selectbox--------*/ .c-selectbox_wrap { margin: -8px 0 16px; } .c-selectbox select { font-size: 14px; } /*------localnavi--------*/ .c-localnavi_list a img{ width: 14px; } /*------Tab middle--------*/ .c-tab_middle.c-tab_middle_left{ justify-content: flex-start; gap: 32px; } /*------Switch--------*/ .c-switch{ width: 35px; height: 20px; } .c-switch::after{ width: 14px; height: 14px; left: 3px; } .c-switch:checked::after{ left: 18px; } /*------header--------*/ .top_header_wrap { border-bottom: none; } .header_fixed_wrap { padding: 0 24px; } .renta_logo_img { width: 91px; } .renta_logo_anniversary{ width: 35px; } .header_icon_wrap { padding: 9px 0 7px 0; } .header_icon_item { width: 44px; } .header_icon_wrap #head_buysel, .header_icon_wrap #head_giftcode, .header_icon_wrap #head_stamp_logoff{ display: block; } /*------categoryTab--------*/ .categoryTab_wrap{ padding-top: 12px; } .categoryTab_innerwrap li{ width: 200px; } /*------floorTab--------*/ .floorTab_wrap{ display: block; } .slider-floorTab .swiper-slide{ padding: 14px 0 18px; } .slider-floorTab .swiper-slide:not(:last-child){ margin-right: 24px; } .slider-floorTab .swiper-slide a{ text-align:center; line-height: 18px; } .slider-floorTab #tab_o a span{ width: 77px; height: 18px; } .slider-floorTab .swiper-slide a.genreMenu_btn{ padding: 0px 8px; } .slider-floorTab .swiper-slide a.genreMenu_btn::after{ width: 14px; height: 10px; } .genreMenu_section{ margin-top: 34px; padding: 0 32px; } .genreMenu_section:last-child{ padding-bottom: 24px; } .genreMenu_list{ display: flex; flex-wrap: wrap; } .genreMenu_list li{ width: calc(100% / 5 - 4px); } /*--------------- footer ---------------*/ .footer_sns_wrap div{ display: inline-block; vertical-align: middle; margin: 0 16px 0 0; } .footer_sns_wrap ul { display: inline-block; vertical-align: middle; } .footer_textlink_wrap a { font-size: 12px; } .footer_copy_wrap { font-size: 11px; } .footer_abj_wrap img { width: 13%; padding-right: 8px; } .footer_abj_innerwrap { max-width: 670px; margin: 0 auto; } .footer_abj_innerwrap div { width: 87%; } /* 書影スライド */ .c-slidelist .swiper-slide, .c-slider_change_primary .swiper-slide, .c-slider_change_secondary .swiper-slide, .c-slider_contents_primary .swiper-slide, .c-slider_contents_secondary .swiper-slide { padding-right: 10px; } /* ヘッダー画像 */ .header-banner_sp, .header-banner_pc { display: none; } .header-banner_tab { display: block; } /*------書店員追加--------*/ .c-rentastaff-writer_img { width: 56px; height: 56px; } .c-rentastaff-writer_inner:hover { background: var(--background-high); } /*--------------- 「探す」内にバナー設置 ---------------*/ .search-recom_banner_sp { display: none; } .search-recom_banner_pc { display: block; } /*--------------- 書店員のおすすめ ---------------*/ .c-staff_iconlink li, .c-staff_iconlink img { width: 60px; } } @media screen and (min-width: 768px){ /*------contents--------*/ .c-contents_list{ width: calc(100%/ 6 - 50px/6); } /*------フッター--------*/ .footer_textlink_wrap a:nth-of-type(4):after, .footer_textlink_wrap a:nth-of-type(12):after { content: ""; width: 1px; height: 10px; border-right: solid 1px var(--border-high); position: absolute; right: 0px; top: 8px; } .display_spOnly { display: none; } } @media screen and (min-width: 841px){ /*------slider--------*/ .c-slidelist .swiper-slide { width: 180px; } } /*pc版width990px+padding左右24px分*/ @media screen and (min-width: 1038px){ :root { --side-p: 0px; } /* -----Link list----- */ .c-linklist_label li{ width: calc(100% / 6 - 20px / 6); } .c-linklist_label li:nth-child(5n){ margin-right: 4px; } .c-linklist_label li:nth-child(6n){ margin-right: 0; } /* -----Banner----- */ .c-bannerlist{ width: calc(100%/4 - 36px/4); margin-right: 12px; } .c-bannerlist:nth-child(2n){ margin-right: 12px; } .c-bannerlist:nth-child(4n){ margin-right: 0; } .c-slider_adlist_link { padding: 12px; } .c-adlist_title { font-size: 14px; } .c-adlist_caption { margin-top: 2px; } /* -----Page Base----- */ .c-innerwrap { max-width: 990px; margin-left: auto; margin-right: auto; } .c-innerwrap_side { max-width: 990px; margin-left: auto; margin-right: auto; padding-left: var(--side-p) !important; padding-right: var(--side-p) !important; } .c-overbg { margin-left: calc(990px / 2 - var(--vw) * 50) !important; margin-right: calc(990px / 2 - var(--vw) * 50) !important; } .c-overbg.c-scrollstop{ padding-right: var(--scrollbar-w) !important; position: relative; left: calc(var(--scrollbar-w) / 2); } /*------slider--------*/ .c-slider_contents:hover .swiper-button-next, .c-slider_contents:hover .swiper-button-prev, .c-slider_adlist:hover .swiper-button-next, .c-slider_adlist:hover .swiper-button-prev, .c-slider_adlist_checked:hover .swiper-button-next, .c-slider_adlist_checked:hover .swiper-button-prev, .c-slidelist:hover .swiper-button-next, .c-slidelist:hover .swiper-button-prev { display: block; } .c-slider_contents:hover .swiper-button-disabled, .c-slider_adlist:hover .swiper-button-disabled, .c-slider_adlist_checked:hover .swiper-button-disabled, .c-slidelist:hover .swiper-button-disabled{ display: none; } .c-slider_contents_wrap, .c-slider_adlist_wrap, .c-slidelist_wrap{ margin-bottom: 24px; } .c-slidelist .swiper-slide { width: calc(100% / 5 - 16px); } .c-slider_change_primary .swiper-slide, .c-slider_contents_primary .swiper-slide { width: 150px; } .c-slider_change_secondary .swiper-slide, .c-slider_contents_secondary .swiper-slide { width: 110px; } /* 書影スライド */ .c-slider_change_primary .swiper-slide, .c-slider_change_secondary .swiper-slide, .c-slidelist .swiper-slide, .c-slider_contents_primary .swiper-slide, .c-slider_contents_secondary .swiper-slide { padding-right: 12px; } /*------contents--------*/ .c-contents_list_wrap{ gap: 24px 12px; margin-bottom: 24px; } .c-contents_list{ width: calc(100%/ 6 - 60px/6); } .c-contents_label_type{ font-size: 10px; } .c-contents_rankdesc{ min-height: 24px; padding-left: 24px; } .c-contents_ranknumber{ width: 24px; height: 24px; left: -2px; margin-top: -12px; } /*------header--------*/ .header_fixed_wrap { padding: 0; } .header_icon_wrap #head_help, .header_icon_wrap #head_info{ display: block; } /*------footer--------*/ .footer_topBack_wrap span, .footer_contentsNavi_wrap a { font-size: 15px; } .footer_contentsNavi_wrap a { font-size: 16px; padding: 20px 0; } .footer_sns_wrap { padding: 36px 0 24px; } .footer_sns_wrap div img { width: 180px; } .footer_sns_wrap li { margin: 0 5px; } .footer_sns_wrap li a { width: 36px; height: 36px; } .footer_textlink_wrap a { font-size: 14px; padding: 0 12px; line-height: 2.3; } .footer_textlink_wrap a:after, .footer_textlink_wrap a:nth-of-type(3):after, .footer_textlink_wrap a:nth-of-type(11):after { height: 14px; top: 9px; } /*------adlist------*/ .c-adlist_fixed { padding: 0 0 24px; gap: 0 16px; justify-content: center; } .c-adlist_fixed_list { width: calc(100% / 3 - 11px); } .c-adlist_fixed_list { margin-bottom: 24px; } /* 雑誌枠　レイアウトシフト用 */ .magazine-section_wrap .c-slider_contents_wrap { height: 210px; } /* ヘッダー画像 */ .header-banner_sp, .header-banner_tab { display: none; } .header-banner_pc { display: block; } } /*android版*/ @media screen and (min-width: 841px){ #frame_andapp { --side-p: 0px; } /* -----Page Base----- */ #frame_andapp .c-innerwrap { max-width: 800px; margin-left: auto; margin-right: auto; } #frame_andapp .c-innerwrap_side { max-width: 800px; margin-left: auto; margin-right: auto; } #frame_andapp .c-overbg { margin-left: calc(800px / 2 - var(--vw) * 50) !important; margin-right: calc(800px / 2 - var(--vw) * 50) !important; } #frame_andapp .c-overbg.c-scrollstop{ padding-right: var(--scrollbar-w) !important; position: relative; left: calc(var(--scrollbar-w) / 2); } /*------header--------*/ #frame_andapp .header_fixed_wrap { padding: 0; } #frame_andapp .header_icon_wrap #head_help, #frame_andapp .header_icon_wrap #head_info{ display: block; } } /* イベント装飾 */ /*--------------- event bg ---------------*/ /*トップとフッターが同じ画像の場合*/ /* .toplabel_wrap:not(.c-darkmode), .footer_bg_wrap { position: relative; overflow: hidden; background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/slider_bg_rentataisyo.png") no-repeat center / cover !important; } .toplabel_wrap:not(.c-darkmode)::before { content: ""; display: inline-block; width: 30px; height: 40px; position: absolute; top: 0; left: 4px; background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/slider_bg_rentataisyo_r.png") no-repeat center center; background-size: contain; vertical-align: middle; } .footer_bg_wrap::before { content: ""; display: inline-block; width: 42px; height: 54px; position: absolute; left: 16px; top: calc(100% - 180px); background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/slider_bg_rentataisyo_r.png") no-repeat center center; background-size: contain; vertical-align: middle; } .footer_bg_wrap > *:not(.confetti){ position: relative; z-index: 1; } .toplabel_wrap .slider2{ background: none; } .footer_bg_wrap .footer_abj_innerwrap div span, .footer_bg_wrap .inc_foot, .footer_bg_wrap .footer_textlink_wrap a { color: #fff; } .footer_bg_wrap .footer_textlink_wrap a:after { border-right: solid 1px rgba(255,255,255,0.6); } .footer_bg_wrap .footer_abj_innerwrap div span a, .footer_bg_wrap .footer_copy_wrap { color: rgba(255,255,255,0.6); } .footer_bg_wrap .footer_abj_wrap { border-top: solid 1px rgba(255,255,255,0.6); } .footer_bg_wrap .footer_sns_wrap div img, .footer_bg_wrap .footer_abj_wrap img { filter: brightness(2); } p#page-top a::after { background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/topbtn_halloween2026.png") no-repeat center / contain; } p#page-top a::after, #page-top a { width: 68px; height: 68px; } @media screen and (min-width: 420px){ .footer_bg_wrap::before { left: 32px; } } @media screen and (min-width: 768px){ .toplabel_wrap:not(.c-darkmode)::before { display: none; } .floor-navi_container { position: relative; } .floor-navi_container::before { content: ""; display: inline-block; width: 63px; height: 80px; position: absolute; bottom: 0; right: calc(100% + 16px); background: url("https://img.papy.co.jp/lc/renta/img/topics2/event_sliderbg/slider_bg_rentataisyo_r.png") no-repeat center center; background-size: contain; vertical-align: middle; } } @media screen and (min-width: 1024px){ .floor-navi_container::before { right: calc(100% + 32px); } .footer_bg_wrap::before { left: 20%; } } */ /* ネコチャンの日用 .renta_logo_link::after { content: ""; display: inline-block; width: 24px; height: 21px; margin-left: 4px; vertical-align: middle; background: url("https://img.papy.co.jp/lc/renta/img/mark/event/cat/logo_illust_cat.svg") no-repeat center / contain; } */ /*--------------- /event bg ---------------*/ .rentataisyo .c-contents_caption { color: #FFF; }