@charset "utf-8"; /* ========================================================================== TOPY AGENCY — base stylesheet Written from scratch by IKDO (2026-09). Load order: style.css → site.css → style-sp.css Conventions: page types are addressed by their class (.form, .jump …), shared looks are grouped with :is(), offsets use logical properties. ========================================================================== */ :root { --c-text: #666; --c-strong: #3f4041; --c-link: #007ac0; --c-muted: #8c8c8c; --c-faint: #c8c8c8; --c-accent: #fbce2f; --c-sky: #00b4ed; --c-leaf: #68b82e; --c-line: #cbcccc; --c-panel: #f4f4f0; --c-rule: #c4c4c2; --c-card-edge: #cddfe9; --c-card-edge-soft: #e3e9ec; --c-field: #f6f5f0; --c-field-line: #e1e0e0; --c-go: #3cb3dd; --tag-insurance: #00a5db; --tag-travel: #704500; --tag-design: #55b332; --tag-company: #f7af00; --w-page: 950px; --shadow-card: 0 0 5px #999; --label-col: 180px; --label-gap: 14px; --field-w: 363px; } /* ---------- 1. Reset ------------------------------------------------------ */ html, body, div, span, p, a, img, em, strong, b, q, pre, code, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, caption, thead, tbody, tr, th, td, form, fieldset, legend, label, blockquote, address, figure, header, footer, section, nav { margin: 0; padding: 0; } :is(h1, h2, h3, h4, h5, h6) { font-size: medium; } :is(h1, h2, h3, h4, h5, h6, span, em, p, div, li, dt, dd) { font-weight: normal; } :is(ul, ol) { list-style: none; } :is(em, i, dfn, cite, address) { font-style: normal; } img, fieldset { border: 0; } a { overflow: hidden; text-decoration: none; color: #333; } a:focus-visible { outline: 2px solid var(--c-link); outline-offset: 2px; } table { border-spacing: 0; border-collapse: collapse; } :is(th, td) { text-align: left; font-size: inherit; } :is(input, select) { vertical-align: middle; } :is(input, select, textarea) { margin: 0; } hr { display: none; } /* underline on hover for text links in these areas */ :is(#tpath, #footer, #header .header_list, .minibanner, .info > ul li, #lcontents .subnav .subbanner, .mono_page #maincontents .section) a:hover { text-decoration: underline; } /* ---------- 2. Base ------------------------------------------------------- */ body { border-top: 5px solid var(--c-accent); background: #fff; color: var(--c-text); font: 14px/1.6 "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, "Yu Gothic", "Noto Sans JP", sans-serif; } /* soft glow behind the content on general pages */ .theme_basic { background: radial-gradient(ellipse 300px 115px at calc(50% + 420px) 415px, rgba(214, 196, 110, .6), transparent 100%), radial-gradient(ellipse 460px 175px at calc(50% + 360px) 440px, rgba(232, 240, 180, .6), transparent 100%), radial-gradient(ellipse 640px 190px at calc(50% - 300px) 440px, rgba(242, 234, 196, .35), transparent 100%), #fff; } .theme_insurance { background: url(../images/theme/bg_insurance.png) 50% 205px no-repeat #fff; } .c_headfix { text-indent: -1em; padding-left: 1em; } /* phone-only menu items and the menu button stay hidden on wide screens (see style-sp.css) */ .show_sp, #header .menu_icon { display: none; } /* ---------- 3. Header ----------------------------------------------------- */ #header { width: 1024px; margin-inline: auto; position: relative; } #header h1 { width: 491px; height: 34px; margin: 42px 41px 28px; overflow: hidden; white-space: nowrap; text-indent: 100%; background: url(../images/theme/header_logo.png) 0 0 no-repeat; } #header h1 > a { height: 100%; display: block; } #header .header_list { position: absolute; inset: -30px 37px auto auto; display: flex; align-items: flex-start; font-size: 10px; } #header .header_list > li { padding: 4px 15px 0; border-right: 2px solid #eaeaea; } #header .header_list > li:last-child { border-right: 0; } #header .header_list a { color: var(--c-muted); } #header .header_list .sitemap { padding-left: 34px; background: url(../images/ui/sitemap.svg) 14px 3px no-repeat; } #header .header_list :is(dl, dd) { display: flex; } #header .header_list dt { margin-right: 12px; } #header .header_list dd p { margin-left: 3px; cursor: pointer; } #googlecustomserch { position: absolute; inset: 0 34px auto auto; width: 400px; } /* ---------- 4. Global navigation (image sprite) -------------------------- */ #global_nav { width: 961px; height: 49px; margin-inline: auto; overflow: hidden; display: flex; } #global_nav > li :is(a) { display: block; width: 190px; height: 50px; overflow: hidden; white-space: nowrap; text-indent: 100%; background: url(../images/theme/global_nav.png) var(--nx, 0) -50px no-repeat; } /* sprite columns; the top row is the "current / hover" state */ #global_nav .nav_travel { --nx: -193px; } #global_nav .nav_designandpackage { --nx: -383px; } #global_nav .nav_company { --nx: -573px; } #global_nav .nav_groupcompany { --nx: -765px; } #global_nav > li > a:hover, #global_nav > li > strong > a { background-position-y: 0; } /* ---------- 5. Breadcrumb ------------------------------------------------- */ #tpath { width: var(--w-page); margin: .75em auto; } #tpath, #tpath a { color: var(--c-faint); } /* ---------- 6. Page frame ------------------------------------------------- */ #wrapper { width: var(--w-page); margin: 0 auto 50px; position: relative; } #wrapper::after { content: ""; clear: both; display: block; } #wrapper .maincopy { margin: .2em 0 0 1em; font-size: 2em; } #wrapper .keyvisual { position: absolute; inset: 0 auto auto 0; z-index: 1; } /* white panel, pale blue rim, soft shadow */ #maincontents, #lcontents .subnav { position: relative; z-index: 100; margin-bottom: .8em; border: 5px solid var(--c-card-edge); border-radius: 8px; background: #fff; box-shadow: var(--shadow-card); } #maincontents, #lcontents { top: 28px; } #maincontents { float: right; width: 67%; min-height: 600px; margin-inline: 1%; padding-bottom: 20px; } #lcontents { float: left; width: 28%; margin-left: 1%; position: relative; } .theme_hoken :is(#maincontents, #lcontents) { top: 138px; margin-bottom: 138px; } /* page title bar: pale left block with a faint green circle */ #maincontents h1 { height: 87px; border-bottom: 1px solid #f0eeeb; border-radius: 3px 3px 0 0; background: radial-gradient(circle at 249px 100%, #e8efdc 0 62px, transparent 63px), radial-gradient(ellipse 262px 190px at 0 30%, #f6f5ef 99.4%, transparent 100%) no-repeat, #fff; } /* ---------- 7. Side navigation ------------------------------------------- */ #lcontents p.subnav { text-align: center; line-height: 60px; font-size: 1.2em; } #lcontents .subnav li { border-top: 1px dotted #ccc; padding: .8em; } #lcontents .subnav li > em, #lcontents .subnav .nomalbanner a { font-size: 1.2em; } #lcontents .subnav :is(.individual_plan, .business_plan) { padding-left: 3.8em; font-size: 1.6em; background: 16% 50% no-repeat #fff; } #lcontents .subnav .individual_plan { background-image: url(../images/individual_plan.png); } #lcontents .subnav .business_plan { background-image: url(../images/business_plan.png); } #lcontents .subnav :is(.individual_plan, .business_plan) em { font-size: .9em; } #lcontents .subnav .subbanner { background-color: #f4f4f4; } #lcontents .subnav .subbanner a { padding-left: 1.3em; color: var(--c-link); font-size: 1.1em; background: url(../images/arrow_txt.png) 0 49% no-repeat; } #lcontents .subnav .nomalbanner a:hover { color: var(--c-link); } /* ---------- 8. Content pages (.mono_page) -------------------------------- */ .mono_page #maincontents > h1 { margin-bottom: 1em; padding-left: .8em; font-size: 1.7em; font-weight: bold; line-height: 87px; } .mono_page #maincontents.notmenuwide { width: 86%; margin: 0 55px 0 0; } .mono_page #maincontents .section a { color: var(--c-link); } .mono_page #maincontents .section :is(.copyonly, .news_only) { margin-inline: 2.5em; letter-spacing: 1px; } .mono_page #maincontents .section :is(h2, h3) { color: var(--c-link); font-weight: bold; } .mono_page #maincontents .section h2 { margin: 0 1.5em .9em; font-size: 1.6em; } .mono_page #maincontents .section h3 { margin-bottom: .9em; font-size: 1.2em; border-bottom: 6px solid #eeeff0; } .mono_page #maincontents .section h4::before { content: "■"; } .mono_page #maincontents .section table { width: 100%; margin-bottom: 2em; empty-cells: show; background: #fff; } .mono_page #maincontents .section :is(th, td) { border: 1px solid #c8c9c9; padding: .6em 1em; } .mono_page #maincontents .section :is(thead th, .pattern2 tbody th) { text-align: center; background: #eceae9; } .mono_page #maincontents .section .pattern2 thead th { background-color: #dad7d5; } .mono_page #maincontents .section :is(.noborder, .noborder th, .noborder td) { padding: 0; border: 0 !important; } /* ---------- 9. Banners & cards ------------------------------------------- */ :is(.bluebanner, .greenbanner, .minibanner) { margin-bottom: 1em; line-height: 3; font-size: 1.1em; } :is(.bluebanner, .greenbanner) { border: 3px solid var(--edge); border-radius: 10px; text-align: center; background: linear-gradient(#fff, var(--fade) 98%); box-shadow: 0 0 6px #686868; } .bluebanner { --edge: var(--c-sky); --fade: #dce8ee; } .greenbanner { --edge: var(--c-leaf); --fade: #d9e7e0; } .minibanner { width: 90%; margin-inline: auto; padding-left: 1em; border: 4px solid var(--c-card-edge-soft); background: #fff; } :is(.bluebanner, .minibanner) a { padding-left: 1.5em; color: var(--c-sky); background: url(../images/arrow_txt.png) 0 48% no-repeat; } .greenbanner a { color: var(--c-leaf); } /* "グループ会社の皆様" card */ .topy { position: relative; padding: 15px 15px 10px; border: 2px solid var(--c-card-edge-soft); border-radius: 8px; font-size: 11px; background: linear-gradient(#fdfdfb, #f3f2e2); box-shadow: var(--shadow-card); } .topy :is(img, a) { display: block; } .topy em { display: block; margin-top: 13px; color: #535245; font-size: 17px; font-weight: bold; } .theme_hoken #wrapper .topy { margin-bottom: 10px; } .theme_hoken .bluebanner { margin-bottom: .5em; } /* ---------- 10. Top page & insurance top --------------------------------- */ .index_top #tpath, .index_top :is(#nextBtn, #prevBtn) { display: none; } .index_top #global_nav { margin-bottom: 2.5em; } :is(.index_top, .hoken_top) #wrapper { width: 951px; margin: 0 auto 40px; } .index_top #img_box { width: 949px; height: 378px; position: relative; } .index_top #img_box img { position: absolute; inset: 0 auto auto 0; } .index_top #wrapper > h2 { position: absolute; inset: 130px auto auto 30px; z-index: 100; } .index_top #slider { width: 950px; height: 379px; } .index_top #slider li { width: 948px; height: 379px; overflow: hidden; } /* three service cards overlapping the key visual */ .titlewrap { display: flex; position: relative; z-index: 100; margin-top: var(--lift, 0); } .titlewrap > div { margin-left: 9px; } .titlewrap > div:not(:last-child) { margin-right: 7px; } .index_top .titlewrap { --lift: -60px; --card-h: 90px; } .hoken_top .titlewrap { --lift: -95px; --card-h: 115px; } .titlewrap > div { width: 170px; height: var(--card-h, auto); margin-bottom: .8em; padding: 15px 10px 0 110px; position: relative; border: 5px solid var(--c-card-edge-soft); border-radius: 8px; background: no-repeat #fff; box-shadow: var(--shadow-card); } .hoken_top .titlewrap > div { border-color: var(--c-card-edge); } .titlewrap a { cursor: pointer; } .titlewrap > div > h2 { color: var(--c-strong); font-size: 17px; } .titlewrap > div > p { line-height: 16px; font-size: 12px; } .index_top .titlewrap .insurance { background-image: url(../images/top_bg01.png); background-position: -2px -2px; } .index_top .titlewrap .travel { background-image: url(../images/top_bg02.png); background-position: -3px -2px; } .index_top .titlewrap .design { background-image: url(../images/top_bg03.png); background-position: -6px -3px; } .hoken_top .titlewrap :is(.personal, .legal) { background-position: 30px 15px; } .hoken_top .titlewrap .personal { background-image: url(../images/hoken_top_bg1.png); } .hoken_top .titlewrap .legal { background-image: url(../images/hoken_top_bg2.png); } .hoken_top .titlewrap .design { width: 270px; padding-left: 10px; } .hoken_top .titlewrap .design img { margin-bottom: 10px; display: block; } .hoken_top .titlewrap .detail { position: absolute; inset: 105px 10px auto auto; } .hoken_top .titlewrap .detail a { color: var(--c-link); } /* news list */ .info { float: left; width: 551px; margin-top: 30px; position: relative; } .info > p { margin: 0 0 19px 13px; color: var(--c-link); font-size: 16px; } .info > ul li { display: flow-root; padding: 10px 0 5px 13px; border-bottom: 1px dotted var(--c-line); } .info > ul li span { float: left; } .info > ul li p { float: left; margin-left: 18px; padding-left: 17px; background: url(../images/arrow_txt.png) 0 3px no-repeat; } .info > ul li :is(a, p) { color: var(--c-link); } .info > ul ~ a { position: absolute; top: 0; padding-left: 30px; border-left: 1px solid var(--c-line); color: var(--c-link); background: 13px 3px no-repeat; } .info > ul + a { right: 80px; background-image: url(../images/icon_list.png); } .info > ul + a + a { right: 7px; background-image: url(../images/icon_rss.png); } /* category tags */ :is(.info > ul li, .blog_list #maincontents li) em { float: left; display: block; margin-left: 10px; padding: 2px 5px 0; border-radius: 6px; color: #fff; font-size: 12px; } .list_insu em { background: var(--tag-insurance); } :is(.list_legal, .list_travel) em { background: var(--tag-travel); } .list_dp em { background: var(--tag-design); } .list_company em { background: var(--tag-company); } /* right column */ .banner_area { float: left; width: 290px; margin: 15px 0 0 88px; } .index_top .banner_area .topy { margin-bottom: 1em; } .banner_area .bluebanner { width: 270px; margin: 15px auto 10px; } .hoken_top .banner_area .bluebanner { width: 255px; padding-left: 1em; text-align: left; } .hoken_top .banner_area .minibanner { width: 88%; } .banner_area .banner { width: 270px; margin-inline: auto; } /* ---------- 11. Footer ---------------------------------------------------- */ #to_top { clear: both; display: block; width: var(--w-page); margin-inline: auto; text-align: right; } #to_top a { padding: .8em 1em 1em 2em; background: url(../images/ui/arrow_up.svg) 5% 45% no-repeat var(--c-panel); } #footer { display: flow-root; padding-top: 25px; background: var(--c-panel); } #footer .wrap { width: 970px; margin-inline: auto; display: flex; align-items: flex-start; } #footer .wrap .section { width: 215px; min-height: 17em; padding-left: 1.5em; border-left: 1px solid var(--c-rule); } #footer .wrap .section:first-child { border-left: 0; } #footer .wrap dt { margin-bottom: .5em; font-size: 1.1em; font-weight: bold; } #footer .wrap dd { margin-bottom: 2em; } #footer .wrap dd li { margin-bottom: .5em; padding-left: 1.2em; font-size: .8em; background: url(../images/ui/arrow.svg) 0 50% no-repeat; } #footer .wrapbottom { clear: both; padding-top: 1em; border-top: 1px solid var(--c-rule); } #footer .banner { width: var(--w-page); margin: 1em auto; } #footer .banner li { display: inline-block; margin-left: 14px; } .footerbox { background: #d7ccca; } .footerboxwrap { width: 940px; margin: 1em auto 0; padding-block: 2em 1em; } /* ---------- 12. Redirect confirmation (.jump) --------------------------- */ .jump #maincontents { float: none; width: 580px !important; min-height: 241px; margin: 0 auto 195px; padding: 32px 38px; border: 0; box-shadow: 0 0 2px #999; } .jump #maincontents > p { margin-bottom: 27px; color: #4c4948; font-size: 17px; font-weight: bold; } .jump #maincontents .section { margin-left: 32px; } .jump #maincontents ul { display: flex; gap: 30px; margin-top: 31px; padding-left: 150px; } .jump #maincontents li a { color: #fff; } .jump #maincontents :is(.move, .not_move) { width: 125px; padding-block: 6px; border-radius: 10px; text-align: center; font-size: 12px; background: var(--btn, var(--c-go)); } .jump #maincontents .not_move { --btn: #72bb2b; } :is(.jump, .form) #footer { margin-top: 0; } /* ---------- 13. Forms (input / confirm / thanks) ------------------------- */ .form #wrapper { margin-bottom: 40px; } .form #wrapper .maincopy { margin-top: 110px; } .form #wrapper .topy { padding: 8px 15px; } .form #maincontents { padding-bottom: 50px; } .form #maincontents fieldset { border: 0; } .form #maincontents h1 + p { margin-bottom: 62px; padding-right: 37px; text-align: right; } .form #maincontents h1 + p a { color: var(--c-link); } .form form { width: calc(var(--label-col) + var(--label-gap) + 369px); margin-inline: auto; } .form fieldset p { clear: both; display: flow-root; margin-bottom: 20px; } /* label column on the left, field on the right */ .form form label > span { float: left; display: inline-block; width: var(--label-col); margin-right: var(--label-gap); text-align: right; font-size: 14px; } .form :is(input[type="text"], input[type="email"], textarea) { width: var(--field-w); border: 1px solid var(--c-field-line); border-radius: 6px; background: var(--c-field); } .form :is(input[type="text"], input[type="email"]) { min-height: 27px; } .form textarea { min-height: 40px; vertical-align: middle; } .form :is(input[type="radio"], input[type="checkbox"]) { margin-right: 5px; } .form :is(.inputradio, .inputcheck) input { vertical-align: 10%; } .form :is(.inputtext, .inputtextarea, .inputselect, .inputtexttel, .inputradio, .inputcheck) label, .form .inputtextmail { float: left; } .form :is(.inputradio, .inputcheck, .inputtexttel) label + span { float: left; display: block; width: calc(var(--field-w) + 6px); } .form .inputradio > span label { margin-right: 1em; } .form .inputradio label + span label { margin-right: 0; width: 100%; } .form .inputtextzip .form_zip_0 { width: 99px !important; } .form .inputtextzip .form_zip_1 { width: 250px !important; } .form .inputtexttel input { width: 118px !important; } .form .error_txt { color: red; display: block; } .form form .error { display: block; margin-top: 5px; color: red; font-size: 12px; line-height: 1.4; } .form form :is(input, textarea) + .error { margin-left: calc(var(--label-col) + var(--label-gap)); } .form #mailError { display: block; width: var(--field-w); margin-left: calc(var(--label-col) + var(--label-gap)); } .form #mailError .error { text-align: left; margin-left: 0; } .form .inputcheck label + span .error { clear: both; margin-left: 0; padding-top: 5px; } .form .common_btn li em { opacity: 0; pointer-events: none; font-size: 12px; } .form .common_btn :is(button, #submitBtn), .check #maincontents .confirm_btn :is(.send, .back) { width: 125px; margin-left: 30px; padding-block: 5px; border: 0; border-radius: 10px; color: #fff; font-size: 14px; background: var(--btn, var(--c-go)); cursor: pointer; } .check #maincontents .confirm_btn .back { --btn: #55b332; } /* confirm */ .check #maincontents { padding-bottom: 50px; } .check #maincontents .section { width: 564px; margin-inline: auto; } .check #maincontents .section dl { display: flex; gap: 4%; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--c-field-line); } .check #maincontents .section dl.none { display: none; } .check #maincontents .section dt { flex: 0 0 25%; } .check #maincontents .confirm_btn { display: flow-root; } .check #maincontents .confirm_btn ul { float: right; width: 155px; } /* thanks */ .thanks #maincontents { min-height: 0; padding-bottom: 0; } .thanks #maincontents header > h1 { display: none; } .thanks #maincontents :is(.end, .section) { width: 523px; margin-inline: auto; } .thanks #maincontents .end { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 3px solid var(--c-field-line); text-align: left; font-size: 20px; } .thanks #maincontents .section { margin-bottom: 2em; padding: 20px; border: 1px solid var(--c-field-line); border-radius: 6px; text-align: center; background: var(--c-field); } .thanks #maincontents .section p { font-size: 16px; } .thanks #maincontents .section a { display: block; margin-top: 15px; } /* ---------- 14. News (detail / list) ------------------------------------- */ :is(.blog, .blog_list) #maincontents { width: 922px; min-height: 0; } .blog #maincontents .news_only .maintext { margin-bottom: 20px; } .blog #maincontents .news_only .backto_top { margin-top: 20px; text-align: right; } .blog_list #maincontents dl { display: flow-root; } .blog_list #maincontents :is(dt, dd) { float: left; } .blog_list #maincontents dt { width: 40%; } .blog_list #maincontents dd { width: 55%; padding-bottom: 20px; } .blog_list #maincontents .section ul { margin: 0 2.5em 20px; } .blog_list #maincontents .section ul li { display: flow-root; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dotted #939384; } .blog_list #maincontents .section ul li :is(span, p) { float: left; } .blog_list #maincontents .section ul li span { display: block; } .blog_list #maincontents .section ul li p { margin-left: 10px; } .blog_list #maincontents .pager { display: flex; align-items: center; justify-content: center; height: 35px; margin-inline: 2.5em; position: relative; } .blog_list #maincontents .pager li { margin-inline: 10px; padding: 0; position: relative; border-bottom: 0 !important; } .blog_list #maincontents .pager li:first-child { position: absolute; left: 0; } .blog_list #maincontents .pager li:last-child { position: absolute; right: 0; } .blog_list #maincontents .pager li em { float: none; margin-left: 0; color: #565756; background: none; }