.cvdwicon { background-color: greenyellow; width: 36px; height: 30px; position: relative; z-index: 51; right: 10px; } .cvdwicon.is_checked .dwicon_bar:nth-of-type(1) { top: 10px; transform: rotate(30deg); } .cvdwicon.is_checked .dwicon_bar:nth-of-type(2) { display: none; } .cvdwicon.is_checked .dwicon_bar:nth-of-type(3) { top: 11px; transform: rotate(-30deg); } .dwicon_bar { position: absolute; top: 0; left: 0; width: 36px; height: 3px; border-radius: 6%; background: #111; transition: transform 0.3s linear, top 0.3s linear; } .dwicon_bar:nth-of-type(1) { top: 1; } .dwicon_bar:nth-of-type(2) { top: 11px; } .dwicon_bar:nth-of-type(3) { top: 22px; } .btn_item { border: 1px dashed; background: lightyellow; padding: 0px 0px 0px 50px; } .c_btn { align-items: center; background: #fff; border-radius: 40px; box-shadow: 0px 4px 0px 0px #4a3636; color: #4a3636; display: inline-flex; flex-shrink: 0; font-feature-settings: "pref" on; font-weight: 700; justify-content: center; padding: 4px 24px 6px; margin-top: 40px; transition: 0.3s; white-space: nowrap; } .c_btn:hover { background: #ffee56; } .xx1, e_btn:hover { list-style-position: inside; } ul, ol, li { width: 100%; list-style-position: inside; } ul, ol, li:hover { list-style-position: inside; } .x1:hover { width: 98%; background: pink; } .x1 { width: 220px; border: 1px dashed; padding: 0 15px; margin: 5px; } /**********************/ html { scroll-behavior: smooth; scroll-padding-top: 64px; } @media screen and (min-width: 400px) { html { scroll-padding-top: 64px; } } @media screen and (min-width: 900px) { html { scroll-padding-top: 100px; } } @media screen and (min-width: 1200px) { html { scroll-padding-top: 100px; } } /*********************/ body { background-color: rgba(135, 206, 235, 0.3); border: 1px solid blue; border-radius: 5px; margin: 5px; font-family: "Josefin Sans", "Noto Sans JP", sans-serif; font-size: 16px; line-height: 1.7; font-weight: 300; } hr { border: 1 double gray; } header { position: fixed; margin-top: 5px; margin-right: 8px; margin-left: 8px; border-radius: 10px; width: calc(100% - 16px); background-color: lavender; height: 64px; height: inherit; z-index: 1; overflow: visible; align-items: center; display: flex; justify-content: space-between; } @media screen and (max-width: 399px) { header { border: 2px solid red; } } @media screen and (min-width: 400px) { header { border: 2px solid black; } } @media screen and (min-width: 900px) { header { border: 2px dashed gray; height: 100px; } } @media screen and (min-width: 1200px) { header { border: 2px solid blue; } } header ol, header ul { list-style: decimal-leading-zero; } .heading__en_0000 { color: #111; font-size: 38px; font-weight: 700; line-height: 100%; letter-spacing: 3.8px; } @media screen and (min-width: 900px) { .heading__en_0000 { font-size: 50px; letter-spacing: 5px; } } .heading__ja_0000 { color: #111; text-align: center; font-size: 24px; font-style: normal; font-weight: 500; line-height: 100%; letter-spacing: 1.18px; margin-top: 14px; } @media screen and (min-width: 900px) { .heading__ja_0000 { font-size: 16px; letter-spacing: 1.26px; } } .fvform { border: 1px solid red; background-color: rgba(176, 196, 222, 0.1); border-radius: 10px; margin-inline: 15px; } .h1logo { margin-left: 10px; width: 210px; } .bgmenu { border-radius: 20px; border: 1px solid purple; width: 300px; height: 90%; position: fixed; top: 64px; right: 0; background: rgba(135, 206, 235, 0.8); z-index: 50; padding: 15px 10px 40px; transform: translateX(100%); transition: transform 1s linear; } .bgmenu.is_checked { transform: translateX(0%); } @media screen and (min-width: 900px) { .bgmenu { display: none; } } .menu_cntt_link---- { display: block; padding-top: 14px; padding-bottom: 14px; text-align: right; font-weight: 700; line-height: 170%; letter-spacing: 0.48px; } .menu_cntt_button---- { margin-top: 14px; text-align: right; } .const_burger { right: 15px; border: 1px dashed red; width: 40px; height: 40px; background-image: url(../img/maru.png); background-size: 36px; background-position: center; background-repeat: no-repeat; margin: 0 0 0 20px; cursor: pointer; position: relative; z-index: 2; } @media screen and (min-width: 900px) { .const_burger { display: none; } } .const_burger:hover { background-color: aqua; } .const_burger.ischk { background-image: url(../img/batu.png); } main { z-index: 1; border: 2px solid green; background-color: rgba(255, 192, 203, 0.3); margin-top: 55px; margin-inline: 15px; border-radius: 10px; } @media screen and (min-width: 900px) { main { margin-top: 130px; } } @media screen and (max-width: 399px) { .navmenu3 { display: none; } } @media screen and (min-width: 400px) { .navmenu3 { display: none; } } @media screen and (min-width: 900px) { .navmenu3 { line-height: 1; position: fixed; top: 14px; right: 20px; width: 650px; height: 40px; display: flex; flex-direction: row; gap: 0px; } } @media screen and (min-width: 1200px) { .navmenu3 { width: 900px; gap: 10px; } } .pagetop { margin-top: 0px; border: 0px solid; } .pg01, .pg02, .pg03, .pg04 { width: 500px; height: 300px; border: 1px solid; } .pg01 { background-color: pink; } .pg02 { background: skyblue; } .pg03 { background: violet; } .pg04 { background: lightgreen; } .fview { display: flex; } .d1 { width: 5px; } img { width: 100vw; height: auto; } .mobileHidden { display: none; } @media screen and (min-width: 680px) { .desktopHidden { display: none; } .mobileHidden { display: inline; } }/*# sourceMappingURL=ccnr01_style.css.map */