@charset "utf-8"; .houjin-area-contents { padding: 32px 0 40px; } /***************************************** タイトルエリア *****************************************/ .houjin-title-area { margin: 0 16px 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } /****************************** 法人向け ******************************/ .houjin-area { padding: 32px 16px; margin-bottom: 40px; } .houjin-area-box-ttl { font-size: 22px; color: #1A1C1E; margin: 0 16px 16px; font-weight: bold; } .houjin-area-ttl-box { 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; margin-bottom: 16px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .houjin-area-btn-white { background: #FFFFFF; border: 1px solid #DFE4E9; border-radius: 24px; padding: 12px 42px 12px 16px; font-size: 14px; color: #31353A; line-height: 16px; position: relative; margin: 0 0 0 auto; font-weight: bold; } .houjin-area-btn-white:after { background-image: url(../images_20m4/common/btn/btn_blank@2x.png); top: 50%; right: 10px; width: 24px; height: 24px; margin-top: -12px; content: ''; display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; vertical-align: middle; } .houjin-area-btn-white:hover { background-color: #F6F7F8; } .houjin-area-txt { font-size: 16px; color: #1A1C1E; letter-spacing: 0; text-align: justify; line-height: 26px; } .houjin-area-txt-caution { font-size: 14px; color: #31353A; margin-top: 14px; position: relative; padding-left: 18px; line-height: 22px; } .houjin-area-txt-caution:before { content: "\203b"; position: absolute; top: 0; left: 0; } .houjin-area-yellow { letter-spacing: 0; text-align: center; background: #FFE26E; border: 4px solid #FFFFFF; box-shadow: 0 0 4px 0 rgba(0,0,0,0.08); border-radius: 25px; font-weight: bold; padding: 10px 44px 10px 16px; white-space: nowrap; font-size: 14px; color: #31353A; margin: 0 auto; line-height: 14px; display: block; position: relative; max-width: 116px; width: 100%; } .houjin-area-yellow:after { background-image: url(../images_20m4/common/btn/btn_blank_white@2x.png); top: 50%; right: 6px; width: 24px; height: 24px; margin-top: -12px; content: ''; display: inline-block; background-size: contain; background-repeat: no-repeat; position: absolute; vertical-align: middle; } .houjin-area-yellow:hover { background: #FFF4A2; } .houjin-area-yellow-wrapper { margin: 24px auto 0; } .houjin-area-yellow-wrapper-inner { 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; } .houjin-area-yellow-wrapper-inner .houjin-area-yellow { margin: 0 16px 0 0; max-width: 150px; } .houjin-area-yellow-wrapper-inner .houjin-area-yellow { margin: 0; } .houjin-area-yellow-wrapper-inner div:nth-child(odd) { margin-right: 16px; } /****************************** tablet ******************************/ @media screen and (min-width: 768px) { /********** タイトルエリア **********/ .houjin-title-area { margin: 0 auto 36px; max-width: 746px; width: 100%; } /********** common要素 **********/ .contents-wrap, .houjin-area, .houjin-area-box { max-width: 746px; margin: 0 auto; width: 100%; } .houjin-area { padding: 32px; } .houjin-area-box { margin: 0 auto 40px; } .houjin-area-box-pc:last-child .houjin-area-box:last-child { margin: 0 auto; } /********** border **********/ .brdbno-tabpc { border-bottom: none; } .houjin-area-contents { padding: 32px 0 64px; } .houjin-area-yellow-wrapper-inner .houjin-area-yellow { max-width: 160px; } /********** サービスロゴ サイズ調整 **********/ #mydcm_biz_securitymanager_next .houjin-area-img.houjin-area-img-logosize { width: 280px; height: auto; } } /****************************** PC ******************************/ @media screen and (min-width: 980px) { /****************************** 法人向け ******************************/ .houjin-area { padding: 40px 32px; margin: 0; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: inherit; } .houjin-area-box { max-width: inherit; width: 460px; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .houjin-area-box-pc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 64px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .houjin-area-yellow-wrapper { display: block; margin: auto auto 0; } .houjin-area-ttl-box-wrapper { margin: 0 0 24px 0; } .houjin-area-box-pc:last-child { margin-bottom: 0; } .houjin-area-box-pc:last-child .houjin-area-box:last-child { margin: 0; } .houjin-area-txt { line-height: 32px; } /********** common要素 **********/ .contents-wrap { max-width: 960px; margin: 0 auto; width: 100%; } .houjin-title-area { max-width: 960px; margin: 0 auto 36px; width: 100%; } .houjin-area-contents { padding: 16px 0 64px; } } @media screen and (max-width: 320px) { .houjin-area-yellow-wrapper-inner .houjin-area-yellow { margin: 0 6px 0 0; max-width: 132px; padding: 10px 30px 10px 2px; } .houjin-area-yellow-wrapper-inner div:nth-child(odd) { margin-right: 6px; } .houjin-area-img.houjin-area-img-logosize { width: 174px; height: auto; } }