/* ================================================================ override.css for MI otokuisamatsushin masida@studio-uni Dec. 2022 ================================================================ */ /* -------------------------------- sizing guide -------------------------------- 30em=480px 48em=768px 64em=1024px 66.57609em=1066px 72.69022em=1164px -------------------------------- -------------------------------- color scheme -------------------------------- blue:#023894 #012269 gold:#9A906B #6C5E3B new : #9A906B #746C52 -------------------------------- */ /* ---------------------------------------------------------------- html definition ---------------------------------------------------------------- */ .cmp-text a { text-decoration: none; } .cmp-text a:hover { text-decoration: underline; -webkit-transition: all .5s; transition: all .5s; } /* ---------------------------------------------------------------- color scheme ---------------------------------------------------------------- */ .d2021 .page__footer, .pagination__prev >a, .pagination__next >a { background-color: #9A906B;} .pagination__prev:hover >a, .pagination__next:hover >a { background-color: #746C52;} .post-list__flag.is-ended { background-color: #8d8d8d; } .pickup-slider__flag.is-benefit { background-color: #9A906B; color: #fff; } /* ---------------------------------------------------------------- header & footer ---------------------------------------------------------------- */ /* -------------------------------- #header2021 -------------------------------- */ #header2021 .header-area-top { padding: 6px 18px; box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.1); /* display: flex; align-items: center; justify-content: space-between; box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1); height: 56px; border-bottom: 1px solid #b6b6b6; */ } #header2021 .header_logos img { width: 175px;} #header2021 #spNaviTrigger { top: 6px;} #header2021 #spNaviTrigger:hover { cursor: pointer;} /* ---------------- desktop ---------------- */ @media only screen and (min-width: 64em) { #header2021 .sub-navi__item.type-btn{ display: none;} #header2021 .header_logos { width: auto;} #header2021 .header_logos svg{ width: 76px;} #header2021 #subNaviLanguage { left: auto !important; right: 40px !important; top:55px; } .sp-nav-trigger { display: block;} #header2021 #spNaviTrigger { top: 6px;} #header2021 .sub-navi__items { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding-right: calc(2% + 15px + 10px); } #header2021 .sub-navi__item { display: flex; font-weight: 400; } } /* -------------------------------- footer -------------------------------- */ .page__footer { padding: 15px 0 !important;} .footer-navi { margin-top: 0;} .footer-copyright { margin-top: 10px;} /* ---------------------------------------------------------------- block style ---------------------------------------------------------------- */ /* -------------------------------- empty sectioning -------------------------------- */ .empty {display: none;} /* -------------------------------- header block title -------------------------------- */ .block-head, .block-head p { font-size: 22px; font-weight: bold; text-align: center;} .sp-navi .block-head { font-size: 14px; font-weight: bold; text-align: left; padding: 16px 4%;} /* -------------------------------- pagenation article list -------------------------------- */ .paginationarticlelist .p50-0 { padding: 20px 0;} /* -------------------------------- search index & sp navi -------------------------------- */ .search-index__items { padding-bottom: 7px;} .search-index__item {} .search-index__item a { text-decoration: none; display: block; position: relative; padding: 8px 0;} .search-index__item a:before, .sp-navi__item a:before { display: inline-block; margin-right: 8px; width: 6px; height: 6px; border-right: 2px solid #000; border-bottom: 2px solid #000; content: ""; transition-delay: 0s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-duration: 0.4s; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transform: translateY(-25%) rotateX(0) rotateZ(-45deg); transform: translateY(-25%) rotateX(0) rotateZ(-45deg); } /* -------------------------------- breadcrumb -------------------------------- */ .component.breadcrumb { padding: 25px 0; background-color: #f6f6f6;} /* -------------------------------- block : post-list -------------------------------- */ .post-list__item .post-list__img .post-list__bg-img { background-color: #eee; background-position: center !important; background-size: ; width: auto; height: auto; padding-top: 66.3%;} .post-list__item .post-list__info .post-list__date { margin-top: 5px;} @media only screen and (max-width: 48em) { .post-list__item .post-list__info .post-list__title { padding: 0;} .post-list__item .post-list__info .post-list__date { padding: 0;} } @media only screen and (max-width: 30em) { .post-list__item .post-list__info .post-list__title { font-size: 1.1rem;} .post-list__item .post-list__info .post-list__date { font-size: 1.0rem;} } /* -------------------------------- carousel -------------------------------- */ /* #area-pickup { border: 1px dotted #fff !important;} */ .article-slider {} .article-slider__inner { padding: 0;} .article-slider__items { } .article-slider__bg-img {/* padding-top: 85.14286%; background-size: contain; */ padding-top: 66.3%; background-color: #f6f6f6;} /* transition clear */ /* #pickupSlider, #area-event .event-slider__slider, #area-feature .event-slider__items{ transition: none !important; } .pickup-slider__img:after { transition-duration: 0s; } */ /* ---------------------------------------------------------------- page style ---------------------------------------------------------------- */ /* -------------------------------- article -------------------------------- */ article .ci-wrapper { max-width: 680px;} article .block { margin-bottom: 30px;} article .sub.block { margin-top: 30px;} article .main .title h1 { font-size: 18px;} article .main .view-condition {text-align: center; font-weight: bold;} article .sub .block-title p { font-weight: bold;} article .sub .text { margin-bottom: 15px;} article .sub .cmp-image { background-color: #fff; display: flex; justify-content: center; align-items: center; overflow: hidden;} article .sub .landscape { width: 100%; aspect-ratio: 920 / 610; } article .sub .landscape img { width: 100%; height: auto; } article .sub .portrait { } article .sub .portrait img { height: 100%; max-height: 392px; width: auto !important;} @media only screen and (max-width: 30em) { article .sub .portrait img { height: 100%; max-height: 300px; width: auto !important;} } /* ---------------- button ---------------- */ article .button button { width: 100% ; display: block; background-color: #000; color: #fff; padding: 10px 25px; margin: 15px 0 5px; } article .button button:hover { cursor: pointer; background-color: #666; -webkit-transition: all .5s; transition: all .5s; } /* ---------------- btn backtotop ---------------- */ .text .btn.backtotop { } .text .btn.backtotop p { margin-bottom: 0; } .text .btn.backtotop p a { width: 100% ; display: block; background-color: #9A906B; color: #fff; padding: 10px 25px; margin: 15px 0 5px; text-align: center;} .text .btn.backtotop p a:hover { cursor: pointer; background-color: #6C5E3B; -webkit-transition: all .5s; transition: all .5s; text-decoration: none; } /* ---------------------------------------------------------------- list style modification 2303 ---------------------------------------------------------------- */ @media only screen and (max-width: 30em) { body.index .is-column-3-2 .post-list__item { width: 100%;} body.index .is-column-3-2 .post-list__item:nth-child(2n) { margin-left: 0;} } /* [EOF] */