/****************************** このCSSファイルで使用するカスタムプロパティ *******************************/ :root{ --base-content-width: 1000px; --base-left-aside-width: 220px; --base-left-aside-gap: 30px; --base-content-side-gap: 15px; } @media screen and (max-width: 850px) { :root{ --base-left-aside-width: 0px; --base-left-aside-gap: 0px; } } /****************************** タグの配置 ******************************/ /* .common-Body:has( > header, > nav, > main, > footer){ display: flex; flex-direction: column; } */ /****************************** 　レイアウト ******************************/ .common-Layout{ --base-main-width: calc(var(--base-content-width) - var(--base-left-aside-width) - var(--base-left-aside-gap)); display: grid; grid-template-columns: [full-width-start] minmax(var(--base-content-side-gap), 1fr) [left-start full-column-start] var(--base-left-aside-width) [left-end] var(--base-left-aside-gap) [main-start] minmax(auto, var(--base-main-width)) [main-end full-column-end] minmax(var(--base-content-side-gap), 1fr) [full-width-end]; /* template-rowsが合っているか見ておく */ /* grid-template-rows: [full-height-start test1-start] auto [test1-end test2-start] 1fr [test2-end full-height-end]; */ } .common-Layout__Main{ grid-column: main; grid-row: 2; container-type: inline-size; padding-bottom: 20px; } .common-Layout__Main.--full-column{ grid-column: full-column; } .common-Layout__LeftSide{ grid-column: left; grid-row: 2; container-type: inline-size; padding-bottom: 20px; } .common-Layout__BreadColumn{ grid-column: full-column; grid-row: 1; } @media screen and (max-width: 850px) { .common-Layout{ display: block; } .common-Layout__Main{ padding-left: 15px; padding-right: 15px; } .common-Layout__LeftSide{ padding-left: 15px; padding-right: 15px; } .common-Layout__BreadColumn{ padding-left: 0px; padding-right: 0px; } } /****************************** サイトヘッダー ******************************/ .common-SiteHeader{ margin-bottom: 15px; } @media screen and (max-width: 600px) { .common-SiteHeader{ grid-template-rows: 90px; position: relative; background-color: #f6f6f6; } } .common-SiteHeader__Logo{ background-image: url('/images/site-header-background2.png'); background-repeat: repeat; background-size: auto 100%; } @media screen and (max-width: 600px) { .common-SiteHeader__Logo{ background-image: none; } } .common-SiteHeader__Logo > img{ width: 100%; height: 120px; /* height: auto; */ } @media screen and (max-width: 600px) { .common-SiteHeader__Inner{ width: calc(100% - 90px); height: 90px; } .common-SiteHeader__Logo > img{ width: 100%; height: 90px; } } .common-SiteHeader__Drawer{ display: none; } .common-SiteHeader__Drawer > img{ width: 24px; } .common-SiteHeader__Drawer > span{ font-family: "maru-gothic"; color: #555; font-size: 1rem; display: block; margin-top: 0.5em; } @media screen and (max-width: 600px) { .common-SiteHeader__Drawer{ display: block; position: absolute; top: 0; right: 0; width: 90px; height: 90px; background: transparent; border-radius: 0; border-width: 0; flex-grow: 0; margin-left: 30px; } } .common-SiteHeader__NavWrapper{ grid-column: main; } @media screen and (max-width: 600px) { .common-SiteHeader__NavWrapper{ display: block; /* grid-column: full-width; */ visibility: hidden; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; } .common-SiteHeader__NavWrapper[aria-expanded]{ transition-property: visibility; transition-duration: 0.25s; } .common-SiteHeader__NavWrapper[aria-expanded="true"]{ visibility: visible; } } @media screen and (max-width: 600px) { .common-SiteHeader__Backdrop{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; opacity: 0; } [aria-expanded] > .common-SiteHeader__Backdrop{ transition-property: opacity; transition-duration: 0.25s; } [aria-expanded="true"] > .common-SiteHeader__Backdrop{ opacity: 1; background-color: rgba(0, 0, 0, 0.5); } } @media screen and (max-width: 600px) { .common-SiteHeader__Nav{ visibility: hidden; transform: translateX(100%); position: absolute; top: 0; right: 0; width: 280px; height: 100%; background-color: #f6f6f6; overflow-y: auto; } [aria-expanded] > .common-SiteHeader__Nav{ transition-property: transform, visibility; transition-duration: 0.25s; transition-timing-function: ease; } [aria-expanded="true"] > .common-SiteHeader__Nav{ visibility: visible; transform: translateX(0%); } } .common-SiteHeader__NavList{ display: grid; grid-template-columns: repeat(6, 1fr); } @media screen and (max-width: 600px) { .common-SiteHeader__NavList{ display: block; padding-top: 90px; } } .common-SiteHeader__NavItem{ padding: 10px 0; } .common-SiteHeader__NavItem > a{ display: grid; justify-items: center; align-items: center; font-size: 1.6rem; color: rgba(0, 0, 0, .55);; padding: 20px 0; text-decoration: none; font-family: "maru-gothic"; border-right: 1px dotted #000; margin-right: -1px; } .common-SiteHeader__NavItem:has(a[aria-current="page"]){ background-color: #f5f5f5; } @media screen and (max-width: 600px) { .common-SiteHeader__NavItem:has(a[aria-current="page"]){ background: #ddd; } } .common-SiteHeader__NavItem:hover > a{ color: black; } @media screen and (max-width: 600px) { .common-SiteHeader__NavItem > a{ height: 60px; background: transparent; border-width: 1px 0 0; border-color: rgba(180, 180, 181, 0.4); padding: 1em; margin-bottom: 30px; } .common-SiteHeader__NavItem:last-child > a{ border-bottom-width: 1px; border-color: rgba(180, 180, 181, 0.4); } } .common-SiteHeader__NavItem > a img{ width: 25px; padding-bottom: 5px; } /****************************** 左サイドバー ******************************/ .common-Feature{ display: grid; grid-template-columns: 1fr 1fr; } .common-Feature__Item{ border: 1px solid rgba(0, 0, 0, .4); margin-top: -1px; margin-left: -1px; } .common-SampleLink{ padding: 30px 0; } .common-SampleLink > a:hover{ opacity: 0.8; } .common-Calendar{ margin-bottom: 0px; } .common-Calendar__Title{ font-size: 2rem; text-align: center; border-bottom: 2px solid currentColor; padding-bottom: 5px; } .common-Calendar__Description{ display: flex; justify-content: center; gap: 15px; padding-top: 10px; } .common-Calendar__Holiday{ display: flex; align-items: center; gap: 5px; } .common-Calendar__Holiday::before{ content: ''; display: block; width: 1em; height: 1em; background-color: pink; border-radius: 3px; } .common-Calendar__WorkingDay{ display: flex; align-items: center; gap: 5px; } .common-Calendar__WorkingDay::before{ content: ''; display: block; width: 1em; height: 1em; background-color: #000; border-radius: 3px; } /****************************** パンくずリスト ******************************/ .common-Breadcrumb{ background-color: #ddd; padding: 7.5px; } .common-Breadcrumb__List{ grid-column: main; display: flex; flex-wrap: wrap; row-gap: 5px; align-items: center; grid-row: full-height; padding-bottom: 0; } .common-Breadcrumb__Item{ display: flex; align-items: center; } .common-Breadcrumb__Item > a{ color: #777; font-size: 1.4rem; } .common-Breadcrumb__Item:last-child > a{ text-decoration: none; } .common-Breadcrumb__Item::after{ content: '/'; display: inline-block; margin-left: 1em; margin-right: 1em; } .common-Breadcrumb__Item:last-child:after{ background: none; display: none; } /****************************** 　エラー ******************************/ .common-Error{ display: flex; flex-direction: column; align-items: center; margin-bottom: 50px; } .common-Error__Content{ font-size: 2.0rem; background-color: #f8d7da; border: 1px solid #f5c2c7; color: #842029; padding: 1em; margin-bottom: 20px; } .common-Error__Back{ color: #555; border: 1px solid #ccc; padding: 1em; width: 200px; } /****************************** 　ページフッター ******************************/ .common-SiteFooter{ /* display: grid; grid-template-columns: minmax(15px, 1fr) [main-start] minmax(auto, var(--base-content-width)) [main-end] minmax(15px, 1fr); */ /* padding-top: 30px; */ } .common-SiteFooter__Nav{ display: grid; justify-items: center; grid-template-columns: 1fr 1fr 1fr; gap: 50px; background-color: #f5f5f5; padding: 30px 100px; } .common-SiteFooter__Title{ font-size: 2.4rem; color: #d9a62e; padding-bottom: 5px; } .common-SiteFooter__NavItem{ padding-bottom: 10px; } .common-SiteFooter__NavItem > a{ color: #666; } .common-SiteFooter__NavItem > a:hover{ color: #000; } .common-SiteFooter__Copyright{ background-color: #9d7482; padding: 20px; } .common-SiteFooter__Copyright > p{ color: #fff; text-align: center; } @media screen and (max-width: 768px) { .common-SiteFooter__Nav{ display: block; padding: 15px; } .common-SiteFooter__Title{ padding-top: 15px; } .common-SiteFooter__NavItem{ /* margin-bottom: 10px; */ } .common-SiteFooter__Item > a{ text-align: center; } } /****************************** 　その他のユーティリティ ******************************/ /* 見出し */ .common-Title{ color: #660033; font-size: 2.4rem; text-align: center; background-image: url('/images/common-title-background.jpg'); background-repeat: no-repeat; background-size: 100% 100%; padding: 10px; margin-bottom: 20px; } /* 送信ボタン */ .common-Submit{ display: grid; justify-items: center; } .common-Submit > button{ display: flex; justify-content: center; align-items: center; gap: 5px; color: #fff; background-color: #0b014a; border: 2px solid currentColor; border-radius: 10px; width: 280px; padding: 20px; } .common-Submit > button::after{ content: ''; display: block; background-image: url("/images/next.svg"); width: 15px; height: 15px; } .common-Submit > button:hover{ color: #fff; opacity: 0.7; } .common-Submit.--back > button{ background-color: transparent; border-width: 0; color: #444; padding: 0px; } .common-Submit.--back > button:hover{ text-decoration: underline; } .common-Thanks{ color: #d9a62e; font-size: 2.4rem; margin-bottom: 30px; } .common-Holiday{ display: none; background-color: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22); margin-bottom: 20px; } .common-Holiday__Header{ font-size: 2.0rem; text-align: center; font-weight: bold; color: #fff; background-color: #ff90aa; padding: 10px; } .common-Holiday__Contents{ padding: 15px; } .common-Holiday__Title{ font-size: 2.0rem; text-align: center; color: #ff90aa; } .common-Holiday__SubTitle{ text-align: center; color: #ff90aa; }