@layer unit { /* 外部 URL が効かない環境向け data URI（マスク用） */ :root { --unit-arrow-long-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2062.72%209.68%22%3E%3Cpolygon%20fill%3D%22%23171717%22%20fill-rule%3D%22evenodd%22%20points%3D%2256.56%208.37%2059.15%205.77%200%205.77%200%203.91%2059.15%203.91%2056.56%201.32%2057.88%200%2062.72%204.84%2057.88%209.68%2056.56%208.37%22/%3E%3C/svg%3E"); /* Swiper ナビ矢印（左向き・次は scaleX(-1)）viewBox 0 0 12.72 9.68 */ --unit-swiper-arrow-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2012.72%209.68%22%3E%3Cpolygon%20fill%3D%22black%22%20fill-rule%3D%22evenodd%22%20points%3D%226.16%208.37%203.57%205.77%2012.72%205.77%2012.72%203.91%203.57%203.91%206.16%201.32%204.84%200%200%204.84%204.84%209.68%206.16%208.37%22/%3E%3C/svg%3E"); } /* WIZWIG Style */ .unit-ww-content { ul, ol { margin-bottom: 1em; } /* .unit-list と同じ見え方（「・」＋ハンギングインデント） */ ul { list-style: none; margin-left: 1em; padding-left: 0; } ul li { text-indent: -21px; padding-left: 21px; &::before { content: "・"; } } ul li:not(:first-child) { margin-top: 10px; } /* .unit-orderlist と同じ見え方（カウンタ＋「1.」形式） */ ol { list-style: none; margin-left: 1.5em; padding-left: 0; counter-reset: ol; } ol ol { counter-reset: ol; } ol li { text-indent: -18px; padding-left: 18px; counter-increment: ol; } ol li::before { content: counter(ol) "."; margin-right: 5px; } ol li:not(:first-child) { margin-top: 10px; } p { margin-top: 0; margin-bottom: 1em; } h1 { font-size: 3.5rem; margin-top: 0; margin-bottom: 0.3em } h2 { font-size: 3rem; margin-top: 0; margin-bottom: 0.3em } h3 { font-size: 2.4rem; margin-top: 0; margin-bottom: 0.5em } h5 { font-size: 1.6rem; margin-top: 0; margin-bottom: 0.5em } /* 本文内の標準リンク（色は tokens.css の --color-link 系） */ a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.12em; } a:visited { color: var(--color-link-visited); } a:hover { color: var(--color-link-hover); } a:focus-visible { outline: 2px solid var(--color-link-focus); outline-offset: 2px; } /* ファイル拡張子リンクにアイコン（::after・.unit-icon と同じ SVG） */ a[href*=".pdf" i]::after, a[href*=".xlsx" i]::after, a[href*=".docx" i]::after { content: ""; display: inline-block; width: 24px; aspect-ratio: 1/1; margin-left: 0.35em; vertical-align: middle; background: no-repeat center/contain; flex-shrink: 0; } a[href*=".pdf" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23c60932;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .53 .54 7 .54 30.02 23.47 30.02 23.47 .53 7 .53'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.05,0-.07.01-.09.02-.17.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-2' d='M6.03,13.33h-2.63c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-2.84h.81c1.75,0,2.79-1.07,2.79-2.87s-1.02-2.81-2.79-2.81ZM6.89,16.13c0,.86-.32,1.2-1.15,1.2h-.52v-2.33h.52c.81,0,1.15.34,1.15,1.13Z'/%3E%3Cpath class='cls-2' d='M12.21,13.33h-2.61c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h2.61c2.38,0,2.88-2.05,2.88-3.77v-1.1c0-2.5-.97-3.77-2.88-3.77ZM13.15,18.19c0,1.54-.25,2.09-.94,2.09h-.79v-5.27h.79c.71,0,.94.53.94,2.09v1.1Z'/%3E%3Cpath class='cls-2' d='M20.6,13.33h-4.43c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-3.32h2.31c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11h-2.31v-1.87h2.61c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } a[href*=".xlsx" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23085b22;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .54 .54 7 .54 30.02 23.47 30.02 23.47 .54 7 .54'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.04,0-.06.01-.09.02-.18.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3Cpath class='cls-2' d='M13.98,17.69l2.98-5.93s0-.04,0-.06c-.01-.02-.03-.03-.06-.03h-3.2s-.05.01-.06.04l-1.65,3.48-1.65-3.48s-.03-.04-.06-.04h-3.2s-.04.01-.06.03c-.01.02-.01.04,0,.06l2.97,5.93-3.34,6.33s0,.04,0,.06c.01.02.03.03.06.03h3.2s.05-.01.06-.03l2.03-3.77,2.03,3.77s.03.03.06.03h3.2s.04-.01.06-.03c.01-.02.01-.04,0-.06l-3.36-6.33Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } a[href*=".docx" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='22' height='28.01' viewBox='0 0 22 28.01'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23082c7c;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-2' points='6.41 .49 .49 6.41 .49 27.51 21.51 27.51 21.51 .49 6.41 .49'/%3E%3Cpath class='cls-1' d='M21.51,0H6.41s-.04,0-.06.01c-.02,0-.04,0-.06.01-.08.02-.16.06-.22.12L.14,6.07c-.06.06-.1.14-.12.22,0,.02,0,.04-.01.06,0,.02-.01.04-.01.06v21.1c0,.27.22.49.49.49h21.02c.27,0,.49-.22.49-.49V.49c0-.27-.22-.49-.49-.49ZM21.02,27.02H.98V6.9h5.43c.27,0,.49-.22.49-.49V.98h14.11v26.04Z'/%3E%3Cpath class='cls-1' d='M16.93,11.42s-.04-.03-.07-.03h-2.34s-.08.03-.09.08l-.87,6.12-1.45-6.13s-.05-.07-.09-.07h-2.05s-.08.03-.09.07l-1.45,6.13-.87-6.12s-.04-.08-.09-.08h-2.34s-.05.01-.07.03c-.02.02-.02.05-.02.08l1.99,10.56s.05.07.09.07h2.04s.08-.03.09-.07l1.75-6.63,1.75,6.63s.05.07.09.07h2.04s.08-.03.09-.07l1.99-10.56s0-.05-.02-.08Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } /* .unit-block 内の table th/td 内のリンクにもアイコンを反映 */ .unit-block table th a[href*=".pdf" i]::after, .unit-block table th a[href*=".xlsx" i]::after, .unit-block table th a[href*=".docx" i]::after, .unit-block table td a[href*=".pdf" i]::after, .unit-block table td a[href*=".xlsx" i]::after, .unit-block table td a[href*=".docx" i]::after { content: ""; display: inline-block; width: 24px; aspect-ratio: 1/1; margin-left: 0.35em; vertical-align: middle; background: no-repeat center/contain; flex-shrink: 0; } .unit-block table th a[href*=".pdf" i]::after, .unit-block table td a[href*=".pdf" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23c60932;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .53 .54 7 .54 30.02 23.47 30.02 23.47 .53 7 .53'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.05,0-.07.01-.09.02-.17.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-2' d='M6.03,13.33h-2.63c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-2.84h.81c1.75,0,2.79-1.07,2.79-2.87s-1.02-2.81-2.79-2.81ZM6.89,16.13c0,.86-.32,1.2-1.15,1.2h-.52v-2.33h.52c.81,0,1.15.34,1.15,1.13Z'/%3E%3Cpath class='cls-2' d='M12.21,13.33h-2.61c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h2.61c2.38,0,2.88-2.05,2.88-3.77v-1.1c0-2.5-.97-3.77-2.88-3.77ZM13.15,18.19c0,1.54-.25,2.09-.94,2.09h-.79v-5.27h.79c.71,0,.94.53.94,2.09v1.1Z'/%3E%3Cpath class='cls-2' d='M20.6,13.33h-4.43c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-3.32h2.31c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11h-2.31v-1.87h2.61c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .unit-block table th a[href*=".xlsx" i]::after, .unit-block table td a[href*=".xlsx" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23085b22;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .54 .54 7 .54 30.02 23.47 30.02 23.47 .54 7 .54'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.04,0-.06.01-.09.02-.18.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3Cpath class='cls-2' d='M13.98,17.69l2.98-5.93s0-.04,0-.06c-.01-.02-.03-.03-.06-.03h-3.2s-.05.01-.06.04l-1.65,3.48-1.65-3.48s-.03-.04-.06-.04h-3.2s-.04.01-.06.03c-.01.02-.01.04,0,.06l2.97,5.93-3.34,6.33s0,.04,0,.06c.01.02.03.03.06.03h3.2s.05-.01.06-.03l2.03-3.77,2.03,3.77s.03.03.06.03h3.2s.04-.01.06-.03c.01-.02.01-.04,0-.06l-3.36-6.33Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .unit-block table th a[href*=".docx" i]::after, .unit-block table td a[href*=".docx" i]::after { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='22' height='28.01' viewBox='0 0 22 28.01'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23082c7c;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-2' points='6.41 .49 .49 6.41 .49 27.51 21.51 27.51 21.51 .49 6.41 .49'/%3E%3Cpath class='cls-1' d='M21.51,0H6.41s-.04,0-.06.01c-.02,0-.04,0-.06.01-.08.02-.16.06-.22.12L.14,6.07c-.06.06-.1.14-.12.22,0,.02,0,.04-.01.06,0,.02-.01.04-.01.06v21.1c0,.27.22.49.49.49h21.02c.27,0,.49-.22.49-.49V.49c0-.27-.22-.49-.49-.49ZM21.02,27.02H.98V6.9h5.43c.27,0,.49-.22.49-.49V.98h14.11v26.04Z'/%3E%3Cpath class='cls-1' d='M16.93,11.42s-.04-.03-.07-.03h-2.34s-.08.03-.09.08l-.87,6.12-1.45-6.13s-.05-.07-.09-.07h-2.05s-.08.03-.09.07l-1.45,6.13-.87-6.12s-.04-.08-.09-.08h-2.34s-.05.01-.07.03c-.02.02-.02.05-.02.08l1.99,10.56s.05.07.09.07h2.04s.08-.03.09-.07l1.75-6.63,1.75,6.63s.05.07.09.07h2.04s.08-.03.09-.07l1.99-10.56s0-.05-.02-.08Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* WYSIWYG ラッパー（.unit-imgtxt の v-* と同系） */ .unit-ww-box { box-sizing: border-box; &.v-border { border: 1px solid #ccc; padding: 32px; } &.v-yellow { background: #fffff3; padding: 32px; } &.v-gray { background: #f6f6f8; padding: 32px; } } @media screen and (max-width: 768px) { .unit-ww-box { &.v-border, &.v-yellow, &.v-gray { padding: 18px; } } } /* ページヘッダー */ .unit-pagehead { background: #eee; padding: 10vh 0; font-weight: var(--font-weight-bold); } .unit-pagehead__subttl { color: var(--color-main); font-size: clamp(1.8rem, 3.8vw, 2.4rem); margin-bottom: 5px; } .unit-pagehead__ttl { font-size: clamp(2.6rem, 5.4vw, 4rem); line-height: 1.1; } /* パンくず */ .unit-breadcrumbs__list { font-size: 1.2rem; display: flex; flex-wrap: wrap; padding: 1em 0; } /* .unit-breadcrumbs__list a { color: #555; } */ .unit-breadcrumbs__list a:hover { text-decoration: underline; color: var(--color-text) !important; } .unit-breadcrumbs__item:not(.is-current) a { color: #c7c7c7; } .unit-breadcrumbs__item:not(:first-child)::before { content: "/"; margin: 0 5px; } /* パーツ 全体レイアウト */ /* .unit-block:not(:first-child) { margin-top: 52px; } */ .unit-block{ margin-bottom: 30px; } /* [class^="unit-ttl"]+.unit-block { margin-bottom: 16px; }*/ @media screen and (max-width: 480px) { /* .unit-block:not(:first-child) { margin-top: 48px; } [class^="unit-ttl"]+.unit-block { margin-top: 16px; }*/ .unit-block{ margin-bottom: 20px; } /* [class^="unit-ttl"]+.unit-block { margin-bottom: 16px; } */ } /* アイコン */ .unit-icon { display: inline-block; width: 24px; aspect-ratio: 1/1; background: no-repeat center/contain; flex-shrink: 0; &.v-pdf { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23c60932;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .53 .54 7 .54 30.02 23.47 30.02 23.47 .53 7 .53'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.05,0-.07.01-.09.02-.17.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3C/g%3E%3Cg%3E%3Cpath class='cls-2' d='M6.03,13.33h-2.63c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-2.84h.81c1.75,0,2.79-1.07,2.79-2.87s-1.02-2.81-2.79-2.81ZM6.89,16.13c0,.86-.32,1.2-1.15,1.2h-.52v-2.33h.52c.81,0,1.15.34,1.15,1.13Z'/%3E%3Cpath class='cls-2' d='M12.21,13.33h-2.61c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h2.61c2.38,0,2.88-2.05,2.88-3.77v-1.1c0-2.5-.97-3.77-2.88-3.77ZM13.15,18.19c0,1.54-.25,2.09-.94,2.09h-.79v-5.27h.79c.71,0,.94.53.94,2.09v1.1Z'/%3E%3Cpath class='cls-2' d='M20.6,13.33h-4.43c-.06,0-.11.05-.11.11v8.4c0,.06.05.11.11.11h1.7c.06,0,.11-.05.11-.11v-3.32h2.31c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11h-2.31v-1.87h2.61c.06,0,.11-.05.11-.11v-1.44c0-.06-.05-.11-.11-.11Z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } &.v-excel { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='24' height='30.55' viewBox='0 0 24 30.55'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D.cls-2%7Bfill:%23085b22;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-1' points='7 .54 .54 7 .54 30.02 23.47 30.02 23.47 .54 7 .54'/%3E%3Cpath class='cls-2' d='M23.46,0H7s-.05.01-.07.01c-.02,0-.04,0-.06.01-.09.02-.18.06-.24.13,0,0,0,0,0,0l-3.23,3.23L.16,6.62c-.07.07-.11.15-.13.24,0,.02,0,.04-.01.06,0,.02-.01.05-.01.07v23.02c0,.3.24.54.54.54h22.93c.3,0,.54-.24.54-.54V.54c0-.3-.24-.54-.54-.54ZM22.93,29.48H1.07V7.53h5.93c.3,0,.54-.24.54-.54V1.07h15.4v28.41Z'/%3E%3Cpath class='cls-2' d='M13.98,17.69l2.98-5.93s0-.04,0-.06c-.01-.02-.03-.03-.06-.03h-3.2s-.05.01-.06.04l-1.65,3.48-1.65-3.48s-.03-.04-.06-.04h-3.2s-.04.01-.06.03c-.01.02-.01.04,0,.06l2.97,5.93-3.34,6.33s0,.04,0,.06c.01.02.03.03.06.03h3.2s.05-.01.06-.03l2.03-3.77,2.03,3.77s.03.03.06.03h3.2s.04-.01.06-.03c.01-.02.01-.04,0-.06l-3.36-6.33Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* リンク（外部サイトと同じ SVG） */ &.v-external, &.v-link { width: 22px; background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='20.83' height='21.12' viewBox='0 0 20.83 21.12'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%236f0689;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpath class='cls-1' d='M19.55,11.04h-2c-.11,0-.2.09-.2.2v7.47H2.4V3.77h7.47c.11,0,.2-.09.2-.2V1.57c0-.11-.09-.2-.2-.2H.2c-.11,0-.2.09-.2.2v19.35c0,.11.09.2.2.2h19.35c.11,0,.2-.09.2-.2v-9.67c0-.11-.09-.2-.2-.2Z'/%3E%3Cpath class='cls-1' d='M20.73,0h-6.34c-.06,0-.1.04-.1.1v2c0,.06.04.1.1.1h2.68l-8.27,8.27s-.04.1,0,.14l1.41,1.41s.04.03.07.03.05,0,.07-.03L18.63,3.75v2.68c0,.06.04.1.1.1h2c.06,0,.1-.04.1-.1V.1c0-.06-.04-.1-.1-.1Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } &.v-word { background-image: url("data:image/svg+xml,%3Csvg id='_レイヤー_2' data-name='レイヤー 2' xmlns='http://www.w3.org/2000/svg' width='22' height='28.01' viewBox='0 0 22 28.01'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23082c7c;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cg id='_コンテンツ' data-name='コンテンツ'%3E%3Cg%3E%3Cpolygon class='cls-2' points='6.41 .49 .49 6.41 .49 27.51 21.51 27.51 21.51 .49 6.41 .49'/%3E%3Cpath class='cls-1' d='M21.51,0H6.41s-.04,0-.06.01c-.02,0-.04,0-.06.01-.08.02-.16.06-.22.12L.14,6.07c-.06.06-.1.14-.12.22,0,.02,0,.04-.01.06,0,.02-.01.04-.01.06v21.1c0,.27.22.49.49.49h21.02c.27,0,.49-.22.49-.49V.49c0-.27-.22-.49-.49-.49ZM21.02,27.02H.98V6.9h5.43c.27,0,.49-.22.49-.49V.98h14.11v26.04Z'/%3E%3Cpath class='cls-1' d='M16.93,11.42s-.04-.03-.07-.03h-2.34s-.08.03-.09.08l-.87,6.12-1.45-6.13s-.05-.07-.09-.07h-2.05s-.08.03-.09.07l-1.45,6.13-.87-6.12s-.04-.08-.09-.08h-2.34s-.05.01-.07.03c-.02.02-.02.05-.02.08l1.99,10.56s.05.07.09.07h2.04s.08-.03.09-.07l1.75-6.63,1.75,6.63s.05.07.09.07h2.04s.08-.03.09-.07l1.99-10.56s0-.05-.02-.08Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } /* 長矢印（画像付きテキスト内ボタンでは .unit-imgtxt__btn .unit-icon.v-arrow） */ &.v-arrow { width: 64px; min-width: 64px; height: calc(64px * 9.68 / 62.72); aspect-ratio: auto; background: transparent; position: relative; vertical-align: middle; &::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask-image: var(--unit-arrow-long-mask); mask-image: var(--unit-arrow-long-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } } } @media screen and (max-width: 480px) { .unit-icon { width: 20px; &.v-external, &.v-link { width: 18px; } &.v-arrow { width: 64px; min-width: 64px; height: calc(64px * 9.68 / 62.72); } } } /* v-arrow ホバーアニメーション（l-nav__arrow と同じ slideArw） */ @keyframes slideArw { 0% { opacity: 1; transform: translateX(0); } 49.9% { opacity: 0; transform: translateX(10px); } 50% { opacity: 0; transform: translateX(-10px); } 100% { opacity: 1; transform: translateX(0); } } /* 矢印（--unit-arrow-long-mask）横幅 64px・viewBox 62.72×9.68 の比率 */ .unit-arrowbox { display: inline-block; width: 64px; height: calc(64px * 9.68 / 62.72); vertical-align: middle; background: var(--color-main); transition: 0.2s; position: relative; &::before { content: ""; position: absolute; inset: 0; background-color: #fff; -webkit-mask-image: var(--unit-arrow-long-mask); mask-image: var(--unit-arrow-long-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } } @media screen and (max-width: 480px) { .unit-arrowbox { width: 64px; height: calc(64px * 9.68 / 62.72); } } /* 見出し */ .unit-ttl { &.v-style1 { font-size: clamp(2.1rem, 4.6vw, 2.8rem); color: var(--color-main); margin-bottom: 1em; } &.v-style2 { font-size: clamp(1.8rem, 3.8vw, 2.4rem); padding-bottom: 0.5em; position: relative; margin-bottom: 1em; &::before { content: ""; display: inline-block; width: 5em; border-bottom: 2px solid #ccc; position: absolute; left: 0; bottom: 0; } &::after { content: ""; display: inline-block; width: 2.5em; border-bottom: 2px solid var(--color-main); position: absolute; left: 0; bottom: 0; } } &.v-style3 { font-size: clamp(1.6rem, 3vw, 2rem); color: var(--color-main); margin-bottom: 0.5em; } &.v-style4 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 0.5em; } } /* 学部ごとのカラー */ #page-bungaku { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-bungaku); } } &.v-style2::after { border-color: var(--color-bungaku); } } #page-shinri { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-shinri); } } &.v-style2::after { border-color: var(--color-shinri); } } #page-genbi { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-genbi); } } &.v-style2::after { border-color: var(--color-genbi); } } #page-kasei { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-kasei); } } &.v-style2::after { border-color: var(--color-kasei); } } #page-yakugaku { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-yakugaku); } } &.v-style2::after { border-color: var(--color-yakugaku); } } #page-kango { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-kango); } } &.v-style2::after { border-color: var(--color-kango); } } #page-rikou { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-rikou); } } &.v-style2::after { border-color: var(--color-rikou); } } #page-daigakuin { .unit-ttl { &.v-style1, &.v-style3 { color: var(--color-daigakuin); } } &.v-style2::after { border-color: var(--color-daigakuin); } } /* テキスト */ .unit-txt { &.v-center { text-align: center; } } /* 水平罫線 */ hr { border-color: #ccc; margin-top: 0; margin-bottom: 20px; } .unit-hr { border-color: #ccc; margin-top: 0; margin-bottom: 25px; } /* リスト用ラッパー（.unit-ww-box / .unit-imgtxt と同系の v-*） */ .unit-list-box { box-sizing: border-box; &.v-border { border: 1px solid #ccc; padding: 32px; } &.v-yellow { background: #fffff3; padding: 32px; } &.v-gray { background: #f6f6f8; padding: 32px; } } @media screen and (max-width: 768px) { .unit-list-box { &.v-border, &.v-yellow, &.v-gray { padding: 18px; } } } /* リスト */ .unit-list { margin-left: 1em; } .unit-list li:not(:first-child), .unit-orderlist li:not(:first-child) { margin-top: 10px; } .unit-list li { text-indent: -21px; padding-left: 21px; &::before { content: "・"; } } .unit-orderlist { margin-left: 1.5em; counter-reset: ol; li { text-indent: -18px; padding-left: 18px; counter-increment: ol; } li::before { content: counter(ol) "."; margin-right: 5px; } } @media screen and (max-width: 480px) { .unit-list li, .unit-orderlist li { text-indent: -19px; padding-left: 19px; } .unit-orderlist li { text-indent: -20px; padding-left: 20px; } .unit-ww-content ul li { text-indent: -19px; padding-left: 19px; } .unit-ww-content ol li { text-indent: -20px; padding-left: 20px; } } /* 連番リスト */ .unit-serialnum__ttl { color: var(--color-main); font-size: clamp(1.8rem, 3.8vw, 2.4rem); border-bottom: 2px solid var(--color-main); padding-bottom: 6px; } .unit-serialnum__subttl { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: var(--font-weight-bold); margin-top: 0.8em; } .unit-serialnum__circle { margin-top: 1em; counter-reset: circle; li { counter-increment: circle; padding-left: 26px; text-indent: -26px; } li:not(:first-child) { margin-top: 10px; } li::before { content: counter(circle); font-size: 1.2rem; text-indent: 0; display: inline-block; width: 16px; line-height: 16px; box-shadow: 0 0 0 1px var(--color-text); border-radius: 50%; text-align: center; margin-right: 10px; } } @media screen and (max-width: 480px) { .unit-serialnum__circle { li { padding-left: 21px; text-indent: -21px; } li::before { width: 14px; line-height: 14px; margin-right: 8px; } } } /* 注釈 */ .unit-annotation { font-size: 1.4rem; letter-spacing: 0.08em; margin-top: 1em !important; } .unit-annotation li { padding-left: 20px; text-indent: -20px; } .unit-annotation li::before { content: "※"; } .unit-annotation li:not(:first-child) { margin-top: 8px; } /* リスト・注釈内リンク（.unit-txtlinklist と同じメイン色・ホバー） */ .unit-list a, .unit-orderlist a, .unit-annotation a { color: var(--color-main); text-decoration: none; &:hover { opacity: 0.7; text-decoration: underline; } } /* リスト・注釈内：本文末尾と unit-icon の間隔 */ .unit-list a .unit-icon, .unit-orderlist a .unit-icon, .unit-annotation a .unit-icon { margin-left: 0.35em; vertical-align: middle; } /* ニュース */ .unit-newslist__link { display: grid; grid-template-columns: 100px auto; row-gap: 5px; padding: 0.7em 0; &:hover { color: var(--color-main); } } .unit-newslist__ttl { font-weight: var(--font-weight-normal); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; } @media screen and (max-width: 480px) { .unit-newslist__link { grid-template-columns: 1fr; } } /* 学科ページ ニュース一覧 */ .unit-thumbnews__link { display: grid; grid-template-columns: 30% auto; gap: 28px; } .unit-thumbnews__thumb { aspect-ratio: 3/2; background: #ccc; } .unit-thumbnews__summary { display: flex; flex-direction: column; } .unit-thumbnews__ttl { font-size: 21px; } .unit-thumbnews__date { margin-top: 8px; } .unit-thumbnews__tax { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; } .unit-thumbnews__tax span { display: inline-block; color: #fff; font-size: 14px; line-height: 1; background: var(--color-bungaku); padding: 5px 7px 7px 7px; } /* タブ */ .unit-tab { display: flex; user-select: none; border-bottom: 1px solid #cecece; overflow-x: auto; /* 横スクロールを許可してはみ出しを防止 */ -webkit-overflow-scrolling: touch; li { flex: 1; min-width: 140px; font-weight: var(--font-weight-bold); letter-spacing: 0.1em; text-align: center; padding: 1em; cursor: pointer; &.is-current, &:hover { color: #fff; background: var(--color-main); } &:not(:first-child) { border-left: 1px solid #fff; } } .scroll-hint-icon { top: 0 !important; width: 40px !important; height: 40px !important; left: 50% !important; transform: translateX(-50%) !important; } .scroll-hint-icon::before { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 25px !important; height: 25px !important; } .scroll-hint-icon::after { display: none !important; } .scroll-hint-text { display: none; } } @media screen and (max-width: 480px) { .unit-tab { li { padding: 0.8em; } } } /* ステップ */ .unit-step { counter-reset: step; } .unit-step__item { border: 1px solid var(--color-main); padding: 28px; counter-increment: step; position: relative; list-style: none; margin-left: 0; &:not(:first-child) { margin-top: 52px; } &:not(:first-child)::before { content: ""; display: inline-block; border-top: 20px solid #eee; border-right: 40px solid transparent; border-left: 40px solid transparent; position: absolute; top: 0; left: 50%; transform: translate(-50%, -33px); } } .unit-step__ttl { color: var(--color-main); font-size: clamp(1.8rem, 3.8vw, 2.4rem); display: flex; align-items: center; gap: 20px; &::before { content: "STEP " counter(step); color: #fff; background: var(--color-main); display: inline-block; padding: 3px 12px 6px 12px; flex-shrink: 0; } } .unit-step__subttl { color: var(--color-main); font-size: clamp(1.8rem, 3.8vw, 2.4rem); margin-top: 25px; padding-top: 20px; border-top: 1px solid #cecece; } .unit-step__txt { line-height: 1.45; margin-top: 14px; p+p { margin-top: 1em; } } .unit-step__inner { display: flex; gap: 20px; } .unit-step__img { width: 200px; flex-shrink: 0; img { aspect-ratio: 3/2; object-fit: cover; width: 100%; height: auto; vertical-align: bottom; } /* cover によるトリミングを外し、画像全体を表示 */ &.v-trim-contain img { aspect-ratio: auto; object-fit: contain; } } @media screen and (max-width: 768px) { .unit-step__item { padding: 20px; } .unit-step__ttl { flex-direction: column; align-items: flex-start; gap: 8px; &::before { transform: translateY(0); } } .unit-step__inner { flex-direction: column; } .unit-step__img { width: 100%; } } /* 画像付きコンテンツ（カード） */ .unit-card { display: grid; column-gap: 36px; row-gap: 28px; .unit-ttl--type2 { font-size: clamp(1.8rem, 3.2vw, 2rem); } &.v-col2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } &.v-col3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); .unit-card__img img { aspect-ratio: 1/1; } } &.v-border .unit-card__item { border-color: #cecece; padding: 20px; } &.v-gray .unit-card__item { background: #f6f6f8; padding: 20px; } &.v-row .unit-card__item { grid-template-rows: none; grid-template-columns: 40% auto; gap: 24px; .unit-card__img img { aspect-ratio: 1/1; } } .unit-ttl.v-style2 { font-size: 2rem; } } .unit-card__item { border: 1px solid transparent; display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 12px; position: relative; } .unit-card__item:has(.unit-card__viewmore) { &:hover { opacity: 0.7; } } .unit-card__img { flex-shrink: 0; img { height: 100%; aspect-ratio: 3/2; object-fit: cover; } } .unit-card__content { display: flex; flex-direction: column; /* gap: 12px;*/ } .unit-card__viewmore { align-self: flex-end; display: inline-flex; align-items: center; gap: 16px; box-sizing: border-box; width: fit-content; max-width: min(350px, 100%); min-height: 48px; margin-top: auto; padding: 0 22px 0 26px; background: #fff; border: 1px solid #ddd; border-radius: 9999px; color: #111; font-family: Oswald, sans-serif; font-size: 2.1rem; font-weight: 500; line-height: 1; text-decoration: none; &:hover { color: #111; border-color: #ccc; opacity: 0.92; } &::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; } .unit-link__in { flex: 0 1 auto; min-width: 0; } .unit-arrowbox { flex-shrink: 0; margin-left: 0; transform: none; background: transparent; width: 56px; min-width: 56px; height: calc(56px * 9.68 / 62.72); &::before { background-color: currentColor; } } } @media screen and (max-width: 480px) { .unit-card__item { &.has-border { padding: 18px; } &.is-row { grid-template-columns: 1fr; gap: 18px; .unit-card__img img { aspect-ratio: 3/2; } } } .unit-card { &.v-col3 .unit-card__img img { aspect-ratio: 3/2; } } } /* 画像付きコンテンツ（横並び） */ .unit-imgtxt { &.v-reverse .unit-imgtxt__flex { flex-direction: row-reverse; } &.v-border { border: 1px solid #ccc; padding: 32px; } &.v-yellow { background: #fffff3; padding: 32px; } &.v-gray { background: #f6f6f8; padding: 32px; } } .unit-imgtxt__flex { display: flex; justify-content: space-between; row-gap: 16px; margin-top: 16px; } .unit-imgtxt__img { width: 48%; img { aspect-ratio: 3/2; object-fit: cover; } } .v-trim-contain { .unit-imgtxt__img { img { aspect-ratio: auto; object-fit: contain; } } } .v-trim-contain { .unit-card__img { img { aspect-ratio: auto; object-fit: contain; } } } .unit-imgtxt__content { width: 48%; } .v-size-min { .unit-imgtxt__img { width: 33%; } .unit-imgtxt__content { width: 63%; } } .v-size-xmin { .unit-imgtxt__img { width: 25%; } .unit-imgtxt__content { width: 70%; } } .v-size-large { .unit-imgtxt__img { width: 60%; } .unit-imgtxt__content { width: 56%; } } .v-noimage-true{ .unit-imgtxt__content { width: 100%; } } .unit-imgtxt__content .unit-imgtxt__btn, .unit-step__item .unit-imgtxt__btn { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 15px; } .unit-imgtxt__content .unit-imgtxt__btn:first-of-type, .unit-step__item .unit-imgtxt__btn:first-of-type { margin-top: 32px; } /* 画像付きテキスト内リンクボタン（ピル型・白背景・右は unit-icon v-arrow / v-link / v-pdf 等・短文時は幅フィット） */ .unit-imgtxt__content .unit-imgtxt__btn .unit-link, .unit-step__item .unit-imgtxt__btn .unit-link { display: inline-flex; align-items: center; gap: 20px; width: fit-content; max-width: min(350px, 100%); box-sizing: border-box; padding: 18px 22px 18px 26px; background: #fff; border: 1px solid #ddd; border-radius: 9999px; color: #111; font-size: 1.5rem; font-weight: normal; line-height: 1.5; text-decoration: none; .unit-link__in { flex: 0 1 auto; min-width: 0; } &:hover { color: #111; border-color: #ccc; opacity: 0.92; } } .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon { display: block; flex-shrink: 0; align-self: center; transition: transform 0.2s; } /* 従来の unit-arrowbox も互換のため維持 */ .unit-imgtxt__content .unit-imgtxt__btn .unit-arrowbox, .unit-step__item .unit-imgtxt__btn .unit-arrowbox { display: block; flex-shrink: 0; align-self: center; width: 64px; min-width: 64px; height: calc(64px * 9.68 / 62.72); background: transparent; position: relative; transition: transform 0.2s; &::before { content: ""; position: absolute; inset: 0; background-color: currentColor; -webkit-mask-image: var(--unit-arrow-long-mask); mask-image: var(--unit-arrow-long-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; } } .unit-imgtxt__content .unit-imgtxt__btn .unit-link:hover .unit-arrowbox, .unit-imgtxt__content .unit-imgtxt__btn .unit-link:hover .unit-icon:not(.v-arrow), .unit-step__item .unit-imgtxt__btn .unit-link:hover .unit-arrowbox, .unit-step__item .unit-imgtxt__btn .unit-link:hover .unit-icon:not(.v-arrow) { transform: translateX(3px); } .unit-imgtxt__content .unit-imgtxt__btn .unit-link:hover .unit-icon.v-arrow, .unit-step__item .unit-imgtxt__btn .unit-link:hover .unit-icon.v-arrow { animation: slideArw 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both; } @media screen and (max-width: 768px) { .unit-imgtxt { &.v-reverse .unit-imgtxt__flex { flex-direction: column; } &.v-border { padding: 18px; } &.v-yellow { padding: 18px; } &.v-gray { padding: 18px; } } .unit-imgtxt__flex { flex-direction: column; } .unit-imgtxt__img, .unit-imgtxt__content { width: 100%; } .v-size-min { .unit-imgtxt__img, .unit-imgtxt__content { width: 100%; } } .v-size-xmin { .unit-imgtxt__img, .unit-imgtxt__content { width: 100%; } } .v-size-large { .unit-imgtxt__img, .unit-imgtxt__content { width: 100%; } } .unit-imgtxt__content .unit-imgtxt__btn .unit-link, .unit-step__item .unit-imgtxt__btn .unit-link { max-width: min(350px, 100%); padding: 16px 18px 16px 22px; gap: 16px; font-size: 1.3rem; } } @media screen and (max-width: 480px) { .unit-imgtxt__content .unit-imgtxt__btn .unit-link, .unit-step__item .unit-imgtxt__btn .unit-link { padding: 14px 16px 14px 20px; } /* 本文ボタン内は通常サイズのまま（全体の .unit-icon 縮小を上書き） */ .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon.v-pdf, .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon.v-excel, .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon.v-word, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon.v-pdf, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon.v-excel, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon.v-word { width: 24px; min-width: 24px; height: auto; aspect-ratio: 1/1; } .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon.v-link, .unit-imgtxt__content .unit-imgtxt__btn .unit-link .unit-icon.v-external, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon.v-link, .unit-step__item .unit-imgtxt__btn .unit-link .unit-icon.v-external { width: 22px; min-width: 22px; } } /* 画像のみ */ .unit-simpleimg { &.v-center img { display: block; margin: 0 auto; } &.v-thirty .unit-simpleimg__inner { width: 30%; } &.v-half .unit-simpleimg__inner { width: 50%; } &.v-seventy .unit-simpleimg__inner { width: 70%; } } .unit-simpleimg__inner { min-width: 150px; } @media screen and (max-width: 768px) { .unit-simpleimg { &.v-seventy .unit-simpleimg__inner { width: 100%; } } } /* 画像 */ .unit-img { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; &.v-col3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } } .unit-img__item { display: grid; gap: 14px; img { aspect-ratio: 3/2; object-fit: cover; } &:hover { opacity: 0.7; } } .unit-img .unit-arrowbox { width: 64px; height: calc(64px * 9.68 / 62.72); transform: translateY(2px); margin-left: 5px; background: transparent; &::before { background-color: currentColor; } } /* 画像拡大 */ .unit-zoomimg { max-width: 700px; margin-left: auto; margin-right: auto; position: relative; cursor: pointer; transition: 0.2s; &:hover { opacity: 0.7; .unit-zoomimg__btn { transform: scale(1.1); } } } .unit-zoomimg__btn { position: absolute; bottom: 0; right: 0; width: 70px; height: 70px; padding: 0; border: none; cursor: pointer; background-color: var(--color-main); /* * 拡大アイコン矢印（背景は background-color: var(--color-main)） * */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20121%20121%22%20role%3D%22img%22%20aria-hidden%3D%22true%22%3E%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2223.1%2038.7%2022.1%2026.2%2046.1%2050.3%2050.3%2046.1%2026.2%2022.1%2038.7%2023.1%2038.2%2016.7%2014.7%2014.7%2016.7%2038.2%2023.1%2038.7%22%2F%3E%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2279.1%2025.1%2091.7%2024.1%2067.6%2048.1%2071.7%2052.3%2095.8%2028.2%2094.7%2040.7%20101.1%2040.2%20103.1%2016.7%2079.7%2018.7%2079.1%2025.1%22%2F%3E%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2294.7%2077.8%2095.8%2090.3%2071.7%2066.2%2067.6%2070.4%2091.7%2094.4%2079.1%2093.4%2079.7%2099.8%20103.1%20101.8%20101.1%2078.3%2094.7%2077.8%22%2F%3E%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2243.1%2093.4%2030.6%2094.4%2054.6%2070.4%2050.5%2066.2%2026.4%2090.3%2027.5%2077.8%2021.1%2078.3%2019.1%20101.8%2042.6%2099.8%2043.1%2093.4%22%2F%3E%20%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 72% 72%; transition: 0.2s; &:focus { outline: none; } &:focus-visible { outline: 2px solid var(--color-main); outline-offset: 2px; } } .unit-zoommodal { position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.7); z-index: 100; } .unit-zoommodal__bg { position: absolute; inset: 0; cursor: pointer; } .unit-zoommodal__img { max-width: 90%; max-height: 90%; border-radius: 6px; z-index: 1; } @media screen and (max-width: 480px) { .unit-zoomimg__btn { width: 50px; height: 50px; } } /* カルーセル */ .unit-carousel { position: relative; } .unit-carousel__link { &:hover { opacity: 0.7; } } .unit-carousel__thumb { img { aspect-ratio: 3/2; object-fit: cover; } } .unit-carousel__ttl { font-size: 1.8rem; margin-top: 10px; } /* スライダー直下：前後ナビ＋MORE を横並び */ .unit-carousel__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 16px; margin-top: 20px; } .unit-carousel__footer .swiper-button-prev, .unit-carousel__footer .swiper-button-next { position: static; top: auto; right: auto; bottom: auto; left: auto; margin: 0; flex-shrink: 0; } .unit-carousel__footer .unit-carousel__viewmore { margin-top: 0; margin-right: 0; } .unit-carousel__viewmore { text-align: right; a { display: inline-flex; align-items: center; gap: 16px; width: fit-content; max-width: min(350px, 100%); box-sizing: border-box; min-height: 48px; padding: 0 22px 0 26px; background: #fff; border: 1px solid #ddd; border-radius: 9999px; color: #111; font-family: Oswald, sans-serif; font-size: 2.1rem; font-weight: 500; line-height: 1; text-decoration: none; &:hover { color: #111; border-color: #ccc; opacity: 0.92; } } .unit-link__in { flex: 0 1 auto; min-width: 0; } .unit-arrowbox { flex-shrink: 0; margin-left: 0; transform: none; background: transparent; width: 56px; min-width: 56px; height: calc(56px * 9.68 / 62.72); &::before { background-color: currentColor; } } } /* swiper */ .swiper-wrapper { user-select: none; } .swiper-base, .swiper-banner, .swiper-news, .swiper-message { overflow: hidden; /* はみ出し防止 */ } .swiper-button-prev, .swiper-button-next { --swiper-navigation-size: 48px; width: 48px; height: 48px; margin-top: 0; top: auto; bottom: 0; left: auto; background: #fff; border: 1px solid #ddd; border-radius: 50%; color: var(--color-main); --swiper-navigation-color: var(--color-main); box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; caret-color: transparent; &:focus { outline: none; } &:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } svg { display: none !important; } &::before { content: ""; display: block; width: 15px; height: calc(15px * 9.68 / 12.72); flex-shrink: 0; background-color: currentColor; -webkit-mask-image: var(--unit-swiper-arrow-mask); mask-image: var(--unit-swiper-arrow-mask); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } } .swiper-button-next { right: 0; &::before { transform: scaleX(-1); transform-origin: center; } } .swiper-button-prev { right: 56px; } .swiper-pagination { line-height: 1; } .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px; background: #ccc; opacity: 1; } .swiper-pagination-bullet-active { background: var(--color-main); } .unit-carousel .swiper-base .swiper-pagination { bottom: 8px; left: 0; width: 100%; text-align: center; } @media screen and (max-width: 768px) { /* ドットをスライド下の一段に、MORE・前後ナビはその下の段へ（重なり防止） */ .unit-carousel .swiper-base .swiper-pagination { position: static !important; inset: auto !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100%; margin-top: 0.75em; margin-bottom: 0; padding: 0 8px; box-sizing: border-box; text-align: center; } .unit-carousel__footer { margin-top: 14px; } .unit-carousel__ttl { font-size: 1.6rem; } .unit-carousel__viewmore { a { font-size: 2.1rem; min-height: 48px; padding: 0 18px 0 22px; gap: 14px; line-height: 1; } .unit-arrowbox { width: 52px; min-width: 52px; height: calc(52px * 9.68 / 62.72); } } .swiper-button-prev, .swiper-button-next { --swiper-navigation-size: 48px; width: 48px; height: 48px; &::before { width: 14px; height: calc(14px * 9.68 / 12.72); } } .swiper-button-prev { right: 56px; } } /* 表（.unit-table は自動レイアウトで CMS のセル幅を尊重／.unit-ww-content は JS でラップして横スクロール） */ .unit-table, .unit-ww-content { table { width: 100%; margin-bottom: 10px; } th, td { padding: 6px; border: 1px solid #cecece; vertical-align: middle; /* CMS の width は中身の幅想定。border-box のままだと padding が width に含まれ、文字領域が 8em 未満になりやすい */ box-sizing: content-box; /* reset の * { min-width: 0 } を打ち消し、セルが内容より狭まって日本語が改行されるのを防ぐ */ min-width: auto; } th { color: var(--color-main); background: #eee; font-size: 1.4rem; text-align: center; } td{ font-size: 1.4rem; } th p,td p{ margin-bottom: 0; } } .unit-ww-content td { background-color: #fff; } .unit-table { &.v-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; user-select: none; cursor: grab; &:active { cursor: grabbing; } } &:not(.v-scroll) { table { /* fixed だと列が均等化されやすく、CMS の th/td width が効きにくい */ table-layout: auto; } } } /* .unit-ww-content 内 table は common.js で .unit-ww-content__table-wrap に包む */ .unit-ww-content .unit-ww-content__table-wrap { position: relative; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; &.v-scroll { user-select: none; cursor: grab; &:active { cursor: grabbing; } } table { width: 100%; min-width: 100%; table-layout: auto; } } /* PC：ラッパー・表をコンテナ幅いっぱいに */ @media screen and (min-width: 769px) { .unit-table { width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; } .unit-table table { border-collapse: separate; border-spacing: 0; } .v-width-large .unit-table { width: 100%; } .v-width-midium .unit-table { width: 70%; } .v-width-small .unit-table { width: 50%; } .unit-ww-content .unit-ww-content__table-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; } .unit-ww-content .unit-ww-content__table-wrap table { width: 100%; min-width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0; } } /* CMS 由来の表セル（旧 HTML クラス） */ .align_ce { text-align: center; } @media screen and (max-width: 480px) { .unit-table, .unit-ww-content { th { font-size: 1.4rem; } th, td { padding: 16px; } } } @media screen and (max-width: 768px) { /* SP：セルに max-width を設けて折り返しを強制（横スクロールは維持） */ .unit-ww-content .unit-ww-content__table-wrap { table { width: auto; min-width: 100%; } } .unit-block.v-scroll-none table { min-width: 100%; } .unit-block.v-scroll-small table { min-width: 120vw; } .unit-block.v-scroll-midium table { min-width: 140vw; } .unit-block.v-scroll-large table { min-width: 160vw; } .unit-table.v-scroll, .unit-ww-content .unit-ww-content__table-wrap.v-scroll { th, td { /* max-width: 28vw; min-width: 60vw;*/ /* white-space: normal; overflow-wrap: anywhere; word-break: break-word;*/ padding: 10px 8px; } /* セル内の子要素（ul/li など）も折り返し継承 */ th *, td * { white-space: inherit; overflow-wrap: inherit; word-break: inherit; } /* li のハンギングインデントを解除して狭いセルでも崩れないようにする */ th ul, th ol, td ul, td ol { margin-left: 0; padding-left: 1.2em; } th li, td li { text-indent: 0; padding-left: 0; } } } /* 表キャプション */ .unit-table-caption { color: #999999; } .unit-ww-content.unit-table-caption p, .unit-ww-content.unit-table-caption ul, .unit-ww-content.unit-table-caption ol { margin-bottom: 8px; } /* 表ラッパー（.unit-table を囲み v-border / v-gray を効かせる。横スクロールは内側 .unit-table に付与） */ .unit-table-wrap { box-sizing: border-box; &.unit-block { margin-bottom: 5px; } &.v-border { border: 1px solid #ccc; padding: 32px; } &.v-gray { background: #f6f6f8; padding: 32px; } } @media screen and (max-width: 768px) { .unit-table-wrap { &.v-border, &.v-gray { padding: 18px; } } } /* 詳細リスト */ .unit-detaillist { display: grid; grid-template-columns: 200px auto; border-bottom: 1px solid #ccc; dt, dd { padding: 24px 0; border-top: 1px solid #ccc; } dt { color: var(--color-main); padding-right: 32px; } p { line-height: 1.45; } &.v-grid2 { dd { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } p { margin-top: 0; } } } @media screen and (max-width: 480px) { .unit-detaillist { grid-template-columns: 1fr; dt, dd { padding: 18px 0; } dt { font-size: 1.8rem; } dd { border: none; padding-top: 0; } &.v-grid2 dd { grid-template-columns: 1fr; gap: 1em; } } } /* 開閉パネル */ .unit-accordion { border-bottom: 1px solid #ccc; details { border-top: 1px solid #ccc; &[open] summary::after { transform: rotate(0); } } summary { list-style: none; width: 100%; color: var(--color-main); font-size: 18px; font-weight: var(--font-weight-bold); padding: 20px 30px 20px 0; user-select: none; cursor: pointer; position: relative; &::before, &::after { content: ""; display: inline-block; width: 16px; border-bottom: 2px solid var(--color-text); position: absolute; right: 0; top: 50%; transition: 0.2s; } &::after { transform: rotate(90deg); } &:hover { opacity: 0.7; } &::-webkit-details-marker { display: none; /* Chrome/Safari/Edge 対応 */ } } .unit-accordion__content { margin-bottom: 25px; } } @media screen and (max-width: 480px) { .unit-accordion { summary { font-size: 1.6rem; padding: 16px 30px 16px 0; } } } /* 続きを読む */ .unit-readmore { position: relative; } .unit-readmore.open { .unit-readmore__content { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .unit-readmore__btn { background: #ccc; } .unit-readmore__arrow::after { bottom: 13px; transform: rotate(32deg); } } .unit-readmore__content { display: -webkit-box; line-height: 1.5em; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; line-clamp: 3; transition: max-height 0.2s; margin-bottom: 16px; } .unit-readmore__btn { display: flex; align-items: center; justify-content: space-between; width: 150px; font-weight: var(--font-weight-bold); color: var(--color-bungaku); border: 1px solid var(--color-bungaku); border-radius: 30px; padding: 8px 12px; } .unit-readmore__arrow { display: inline-block; width: 20px; aspect-ratio: 1/1; border-radius: 50%; background: var(--color-bungaku); overflow: hidden; position: relative; &::before { content: ""; display: inline-block; height: 11px; border-left: 1px solid #fff; position: absolute; left: 50%; top: 50%; transform: translateY(-50%); } &::after { content: ""; display: inline-block; width: 6px; border-bottom: 1px solid #fff; position: absolute; left: 50%; bottom: 7px; transform: rotate(-32deg); } } @media screen and (max-width: 480px) {} /* ボタン用ラッパー .unit-btn-box-wrap（.unit-list-box / .unit-ww-box と同系の v-*） */ .unit-btn-box-wrap { box-sizing: border-box; &.v-border { border: 1px solid #ccc; padding: 32px; } &.v-yellow { background: #fffff3; padding: 32px; } &.v-gray { background: #f6f6f8; padding: 32px; } } @media screen and (max-width: 768px) { .unit-btn-box-wrap { &.v-border, &.v-yellow, &.v-gray { padding: 18px; } } } /* ボタン */ .unit-btnbox { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 40px; row-gap: 10px; width: 100%; min-width: 0; box-sizing: border-box; /* columns */ &.v-col1 { flex-direction: column; align-items: center; .unit-link { width: 48%; min-width: 0; max-width: 100%; } &.v-left { align-items: flex-start; } &.v-right { align-items: flex-end; } } /* column-gap 分を除いた幅（48%×2+gap で100%超えしないよう calc） */ &.v-col2 { .unit-link { width: calc((100% - 40px) / 2); max-width: calc((100% - 40px) / 2); min-width: 0; } } &.v-col3 { .unit-link { width: calc((100% - 80px) / 3); max-width: calc((100% - 80px) / 3); min-width: 0; } } &.v-col4 { .unit-link { width: calc((100% - 120px) / 4); max-width: calc((100% - 120px) / 4); min-width: 0; } } &.v-col5 { column-gap: 24px; .unit-link { width: 180px; } } &.v-long .unit-link { width: 48%; } /* styles */ &.v-transparent .unit-link { background: transparent; } &.v-simple .unit-link { border-top: 1px solid #cecece; border-bottom: 1px solid #cecece; } &.v-left { justify-content: left; } &.v-right { justify-content: right; } } .unit-link { width: 220px; /* max-width: 48%; */ display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; font-weight: var(--font-weight-bold); padding: 22px; box-sizing: border-box; text-decoration: none; color: var(--color-text); &:hover { color: var(--color-main); } } .unit-btnbox:not(.v-simple) { .unit-arrowbox { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); } .unit-link { background: #fff; border: 1px solid #d4d0de; border-radius: 9999px; transition: border-color 0.2s ease, color 0.2s ease; &:hover { border-color: var(--color-main); .unit-arrowbox { right: -5px; } .unit-icon.v-arrow { animation: slideArw 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) both; } } } } @media screen and (max-width: 768px) { .unit-btnbox { column-gap: 6%; &.v-col5 { width: 47%; } } .unit-link { /* width: 47%;*/ padding: 20px 14px; } /* SP：v-col1 / v-col2 / v-col4 は1カラム・ボタン幅100% */ .unit-btnbox.v-col1 .unit-link, .unit-btnbox.v-col2 .unit-link, .unit-btnbox.v-col3 .unit-link, .unit-btnbox.v-col4 .unit-link { width: 100%; max-width: 100%; } /* v-col3：2列（column-gap 6% を1本分差し引き） */ /* .unit-btnbox.v-col3 .unit-link { width: calc((100% - 6%) / 2); max-width: calc((100% - 6%) / 2); }*/ } /* テキストリンク */ .unit-txtlinkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, auto)); gap: 20px; color: var(--color-main); line-height: 1.2; a { display: flex; align-items: flex-start; gap: 5px; .unit-icon { margin-top: 0.35em; flex-shrink: 0; } &:hover { opacity: 0.7; text-decoration: underline; } } } /* テキストリンク */ .unit-txtlinklist { display: flex; flex-direction: column; align-items: flex-start; gap: 1em; color: var(--color-main); a { display: flex; align-items: flex-start; gap: 8px; &::before { content: ""; display: inline-block; width: 8px; aspect-ratio: 1/1; margin-top: 0.35em; border-top: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: rotate(45deg); flex-shrink: 0; } &:hover { opacity: 0.7; text-decoration: underline; } } } /* アンカーリンク */ .unit-anchor { color: var(--color-main); display: flex; flex-wrap: wrap; column-gap: 28px; a { display: inline-block; width: fit-content; max-width: 100%; padding: 1em; border-bottom: 1px solid #ccc; box-sizing: border-box; vertical-align: top; &::after { content: ""; display: inline-block; width: 8px; aspect-ratio: 1/1; margin-left: 10px; vertical-align: middle; border-bottom: 2px solid var(--color-main); border-right: 2px solid var(--color-main); transform: translateY(-0.1em) rotate(45deg); transition: transform 0.22s ease; } &:hover::after { transform: translateY(0.06em) rotate(45deg); } } } @media screen and (max-width: 480px) { .unit-anchor a { padding: 0.8em; } } /* 強調ボタン */ .unit-cvbtn { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); column-gap: 32px; row-gap: 16px; font-size: 2rem; } .unit-cvbtn__link { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--color-main); color: #fff; padding: 1em; font-weight: var(--font-weight-bold); .unit-icon--doc { width: 28px; } .unit-icon--pc { width: 35px; } &:hover { opacity: 0.7; } } @media screen and (max-width: 480px) { .unit-cvbtn { font-size: 1.8rem; } .unit-cvbtn__link { .unit-icon--doc { width: 24px; } .unit-icon--pc { width: 30px; } } } /* ボーダー */ .unit-border { width: 100%; border-top: 1px solid #cecece; } /* テキスト */ .unit-txt.v-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 5%; row-gap: 28px; } @media screen and (max-width: 480px) { .unit-txt--grid2 { grid-template-columns: 1fr; } } /* 強調ボックス */ .unit-collout { background: #eee; padding: 40px; &.v-yellow { background: #fffff3; } &.v-gray { background: #f6f6f8; } &.v-border { background: #fff; border: 1px solid #cecece; } } @media screen and (max-width: 480px) { .unit-collout { padding: 18px; } } /* GoogleMap/YouTube */ .unit-embed { iframe { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; } } }