@charset "UTF-8"; /* 共通 */ img[src$="icon-outside.png"] { width: auto; } img[src$="icn-_blank.svg"], img[src$="icn-_blank-white.svg"] { width: 12px; height: 10px; } img[src$="icn-pdf.svg"], img[src$="icn-pdf-white.svg"] { width: 12px; height: 12px; } body#enquete .mod-hdg-cl2>:after { background: #ee4c79; height: 3px; } #wrap { overflow-x: hidden; } @media screen and (min-width: 767px) { body, .gHd2017_header, .gFt2017_footer { min-width: auto!important; } .gHd2017_parsonal, .gFt2017_footer { max-width: 950px; width: auto!important; } } /* ヘッダー */ h1 { font-family: Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; } a:visited { text-decoration: none; color: #314da5; } .str-main { color: #223; min-width: 320px; } .str-main *, .str-main *::before, .str-main *::after { box-sizing: border-box; } .str-contentInner { max-width: 960px; margin: 0 auto; } .str-contentInner> *:last-child { margin-bottom: 0; } :not([class^=x-]) > h1.hdg1 { font-size: 3.2rem; line-height: 1.3; color: #223; max-width: 960px; margin: 0 auto 5px auto; font-weight: normal; font-style: normal; padding: 0; } ol.breadcrumb { font-family: Meiryo, \30e1\30a4\30ea\30aa, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif; display: flex; flex-wrap: wrap; margin-top: 1.6rem; margin-bottom: 1.6rem; } ol.breadcrumb li { position: relative; font-size: 1.1rem; line-height: 1.2; margin-left: 2.8rem; } ol.breadcrumb li:first-child { margin-left: 0; } ol.breadcrumb li::before { display: block; content: ""; position: absolute; background-color: black; top: 50%; width: 5px; height: 1px; right: -1.6rem; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: -3px; } ol.breadcrumb li::after { display: block; content: ""; position: absolute; background-color: black; top: 50%; width: 5px; height: 1px; right: -1.6rem; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } ol.breadcrumb li:last-child::before, ol.breadcrumb li:last-child::after { content: none; } ol.breadcrumb li em { font-size: 1.1rem; font-weight: normal; font-style: normal; } @media only screen and (max-width: 767px) { :not([class^=x-]) > h1.hdg1 { font-size: 2.56rem; max-width: 100%; margin: 0; padding: 20px 12px 16px; } .breadcrumb-wrapper { display: none; } ol.breadcrumb li { line-height: 1.8; } } /* アンカーリンク集 */ #anchor { width: 100%; max-width: 960px; margin: 0 auto; } .mod-link-anchor > .list > li > a { font-size: 1.6rem; } @media only screen and (max-width: 767px) { .mod-link-anchor { margin: 0; } .mod-link-anchor > .list > li > a { font-size: 1.5rem; } } /* KV */ #kv .kv_cont, .kv-btm { margin: 0 auto; max-width: 960px; width: 100%; } #kv .kv_cont img { max-width: 100%; } .kv-btm { margin-top: 15px; } .kv-btm > *:last-child { margin-bottom: 0!important; } @media only screen and (max-width: 767px) { .kv-btm { padding: 0 16px; } } /* 先月の結果 */ .resultbox { border-width: 4px; border-color: #eed7d7; border-style: solid; border-radius: 10px; background-color: #fff; padding: 32px 20px; } .resultbox + .resultbox { margin-top: 20px; } .resultbox.-labeled { position: relative; padding-top: 69px; margin-top: 110px; } .resultbox > *:last-child { margin-bottom: 0; } .resultbox__label { position: absolute; top: -18px; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } .resultbox__label img { max-width: 100%; vertical-align: bottom; } .result { margin-bottom: 28px; } .result + .result { margin-top: 60px; } .result__title { color: #222233; font-size: 2rem; font-weight: bold; letter-spacing: .08em; margin-top: 0; margin-bottom: 27px; } .graph { display: flex; flex-wrap: wrap; justify-content: center; } .graph.-with-txt { justify-content: flex-start; } .graph.-with-txt .graph__img-wrapper { width: 45.7%; } .graph__img-wrapper img { max-width: 100%; vertical-align: bottom; } .graph.-with-txt .graph__txt-wrapper { width: 54.3%; } .graph__txt-list { font-size: 1.2rem; letter-spacing: .08em; } .graph__txt-list > li { margin-bottom: 20px; padding-left: 3em; text-indent: -3em; position: relative; } .graph__txt-list > li b { font-size: 1.5rem; margin-bottom: 20px; position: relative; } .graph__txt-list > li::before { content: ""; background-color: currentColor; border-radius: 50%; display: inline-block; height: 24px; width: 24px; margin-right: 11px; vertical-align: bottom; } .graph__txt-list > li.graph__txt-a { color: #259ace; } .graph__txt-list > li.graph__txt-b { color: #eb407c; } .graph__txt-list > li.graph__txt-c { color: #e27227; } .graph__txt-list > li.graph__txt-d { color: #32a095; } .graph__txt-list > li.graph__txt-e { color: #6c469a; } .graph__txt-list > li.graph__txt-f { color: #58a03b; } .graph__txt-list > li.graph__txt-etc { color: #222233; } .graph__txt-list > li.graph__txt-etc::before { color: #a8a8a8; } .commentary { background-color: #f7f7f2; padding: 22px 28px; margin-bottom: 20px; } .commentary > *:last-child { margin-bottom: 0; } .commentary__title { color: #222233; font-size: 2rem; font-weight: bold; letter-spacing: .08em; margin-top: 0; margin-bottom: 5px; } .commentary__txt { color: #222233; font-size: 1.5rem; margin-top: 0; } .commentary__txt em { color: #ee0000; } @media only screen and (max-width: 767px) { .resultbox { padding-top: 26px; padding-bottom: 26px; } .resultbox.-labeled { padding-top: 13.3vw; margin-top: 80px; } .resultbox__label { padding-right: 20px; padding-left: 20px; top: -5px; width: 100vw; } .graph__img-wrapper { text-align: center; } .graph.-with-txt .graph__img-wrapper { margin-bottom: 20px; width: 100%; } .graph.-with-txt .graph__txt-wrapper { width: 100%; } .graph__txt-list > li { margin-bottom: 10px; } .graph__txt-list > li::before { height: 18px; width: 18px; margin-right: 9px; } } /* 参加方法 */ body#enquete .mod-list-flow>.list>li>.inner>.hdg>.label { background-color: #ea5877; } body#enquete .mod-list-flow>.list>li>.inner>.media { width: auto; } /* 注意事項 */ #anc-notice .mod-list-ordered > ol.list > li:before { width: 1.467em; } @media only screen and (max-width: 767px) { .str-contentInner > section > .inner, .str-contentInner > .inner { padding: 0 16px; } #anc-notice .mod-hdg-cl2 + .mod-txt > p { text-align: left; } } /* 下層見出し */ body#enquete .hdg-lv2 { border-left: 5px solid #eb407c; color: #222233; font-size: 3.2rem; font-weight: bold; letter-spacing: .08em; line-height: 1.25; margin-top: 60px; margin-bottom: 20px; padding-left: 14px; } @media only screen and (max-width: 767px) { body#enquete .hdg-lv2 { font-size: 2.6rem; margin-top: 40px; } }