/* Theme Name: PlatformMedia Theme URI: https://corp.hifu3.com/ Author: 桑鳩堂 Author URI: https://corp.hifu3.com/ Description: 経営課題の解決策と信頼できる専門家をつなぐ、新しい情報プラットフォームです Tags: media, blog Version: 2025 Requires at least: 5.2 Tested up to: 6.8 Requires PHP: 7.4 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: PlatformMedia */ /* reset.css */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; font-family: 'Noto Sans JP', sans-serif; } /* 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;3 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; } /* common */ html {scroll-behavior: smooth;} :root { --main-primary: #0846aa; --main-text: #181c25; --main-sub: #6c7793; --main-hover: #0a5adb; } p {line-height: 1.7; word-wrap: break-word; color: var(--main-text);} a {transition: 0.3s ease-in-out;} ::placeholder { color: #bbb; } /* common */ .heading h2 { color: var(--main-text); font-size: 1.4rem; font-weight: 600; padding: 9px 0; border-bottom: solid 3px var(--main-primary); } a.btn, button.btn, input.btn { font-size: 0.9rem; font-weight: 500; background: #FFF; border-radius: 0.5rem; border: solid 1px var(--main-sub); padding: 15px 35px 18px; display: flex; width: fit-content; align-items: center; gap: 12px; } input.btn { transition: 0.3s ease-in-out; cursor: pointer; } a.btn:hover button.btn:hover, input.btn:hover { transform: scale(1.03); } a.btn.primaryBtn, button.btn.primaryBtn, input.btn.primaryBtn { background: var(--main-hover); color: #fff; } a.btn.primaryBtn:hover, a.btn.secondaryBtn:hover, button.btn.primaryBtn:hover, button.btn.secondaryBtn, input.btn.primaryBtn:hover { background: var(--main-primary); color: #fff; } /* header */ header#header { position: fixed; top: 0; width: 100%; padding: 6px 0 8px; border-bottom: solid 2px #eee; background: #fff; z-index: 999; } .header__inner { display: flex; justify-content: space-between; width: 100%; align-items: center; max-width: 1386px; margin: 0 auto; } .header__inner h1 a { display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 600; color: var(--main-primary); letter-spacing: 1.1px; padding: 5px 0; } .header__inner h1 a:hover { color: var(--main-hover); } ul.header__inner--list { display: flex; justify-content: flex-end; align-items: center; gap: 8px; } ul.header__inner--list li a { font-size: 0.8rem; color: var(--main-text); padding: 5px 10px; } ul.header__inner--list li a:hover { color: var(--main-primary); } ul.header__inner--list a.btn.primaryBtn { padding: 5px 12px 7px; border-radius: 0.3rem; background: var(--main-primary); } /* header active */ header#header li.active a { border-bottom: solid 2px var(--main-primary); color: var(--main-primary); } header#header li.active a.btn.primaryBtn { border: none; color: #fff; } button#spMenuClose { display: none; } /* main */ main.normalmain { margin-top: 60px; } /* mv */ main.normalmain.toppage { background: #fafbfd; } section#mv { position: relative; } .mv__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; gap: 45px; padding-top: 80px; padding-bottom: 60px; } .mv__inner--top { display: flex; flex-direction: column; } p.mvCopy { display: flex; flex-direction: column; font-weight: 900; line-height: 1.2; font-size: 4.4rem; } p.mvCopy span { color: #1c70dc; } .mv__inner--top h2 { color: var(--main-text); font-size: 5rem; font-weight: 900; width: fit-content; margin: 0 auto; border-bottom: solid 5px var(--main-primary); padding-bottom: 7px; } p.mvDesc { color: #475569; font-size: 1.4rem; font-weight: 500; line-height: 1.63; } .childCatMV__inner--headingBtn.mv a.btn { font-size: 1.1rem; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 10px 0 rgba(0, 0, 0, 0.22); } .childCatMV__inner--headingBtn.mv a.btn.primaryBtn { background: #1364e8; background: linear-gradient(90deg, rgba(19, 100, 232, 1) 0%, rgba(8, 82, 178, 1) 100%); } .childCatMV__inner--headingBtn.mv a.btn:hover { opacity: 0.9; transform: none; } .childCatMV__inner--headingBtn.mv a.btn.secondaryBtn:hover { background: #fafbfd; color: var(--main-text); } /* mv bottom post count */ .mv__inner--postCount { width: 100%; display: flex; justify-content: center; padding-top: 40px; border-top: solid 1px #ddd; max-width: 650px; margin: 30px auto 0; } .mv__inner--postCount p { color: #475569; } .mv__inner--postCount i { color: #22c55e; font-size: 0.7rem; vertical-align: 1px; margin-right: 8px; } /* top post */ section#topPosts { position: relative; } .topPosts__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } ul.postLists { display: flex; justify-content: space-between; flex-wrap: wrap; } li.postList { width: 32%; display: flex; flex-direction: column; gap: 8px; } li.postList a { display: flex; flex-direction: column; gap: 13px; border: solid 1px #eee; border-radius: 0.5rem; padding: 22px 28px; height: 100%; } li.postList a:hover { transform: translateY(-4px); } .postList__header { display: flex; justify-content: space-between; align-items: self-start; gap: 20px; flex-grow: 1; } .postList__header h3 { font-size: 1.1rem; font-weight: 600; transition: 0.2s ease-in-out; } li.postList a:hover .postList__header h3 { color: var(--main-primary); } p.postTag { white-space: nowrap; background: #f5f5f5; font-size: 0.8rem; font-weight: 600; padding: 1px 8px 3px; border-radius: 9999px; } p.postDesc { color: var(--main-sub); font-size: 0.9rem; } .postList__footer { display: flex; justify-content: space-between; align-items: center; } p.postDate { color: var(--main-sub); font-size: 0.8rem; } p.postReadMore, a.postReadMore { color: var(--main-primary); position: relative; display: flex; justify-content: flex-end; padding-right: 24px; } p.postReadMore:after, a.postReadMore:after { content: "\f061"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2px; top: 52%; transform: translateY(-50%); transition: 0.2s ease-in-out; } li.postList a:hover p.postReadMore:after, a.postReadMore:hover:after { right: -2px; } /* new card */ section#topNewPost { position: relative; } .topNewPost__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; overflow: hidden; } .newHeading { display: flex; justify-content: space-between; align-items: center; } h2.newHeading__left { color: var(--main-text); font-size: 1.6rem; font-weight: 600; } .newHeading__right { position: relative; display: flex; justify-content: flex-end; gap: 15px; } button#mediapost-autoplay-toggle { border: solid 1px #ddd; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; } .newHeading__right .swiper-button-prev, .newHeading__right .swiper-button-next { position: relative; border: solid 1px #ddd; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 5px; top: auto; left: auto; right: auto; bottom: auto; margin: 0; } .newHeading__right .swiper-button-next:after, .newHeading__right .swiper-button-prev:after { font-size: 0.8rem; color: var(--main-text); transition: 0.2s; } .newHeading__right .swiper-button-prev:hover, .newHeading__right .swiper-button-next:hover, button#mediapost-autoplay-toggle:hover, button#sponcorpost-autoplay-toggle:hover, .sponcor-autoplayBlock.newHeading__right a:hover { background: #ffffba; color: var(--main-text); } div#mediapost-swiper { padding-bottom: 25px; } span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--main-primary); width: 40px; border-radius: 0.8rem; } span.swiper-pagination-bullet { width: 10px; height: 10px; transition: 0.3s; } .cardLink { background: #fff; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22); overflow: hidden; border-radius: 0.5rem; display: flex; flex-direction: column; } .cardLink__img { position: relative; overflow: hidden; } .cardLink__img img { vertical-align: bottom; transition: 0.3s ease-in-out; height: 215px; object-fit: cover; width: 100%; object-position: center; } .cardLink:hover .cardLink__img img { transform: scale(1.1); } .cardLink__text { display: flex; flex-direction: column; padding: 22px 25px; gap: 15px; } .cardLink__text--top { display: flex; justify-content: space-between; align-items: center; } a.postTitles { color: var(--main-text); font-size: 1.3rem; font-weight: 600; height: calc(1.5em * 2); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } a.postTitles:hover { color: var(--main-hover); } p.postDesc { color: var(--main-sub); font-size: 0.9rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; } .cardLink__text a.postReadMore { margin-top: 12px; justify-content: flex-start; width: fit-content; } /* search category */ .topCatlist__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } .topCatlist__inner--block { display: flex; flex-direction: column; gap: 18px; } h3.catTit { color: var(--main-sub); font-size: 1.3rem; font-weight: 600; margin-top: 12px; } ul.topCatlistItems { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 18px; } li.topCatlistItem { width: 24%; } a.catCard { display: flex; flex-direction: column; gap: 16px; border-radius: 0.6rem; padding: 22px 28px; background: #fff; transition: 0.2s ease-in-out; height: 100%; border: solid 1px #eee; position: relative; overflow: hidden; } a.catCard:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } a.catCard:before { content: ""; width: 100%; height: 5px; position: absolute; top: 0; left: 0; background: var(--main-primary); opacity:0; transition: 0.3s; } a.catCard:hover:before { opacity:1; } .catCard__top { display: flex; justify-content: space-between; align-items: flex-start; } .catCard__top--icon { width: 42px; height: 42px; background: #F9F9F9; display: flex; justify-content: center; align-items: center; border-radius: 3px; } p.CatPostCount { color: var(--main-sub); font-size: 0.9rem; font-weight: 500; background: #f0f0f0; padding: 1px 12px 2px; border-radius: 3px; } h4.catCard__top--title { color: var(--main-text); font-size: 1.2rem; font-weight: 600; flex-grow: 1; } p.catCard__top--desc { color: var(--main-sub); font-size: 1rem; flex-grow: 2; } li.topCatlistItem p.postReadMore { justify-content: flex-start; opacity: 0; pointer-events: none; transition; 0.2s } a.catCard:hover p.postReadMore { opacity: 1; pointer-events: auto; } /* top spot */ .spotlight__inner { width: 100%; max-width: 1386px; margin: 0 auto; padding: 30px 0 0; } .spotlight__inner .newHeading { margin-bottom: 30px; } .newHeadingBlocks { display: flex; flex-direction: column; gap: 5px; } .newHeadingBlocks h2 { color: var(--main-text); font-size: 1.6rem; font-weight: 600; } p.newHeading__leftDesc { color: var(--main-sub); font-size: 1.1rem; } button#sponcorpost-autoplay-toggle { border: solid 1px #ddd; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 5px; cursor: pointer; } .sponcor-autoplayBlock.newHeading__right a { position: relative; border: solid 1px #ddd; height: 44px; display: flex; justify-content: center; align-items: center; border-radius: 5px; padding: 0 12px; font-weight: 500; } .swiper.sponcorpost-swiper { padding: 10px 0 30px; } .sponcorpost-card { display: flex; flex-direction: column; gap: 16px; border-radius: 0.6rem; padding: 22px 28px; background: #fff; transition: 0.2s ease-in-out; height: 100%; border: solid 1px #eee; position: relative; overflow: hidden; } .sponcorpost-card:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } .sponcorpost__top { display: flex; justify-content: flex-start; gap: 12px; } .sponcorpost__top--icon { width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; background: #bdd7ff; } .sponcorpost__top--icon i { font-size: 2.4rem; color: var(--main-primary); } .sponcorpost__top--name h3 { color: var(--main-text); font-weight: 600; font-size: 1.25rem; } p.sponcorpost__top--nameoccupation { color: var(--main-sub); } p.sponcorpost__top--namecorp { font-size: 0.8rem; color: var(--main-sub); } ul.sponcorpostProvided { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 5px 8px; } ul.sponcorpostProvided li { background: #f9fbff; font-size: 0.8rem; font-weight: 600; width: fit-content; padding: 0 8px; border-radius: 9999px; } .sponcorpostDesc p { color: var(--main-sub); font-size: 1rem; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; height: 81px; } .sponcorpost-card a.btn.secondaryBtn { padding: 11px 35px 13px; width: 100%; display: flex; justify-content: center; font-size: 0.9rem; border: solid 1px #eee; cursor: pointer; } .sponcorpost-card a.btn.secondaryBtn:hover { background: #ffffba; color: var(--main-text); transform: none; } /* top mail */ section#topmail { padding: 60px 0 100px; } .topmail__inner { background: #edf4ff; width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 60px 45px; border-radius: 0.5rem; border: solid 1px #aacbff; align-items: center; } .topmail__inner--top { display: flex; flex-direction: column; align-items: center; gap: 19px; } .topmail__inner--topIcon { width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; background: #bdd7ff; } .topmail__inner--top h2 { color: var(--main-text); font-size: 2rem; font-weight: 600; } p.topmail__inner--topdesc { color: var(--main-sub); font-size: 1.1rem; } .topmail__inner form.wpcf7-form.init { display: flex; justify-content: center; gap: 15px; align-items: center; } .topmail__inner form.wpcf7-form p { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; position: relative; } .topmail__inner input.wpcf7-form-control.wpcf7-email.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-email { background: #fff; padding: 12px 15px; border: solid 1px #ddd; border-radius: 0.5rem; } .topmail__inner input.wpcf7-form-control.wpcf7-submit.has-spinner { background: var(--main-primary); height: 51px; border-radius: 0.3rem; padding: 0px 21px; color: #fff; font-weight: 500; transition: 0.3s; cursor: pointer; } .topmail__inner input.wpcf7-form-control.wpcf7-submit.has-spinner:hover { opacity: 0.7; } span.wpcf7-not-valid-tip { width: fit-content; position: absolute; } span.wpcf7-spinner { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); } p.topmail__inner--middleText { color: var(--main-sub); font-size: 0.9rem; } p.topmail__inner--middleText a { color: var(--main-primary); text-decoration: underline; } ul.topmail__inner--bottom { display: flex; justify-content: center; gap: 40px; padding-top: 40px; border-top: solid 1px #ddd; width: 100%; max-width: 700px; margin-top: 10px; } ul.topmail__inner--bottom li { display: flex; flex-direction: column; align-items: center; color: var(--main-text); font-size: 1.8rem; font-weight: 600; } ul.topmail__inner--bottom li span { color: var(--main-sub); font-size: 1rem; font-weight: 400; } /* form custom */ .formWrapper { display: flex; justify-content: center; gap: 10px; } .topmail__inner .wpcf7 form .wpcf7-response-output { margin: 32px 0 0; } /* search genre */ .searchGenre__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } .searchGenre__lists { display: flex; justify-content: space-between; } .searchGenre__list { display: flex; flex-direction: column; gap: 16px; border-radius: 0.6rem; padding: 22px 28px; width: 48.8%; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05), 0 7px 17px 0 rgba(0, 0, 0, 0.08); transition: 0.2s ease-in-out; } .searchGenre__list:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } .searchGenre__list h3 { font-size: 1.2rem; font-weight: 600; } ul.genreLists { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; } li.genreList { width: fit-content; } li.genreList a { color: var(--main-primary); font-size: 0.9rem; width: fit-content; font-weight: 500; } li.genreList a:hover { color: var(--main-hover); } a.allGenre { color: var(--main-primary); font-weight: 500; font-size: 0.9rem; margin-top: 6px; } /* sponcer */ .topSponcer__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } .topSponcer__inner--block { display: flex; flex-direction: column; gap: 25px; } p.sponcerDesc { color: var(--main-sub); } ul.topSponcer__inner--blockLists { display: flex; justify-content: space-between; } li.topSponcer__inner--blockList { width: 48.8%; } li.topSponcer__inner--blockList a { display: flex; flex-direction: column; gap: 8px; border-radius: 0.6rem; padding: 22px 28px; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05), 0 7px 17px 0 rgba(0, 0, 0, 0.08); transition: 0.2s ease-in-out; width: 100%; } li.topSponcer__inner--blockList a h3 { color: var(--main-primary); font-weight: 600; font-size: 1rem; } p.SponcerTag { color: var(--main-sub); font-size: 0.9rem; } p.SponcerDesc { font-size: 0.9rem; } a.topSponcerLink { width: fit-content; color: var(--main-primary); font-weight: 500; font-size: 0.9rem; margin: 6px auto; } a.topSponcerLink:hover { color: var(--main-hover); } li.topSponcer__inner--blockList a:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } /* faq */ section#topFaq { position: relative; background: #f9f9f9; } .topFaq__inner { padding-top: 4rem; padding-bottom: 4rem; width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 4rem; } .topFaq__innerHeading { text-align: center; display: flex; flex-direction: column; gap: 12px; } .topFaq__innerHeading h2 { color: var(--main-text); font-size: 1.6rem; font-weight: 600; } .topFaq__innerHeading p { color: var(--main-sub); } .accordionInner { background: #FFF; overflow: hidden; border: solid 1px #ddd; border-radius: 6px; margin-bottom: 15px; } .accordion { display: block; line-height: 50px; border: none; cursor: pointer; font-size: 1rem; transition: 0.5s ease-in; position: relative; padding-left: 25px; height: 53px; margin: 0; font-weight: 500; } .accordion.active { margin-bottom: 0; } div.panel{ max-height:0; overflow:hidden; transition: 0.3s ease-out; } .panel p { padding: 12px 20px 16px; background: #fafafa; margin: 0; position:relative; padding-left: 25px; } .acco { position: relative; width: 100%; max-width: 800px; margin: 0 auto; } div.accordion:hover{ background-color: #f0f0f0; } .accordion:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-size: 1rem; color: #777; position: absolute; right: 15px; top: 51%; transform: translateY(-50%); font-weight: 900; } div.accordion.active:after { content: "\f106"; } /* go to top */ .gooTop { position: fixed; right: 30px; bottom: 30px; z-index: 9999; } .gooTop a { width: 43px; height: 43px; background: var(--main-primary); border-radius: 9999px; display: flex; justify-content: center; align-items: center; color: #fff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); } .gooTop a:hover { transform: scale(1.1); } /* footer */ footer#footer { background: #f7f7f7; border-top: solid 1px #e5e7eb; } .footer__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; text-align: center; padding: 2rem 0; gap: 1rem; } p.copyright { color: var(--main-sub); font-size: 0.9rem; } .footer__inner a { color: var(--main-primary); font-size: 0.9rem; width: fit-content; } .footer__inner a:hover { color: var(--main-hover); } .footer__inner--links { display: flex; justify-content: center; gap: 20px; } /* parent cat */ main.normalmain.bottomPadding { padding-bottom: 60px; } .parentcat__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 40px 0 0; } .parentcat__inner h2 { color: var(--main-text); font-size: 1.6rem; font-weight: 600; } .parentcat__inner p { color: var(--main-sub); } /* cat child */ .parencatTop__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } ul.catChilds { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 30px 2%; } li.catChild { width: 32%; } li.catChild a { display: flex; flex-direction: column; gap: 10px; border: solid 1px #eee; border-radius: 0.5rem; padding: 22px 28px; } li.catChild a h3 { font-size: 1.1rem; font-weight: 600; transition: 0.2s ease-in-out; color: var(--main-primary); } li.catChild a p { color: var(--main-sub); font-size: 0.9rem; } li.catChild a:hover h3 { color: var(--main-hover); } /* two column */ ul.postLists.twocolumn { gap: 30px 0; } ul.postLists.twocolumn li.postList { width: 49%; } /* child cat page */ .childCatMV__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 80px 0 60px; } .childCatMV__inner--heading { display: flex; flex-direction: column; gap: 22px; } .childCatMV__inner--heading h2 { display: flex; flex-direction: column; font-size: 3rem; font-weight: 900; line-height: 1.23; color: var(--main-text); } .childCatMV__inner--heading h2 span { color: var(--main-primary); } .childCatMV__inner--heading p { color: var(--main-sub); font-size: 1.2rem; font-weight: 400; line-height: 1.63; } .childCatMV__inner--headingBtn { display: flex; justify-content: center; gap: 30px; align-items: center; margin-top: 10px; } .heading.catHead h2 { font-size: 1.9rem; } /* cat child four */ .catChildFour__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px; padding: 30px 0; } .catChildFour__inner h2 { color: var(--main-text); font-size: 1.8rem; font-weight: 600; text-align: center; } ul.catChildFour__inner--lists { display: flex; justify-content: space-between; } li.catChildFour__inner--list { display: flex; flex-direction: column; gap: 8px; border: solid 1px #eee; border-radius: 0.5rem; padding: 22px 28px; width: 23.5%; align-items: center; text-align: center; position: relative; } li.catChildFour__inner--list span { background: var(--main-primary); width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; color: #fff; font-weight: 500; position: absolute; left: -15px; top: -15px; } .catChildFourImg svg { color: var(--main-primary); width: 100%; } li.catChildFour__inner--list h3 { color: var(--main-text); font-weight: 600; font-size: 1.1rem; } li.catChildFour__inner--list p { color: var(--main-sub); font-size: 0.9rem; } /* child cta */ section#childCatCTA { position: relative; padding: 30px 0; } .childCatCTA__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 40px 0 50px; gap: 16px; background: #F3F5F8; background: linear-gradient(90deg,rgba(243, 245, 248, 1) 0%, rgba(243, 245, 248, 1) 50%, rgba(255, 255, 255, 1) 100%); border-radius: 0.5rem; } .childCatCTA__inner h2 { color: var(--main-text); font-size: 1.8rem; font-weight: 600; text-align: center; } .childCatCTA__inner p { color: var(--main-sub); font-size: 0.9rem; font-weight: 400; line-height: 1.63; } .childCatCTA__inner a.btn { margin-top: 10px; } /* jisseki */ section#childCatJisseki { position: relative; padding: 50px 0; } .childCatJisseki__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 40px 55px 50px; gap: 16px; background: #FDFBF2; background: linear-gradient(90deg, rgba(253, 251, 242, 1) 0%, rgba(253, 251, 242, 1) 50%, rgba(255, 255, 255, 1) 100%); } .childCatJisseki__inner h2 { color: var(--main-text); font-size: 1.8rem; font-weight: 600; text-align: center; } ul.childCatJisseki__inner--lists { display: flex; justify-content: space-between; width: 100%; } li.childCatJisseki__inner--list { display: flex; flex-direction: column; gap: 8px; background: #fff; border-radius: 0.5rem; padding: 22px 28px; width: 32%; align-items: center; text-align: center; position: relative; } p.countnumber { font-size: 1.9rem; letter-spacing: 1px; font-weight: 600; color: var(--main-primary); } li.childCatJisseki__inner--list h3 { color: var(--main-text); font-weight: 500; font-size: 1.1rem; } p.numberText { color: var(--main-sub); font-size: 0.9rem; } ul.childCatJisseki__inner--lists.four li.childCatJisseki__inner--list { width: 23%; } .childCatCTA__inner--btn { display: flex; justify-content: center; gap: 30px; align-items: center; margin-top: 10px; } .childCatCTA__inner--btn a.btn { margin: 0; } .childCatCTA__inner--btn a.btn.secondaryBtn { color: var(--main-primary); border-color: var(--main-primary); background: none; } .childCatCTA__inner--btn a.btn.secondaryBtn:hover { background: var(--main-primary); color: #fff; } /* search form */ section#searchForm { position: relative; } section#searchForm:before { content: ""; width: 100%; height: 400px; background: #E8EDF6; background: linear-gradient(180deg, rgba(232, 237, 246, 1) 0%, rgba(232, 237, 246, 1) 10%, rgba(255, 255, 255, 1) 100%); position: absolute; top: 0; left: 0; } .searchForm__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 50px 0 10px; gap: 50px; position: relative; } .searchForm__inner--heading { display: flex; flex-direction: column; gap: 16px; } .searchForm__inner--heading h2 { font-size: 3rem; font-weight: 900; line-height: 1.23; color: var(--main-text); } .searchForm__inner--heading p { color: var(--main-sub); font-size: 1.2rem; font-weight: 400; line-height: 1.63; } form#postSearch { position: relative; width: 100%; max-width: 800px; border: solid 1px #eee; border-radius: 0.5rem; background: #fff; text-align: left; display: flex; flex-direction: column; gap: 15px; padding: 15px 17px; } #postSearch .searchIcon { position: absolute; left: 30px; top: 31px; pointer-events: none; transform: none; } form#postSearch input { padding: 12px 20px 15px 45px; width: 100%; border: solid 1px #ddd; border-radius: 0.5rem; } form#postSearch input::placeholder { color: var(--main-sub); opacity: 0.6; } .sf-toggle { border: 1px solid #ddd; background: #fff; padding: 5px 12px 7px; border-radius: 6px; width: fit-content; font-size: 0.8rem; position: relative; display: flex; align-items: center; gap: 3px; cursor: pointer; transition: 0.2s; } .sf-toggle svg { transform: translateY(2px); } .sf-toggle:hover { background: #ffffba; } ul#resultList { gap: 45px 3%; justify-content: flex-start; } ul#resultList li.postList { width: 31%; } .sf-panel { border: 1px solid #eee; border-radius: 5px; padding: 17px 19px 20px; width: 100%; max-width: 800px; margin: 0 auto; background: #fff; } .sf-row{margin-top:12px} .sf-panel .sf-row:first-child { margin-top: 0; } .sf-label { font-weight: 400; margin-bottom: 8px; display: flex; gap: 0.2rem; align-items: center; font-size: 0.9rem; } .sf-label svg { transform: translateY(1px); } .sf-chips{display:flex; flex-wrap:wrap; gap:8px} .sf-chip { border: 1px solid #ddd; background: #fff; padding: 4px 13px 6px; border-radius: 9999px; cursor: pointer; font-size: 0.7rem; font-weight: 500; transition: 0.2s; } .sf-chip:hover { background: #ffffba; } button.sf-chip.is-active { background: var(--main-primary); color: #fff; border-color: var(--main-primary); } .sf-dates{display:flex; align-items:center; gap:.5rem} .sf-dates input { border: solid 1px #ddd; font-size: 0.9rem; padding: 8px 12px 10px; border-radius: 0.3rem; } select#sf-order { border: 1px solid #ddd; background: #fff; padding: 8px 13px 10px; border-radius: 0.3rem; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: 0.2s; width: 100%; text-align: left; } .sf-actions button.btn { padding: 10px 35px 12px; font-size: 0.8rem; } .sf-actions { margin-top: 26px; display: flex; gap: 15px; } .result-loading, .result-empty{margin-top:12px; color:#6b7280} ul.searchCats { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: -10px; } li.searchCats { border: solid 1px #eee; border-radius: 0.5rem; background: #fff; padding: 5px 10px 7px; font-size: 0.9rem; transition: 0.3s; } li.searchCats.active { background: var(--main-primary); color: #fff; font-weight: 500; } /* reserve */ section#lineReserve { position: relative; padding: 60px 0 40px; } .lineReserve__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: row; padding: 25px 30px 27px; gap: 16px; background: #f9fbff; border-radius: 0.5rem; align-items: flex-start; border: solid 1px #eee; } .lineReserve__inner--icon { background: #b1cfff4a; width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; } .lineReserve__inner--icon svg { color: var(--main-hover); } .lineReserve__inner--right { display: flex; flex-direction: column; gap: 12px; } .lineReserve__inner--rightHead { display: flex; flex-direction: column; gap: 3px; } .lineReserve__inner--rightHead h2 { font-weight: 900; line-height: 1.23; color: var(--main-text); } .lineReserve__inner--rightHead p { color: var(--main-sub); font-size: 0.9rem; } .lineReserve__inner--rightBtn { display: flex; flex-direction: column; gap: 10px; } p.bellText { display: flex; justify-content: flex-start; align-items: center; gap: 10px; color: var(--main-sub); font-size: 0.8rem; } p.bellText svg { transform: translateY(1px); } a.lineBtn { background: var(--main-primary); color: #fff; font-weight: 500; width: fit-content; padding: 9px 17px 12px; font-size: 0.9rem; border-radius: 0.5rem; } a.lineBtn.nonactive { opacity: 0.4; pointer-events: none; } p.mustLogin { color: var(--main-sub); font-size: 0.8rem; } /* post lists */ section#artcileList { position: relative; } .artcileList__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 50px 0; } .postList__bottom { display: flex; flex-direction: column; gap: 5px; } .postList__bottom__top { display: flex; justify-content: flex-start; gap: 3px 15px; align-items: center; flex-wrap: wrap; } p.postuser { display: flex; justify-content: flex-start; align-items: center; gap: 4px; color: var(--main-sub); font-size: 0.8rem; font-weight: 500; } p.posttimes { display: flex; justify-content: flex-start; align-items: center; gap: 4px; color: var(--main-sub); font-size: 0.9rem; font-weight: 500; } .postWhiteTags { display: flex; justify-content: flex-start; gap: 6px; flex-wrap: wrap; align-items: center; } .postWhiteTag { font-size: 0.8rem; font-weight: 500; background: #fff; border: solid 1px #eee; padding: 0px 10px 2px; border-radius: 9999px; } /* sponsors */ section#sponsorsSec { position: relative; } section#sponsorsSec ul.sponsorsSec__lists { padding-top: 45px; } ul.sponsorsSec__lists { width: 100%; max-width: 1386px; display: flex; flex-direction: row; margin: 0px auto; gap: 40px 25px; padding: 30px 0px; justify-content: space-between; flex-wrap: wrap; } li.sponsorsSec__list { display: flex; flex-direction: column; width: 48.5%; background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05), 0 7px 17px 0 rgba(0, 0, 0, 0.08); transition: 0.2s ease-in-out; border-radius: 0.5rem; padding: 26px 32px; gap: 20px; } .sponsorsHeader { display: flex; justify-content: flex-start; gap: 15px; align-items: center; } .sponsorsHeader__img { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; background: var(--main-hover); color: #fff; border-radius: 9999px; } .sponsorsHeader__text h3 { color: var(--main-text); font-weight: 600; font-size: 1.05rem; } p.corp_name { color: var(--main-hover); font-size: 0.9rem; } p.occupation { background: #f9fbff; font-size: 0.8rem; font-weight: 600; width: fit-content; padding: 0 8px; border-radius: 9999px; } .sponsorsDesc { height: 120px; } .sponsors__btn { display: flex; justify-content: space-between; gap: 20px; align-items: center; } .sponsors__btn .btn { padding: 9px 35px 12px; width: 50%; display: flex; justify-content: center; } li.sponsorsSec__list .sponsors__btn { justify-content: center; } /* sponsors page */ main.sponsorBody { background: #fdfdfd; } .sponsorsBack { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } .sponsorsBack a { color: var(--main-primary); } .sponsorsBack a:hover { color: var(--main-hover); } .sposorPage__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; gap: 35px; padding: 30px 0; justify-content: space-between; } .sposorPage__inner--left { width: calc(70% - 35px); display: flex; flex-direction: column; gap: 30px; } .sposorWrapper { display: flex; flex-direction: column; gap: 13px; border: solid 1px #eee; border-radius: 0.5rem; padding: 22px 31px 25px; gap: 16px; background: #fff; } .sposorWrapper .sponsorsHeader { align-items: flex-start; } .sposorWrapper .sponsorsHeader__text h2 { color: var(--main-text); font-size: 1.6rem; font-weight: 600; } .sposorWrapper .sponsorsHeader__text { display: flex; flex-direction: column; gap: 5px; } .sposorWrapper__profile { display: flex; flex-direction: column; gap: 18px; } .sposorWrapper__profile h3 { color: var(--main-text); font-size: 1.1rem; font-weight: 600; } .sposorWrapper__profile--text { display: flex; flex-direction: column; gap: 15px; } h3.sponsorInnerHead { color: var(--main-text); font-size: 1.1rem; font-weight: 600; } ul.sponsorService { display: flex; list-style: none; justify-content: space-between; flex-wrap: wrap; gap: 15px; } ul.sponsorService li { width: calc(50% - 15px); padding-left: 25px; position: relative; } ul.sponsorService li:before { content: "\f005"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: absolute; left: 0; top: 4px; color: var(--main-hover); } ul.sponsorService.jisseki li { width: 100%; } ul.sponsorService.jisseki li:before { content: "\f111"; font-weight: 900; font-size: 0.6rem; top: 8px; } .sposorPage__inner--right { width: 30%; display: flex; flex-direction: column; gap: 30px; } ul.sponsorService.contact { margin-bottom: 8px; } ul.sponsorService.contact li { width: 100%; font-size: 0.8rem; } .sponsorsContactBtn { display: flex; flex-direction: column; gap: 12px; } .sponsorsContactBtn a.btn { padding: 8px 35px 11px; width: 100%; display: flex; justify-content: center; font-size: 0.8rem; } .sponsorsContactBtn a.btn.secondaryBtn { border: solid 1px #eee; } ul.sponsorService li.contact-location:before { content: "\f3c5"; font-weight: 900; } ul.sponsorService li.contact-tel:before { content: "\f095"; font-weight: 900; } ul.sponsorService li.contact-mail:before { content: "\f0e0"; font-weight: 100; } dl.sponsorJisseki { display: flex; list-style: none; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .jissekiRow { display: flex; justify-content: space-between; width: 100%; align-items: center; } .jissekiRow dt { position: relative; padding-left: 24px; color: var(--main-sub); font-size: 0.9rem; } .jissekiRow dt:before { content: "\f133"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: absolute; left: 0; top: 4px; color: var(--main-hover); } .jissekiRow.track_record dt:before { content: "\f0c0"; font-weight: 900; } .jissekiRow dd { font-weight: 500; } .sposorWrapper.blueBgs { background: #f6f9ff; } .sposorWrapper.blueBgs p { color: var(--main-sub); font-size: 0.8rem; } .sponsorWanted__inner { width: 100%; max-width: 1386px; margin: 25px auto 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; padding: 30px 55px 30px; gap: 16px; background: #FDFBF2; border: solid 1px #ffe79d; border-radius: 0.5rem; } .sponsorWanted__inner h2 { font-size: 1.2rem; font-weight: 600; } .sponsorWanted__inner a.btn { padding: 9px 35px 12px; margin: 8px; } /* resouces */ .wpDL__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 30px 0; } ul.wpDL__lists { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px 0; } li.wpDL__list { width: 49%; display: flex; flex-direction: column; gap: 13px; border: solid 1px #eee; border-radius: 0.5rem; padding: 22px 28px; } .wpDL__list--heading { display: flex; justify-content: space-between; align-items: flex-start; } .wpDL__list--headingIcon { display: flex; justify-content: flex-start; gap: 12px; align-items: center; } .wpDL__list--headingIcon svg { background: #f1f1f1; width: 40px; height: 40px; padding: 9px; border-radius: 8px; } .wpDL__list--info { display: flex; flex-direction: column; align-items: flex-start; } .wpDL__list--info span { color: var(--main-sub); font-size: 0.75rem; font-weight: 400; line-height: 1.63; } .wpDL__list--info span svg { margin-right: 5px; vertical-align: -2px; } .wpDL__list--middle { display: flex; flex-direction: column; gap: 8px; } .wpDL__list--middle h3 { color: var(--main-text); font-weight: 600; font-size: 1.1rem; } .wpDL__list--middle p { color: var(--main-sub); font-size: 0.85rem; } li.wpDL__list a.btn { padding: 9px 35px 12px; width: 100%; display: flex; justify-content: center; } /* post page */ .postHeader__inner { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: row; padding: 30px 0; justify-content: space-between; align-items: center; } .postHeader__inner--left a { color: var(--main-primary); } .postHeader__inner--left a:hover { color: var(--main-hover); } /* post article */ article#postContent { position: relative; margin-bottom: 60px; } .postContent__inner--body :where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { font-family: var(--reading-font, 'Noto Sans JP', sans-serif); } .postContent__inner { display: flex; flex-direction: column; width: 100%; max-width: 620px; margin: 0 auto; gap: 25px; } .postContent__inner--header { display: flex; flex-direction: column; gap: 15px; border-bottom: solid 1px #ddd; padding-bottom: 30px; margin-bottom: 25px; } ul.postCattags li a { background: var(--main-primary); color: #fff; font-size: 0.7rem; font-weight: 500; padding: 2px 12px 3px; border-radius: 9999px; } .postHeader__inner--right { display: flex; justify-content: flex-end; gap: 20px; align-items: center; } button#readSetting { position: relative; border: solid 1px #ddd; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 5px; padding: 0 12px 2px; font-weight: 500; gap: 5px; font-size: 0.8rem; cursor: pointer; } button#readSetting svg { transform: translateY(1px); } button#readSetting:hover, button#lightDarkMode:hover { background: #ffffba; color: var(--main-text); transform: none; } button#lightDarkMode { border: solid 1px #ddd; height: 36px; display: flex; justify-content: center; align-items: center; border-radius: 5px; padding: 0 10px 2px; font-weight: 500; gap: 5px; font-size: 0.8rem; cursor: pointer; } .postContent__inner--header h2 { font-size: 1.7rem; font-weight: 600; } .postContent__inner--header a:hover { opacity: 0.7; } p.postHeadDesc { color: var(--main-sub); } ul.postInfo { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 15px; } ul.postInfo li { color: var(--main-sub); font-size: 0.8rem; align-items: center; display: flex; gap: 8px; position: relative; } ul.postInfo li svg { transform: translateY(1px); } ul.postTagLists { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 12px; align-items: center; } ul.postTagLists li { position: relative; display: flex; justify-content: center; border: solid 1px #eee; font-size: 0.7rem; padding: 1px 12px 3px; font-weight: 500; gap: 5px; border-radius: 9999px; } ul.postTagLists li svg { transform: translateY(2px); } .postContent__inner--body { display: flex; flex-direction: column; gap: 25px; padding-bottom: 30px; border-bottom: solid 1px #ddd; margin-bottom: 30px; } .postContent__inner--body p { line-height: unset; font-size: unset; color: unset; } .postContent__inner--bottomAuthor { display: flex; flex-direction: column; padding: 0 15px; gap: 10px; } .postContent__inner--bottomAuthor h3 { font-weight: 500; font-size: 0.95rem; } .postContent__inner--bottomAuthorInner { display: flex; gap: 20px; } .authorIcon { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; background: #eee; border-radius: 9999px; } .authorInfomation { width: calc(100% - 20px - 42px); display: flex; flex-direction: column; gap: 5px; } .authorInfomation a:hover { opacity: 0.7; } .authorInfomation h4 { font-weight: 500; font-size: 0.9rem; } .authorDesc p { color: var(--main-sub); font-size: 0.8rem; font-weight: 500; } ul.postLike.bottom { display: flex; justify-content: center; align-items: center; gap: 20px; } /* dark mode */ html.is-dark button#readSetting svg, html.is-dark ul.postTagLists li a svg { filter: invert(1); } html.is-dark button#readSetting:hover svg { filter: none; } html.is-dark button#lightDarkMode:hover svg { filter: invert(1); } /* recommend */ .reccommend__inner { width: 100%; max-width: 1386px; margin: 0 auto; padding: 30px 0 30px; gap: 30px; display: flex; flex-direction: column; } main.postPMain section#lineReserve { padding: 10px 0; } /* support person */ section#supportPerson { padding: 30px 0; } .supportPerson__inner { width: 100%; max-width: 1386px; margin: 0 auto 0; display: flex; flex-direction: column; padding: 25px 30px 27px; gap: 16px; background: #FDFBF2; border: solid 1px #ffe79d; border-radius: 0.5rem; } .supportPerson__inner h2 { font-weight: 900; line-height: 1.23; color: var(--main-text); font-size: 1.1rem; } .supportPerson__inner--info { display: flex; flex-direction: column; gap: 9px; } .supportPerson__inner--info h3 { color: var(--main-primary); font-weight: 600; } .supportPerson__inner--info a.postReadMore { justify-content: flex-start; width: fit-content; font-size: 0.9rem; } /* page nation */ .pageNation { padding: 40px 0 0; display: block; position: relative; } .nav-links { display: flex; justify-content: center; align-items: center; gap: 15px; } .nav-links span, .nav-links a { font-family: 'Roboto', sans-serif; width: 40px; height: 40px; background: #f9f9f9; display: flex; justify-content: center; align-items: center; border-radius: 9999px; color: #cdcdcd; transition: 0.2s ease-in-out; font-style:italic; } span.page-numbers.current { background: var(--main-hover); color: #fff; } .nav-links a:hover { background: var(--main-hover); color: #fff; opacity: 0.6; } /* editor */ .editorsHead { width: 100%; max-width: 1386px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 30px 0 10px; text-align: center; } .editorsHead h2 { color: var(--main-text); font-size: 2.4rem; font-weight: 600; } .editorsHead p { color: var(--main-sub); } .sposorWrapper.editors h3 { font-size: 1.4rem; font-weight: 600; } .sposorWrapper.editors ul.wp-block-list { display: flex; flex-direction: column; gap: 12px; list-style: disc; padding-left: 25px; } .sposorWrapper a { color: var(--main-primary); } .whitecardBG li.postList a { background: #fff; } /* contact */ .editorsHead.contact { padding: 80px 0 60px; } .sposorPage__inner--left.contactBlockLeft { width: calc(55% - 35px); } .sposorPage__inner--right.contactBlockRight { width: 45%; } .sposorPage__inner--left.contactBlockLeft .sposorWrapper.editors, .sposorPage__inner--right.contactBlockRight .sposorWrapper.editors { background: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.05), 0 7px 17px 0 rgba(0, 0, 0, 0.08); } /* contact page form */ .sposorPage__inner--left.contactBlockLeft form.wpcf7-form p { margin-top: 12px; } .sposorPage__inner--left.contactBlockLeft form.wpcf7-form input, .sposorPage__inner--left.contactBlockLeft form.wpcf7-form select, .sposorPage__inner--left.contactBlockLeft form.wpcf7-form textarea { background: #f9f9f9; width: 100%; border: solid 1px #ddd; border-radius: 0.3rem; padding: 6px 12px; margin-top: 4px; } .sposorPage__inner--left.contactBlockLeft form.wpcf7-form input.btn.primaryBtn { background: var(--main-primary); display: flex; justify-content: center; align-items: center; text-align: center; padding-bottom: 12px; padding-top: 10px; margin-top: 25px; } .sposorPage__inner--left.contactBlockLeft form.wpcf7-form span.wpcf7-not-valid-tip { font-size: 0.6rem; } /* contact right */ .contactInfo { display: flex; gap: 10px; align-items: flex-start; } .contactInfo__img { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #e1edff; border-radius: 0.3rem; } .contactInfo__text h4 { font-size: 1rem; font-weight: 600; } .contactInfo__text p { color: var(--main-sub); font-size: 0.8rem; } /* contact */ .sposorWrapper.yellowcontact { background: #FDFBF2; gap: 8px; } .sposorWrapper.yellowcontact h3 { color: var(--main-text); font-size: 1.1rem; font-weight: 600; } p.contactGrey { color: var(--main-sub); font-size: 0.8rem; } .sposorWrapper.yellowcontact .btn { padding: 7px 16px 10px; font-size: 0.8rem; } .sposorWrapper.greenwcontact { background: #eaf4ea; } .sposorWrapper.greenwcontact h3 { color: #15a24a; font-size: 1.1rem; font-weight: 600; } .sposorWrapper.greenwcontact ul { display: flex; flex-direction: column; gap: 7px; list-style: disc; padding-left: 22px; } .sposorWrapper.greenwcontact ul li { color: #15a24a; font-weight: 400; font-size: 0.8rem; } /* download modal */ .wpdl-modal.is-open { display: flex; justify-content: center; align-items: center; } .wpdl-modal{position:fixed; inset:0; display:none; z-index:9999} .wpdl-modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.45)} .wpdl-modal__dialog { position: relative; margin: auto; max-width: 680px; background: #fff; border-radius: 5px; padding: 20px; width: 90%; } .wpdl-modal__close { position: absolute; top: -16px; right: -15px; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; width: 32px; height: 32px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; } button.wpdl-modal__close:hover { opacity: 0.8; } h3#wpdl-modal-title { font-weight: 400; color: var(--main-sub); font-size: 0.8rem; } .wpdl-modal__sub { margin-bottom: 12px; color: var(--main-text); font-weight: 600; font-size: 1.1rem; } .wpdl-modal__form form.wpcf7-form label { color: var(--main-sub); font-size: 0.8rem; } .wpdl-modal__form form.wpcf7-form input { background: #f9f9f9; width: 100%; border: solid 1px #ddd; border-radius: 0.3rem; padding: 6px 12px; margin-top: 4px; } .wpdl-modal__form form.wpcf7-form input.btn.primaryBtn { background: var(--main-hover); font-size: 0.8rem; margin-top: 16px; text-align: center; padding-bottom: 8px; } .wpdl-modal__form form.wpcf7-form input.btn.primaryBtn:hover { transform: none; background: var(--main-primary); } .wpdl-modal__form form.wpcf7-form p { margin-top: 10px; } .wpdl-modal__form form span.wpcf7-not-valid-tip { font-size: 0.6rem; } .wpcf7 form .wpcf7-response-output { font-size: 0.8rem; text-align: center; margin: 12px 0; border: none; background: #f9f9f9; color: #999; } /* header 追加 */ .spMenuBtn{ display:none; } /* privacy policy */ .singlePageLayout .sposorPage__inner.contactPage .sposorPage__inner--left { width: 100%; max-width: 800px; margin: 0 auto; } .singlePageLayout .sposorPage__inner.contactPage .sposorPage__inner--left h3 { margin-top: 20px; } .singlePageLayout .sposorPage__inner.contactPage .sposorPage__inner--left h3:first-child { margin-top: 0; } @media screen and (max-width: 1386px) { /* （ここに1386px以下のスタイルを記述） */ /* header */ .header__inner { padding-left: 2%; padding-right: 2%; } /* top */ .topNewPost__inner { padding-left: 4%; padding-right: 4%; } .topCatlist__inner { padding-left: 4%; padding-right: 4%; } ul.topCatlistItems { gap: 1.2%; } .spotlight__inner { padding-left: 4%; padding-right: 4%; } section#topmail { padding-left: 4%; padding-right: 4%; } /* sponsor */ .sposorPage__inner { padding-left: 4%; padding-right: 4%; } .topPosts__inner { padding-left: 4%; padding-right: 4%; } /* cat page */ .parentcat__inner { padding-left: 4%; padding-right: 4%; } .parencatTop__inner { padding-left: 4%; padding-right: 4%; } .catChildFour__inner { padding-left: 4%; padding-right: 4%; } section#childCatJisseki { padding-left: 4%; padding-right: 4%; } section#childCatCTA { padding-left: 4%; padding-right: 4%; } /* article search */ .artcileList__inner { padding-left: 4%; padding-right: 4%; } section#lineReserve { padding-left: 4%; padding-right: 4%; } /* sponsor */ .sponsorsBack { padding-left: 4%; padding-right: 4%; } ul.sponsorsSec__lists { padding-left: 4%; padding-right: 4%; } section#sponsorWanted { padding-left: 4%; padding-right: 4%; } /* download */ .wpDL__inner { padding-left: 4%; padding-right: 4%; } /* post */ .postHeader__inner { padding-left: 4%; padding-right: 4%; } .reccommend__inner { padding-left: 4%; padding-right: 4%; } main.postPMain section#lineReserve { padding-left: 4%; padding-right: 4%; } } @media screen and (max-width: 1200px) { /* （ここに1200px以下のスタイルを記述） */ ul.header__inner--list { gap: 4px; } ul.header__inner--list li a { padding-left: 5px; padding-right: 5px; } } @media screen and (max-width: 1000px) { /* （ここに1000px以下のスタイルを記述） */ /* ハンバーガー（任意で設置する場合） */ .spMenuBtn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; } #header .header__inner--right{ position:fixed; inset:0; background:#fff; transform:translateX(100%); transition:transform .35s ease; z-index:2000; padding:20px; overflow-y:auto; height: fit-content; } /* .nav-open を body に付けたら開く（JSでトグル想定） */ body.nav-open #header .header__inner--right{ transform:translateX(0); } /* 背景の暗幕 */ body.nav-open::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999; } /* リスト縦並び */ #header .header__inner--list{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:60px 0 0; padding:0; list-style:none; } #header .header__inner--list li{ width:100%; } #header .header__inner--list a{ display:block; width:100%; padding:14px 16px; border-radius: 0.3rem; font-size:18px; color:#111827; text-decoration:none; } #header .header__inner--list a:hover{ background:#f1f5f9; } /* 現在ページ強調（JSで .is-active を付与する想定） */ #header .header__inner--list a.is-active, #header .header__inner--list a.active{ background:var(--main-primary,#0B57D0); color:#fff; } .spMenuBtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: none; border-radius: 5px; background: #fff; font-size: 1.6rem; transition: 0.2s; cursor: pointer; } button#spMenuBtn:hover { background: #f0f0f0; } #header .header__inner{ display:flex; align-items:center; justify-content:space-between; } /* オーバーレイ内の閉じるボタン */ #header .header__inner--right .spMenuClose{ position:absolute; top:16px; right:16px; width:40px; height:40px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; font-size:20px; line-height:1; transition: 0.3s; display: flex; justify-content: center; align-items: center; cursor: pointer; } /* 調整 */ #header .header__inner--list li.active a { background: var(--main-primary); color: #fff; } #header .header__inner--right .spMenuClose:hover { background: #f9f9f9; } #header .header__inner--list a.btn { background: var(--main-hover); color: #fff; } #header .header__inner--list a.btn:hover { opacity: 0.7; } /* top */ ul.topCatlistItems { justify-content: center; gap: 30px; } li.topCatlistItem { width: 45%; } /* cat */ ul.postLists.whitecardBG { justify-content: center; gap: 30px; } li.postList { width: 45%; } li.postList a { padding: 12px 18px; } .postList__header { flex-direction: column-reverse; gap: 12px; } .postList__header h3 { flex-grow: 1; } ul.catChilds { justify-content: center; gap: 30px; } li.catChild { width: 45%; } li.catChildFour__inner--list { padding: 12px 16px; } .childCatJisseki__inner { padding-left: 4%; padding-right: 4%; } /* search */ ul#resultList { justify-content: center; } ul#resultList li.postList { width: 45%; } /* line */ .lineReserve__inner { padding: 15px 18px; } li.sponsorsSec__list { padding: 15px 18px; } /* sponsor */ .sposorWrapper { padding: 12px 20px 20px; } /* reccommend */ ul.postLists { justify-content: center; gap: 30px; } } @media screen and (max-width: 767px) { /* （ここにモバイル用スタイルを記述） */ /* mv */ p.mvCopy { font-size: 2rem; } .mv__inner--top h2 { font-size: 3.2rem; padding-bottom: 2px; } p.mvDesc { font-size: 1rem; } .childCatMV__inner--headingBtn.mv { flex-direction: column; gap: 18px; } .newHeading { flex-direction: column; gap: 12px; } h2.newHeading__left { font-size: 1.4rem; } .newHeading__right { gap: 12px; } button#mediapost-autoplay-toggle { width: 32px; height: 32px; } .newHeading__right .swiper-button-prev, .newHeading__right .swiper-button-next { width: 32px; height: 32px; } li.topCatlistItem { width: 100%; } li.topCatlistItem p.postReadMore { opacity: 1; width: fit-content; } button#sponcorpost-autoplay-toggle { width: 32px; height: 32px; } .sponcor-autoplayBlock.newHeading__right a { position: relative; border: solid 1px #ddd; height: 32px; } .spotlight__inner { padding-left: 0; padding-right: 0; } .spotlight__inner .newHeading { padding-left: 4%; padding-right: 4%; } section#topmail { padding-left: 4%; padding-right: 4%; padding-bottom: 40px; } .topmail__inner { padding: 30px 16px; } .topmail__inner--top h2 { font-size: 1.5rem; } ul.topmail__inner--bottom { gap: 20px; } ul.topmail__inner--bottom li { font-size: 1.4rem; } .topmail__inner input.wpcf7-form-control.wpcf7-email.wpcf7-validates-as-required.wpcf7-text.wpcf7-validates-as-email { width: 90%; display: flex; flex-direction: column; } .topFaq__inner { padding-left: 4%; padding-right: 4%; gap: 1.5rem; } .accordion { padding-right: 45px; height: auto; line-height: 1.8; padding-top: 10px; padding-bottom: 12px; } /*sponsor */ .editorsHead { padding-left: 4%; padding-right: 4%; } .sposorPage__inner { flex-direction: column; } .sposorPage__inner--left, .sposorPage__inner--right { width: 100%; } li.postList { width: 100%; } .editorsHead.contact { padding-left: 4%; padding-right: 4%; } /* catc */ ul.catChilds { gap: 20px; } li.catChild { width: 100%; } ul.postLists.twocolumn li.postList { width: 100%; } .childCatMV__inner--headingBtn { flex-direction: column; gap: 15px; } .childCatMV__inner { padding-left: 4%; padding-right: 4%; } .childCatMV__inner--heading h2 { font-size: 2.2rem; } .childCatMV__inner--heading p { font-size: 1rem; } ul.catChildFour__inner--lists { flex-wrap: wrap; gap: 20px; } li.catChildFour__inner--list { width: 100%; } ul.childCatJisseki__inner--lists { flex-wrap: wrap; gap: 20px; } li.childCatJisseki__inner--list { width: 100%; } .childCatCTA__inner { padding-left: 4%; padding-right: 4%; } .childCatCTA__inner h2 { font-size: 1.4rem; } ul.childCatJisseki__inner--lists.four li.childCatJisseki__inner--list { width: 100%; } .childCatCTA__inner--btn { flex-direction: column; gap: 15px; } .heading.catHead h2 { font-size: 1.4rem; } /* search */ .searchForm__inner { padding-left: 4%; padding-right: 4%; } .searchForm__inner--heading h2 { font-size: 1.8rem; } .searchForm__inner--heading p { font-size: 1rem; } .sf-actions { flex-direction: column; align-items: center; } ul#resultList li.postList { width: 100%; } .lineReserve__inner--right { width: calc(100% - 38px - 16px); } /* post */ .postContent__inner { padding-left: 4%; padding-right: 4%; } /* sponsor */ li.sponsorsSec__list { width: 100%; } .sponsors__btn a.btn.primaryBtn { width: 100%; } .sponsorWanted__inner { padding-left: 20px; padding-right: 20px; } .sponsorWanted__inner a.btn.primaryBtn { text-align: center; display: flex; justify-content: center; } ul.sponsorService { flex-direction: column; gap: 12px; } ul.sponsorService li { width: 100%; } .sponsorsHeader__img { width: 50px; height: 50px; } .sposorPage__inner { padding-top: 0; } /* wp dl */ li.wpDL__list { width: 100%; } /* contact */ .sposorPage__inner--left.contactBlockLeft { width: 100%; } .sposorPage__inner--right.contactBlockRight { width: 100%; } /* top form */ .formWrapper { flex-direction: column; align-items: center; } .formWrapper span.wpcf7-form-control-wrap input { margin: 0 auto; } /* footer */ .footer__inner { flex-direction: column-reverse; } .footer__inner--links { flex-direction: column; align-items: center; } }