/* ==================================================
+ 仕様
-----------------------------------------------------
+ モバイルファーストのレスポンシブデザイン
- ブレイクポイント：48em（768px相当）のみ
- 48em未満：SPレイアウト
- デザインカンプ：375px（iPhoneSE第2世代相当）
- 最小対応幅：320px（iPhoneSE第1世代相当）
- 48em以上：タブレット・PC共通レイアウト
- デザインカンプ：1440px
- 最大コンテンツ幅：1280px（両サイド余白20pxずつ込み）
- 中間対応：フォントサイズ維持のリキッドレイアウト
- 微調整用ブレイクポイント：
- SPレイアウト：20em（320px）、23.4375em（375px）
- PCレイアウト：67.5em（1080px）、80em（1280px）
- メディアクエリはmin-widthで統一、max-widthは使用禁止。
- フォントサイズ200％まで対応
（横幅320pxでも横スクロールがでないように）
================================================== */
/* ==================================================
+ 変数
-------------------------------------------------- */
:root{
/* 色 */
--color-green-900: #002f00;
--color-green-800: #004d0d;
--color-green-750: #225800;
--color-green-725: #0f6b39;
--color-green-700: #006f3b;
--color-green-650: #066c39;
--color-green-600: #008550;
--color-green-500: #00a560;
--color-green-200: #bfe0d1;
--color-green-100: #d5e9dc;
--color-green-050: #ddf1eb;
--color-green-025: #e7f5f1;
--color-green-010: #e7f7f0;
--color-green-005: #ecf7ed;
--color-red-700: #ae0037;
--color-red-600: #c00041;
--color-red-550: #c73d4c;
--color-red-500: #d23d4e;
--color-red-400: #f08e8e;
--color-red-350: #f6bdb8;
--color-red-300: #f7e0de;
--color-red-200: #f8cbc7;
--color-red-100: #fad9d5;
--color-red-050: #fef3f2;
--color-yellow-500: #ffed61;
--color-yellow-050: #fffdea;
--color-black: #000;
--color-black-800: #222;
--color-black-700: #2d3234;
--color-black-600: #3e4342;
--color-gray-400: #c2c2c2;
--color-white: #fff;
--color-navy-500: #1a56a0;
/* 文字色 */
--color-txt: var(--color-black-700);
/* フォント（通常：400、太字：700） */
--font: "Noto Sans JP", sans-serif;
/* アイコン */
--ico-arw: url('data:image/svg+xml;utf8,');
--ico_leaf_01: url(/cmn/img/ico_leaf_01.png);
--ico_leaf_02: url(/cmn/img/ico_leaf_02.png);
/* 高さ */
--h-header: 8rem;
}
@media (min-width: 48em) {
:root{
--h-header: 16rem;
}
}
/* ==================================================
+ リセット
-------------------------------------------------- */
/* サイズ基準 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* ==================================================
+ 初期設定
-------------------------------------------------- */
html {
/* 1rem = 10相当 */
font-size: 62.5%;
/* スムーススクロール */
scroll-behavior: smooth;
/* ヘッダー高さ */
scroll-padding-top: var(--h-header);
}
body {
margin: 0;
padding: 0;
font-size: 1.6rem;
line-height: 1.75;
font-family: var(--font);
overscroll-behavior: none;
background: var(--color-white);
color: var(--color-txt);
overflow-wrap: anywhere;
word-break: normal;
}
/* フォーカス */
:focus-visible {
outline: 3px solid var(--color-navy-500);
outline-offset: 2px;
border-radius: 2px;
}
:focus {
outline: 3px solid var(--color-navy-500);
outline-offset: 2px;
}
main:focus,
[tabindex="-1"]:focus {
outline: none;
}
/* 画像 */
img{
border: 0;
display: block;
width: 100%;
height: auto;
}
/* 上付き文字 */
sup{
font-size: 0.65em;
}
/* リンク */
a{
color: inherit;
background: inherit;
}
/* 別窓リンク */
a[target="_blank"]::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.3em;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E") no-repeat center center / contain;
background: var(--color-black);
color: var(--color-white);
vertical-align: -0.1em;
}
/* ==================================================
+ 共通エリア
-------------------------------------------------- */
/* スキップリンク
-------------------------------------------------- */
.oSkip {
position: absolute;
left: -999rem;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.oSkip:focus {
position: static;
width: auto;
height: auto;
padding: 0.5em 1em;
background: var(--color-black-800);
color: var(--color-white);
z-index: 9999;
}
/* ページ全体
-------------------------------------------------- */
.oPage {
width: 100%;
padding-top: var(--h-header);
}
/* ヘッダー
-------------------------------------------------- */
.oHeader {
position: fixed;
left: 0;
top: 0;
width: 100%;
min-height: 100dvh;
pointer-events: none;
z-index: 9000;
}
.oHeader.sOpen {
pointer-events: auto;
}
.oHeader_inner {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: var(--color-white);
color: inherit;
z-index: 30;
gap: 1rem 2rem;
pointer-events: auto;
min-height: 8rem;
position: relative;
z-index: 100;
border-bottom: 1px solid var(--color-gray-400);
}
.oHeader_logo_sangyo{
width: 100%;
max-width: 16rem;
}
.oHeader_logo_sangyo > a{
display: block;
width: 100%;
position: relative;
}
.oHeader_logo_sangyo > a::after{
position: absolute;
right: -2.2rem;
bottom: 0.35rem;
width: 1.6rem;
height: 1.6rem;
background: var(--color-black-600);
color: inherit;
}
.oHeader_logo_josei{
margin-top: 0.2rem;
}
.oHeader_logo_josei a{
text-decoration: none;
background-color: transparent;
color: var(--color-black);
font-size: 2rem;
line-height: 1.2;
font-weight: 700;
display: block;
}
.oHeader_links{
display: none;
}
.oHeader_btnMenu {
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
background: var(--color-green-600);
color: inherit;
border: none;
position: relative;
display: grid;
gap: 0.8rem 0;
justify-content: center;
align-content: center;
margin: 0 0 0 auto;
padding: 0;
cursor: pointer;
}
.oHeader_btnMenu_bar {
display: block;
width: 3.2rem;
height: 0.3rem;
border-radius: 0.15rem;
background: var(--color-white);
color: inherit;
transform-origin: center center;
transition:
transform 0.2s ease 0s,
opacity 0.2s ease 0s;
}
.oHeader_btnMenu[aria-expanded="true"] .oHeader_btnMenu_bar:nth-child(1) {
transform: translateY(1.1rem) rotate(45deg);
}
.oHeader_btnMenu[aria-expanded="true"] .oHeader_btnMenu_bar:nth-child(2) {
opacity: 0;
}
.oHeader_btnMenu[aria-expanded="true"] .oHeader_btnMenu_bar:nth-child(3) {
transform: translateY(-1.1rem) rotate(-45deg);
}
.oHeader_menu{
position: fixed;
inset: var(--h-header) 0 0;
visibility: hidden;
z-index: 20;
opacity: 0;
transform: translateY(-2rem);
overflow: auto;
transition:
visibility 0s ease 0.3s,
transform 0.3s ease 0s,
opacity 0.3s ease 0s;
}
.oHeader.sOpen .oHeader_menu{
visibility: visible;
opacity: 1;
transform: translateY(0);
transition:
visibility 0s ease 0s,
transform 0.3s ease 0s,
opacity 0.3s ease 0s;
}
.oHeader_menu > ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 1px 0;
flex-wrap: wrap;
background: var(--color-white);
color: inherit;
}
.oHeader_menu > ul > li{
width: 100%;
}
.oHeader_menu > ul > li > a {
display: block;
padding: 1.4rem 5.6rem 1.5rem 2rem;
text-decoration: none;
background: var(--color-green-600);
color: var(--color-white);
font-weight: 700;
font-size: 2rem;
position: relative;
}
.oHeader_menu > ul > li > a::before,
.oHeader_menu > ul > li > a::after {
content: '';
display: block;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
position: absolute;
right: 2rem;
top: 0;
bottom: 0;
margin: auto 0;
background: var(--color-white);
color: inherit;
}
.oHeader_menu > ul > li > a::after {
background: var(--color-green-600);
color: inherit;
mask: var(--ico-arw) no-repeat center center / calc(9 / 25 * 100%) auto;
}
.oHeader_menu > ul > li > a[target="_blank"] > span::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.3em;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E") no-repeat center center / contain;
background: var(--color-white);
color: var(--color-black);
vertical-align: -0.12em;
}
.oHeader_overlay {
content: '';
position: fixed;
inset: var(--h-header) 0 0;
background: rgba(0,0,0,0.8);
color: inherit;
z-index: 10;
visibility: hidden;
opacity: 0;
transition:
visibility 0s ease 0.3s,
opacity 0.3s ease 0s;
}
.oHeader.sOpen .oHeader_overlay {
visibility: visible;
opacity: 1;
transition:
visibility 0s ease 0s,
opacity 0.3s ease 0s;
}
@media (min-width: 48em) {
.oHeader {
min-height: 1px;
background: var(--color-white);
color: inherit;
pointer-events: auto;
}
.oHeader_inner {
margin: 0 auto;
max-width: 128rem;
align-items: flex-start;
padding: 1.5rem 2rem 1.6rem;
gap: 1rem 2rem;
border-bottom: 0;
}
.oHeader_logo_sangyo{
max-width: 21rem;
}
.oHeader_logo_sangyo > a::after{
right: -2.5rem;
bottom: 0.7rem;
}
.oHeader_logo_josei{
margin-top: 0.8rem;
}
.oHeader_logo_josei a{
text-decoration: none;
background: transparent;
color: var(--color-black);
font-size: 3.2rem;
font-weight: 700;
}
.oHeader_links{
margin: 0.4rem 0 0 auto;
padding: 0;
list-style-type: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 1rem 2.8rem;
}
.oHeader_links > li{
width: auto;
display: block;
}
.oHeader_links > li > a{
display: block;
text-decoration: none;
background-color: inherit;
color: var(--color-black);
font-size: 1.6rem;
font-weight: 400;
text-align: center;
padding-left: 1.7rem;
position: relative;
}
.oHeader_links > li > a::before,
.oHeader_links > li > a::after{
content: '';
display: block;
width: 1.4rem;
height: 1.4rem;
border-radius: 50%;
background: var(--color-green-750);
color: inherit;
position: absolute;
left: 0;
top: 0.8rem;
margin: 0;
}
.oHeader_links > li > a::after{
background: var(--color-white);
color: inherit;
mask: var(--ico-arw) no-repeat center center / calc(5 / 14 * 100%) auto;
}
.oHeader_links > li > a[target="_blank"] > span::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.3em;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E") no-repeat center center / contain;
background: var(--color-black);
color: var(--color-white);
vertical-align: -0.1em;
}
.oHeader_links > li > a > span{
margin-top: 0;
}
.oHeader_btnMenu {
display: none;
}
.oHeader_menu{
visibility: visible;
opacity: 1;
transform: none;
position: relative;
inset: auto;
border-bottom: 1px solid var(--color-gray-400);
border-top: 1px solid var(--color-gray-400);
}
.oHeader_menu > ul {
gap: 1rem 6rem;
justify-content: center;
}
.oHeader_menu > ul > li {
width: auto;
}
.oHeader_menu > ul > li > a {
display: block;
padding: 1.1rem 1.5rem 0.8rem;
background: var(--color-white);
color: var(--color-black);
font-weight: 700;
font-size: 1.8rem;
border-bottom: 0.7rem solid var(--color-white);
}
.oHeader_menu > ul > li > a::before,
.oHeader_menu > ul > li > a::after {
display: none;
}
.oHeader_menu > ul > li > a[aria-current="page"] {
border-bottom-color: var(--color-red-600);
}
.oHeader_overlay {
display: none;
}
}
/* メイン
-------------------------------------------------- */
.oMain{
width: 100%;
}
/* ページの先頭へ
-------------------------------------------------- */
.oGotop{
position: sticky;
width: 4.4rem;
height: 4.4rem;
right: 2rem;
bottom: 2rem;
margin: 0 0 -2.2rem auto;
border-radius: 50%;
margin-top: 9rem;
}
.oGotop > a{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--color-green-600);
color: inherit;
}
.oGotop > a::before{
content: '';
display: block;
width: 100%;
height: 100%;
background: var(--color-white);
color: inherit;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34.9 20.6'%3E%3Cpolyline points='1.5 19.1 18 1.5 33.4 19.1' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center / calc(34 / 60 * 100%) auto;
}
@media (min-width: 48em) {
.oGotop{
width: 6rem;
height: 6rem;
margin-bottom: -3rem;
margin-top: 7.4rem;
}
}
/* フッター
-------------------------------------------------- */
.oFooter {
background: var(--color-green-200);
color: inherit;
width: 100%;
text-align: center;
}
.oFooter_inner{
padding: 3.3rem 2rem 1.8rem;
}
.oFooter_logo{
margin: 0 -1rem;
}
.oFooter_logo > a{
font-size: 1.8rem;
font-weight: 700;
background-color: inherit;
color: var(--color-black);
text-decoration: none;
}
.oFooter_menu{
margin-top: 1.9rem;
}
.oFooter_menu > ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
gap: 1rem 0;
flex-wrap: wrap;
}
.oFooter_menu > ul > li{
width: 100%;
}
.oFooter_menu > ul > li > a{
font-size: 1.6rem;
font-weight: 700;
text-decoration: none;
background-color: inherit;
color: var(--color-black);
}
.oFooter_menu > ul > li > a[aria-current='page']{
background-color: inherit;
color: var(--color-green-750);
}
.oFooter_content{
margin-top: 2.5rem;
border-top: 1px solid var(--color-black-600);
padding-top: 3rem;
}
.oFooter_address{
font-size: 1.6rem;
background-color: inherit;
color: var(--color-black);
font-style: normal;
}
.oFooter_address a{
background-color: transparent;
color: inherit;
text-decoration: none;
}
.oFooter_note{
margin-top: 1.6rem;
font-size: 1.4rem;
line-height: calc(24 / 14);
}
.oFooter_submenu{
margin-top: 1.8rem;
}
.oFooter_submenu > ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.8rem 0;
}
.oFooter_submenu > ul > li{
width: 100%;
}
.oFooter_submenu > ul > li > a{
font-size: 1.4rem;
font-weight: 400;
display: inline-block;
padding-left: 1.7rem;
position: relative;
background-color: inherit;
color: var(--color-black);
text-decoration: none;
}
.oFooter_submenu > ul > li > a::before,
.oFooter_submenu > ul > li > a::after{
content: '';
display: block;
position: absolute;
left: 0;
top: 0.7rem;
width: 1.4rem;
height: 1.4rem;
background: var(--color-green-750);
color: inherit;
border-radius: 50%;
}
.oFooter_submenu > ul > li > a::after{
background: var(--color-white);
color: inherit;
mask: var(--ico-arw) no-repeat center center / calc(5 / 14 * 100%) auto;
}
.oFooter_copyright{
margin-top: 3.2rem;
display: block;
font-size: 1.1rem;
background-color: inherit;
color: var(--color-black);
text-align: center;
}
@media (min-width: 48em) {
.oFooter_inner{
margin: 0 auto;
width: 100%;
max-width: 128rem;
padding: 4.1rem 2rem 3.2rem;
}
.oFooter_logo > a{
font-size: 3.2rem;
}
.oFooter_menu{
margin-top: 4.6rem;
}
.oFooter_menu > ul{
gap: 1rem 7rem;
justify-content: center;
}
.oFooter_menu > ul > li{
width: auto;
}
.oFooter_content{
margin-top: 1.4rem;
padding-top: 3.2rem;
text-align: left;
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
gap: 0 1rem;
}
.oFooter_note{
margin-top: 2.2rem;
grid-column: 1 / -1;
grid-row: 2;
}
.oFooter_submenu{
margin-top: 0;
}
.oFooter_submenu > ul{
gap: 0.8rem 2rem;
justify-content: flex-end;
}
.oFooter_submenu > ul > li{
width: auto;
}
.oFooter_copyright{
margin-top: 2.9rem;
}
}
/* ==================================================
+ 中面パーツ
-------------------------------------------------- */
/* パンくずリスト
-------------------------------------------------- */
.oLocus{
margin: 0;
padding: 0;
}
.oLocus > ol{
margin: 0 auto;
padding: 0.5rem 2rem;
width: 100%;
max-width: 128rem;
list-style-type: none;
}
.oLocus > ol > li{
display: inline;
font-size: 1.4rem;
}
.oLocus > ol > li:nth-child(n+2)::before{
content: '';
display: inline-block;
border-left: 0.8rem solid var(--color-green-700);
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
width: 0;
height: 0;
margin: 0 0.5em;
}
.oLocus > ol > li > a{
text-decoration: none;
background-color: transparent;
color: var(--color-black);
}
/* ページタイトル
-------------------------------------------------- */
.oPt{
margin: 0;
padding: 3rem 2rem 0;
background-color: inherit;
color: var(--color-green-700);
font-size: 2.8rem;
text-align: center;
}
.oPt::after{
margin: 1.3rem auto 0;
content: '';
display: block;
width: 8rem;
max-width: 100%;
height: 0.5rem;
background: var(--color-green-700);
color: inherit;
}
.oPt > small{
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: center;
gap: 0 2rem;
align-items: center;
font-size: 2rem;
font-weight: 700;
background-color: transparent;
color: var(--color-green-600);
}
.oPt > small::before,
.oPt > small::after{
content: '';
display: block;
width: 1rem;
height: 3.1rem;
background: url('data:image/svg+xml;utf8,') no-repeat center center / 100% 100%;
}
.oPt > small::after{
transform: scaleX(-1);
}
.oPt > span{
display: block;
}
.oPt > small + span{
margin-top: 0.3rem;
}
@media (min-width: 48em) {
.oPt{
padding-top: 2.1rem;
font-size: 4rem;
}
.oPt::after{
margin-top: 1.5rem;
width: 10rem;
height: 0.7rem;
}
.oPt > small{
font-size: 2.6rem;
}
.oPt > small::before,
.oPt > small::after{
width: 1.2rem;
height: 3.9rem;
}
.oPt > small + span{
margin-top: -0.6rem;
}
}
/* リード文
-------------------------------------------------- */
.oLead{
margin-top: 2.1rem;
padding: 0 2rem;
}
.oLead > p{
margin: 0;
font-size: 1.8rem;
line-height: calc(34 / 18);
}
@media (min-width: 48em) {
.oLead{
margin-top: 3.5rem;
text-align: center;
}
}
/* セクション（個別調整用）
-------------------------------------------------- */
.oSct{
width: 100%;
}
/* セクションA
-------------------------------------------------- */
.oSctA{
margin: 4rem 0 0;
}
.oSctA + .oSctA{
margin: 8rem 0 0;
}
/* セクションB
-------------------------------------------------- */
.oSctB{
margin: 4rem 0 0;
}
.oSctB + .oSctB{
margin: 6rem 0 0;
}
/* 見出しA
-------------------------------------------------- */
.oHdA{
margin: 0 auto;
padding: 0 2rem;
width: 100%;
max-width: 128rem;
font-size: 2.2rem;
line-height: calc(30 / 22);
background-color: inherit;
color: var(--color-black);
}
.oHdA::after{
margin-top: 1rem;
content: '';
display: block;
width: 100%;
height: 0.6rem;
background: var(--color-green-500);
color: inherit;
}
@media (min-width: 48em) {
.oHdA{
font-size: 3.2rem;
}
.oHdA::after{
margin-top: 1.4rem;
}
}
/* 見出しB
-------------------------------------------------- */
.oHdB{
margin: 0 auto;
padding: 0 2rem;
width: 100%;
max-width: 128rem;
font-size: 1.8rem;
line-height: calc(24 / 18);
background-color: inherit;
color: var(--color-green-700);
}
.oHdB::after{
margin-top: 1rem;
content: '';
display: block;
width: 100%;
height: 0.4rem;
background: var(--color-green-700);
color: inherit;
}
@media (min-width: 48em) {
.oHdB{
font-size: 2.6rem;
}
.oHdB::after{
margin-top: 1.2rem;
}
}
/* テキスト
-------------------------------------------------- */
.oTxt{
margin: 0 auto;
padding: 0 2rem;
width: 100%;
max-width: 128rem;
}
.oHdA + .oTxt,
.oHdB + .oTxt{
margin-top: 1.7rem;
}
.oSctA + .oTxt{
margin-top: 6rem;
}
.oTxt p,
.oTxt ul,
.oTxt ol{
margin: 0;
padding: 0;
}
.oTxt p:nth-child(n+2),
.oTxt ul:nth-child(n+2),
.oTxt ol:nth-child(n+2){
margin-top: 1.5em;
}
.oTxt ul{
list-style-type: none;
display: grid;
gap: 0.5em;
}
.oTxt ul > li{
padding-left: 1em;
position: relative;
}
.oTxt ul > li::before{
position: absolute;
left: 0;
top: 0.7em;
content:'';
width: 0.5em;
height: 0.5em;
border-radius: 50%;
background: var(--color-green-700);
color: inherit;
display: block;
}
.oTxt li > ul{
margin-top: 0.5em;
}
.oTxt li > ul > li::before{
border-radius: 0;
}
.oTxt ol{
list-style-type: none;
display: grid;
gap: 0.5em;
counter-reset: oTxt_ol;
}
.oTxt ol > li{
padding-left: 1.5em;
position: relative;
counter-increment: oTxt_ol;
}
.oTxt ol > li::before{
position: absolute;
left: 0;
top: 0;
content:counter(oTxt_ol) '. ';
background-color: transparent;
color: var(--color-green-700);
display: block;
font-weight: 700;
}
.oTxt li > ol{
margin-top: 0.5em;
}
.oTxt li > ol > li::before{
background-color: transparent;
color: var(--color-green-750);
font-weight: 400;
}
p.oTxt_note{
text-indent: -1em;
padding-left: 1em;
font-size: 1.4rem;
}
@media (min-width: 48em) {
.oHdA + .oTxt,
.oHdB + .oTxt{
margin-top: 2.2rem;
}
}
/* ボタンコンテナ
-------------------------------------------------- */
.oBtns{
margin: 3rem auto 0;
padding: 0 2rem;
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
}
/* ボタンA
-------------------------------------------------- */
.oBtnA{
display: block;
text-decoration: none;
background: var(--color-red-500);
color: var(--color-white);
border-radius: 3rem;
border: 4px solid var(--color-red-500);
font-size: 1.8rem;
font-weight: 700;
text-align: center;
width: 100%;
padding: 1rem 5.6rem 1rem 3.6rem;
position: relative;
}
.oBtnA::before,
.oBtnA::after{
content: '';
display: block;
position: absolute;
right: 2rem;
top: 0;
bottom: 0;
margin: auto 0;
border-radius: 50%;
width: 2.4rem;
height: 2.4rem;
background: var(--color-white);
color: inherit;
}
.oBtnA::after,
a.oBtnA::after{
background: var(--color-red-500);
color: inherit;
mask: var(--ico-arw) no-repeat center center / calc(9 / 24 * 100%) auto;
}
a[target="_blank"] .oBtnA > span::after,
a.oBtnA[target="_blank"] > span::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.3em;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E") no-repeat center center / contain;
background: var(--color-white);
color: inherit;
vertical-align: -0.1em;
}
@media (min-width: 48em) {
.oBtnA{
border-radius: 3rem;
border: 4px solid var(--color-red-500);
font-size: 1.8rem;
font-weight: 700;
}
.oBtns .oBtnA{
max-width: 34rem;
}
}
@media (hover: hover){
.oBtnA:hover,
a:hover .oBtnA,
button:hover .oBtnA{
background: var(--color-white);
color: var(--color-red-500);
}
.oBtnA:hover::before,
a:hover .oBtnA::before,
button:hover .oBtnA::before{
background: var(--color-red-500);
color: var(--color-white);
}
.oBtnA:hover::after,
a:hover .oBtnA::after,
button:hover .oBtnA::after{
background: var(--color-white);
color: var(--color-red-500);
}
a[target="_blank"]:hover .oBtnA > span::after,
a.oBtnA[target="_blank"]:hover > span::after {
background: var(--color-red-500);
color: inherit;
}
}
/* バナーリスト
-------------------------------------------------- */
.oBnrs{
margin: 2rem auto 0;
padding: 0 2rem;
list-style-type: none;
display: flex;
gap: 4rem 4rem;
justify-content: center;
flex-wrap: wrap;
}
.oBnrs a{
text-decoration: none;
background: transparent;
color: var(--color-black);
}
.oBnrs a[target="_blank"]::after{
display: none;
}
.oBnrs_note{
display: block;
text-align: right;
font-size: 1.4rem;
margin-top: 0.8rem;
}
a[target="_blank"] .oBnrs_note::after {
content: '';
display: inline-block;
width: 1em;
height: 1em;
margin-left: 0.3em;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23e3e3e3'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E") no-repeat center center / contain;
background: var(--color-black);
color: var(--color-white);
vertical-align: -0.1em;
}
@media (min-width: 48em) {
.oBnrs{
margin: 3.6rem auto 0;
max-width: 124rem;
width: 100%;
}
.oBnrs > li{
width: 34rem;
}
}
/* ==================================================
+ 上書き用クラス
-------------------------------------------------- */
/* 表示対象
-------------------------------------------------- */
/* PC */
.xPC {
display: none !important;
}
@media (min-width: 48em) {
.xPC {
display: revert !important;
}
}
/* SP */
@media (min-width: 48em) {
.xSP {
display: none !important;
}
}
/* スクリーンリーダー */
.xSR {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ディスプレイ
-------------------------------------------------- */
/* インラインブロック（主に改行調整で使用） */
.xIb{
display: inline-block !important;
}
/* 文字調整
-------------------------------------------------- */
/* 括弧の字詰め */
.xTxt_paren{
margin: 0 -0.5em;
}
/* 句読点の字詰め */
.xTxt_punc{
margin-right: -0.5em;
}
/* 中黒の字詰め */
.xTxt_dot{
margin: 0 -0.5em;
}
/* 文字揃え
-------------------------------------------------- */
.xTa_r{
text-align: right !important;
}
.xTa_c{
text-align: center !important;
}
/* ==================================================
+ 調整
-------------------------------------------------- */
/* 動き軽減設定対応 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}