@charset "UTF-8"; /*! * File Info: setting * Copyright: キッズツリーハウス内部ページテンプレート */ /* * File Info: theme-style.scss */ /* ================================================ * @theme-style * 固定ページ、index.php、投稿ページなどテーマ全体のスタイル * ============================================= */ /* ---------- CSS Variables ---------- */ :root { /* ================================================ * カラー * ============================================= */ --color-brown: #83634d; --color-dark: #333333; --color-blue: #3a84c8; --color-red: #e37b6d; --color-orange: #f79054; --color-green: #96bb37; --color-cream: #fbf7e7; --color-beige: #f0e9d3; --color-white: #ffffff; --color-blue-bg: #e4f0fc; /* ================================================ * フォント * ============================================= */ --font-main: "M PLUS Rounded 1c", sans-serif; --font-dot: "Palette Mosaic", sans-serif; --font-daruma: "Darumadrop One", sans-serif; --font-nomal: 500; --font-bold: 700; /* ================================================ * viewport * ============================================= */ --content-width: 1120px; --side-padding-pc: 160px; /* 1440 - 1120 = 160px each side */ --side-padding-tab: 40px; --side-padding-sp: 20px; --header-h: 110px; } @media screen and (max-width: 1120px) { :root { --side-padding-pc: 40px; } } @media screen and (max-width: 767px) { :root { --side-padding-pc: 16px; --header-h: 72px; } } /* ---------- Reset / Base ---------- */ *: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; margin: 0; padding: 0; } /* 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-inline-size: 100%; max-block-size: 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ pre { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: ""; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*! */ /* ================================================ * 全体 * ============================================= */ html { scroll-behavior: smooth; } body { font-family: var(--font-main); font-size: 1rem; font-weight: var(--font-nomal); line-height: 1.6; letter-spacing: 0.06em; color: var(--color-dark); overflow-x: hidden; -webkit-animation: fadeIn 2s ease 0s 1 normal; animation: fadeIn 2s ease 0s 1 normal; word-break: break-word; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } a { color: var(--color-dark); cursor: pointer; text-decoration: none; } img { max-width: 100%; height: auto; vertical-align: middle; } address { font-style: normal; } .has-vivid-cyan-blue-color { color: var(--wp--preset--color--vivid-cyan-blue) !important; text-decoration: underline; } s { text-decoration: line-through; } strong { font-weight: bold; } @media screen and (max-width: 600px) { body { font-size: 0.875rem !important; } } /*------------------------ * utility ------------------------*/ .wrapper { padding-left: 20px; padding-right: 20px; margin: 0 auto; } .text-center { text-align: center; } .bold { font-weight: bold; } .disp_pc { display: block; } .disp_sp { display: none; } .fuwatAnime { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-name: fuwatAnime; animation-name: fuwatAnime; visibility: visible !important; } @-webkit-keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fuwatAnime { 0% { opacity: 0; -webkit-transform: translateY(40px); transform: translateY(40px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @media screen and (max-width: 768px) { .disp_pc { display: none; } .disp_sp { display: block; } } /* ================================================ SEPARATOR ================================================ */ /* ---------- Wave Separator ---------- */ .wave-separator { line-height: 0; font-size: 0; margin-bottom: -1px; margin-top: -1px; } .wave-separator__img { width: 100%; display: block; } /* ================================================ * @header * ヘッダー * ============================================= */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); padding: 12px 0 12px 12px; display: flex; justify-content: space-between; z-index: 100; } header h1 { background: none !important; z-index: 1; } .header__logo { z-index: 1; } .header__logo img { height: 88px; width: auto; display: block; } .headernav_wrapper { display: flex; align-items: flex-end; padding: 0 32px; } /* Footer contact column */ .header__contact-body { display: flex; justify-content: flex-end; gap: 12px; width: 100%; padding-top: 8px; } .header__tel-row { display: flex; align-items: center; justify-content: center; gap: 4px; } .header__tel-num { font-size: 20px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.03em; color: var(--color-red); white-space: nowrap; } .header__mail-btn { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--color-red); border-radius: 29px; padding: 4px 12px; color: var(--color-white); font-size: 0.875rem; line-height: 1.2; white-space: nowrap; } .header .menu { display: flex; flex-direction: row; gap: 0; } .header .menu li { padding-left: 0; } .header .menu li::before { display: none; } .header .menu > .menu-item > a { display: block; font-size: 0.875rem; color: var(--color-brown); line-height: 1.2; white-space: nowrap; padding: 12px 20px 12px; margin: 3px 0; } .header .menu > .menu-item.menu-item-has-children > a { position: relative; width: fit-content; } .header .menu > .menu-item.menu-item-has-children > a::after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%) rotate(90deg); width: 20px; height: 20px; background: url(../images/svg/chevron-right-blue.svg) no-repeat center center/contain; } .header .menu > .menu-item.menu-item-has-children.active > a::after { transform: translateY(-50%) rotate(-90deg); } .header .sub-menu { display: none; position: absolute; width: 223px; border-radius: 12px; background-color: var(--color-cream); padding: 12px 8px; } .header .sub-menu.open { display: block; } .header .sub-menu > .menu-item > a { position: relative; display: block; font-size: 0.875rem; color: var(--color-brown); line-height: 1.2; white-space: nowrap; padding: 10px 0 10px 24px; margin: 2px 0; } .header .sub-menu > .menu-item > a::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/svg/chevron-right-blue.svg) no-repeat center center/contain; } .header__hamburger { display: none; } @media screen and (max-width: 980px) { .header { position: fixed; padding: 13px 0 13px 4px; background-color: transparent; } .headernav_wrapper { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: var(--color-white); padding: var(--header-h) 0 0; overflow: scroll; &.open { display: block; } } .headernav_inner { display: flex; flex-direction: column; width: 100%; align-items: center; padding: 24px 48px; z-index: -1; opacity: 0; transition: all 0.2s; } .headernav_inner.open { display: flex; opacity: 1; z-index: 10; } .headernav_inner::after { position: absolute; content: ""; bottom: 80px; right: 0; width: 86.4vw; height: 27.7vw; background: url(../images/png/bg-object-r.png) no-repeat right bottom/contain; z-index: -1; } .header__nav { order: 1; width: 100%; margin-bottom: 24px; } .header__contact-body { flex-direction: column; order: 2; align-items: center; border-radius: 12px; background-color: var(--color-cream); padding: 24px; } .header__mail-btn { max-width: 153px; padding: 8px 24px; } .header .menu { flex-direction: column; } .header .menu > .menu-item > a { position: relative; border-bottom: solid 1px var(--color-blue-bg); padding: 20px 0; margin: 0; } .header .menu > .menu-item > a::after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/svg/chevron-right-blue.svg) no-repeat center center/contain; } .header .menu > .menu-item:first-of-type { display: block; } .header .menu > .menu-item.menu-item-has-children > a::after { transform: translateY(-50%); background: url(../images/svg/accordion-btn-plus.svg) no-repeat center center/contain; } .header .menu > .menu-item.menu-item-has-children > a { width: 100%; } .header .menu > .menu-item.menu-item-has-children > a.active::after { transform: translateY(-50%); background: url(../images/svg/accordion-btn-minus.svg) no-repeat center center/contain; } .header .sub-menu { position: unset; width: 100%; background-color: transparent; } .header .sub-menu > .menu-item > a { position: relative; padding: 16px 0 16px 28px; } .header .sub-menu > .menu-item > a::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/svg/chevron-right-blue.svg) no-repeat center center/contain; } .header__hamburger { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: var(--header-h); height: var(--header-h); border: none; border-radius: 0 0 0 20px; background: #fff; padding: 8px 0; margin-top: -13px; z-index: 2; } .header__hamburger-inner { display: block; position: relative; width: 40px; height: 40px; } .header__hamburger span { position: absolute; content: ""; display: block; width: 40px; height: 6px; transition: all 0.4s; } .header__hamburger span:first-of-type { top: 4px; left: 0; background-color: var(--color-red); } .header__hamburger span:nth-of-type(2) { top: 50%; left: 0; transform: translateY(-50%) rotate(-3deg); transform-origin: center; background-color: var(--color-green); } .header__hamburger span:last-of-type { bottom: 4px; left: 0; background-color: var(--color-blue); } .header__hamburger img { width: 44px; height: 17px; } .header__hamburger.active span:first-of-type { top: 50%; transform: translateY(-50%) rotate(45deg); transform-origin: center; } .header__hamburger.active span:nth-of-type(2) { opacity: 0; } .header__hamburger.active span:last-of-type { top: 50%; transform: translateY(-50%) rotate(-45deg); transform-origin: center; } } /* ============================================================ KV / HERO ============================================================ */ .kv { position: relative; width: 100%; height: 400px; overflow: hidden; margin-top: var(--header-h); } .kv__image-wrap { position: relative; width: 100%; height: 100%; } .kv__image-wrap::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); } .kv__image-wrap img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-block-size: fit-content; width: 100%; height: 100%; object-fit: cover; min-height: 400px; } .kv__deco { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 234px; height: 87px; pointer-events: none; } .kv__deco img { width: 100%; height: 100%; object-fit: contain; } /* ============================================================ BREADCRUMB ============================================================ */ .breadcrumb { width: 100%; background: var(--color-cream); margin-bottom: -16px; } .fbc-page .fbc-wrap .fbc-items { font-family: var(--font-main); font-weight: var(--font-nomal); } .fbc-page .fbc-wrap .fbc-items li { padding: 0; text-indent: 0; &::before { display: none; } } .fbc-page .fbc-wrap .fbc-items li a { padding: 16px 4px 16px 16px; } .fbc-page .fbc-wrap .fbc-items li:first-child { padding: 0; } .fbc-page .fbc-wrap .fbc-items li:last-child { padding: 16px 4px; } .fa-home { position: relative; } .fa-home:before { position: absolute; bottom: -3px; right: 0; content: ""; width: 17px; height: 16px; background-image: url(../images/svg/Exclude.svg); background-size: 100%; } @media screen and (max-width: 767px) { .breadcrumb { display: none; } } /* ============================================================ H1 TITLE BLOCK ============================================================ */ .page__top { background: var(--color-cream); padding: 0 var(--side-padding-pc); display: flex; flex-direction: column; align-items: center; justify-content: center; } .page__top.no-eyecatch { position: relative; padding-top: 172px; margin-top: var(--header-h); } .page__top.no-eyecatch .kv__deco { top: 60px; } .wp-singular h1, .page h1 { width: 100%; font-family: var(--font-main); font-size: 40px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.08em; color: var(--color-brown); text-align: center; background: url(../images/svg/h1_bg.svg) no-repeat center 8px / contain; } @media screen and (max-width: 767px) { .page h1 { background: url(../images/svg/h1_bg.svg) no-repeat center 8px/100% 100%; padding-top: 20px; } } @media screen and (max-width: 600px) { .wp-singular h1, .page h1 { font-size: 28px; } } @media screen and (max-width: 375px) { .page__top { padding: 0; } .page h1 { font-size: 28px; background: url(../images/svg/h1_bg.svg) no-repeat center 8px/80% 100%; } } /* ============================================================ MAIN CONTENT ============================================================ */ .l-content { background: var(--color-white); padding: 80px var(--side-padding-pc); } .l-content__inner { max-width: var(--content-width); margin: 0 auto; display: flex; flex-direction: column; } .content-block { display: flex; flex-direction: column; gap: 32px; } .page-template-page-full p + p, .page-template-page-full .wp-block-file + p, .page-template-page-full ul + p, .l-content__inner p + p, .l-content__inner .wp-block-file + p, .l-content__inner ul + p { margin-top: 1em; } .page-template-page-full figure + p, .l-content__inner figure + p { margin-top: 40px; } .page-template-page-full h2, .l-content__inner h2 { position: relative; font-size: 32px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.08em; color: var(--color-blue); text-align: center; padding-top: 5px; margin-bottom: 40px; z-index: 0; } .page-template-page-full h2::after, .l-content__inner h2::after { position: absolute; content: ""; top: 50%; left: 50%; width: 297px; height: 47px; background: var(--color-cream); transform: rotate(-3deg) translate(-50%, -60%); pointer-events: none; border-radius: 2px; z-index: -1; } .page-template-page-full h2.bg_white::after, .l-content__inner h2.bg_white::after { background: var(--color-white); } .page-template-page-full p + h2, .page-template-page-full ul + h2, .page-template-page-full ol + h2, .page-template-page-full figure + h2, .page-template-page-full .wp-block-file + h2, .page-template-page-full .wp-block-media-text.is-stacked-on-mobile + h2, .l-content__inner p + h2, .l-content__inner ul + h2, .l-content__inner ol + h2, .l-content__inner figure + h2, .l-content__inner .wp-block-file + h2, .l-content__inner .wp-block-media-text.is-stacked-on-mobile + h2 { margin-top: 120px; } .page-template-page-full h3, .l-content__inner h3 { position: relative; font-size: 24px; padding-left: 20px; padding-top: 80px; margin-bottom: 24px; } .page-template-page-full h3::after, .l-content__inner h3::after { position: absolute; content: ""; top: 87px; left: 0; flex-shrink: 0; width: 8px; height: 24px; background: var(--color-blue); border-radius: 20px; } .page-template-page-full h2 + h3, .l-content__inner h2 + h3 { padding-top: 0; } .page-template-page-full h2 + h3::after, .l-content__inner h2 + h3::after { top: 7px; } .page-template-page-full h4, .l-content__inner h4 { font-size: 20px; padding-top: 40px; margin-bottom: 16px; } .page-template-page-full h3 + h4, .l-content__inner h3 + h4 { padding-top: 0; } .page-template-page-full p, .l-content__inner p { font-size: 1rem; } .page-template-page-full ul, .l-content__inner ul { display: flex; flex-direction: column; gap: 8px; } .page-template-page-full p + ul, .l-content__inner p + ul { padding-top: 16px; } .page-template-page-full ul li, .l-content__inner ul li { position: relative; padding-left: 21px; } .page-template-page-full ul li::before, .l-content__inner ul li::before { position: absolute; content: ""; top: 10px; left: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--color-blue); } .page-template-page-full ol, .l-content__inner ol { counter-reset: sample; display: flex; flex-direction: column; gap: 8px; } .page-template-page-full ol li, .l-content__inner ol li { padding-left: 21px; text-indent: -21px; } .page-template-page-full ol li::before, .l-content__inner ol li::before { counter-increment: sample; content: counter(sample) ". "; color: var(--color-blue); font-family: var(--font-main); } .page-template-page-full .wp-block-media-text.is-stacked-on-mobile + ol, .l-content__inner .wp-block-media-text.is-stacked-on-mobile + ol { padding-top: 1rem; } .wp-block-media-text.is-stacked-on-mobile { padding-top: 64px; grid-gap: 40px; } .page-template-page-full h2 + .wp-block-media-text.is-stacked-on-mobile, .l-content__inner h2 + .wp-block-media-text.is-stacked-on-mobile { padding-top: 0; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { flex: 1; max-width: 552px; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img { width: 100%; height: 100%; object-fit: cover; } .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { padding: 0; } .wp-block-media-text__content h3 { padding-top: 0; } .wp-block-media-text__content h3::after { top: 7px; } .page-template-page-full table, .l-content__inner table { max-width: 922px; border-collapse: separate; border-spacing: 0; border: 2px solid var(--color-beige); border-radius: 20px; overflow: hidden; margin-top: 40px; margin-left: auto; margin-right: auto; } .page-template-page-full h3 table, .l-content__inner h3 table { margin-top: 0; } .page-template-page-full table td, .l-content__inner table td { border-top: none; border-right: none; border-bottom: 2px solid var(--color-beige); border-left: none; padding: 24px; } .page-template-page-full table tr:last-of-type td, .l-content__inner table tr:last-of-type td { border-bottom: none; } .page-template-page-full table td:first-of-type, .l-content__inner table td:first-of-type { background: var(--color-cream); font-weight: var(--font-bold); width: 166px; text-align: left; } .wp-block-file { text-decoration: underline; } .wp-block-file a { font-size: 1rem; } .page-template-page-full figure + .wp-block-file, .page-template-page-full p + .wp-block-file, .wp-block-file + .wp-block-file, .l-content__inner figure + .wp-block-file, .l-content__inner p + .wp-block-file { padding-top: 1rem; } @media screen and (max-width: 1280px) { .page-template-page-full main > div > .wp-block-group { padding-left: 40px; padding-right: 40px; } .page-template-page-full .wp-block-table { max-width: 100%; padding: 0 40px; } .page-template-page-full table, .l-content__inner table { max-width: 100%; } } @media screen and (max-width: 782px) { .wp-block-columns.guide-education_list-box:nth-last-of-type(2n) { flex-direction: column-reverse; } } @media screen and (max-width: 767px) { .l-content { padding: 40px 16px; } .page-template-page-full h2, .l-content__inner h2 { font-size: 24px; margin-bottom: 32px; } .page-template-page-full p + h2, .page-template-page-full ul + h2, .page-template-page-full ol + h2, .page-template-page-full figure + h2, .page-template-page-full .wp-block-file + h2, .page-template-page-full .wp-block-media-text.is-stacked-on-mobile + h2, .l-content__inner p + h2, .l-content__inner ul + h2, .l-content__inner ol + h2, .l-content__inner figure + h2, .l-content__inner .wp-block-file + h2, .l-content__inner .wp-block-media-text.is-stacked-on-mobile + h2 { margin-top: 80px; } .page-template-page-full h3, .l-content__inner h3 { font-size: 20px; padding-top: 40px; margin-bottom: 16px; } .page-template-page-full h3::after, .l-content__inner h3::after { top: 45px; } .page-template-page-full h4, .l-content__inner h4 { font-size: 16px; padding-top: 24px; margin-bottom: 8px; } .page-template-page-full p, .l-content__inner p { font-size: 0.875rem !important; } .wp-block-media-text.is-stacked-on-mobile { padding-top: 40px; grid-gap: 24px; } .page-template-page-full .wp-block-group { padding-left: 20px; padding-right: 20px; } .page-template-page-full main > div > .wp-block-group { padding-left: 16px; padding-right: 16px; } .page-template-page-full .wp-block-table { max-width: 100%; padding: 0 16px; } .page-template-page-full table td, .l-content__inner table td { display: inline-block; width: 100% !important; } .page-template-page-full table tr:last-of-type td, .l-content__inner table tr:last-of-type td { border: none; } } @media screen and (max-width: 600px) { } /* オリジナルデザイン */ /* 園紹介 */ .bg_box { border-radius: 12px; padding: 24px; p + p { margin-top: 0; } h4 { padding-top: 0; } .tel-num a { font-size: 32px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.03em; color: var(--color-red); white-space: nowrap; } figure + p { margin-top: 0; } .line-icon { text-align: center; } } .l-subnavi_box { gap: 40px; } .intro-ensya { max-width: 923px; width: 100%; margin: 0 auto; img { border-radius: 12px; } } /* 園の特徴 */ .l-content__inner .roots_tag-wrap.is-layout-grid { width: fit-content; height: fit-content; margin: 0 auto; } .l-content__inner .roots_tag-wrap.is-layout-grid p { padding: 8px; } .l-content__inner .roots_tag-wrap p + p { margin-top: 0; } /* アクセス */ .google-map iframe { width: 100%; border-radius: 20px; overflow: hidden; } /* 園の一日 */ .en-schedule_link-box, .en-oneday_link-box { gap: 80px; } .en-oneday_flow_textbox { padding: 24px; border-radius: 12px; p + p { margin-top: 0; } } .en-oneday_flow-content { margin-bottom: 24px; } /* 園行事 */ .en-schedule_list figure + p { margin-top: 0; } @media (max-width: 600px) { .l-subnavi_box { justify-content: flex-start; gap: 20px; } .en-schedule_link-box, .en-oneday_link-box { gap: 40px; .has-text-align-center.has-body-font-size a { font-size: 0.875rem; } } } /* ================================================ NEWS post ================================================ */ .l-content__inner .news { background: var(--color-blue-bg); padding: 80px 0; overflow: hidden; position: relative; } .l-content__inner .news__inner { max-width: var(--content-width); margin: 0 auto; padding: var(--content-padding); display: flex; flex-direction: column; align-items: center; gap: 32px; } .l-content__inner .news__title-area { width: 100%; } .l-content__inner .news__title-area .section-heading { margin-bottom: 0; } .l-content__inner .news__box { position: relative; background: #fff; border-radius: 20px; padding: 64px; width: 100%; max-width: 786px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); z-index: 0; } .l-content__inner .news__box::after { position: absolute; content: ""; width: clamp(224px, 32.1vw, 463px); height: clamp(201px, 28.8vw, 415px); bottom: -4.6vw; right: -18.2vw; background: url(../images/svg/news-bg2.svg) no-repeat center center/contain; z-index: -1; } .l-content__inner .news__list { display: flex; flex-direction: column; gap: 32px; } .l-content__inner .news__item { border-bottom: 1px solid #dae6eb; padding-bottom: 32px; position: unset; padding-left: 0; } .l-content__inner .news__item:last-child { border-bottom: none; padding-bottom: 0; } .l-content__inner .news__link { /* display: flex; align-items: center; justify-content: space-between; gap: 16px; */ transition: opacity 0.2s; } .l-content__inner .news__link:hover { opacity: 0.75; } .l-content__inner .news__item-info { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; overflow: hidden; margin-bottom: 5px; } .l-content__inner .news__item-meta { display: flex; align-items: center; } .l-content__inner .news__date { font-family: var(--font-main); font-weight: var(--font-nomal); font-size: 16px; color: var(--color-dark); letter-spacing: 0.48px; flex-shrink: 0; width: 110px; } .l-content__inner .news__category { font-family: var(--font-main); font-weight: var(--font-nomal); font-size: 14px; padding: 4px 16px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; } .l-content__inner .news__category--info { background: var(--color-cream); color: var(--color-blue); } .l-content__inner .news__category--letter { background: var(--color-cream); color: var(--color-blue); } .l-content__inner .news__title { font-family: var(--font-main); font-weight: var(--font-bold); font-size: 20px; color: var(--color-dark); letter-spacing: 0.96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l-content__inner .news__title + p { display: none; } .l-content__inner .news__item-info > p + p { margin-top: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .l-content__inner .news__item-info > p:last-of-type { display: none; } .l-content__inner .news__more { text-decoration: underline; } .l-content__inner .pagenation { display: flex; gap: 12px; justify-content: center; padding-top: 64px; } .l-content__inner .pagenation .page-numbers { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; } .l-content__inner .pagenation .page-numbers.current { background-color: var(--color-red); color: var(--color-white); } .l-content__inner .pagenation .page-numbers.prev { position: relative; } .l-content__inner .pagenation .page-numbers.prev::before { position: absolute; content: ""; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%) rotate(180deg); background: url(../images/svg/chevron-right-red.svg) no-repeat center center/contain; } .l-content__inner .pagenation .page-numbers.next { position: relative; } .l-content__inner .pagenation .page-numbers.next:before { position: absolute; content: ""; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: url(../images/svg/chevron-right-red.svg) no-repeat center center/contain; } /* ============================================================ CTA SECTION ============================================================ */ .cta__wave-img { width: 100%; } .cta__body { background: var(--color-cream); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; padding: 80px var(--side-padding-pc); position: relative; overflow: hidden; } /* CTA English title */ .cta__en-title { position: relative; max-width: 346px; height: 154px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-dot); font-size: 56px; color: var(--color-blue); line-height: 1; letter-spacing: -0.05em; z-index: 0; } .cta__en-title::after { position: absolute; content: ""; width: 235px; height: 252px; top: 50%; left: -100px; transform: translateY(-50%) rotate(21deg); background: url(../images/svg/contactTitle_bg.svg) no-repeat center/100% 100%; z-index: -1; } .cta__en-title span { color: var(--color-orange); } /* CTA cards */ .cta__cards { display: flex; align-items: center; gap: 40px; flex-shrink: 0; } .cta__card { background: var(--color-white); border-radius: 20px; padding: 24px; max-width: 346px; display: flex; flex-direction: column; gap: 12px; } .cta__card-title { font-size: 24px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.06em; color: var(--color-brown); text-align: center; } .cta__tel { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; } .cta__tel-icon { flex-shrink: 0; } .cta__tel-number { font-size: 32px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.06em; color: var(--color-red); white-space: nowrap; } .cta__mail-btn { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--color-red); border-radius: 29px; padding: 16px; width: 100%; color: var(--color-white); font-size: 20px; font-weight: var(--font-bold); line-height: 1.2; letter-spacing: 0.06em; white-space: nowrap; } @media screen and (max-width: 1024px) { .cta__body { padding: 60px 48px; } .cta__cards { flex-wrap: wrap; justify-content: center; } } @media screen and (max-width: 767px) { .cta__en-title::after { left: 50%; transform: translate(-50%, -54%) rotate(21deg); background: url(../images/svg/contactTitle_bg.svg) no-repeat center/80% 80%; } .cta__body { padding: 40px var(--side-padding-pc); gap: 0; } .cta__cards { flex-direction: column; gap: 24px; width: 100%; } .cta__card { width: 100%; } .cta__tel-number { font-size: 24px; } } @media screen and (max-width: 375px) { .cta__card { padding: 16px; } .cta__card-title { font-size: 20px; } .cta__tel-number { font-size: 20px; } } /* ================================================ * @contact * お問い合わせ * ============================================= */ .block_beige { display: flex; padding: 40px 0; flex-direction: column; justify-content: center; align-items: center; gap: 5px; align-self: stretch; } .block_beige .tel-num { position: relative; font-size: 40px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.03em; color: var(--color-red); white-space: nowrap; padding-left: 48px; } .block_beige .tel-num::before { position: absolute; content: ""; top: 50%; left: 0; transform: translateY(-50%); width: 40px; height: 40px; background: url(../images/svg/icon_tel.svg); } .block_beige .open-time { margin-top: 0; } .mail-form { width: 100%; background-color: var(--white-text); display: flex; padding: 64px 0; flex-direction: column; justify-content: center; align-items: center; gap: 40px; align-self: stretch; .wpcf7 { max-width: 820px; padding: 0 40px; } .form-item { p { width: 100%; } label, .label { font-weight: var(--font-weight-bold); } .form-style, .age, .privacy-policy-body { width: 100%; padding: 20px 26px; border: solid 1px var(--main-text); border-radius: 4px; background-color: var(--color-white); margin-top: 8px; margin-bottom: 32px; } .age { position: relative; max-width: 410px; } .age::after { position: absolute; content: ""; top: 50%; right: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/svg/chevron-right-red.svg) no-repeat center center/contain; } } .required { color: var(--color-red); font-size: 12px; background-color: #ffeeec; padding: 6px 12px; margin-left: 10px; } .privacy-policy-body { overflow-y: scroll; width: 100%; height: 200px; padding: 8px 24px; border: solid 1px var(--main-text); border-radius: 4px; h4 { font-size: var(--font-size-body-pc); font-weight: var(--font-weight-reguler); margin-top: 24px; margin-bottom: 0; } p { margin: 0; } h4 + p { margin-top: 8px; } p + ul { margin-top: 8px; } p + p { margin-top: 8px; } ul { padding-left: 20px; } } .checkbox { input[type="checkbox"] { position: relative; width: 24px; height: 24px; vertical-align: middle; border-radius: 0; border: solid 1px var(--line); transition: all 0.2s; & + span { padding-left: 0.8rem; } &:checked::after { appearance: auto !important; position: absolute; content: ""; top: 45%; transform: translate(-50%, -50%) rotate(50deg); left: 50%; width: 0.5rem; height: 1.2rem; border-right: 3px solid var(--line); border-bottom: 3px solid var(--line); z-index: 1; transition: all 0.2s; } } & > p { text-align: center; } .wpcf7-list-item { margin: 0; } .wpcf7-list-item label { display: flex; align-items: center; } } .checkbox + p { text-align: center; margin-top: 32px; } .button-wrapper { display: flex; justify-content: center; margin-top: 40px; margin-bottom: 40px; gap: 16px; } input.back_button, input.confirm_button, input.cv-button { max-width: 238px; width: 100%; font-size: 1rem; font-weight: var(--font-bold); color: var(--color-white); border-radius: 99px; border: 2px solid var(--color-red); background: var(--color-red); padding: 16px !important; transition: all 0.3s ease; &:hover { background: #ffeeec; color: var(--color-red); } } input.back_button { background: #ffeeec; border: solid 2px var(--color-red); color: var(--color-red); &:hover { background: var(--color-red); color: var(--color-white); } } span.wpcf7-spinner { display: none; } .alart { text-align: left !important; font-weight: var(--font-bold); color: var(--color-red); } .alart-body { text-align: left !important; color: var(--color-red); padding-top: 0; margin-bottom: 24px; } .confirm_area { background-color: var(--color-white); padding: 64px 84px; .form-item { margin-bottom: 32px; p { width: 100%; } label, .label { display: block; width: 100%; font-weight: var(--font-weight-bold); border-bottom: solid 1px var(--color-beige); padding-bottom: 10px; margin-bottom: 10px; } } } /*確認画面と完了画面を非表示*/ .confirm_area, .thanks_area { display: none; } /*デフォルトのサンクスメッセージを非表示*/ .wpcf7-response-output { display: none; } } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(74, 74, 74, 0.5); } input::-moz-placeholder, textarea::-moz-placeholder { color: rgba(74, 74, 74, 0.5); } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: rgba(74, 74, 74, 0.5); } input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: rgba(74, 74, 74, 0.5); } input::placeholder, textarea::placeholder { color: rgba(74, 74, 74, 0.5); } /* Edge */ input::-ms-input-placeholder, textarea::-ms-input-placeholder { color: rgba(74, 74, 74, 0.5); } /* IE11 & IE10 */ input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: rgba(74, 74, 74, 0.5); } .tokutei-link { text-decoration: underline; } @media screen and (max-width: 768px) { .contact-body { padding: 64px 16px; } .tel-form { padding: 48px 16px 16px; .tel-form-inner { margin-top: 16px; } .tel-form-inner { flex-direction: column; } .tel-form-parts { max-width: 100%; padding: 32px 16px; &:first-of-type { border-right: none; border-bottom: solid 1px var(--line); } } h4 { font-size: var(--font-size-M-sp); } .tel-no { font-size: var(--font-size-L-sp); margin-top: 16px; } } .mail-form { padding: 32px 16px 40px; .form-item { .form-style { padding: 16px 16px; margin-bottom: 16px; } } .privacy-policy-body { height: 200px; padding: 8px 16px; h4 { font-size: var(--font-size-body-sp); } } input.confirm_button, input.cv-button { padding: 28px 16px !important; } } } /* privacy-policy */ .privacy-policy { margin-top: 80px; .titleLL { background-color: var(--bg-yellow); padding: 42px 140px; } .entry-content { padding-top: 80px; margin-bottom: 80px; h2 { font-size: var(--font-size-body-pc); font-weight: var(--font-weight-reguler); } h2 + p { margin-top: 8px; } p + ul { margin-top: 8px; } p + p { margin-top: 8px; } ul { padding-left: 20px; } } } @media screen and (max-width: 768px) { .privacy-policy { .titleLL { font-size: var(--font-size-LL-sp); padding: 24px 16px; } .entry-content { padding-top: 64px; h2 { font-size: var(--font-size-body-sp); } } } } /* ================================================ * @footer * フッター * ============================================= */ .footer { position: relative; padding-top: 132px; margin-top: 132px; background-color: var(--color-beige); } .footer::before { position: absolute; content: ""; top: 0; left: 50%; transform: translate(-50%, -50%); width: 1000px; height: 200px; background: url(../images/png/footer_deco.png) no-repeat center / 100%; } .footer__body { max-width: var(--content-width); margin: 0 auto; padding: 0 0 24px; display: flex; flex-direction: column; gap: 16px; } /* Footer link box */ .footer__link-box { position: relative; display: flex; justify-content: space-between; align-items: flex-start; background: var(--color-white); border-radius: 20px; padding: 40px 64px; margin: 0 30px; } /* Nav columns */ .menu-footer-container { flex: 1; } .footer .menu { column-count: 3; display: block; gap: 0; } .footer .menu li { padding-left: 0; } .footer .menu li::before { display: none; } .footer .menu > .menu-item > a { display: block; position: relative; font-weight: var(--font-bold); line-height: 1.2; padding: 13px 0 13px 32px; margin: 3px 0; } .footer .menu > .menu-item:nth-of-type(5) > a { break-after: column; } .footer .menu > .menu-item > a:before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; border-radius: 50%; background: url(../images/svg/chevron-right.svg) no-repeat center / 55%; background-color: var(--color-red); } .footer .sub-menu > .menu-item > a { display: block; position: relative; font-size: 0.875rem; line-height: 1.2; padding: 10px 0 10px 28px; margin: 2px 0; } .footer .sub-menu > .menu-item:last-of-type > a { break-after: column; } .footer .sub-menu > .menu-item > a:before { position: absolute; content: ""; top: 50%; transform: translateY(-50%); left: 0; width: 20px; height: 20px; background: url(../images/svg/chevron-right-red.svg) no-repeat center / 55%; } /* Footer contact column */ .footer__contact-col { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 238px; flex-shrink: 0; align-self: stretch; } .footer__contact-title { position: relative; font-size: 20px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.06em; color: var(--color-red); white-space: nowrap; padding: 5px 0; z-index: 0; } .footer__contact-title::after { position: absolute; content: ""; top: 50%; left: 50%; width: 191px; height: 39px; background: var(--color-cream); transform: rotate(-3deg) translate(-50%, -60%); pointer-events: none; border-radius: 2px; z-index: -1; } .footer__contact-body { display: flex; flex-direction: column; gap: 16px; width: 100%; } .footer__tel-row { display: flex; align-items: center; justify-content: center; gap: 4px; } .footer__tel-num { font-size: 24px; font-weight: var(--font-bold); line-height: 1.6; letter-spacing: 0.72px; color: var(--color-red); white-space: nowrap; } .footer__mail-btn { display: flex; align-items: center; justify-content: center; gap: 4px; background: var(--color-red); border-radius: 29px; padding: 16px; width: 100%; color: var(--color-white); font-weight: var(--font-bold); line-height: 1.2; } /* Footer bottom row */ .footer__bottom-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 30px; } .footer__address-col { display: flex; align-items: center; gap: 12px; } .footer__logo { height: 87px; width: auto; } .footer__sns-col { display: flex; align-items: center; gap: 11px; } .footer__sns-icons { display: flex; align-items: center; gap: 16px; } .footer__sns-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: var(--color-brown); } .footer__logo-sub { width: 160px; height: auto; } /* Footer meta */ .footer__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; } .footer__privacy { font-size: 12px; letter-spacing: 0.36px; text-decoration: underline; text-underline-offset: 2px; } .footer__copy { font-size: 12px; font-weight: var(--font-bold); letter-spacing: 0.36px; } @media screen and (max-width: 1024px) { .footer { padding-top: 12vw; margin-top: 12vw; } .footer::before { width: 80%; } .footer__link-box { flex-wrap: wrap; justify-content: center; padding: 32px; gap: 24px; } .footer__nav-col--wide { width: 100%; } .footer__contact-col .footer__mail-btn, .footer__mail-btn { max-width: 300px; } .footer__bottom-row { justify-content: center; gap: 24px; } } @media screen and (max-width: 767px) { .footer::before { width: 100%; } .footer__body { padding: 0 20px 24px; } .footer__link-box { display: none; } .footer__bottom-row { flex-direction: column; align-items: center; gap: 16px; } .footer__address-col { flex-direction: column; align-items: center; gap: 8px; } .footer__address { text-align: center; } .footer__logo { height: auto; width: 100%; } .footer__sns-col { flex-direction: column; } .footer__meta { align-items: center; width: 100%; } }