/*------------------------------------ dropbownMenu タイトル兼ボタン ------------------------------------*/ #dropdownMenu { border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border: 1px solid #333; position: relative; margin-right:10px; margin-left:10px; margin-top:20px; } #dropdownMenu .title { font-size: 22px; padding: 4px 10px; margin: 0; background:none !important; } #dropdownMenu::before { content: ''; position: absolute; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; background: #396D98; right: 10px; top: -webkit-calc(50% - 10px); top: calc(50% - 10px); } #dropdownMenu::after { content: ''; position: absolute; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-left: 6px solid #fff; right: 14px; top: -webkit-calc(50% - 2px); top: calc(50% - 2px); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } /*------------------------------------ dropdownMenuBox ドロップダウンメニューの本体 ------------------------------------*/ #dropdownMenuBox { /*display: none; position: absolute; left: 0; top: 0;*/ width: 100%; background-color: #fff; z-index: 999; padding-top: 50px;} #dropdownMenuBox .head { text-align: center; font-weight: bold; font-size: 22px; border-bottom: 1px solid #ccc; height: 60px; line-height: 60px; box-shadow:0px 2px 10px 0px #ccc; /*position: relative; position: fixed;*/ width: 100%; z-index: 999; background-color: #fff;} #dropdownMenuBox .head .close { display: inline-block; width: 32px; height: 32px; cursor: pointer; position: absolute; right: 10px; top: 14px; } #dropdownMenuBox .head .close::before, #dropdownMenuBox .head .close::after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 4px; margin: -8% 0 0 -50%; background: #396D98; } #dropdownMenuBox .head .close::before { transform: rotate(-45deg); } #dropdownMenuBox .head .close::after { transform: rotate(45deg); } #dropdownMenuBox .body { /*height: -webkit-calc(100vh - 60px); height: calc(100vh - 60px); overflow-y: auto; margin-top: 60px; -webkit-overflow-scrolling: touch;*/ } #dropdownMenuBox .body ul { margin: 0;} #dropdownMenuBox .body li { margin: 0;} #dropdownMenuBox .body li a { display: block; border-bottom: 1px solid #ccc; font-size: 20px; text-decoration: none; color: #000; padding: 16px; position: relative;} #dropdownMenuBox .body li a > span { display: inline-block;} #dropdownMenuBox .body li a > span::before { content: ''; left: -10px; display: inline-block; position: relative; width: 14px; height: 14px; border-top: 3px solid #396D98; border-right: 3px solid #396D98; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #dropdownMenuBox .body li.current > a { background-color: #fcc8c8;} #dropdownMenuBox .body .p2 > li > a { font-weight: bold; padding-left: 1em; } #dropdownMenuBox .body .p3 > li > a { padding-left: 3em; } #dropdownMenuBox .body .p4 > li > a { padding-left: 5em; } #dropdownMenuBox .body .close { display: block; background-color: #f6f6f6; width: 80%; margin: 5px auto; text-align: center; padding: 10px; border: 1px solid #ccc; } @media screen and (max-width:767px) { #dropdownMenuBox + #footer_guide { margin-top: 0; } } /*------------------------------------ accordion-icon プラス・マイナスのアイコン ------------------------------------*/ .accordion-icon, .accordion-icon span { display: inline-block; /*transition: all .2s;*/ box-sizing: border-box; } .accordion-icon { position: absolute; right: 14px; top: 6px; width: 24px; height: 48px; margin: 0; } .accordion-icon span { position: absolute; width: 100%; height: 4px; background-color: #396D98; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } .accordion-icon span:nth-of-type(1) { top: 24px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .accordion-icon span:nth-of-type(2) { top: 24px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .accordion-icon.active span:nth-of-type(1) { display:none; } .accordion-icon.active span:nth-of-type(2) { top: 24px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } /*------------------------------------ fs-c-breadcrumb fsの自動出力されるパンくずリストを調整 ------------------------------------*/ .fs-c-breadcrumb { position: relative; } .fs-c-breadcrumb__listItem { position: relative;} .fs-c-breadcrumb__listItem span { position: absolute; width: 20px; height: 20px; -webkit-border-radius: 50%; border-radius: 50%; background: #fff; right: 1px; top: -webkit-calc(50% - 10px); top: calc(50% - 10px); z-index: 1; cursor: pointer; } .fs-c-breadcrumb__listItem span::after { content: ''; position: absolute; box-sizing: border-box; width: 6px; height: 6px; border: 6px solid transparent; border-left: 6px solid #396D98; right: 4px; top: -webkit-calc(50% - 2px); top: calc(50% - 2px); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); z-index: 2; } .fs-c-breadcrumb__listItem:last-child span { background-color: #396D98; right: 10px; } .fs-c-breadcrumb__listItem:last-child span::after { border-left-color: #fff;} /*------------------------------------ tooltip 実際に表示されるもの ------------------------------------*/ #tooltip { max-width: 1080px; position: relative; left: 0; right: 0; margin: auto;} #tooltip ul { border: 1px solid #cecece; position: absolute; display: none; background-color: #fff; z-index: 1; padding: 8px 20px 10px; top: -40px; box-shadow:6px 6px 6px -3px #cecece; margin: 0; min-width: 130px;} #tooltip ul li { margin-top: 0; margin-bottom: 5px; font-size: 16px;} #tooltip ul li a { color: #2274a5;} /*その他 ーーーーーーーーーーーーーーーーーーーーーーーー*/ /*階層毎に色分け*/ #dropdownMenuBox ul ul { background:#EBEBEB; } #dropdownMenuBox ul ul ul { background:#D9D9D9; } /*フッターに掲載した際の微調整 ーーーーーーーーーーーーーーーーーーーーーーーー*/ #dropdownMenuBox { background: #f2f0ec; padding-top:20px; margin-top:100px; } #dropdownMenuBox .head { box-shadow:none; background: none; } #dropdownMenuBox .accordion-icon { background:#2274a5; border-radius: 5px; padding:0px 10px 0px 10px; width:48px; top:9px; } #dropdownMenuBox .accordion-icon span { background:#fff; width:60%; } #dropdownMenuBox .accordion-icon span:nth-of-type(1), #dropdownMenuBox .accordion-icon span:nth-of-type(2){ top:22px; } /* #dropdownMenuBox a>span { text-decoration: underline; } */ #dropdownMenuBox .body li { position: relative; border-bottom:1px solid #ccc; } #dropdownMenuBox .body li.current { background:#fcc8c8; } #dropdownMenuBox .body li a { padding:11px 16px; color:#fff; display:inline-block; position: initial; border-bottom:none; } #dropdownMenuBox .body li li a { color:#222; } #dropdownMenuBox .body li a > span { background: #2274a5; padding:5px 10px; border-radius: 5px; } #dropdownMenuBox .body li li a > span { background: none; padding:initial; text-decoration: underline; } #dropdownMenuBox .body li a > span::before { border-top: 3px solid #fff; border-right: 3px solid #fff; } #dropdownMenuBox .body li li a > span::before { border-top: 3px solid #2274a5; border-right: 3px solid #2274a5; } #dropdownMenuBox {} #dropdownMenuBox {} #dropdownMenuBox {} #dropdownMenuBox {}