@charset "utf-8"; $pc: 1501px; // PC $sp: 480px; // スマホ @mixin pc { @media (max-width: ($pc)) { @content; } } @mixin sp { @media (max-width: ($sp)) { @content; } } /* ========================================================================== Base ========================================================================== */ /* ========================================================================== Base ========================================================================== */ body, h1, h2, h3, h4, h5, h6, div, p, ul, ol, li, dl, dt, dd, img, nav, figure { margin: 0; padding: 0; } ul, ol, li { list-style: none; } em { font-style: normal; } .content { line-height: 1.5; font-size: 15px; letter-spacing: 0.01em; -webkit-font-feature-settings: 'pkna'; font-feature-settings: 'pkna'; font-family: "Noto Sans JP", "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; a { color: inherit; } * { -webkit-box-sizing: border-box; box-sizing: border-box; } } .c-header-logoBox:hover { color: #000; } a { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; text-decoration: underline; -webkit-transition: 0.3s ease; transition: 0.3s ease; &:hover { color: #d00; text-decoration: none; } } img { vertical-align: middle; } .container { width: 100%; min-width: 960px; min-height: 700px; position: relative; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; @include sp { min-width: auto; min-height: auto; } } .content { position: relative; } .inner { position: relative; width: 960px; margin: 0 auto; @include sp { width: 100%; } } .bg-square { background: url("../img/utils/bg_gray_square.png") left bottom repeat; } .c-red { color: #d00; } .note-items { font-size: 12px; padding-left: 1em; position: relative; &:before { content: '\00203B'; position: absolute; left: 0; top: 0; } } /* ========================================================================== Base ========================================================================== */ .old-content { width: 740px; font-size: 13px; @include sp { width: 100%; } * { -webkit-box-sizing: content-box; box-sizing: content-box; @include sp { -webkit-box-sizing: border-box; box-sizing: border-box; } } } /*---------------------------------------- clearfix ----------------------------------------*/ .clearfix { &:after { content: "."; display: block; clear: both; visibility: hidden; height: 0px; font-size: 0.1px; line-height: 0.1px; } display: inline-block; position: relative; /* DW */ display: block; } /* Hides from IE-mac \*/ /* End hide from IE-mac */ /*---------------------------------------- font setting ----------------------------------------*/ /* 9 */ .font_xsmall { font-size: 9px; line-height: 1.3; } /* 10 */ .font_small { font-size: 10px; line-height: 1.3; } /* 12 */ .font_medium { font-size: 12px; line-height: 1.3; } /* 14 */ .font_large { font-size: 14px; line-height: 1.3; } /* 16 */ .font_xlarge { font-size: 16px; line-height: 1.3; } /* 18 */ .font_2xlarge { font-size: 18px; line-height: 1.3; } /* 20 */ .font_3xlarge { font-size: 20px; line-height: 1.3; } /* 22 */ .font_4xlarge { font-size: 22px; line-height: 1.1; } /* 24 */ .font_5xlarge { font-size: 24px; line-height: 1.1; } /* 40 */ .font_xxlarge { font-size: 40px; line-height: 1; } /*---------------------------------------- link setting ----------------------------------------*/ /*---------------------------------------- color setting ----------------------------------------*/ .blue01 { color: #0066cc; } .gray01 { color: #cccccc; } .gray02 { color: #666666; } .gray03 { color: #333333; } .pink01 { color: #ee9292; } .red01 { color: #e10000; } .white01 { color: #ffffff; } /*---------------------------------------- common setting ----------------------------------------*/ .indent01 { padding-left: 1em; text-indent: -1em; } .indent02 { padding-left: 2.5em; text-indent: -2.5em; } .indent03 { padding-left: 2em; text-indent: -2em; } /*---------------------------------------- listmark setting -----------------------------------------*/ .mark01 { padding-left: 8px; background: url(../img/cmn_mark01.gif) no-repeat left top; } .mark02 { padding-left: 8px; background: url(../img/cmn_mark02.gif) no-repeat left top; } .mark03 { padding-left: 8px; background: url(../img/cmn_mark03.gif) no-repeat left 1px; } .mark04 { padding-left: 8px; background: url(../img/cmn_mark04.gif) no-repeat left top; } /*---------------------------------------- content ----------------------------------------*/ /*---------------------------------------- cyukai01 ----------------------------------------*/ #cyukai01 { position: fixed; top: 130px; right: 0; } /* ========================================================================== parts ========================================================================== */ /* button ========================================================================== */ .btn { width: 230px; height: 50px; font-weight: bold; font-size: 15px; text-align: center; letter-spacing: 0.08em; @include sp { width: 100%; } a { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 0 18px; -webkit-transition: 0.3s ease; transition: 0.3s ease; text-decoration: none; &:hover { color: inherit; } span { margin: auto; } i { -webkit-transition: 0.3s ease; transition: 0.3s ease; } } } .btn-fill { position: relative; overflow: hidden; border-radius: 4px; -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); } .btn-fill-red a { border: solid 3px #d00; background-color: #d00; color: #fff; &:hover { color: #d00; background-color: #fff; i:before { -webkit-transition: 0.3s ease; transition: 0.3s ease; } .icon-arrow-white:before { color: #d00; // background-image: url("../img/utils/icon_arrow_red.png"); } .icon-mail-white:before { background-image: url("../img/utils/icon_mail_red.png"); } } } /* icon ========================================================================== */ .icon { display: inline-block; vertical-align: middle; &:before { content: ''; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100%; } } .icon-arrow { width: 16px; height: 18px; } .icon-arrow-down { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .icon-arrow-white:before { content: "→"; color: #FFF; font-size: 16px; font-weight: bold; font-style:normal; // background-image: url("../img/utils/icon_arrow_white.png"); } .icon-arrow-red:before { background-image: url("../img/utils/icon_arrow_red.png"); } .icon-arrow-black:before { background-image: url("../img/utils/icon_arrow_black.png"); } .icon-blank { width: 16px; height: 15px; &:before { background-image: url("../img/utils/icon_blank.png"); } } .icon-pdf { width: 23px; height: 24px; &:before { background-image: url("../img/utils/icon_pdf.png"); } } .icon-mail { width: 28px; height: 22px; } .icon-mail-white:before { background-image: url("../img/utils/icon_mail_white.png"); } .icon-mail-red:before { background-image: url("../img/utils/icon_mail_red.png"); } .icon-tel { width: 27px; height: 27px; } .icon-tel-red:before { background-image: url("../img/utils/icon_tel_red.png"); } .icon-map { width: 12px; height: 18px; &:before { background-image: url("../img/utils/icon_map.png"); } } /* link ========================================================================== */ .link-blank:after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 16px; height: 15px; background: url("../img/utils/icon_blank.png") no-repeat center center; } .link-pdf:after { content: ''; display: inline-block; vertical-align: middle; margin-left: 8px; width: 23px; height: 24px; background: url("../img/utils/icon_pdf.png") no-repeat center center; } /* ========================================================================== parts ========================================================================== */ /* p-btn ========================================================================== */ .p-btn { -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: bold; font-size: 15px; display: block; background-image: linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%); text-decoration: none !important; color: #fff !important; border-radius: 4px; line-height: 1; text-align: center; padding: 14px 0; -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.18); border: 3px solid #d00; &.-header { position: absolute; top: 0; right: 0; padding-left: 36px; padding-right: 43px; border-radius: 0 0 4px 4px; padding-top: 17px; padding-bottom: 14px; border-top: none !important; &::before { position: absolute; top: calc(50% - 7.5px); right: 15px; display: inline-block; content: ""; width: 16px; height: 18px; overflow: hidden; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } &:hover::before { background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat -16px 0; } } &.-arrow { position: relative; top: 0; right: 0; width: 230px; padding-left: 38px; padding-right: 38px; border-radius: 4px; &::before { position: absolute; top: calc(50% - 9px); right: 16px; display: inline-block; content: ""; width: 16px; height: 18px; overflow: hidden; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } &:hover::before { background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat -16px 0; } } &.-pdf { width: 460px; padding-left: 140px; padding-right: 65px; text-align: left; font-size: 20px; line-height: 1.3; &::before { right: 20px; } &::after { position: absolute; top: calc(50% - 24px); left: 80px; display: inline-block; content: ""; width: 39px; height: 48px; background-image: url(../img/icon_pdf.png); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } &:hover::after { background-position: right center; } } &.-contact { width: 100%; padding: 30px 39px 30px 71px; font-size: 20px; line-height: 1.2; &::after { position: absolute; top: calc(50% - 11px); left: 45px; display: inline-block; content: ""; width: 28px; height: 22px; background-image: url(../img/icon_contact.png); background-repeat: no-repeat; background-position: left center; background-size: auto 100%; } &:hover::after { background-position: right center; } } &.-clear { padding: 12px 40px; background-image: none; border: 1px solid #000; color: #000 !important; -webkit-box-shadow: none; box-shadow: none; &::before { right: 20px; background: url(../img/icon_arrow-r-black_white.png) no-repeat 0 0; } &:hover { color: #fff !important; background-color: #d00; border: 1px solid #d00; &::before { background: url(../img/icon_arrow-r-black_white.png) no-repeat -16px 0; } } } &:hover { background-image: none; color: #d00 !important; } } /* table ========================================================================== */ .table-default { width: 100%; border-collapse: collapse; tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } th { font-weight: bold; padding: 10px; text-align: left; font-size: 12px; background-color: #f2f2f2; vertical-align: top; } td { font-size: 15px; padding: 10px 15px; vertical-align: top; } } /* title ========================================================================== */ .title-section { position: relative; text-align: center; padding-bottom: 10px; margin-bottom: 20px; font-size: 22px; font-weight: bold; &:after { content: ''; display: block; width: 40px; height: 1px; background-color: #d00; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .title-block { font-weight: bold; font-size: 17px; margin-bottom: 20px; } /* ========================================================================== modules ========================================================================== */ /* ========================================================================== components ========================================================================== */ /* news ========================================================================== */ .news { padding: 70px 0 100px; } .news__list-items { display: table; width: 100%; padding: 10px 12px; border-bottom: 1px solid #fff; &:nth-of-type(1) { border-top: 1px solid #fff; } i { margin-left: 8px; } } .news__data { display: table-cell; width: 120px; font-size: 12px; @include sp { width: 20%; } } .news__title { display: table-cell; word-break: break-all; font-size: 15px; } /* second heading ========================================================================== */ .content__head { position: relative; } .content-title { background-image: linear-gradient(144deg, #e60000 0%, #e73535 0%, #da1515 100%); width: 100%; height: 120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; text-align: center; letter-spacing: 0.2em; @include sp { padding-top: 50px; } } .content-title__main { font-weight: bold; font-size: 36px; @include sp { font-size: 24px; } span { display: block; font-size: 16px; @include sp { font-size: 14px; } } } .content-navigation { width: 960px; background-color: #f2f2f2; border-radius: 4px; background: url("../img/utils/bg_gray_square.png") left bottom repeat; -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18); position: absolute; left: 50%; top: 100%; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); @include sp { width: 100%; } } .content-navigation__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 15px; line-height: 1.4; @include sp { flex-wrap: wrap; } } .content-navigation__list-items { font-weight: bold; margin: 0 20px; font-size: 15px; } .content-navigation__list a { color: #d00; display: -webkit-box; display: -ms-flexbox; display: flex; text-decoration: none; &:hover { color: #000; i:before { background-image: url("../img/utils/icon_arrow_black.png"); } } i { margin-right: 20px; } } /* p-headingL1 ========================================================================== */ .p-headingL1 { position: relative; z-index: 1; text-align: center; padding-top: 30px; padding-bottom: 30px; background-image: linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%); color: #fff; font-weight: bold; font-size: 36px; line-height: 1; letter-spacing: 0.1em; >span { letter-spacing: 0.02em; display: block; font-size: 16px; } @include sp { padding-top: 80px; } } /* ========================================================================== contents ========================================================================== */ .c-telContainer { width: 960px; margin: 40px auto 0; } .c-telContainer-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 20px; padding: 30px 0px 12px; li { width: 43%; &:nth-of-type(n+2) { border-left: 1px solid #cccccc; } } } .c-telContainer-detail { padding: 0 32px 10px; text-align: center; span { &:first-of-type { display: inline; padding-left: 40px; background-image: url(https://rims-web20.com/id/reprice2/common/img/icon_telephone.png); background-repeat: no-repeat; background-position: left center; background-size: 30px 30px; color: #dd0000; font-size: 30px; line-height: 1; font-weight: bold; } &:nth-of-type(n+2) { display: block; margin-top: 10px; font-size: 15px; line-height: 1.6; font-weight: bold; } } } .c-telContainer-comment { padding: 5px 30px; font-size: 15px; line-height: 1.6; span { color: #dd0000; font-size: 15px; line-height: 1.6; font-weight: bold; } } /* p-headingL2 ========================================================================== */ .p-headingL2 { text-align: center; >span { display: block; margin-bottom: 10px; font-size: 26px; line-height: 1; font-weight: bold; } &.-small>span { font-size: 22px; line-height: 1.09091; font-weight: bold; } &.-underLine::after { display: block; content: ""; width: 40px; height: 1px; margin: auto auto 20px auto; background-color: #dd0000; } } /* ========================================================================== modules ========================================================================== */ /* m-breadcrumb ========================================================================== */ .m-breadcrumb { position: relative; width: 100%; padding-top: 10px; padding-bottom: 10px; min-width: 960px; background-color: #333; @include sp { min-width: auto; } &::after { z-index: 0; position: absolute; bottom: -12px; left: 0; content: ""; display: block; width: 100%; height: 12px; background-image: linear-gradient(54deg, #e60000 0%, #e73535 0%, #da1515 100%); } } .m-breadcrumb-list { width: 960px; margin: 0 auto; @include sp { width: 100%; } } .m-breadcrumb-item { position: relative; display: inline-block; margin-right: 13px; color: #fff; font-size: 11px; &::after { position: absolute; top: -2px; right: -12px; color: #fff; content: ">"; display: block; } &:last-of-type::after { content: ""; display: none; } a { position: relative; color: #fff; font-size: 11px; &:hover { text-decoration: none; color: #d00; } } } /* c-resultContainer-box ========================================================================== */ .c-resultContainer-box { @include sp { width: 100% !important; } } /* m-commonTable ========================================================================== */ .m-commonTable { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; -ms-flex-wrap: wrap; flex-wrap: wrap; @include sp { display: block; } &.-overview { /* レイアウトが特殊なバージョン */ li { &._col1, &._col2, &._col3 { position: relative; border-bottom: none; } &._col1::after, &._col2::after, &._col3::after { position: absolute; bottom: 0; left: 0; display: block; content: ""; border-bottom: 1px solid #cccccc; } &._col1 { width: 100%; &::after { /* width: calc(((100% - 16px) / 3) * 1 + 0px); */ width: calc(((100% - 16px) / 3) * 3 + 16px); } >dl dd { width: calc(((100% - (8px * (3 - 1))) / 3) - 70px); @include sp { width: 100%; } } } &._col2 { /* width: calc(((100% - 16px) / 3) * 1 + 0px); */ width: calc(((100% - 16px) / 3) * 2 + 8px); @include sp { width: 100%; } &::after { width: 100%; } +._col2 { width: calc(((100% - 16px) / 3) * 2 + 8px); &::after { width: calc(((100% - 8px) / 2) * 1 + 0px); } >dl dd { width: calc(((100% - 8px * (2 - 1)) / 2) - 70px); @include sp { width: 100%; } } } } &._col3::after { width: 100%; } } } li { width: 100%; border-bottom: 1px solid #cccccc; &._col2 { width: calc(((100% - 8px) / 2) * 1 + 0px); @include sp { width: 100%; } } &._col3 { width: calc(((100% - 16px) / 3) * 1 + 0px); @include sp { width: 100%; } } &:first-of-type { border-top: 1px solid #cccccc; } >dl { display: -webkit-box; display: -ms-flexbox; display: flex; /*height: 100%;*/ dt { width: 100px; padding: 12px 10px; background-color: #f2f2f2; font-size: 12px; line-height: 2; font-weight: bold; } dd { width: calc(100% - 100px); padding: 12px 17px; font-size: 15px; line-height: 1.6; @include sp { width: 100%; } } } } } /* m-footerLinks ========================================================================== */ .m-footerLinks { width: 200px; &.-large { width: 300px; } .m-footerLinks-ttl { position: relative; display: block; color: #fff; margin-bottom: 14px; padding-top: 14px; padding-bottom: 10px; font-size: 14px; font-weight: bold; text-decoration: none; &::before { position: absolute; bottom: 0; left: 0; content: ""; display: block; height: 1px; width: 100%; background-color: #9d0f0f; } &::after { position: absolute; bottom: 0; left: 0; content: ""; display: block; height: 1px; width: 30px; background-color: #dd0000; } &:hover { color: #dd0000; } } .m-footerLinks-item a { display: inline-block; color: #fff; margin-bottom: 8px; text-decoration: none; &:hover { color: #dd0000; } } .m-footerLinks-area { margin-top: 18px; margin-bottom: 12px; } .m-footerLinks-areaBlock { margin-bottom: 3px; a { color: #fff; display: inline-block; margin-right: 10px; text-decoration: none; font-size: 10px; &:hover { color: #dd0000; } } } .p-btn { position: relative; background-color: white; &::before { position: absolute; top: calc(50% - 9px); right: 16px; display: inline-block; content: ""; width: 16px; height: 18px; overflow: hidden; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } &:hover::before { background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat -16px 0; } } } /* m-mainTtl ========================================================================== */ .m-mainTtl { &.-mainInfo { .m-mainTtl-ttl { font-size: 32px; line-height: 1; font-weight: bold; } .m-mainTtl-lead { margin-top: 16px; font-size: 17px; line-height: 1.52941; } } &.-estateList { .m-mainTtl-ttl { padding-left: 25px; /* background-image: url(../img/icon_arrow-r-black_white.png);*/ background-repeat: no-repeat; background-position: left center; font-size: 25px; line-height: 1; font-weight: bold; &:hover { color: #d00; text-decoration: none; } } .m-mainTtl-lead { margin-top: 10px; font-size: 16px; line-height: 1.5; } } } .m-mainTtl-category { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; } .m-mainTtl-tag { display: block; padding: 7px 17px; font-size: 13px; line-height: 1; font-weight: bold; &.-round { border-radius: 13px; border: 1px solid #dd0000; color: #dd0000; } &:nth-of-type(n+2) { margin-left: 8px; } } /* .m-mainTtl-tag.-square { border-radius: 2px; color: #ffffff; background-color: #dd0000; } */ .pano-icon { display: inline-block; color: #fff; background: #4c240f; padding: 9px 12px 8px; border-radius: 2px; font-size: 11px; } /* m-nav ========================================================================== */ .m-nav { margin-top: 10px; } .m-nav-list { width: 960px; display: -webkit-box; display: -ms-flexbox; display: flex; @include sp { width: 100%; } } .m-nav-item { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; width: 160px; text-align: center; &.fb60 { flex-basis: 60%; } &.fb70 { flex-basis: 70%; } &.fb80 { flex-basis: 80%; } &.fb90 { flex-basis: 90%; } &.fb100 { flex-basis: 100%; } &::before { content: ""; display: block; width: 1px; height: 17px; background-color: #ccc; position: absolute; left: 0; top: 14px; } &:last-of-type::after { content: ""; display: block; width: 1px; height: 17px; background-color: #ccc; position: absolute; right: 0; top: 14px; } >a { position: relative; display: block; width: 100%; padding-top: 14px; padding-bottom: 14px; text-decoration: none; font-size: 14px; font-weight: bold; } &:hover { >a { color: #d00; } .m-nav-childList { -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-name: slideIn; animation-name: slideIn; display: block; top: 43px; } } &.-active>a { color: #d00; &::after { position: absolute; bottom: 0; left: 74px; content: ""; display: block; width: 14px; height: 12px; background: url(../img/img_nav_active.png); } } .m-nav-childList { display: none; width: 260px; position: absolute; top: 43px; left: -50%; z-index: 2; font-size: 16px; background-color: #222222; -webkit-box-shadow: 0px 13px 20px 0px rgba(0, 0, 0, 0.18); box-shadow: 0px 13px 20px 0px rgba(0, 0, 0, 0.18); border-radius: 0 0 5px 5px; &.minus28 { left: -28%; } &.minus62 { left: -62%; } &.minus78 { left: -78%; } &:before { content: ""; position: absolute; top: -10px; left: 50%; margin-left: -5px; border: 5px solid transparent; border-bottom: 5px solid #000; } } .m-nav-childitem { display: table; width: 100%; &:first-of-type a::before { top: 4px; height: 44px; } &:last-of-type a::before { top: 2px; height: 44px; } &.-active>a { &::before { width: 256px; } &::after { left: 35px; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } } &:hover>a { &::before { -webkit-transition: 0.1s; transition: 0.1s; width: 256px; } &::after { left: 35px; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } } a { display: table-cell; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 28px 0 60px; width: 100%; height: 50px; text-align: left; vertical-align: middle; color: #fff; text-decoration: none; position: relative; font-size: 14px; &::before { z-index: 1; position: absolute; top: 2px; left: 0; content: ""; display: block; width: 0; height: 46px; background-color: #dd0000; border-radius: 0 5px 5px 0; } &::after { z-index: 2; content: ""; display: block; position: absolute; top: 25px !important; left: 30px; width: 16px; height: 18px; margin-top: -9px; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat -16px 0; } >span { position: relative; z-index: 2; padding-left: 5px; } } } } @-webkit-keyframes slideIn { 0% { display: none; opacity: 0; top: 48px; } 1% { display: block; opacity: 0.1; } 80% { display: block; opacity: 1; } 100% { display: block; opacity: 1; top: 43px; } } @keyframes slideIn { 0% { display: none; opacity: 0; top: 48px; } 1% { display: block; opacity: 0.1; } 80% { display: block; opacity: 1; } 100% { display: block; opacity: 1; top: 43px; } } /* ========================================================================== components ========================================================================== */ /* c-footer ========================================================================== */ .c-footer { position: relative; width: 100%; min-width: 960px; background-color: #333; color: #fff; letter-spacing: 0.08em; @include sp { min-width: auto; } } .c-footer-pagetop { position: relative; z-index: 11; width: 79px; height: 79px; overflow: hidden; -webkit-transform: translateX(401px); transform: translateX(401px); left: 50%; cursor: pointer; @include sp { display: none; } &.-off { -webkit-transition: 0.4s; transition: 0.4s; visibility: hidden; } &.-stay { position: absolute; top: -39px; } &.-active { position: fixed; bottom: 30px; } >img { position: absolute; top: 0; left: 0; } &:hover>img { left: -80px; } } .c-footer-linksBox { width: 960px; margin: 0 auto; padding-top: 16px; padding-bottom: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; @include sp { width: 100%; display: block; } } .c-footer-btmBox { margin: 0 auto; padding-top: 13px; padding-bottom: 13px; background-color: #e73535; } .c-footer-btmCnts { width: 960px; margin: 0 auto; overflow: hidden; @include sp { width: 100%; } } .c-footer-btmList { float: left; @include sp { float: none; width: 100%; text-align: center; } } .c-footer-btmItem { display: inline-block; margin-right: 20px; a { color: #fff; text-decoration: none; font-size: 10px; &:hover { color: #333; } } } .c-footer-copy { float: right; font-size: 10px; font-weight: bold; letter-spacing: 0.13em; @include sp { float: none; display: block; width: 100%; text-align: center; } } /* c-header ========================================================================== */ .c-header { width: 100%; min-width: 960px; background-color: #fff; } .c-header-inner { position: relative; width: 960px; margin: 0 auto; @include sp { width: 100%; } } .c-header .c-header-logoBox { text-decoration: none; display: inline-block; &:hover { opacity: 0.64; } } .c-header-company { font-weight: bold; padding-top: 10px; } .c-header-logo { display: block; margin-top: 8px; } /* 追記 ========================================================================== */ #floor-info::after { content: "部分"; } iframe.pano_iframe { width: 960px; height: 500px; margin-top: 24px; margin: 0 auto 80px; display: block; border: none; } .p-btn.pano-btn { width: 280px; margin: -40px auto 60px; padding-left: 36px; padding-right: 43px; border-radius: 4px; padding-top: 17px; padding-bottom: 14px; position: relative; &:before { position: absolute; top: calc(50% - 7.5px); right: 15px; display: inline-block; content: ""; width: 16px; height: 18px; overflow: hidden; background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat 0 0; } &:hover::before { background: url(https://27.rims-web.com/id/reprice1/file/sample/common/img/icon_arrow-r-white_red.png) no-repeat -16px 0; } } /* header 固定 20200504 ========================================================================== */ .fixedTOP { position: fixed; top: 0; left: 0; width: 100%; background: #fff; border-bottom: 1px solid #b3b3b3; -webkit-box-shadow: 0 10px 18px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 18px 2px rgba(0, 0, 0, 0.1); z-index: 2; margin: 0 auto; display: flex; justify-content: center; @include sp { display: none; } } @media screen and (max-width: 1314px) { .fixedTOP { .m-nav-list { width: 100%; } .m-nav-item { width: 17%; } .m-nav { width: 70%; } } } @media screen and (max-width: 1200px) { .fixedTOP { justify-content: start; .m-nav { width: 75%; padding-left: 5%; } .m-nav-item>a { font-size: 1.2vw; } } } @media screen and (max-width: 880px) { .fixedTOP .p-btn { font-size: 1.6vw; &.-header { padding-left: 30px; } } }