@charset "UTF-8"; /* Reset style */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ @import url(https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap); *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* 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; } .pc { display: block; } @media screen and (max-width: 768px) { .pc { display: none; } } .sp { display: none; } @media screen and (max-width: 768px) { .sp { display: block; } } /* br-sp */ .br-sp_1420 { display: none; } @media screen and (max-width: 1420px) { .br-sp_1420 { display: block; } } .br-sp_1380 { display: none; } @media screen and (max-width: 1380px) { .br-sp_1380 { display: block; } } .br-sp_1280 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280 { display: block; } } .br-sp_1180 { display: none; } @media screen and (max-width: 1180px) { .br-sp_1180 { display: block; } } .br-sp_820 { display: none; } @media screen and (max-width: 800px) { .br-sp_820 { display: block; } } .br-sp_480 { display: none; } @media screen and (max-width: 480px) { .br-sp_480 { display: block; } } /* br-sp_oo-oo */ /* br-pc */ /* br-pc_oo-oo */ .br-pc_480 { display: block; } @media screen and (max-width: 480px) { .br-pc_480 { display: none; } } * { scroll-margin-top: 80px; } html { font-size: 62.5%; scroll-behavior: smooth; /*@media screen and (max-width: 768px) { font-size: 54.6%; }*/ } body { width: 100%; margin: 0 auto; font-family: "Noto Sans JP", sans-serif; color: #423400; font-size: 1.6rem; overflow-x: hidden; background-color: #F3F3F3; } img { display: block; width: 100%; object-fit: contain; } h2, h3, h4, p, li, a, div { letter-spacing: 0em; line-height: 1.8; font-weight: 500; } p { letter-spacing: 0; line-height: 1.4; font-weight: 350; } h2 { position: relative; font-size: 2.4rem; font-weight: 700; margin-bottom: 1.6rem; width: fit-content; } h2::after { content: ""; display: inline-block; width: 4.8rem; aspect-ratio: 48/4; background-image: url("../img/common/b_b.png"); background-repeat: no-repeat; background-size: contain; position: absolute; bottom: 0; left: 0; } h3 { font-weight: 700; } a { display: block; width: fit-content; height: fit-content; letter-spacing: 0; } a:hover { opacity: 0.8; } .hira_kaku { font-family: hiragino-kaku-gothic-pron, sans-serif; } .no-link { pointer-events: none; } .inner1280 { max-width: 1280px; width: 100%; margin-inline: auto; } @media screen and (max-width: 1320px) { .inner1280 { padding-inline: 3%; } } @media screen and (max-width: 480px) { .inner1280 { padding-inline: 1.6rem; } } .inner980 { max-width: 980px; width: 100%; margin-inline: auto; } @media screen and (max-width: 1020px) { .inner980 { padding-inline: 3%; } } @media screen and (max-width: 480px) { .inner980 { padding-inline: 1.6rem; } } @media screen and (max-width: 768px) { .sp_m_no { margin: 0 !important; } } .pa_b_40 { padding-bottom: 4rem; } .btn02 { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #FFF7DA; padding: 1.1rem 1.6rem; line-height: 1; border-radius: 4rem; border: 1px solid #FCC707; color: #423400; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); transition: all 0.3s; } .btn02 img { width: 12px; aspect-ratio: 1; } .btn02 p { font-size: 1.4rem; line-height: 1; } .btn02:hover { opacity: 1; box-shadow: none; background-color: #FDE282; } @media screen and (max-width: 768px) { .btn02:hover { background-color: unset; } } .btn03 { display: flex; align-items: center; justify-content: center; padding: 1.1rem 1.6rem; gap: 8px; background-color: #FBFBFB; border-radius: 4rem; border: 1px solid #FCC707; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); transition: all 0.3s; } .btn03 img { width: 12px; aspect-ratio: 1; } .btn03 p { font-size: 1.4rem; line-height: 1; margin-bottom: 0; } .btn03:hover { opacity: 1; box-shadow: none; background-color: #FDE282; } @media screen and (max-width: 768px) { .btn03:hover { background-color: unset; } } .btn04 { width: 100%; display: block; max-width: 29rem; margin-inline: auto; text-align: center; font-size: 1.4rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 1.1rem; margin-bottom: 1.6rem; background-color: #FCC707; border-radius: 4rem; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); transition: all 0.3s; } .btn04:hover { opacity: 1; box-shadow: none; background-color: #FDE282; } @media screen and (max-width: 768px) { .btn04:hover { background-color: #FCC707; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); } } .btn05 { width: fit-content; display: block; margin-inline: auto; font-size: 1.4rem; font-weight: 700; line-height: 1; text-align: center; cursor: pointer; padding: 1.5rem 1.6rem; margin-top: 1.6rem; background-color: #FCC707; border-radius: 4rem; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); transition: all 0.3s; } @media screen and (max-width: 768px) { .btn05 { width: 100%; max-width: 40rem; } } .btn05:hover { opacity: 1; box-shadow: none; background-color: #FDE282; } @media screen and (max-width: 768px) { .btn05:hover { background-color: #FCC707; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); } } .btn06 { font-size: 1.4rem; font-weight: 700; background-color: #FCC707; border-radius: 4rem; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); text-align: center; cursor: pointer; padding: 1.1rem 1.6rem; line-height: 1; border: 1px solid rgba(0, 0, 0, 0); } button[disabled].btn06 { background-color: #F3F3F3; border: 1px solid #B7B7B7; cursor: not-allowed; color: #B7B7B7; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0); } /*下層ページ共通*/ .pg { margin-top: 4.8rem; } @media screen and (max-width: 1180px) { .pg { margin-top: 6.4rem; } } .pg h3 { position: relative; line-height: 1; font-size: 2rem; font-weight: 700; padding-bottom: 1.6rem; margin-bottom: 1.6rem; } .pg h3::after { content: ""; display: inline-block; width: 2.4rem; height: 4px; background-color: #FCC707; position: absolute; bottom: 0; left: 0; } .pg h4 { position: relative; font-size: 1.6rem; line-height: 1.6; margin-bottom: 1.6rem; font-weight: 700; padding-left: 12px; } .pg h4::after { content: ""; display: inline-block; width: 4px; height: 100%; background-color: #D4A90C; position: absolute; top: 0; left: 0; } .pg-header { background-color: #423400; color: #fff; width: 100%; height: 5.6rem; position: relative; z-index: 9990; } @media screen and (max-width: 768px) { .pg-header { height: 4rem; position: fixed; top: 6.4rem; } } .pg-header .inner1280 { height: 100%; } .pg-header .box { display: flex; align-items: center; justify-content: space-between; height: 100%; } @media screen and (max-width: 768px) { .pg-header .box { display: none; } } .pg-header .box .left a { font-size: 1.6rem; } .pg-header .box .right { position: relative; height: 100%; } .pg-header .box .right > ul { height: 100%; display: flex; align-items: center; justify-content: end; gap: 4rem; } .pg-header .box .right > ul li { height: 100%; } .pg-header .box .right > ul li a { height: 100%; display: flex; align-items: center; font-size: 1.4rem; position: relative; overflow: hidden; } .pg-header .box .right > ul li a::after { content: ""; display: inline-block; width: 100%; height: 4px; background-color: #fff; position: absolute; bottom: 0; left: 0; transform: translateX(-100%); transition: all 0.3s; } .pg-header .box .right > ul li a:hover { opacity: 1; } .pg-header .box .right > ul li a:hover::after { transform: translateX(0); } .pg-header .box .right > ul .hover_list { position: relative; cursor: pointer; display: flex; align-items: center; } .pg-header .box .right > ul .hover_list .h_list { position: absolute; top: 4.5rem; right: 0; min-width: 15rem; width: fit-content; padding: 8px 16px; border-radius: 4px; border: 1px solid #B7B7B7; background-color: #fff; z-index: 999; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.54); transition: all 0.5s; transform: scaleY(0); transform-origin: top; } .pg-header .box .right > ul .hover_list .h_list ul li a { color: #423400; font-size: 1.4rem; font-weight: 100; letter-spacing: 0; line-height: 1.2; margin-bottom: 1.6rem; position: relative; overflow: hidden; } .pg-header .box .right > ul .hover_list .h_list ul li a::after { content: ""; display: inline-block; background-color: #423400; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; transform: translateX(-100%); transition: all 0.3s; } .pg-header .box .right > ul .hover_list .h_list ul li a:hover::after { transform: translateX(0); } .pg-header .box .right > ul .hover_list:hover .h_list { transform: scaleY(1); } /*カテゴリハンバーガー*/ .pg-sp_wrap { display: none; align-items: center; justify-content: end; height: 100%; cursor: pointer; } @media screen and (max-width: 768px) { .pg-sp_wrap { display: flex; } } .pg-sp_wrap .pg-sp_switch { display: flex; align-items: center; gap: 8px; } .pg-sp_wrap .pg-sp_switch img { width: 12px; } .pg-sp_wrap .pg-sp_switch p { font-size: 1.4rem; margin-bottom: 0; color: #fff; font-weight: 700; position: relative; } .pg-sp_wrap .pg-sp_switch p::before { content: ""; display: inline-block; background-image: url("../img/pg/blog/sp-close.png"); background-repeat: no-repeat; background-size: contain; width: 12px; aspect-ratio: 1; position: absolute; top: 50%; left: -20px; transform: translateY(-50%); transition: all 0.3s; display: none; } .pg-sp_wrap .pg-sp_switch.open p::before { display: block; } .pg-sp_contents { display: none; position: fixed; top: 10.4rem; left: 0; width: 100%; height: auto; min-height: 100vh; background-color: #FBFBFB; padding: 1.6rem; z-index: 9999; } .pg-sp_contents .box { display: block; color: #423400; } /*パンくず*/ .bread { background-color: #FBFBFB; padding: 9px 0; width: 100%; } @media screen and (max-width: 480px) { .bread { display: none; } } .bread ul { display: flex; align-items: center; gap: 4.4rem; } @media screen and (max-width: 768px) { .bread ul { padding-inline: 1.6rem; } } .bread ul li a { font-size: 1.4rem; font-weight: 350; position: relative; } .bread ul li a::after { content: ""; display: inline-block; position: absolute; top: 50%; right: -3rem; transform: translateY(-50%); width: 12px; aspect-ratio: 1; background-image: url("../img/common/arr_r.png"); background-repeat: no-repeat; background-size: contain; } .bread ul li:nth-child(1) a { font-weight: 700; } .bread ul li:last-child a { pointer-events: none; } .bread ul li:last-child a::after { display: none; } .filter .bread ul li a { /*&::after { background-image: url("../img/common/arr_r06.png"); }*/ } /*目次*/ #mokuji.mokuji { background-color: #FBFBFB; padding: 4rem; border: 1px solid #B7B7B7; margin-bottom: 8rem; position: relative; cursor: pointer; } @media screen and (max-width: 768px) { #mokuji.mokuji { padding: 1.6rem; padding-bottom: 6.4rem; margin-bottom: 1.6rem; } } #mokuji.mokuji h3 { margin: 0 0 1.6rem; } #mokuji.mokuji .btn_mokuji { width: 4rem; aspect-ratio: 1; border-radius: 50%; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2); position: absolute; right: 1.1rem; top: 26rem; transition: all 0.3s; z-index: 999; display: none; } @media screen and (max-width: 768px) { #mokuji.mokuji .btn_mokuji { display: block; } } #mokuji.mokuji .btn_mokuji.open { transform: rotate(180deg); } #mokuji.mokuji .mokujibox { display: flex; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox { flex-direction: column; } } #mokuji.mokuji .mokujibox ul { display: flex; flex-direction: column; max-height: 19rem; width: 33.3333333333%; counter-reset: list-counter; min-width: unset; overflow: unset; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox ul { margin-bottom: 1.6rem; width: 100%; } } #mokuji.mokuji .mokujibox ul li { position: relative; gap: 8.3rem; margin-bottom: 0.5em; margin-bottom: 1.8rem; padding-left: 0; display: flex; align-items: center; min-width: unset; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox ul li { width: 100%; } } #mokuji.mokuji .mokujibox ul li::after { content: ""; display: inline-block; width: 5.3rem; height: 1px; border-bottom: 1.5px dotted #423400; position: absolute; bottom: 7px; left: 4rem; background-color: unset; aspect-ratio: unset; border-radius: unset; top: unset; transform: unset; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox ul li::after { left: 3.5rem; } } #mokuji.mokuji .mokujibox ul li .number { text-align: center; background-color: #FDE282; width: 2.4rem; aspect-ratio: 1; border-radius: 2px; font-size: 1.4rem; font-weight: 700; line-height: 1; margin-bottom: 0; display: flex; align-items: center; justify-content: center; letter-spacing: 0; } #mokuji.mokuji .mokujibox ul li a { line-height: 1; font-weight: 350; font-size: 1.4rem; position: relative; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox ul li a { letter-spacing: 0; } } #mokuji.mokuji .mokujibox ul li a::after { content: ""; display: inline-block; width: 8px; aspect-ratio: 1; background-image: url("../img/common/arr_r04.png"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: -1.6rem; } @media screen and (max-width: 768px) { #mokuji.mokuji .mokujibox .sp-open { display: none; } } /*ブログトップのカテゴリー表示*/ #categorybox.categorybox { display: flex; align-items: center; gap: 1.6rem; margin-bottom: 1.6rem; } @media screen and (max-width: 768px) { #categorybox.categorybox { flex-direction: column; align-items: start; } } #categorybox.categorybox ul { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6rem; min-width: unset; overflow-x: unset; } #categorybox.categorybox ul li { padding-left: 0; margin-bottom: 0; min-width: unset; } #categorybox.categorybox ul li::after { display: none; } #categorybox.categorybox ul li a { padding: 8px 16px; font-size: 1.4rem; line-height: 1; font-family: hiragino-kaku-gothic-pron, sans-serif; background-color: #E9E7E2; border-radius: 4px; } #categorybox.categorybox ul li span.tag { padding: 8px 16px; font-size: 1.4rem; line-height: 1; font-family: hiragino-kaku-gothic-pron, sans-serif; background-color: #E9E7E2; border-radius: 4px; } #categorybox.categorybox .datebox { display: flex; align-items: center; gap: 8px; } #categorybox.categorybox .datebox img { width: 12px; aspect-ratio: 1; } #categorybox.categorybox .datebox .date { font-size: 1.4rem; color: #B7B7B7; margin-bottom: 0; } /*ページャー*/ #pager.pagerbox { margin-top: 8rem; padding-top: 4rem; border-top: 1px solid #B7B7B7; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 768px) { #pager.pagerbox { flex-direction: column-reverse; padding-top: 0; } } #pager.pagerbox a { display: flex; align-items: center; gap: 1.6rem; } @media screen and (max-width: 768px) { #pager.pagerbox a { border-bottom: 1px solid #B7B7B7; padding: 1.6rem 0; width: 100%; } } #pager.pagerbox a .arr { width: 2.4rem; border-radius: 50%; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.33); transition: all 0.3s; } #pager.pagerbox a .pagertxt .txt00 { font-size: 1.4rem; margin-bottom: 0; } #pager.pagerbox a .pagertxt .txt01 { font-weight: 700; margin-bottom: 8px; } #pager.pagerbox a .pagertxt .txt02 { color: #B7B7B7; font-weight: 100; } #pager.pagerbox a:hover { opacity: 1; } #pager.pagerbox a:hover .arr { transform: translateX(-3px); } #pager.pagerbox .right { flex-direction: row-reverse; } #pager.pagerbox .right:hover .arr { transform: translateX(3px); } /*ブログ関連記事*/ #blog_link, .blog_link { padding: 0 0 9.6rem; } #blog_link .box, .blog_link .box { display: flex; align-items: center; justify-content: space-between; } #blog_link .box a, .blog_link .box a { display: flex; align-items: center; gap: 8px; position: relative; } @media screen and (max-width: 768px) { #blog_link .box a, .blog_link .box a { margin-top: -9px; } } #blog_link .box a p, .blog_link .box a p { font-size: 1.4rem; margin-bottom: 0; } @media screen and (max-width: 768px) { #blog_link .box a p, .blog_link .box a p { display: none; } } #blog_link .box a img, .blog_link .box a img { width: 16px; aspect-ratio: 1; transition: all 0.3s; } @media screen and (max-width: 768px) { #blog_link .box a img, .blog_link .box a img { width: 4rem; } } #blog_link .box a:hover, .blog_link .box a:hover { opacity: 1; } #blog_link .box a:hover img, .blog_link .box a:hover img { transform: translateX(3px); } #blog_link .ulbox ul, .blog_link .ulbox ul { height: 100%; display: flex; gap: 1.6rem; flex-wrap: wrap; } @media screen and (max-width: 768px) { #blog_link .ulbox ul, .blog_link .ulbox ul { gap: 8px; } } #blog_link .ulbox ul li, .blog_link .ulbox ul li { width: calc((100% - 6.4rem) / 5); border-radius: 1rem; border: 1px solid #B7B7B7; overflow: hidden; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.33); } @media screen and (max-width: 768px) { #blog_link .ulbox ul li, .blog_link .ulbox ul li { width: calc((100% - 16px) / 3); } } @media screen and (max-width: 480px) { #blog_link .ulbox ul li, .blog_link .ulbox ul li { width: calc((100% - 8px) / 2); } } #blog_link .ulbox ul li a, .blog_link .ulbox ul li a { width: 100%; height: 100%; border-radius: 1rem; background-color: #FBFBFB; position: relative; } #blog_link .ulbox ul li a::after, .blog_link .ulbox ul li a::after { content: ""; display: inline-block; width: 2.4rem; aspect-ratio: 1; position: absolute; bottom: 1.6rem; right: 1.6rem; background-image: url("../img/common/arr_r05.png"); background-repeat: no-repeat; background-size: contain; } #blog_link .ulbox ul li a .img, .blog_link .ulbox ul li a .img { overflow: hidden; width: 100%; height: auto; } #blog_link .ulbox ul li a .img img, .blog_link .ulbox ul li a .img img { height: 100%; object-fit: cover; object-position: center; transition: all 0.3s; } #blog_link .ulbox ul li a .txtbox, .blog_link .ulbox ul li a .txtbox { padding: 1.6rem; height: auto; min-height: 9.2rem; } @media screen and (max-width: 768px) { #blog_link .ulbox ul li a .txtbox, .blog_link .ulbox ul li a .txtbox { min-height: 12.6rem; } } #blog_link .ulbox ul li a .txtbox p, .blog_link .ulbox ul li a .txtbox p { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; height: auto; display: block; padding-bottom: 1.6rem; } #blog_link .ulbox ul li a:hover, .blog_link .ulbox ul li a:hover { opacity: 1; } #blog_link .ulbox ul li a:hover .img img, .blog_link .ulbox ul li a:hover .img img { transform: scale(1.1); } /*to Top*/ .totop { position: fixed; bottom: 5vh; right: 2rem; z-index: 9999; } @media screen and (max-width: 480px) { .totop { display: none; } } .totop a { width: 12rem; } .sp_contact { max-width: 30rem; margin-inline: auto; display: none; } @media screen and (max-width: 768px) { .sp_contact { display: block; } } /*最新情報・検索結果ページ検索ボックス（サイドバー）*/ .side { width: 30.8rem; } .side .inbox .pg-header02 { color: #fff; background-color: #423400; padding: 1.6rem; display: flex; align-items: center; gap: 8px; position: relative; } .side .inbox .pg-header02 .img { width: 12px; aspect-ratio: 1; } .side .inbox .pg-header02 p { font-size: 1.4rem; font-weight: 700; } .side .inbox .filterbox { background-color: #FBFBFB; padding: 1.6rem; /*==検索結果内ラジオボタン==*/ } .side .inbox .filterbox select { width: 100%; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.33); border-radius: 4px; font-size: 1.4rem; padding: 8px; cursor: pointer; } .side .inbox .filterbox .ttl { font-size: 1.4rem; font-weight: 700; margin-bottom: 8px; } .side .inbox .filterbox ul { display: flex; gap: 1.6rem; margin-bottom: 1.6rem; } .side .inbox .filterbox ul li { width: calc((100% - 1.6rem) / 2); position: relative; } .side .inbox .filterbox ul li::after { content: ""; display: inline-block; width: 1.6rem; aspect-ratio: 1; background-image: url("../img/common/arr_d.png"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); z-index: 3; } .side .inbox .filterbox .ul02 li { width: 100%; } .side .inbox .filterbox .reset { text-align: center; font-size: 1.4rem; text-decoration: underline; cursor: pointer; } .side .inbox .filterbox .radio-check-group { display: flex; flex-direction: column; gap: 1.6rem; margin-bottom: 1.6rem; } .side .inbox .filterbox .radio-check-group label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .side .inbox .filterbox .radio-check-group label input[type=radio] { display: none; } .side .inbox .filterbox .radio-check-group label .check-custom { width: 1.6rem; aspect-ratio: 1; border-radius: 50%; border: 1px solid #B7B7B7; margin-right: 0.5rem; position: relative; transition: border-color 0.2s; } .side .inbox .filterbox .radio-check-group label input[type=radio]:checked + .check-custom::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; border-radius: 50%; aspect-ratio: 1; background-color: #D4A90C; } .side .inbox .filterbox .ul02 { width: 25.2rem; margin-left: auto; position: relative; z-index: 1; } @media screen and (max-width: 768px) { .side .inbox .filterbox .ul02 { margin-inline: auto; } } /*SP時のヘッダー（最新情報・検索結果）*/ .sp-header { display: none; } @media screen and (max-width: 768px) { .sp-header { display: block; } .sp-header .side { width: 100%; } .sp-header .side .inbox .pg-header02 .filter_switch { cursor: pointer; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: end; padding: 1.6rem; } .sp-header .side .inbox .pg-header02 .filter_switch img { width: 1.2rem; aspect-ratio: 1; transition: all 0.3s; } .sp-header .side .inbox .pg-header02 .filter_switch.open img { transform: rotate(180deg); } .sp-header .side .inbox .pg-header02 p { font-weight: 700; } .sp-header .side .inbox .filterbox { display: none; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.33); } } /*検索結果のサイドバー内、セレクトボックス初期表示の文字を変更*/ /* placeholder 状態のselectの文字色 */ select.mySelect.placeholder { color: #B7B7B7; } /* 通常のselectの文字色 */ select.mySelect { color: #423400; } /*セレクトボックスのプルダウンカスタム*/ /* ===== Horizontal Rule ===== */ .rule { margin: 10px 0; border: none; height: 1.5px; background-image: linear-gradient(left, #f0f0f0, #c9bbae, #f0f0f0); } /* ===== Select Box ===== */ .sel { font-size: 1.6rem; display: inline-block; width: 100%; padding: 8px; background-color: #fff; color: #B7B7B7; position: relative; cursor: pointer; border: 1px solid #B7B7B7; border-radius: 4px; /* ----- Modifier: Black Panther ----- */ /* ----- Modifier: Superman ----- */ /* Placeholder 部分 */ /* 選択肢リスト */ } .sel.active::before { transform: rotateX(-180deg); } .sel.active .sel__placeholder { visibility: hidden; } .sel.active .sel__placeholder::before { visibility: visible; } .sel.active .sel__box { display: block; animation: fadeInUp 500ms; } .sel--black-panther { z-index: 3; } .sel--superman { z-index: 2; } .sel .sel__placeholder { display: block; font-family: "Quicksand"; font-size: 1.4rem; color: #B7B7B7; text-align: left; pointer-events: none; user-select: none; visibility: visible; } .sel .sel__placeholder::before { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); content: attr(data-placeholder); visibility: hidden; } .sel .sel__box { position: absolute; top: 42px; left: 0; display: none; list-style-type: none; text-align: left; font-size: 1em; background-color: #423400; width: 100%; box-sizing: border-box; padding: 1.6rem; border-radius: 4px; } .sel .sel__box .sel__box__options { display: list-item; font-family: "Quicksand"; font-size: 1.4rem; color: #fff; padding: 8px 0; user-select: none; } .sel .sel__box .sel__box__options.selected::after { display: inline; } .sel01--black-panther { z-index: 5; } .sel02--black-panther { z-index: 4; } header { background-color: #F3F3F3; position: fixed; top: 0; z-index: 9999; width: 100%; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } header .box { height: 4.8rem; display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: 1180px) { header .box { height: 6.4rem; } } header .box .left { width: 17rem; display: flex; align-items: center; } @media screen and (max-width: 768px) { header .box .left { width: 7.2rem; } } header .box .right { display: flex; align-items: center; gap: 2.4rem; height: 100%; } header .box .right nav { height: 100%; } @media screen and (max-width: 1180px) { header .box .right nav { display: none; } } header .box .right nav ul { display: flex; align-items: center; gap: 2.4rem; height: 100%; } header .box .right nav ul li { height: 100%; } header .box .right nav ul li a { display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 350; height: 100%; position: relative; overflow: hidden; } header .box .right nav ul li a::after { content: ""; display: inline-block; width: 100%; height: 4px; background-color: #FCC707; position: absolute; bottom: 0; left: 0; transition: all 0.3s; transform: translateX(-100%); } header .box .right nav ul li a:hover { opacity: 1; } header .box .right nav ul li a:hover::after { transform: translateX(0); } @media screen and (max-width: 1180px) { header .box .right .searchbox { position: fixed; top: 8rem; right: 1.6rem; display: none; } } @media screen and (max-width: 480px) { header .box .right .searchbox { width: calc(100% - 3.2rem); } } header .box .right .searchbox .search_inbox { display: flex; align-items: center; border: 1px solid #FCC707; border-radius: 4px; width: 28rem; background-color: #FBFBFB; } @media screen and (max-width: 480px) { header .box .right .searchbox .search_inbox { width: 100%; } } @media screen and (max-width: 1180px) { header .box .right .searchbox .search_inbox::after { content: ""; display: inline-block; width: 99vw; height: 7.2rem; position: fixed; top: 6.4rem; right: 0; background-color: #423400; z-index: -1; transition: all 0.3s; } } header .box .right .searchbox .search_inbox .sr-only { display: none; } header .box .right .searchbox .search_inbox input { background-color: #FBFBFB; font-size: 1.4rem; padding: 1rem; line-height: 1; width: calc(100% - 4rem); border-radius: 4px; } @media screen and (max-width: 1180px) { header .box .right .searchbox .search_inbox input { border-radius: 4px 0 0 4px; } } header .box .right .searchbox .search_inbox input::placeholder { color: #B7B7B7; font-weight: 100; } header .box .right .searchbox .search_inbox button { display: flex; justify-content: center; align-items: center; background-color: #FCC707; width: 4rem; aspect-ratio: 1; border-radius: 3px; cursor: pointer; } header .box .right .searchbox .search_inbox button img { width: 1.8rem; } @media screen and (max-width: 1180px) { header .box .right .searchbox .search_inbox button img { width: 2.4rem; } } header .box .right .searchbox .search_inbox button .img01 { display: block; } header .box .right .sp-search { display: flex; flex-direction: column; background-color: unset; gap: 4px; cursor: pointer; } header .box .right .sp-search .img02 { display: none; } @media screen and (max-width: 1180px) { header .box .right .sp-search .img02 { display: block; width: 2.4rem; } } header .box .right .sp-search p { display: none; } @media screen and (max-width: 1180px) { header .box .right .sp-search p { display: block; font-size: 1.2rem; font-weight: 700; line-height: 1; } } header .box .right .contact_h a { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 1.4rem; font-weight: 700; background-color: #FFF7DA; border-radius: 4rem; width: 13.6rem; height: 4rem; padding: 11px 0; border: 1px solid #FCC707; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.3); transition: all 0.3s; } @media screen and (max-width: 1180px) { header .box .right .contact_h a { width: fit-content; flex-direction: column; background-color: unset; border: none; box-shadow: none; gap: 4px; } } header .box .right .contact_h a img { width: 12px; } @media screen and (max-width: 1180px) { header .box .right .contact_h a img { width: 2.4rem; } } header .box .right .contact_h a p { letter-spacing: 0; line-height: 1; font-weight: 700; font-size: 1.4rem; } @media screen and (max-width: 1180px) { header .box .right .contact_h a p { font-size: 1.2rem; } } header .box .right .contact_h a:hover { opacity: 1; box-shadow: none; background-color: #FDE282; } @media screen and (max-width: 768px) { header .box .right .contact_h a:hover { background-color: unset; } } .toggle_switch { position: relative; cursor: pointer; position: fixed; z-index: 9999; top: 56vh; right: 8px; transition: all 0.3s; display: none; } @media screen and (max-width: 1180px) { .toggle_switch { display: block; } } .toggle_switch::after { content: ""; display: inline-block; width: 4.8rem; aspect-ratio: 1; background: url("../img/common/open.png") no-repeat center center; background-size: contain; position: absolute; top: 0; right: 0; border-radius: 50%; box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.2); transition: transform 0.3s; } .toggle_switch.open::after { transform: rotateZ(180deg); background: url("../img/common/close.png") no-repeat center center; background-size: contain; } .toggle_contents { display: none; position: fixed; top: 4.8rem; z-index: 999; padding: 1.6rem; background-color: #FBFBFB; width: 100%; height: 100vh; } @media screen and (max-width: 1180px) { .toggle_contents { top: 6.4rem; } } .toggle_contents .box ul li a { font-size: 1.4rem; margin-bottom: 2.4rem; width: fit-content; position: relative; } @media screen and (max-width: 480px) { .toggle_contents .box ul li a { width: 100%; } } .toggle_contents .box ul li a::after { content: ""; display: inline-block; width: 1.6rem; aspect-ratio: 1; background-image: url("../img/common/arr_r.png"); background-repeat: no-repeat; background-size: contain; transform: translate(0, -50%); position: absolute; top: 50%; right: -3rem; } @media screen and (max-width: 480px) { .toggle_contents .box ul li a::after { right: 0; } } .mv { margin-top: 4.8rem; padding-top: 7.6rem; position: relative; } @media screen and (max-width: 1180px) { .mv { margin-top: 5rem; } } .mv::after { content: ""; width: 100%; /*aspect-ratio: 1440 / 480;*/ height: 48rem; display: inline-block; background-image: url(../img/top/bg01.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: -1; } @media screen and (max-width: 580px) { .mv::after { background-image: url(../img/top/bg01_sp.png); height: 46rem; } } @media screen and (max-width: 480px) { .mv .inner1280 { padding-inline: 0; } } .mv .box { width: 75rem; aspect-ratio: 750/245; background-image: url("../img/top/bg03.png"); background-repeat: no-repeat; background-size: contain; margin: 0 auto 35px; display: flex; align-items: center; justify-content: center; position: relative; } @media screen and (max-width: 768px) { .mv .box { background-image: unset; width: 100%; padding-top: 7rem; padding-bottom: 7rem; } } .mv .box .inbox { display: flex; align-items: center; justify-content: center; gap: 1.8rem; } .mv .box .inbox p { color: #fff; font-size: 9.2rem; font-weight: 700; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } @media screen and (max-width: 768px) { .mv .box .inbox p { font-size: 6rem; line-height: 0.7; text-align: center; } .mv .box .inbox p span { font-size: 4rem; } } .mv .box .inbox img { width: 16.3rem; } @media screen and (max-width: 768px) { .mv .box .inbox img { width: 14.6rem; } } .mv .box .txt01 { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; color: #fff; font-weight: 400; font-size: 2.4rem; letter-spacing: 0; line-height: 1; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); } @media screen and (max-width: 768px) { .mv .box .txt01 { border-bottom: 1px solid #fff; padding-bottom: 10px; width: 100%; font-size: 1.8rem; } } .mv .box .txt01 .span01 { display: inline-block; font-size: 3.2rem; font-weight: 700; position: relative; } @media screen and (max-width: 768px) { .mv .box .txt01 .span01 { width: 22.7rem; margin: 1rem 0; font-size: 2.4rem; } } .mv .box .txt01 .span01::after { content: ""; display: inline-block; width: 100%; height: 9px; background-color: #FCC707; position: absolute; bottom: 0; left: 0; transform: translateY(50%); z-index: -1; } @media screen and (max-width: 768px) { .mv .box .txt01 .span01::after { bottom: 1px; } } .mv .box .txt01 .span01 .span02 { font-size: 2.4rem; } .mv .ttlbox { position: relative; width: fit-content; } @media screen and (max-width: 768px) { .mv .ttlbox { width: 100%; } } .mv .ttlbox h2 { color: #fff; width: fit-content; } @media screen and (max-width: 768px) { .mv .ttlbox h2 { padding-left: 1.6rem; } .mv .ttlbox h2::after { left: 1.6rem; } } .mv .ttlbox .fuki00 { position: absolute; width: 15rem; display: inline-block; } @media screen and (max-width: 768px) { .mv .ttlbox .fuki00 { width: 26.4rem; } } .mv .ttlbox .fuki01 { left: 0; top: -13.2rem; } @media screen and (max-width: 1080px) { .mv .ttlbox .fuki01 { top: -9rem; } } @media screen and (max-width: 768px) { .mv .ttlbox .fuki01 { display: none; } } .mv .ttlbox .fuki02 { right: -10rem; top: -9rem; } @media screen and (max-width: 768px) { .mv .ttlbox .fuki02 { display: none; } } .mv .ttlbox .fuki03 { display: none; } @media screen and (max-width: 768px) { .mv .ttlbox .fuki03 { display: block; top: -9rem; left: 1.6rem; } } .mv .ulbox .ul01 { display: flex; flex-wrap: wrap; gap: 1.6rem; } @media screen and (max-width: 480px) { .mv .ulbox .ul01 { padding-inline: 1.6rem; } } .mv .ulbox .ul01 li { width: calc((100% - 4.8rem) / 4); background-color: #FBFBFB; border-radius: 4px; padding: 1.6rem; border: 1px solid #F3F3F3; } @media screen and (max-width: 768px) { .mv .ulbox .ul01 li { width: 100%; } } .mv .ulbox .ul01 li .ttlbox { display: flex; align-items: start; gap: 8px; margin-bottom: 8px; } .mv .ulbox .ul01 li .ttlbox img { width: 3.2rem; aspect-ratio: 1; margin-top: -3px; } .mv .ulbox .ul01 li .ttlbox h3 { font-size: 2rem; line-height: 1.2; font-weight: 700; } .mv .ulbox .ul01 li p { font-size: 1.4rem; } section .inner1280 { position: relative; } section .inner1280 .toall { position: absolute; top: 0; right: 0; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; transform: translateY(50%); } @media screen and (max-width: 768px) { section .inner1280 .toall { transform: translateY(15%); } } section .inner1280 .toall::after { content: ""; display: inline-block; width: 2rem; aspect-ratio: 1; background-image: url("../img/common/arr_r02.png"); background-repeat: no-repeat; background-size: contain; padding-top: 5px; transform: translate(0px, 1px); } @media screen and (max-width: 768px) { section .inner1280 .toall::after { width: 3.6rem; transform: translate(-9px, 1px); } } @media screen and (max-width: 768px) { section .inner1280 .toall span { opacity: 0; display: inline-block; } } .sec01, .sec02, .sec03 { padding-top: 8rem; } .sec01 .subh2, .sec02 .subh2, .sec03 .subh2 { margin-bottom: 1.6rem; } .sec01 .ulbox .ul01, .sec02 .ulbox .ul01, .sec03 .ulbox .ul01 { display: flex; flex-wrap: wrap; gap: 1.6rem; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul01, .sec02 .ulbox .ul01, .sec03 .ulbox .ul01 { gap: 0; } } .sec01 .ulbox .ul01 li, .sec02 .ulbox .ul01 li, .sec03 .ulbox .ul01 li { width: calc((100% - 3.2rem) / 3); border: 1px solid #B7B7B7; border-radius: 4px; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul01 li, .sec02 .ulbox .ul01 li, .sec03 .ulbox .ul01 li { width: 100%; border: none; } } .sec01 .ulbox .ul01 li a, .sec02 .ulbox .ul01 li a, .sec03 .ulbox .ul01 li a { width: 100%; display: flex; align-items: center; gap: 8px; gap: 1.6rem; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); border-radius: 4px; border-top: 4px solid #FCC707; padding: 1.8rem 1.6rem; background-color: #FBFBFB; position: relative; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul01 li a, .sec02 .ulbox .ul01 li a, .sec03 .ulbox .ul01 li a { border-radius: 0; border-top: 2px solid #FCC707; } } .sec01 .ulbox .ul01 li a::after, .sec02 .ulbox .ul01 li a::after, .sec03 .ulbox .ul01 li a::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 1.6rem; transform: translate(0, -50%); width: 2.4rem; aspect-ratio: 1; background-image: url("../img/common/arr_r.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 480px) { .sec01 .ulbox .ul01 li a::after, .sec02 .ulbox .ul01 li a::after, .sec03 .ulbox .ul01 li a::after { right: 4px; } } .sec01 .ulbox .ul01 li a img, .sec02 .ulbox .ul01 li a img, .sec03 .ulbox .ul01 li a img { width: 7.1rem; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul01 li a img, .sec02 .ulbox .ul01 li a img, .sec03 .ulbox .ul01 li a img { width: 6.4rem; } } .sec01 .ulbox .ul01 li a .ttlbox, .sec02 .ulbox .ul01 li a .ttlbox, .sec03 .ulbox .ul01 li a .ttlbox { font-size: 1.4rem; } @media screen and (max-width: 480px) { .sec01 .ulbox .ul01 li a .ttlbox, .sec02 .ulbox .ul01 li a .ttlbox, .sec03 .ulbox .ul01 li a .ttlbox { width: 65%; } } .sec01 .ulbox .ul01 li a .ttlbox h3, .sec02 .ulbox .ul01 li a .ttlbox h3, .sec03 .ulbox .ul01 li a .ttlbox h3 { font-weight: 700; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul01 li a .ttlbox h3, .sec02 .ulbox .ul01 li a .ttlbox h3, .sec03 .ulbox .ul01 li a .ttlbox h3 { margin-bottom: 8px; } } .sec01 .ulbox .ul02 li, .sec02 .ulbox .ul02 li, .sec03 .ulbox .ul02 li { width: calc((100% - 1.6rem) / 2); } @media screen and (max-width: 768px) { .sec01 .ulbox .ul02 li, .sec02 .ulbox .ul02 li, .sec03 .ulbox .ul02 li { width: 100%; } } .sec01 .ulbox .ul02 li a, .sec02 .ulbox .ul02 li a, .sec03 .ulbox .ul02 li a { padding: 1.6rem; font-size: 1.4rem; } .sec01 .ulbox .ul02 li a .txtbox p, .sec02 .ulbox .ul02 li a .txtbox p, .sec03 .ulbox .ul02 li a .txtbox p { display: flex; align-items: center; gap: 1.6rem; } .sec01 .ulbox .ul02 li a .txtbox p span, .sec02 .ulbox .ul02 li a .txtbox p span, .sec03 .ulbox .ul02 li a .txtbox p span { display: inline-block; } .sec01 .ulbox .ul02 li a .txtbox p .category, .sec02 .ulbox .ul02 li a .txtbox p .category, .sec03 .ulbox .ul02 li a .txtbox p .category { padding: 6px 8px; border-radius: 4px; background-color: #E9E7E2; } .sec01 .ulbox .ul02 li a .txtbox p .date, .sec02 .ulbox .ul02 li a .txtbox p .date, .sec03 .ulbox .ul02 li a .txtbox p .date { color: #B7B7B7; } @media screen and (max-width: 768px) { .sec01 .ulbox .ul03, .sec02 .ulbox .ul03, .sec03 .ulbox .ul03 { gap: 1.6rem; } } @media screen and (max-width: 580px) { .sec01 .ulbox .ul03, .sec02 .ulbox .ul03, .sec03 .ulbox .ul03 { gap: 1.6rem 8px; } } .sec01 .ulbox .ul03 li, .sec02 .ulbox .ul03 li, .sec03 .ulbox .ul03 li { width: calc((100% - 8rem) / 6); } @media screen and (max-width: 1080px) { .sec01 .ulbox .ul03 li, .sec02 .ulbox .ul03 li, .sec03 .ulbox .ul03 li { width: calc((100% - 4.8rem) / 4); } } @media screen and (max-width: 768px) { .sec01 .ulbox .ul03 li, .sec02 .ulbox .ul03 li, .sec03 .ulbox .ul03 li { width: calc((100% - 3.2rem) / 3); } } @media screen and (max-width: 580px) { .sec01 .ulbox .ul03 li, .sec02 .ulbox .ul03 li, .sec03 .ulbox .ul03 li { width: calc((100% - 8px) / 2); border: 1px solid #B7B7B7; border-radius: 4px; } } .sec01 .ulbox .ul03 li a, .sec02 .ulbox .ul03 li a, .sec03 .ulbox .ul03 li a { flex-direction: column; aspect-ratio: 1; justify-content: center; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); } @media screen and (max-width: 768px) { .sec01 .ulbox .ul03 li a, .sec02 .ulbox .ul03 li a, .sec03 .ulbox .ul03 li a { border-radius: 4px; } } .sec01 .ulbox .ul03 li a::after, .sec02 .ulbox .ul03 li a::after, .sec03 .ulbox .ul03 li a::after { display: none; } .sec01 .ulbox .ul03 li a h3, .sec02 .ulbox .ul03 li a h3, .sec03 .ulbox .ul03 li a h3 { font-size: 1.4rem; font-weight: 350; padding: 6px 8px; border-radius: 4px; background-color: #E9E7E2; } @media screen and (max-width: 768px) { .sec01 .inner1280 { padding-inline: 0; } .sec01 .inner1280 h2 { padding-inline: 1.6rem; } .sec01 .inner1280 h2::after { left: 1.6rem; } } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 { gap: 1.6rem; } } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 li { border: 1px solid #B7B7B7; border-radius: 4px; } } .sec02 .ulbox .ul01 li a { align-items: start; } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 li a { border-radius: 4px; } } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 li a::after { display: none; } } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 li a img { width: 5.4rem; } } .sec02 .ulbox .ul01 li a .txtbox h3 { letter-spacing: 0; } @media screen and (max-width: 768px) { .sec02 .ulbox .ul01 li a .txtbox p { flex-direction: column; align-items: start; gap: 8px; margin-top: 8px; } } .sec03 { padding-bottom: 8rem; } .sec04 { padding: 4rem 0 4.7rem; background-image: url("../img/top/bg02.png"); background-repeat: no-repeat; background-size: cover; background-position: bottom; color: #fff; } @media screen and (max-width: 480px) { .sec04 { background-image: url("../img/top/bg04.png"); padding: 4rem 0 8.7rem; } } .sec04 .ttlbox h2 { color: #fff; } .sec04 .ttlbox img { width: 24rem; } .sec04 .ulbox { margin: 1.6rem 0 3.7rem; } .sec04 .ulbox .ul01 { display: flex; } @media screen and (max-width: 768px) { .sec04 .ulbox .ul01 { flex-direction: column; gap: 1.6rem; } } .sec04 .ulbox .ul01 li { width: 33.3333333333%; } @media screen and (max-width: 768px) { .sec04 .ulbox .ul01 li { width: 100%; display: flex; align-items: center; gap: 8px; } } .sec04 .ulbox .ul01 li img { width: 12.4rem; margin-inline: auto; margin-bottom: 8px; } @media screen and (max-width: 768px) { .sec04 .ulbox .ul01 li img { width: 13.6rem; margin-inline: 0; } } .sec04 .ulbox .ul01 li p { font-size: 1.6rem; font-weight: 700; text-align: center; line-height: 1.6; } @media screen and (max-width: 768px) { .sec04 .ulbox .ul01 li p { text-align: left; font-size: 1.4rem; } } .sec04 .ulbox .ul01 li p span { color: #FCC707; } .sec04 .txt01 { font-size: 1.4rem; margin-bottom: 1.6rem; } .sec04 .btn02 { margin-bottom: 1.6rem; } .sec04 .txt02 { font-size: 1.1rem; font-weight: 100; } .sec05 { padding: 8rem 0; } .sec05 .box { display: flex; align-items: center; justify-content: center; gap: 2rem; } @media screen and (max-width: 768px) { .sec05 .box { flex-direction: column; } } .sec05 .box .left { width: 24.8rem; } .sec05 .box .right { width: calc(100% - 2rem - 24.8rem); } @media screen and (max-width: 768px) { .sec05 .box .right { width: 100%; } } .sec05 .box .right h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1.6rem; letter-spacing: 0; } @media screen and (max-width: 768px) { .sec05 .box .right h3 { font-size: 1.9rem; } } .sec05 .box .right p { font-size: 1.4rem; margin-bottom: 1.6rem; } .sec05 .box .right .btn03 p { margin-bottom: 0; } footer { padding: 8rem 0; background-color: #423400; color: #fff; } @media screen and (max-width: 768px) { footer { padding: 2.4rem 0; } } footer .logo { width: 31rem; margin-bottom: 2.4rem; } @media screen and (max-width: 480px) { footer .logo { width: 100%; } } footer .box { display: flex; justify-content: space-between; align-items: start; } @media screen and (max-width: 768px) { footer .box { flex-direction: column; } } @media screen and (max-width: 768px) { footer .box .left { margin-bottom: 3.2rem; } } footer .box .center, footer .box .right { font-size: 1.4rem; } @media screen and (max-width: 768px) { footer .box .center, footer .box .right { width: 100%; } } footer .box .center p, footer .box .right p { margin-bottom: 1.6rem; } @media screen and (max-width: 768px) { footer .box .center .ul01, footer .box .right .ul01 { width: 100%; } } @media screen and (max-width: 768px) { footer .box .center .ul01 li, footer .box .right .ul01 li { width: 100%; } } footer .box .center .ul01 li a, footer .box .right .ul01 li a { margin-bottom: 1.6rem; color: #FCC707; position: relative; display: flex; align-items: center; gap: 8px; letter-spacing: 0; } footer .box .center .ul01 li a::after, footer .box .right .ul01 li a::after { content: ""; display: inline-block; width: 1.6rem; aspect-ratio: 1; background-image: url("../img/common/arr_r03.png"); background-repeat: no-repeat; background-size: contain; transform: translate(0, 1px); } @media screen and (max-width: 768px) { footer .box .center .ul01 li a::after, footer .box .right .ul01 li a::after { position: absolute; right: -24px; } } .copy { padding: 12px 0; display: flex; align-items: center; justify-content: center; gap: 1.6rem; } @media screen and (max-width: 480px) { .copy { flex-direction: column; } } .copy img { width: 15.7rem; } .copy p { width: fit-content; font-size: 1.4rem; } @media screen and (max-width: 768px) { .category .pg .inner1280 { padding-inline: 0; } } .category .pg .box { padding: 1.6rem 0; } @media screen and (max-width: 768px) { .category .pg .box h2 { padding-left: 1.6rem; } .category .pg .box h2::after { left: 1.6rem; } } .category .pg .box .ulbox { display: flex; gap: 1.6rem; margin-bottom: 8rem; } @media screen and (max-width: 768px) { .category .pg .box .ulbox { flex-direction: column; } } .category .pg .box .ulbox .left { width: 24.3rem; min-height: 24.3rem; padding: 1.6rem; background-color: #FBFBFB; border-top: 1px solid #B7B7B7; border-left: 1px solid #B7B7B7; } @media screen and (max-width: 768px) { .category .pg .box .ulbox .left { width: 100%; } } @media screen and (max-width: 768px) { .category .pg .box .ulbox .left .inbox { width: 100%; display: flex; gap: 1.6rem; } } .category .pg .box .ulbox .left h3 { letter-spacing: 0; } .category .pg .box .ulbox .left .number { font-size: 1.4rem; display: block; background-color: #FDE282; text-align: center; letter-spacing: 0; border-radius: 4px; width: 3.2rem; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: 1.6rem; } .category .pg .box .ulbox .right { width: calc(100% - 1.6rem - 24.3rem); } @media screen and (max-width: 768px) { .category .pg .box .ulbox .right { width: calc(100% - 3.2rem); margin-inline: auto; margin-top: -18rem; } } .category .pg .box .ulbox .right ul { height: 100%; display: flex; gap: 1.6rem; flex-wrap: wrap; } @media screen and (max-width: 768px) { .category .pg .box .ulbox .right ul { gap: 8px; } } .category .pg .box .ulbox .right ul li { width: calc((100% - 4.8rem) / 4); border-radius: 1rem; border: 1px solid #B7B7B7; overflow: hidden; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); } @media screen and (max-width: 768px) { .category .pg .box .ulbox .right ul li { width: calc((100% - 8px) / 2); } } .category .pg .box .ulbox .right ul li a { width: 100%; height: 100%; border-radius: 1rem; background-color: #FBFBFB; position: relative; } .category .pg .box .ulbox .right ul li a::after { content: ""; display: inline-block; width: 2.4rem; aspect-ratio: 1; position: absolute; bottom: 1.6rem; right: 1.6rem; background-image: url("../img/common/arr_r05.png"); background-repeat: no-repeat; background-size: contain; } .category .pg .box .ulbox .right ul li a .img { overflow: hidden; width: 100%; height: auto; } .category .pg .box .ulbox .right ul li a .img img { height: 100%; object-fit: cover; object-position: center; transition: all 0.3s; } .category .pg .box .ulbox .right ul li a .txtbox { padding: 1.6rem; height: auto; min-height: 9.2rem; } @media screen and (max-width: 768px) { .category .pg .box .ulbox .right ul li a .txtbox { min-height: 12.6rem; } } .category .pg .box .ulbox .right ul li a .txtbox p { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; height: auto; display: block; padding-bottom: 1.6rem; } .category .pg .box .ulbox .right ul li a:hover { opacity: 1; } .category .pg .box .ulbox .right ul li a:hover .img img { transform: scale(1.1); } .blog .pg .content { padding: 1.6rem 0 8rem; } @media screen and (max-width: 768px) { .blog .pg .content .inner1280 { padding: 5.6rem 7.5px 8rem; } } .blog .pg .content .box { background-color: #FBFBFB; border-top: 1px solid #B7B7B7; padding: 4rem 9.2rem; } @media screen and (max-width: 768px) { .blog .pg .content .box { padding: 16px 8.5px; } } .blog .pg .content .box p { font-size: 1.4rem; line-height: 1.4; margin-bottom: 1.6rem; } .blog .pg .content .box h3 { margin-top: 8rem; } .blog .pg .content .box h4 { margin-top: 8rem; } .blog .pg .content .box .strong01 { font-size: 1.6rem; font-weight: 700; width: calc(100% - 16rem); margin-inline: auto; padding: 1.6rem; background-color: #FFF7DA; border-top: 1px solid #FCC707; border-left: 1px solid #FCC707; } @media screen and (max-width: 768px) { .blog .pg .content .box .strong01 { width: 100%; } } .blog .pg .content .box .sp-tagbox { display: none; font-size: 1.4rem; } @media screen and (max-width: 768px) { .blog .pg .content .box .sp-tagbox { display: block; } } .blog .pg .content .box .sp-tagbox ul { display: flex; flex-wrap: wrap; min-width: unset; overflow-x: unset; gap: 8px; } .blog .pg .content .box .sp-tagbox ul li { margin-bottom: 0; padding-left: 0; min-width: unset; } .blog .pg .content .box .sp-tagbox ul li::after { display: none; } .blog .pg .content .box .sp-contact { display: none; width: 100%; } @media screen and (max-width: 768px) { .blog .pg .content .box .sp-contact { display: block; } } .blog .pg .content .box .txtbox { margin: 8rem 0; padding: 1.6rem; background-color: #FFF7DA; border-top: 1px solid #FCC707; border-left: 1px solid #FCC707; } .blog .pg .content .box .txtbox .point { font-size: 2rem; width: fit-content; background-color: #FBFBFB; border-radius: 4rem; border: 1px solid #FCC707; padding: 8px 16px; font-weight: 600; } .blog .pg .content .box .ttl { background-color: #FCC707; padding: 8px 8px 8px 34px; margin-bottom: 0; font-size: 1.4rem; font-weight: 700; position: relative; } .blog .pg .content .box .ttl::after { content: ""; display: inline-block; width: 2px; height: 16px; background-color: #423400; position: absolute; top: 50%; left: 17px; transform: translateY(-50%); } .blog .pg .content .box table { width: 100%; } .blog .pg .content .box table tr:nth-child(odd) { background-color: #F3F3F3; } .blog .pg .content .box table tr th, .blog .pg .content .box table tr td { padding: 8px; font-size: 1.4rem; } .blog .pg .content .box table tr th { width: 33.6rem; } @media screen and (max-width: 768px) { .blog .pg .content .box table tr th { width: unset; } } .blog .pg .content .box table tr td { font-weight: 100; } .blog .pg .content .box .img01 { width: 100%; } .blog .pg .content .box .img02 { width: 70%; } @media screen and (max-width: 768px) { .blog .pg .content .box .img02 { width: 100%; } } .blog .pg .content .box .img03 { width: 50%; } @media screen and (max-width: 768px) { .blog .pg .content .box .img03 { width: 100%; } } .blog .pg .content .box .mokuji { margin-top: 8rem; } @media screen and (max-width: 768px) { .blog .pg .content .box ul, .blog .pg .content .box ol { overflow-x: scroll; } } @media screen and (max-width: 768px) { .blog .pg .content .box ul li, .blog .pg .content .box ol li { min-width: 1000px; } } @media screen and (max-width: 768px) { .blog .pg .content .box ul li .img03, .blog .pg .content .box ol li .img03 { width: calc(100vw - 3.2rem); } } .blog .pg .content .box ul li { font-size: 1.4rem; padding-left: 2.4rem; margin-bottom: 1.6rem; letter-spacing: 0; position: relative; } .blog .pg .content .box ul li::after { content: ""; display: inline-block; background-color: #FCC707; width: 8px; aspect-ratio: 1; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .blog .pg .content .box ol { counter-reset: item; } .blog .pg .content .box ol li { counter-increment: item; font-size: 1.4rem; margin-bottom: 1.6rem; letter-spacing: 0; position: relative; } .blog .pg .content .box ol li::before { content: counter(item) " "; background-color: #FDE282; display: inline-block; width: 2.4rem; font-weight: 700; aspect-ratio: 1; border-radius: 4px; text-align: center; margin-right: 1.6rem; } .blog .pg .content .box ol li img { margin-top: 1.6rem; } .blog .pg .content .box .ul01 li, .blog .pg .content .box .ol01 li { padding: 1.6rem; border-bottom: 1px solid #B7B7B7; margin-bottom: 0; } .blog .pg .content .box .ul01 li::before, .blog .pg .content .box .ol01 li::before { top: 16px; } .blog .pg .content .box .ol01 li { padding: 1.6rem 0; } .blog .pg .content .box .youtube { width: 100%; aspect-ratio: 16/9; margin: 8rem 0; } .blog .pg .content .box h5 { background-color: #FCC707; padding: 8px 8px 8px 34px; margin-bottom: 0; font-size: 1.4rem; font-weight: 700; position: relative; } .blog .pg .content .box h5::after { content: ""; display: inline-block; width: 2px; height: 16px; background-color: #423400; position: absolute; top: 50%; left: 17px; transform: translateY(-50%); } .blog .pg .content .box h6 { font-size: 1.6rem; font-weight: 700; width: calc(100% - 16rem); margin-inline: auto; padding: 1.6rem; background-color: #FFF7DA; border-top: 1px solid #FCC707; border-left: 1px solid #FCC707; } .blog .pg .content .box .wp-block-verse { margin: 8rem 0; padding: 1.6rem; background-color: #FFF7DA; border-top: 1px solid #FCC707; border-left: 1px solid #FCC707; font-size: 1.4rem; } .blog .pg .content .box .wp-block-verse mark { font-size: 2rem; width: -moz-fit-content; width: fit-content; background-color: #FBFBFB; border-radius: 4rem; border: 1px solid #FCC707; padding: 8px 16px; font-weight: 600; color: #000 !important; background-color: #ffffff !important; } .blog .pg .content .box .wp-block-table td, .blog .pg .content .box .wp-block-table th { border: 0px !important; } @media screen and (max-width: 768px) { .blog .pg .blog_link .ulbox { overflow-x: auto; } .blog .pg .blog_link .ulbox ul { min-width: 1240px; flex-wrap: nowrap !important; } .blog .pg .blog_link .ulbox ul li { width: 24.3rem !important; } } .news .pg .wrap { padding: 1.6rem 0 8rem; } @media screen and (max-width: 768px) { .news .pg .wrap { padding: 0 0 8rem; } } .news .pg .box { display: flex; gap: 1.6rem; } @media screen and (max-width: 768px) { .news .pg .box .side { display: none; } } .news .pg .box .side .inbox .filterbox .ul02 { width: 100%; } .news .pg .box .content { width: calc(100% - 1.6rem - 30.8rem); } @media screen and (max-width: 768px) { .news .pg .box .content { width: 100%; } } .news .pg .box .content .ulbox .ul01 { display: flex; flex-wrap: wrap; gap: 1.6rem; } @media screen and (max-width: 768px) { .news .pg .box .content .ulbox .ul01 { gap: 0; } } .news .pg .box .content .ulbox .ul01 li { width: 100%; border: 1px solid #B7B7B7; border-radius: 4px; } @media screen and (max-width: 768px) { .news .pg .box .content .ulbox .ul01 li { width: 100%; border: none; margin-bottom: 1.6rem; } } .news .pg .box .content .ulbox .ul01 li a { width: 100%; display: flex; align-items: start; gap: 8px; gap: 1.6rem; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); border-radius: 4px; border-top: 4px solid #FCC707; padding: 1.6rem; background-color: #FBFBFB; position: relative; } .news .pg .box .content .ulbox .ul01 li a::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 1.6rem; transform: translate(0, -50%); width: 2.4rem; aspect-ratio: 1; background-image: url("../img/common/arr_r.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 480px) { .news .pg .box .content .ulbox .ul01 li a::after { display: none; } } .news .pg .box .content .ulbox .ul01 li a img { width: 5.2rem; } @media screen and (max-width: 768px) { .news .pg .box .content .ulbox .ul01 li a img { width: 5.2rem; } } .news .pg .box .content .ulbox .ul01 li a .ttlbox { font-size: 1.4rem; } @media screen and (max-width: 480px) { .news .pg .box .content .ulbox .ul01 li a .ttlbox { width: 65%; } } .news .pg .box .content .ulbox .ul01 li a .ttlbox h3 { font-weight: 700; } .news .pg .box .content .ulbox .ul01 li a .txtbox h3 { padding-bottom: 0; font-size: 1.4rem; } .news .pg .box .content .ulbox .ul01 li a .txtbox h3::after { display: none; } .news .pg .box .content .ulbox .ul01 li a .txtbox p { display: flex; align-items: center; gap: 1.6rem; font-size: 1.4rem; } @media screen and (max-width: 768px) { .news .pg .box .content .ulbox .ul01 li a .txtbox p { flex-direction: column; align-items: start; } } .news .pg .box .content .ulbox .ul01 li a .txtbox p span { display: inline-block; } .news .pg .box .content .ulbox .ul01 li a .txtbox p .category { padding: 6px 8px; border-radius: 4px; background-color: #E9E7E2; } .news .pg .box .content .ulbox .ul01 li a .txtbox p .date { color: #B7B7B7; } .contact .pg .content { padding: 1.6rem 0 9.6rem; } .contact .pg .content .txt { font-size: 1.4rem; margin-bottom: 1.6rem; } .contact .pg .content .box { background-color: #FBFBFB; } .contact .pg .content .box .form { padding-bottom: 4rem; } .contact .pg .content .box .form .inbox { padding: 4rem 9.2rem 0; border-top: 1px solid #B7B7B7; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .inbox { padding: 4rem 1.6rem 0; } } .contact .pg .content .box .form .inbox h3 { margin-bottom: 4rem; } .contact .pg .content .box .form .inbox table { width: 100%; } .contact .pg .content .box .form .inbox table tr th, .contact .pg .content .box .form .inbox table tr td { font-size: 1.4rem; line-height: 1; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .inbox table tr th, .contact .pg .content .box .form .inbox table tr td { display: block; } } .contact .pg .content .box .form .inbox table tr th { font-weight: 700; width: 28rem; vertical-align: top; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .inbox table tr th { width: 100%; padding-bottom: 1.6rem; } } .contact .pg .content .box .form .inbox table tr th p { margin-top: 10px; display: block; font-weight: 700; } .contact .pg .content .box .form .inbox table tr .required p { width: fit-content; display: block; position: relative; } .contact .pg .content .box .form .inbox table tr .required p::after { content: "必須"; position: absolute; top: 50%; right: -50px; transform: translateY(-50%); font-size: 1.1rem; background-color: #FFE6DB; border-radius: 4px; width: 3.8rem; aspect-ratio: 38/24; display: flex; align-items: center; justify-content: center; } .contact .pg .content .box .form .inbox table tr td { width: calc(100% - 28rem); padding-bottom: 4rem; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .inbox table tr td { width: 100%; } } .contact .pg .content .box .form .inbox table tr td input, .contact .pg .content .box .form .inbox table tr td textarea, .contact .pg .content .box .form .inbox table tr td select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #B7B7B7; letter-spacing: 0; } .contact .pg .content .box .form .inbox table tr td input::placeholder, .contact .pg .content .box .form .inbox table tr td textarea::placeholder, .contact .pg .content .box .form .inbox table tr td select::placeholder { color: #B7B7B7; font-weight: 100; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .inbox table tr td input::placeholder, .contact .pg .content .box .form .inbox table tr td textarea::placeholder, .contact .pg .content .box .form .inbox table tr td select::placeholder { font-size: 1.3rem; } } .contact .pg .content .box .form .inbox table tr td input:focus, .contact .pg .content .box .form .inbox table tr td textarea:focus, .contact .pg .content .box .form .inbox table tr td select:focus { border: 1px solid #D4A90C; } .contact .pg .content .box .form .inbox table tr td textarea { min-height: 16.7rem; } .contact .pg .content .box .form .inbox table tr .td_select { position: relative; cursor: pointer; } .contact .pg .content .box .form .inbox table tr .td_select::after { content: ""; display: inline-block; position: absolute; top: 1rem; right: 8px; width: 1.2rem; aspect-ratio: 1; background-image: url("../img/common/arr_d.png"); background-repeat: no-repeat; background-size: contain; } .contact .pg .content .box .form .inbox table tr .td_error input { border: 1px solid #D64646; background-color: rgba(235, 163, 163, 0.3); } .contact .pg .content .box .form .inbox .note { font-size: 1.4rem; margin-top: 8px; } .contact .pg .content .box .form .inbox .error { color: #D64646; font-weight: 700; } .contact .pg .content .box .form .terms { margin-bottom: 1rem; border-top: 1px solid #B7B7B7; padding: 4rem 9.6rem 0; font-size: 1.4rem; margin-bottom: 1.6rem; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .terms { padding: 4rem 1.6rem 0; } } .contact .pg .content .box .form .terms input[type=checkbox] + label { position: relative; cursor: pointer; padding-left: 30px; } .contact .pg .content .box .form .terms input[type=checkbox] + label::before { content: ""; position: absolute; left: 0; top: 0; border: 1px solid #B7B7B7; border-radius: 4px; width: 1.6rem; aspect-ratio: 1; } .contact .pg .content .box .form .terms input[type=checkbox]:checked + label:before { background-image: url("../img/common/check.png"); background-size: 12px 12px; background-repeat: no-repeat; background-position: center; } .contact .pg .content .box .form .terms a { display: inline-block; text-decoration: underline; font-weight: 700; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .terms a { display: inline; } } .contact .pg .content .box .form .btn06 { margin-left: 9.6rem; } @media screen and (max-width: 768px) { .contact .pg .content .box .form .btn06 { margin-left: 1.6rem; } } .thanks .pg .content { padding: 1.6rem 0 9.6rem; } .thanks .pg .box { padding: 4rem 0; border-top: 1px solid #B7B7B7; background-color: #FBFBFB; } .thanks .pg .box .img { width: 16.8rem; margin: 0 auto 4rem; } .thanks .pg .box .inbox { display: flex; justify-content: center; align-items: center; gap: 1.6rem; margin-bottom: 4rem; } .thanks .pg .box .inbox img { width: 2.4rem; aspect-ratio: 1; } .thanks .pg .box .inbox p { font-size: 2.4rem; font-weight: 700; } .thanks .pg .box .txt { text-align: center; font-size: 1.4rem; margin-bottom: 4rem; } .thanks .pg .box .btn05 { width: 158px; } .privacy .pg .content { padding: 1.6rem 0 9.6rem; } .privacy .pg .content .box { padding: 4rem 9.2rem; background-color: #FBFBFB; border-top: 1px solid #B7B7B7; } @media screen and (max-width: 768px) { .privacy .pg .content .box { padding: 4rem 1.6rem; } } .privacy .pg .content .box .inbox { padding-bottom: 4rem; margin-bottom: 4rem; border-bottom: 1px dotted #B7B7B7; display: flex; align-items: start; gap: 1.6rem; } .privacy .pg .content .box .inbox .left p { display: block; width: 2.4rem; aspect-ratio: 1; background-color: #FCC707; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 4px; } .privacy .pg .content .box .inbox .right p { font-size: 1.4rem; } .privacy .pg .content .box .inbox .right .ulbox { margin-top: 1.6rem; } .privacy .pg .content .box .inbox .right .ulbox ul { padding-left: 8rem; } @media screen and (max-width: 768px) { .privacy .pg .content .box .inbox .right .ulbox ul { padding-left: 0; } } .privacy .pg .content .box .inbox .right .ulbox ul li { display: flex; align-items: start; gap: 1.6rem; margin-bottom: 1.6rem; } .privacy .pg .content .box .inbox .right .ulbox ul li p { display: block; } .privacy .pg .content .box .inbox .right .ulbox ul li p:nth-child(2) { width: calc(100% - 2.4rem - 1.6rem); } .privacy .pg .content .box .inbox .right .ulbox ul li .number { display: block; width: 2.4rem; aspect-ratio: 1; background-color: #f3f3f3; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; border-radius: 4px; } .privacy .pg .content .box .inbox .right .ulbox ul li:last-child { margin-bottom: 0; } .privacy .pg .content .box .inbox02 { padding-bottom: 0rem; margin-bottom: 0rem; border-bottom: none; } .filter .pg .filter_container:not(:has(.filter_switch.open)) .when_open { display: none; } .filter .pg .filter_container:has(.filter_switch.open) .when_close { display: none; } .filter .pg .wrap { padding: 1.6rem 0 8rem; } @media screen and (max-width: 768px) { .filter .pg .wrap { padding: 0 0 8rem; } } @media screen and (max-width: 768px) { .filter .pg .pa-in0 { padding-inline: 0; } } .filter .pg h2 { line-height: 1.2; } .filter .pg h2 span { border-bottom: 4px solid #FCC707; display: inline-block; } .filter .pg h2::after { display: none; } .filter .pg .box { display: flex; gap: 1.6rem; margin-bottom: 8rem; } @media screen and (max-width: 768px) { .filter .pg .box .side { display: none; } } .filter .pg .box .content { width: calc(100% - 1.6rem - 30.8rem); } @media screen and (max-width: 768px) { .filter .pg .box .content { width: 100%; } } .filter .pg .box .content .ttlbox { margin-bottom: 1.6rem; } .filter .pg .box .content .ttlbox .ttl { display: flex; align-items: center; gap: 1.6rem; font-size: 1.6rem; font-weight: 700; } @media screen and (max-width: 768px) { .filter .pg .box .content .ttlbox .ttl { flex-direction: column; align-items: start; gap: 4px; } } .filter .pg .box .content .ttlbox .ttl span { font-weight: 350; font-size: 1.4rem; } .filter .pg .box .content .ulbox { padding: 8rem 0; border-bottom: 1px solid #B7B7B7; } .filter .pg .box .content .ulbox ul { height: 100%; display: flex; gap: 1.6rem; flex-wrap: wrap; } @media screen and (max-width: 980px) { .filter .pg .box .content .ulbox ul { gap: 8px; } } .filter .pg .box .content .ulbox ul li { width: calc((100% - 4.8rem) / 4); border-radius: 1rem; border: 1px solid #B7B7B7; overflow: hidden; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.33); } @media screen and (max-width: 980px) { .filter .pg .box .content .ulbox ul li { width: calc((100% - 16px) / 3); } } @media screen and (max-width: 480px) { .filter .pg .box .content .ulbox ul li { width: calc((100% - 8px) / 2); } } .filter .pg .box .content .ulbox ul li a { width: 100%; height: 100%; border-radius: 1rem; background-color: #FBFBFB; position: relative; } .filter .pg .box .content .ulbox ul li a::after { content: ""; display: inline-block; width: 2.4rem; aspect-ratio: 1; position: absolute; bottom: 1.6rem; right: 1.6rem; background-image: url("../img/common/arr_r05.png"); background-repeat: no-repeat; background-size: contain; } .filter .pg .box .content .ulbox ul li a .img { overflow: hidden; width: 100%; height: auto; } .filter .pg .box .content .ulbox ul li a .img img { height: 100%; object-fit: cover; object-position: center; transition: all 0.3s; } .filter .pg .box .content .ulbox ul li a .txtbox { padding: 1.6rem; height: auto; min-height: 9.2rem; } @media screen and (max-width: 768px) { .filter .pg .box .content .ulbox ul li a .txtbox { min-height: 12.6rem; } } .filter .pg .box .content .ulbox ul li a .txtbox p { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; height: auto; display: block; padding-bottom: 1.6rem; } .filter .pg .box .content .ulbox ul li a:hover { opacity: 1; } .filter .pg .box .content .ulbox ul li a:hover .img img { transform: scale(1.1); } .filter .pg .box .content .ulbox:first-child { padding-top: 0; } .filter .pg .box .content .ulbox:last-child { padding-bottom: 0; border-bottom: none; } @media screen and (max-width: 768px) { .filter .pg .box .content .btn05 { width: fit-content; } } @media screen and (max-width: 768px) { .filter .pg .box02 h2 { padding-left: 1.6rem; } .filter .pg .box02 h2::after { left: 1.6rem; } } .filter .pg .box02 .ulbox .ul01 { display: flex; flex-wrap: wrap; gap: 1.6rem; } @media screen and (max-width: 768px) { .filter .pg .box02 .ulbox .ul01 { gap: 0; } } .filter .pg .box02 .ulbox .ul01 li { width: calc((100% - 3.2rem) / 3); border: 1px solid #B7B7B7; border-radius: 4px; } @media screen and (max-width: 768px) { .filter .pg .box02 .ulbox .ul01 li { width: 100%; border: none; } } .filter .pg .box02 .ulbox .ul01 li a { width: 100%; display: flex; align-items: center; gap: 8px; gap: 1.6rem; box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2); border-radius: 4px; border-top: 4px solid #FCC707; padding: 1.3rem 1.6rem; background-color: #FBFBFB; position: relative; } @media screen and (max-width: 768px) { .filter .pg .box02 .ulbox .ul01 li a { border-radius: 0; border-top: 2px solid #FCC707; } } .filter .pg .box02 .ulbox .ul01 li a::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 1.6rem; transform: translate(0, -50%); width: 2.4rem; aspect-ratio: 1; background-image: url("../img/common/arr_r.png"); background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 480px) { .filter .pg .box02 .ulbox .ul01 li a::after { right: 4px; } } .filter .pg .box02 .ulbox .ul01 li a img { width: 7.1rem; } @media screen and (max-width: 768px) { .filter .pg .box02 .ulbox .ul01 li a img { width: 6.4rem; } } .filter .pg .box02 .ulbox .ul01 li a .ttlbox { font-size: 1.4rem; } @media screen and (max-width: 480px) { .filter .pg .box02 .ulbox .ul01 li a .ttlbox { width: 65%; } } .filter .pg .box02 .ulbox .ul01 li a .ttlbox h3 { font-size: 1.4rem; font-weight: 700; padding-bottom: 0; } @media screen and (max-width: 768px) { .filter .pg .box02 .ulbox .ul01 li a .ttlbox h3 { margin-bottom: 8px; } } .filter .pg .box02 .ulbox .ul01 li a .ttlbox h3::after { display: none; }/*# sourceMappingURL=style.css.map */