@charset "UTF-8"; /* popupBox -------------------------------------------------- */ .popupBox { position: fixed; bottom: 0; } .popupBoxBody { width: 100%; position: relative; } @media screen and (min-width: 960px) { .popupBox { width: 348px; right: 30px; z-index: 999; } } @media screen and (max-width: 959px) { .popupBox { width: 261px; right: 10px; z-index: 1000; } } /* popup -------------------------------------------------- */ .popup { display: inline-block; position: absolute; /* position: fixed; right: 30px;*/ top: 100%; font-family: "ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro","メイリオ",Meiryo; font-weight: bold; border-top-left-radius: 7px; border-top-right-radius: 7px; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); background-color: #ffffff; /* z-index: 999;*/ overflow: hidden; z-index: 10; } .popupTtlWrap { width: 348px; /* display: table; vertical-align: middle; */ display: -webkit-flex; /* Safari */ display: flex; overflow: hidden; cursor: pointer; border-top-left-radius: 7px; border-top-right-radius: 7px; } .popupOpen { width: 301px; height: 47px; /* padding-left: 8px;*/ padding-left: 12px; /* display: table-cell;*/ vertical-align: middle; border-right: 1px rgba(0, 0, 0, 0.1) solid; position: relative; } .popupOpen .jsArrow { content: ''; width: 11px; height: 11px; display: block; position: absolute; top: 22px; right: 16px; transform: rotate(-45deg); } .popupOpen .jsArrow.jsArrowActive { top: 15px; transform: rotate(135deg); } .popupOpen:hover { opacity: 0.8; } .popupTtl { width: 250px; font-size: 14px; font-size: 1.4rem; font-weight: bold; margin: 0; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; line-height: 47px; } .before .popupTtl { letter-spacing: -0.03em; } .popupClose { width: 47px; height: 47px; /* display: table-cell;*/ position: relative; text-indent: 100%; white-space: nowrap; overflow: hidden; position: relative; } .popupClose:before { content: ''; width: 8px; height: 8px; display: block; position: absolute; top: 19px; left: 25px; transform: rotate(225deg); } .popupClose:after { content: ''; width: 8px; height: 8px; display: block; position: absolute; top: 19px; left: 13px; transform: rotate(45deg); } .popupClose:hover { opacity: 0.8; } .popupContent { display: inline-block; } .popupContent:hover { text-decoration: none; } .popupContentLink { height: 100%; font-size: 0;/* 画像の場合 */ } @media screen and (max-width: 959px) { .popupOpenBtn { width: 35px; } .popupOpen { width: 226px; /* padding-left:4px; 文字数通常*/ padding-left:10px; } .popupOpen .jsArrow { width: 8px; height: 8px; top: 15px; right: 12px; } .popupOpen .jsArrow.jsArrowActive { top: 9px; } .popupOpen:hover { opacity: 1; } .popupClose { width: 35px; height: 35px; } .popupClose:before { width: 6px; height: 6px; top: 13px; left: 17px; } .popupClose:after { width: 6px; height: 6px; top: 13px; left: 9px; } .popupTtl { width: 195px; /* width: 191px; 文字数通常*/ font-size: 11px; font-size: 1.1rem; letter-spacing: -0.085em; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; line-height: 35px; } .popupContentLink:hover { opacity: 1; } } /* popup -------------------------------------------------- */ .popup { width: 348px; height: 417px; } .popupTtlWrap { height: 47px; } .popupClose:hover { opacity: 0.8; } .popupContent { width: 348px; height: 370px; } .popupContentLink { height: 100%; font-size: 0;/* 画像の場合 */ } .popupImgTxt { width: 100%; } @media screen and (max-width: 959px) { .popup { width: 261px; height: 313px; } .popupTtlWrap { width: 100%; height: 35px; } .popupContent { width: 261px; height: 278px; } .popupImgTxt { width: 261px; } } /*以下、デザインによって変更 -------------------------------------------------- */ /*goto201211*/ .goto201211 { background-color: #027f77; } /* @media screen and (min-width: 960px) { .goto201211 .popupTtl { font-size: 1.6rem; } } */ .goto201211 .popupOpen { background-color: #027f77; color: #fff; } .goto201211 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .goto201211 .popupClose { background-color: #027f77; } .goto201211 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .goto201211 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } .goto201211 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } /*pha201202*/ .pha201202 { background-color: #b58428; } @media screen and (min-width: 960px) { .pha201202 .popupTtl { font-size: 1.6rem; } } .pha201202 .popupOpen { background-color: #b58428; color: #fff; } .pha201202 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .pha201202 .popupClose { background-color: #c59030; } .pha201202 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .pha201202 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } .pha201202 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } /*aaip200221*/ .aaip200221 { background-color: #e5da3b; } @media screen and (min-width: 960px) { .aaip200221 .popupTtl { font-size: 1.4rem; } } .aaip200221 .popupOpen { background-color: #e5da3b; color: #002eb0; } .aaip200221 .popupOpen .jsArrow { border-top: 1px solid #0210c1; border-right: 1px solid #0210c1; } .aaip200221 .popupClose { background-color: #ece36c; } .aaip200221 .popupClose:before { border-top: 1px solid #0210c1; border-right: 1px solid #0210c1; } .aaip200221 .popupClose:after { border-top: 1px solid #0210c1; border-right: 1px solid #0210c1; } .aaip200221 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } .aaip200221 .popupContentLinkContentItem { width: 100%; } .aaip200221 .popupContentLinkContentItem img { width: 100%; vertical-align: top; } /*ana211201*/ .ana211201 { background-color: #d89010; } @media screen and (min-width: 960px) { .ana211201 .popupTtl { font-size: 1.6rem; } } .ana211201 .popupOpen { background-color: #d89010; color: #fff; } .ana211201 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .ana211201 .popupClose { background-color: #d89010; } .ana211201 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .ana211201 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } .ana211201 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } /*lk221011*/ .lk221011 { background-color: #d89010; } @media screen and (min-width: 960px) { .lk221011 .popupTtl { font-size: 1.3rem; } } .lk221011 .popupOpen { background-color: #d89010; color: #fff; } .lk221011 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .lk221011 .popupClose { background-color: #d89010; } .lk221011 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .lk221011 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } /*media221016*/ .popupTtlWrap.media221016 { background-color: #1895c5; height: 62px; } @media screen and (max-width: 959px) { .popupTtlWrap.media221016 { height: 48px; } } .popupContent.media221016 { height: 386px; } @media screen and (min-width: 960px) { .media221016 .popupTtl { font-size: 1.3rem; } } .media221016 .popupTtl { line-height: 20px; text-overflow: initial; white-space: normal; margin: 12px 0 0; } @media screen and (max-width: 959px) { .media221016 .popupTtl { line-height: 17px; margin: 8px 0 0; } } .media221016 .popupOpen { background-color: #1895c5; color: #fff; height: 62px; } @media screen and (max-width: 959px) { .media221016 .popupOpen { height: 48px; } } .media221016 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; top: 28px; } @media screen and (max-width: 959px) { .media221016 .popupOpen .jsArrow { top: 21px; } } .media221016 .popupClose { background-color: #1895c5; } .media221016 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; top: 27px; } .media221016 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; top: 27px; } @media screen and (max-width: 959px) { .media221016 .popupClose:before, .media221016 .popupClose:after { top: 21px; } } .media221016 .popupContentLink { position: relative; } .media221016 .popupContentLink a { display: block; position: absolute; width: 50%; height: 100%; top: 0; } .media221016 .popupContentLink a:nth-child(1) { left: 0; } .media221016 .popupContentLink a:nth-child(2) { right: 0; } /*anbb221018*/ .anbb221018 { background-color: #d89010; } @media screen and (min-width: 960px) { .anbb221018 .popupTtl { font-size: 1.3rem; } } .anbb221018 .popupOpen { background-color: #d89010; color: #fff; } .anbb221018 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .anbb221018 .popupClose { background-color: #d89010; } .anbb221018 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .anbb221018 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } .anbb221018.after .popupContentLink { position: relative; } .anbb221018.after .popupContentLink a { display: block; position: absolute; width: 50%; height: 100%; top: 0; } .anbb221018.after .popupContentLink a:nth-child(1) { left: 0; } .anbb221018.after .popupContentLink a:nth-child(2) { right: 0; } /*eventwari221114*/ .eventwari221114 { background-color: #172b86; } @media screen and (min-width: 960px) { .eventwari221114 .popupTtl { font-size: 1.6rem; } } .eventwari221114 .popupOpen { background-color: #172b86; color: #fff; } .eventwari221114 .popupOpen .jsArrow { border-top: 1px solid #fff; border-right: 1px solid #fff; } .eventwari221114 .popupClose { background-color: #172b86; } .eventwari221114 .popupClose:before { border-top: 1px solid #fff; border-right: 1px solid #fff; } .eventwari221114 .popupClose:after { border-top: 1px solid #fff; border-right: 1px solid #fff; } .eventwari221114 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } /*mediasekai230824*/ .mediasekai230824 { background-color: #5c0007; } .mediasekai230824 .popupTtl { line-height: 1.3; padding-top: 4px; } @media screen and (min-width: 960px) { .mediasekai230824 .popupTtl { font-size: 1.3rem; line-height: 1.4; padding-top: 6px; } } .mediasekai230824 .popupOpen { background-color: #5c0007; color: #f6edac; } .mediasekai230824 .popupOpen .jsArrow { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .mediasekai230824 .popupClose { background-color: #5c0007; } .mediasekai230824 .popupClose:before { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .mediasekai230824 .popupClose:after { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .mediasekai230824 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; } /*anayuki231206*/ .anayuki231206 { background-color: #d89010; } @media screen and (min-width: 960px) { .anayuki231206 .popupTtl { font-size: 1.6rem; } } .anayuki231206 .popupOpen { background-color: #d89010; color: #fff; } .anayuki231206 .popupOpen .jsArrow { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .anayuki231206 .popupClose { background-color: #d89010; } .anayuki231206 .popupClose:before { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .anayuki231206 .popupClose:after { border-top: 1px solid #f6edac; border-right: 1px solid #f6edac; } .anayuki231206 .popupContentLinkContent { display: -webkit-box; display: -ms-flexbox; display: flex; }