@charset "UTF-8"; /*! Copyright (c) 2021 Elad Shechter Released under the MIT license https://opensource.org/licenses/mit-license.php */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: pointer; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { width: auto; height: auto; vertical-align: bottom; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } b, strong { font-weight: bold; } @media (hover: hover) { a:hover, button:hover, input[type=submit]:hover { opacity: 0.5; cursor: pointer; } } /*↑リセット*/ :root { --header_height: 45px; } :target { scroll-margin-top: var(--header_height); } .none { display: none; } @media (min-width: 1000px) { .sp { display: none !important; } .breakpoint { max-width: 1000px; margin-left: auto; margin-right: auto; } } @media (max-width: 999.9px) { .pc { display: none !important; } } html { scroll-behavior: smooth; } body { -webkit-text-size-adjust: 100%; font-family: "Noto Serif JP", serif; font-weight: 400; font-style: normal; color: #3a3a3a; overflow-x: clip; width: 100%; position: relative; z-index: -1; } .header { background: #fff; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); position: sticky; top: 0; height: var(--header_height); } .header_inner { display: flex; align-items: center; justify-content: space-between; } .header_logo_wrap { display: flex; } .header_logo_text { writing-mode: vertical-rl; } .header_title_wrap { display: block; } .header_title { font-weight: bold; } .header_inner { padding: 10px; } .header_list { position: fixed; top: 0; right: -100%; transition: all 0.65s; height: 100%; width: 100%; background: #fff; padding: 20px; overflow-y: scroll; } .header_list_inner { display: table; margin: 20px auto 0 auto; overflow-y: scroll; } .header_item + .header_item { margin-top: 20px; } .header_button_check { display: none; } .header:has(.header_button_check:checked) .header_list { right: 0%; box-shadow: -10px 0 20px rgba(0, 0, 0, 0.5); } .header_button { background-image: url(/wp-content/uploads/hamburger-menu.svg); background-repeat: no-repeat; width: 23px; aspect-ratio: 1/1; display: block; } .header_logo_text { font-size: 10px; } .header_logo { width: 32px; } .main { position: relative; z-index: -1; } @media (min-width: 1000px) { .header_list { max-width: 400px; } } @media (hover: hover) { .header_button:hover, .header_close:hover { opacity: 0.5; cursor: pointer; } } .footer { background: #e0e0e0; box-shadow: 0 -20px 20px rgba(0, 0, 0, 0.3); } .footer_inner2 { padding: 80px 10px; } .footer_sec { border: 1px solid #3a3a3a; } .footer_title { background: #20345b; color: #fff; font-weight: bold; text-align: center; padding: 10px; font-size: 22px; } .footer_content { background: #fff; padding: 20px 10px; } .footer_item + .footer_item { margin-top: 40px; } .footer_logo { width: 100%; -o-object-fit: contain; object-fit: contain; margin-top: 10px; -o-object-position: top left; object-position: top left; } .footer_margin_top { margin-top: 20px; } .footer_address_label1 { font-weight: bold; } .footer_address2 { display: flex; } .footer_address_value2::before { content: "："; } .footer_content2 { background: #20345b; color: #fff; padding: 20px; } .footer_content2_inner { display: table; margin: 0 auto; } @media (min-width: 1000px) { .footer_inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } .footer_sec { display: flex; flex-direction: column; width: 30%; } .footer_content { flex-grow: 1; } } @media (max-width: 999.9px) { .footer_sec { max-width: 500px; margin-left: auto; margin-right: auto; } .footer_sec + .footer_sec { margin-top: 40px; } } .footer_address_label2 { width: 6em; flex: 0 0 auto; } .footer_address_value2 { text-indent: -1em; padding-left: 1em; } .tel_note { color: red; font-weight: bold; display: block; } .footer_company { display: block; margin-inline: auto; max-width: 500px; margin-top: 40px; padding-bottom: 10px; } .footer_company_inner { background: #20345b; color: #fff; padding: 20px; border-radius: 40px; text-align: center; box-shadow: 0 10px 0 rgba(32, 52, 91, 0.3); } .eyecatch { position: relative; background: linear-gradient(to top, #fff 47px, #dcdcdc 47px); } .eyecatch::before { content: ""; display: block; width: 100%; height: 100%; -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 47px), calc(50% + 200px) calc(100% - 47px), 50% 100%, calc(50% - 200px) calc(100% - 47px), 0% calc(100% - 47px)); clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 47px), calc(50% + 200px) calc(100% - 47px), 50% 100%, calc(50% - 200px) calc(100% - 47px), 0% calc(100% - 47px)); position: absolute; top: 0; left: 0; background-image: repeating-linear-gradient(25deg, #dcdcdc, #dcdcdc 7px, #f3f3f3 7px, #f3f3f3 8px); background-position: center top 2px; } .eyecatch_inner { overflow-x: hidden; position: relative; } .eyecatch_shadow, .eyecatch_img { width: 416px; left: 50%; transform: translateX(-50%); } .eyecatch_img { width: 416px; position: relative; left: 50%; transform: translateX(-50%); } .eyecatch_shadow { position: absolute; top: 0; height: 100%; } .eyecatch_shadow::before, .eyecatch_shadow::after { content: ""; display: block; position: absolute; top: 0; width: 10px; height: calc(100% - 47px); } .eyecatch_shadow::before { left: -10px; background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3)); } .eyecatch_shadow::after { right: -10px; background-image: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.3)); } .sec01 { font-family: "Noto Sans JP", sans-serif; font-weight: 900; } .sec01_inner { padding: 25px 20px 0 20px; } .sec01_title { text-align: center; color: #20345b; font-weight: bold; font-size: 51px; } .sec01_title_inner { background: linear-gradient(to top, #ffda00 35%, transparent 35%); padding: 0 10px; } .sec01_title_strong { background-image: radial-gradient(circle at center, #ff6666 20%, transparent 20%); background-position: top right; background-repeat: repeat-x; background-size: 1em 0.3em; padding-top: 0.2em; display: inline-block; } .sec01_content { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; } .sec01_item { border: 1px solid #444444; box-shadow: 7px 7px 0 #737373; width: 100%; max-width: 280px; } .sec01_img_wrap { padding: 20px 20px 0 20px; } .sec01_item2 .sec01_img_wrap { padding-top: 0; } .sec01_label { background-image: repeating-linear-gradient(25deg, #dcdcdc, #dcdcdc 7px, #f3f3f3 7px, #f3f3f3 8px); display: flex; justify-content: center; align-items: center; padding: 20px; } .sec01_img { display: block; margin: 0 auto; } .sec01_img1 { width: 148px; } .sec01_img2 { width: 221px; } .sec01_label1 { font-size: 15px; } .sec01_label2 { font-size: 22px; } .sec { overflow-x: clip; } .sec + .sec { margin-top: 120px; } .sec_title_img { width: 67px; display: block; margin: 0 auto -33px auto; } .sec_title_wrap1 { padding-bottom: 15px; background: linear-gradient(to bottom, transparent 33px, #20345b 33px); margin-bottom: 40px; } .sec_title_wrap2 { padding: 40px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); padding-bottom: 5px; } .sec_title { border-bottom: 3px solid rgba(255, 255, 255, 0.4); padding-bottom: 20px; } .sec_title_text { color: #fff; text-align: center; display: block; font-weight: bold; } .sec_title_text1 { font-size: 22px; } .sec_title_text2 { font-size: 16px; } .sec02_buttons { display: flex; justify-content: center; gap: 40px; padding-bottom: 49px; } .sec02_button { position: relative; display: block; } .sec02_button_wrap2 { padding-bottom: 5px; } .sec02_button_wrap { background: #ffd366; border-radius: 22px; box-shadow: 0 5px 0 #bc8a26; width: 122px; padding: 20px 0; display: block; } @media (hover: hover) { .sec02_button_wrap3:hover { opacity: 0.5; cursor: pointer; } } .sec02_button_img { display: block; margin: 0 auto; width: 32px; } .sec02_button_text { text-align: center; display: block; } .sec02_button_check { display: none; } .sec02_button_wrap3:has(.sec02_button_check:not(:checked)) .sec02_button_img_on { display: none; } .sec02_button_wrap3:has(.sec02_button_check:not(:checked)) .sec02_button_img_off { display: block; } .sec02_button_wrap3:has(.sec02_button_check:checked) .sec02_button_img_off { display: none; } .sec02_button_wrap3:has(.sec02_button_check:checked) .sec02_button_img_on { display: block; } .sec02_button::after { content: ""; aspect-ratio: 34/115; width: 17px; background-image: url(/wp-content/uploads/arrow-bottom.svg); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) translateY(100%); } .sec02_button_wrap3:has(.sec02_button_check:not(:checked)) .sec02_button::after { display: none; } .sec02_button_wrap3:has(.sec02_button_check:checked) .sec02_button::after { display: block; } .sec02_content { border-radius: 32px; width: 100%; } .sec02_content1 { background: #e5c7c7; } .sec02_content2 { background: #9e968d; } .sec02:has(#sec02_button_check1:not(:checked)) .sec02_content1 { display: block; } .sec02:has(#sec02_button_check1:not(:checked)) .sec02_content1 { display: none; } .sec02:has(#sec02_button_check2:checked) .sec02_content2 { display: block; } .sec02:has(#sec02_button_check2:not(:checked)) .sec02_content2 { display: none; } .sec02_label2_none { background: #9e968d; } .sec02_row_first .sec02_label2_none, .sec02_row_first .sec02_table2_logo_wrap { position: sticky; top: var(--header_height); } .sec02_row_first2 .sec02_label2_none, .sec02_row_first2 .sec02_table2_logo_wrap { box-shadow: 0 10px 20px #9e968d; border-bottom: 1px solid #9e968d; } @media (min-width: 1000px) { .sec02_content { padding: 40px 20px; } .sec02_table { width: 100%; border-collapse: separate; } .sec02_row_first .sec02_label, .sec02_row_first .sec02_value { position: sticky; top: var(--header_height); } .sec02_row_first1 .sec02_label, .sec02_row_first1 .sec02_value { box-shadow: 0 10px 20px #e5c7c7; border-bottom: 1px solid #e5c7c7; } .sec02_row > *:nth-child(3), .sec02_row > *:nth-child(4), .sec02_row > *:nth-child(5) { display: none; } .sec02_logo { width: 95%; height: 70px; -o-object-fit: contain; object-fit: contain; } .sec02_label, .sec02_value { padding: 20px 10px; vertical-align: middle; text-align: center; border: 1px solid #e5c7c7; } .sec02_label { background: #20345b; color: #fff; font-weight: bold; width: 50%; } .sec02_value { background: #fff; font-size: 18px; font-weight: bold; width: 215px; } .sec02_question_wrap { display: block; text-align: center; } .sec02_question_button { font-weight: normal; } .sec02_question { color: #ffd366; padding: 0 3px; } .sec02_buttons2_link_wrap:has(.sec02_buttons2_link1) { margin-bottom: 20px; } .sec02_value_note { display: block; font-size: 14px; font-weight: normal; } .sec02_value_note2 { display: block; font-size: 12px; text-align: left; margin-top: 10px; font-weight: normal; } .sec02_value_item { text-indent: -1em; padding-left: 1em; } .sec02_value2 { font-size: 13px; font-weight: normal; text-align: left; } .sec02_margin_top { margin-top: 20px; } .sec02_value3 + .sec02_value3 { margin-top: 20px; } .sec02_highlight { color: #992000; } } @media (max-width: 999.9px) { .sec02_sec { background: #fff; padding: 10px 10px 20px 10px; } .sec02_sec + .sec02_sec { margin-top: 40px; } .sec02_content { max-width: 800px; margin-left: auto; margin-right: auto; padding: 40px 10px; } .sec02_table2 { border-collapse: separate; } .sec02_logo_price, .sec02_table, .sec02_note, .sec02_points { max-width: 500px; margin-left: auto; margin-right: auto; } .sec02_title2 { background: #20345b; padding: 10px 0; } .sec02_title2_text { display: block; color: #fff; font-weight: bold; text-align: center; } .sec02_title2_text1 { font-size: 17px; } .sec02_title2_text2 { font-size: 15px; } .sec02_logo_price { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .sec02_logo { width: 125px; height: 40px; -o-object-fit: contain; object-fit: contain; } .sec02_price_text1, .sec02_price_text3 { font-size: 15px; } .sec02_price_text2 { color: #992000; font-size: 25px; } .sec02_table { width: 100%; margin-top: 20px; } .sec02_label, .sec02_value { border: 1px solid #3a3a3a; text-align: center; padding: 10px 5px; } .sec02_value { vertical-align: middle; } .sec02_label { background: #e0e0e0; font-weight: bold; font-size: clamp(13px, 4.1vw, 18px); } .sec02_question { color: #20345b; } .sec02_kome { display: block; font-size: 10px; } .sec02_note { margin-top: 10px; } .sec02_note_item { font-size: 10px; text-indent: -2.5em; padding-left: 2.5em; } .sec02_points { margin-top: 20px; } .sec02_point { font-size: clamp(14px, 4.5vw, 26px); text-indent: -1.5em; padding-left: 1.5em; } .sec02_point + .sec02_point { margin-top: 15px; } .sec02_point_strong { color: #992000; } .sec02_point_kome { font-size: 10px; display: block; margin-left: 21px; } .sec02_buttons2 { display: flex; justify-content: center; gap: 20px; margin-top: 20px; } .sec02_buttons2_link { display: flex; align-items: center; gap: 10px; } /* .sec02_buttons2_link::after { content: "▶︎"; color: #ffd366; font-weight: bold; } */ .sec02_buttons2_link_inner { display: flex; flex-wrap: wrap; } } @media (hover: hover) { .sec02_question_button:hover { opacity: 0.5; cursor: pointer; } } .sec02_buttons2_link_wrap { padding-bottom: 5px; display: block; } .sec02_buttons2_link { color: #fff; border-radius: 14px; padding: 10px 15px; font-weight: normal; } .sec02_buttons2_link1 { background: #139600; box-shadow: 0 5px 0 #95cf8c; } .sec02_buttons2_link2 { background: #4f6fa3; box-shadow: 0 5px 0 #afbed5; } .sec02_table2 { width: 100%; } .sec02_label2_none, .sec02_table2_logo_wrap, .sec02_label2, .sec02_icon { border: 1px solid #9e968d; } .sec02_table2_logo_wrap, .sec02_icon { background: #fff; } .sec02_table2_logo_wrap { padding: 10px 5px; text-align: center; } .sec02_table2_logo { width: 95%; -o-object-fit: contain; object-fit: contain; } .sec02_label2 { background: #20345b; padding: 10px 3px; white-space: nowrap; width: 50%; } .sec02_label2_text { color: #ffd366; text-align: center; } .sec02_label2_img { width: 40px; display: block; margin: 10px auto 0 auto; } .sec02_icon { vertical-align: middle; text-align: center; } .sec02_maru { color: #139600; font-size: 22px; } .sec02_batu { color: #992000; font-size: 32px; } .sec02_row2 > *:nth-child(3) { display: none; } .sec02_row2 > *:nth-child(4) { display: none; } @media (min-width: 1000px) { .sec02_table2 { border-collapse: separate; } .sec02_table2_logo { height: 40px; } } @media (max-width: 999.9px) { .sec02_label2_text { font-size: 10px; } .sec02_table2_logo { height: 22px; } } .sec_inner { padding: 0 10px; max-width: 800px; margin: 0 auto; } .sec_text + .sec_text { margin-top: 40px; } .sec_highlight { color: #992000; } .sec_img { display: block; margin-left: auto; margin-right: auto; } .sec_img01 { max-width: 500px; } .sec_table { text-align: left; display: table; margin-left: auto; margin-right: auto; } .sec_title_lev3_wrap1 { padding-bottom: 10px; margin-bottom: 20px; } /* @media (hover: hover) { .sec_title_lev3_wrap1:hover { opacity: 0.5; cursor: pointer; } } */ .sec_lev3 + .sec_lev3 { margin-top: 20px; } .sec_lev3_content { padding-bottom: 40px; } .sec_title_lev3_wrap2 { position: relative; } .sec_title_lev3_wrap2::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 10px; left: 0; background: repeating-linear-gradient(-25deg, #ffe3c7, #ffe3c7 5px, #fff 5px, #fff 10px); z-index: -1; } .sec_title_lev3 { font-weight: bold; background: #ffd366; padding: 10px; } .sec_title_lev3_inner { display: flex; align-items: center; } .sec_title_lev3_inner::before { margin-right: 5px; } /* .sec_lev3_inner:not([open]) .sec_title_lev3_inner::before { content: "▶︎"; } .sec_lev3_inner[open] .sec_title_lev3_inner::before { content: "▼"; } */ .sec_title_lev3_inner::after { background: #20345b; width: 4.5em; color: #fff; display: block; padding: 10px 0; border-radius: 10px; text-align: center; } /* .sec_lev3_inner:not([open]) .sec_title_lev3_inner::after { content: "詳細"; } .sec_lev3_inner[open] .sec_title_lev3_inner::after { content: "閉じる"; } */ .sec_title_lev3_text { margin-right: 10px; } .sec_title_lev3_br { display: inline-block; } .sec_dt { font-weight: bold; } .sec_lev4 { border: 1px solid #3a3a3a; background: #fff; } .sec_lev4_header, .sec_lev4_text2 { padding: 10px; } .sec_lev4_header { border-bottom: 1px dashed #3a3a3a; background: #eaeaea; } .sec_lev4_title { color: #992000; font-weight: bold; } .sec_dls { margin-top: 20px; } .sec_dl2 { display: flex; align-items: center; gap: 20px; justify-content: center; } .sec_dl2 + .sec_dl2 { margin-top: 20px; } .sec_logo { width: 84px; } .sec_price_wrap { font-weight: bold; } .sec_price { color: #992000; font-size: 25px; } .sec_pay_img { position: relative; left: 50%; transform: translateX(-50%); width: 386px; display: block; } .sec_pay_img + .sec_pay_img { margin-top: 40px; } .sec_title_lev4 { font-weight: bold; text-align: center; font-size: 19px; } .sec_text.sec_lev4_2 { background: #e0e0e0; border-radius: 15px 15px 0 0; padding: 40px 10px; margin: 40px calc(50% - 50vw) 0 calc(50% - 50vw); } .sec_table2 { margin: 20px auto 0 auto; } .sec_table2_row > *:nth-child(3), .sec_table2_row > *:nth-child(4) { display: none; } .sec_table2_logo_wrap, .sec_table2_label, .sec_table2_value { padding: 10px 5px; background: #fff; border: 1px solid #e0e0e0; vertical-align: middle; } .sec_table2_label { background: #20345b; color: #fff; font-weight: bold; width: 6em; font-size: clamp(10px, 3.15vw, 16px); text-align: center; } .sec_table2_logo { width: 58px; } .sec_table2_value { font-size: 13px; text-align: center; } .sec_lev4_item + .sec_lev4_item { margin-top: 20px; } .sec_lev4_button_wrap { padding-bottom: 5px; display: block; max-width: 450px; margin-top: 20px; } .sec_lev4_button { background: #139600; box-shadow: 0 5px 0 #95cf8c; color: #fff; border-radius: 14px; padding: 10px 15px; text-align: center; } .sec03_item1 .sec01_img_wrap, .sec03_item2 .sec01_img_wrap { padding-bottom: 20px; } .sec03_item { display: flex; } .sec03_item { display: flex; flex-direction: column; } .sec03_item .sec01_img_wrap { flex-grow: 1; display: flex; align-items: flex-end; } .sec_kome { font-size: 12px; color: #8e8e8e; } @media (max-width: 999.9px) { .sec_kome { display: block; } } .note01 { margin: 20px auto 0 auto; text-align: center; display: block; font-weight: bold; background: #ffd366; padding: 10px 5px; width: -moz-fit-content; width: fit-content; } .main { padding-bottom: 120px; } .mokuzi_inner2 { padding: 0 20px; } .mokuzi_inner { border: 1px solid #3a3a3a; background: #fff; } .mokuzi_title { border-bottom: 1px dashed #3a3a3a; background: #eaeaea; font-weight: bold; } .mokuzi_inner2 { padding: 0 20px; } .mokuzi_inner { border: 1px solid #3a3a3a; background: #fff; max-width: 600px; margin-inline: auto; } .mokuzi_title, .mokuzi_nav { padding-left: 20px; padding-right: 20px; } .mokuzi_title { border-bottom: 1px solid #3a3a3a; background: #eaeaea; font-weight: bold; padding-top: 10px; padding-bottom: 10px; } @media (hover: hover) { .mokuzi_title:hover { opacity: 0.5; cursor: pointer; } } .mokuzi_title_inner { display: inline; } .mokuzi_button { color: blue; text-decoration: underline; display: inline; } .mokuzi_inner:not([open]) .mokuzi_button::before { content: "[開く]"; } .mokuzi_inner[open] .mokuzi_button::before { content: "[閉じる]"; } .mokuzi_link1 { font-weight: bold; } .mokuzi_link2 { text-indent: -1em; padding-left: 1em; display: inline-block; word-break: break-all; } .mokuzi_link2::before { content: "＞"; } .mokuzi_item1 + .mokuzi_item1 { border-top: 1px dashed #3a3a3a; } .mokuzi_link { display: inline-block; padding-top: 10px; padding-bottom: 10px; }/*# sourceMappingURL=index.css.map */