@charset "UTF-8"; /*===================================== 【リセットCSS__display以外の全てのスタイルを削除】 ======================================*/ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; word-break: break-all; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /*===================================== 【共通_base】 ======================================*/ body { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333; font-size: 16px; background: #fbf3ea; } * { box-sizing: border-box; } img { vertical-align: bottom; } :root { --main: #005E3C; --second: #009740; --sub: #e3f5c9; --red: #A03012; } .l-wrapper { background-color: #fff; } /*===================================== 【共通_header】 ======================================*/ .header { width: 100%; height: 14px; background-color: var(--main); } /*===================================== 【共通_sidebar】 ======================================*/ .sidebar { background-color: var(--sub); padding: 16px; } .sidebar__list { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 40px; } .sidebar__list li { width: 48%; border: 1px solid var(--main); font-weight: 600; } .sidebar__list li /*:not(:last-of-type)*/ { margin-bottom: 10px; } .sidebar__list li a { display: block; } .sidebar__posterPc { display: none; } .sidebar__posterSp { text-align: center; } .sidebar__posterSp a { font-size: 18px; display: inline-block; position: relative; } .sidebar__posterSp a::before { content: ""; position: absolute; top: 12px; left: -20px; transform: translateY(-50%); border: 5px solid transparent; border-left: 8px solid #009740; } .nav-item { font-size: 12px; display: inline-block; text-align: center; padding: 20px 4px; height: 100%; } .sidebar__list li:last-of-type { border: 4px dashed #BF8208; color: #BF8208; } .is-active { background-color: var(--main); color: #fff; } /*===================================== 【共通_footer】 ======================================*/ .footer { position: relative; background-color: var(--main); color: #fff; } .footer__inner { padding: 16px; } .footer__address { margin-bottom: 20px; } .footer__ttlBox { margin-bottom: 10px; } .footer__ttl { border: 1px solid #fff; text-align: center; padding: 10px 0; } .footer__txt { font-size: 14px; } .footer__txt li:not(:last-of-type) { margin-bottom: 8px; } .footer__annotation p { font-size: 12px; } .footer__annotation p:not(:last-of-type) { margin-bottom: 10px; } .footer__txt .txtUl { border-bottom: 1px dotted; padding-bottom: 2px; transition: 1s; font-weight: bold; color: #fff; } /*===================================== 【追加：共通__スタイル】 ======================================*/ .align_C { text-align: center; } .delate { text-decoration: line-through; } /*ーーーーーーーーーーーーーー準備中レイアウトーーーーーーーーーーーーーーー*/ .testBlock { background: #fff; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; } /*===================================== 【フロントページ(TOP)__スタイル】 ======================================*/ .mvPc { display: none; } .news { background-color: #fff; padding: 2rem; } .news__ttl { font-size: 21px; color: var(--main); border: 2px solid var(--main); font-weight: 600; padding: 10px; line-height: 1; margin-bottom: 8px; border-radius: 2px; } .news__time { font-size: 13px; } .news__txt:not(:last-of-type) { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; } .news__txt--first { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #ccc; } .date_wrap { border: 2px solid var(--main); padding: 10px; line-height: 1.2; margin-bottom: 16px; border-radius: 2px; } .date { font-size: 18px; color: var(--main); font-weight: 600; margin-bottom: 12px; } .date:last-of-type { margin-bottom: 0; } .date span { font-size: 16px; color: #333; font-weight: normal; } /*===================================== 【開催概要ページ】 ======================================*/ .outlineInfo { background-color: #fff; padding: 2rem; } .contents-A { margin-bottom: 20px; } .contents-A__ttl { font-size: 21px; background: var(--main); color: #fff; font-weight: 600; padding: 10px; line-height: 1; margin-bottom: 30px; border-radius: 2px; } .contents-B { margin-bottom: 20px; } .contents-B__ttl { font-size: 18px; color: var(--main); border-bottom: 2px solid var(--main); font-weight: 600; padding: 6px 0; line-height: 1; margin-bottom: 16px; } .contents-B__ttl-B { color: #333; padding-left: 6px; border-left: 4px solid var(--main); margin-bottom: 8px; background: var(--sub); } .contents-B__ttl04 { color: var(--main); font-weight: bold; } /*===================================== 【大会長挨拶ページ__スタイル】 ======================================*/ .messageMain { padding: 2rem; background-color: #fff; } .messageMain__ttl { font-size: 18px; color: #fff; font-weight: 600; background: #bc8917; padding: 10px; line-height: 1; margin-bottom: 16px; } .messageMedia { display: flex; flex-direction: column; align-items: center; } .messageMedia__img { width: 240px; margin-bottom: 16px; } .messageDesc { font-size: 14px; padding-left: 6px; border-left: 6px solid var(--main); margin-bottom: 2rem; } .messageDesc__ttl { font-size: 18px; margin-bottom: 8px; } .messageMainTxt__p { margin-bottom: 1rem; } /*===================================== 【プログラム委員会ページ__スタイル】 ======================================*/ .committee { display: flex; flex-wrap: wrap; justify-content: space-between; } .committee-list .contents-B__txt { margin-bottom: 0.4rem; } .committee-list .contents-B__txt::before { content: "●"; color: #009740; font-size: 9px; margin-right: 0.25rem; vertical-align: middle; } /*===================================== 【演題募集ページ__スタイル】 ======================================*/ .abstracts { padding: 2rem; background-color: #fff; } /*===================================== 【総会ページ__スタイル】 ======================================*/ .plenary_schedule::after { content: '▼'; color: var(--main); padding-left: 0.5rem; } .plenary_schedule dt { color: #666; } .plenary_schedule dd span { font-weight: bold; color: var(--main); } /*===================================== 【プログラムページ__スタイル】 ======================================*/ .program { background-color: #fff; padding: 2rem; } /*===================================== 【参加者へのお知らせページ__スタイル】 ======================================*/ .participants { padding: 2rem; background-color: #fff; } .participants_price { display: flex; margin: 0.5rem 0; } .participants_price dt { background: #eee; width: 7rem; padding: 0 0.5rem; } .participants_price dd { padding: 0 0.5rem; } /*===================================== 【企業展示ページ__スタイル】 ======================================*/ .page-exhibition { padding: 32px; } /*===================================== 【タイトルコンポーネント_01】 ======================================*/ .c-ttl-01 { font-size: 21px; font-weight: bold; color: #fff; background-color: #005E3C; padding: 10px; line-height: 1; } /*===================================== 【リンクコンポーネント_01】 ======================================*/ .c-link-01 { color: #888; border-bottom: 1px dotted #888; font-weight: bold; } .c-link-01:hover { opacity: 0.5; transition: 0.5s; } /*===================================== 【リンクコンポーネント_02】 ======================================*/ .c-link-02:hover { opacity: 0.5; transition: 0.5s; } /*===================================== 【ブロック_コンポーネント_05】 ======================================*/ .c-block-05 { font-family: '源ノ角ゴシック JP', '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳＰゴシック', 'MS PGothic', sans-serif; max-width: 500px; margin: 24px auto 0; } .c-block-05__ttl { font-size: 18px; font-weight: bold; color: #005E3C; padding-bottom: 8px; border-bottom: 2px solid #005E3C; } .c-block-05__media { margin-top: 24px; } .c-block-05__media.kao-merries { margin-top: 0; } .c-block-05__media-img { width: 70%; margin: 0 auto; } .c-block-05__media-img-item { width: 100%; } .c-block-05__media-img-02 { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center; } .c-block-05__media-img-02-item { width: 50%; } .c-block-05__media-img-02-item.kao { width: 45%; } .c-block-05__media-img-02-item.merries { width: 45%; } .c-block-05__media-desc { margin-top: 24px; } .c-block-05__media-desc.kao-merries { margin-top: 0px; } .c-block-05__media-desc-ttl { display: block; color: #333; font-weight: bold; position: relative; margin: 20px 0px 0px 20px; } .c-block-05__media-desc-ttl::before { content: ""; position: absolute; top: 5px; left: -20px; width: 14px; height: 14px; background-color: #005E3C; } .c-block-05__media-desc-ttl-02 { color: #005E3C; font-weight: bold; margin-top: 16px; } .c-block-05__media-desc-ttl-03 { margin-top: 16px; } .c-block-05__media-desc-ttl-04 { margin-top: 16px; background-color: #e3f5c9; border-left: 4px solid #005e3c; padding: 2px 8px; color: #333; } .c-block-05__media-desc-ttl-05 { color: #005E3C; font-weight: bold; } .c-block-05__media-desc-txt { margin-top: 16px; } .c-block-05__media-desc-txt-02 { font-size: 14px; margin-top: 12px; } .c-block-05__media-desc-txt-03 { margin-top: 8px; } .c-block-05__media-desc-txt-04 { margin-top: 4px; } .c-block-05__media-desc-list { margin-top: 4px; } .c-block-05__media-desc-list-item { position: relative; margin-left: 12px; } .c-block-05__media-desc-list-item::before { content: ""; position: absolute; top: 10px; left: -12px; width: 6px; height: 6px; background-color: #333; border-radius: 50%; } .c-block-05__media-desc-list-item-link { color: #888; border-bottom: 1px dotted #888; font-weight: bold; } .c-block-05__media-desc-list-item-link:hover { opacity: 0.5; transition: 0.5s; } .c-block-05__media-desc-img { margin-top: 8px; width: 100%; } .c-block-05__media-desc-link { margin-top: 8px; } .c-block-05__media-desc-link-item { font-weight: bold; color: #888; font-size: 18px; border-bottom: 1px dotted #888; word-break: break-all; } .c-block-05__media-desc-link-item:hover { opacity: 0.5; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; cursor: pointer; } .c-block-05__media-desc-move { width: 100%; height: auto; } .c-block-05__media-desc-move.youtube { height: 167px; } .c-block-05__media-desc-tel { font-weight: bold; color: #888; font-size: 18px; position: relative; margin-left: 20px; margin-top: 8px; } .c-block-05__media-desc-tel::before { font-family: "Material Icons"; content: "call"; position: absolute; top: 4px; left: -20px; width: 14px; height: 14px; } /*ーーーーーーーーーーーーーー img ーーーーーーーーーーーーーーー*/ .commonHeadImgPc { display: none; } /*===================================== 【responsive_タブレット用】 ======================================*/ @media screen and (min-width: 739px) { /*ーーーーーーーーーーーーーー【ブロック_コンポーネント_05】ーーーーーーーーーーーーーーー*/ .c-block-05 { max-width: 100%; } .c-block-05__media { display: -webkit-box; display: -ms-flexbox; display: flex; } .c-block-05__media-img { display: block; width: 28%; margin-right: 32px; } .c-block-05__media-img-02 { display: block; width: 28%; margin-right: 32px; } .c-block-05__media-img-02.funazawa { margin-top: -16px; } .c-block-05__media-img-02-item { width: 100%; } .c-block-05__media-desc { margin-top: 0px; width: 72%; } .c-block-05__media-desc-ttl.first { margin-top: 0; } .c-block-05__media-desc-txt-03 { margin-top: -4px; } .c-block-05__media-desc-move.youtube { height: 257px; } /*ーーーーーーーーーーーーーー共通レイアウトーーーーーーーーーーーーーーーー*/ .l-wrapper { max-width: 100%; display: flex; justify-content: center; background: none; } .mainContents { width: 740px; background: #fff; } /*ーーーーーーーーーーーーートップページ以外の共通head画像ーーーーーーーーーーーーーーー*/ .commonHeadImgPc { display: block; } .commonHeadImgSp { display: none; } /*ーーーーーーーーーーーーー共通サイドバーーーーーーーーーーーーーーーー*/ .sidebar { border-right: 10px solid #fbf3ea; width: 280px; padding: 0; } .sidebar__list { margin-bottom: 32px; border-top: 1rem solid var(--sub); } .sidebar__list li { width: 100%; border: none; border-bottom: 1px solid var(--main); } .sidebar__list li a { font-size: 15px; font-weight: normal; text-align: left; padding: 16px; } .sidebar__list li:not(:last-of-type) { margin-bottom: 0; } .sidebar__list li:hover { background-color: var(--main); color: #fff; } .sidebar__posterSp { display: none; } .sidebar__posterPc { display: block; padding: 0px 32px 32px; } .sidebar__posterPc a { display: block; margin-bottom: 8px; border: 1px solid #707070; } .sidebar__posterPc a:hover { opacity: 0.7; } .sidebar__posterPc p { text-align: center; } /*ーーーーーーーーーーーーー共通フッターーーーーーーーーーーーーーーー*/ .footer__inner { max-width: 1000px; margin: 0 auto; padding: 40px 16px 30px; } .footer__address { display: flex; } .footer__ttlBox { margin-right: 40px; } .footer__ttl { height: auto; padding: 10px 40px; } .footer__txt { font-size: 14px; font-weight: 300; } .footer__annotation { font-size: 14px; font-weight: 300; text-align: center; } .footer__annotation p:not(:last-of-type) { margin-bottom: 0; } /*ーーーーーーーーーーーーーー準備中レイアウトーーーーーーーーーーーーーーー*/ .testBlock { height: 100%; } .testBlock p { margin-bottom: 30%; } /*ーーーーーーーーーーーーートップページーーーーーーーーーーーーーーー*/ .mvSp { display: none; } .mvPc { display: block; max-width: 740px; } /*.news { height: 384px; }*/ /*ーーーーーーーーーーーーー開催概要ページーーーーーーーーーーーーーーー*/ .outlineInfo { height: 100%; } /*ーーーーーーーーーーーーー大会長挨拶ページーーーーーーーーーーーーーーー*/ .messageMedia { flex-direction: row; align-items: flex-start; margin-bottom: 24px; } .messageMedia__img { width: 200px; padding: 0; margin-bottom: 0px; margin-right: 32px; } .messageDesc { text-align: left; } /* .messageMainTxt:first-of-type { margin-bottom: 5rem; }*/ /*===================================== 【総会ページ__スタイル】 ======================================*/ .plenary_schedule { display: flex; margin: 0.5rem 0; } .plenary_schedule::after { display: none; } .plenary_schedule dt { width: 140px; } .plenary_schedule dd { padding-bottom: 0.5rem; } } /*===================================== 【responsive_PC用】 ======================================*/ @media screen and (min-width: 739px) { /*===================================== 【プログラム委員会ページ__スタイル】 ======================================*/ .committee { justify-content: inherit; gap: 0 8rem; } } /*ーーーーーーーーーーーーーー【ここから！準備中仮スタイル】ーーーーーーーーーーーーーーー*/ /*ーーーーーーーーーーーーーー test-nav-item__【準備中仮スタイル】ーーーーーーーーーーーーーーー*/ .test-nav-item { font-size: 12px; color: #888; display: inline-block; text-align: center; padding: 20px 4px; height: 100%; } .test-li { display: none; } /*ーーーーーーーーーーーーーー hover__【準備中仮スタイル】ーーーーーーーーーーーーーーー*/ .hover_test:hover { background-color: var(--sub); } @media screen and (min-width: 768px) { .hover_test:hover { background-color: var(--sub); color: var(--main) !important; } } /*ーーーーーーーーーーーーーー border__【準備中仮スタイル】ーーーーーーーーーーーーーーー*/ @media screen and (min-width: 768px) { .test-li { display: block; } .border_bottom_none { border-bottom: none !important; } } /*===================================== 【modify.scss__修正、追記】 ======================================*/ /*ーーーーーーーーーーーーーー margin ーーーーーーーーーーーーーーー*/ .mgT0 { margin-top: 0px; } .mgT10 { margin-top: 10px; } .mgT20 { margin-top: 20px; } .mgT30 { margin-top: 30px; } .mgR10 { margin-right: 10px; } .mgR20 { margin-right: 20px; } .mgR30 { margin-right: 30px; } .mgB10 { margin-bottom: 10px; } .mgB20 { margin-bottom: 20px; } .mgB30 { margin-bottom: 30px; } .mgB60 { margin-bottom: 60px; } .mgL-10 { margin-left: -10px; } .mgL3 { margin-left: 3px; } .mgL5 { margin-left: 5px; } .mgL10 { margin-left: 10px; } .mgL20 { margin-left: 20px; } .mgL30 { margin-left: 30px; } .mgRL5 { margin-right: 5px; margin-left: 5px; } .mgR5 { margin-right: 5px; } /*ーーーーーーーーーーーーーー padding ーーーーーーーーーーーーーーー*/ .pdT10 { padding-top: 10px; } .pdT20 { padding-top: 20px; } .pdT30 { padding-top: 30px; } .pdR10 { padding-right: 10px; } .pdR20 { padding-right: 20px; } .pdR30 { padding-right: 30px; } .pdB10 { padding-bottom: 10px; } .pdB20 { padding-bottom: 20px; } .pdB30 { padding-bottom: 30px; } .pdL10 { padding-left: 10px; } .pdL20 { padding-left: 20px; } .pdL30 { padding-left: 30px; } /*ーーーーーーーーーーーーーー btn ーーーーーーーーーーーーーーー*/ .link-btn a { display: inline-block; padding: 15px 30px; background: #BF8208; color: #fff; border-radius: 3px; text-decoration: none; transition: 0.3s; } .link-btn a:hover { opacity: 0.6; } /*ーーーーーーーーーーーーーー text ーーーーーーーーーーーーーーー*/ .txtUl { border-bottom: 1px dotted; padding-bottom: 2px; transition: 1s; font-weight: bold; color: #888; } .txtUl:hover { border-bottom: none; transition: 1s; } .quote01 { position: relative; padding: 0px 12px; white-space: nowrap; text-align: center; } .quote01::before, .quote01::after { content: ""; position: absolute; top: 0px; display: block; width: 1px; height: 100%; background: #fff; } .quote01::before { transform: rotate(40deg); left: -4px; margin-left: 5px; } .quote01::after { right: 4px; transform: rotate(40deg); } .small_txt { font-size: 14px; } .txt_indent { text-indent: -1rem; padding-left: 1rem; } .txt_indent2 { text-indent: -2rem; padding-left: 2rem; } .txt_indent-03-3 { text-indent: -3.3rem; padding-left: 3.3rem; } .txt_indent-04-2 { text-indent: -4.2rem; padding-left: 4.2rem; } .list-disc { list-style: disc; padding-left: 1rem; } .txt_red { color: #dc143c; } .txt_ul { border-bottom: 1px solid #333; } .txt-a-c { text-align: center; } /*ーーーーーーーーーーーーーー link ーーーーーーーーーーーーーーー*/ .img-link:hover { opacity: 0.5; transition: 0.5s; cursor: pointer; } .link-indicate-txt { position: relative; margin-left: 20px; margin-top: 8px; } .link-indicate-txt::before { content: ""; position: absolute; top: 4px; left: -20px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 14px; height: 14px; background-color: #333; } /*ーーーーーーーーーーーーーー font-weight ーーーーーーーーーーーーーーー*/ .fwb { font-weight: bold; } .fwn { font-weight: normal; } /*ーーーーーーーーーーーーーー font-size ーーーーーーーーーーーーーーー*/ .fsz-16 { font-size: 16px; } .fsz-14 { font-size: 14px; } /*ーーーーーーーーーーーーーー color ーーーーーーーーーーーーーーー*/ .color-333 { color: #333; } /*ーーーーーーーーーーーーーー display ーーーーーーーーーーーーーーー*/ .display-b { display: block; } /*# sourceMappingURL=style.css.map */