/* すべての要素にborder-boxを適用する */ *, *::before, *::after { box-sizing: border-box; } /* ベーススタイル */ :root { --primary-color: #003366; --secondary-color: #ebeae9; --accent-color: #0066cc; --text-blue-color: #14375b; --background-color: #ebeae9; --text-color: #000000; --border-color: #a1afbd; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 2rem; --spacing-ml: 2.6rem; --spacing-mll: 3rem; --spacing-lg: 4rem; --spacing-ll: 6rem; --spacing-xl: 8rem; } /* にフォントサイズを設定して、remの基準を明確にする */ html { font-size: 16px; /* PC・タブレット向けの基本サイズ */ } /* にはフォントファミリーなどを設定 */ body { font-family: "Noto Sans JP", sans-serif; color: var(--text-color); line-height: 1.6; margin: 0; padding: 0; background-color: #ffffff; -webkit-text-size-adjust: 100%; } /* 1024px以下の画面幅（スマホ向け）でフォントサイズを調整 */ @media (max-width: 1024px) { html { font-size: 14px; /* remの基準を14pxに設定 */ } } /* 明朝体を使用する要素を個別に指定 */ .header__logo, .hero__lead, .hero__title, .section__title, .footer__logo { font-family: "Noto Serif JP", serif; } a { text-decoration: none; color: inherit; } img { max-width: 100%; } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--spacing-sm); } /* ヘッダー */ .header { height: 60px; background-color: var(--background-color); padding: var(--spacing-sm) 0; } @media (min-width: 1024px) { .header { height: 120px; padding: var(--spacing-md) 0; } } .header__inner { display: flex; justify-content: space-between; align-items: center; } .header__logo { font-size: 1.4rem; margin: 0 auto; } @media (min-width: 1024px) { .header__logo { font-size: 1.8rem; font-weight: 600; margin: 0; } } .header__menu { display: none; /* スマホでは非表示 */ list-style: none; margin: 0; padding: 0; } @media (min-width: 1024px) { .header__menu { display: flex; gap: var(--spacing-md); } } /* ヒーローセクション */ .hero { background-size: 150%; background-position: center; /*color: #FFFFFF;*/ padding: var(--spacing-lg) 0; min-height: 300px; display: flex; align-items: center; } .hero--top-page { background-image: url("../img/top-main-background.jpg"); } @media (min-width: 1024px) { .hero { background-size: cover; min-height: 600px; } } .hero__content { background-color: rgba(235, 234, 233, 0.8); padding: var(--spacing-md); margin-left: 0; width: 310px; } @media (min-width: 1024px) { .hero__content { width: 54%; max-width: inherit; } .hero__content.container { padding: 2rem 2rem 2rem 150px; width: 800px; } } @media (max-width: 1023px) { .hero__content.container { min-width: inherit; } } @media (min-width: 768px) { } .hero__lead { font-size: 1.5rem; letter-spacing: 0.1em; margin: 0; transform: scale(0.95, 1); margin-left: -8px; } .hero__title { font-size: 1.5rem; /*color: #FFFFFF;*/ margin-top: 0; margin-bottom: 1rem; font-weight: normal; transform: scale(0.95, 1); margin-left: -8px; } @media (min-width: 1024px) { .hero__lead, .hero__title { font-size: 3.25rem; transform: scale(0.9, 1); margin-left: -35px; transform-origin: 50% 50%; } } .hero__subtitle { font-size: 0.6rem; font-weight: 600; margin-top: 0; } @media (min-width: 1024px) { .hero__subtitle { font-size: 1.09rem; letter-spacing: 0.07em; transform: scale(1, 0.9); font-weight: 400; } } /* 下層ページの背景画像 */ .page-bg { height: 125px; background-size: cover; background-position: center; position: relative; } @media (min-width: 1024px) { .page-bg { height: 180px; } } .page-bg--info { background-image: url("../img/bk-info00.jpg"); } .page-bg--access { background-image: url("../img/bk-access.jpg"); } .page-bg--privacy { background-image: url("../img/bk-privacy.jpg"); } /* コンテンツセクション */ .section { padding: var(--spacing-md) 0; } @media (min-width: 1024px) { .section { padding: var(--spacing-lg) 0; } } .section--gray { background-color: var(--secondary-color); } /* 下層ページのタイトルセクション */ .section--page-title { text-align: center; padding-bottom: var(--spacing-xs); } @media (min-width: 1024px) { .section--page-title { padding-bottom: var(--spacing-md); } } .section--page-title .section__title { font-family: "Noto Serif JP", serif; font-size: 1.7rem; } @media (min-width: 1024px) { .section--page-title .section__title { font-size: 2rem; margin-bottom: 0.5rem; } .section--page-title { margin-bottom: 0; } } .section--page-title .section__subtitle { font-family: "Noto Sans JP", sans-serif; font-size: 0.8rem; color: var(--primary-color); } @media (min-width: 1024px) { .section--page-title .section__subtitle { font-size: 1rem; } } /* 下層ページのイントロダクションセクション */ .content__page-introduction { font-size: 0.8rem; margin: 0; } @media (min-width: 1024px) { .content__page-introduction { text-align: center; font-size: 1.12rem; } } /* 下層ページの背景白のコンテナ */ .content__container-white { background-color: #fff; padding: var(--spacing-md); } @media (min-width: 1024px) { .content__container-white { padding: var(--spacing-lg); } } /* トップ　お知らせセクション */ .list--information dd { margin-left: 0; } .right_wrapper { width: 100%; text-align: right; } .link--arrow-right { margin-right: 0; color: var(--text-blue-color); } .link--arrow-right::after { display: inline-block; content: ""; width: 31px; height: 7px; background-image: url(../img/icon-right-arrow.png); margin-left: 1rem; vertical-align: 5px; } @media (min-width: 768px) { .list--information { display: flex; margin: 0.5em 0em 2em; } .list--information dt { width: 8rem; font-size: 0.8rem; } .list--information dd { width: calc(100% - 8rem); font-size: 0.8rem; } .list--information dd a { font-size: 0.8rem; } .link--information { } } /* トップ　弁護士紹介セクションの背景画像 */ .section--lawyers-bg { background-image: url("../img/top-office-lawyers.jpg"); background-size: cover; background-position: bottom center; position: relative; z-index: 1; padding: var(--spacing-lg) 0; } @media (min-width: 768px) { .section--lawyers-bg { padding: var(--spacing-ll) 0; } } .section--lawyers-bg .content-flex { z-index: 2; /* テキストコンテンツを前面に */ } .lawyer-list { display: flex; flex-direction: column; } .lawyer-item { display: flex; align-items: center; margin-bottom: 1rem; } .role { width: 50px; line-height: 1; font-size: 0.8rem; } .full-name { display: flex; align-items: center; line-height: 1; } .family-name { width: 45px; text-align: left; font-size: 1.2rem; } .given-name { width: 60px; text-align: left; font-size: 1.2rem; } @media (min-width: 768px) { .role { width: 70px; font-size: 1rem; } .family-name { width: 60px; font-size: 1.5rem; } .given-name { width: 80px; font-size: 1.5rem; } } /* 共通の重なりレイアウト */ .content-flex { position: relative; padding: var(--spacing-sm); } /* トップお知らせレイアウト */ .content-flex.content-flex--information { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: var(--spacing-sm) 0; } @media (min-width: 1024px) { .content-flex.content-flex--information { padding: var(--spacing-md) 0 var(--spacing-xs); } .content-flex--information > div:first-of-type { width: 18%; } .content-flex--information > div:last-of-type { width: 82%; } } /*トップ事務所概要レイアウト*/ .content--top-about { position: relative; } .content--top-about .content-image { width: 90%; margin-left: 10%; margin-top: -12rem; max-height: 200px; } .content--top-about .content-text { margin-top: 10rem; margin-left: 0; margin-right: 5%; } @media (min-width: 1025px) { .content--top-about .content-image img.sponly { display: none; } } @media (max-width: 1024px) { .content--top-about .content-image img.pconly { display: none; } } @media (min-width: 1024px) { .content--top-about .content-image { width: 60%; margin-left: 40%; margin-top: 0; max-height: inherit; } .content--top-about .content-text { margin-top: -20rem; margin-left: 10rem; margin-right: 0; } } /*トップ主な取扱い分野レイアウト*/ .content--top-business { position: relative; margin-bottom: 12rem; } .content--top-business .content-image { width: 90%; margin-right: 10%; margin-top: 17rem; max-height: 200px; } .content--top-business .content-text { margin-top: 0; margin-right: 0; margin-left: 5%; } @media (min-width: 1024px) { .content--top-business { margin-bottom: 6rem; } .content--top-business .content-image { width: 60%; margin-right: 40%; margin-top: 0; max-height: inherit; } .content--top-business .content-text { margin-top: -20rem; margin-right: 10rem; margin-left: 45%; } } /* トップ「弁護士紹介」セクションでは、画像は背景画像として扱うため、.content-image は非表示 */ .section--lawyers-bg .content-image { display: none; } .content-text { position: relative; z-index: 2; background-color: #ffffff; padding: var(--spacing-md); } .content-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .content-image img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 0; display: block; } .section__title { font-weight: 400; font-size: 1.5rem; margin-top: 0; margin-bottom: 0.2rem; } @media (min-width: 768px) { .section__title { font-size: 2.2rem; margin-bottom: 0.5rem; } } .section__title.txt__blue { color: var(--text-blue-color); } .section__subtitle { font-family: "Noto Sans JP", sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; color: #666; margin-top: 0; } .section__text { margin-bottom: var(--spacing-md); } @media (min-width: 1024px) { .section__text { line-height: 2.25; letter-spacing: -0.5px; } } /*下層　お知らせ-------------------*/ /* お知らせリストのスタイル */ .section--info { padding: var(--spacing-ml) 0; } .info-list-container { background-color: #ffffff; padding: 50px var(--spacing-sm); } @media (min-width: 1024px) { .info-list-container { padding: var(--spacing-lg); } } .info-list { list-style: none; padding: 0; margin: 0; } .info-list__item { padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-color); } @media (min-width: 1024px) { .info-list__item { padding: var(--spacing-md) 0; } } .info-list__item:first-of-type { border-top: 1px solid var(--border-color); } .info-list__link { display: flex; flex-direction: column; gap: var(--spacing-xs); transition: background-color 0.2s ease; } /*.info-list__link:hover { background-color: #fafafa; }*/ .info-list__date { font-size: 0.9rem; } .info-list__text { font-size: 1rem; color: var(--text-color); } /* PCビューでのレイアウト調整 */ @media (min-width: 1024px) { .info-list__link { flex-direction: row; gap: var(--spacing-md); } } /*下層　お知らせ詳細-------------------*/ .info-detail-container { background-color: #ffffff; padding: var(--spacing-lg) var(--spacing-md); } @media (min-width: 1024px) { .info-detail-container { padding: var(--spacing-lg); } } .info-detail__title { font-family: "Noto Sans JP", sans-serif; font-size: 1.2rem; margin-top: 0; margin-bottom: var(--spacing-md); } .info-detail__text { font-size: 1rem; margin-bottom: var(--spacing-md); } @media (min-width: 1024px) { .info-detail__text { line-height: 2.25; } } .info-detail__date { font-size: 1.2rem; color: var(--text-color); text-align: right; border-top: 1px solid var(--border-color); padding: var(--spacing-xs) 0; } /* 事務所概要 */ .section--office { padding: var(--spacing-ml) 0; } .content--top-about.content--office .content-text { margin-left: 0; margin-right: 5%; width: 95%; min-height: 300px; } @media (min-width: 1024px) { .content--top-about.content--office .content-image { width: 60%; margin-left: 40%; margin-top: 0; max-height: inherit; } .content--top-about.content--office .content-text { margin-left: 0px; width: 55%; padding: var(--spacing-ml); min-height: 350px; } } .page__content__title { font-size: 1.5rem; font-weight: 600; margin: 0 0 var(--spacing-sm) 0; } .list--office-gaiyou { display: flex; border-bottom: 1px solid var(--border-color); padding: var(--spacing-sm) 0; margin: 0; } .list--office-gaiyou:first-of-type { border-top: 1px solid var(--border-color); } .list--office-gaiyou dt { width: 120px; text-indent: 2rem; font-weight: 600; } .list--office-gaiyou dd { width: calc(100% - 120px); margin-left: 0; } @media (min-width: 1025px) { .list--office-gaiyou dt { width: 180px; } .list--office-gaiyou dd { width: calc(100% - 180px); } } @media (min-width: 1025px) { .section--office .content--top-about.content--office .content-image img.sponly { display: none; } } @media (max-width: 1024px) { .section--office .content--top-about.content--office .content-image img.pconly { display: none; } .section--office .content--top-about.content--office .content-image img.sponly { width: 160%; height: 160%; object-fit: cover; object-position: 60% 0%; transform: translateY(-20%); } } /*主な取扱い分野*/ .content--business { position: relative; margin-bottom: var(--spacing-lg); } .content--business .content-text { margin-top: 0; margin-left: -2%; width: 95%; padding: var(--spacing-md) var(--spacing-sm); background-color: rgba(255, 255, 255, 0.8); } @media (min-width: 1024px) { .content--business { margin-bottom: 0; } .content--business .content-text { width: 80%; padding: var(--spacing-mll); } } .content--business .content-image { width: 86%; max-height: 150px; position: absolute; bottom: -8rem; top: auto; left: 10%; } @media (min-width: 1024px) { .content--business .content-image { position: static; width: 80%; margin-top: -15rem; margin-left: 20%; max-height: inherit; } } .page__content__list--nonline { display: flex; flex-wrap: wrap; margin: 0 0 2rem 0; } .page__content__list--nonline:last-of-type { margin: 0; } .page__content__list--nonline dt { width: 100%; font-size: 1.25rem; font-weight: 600; } .page__content__list--nonline dd { margin: 0; width: 100%; } @media (min-width: 1024px) { .page__content__list--nonline dt { width: 170px; } .page__content__list--nonline dd { width: calc(100% - 170px); } } /*弁護士紹介*/ .content__lawyer--item { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--spacing-lg); } .content__lawyer--item:last-of-type { margin-bottom: 0; } .content__lawyer--photo-item { margin-bottom: var(--spacing-md); width: 100%; max-width: 400px; margin: 0 auto var(--spacing-md); } .content__lawyer--text-item { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: var(--spacing-sm) 0; width: 100%; max-width: 400px; margin: 0 auto; } @media (min-width: 1024px) { .content__lawyer--item:nth-child(even) { flex-direction: row-reverse; } .content__lawyer--photo-item { width: 50%; max-width: inherit; margin-bottom: 0; padding-right: 1rem; } .content__lawyer--text-item { width: 50%; max-width: inherit; padding: var(--spacing-md) 0; } .content__lawyer--item:nth-child(even) .content__lawyer--photo-item { text-align: right; padding-left: 1rem; } } .lawyer--text__name { font-size: 1.12rem; font-weight: 600; margin: 0; } .lawyer--text__e_name { font-size: 0.8rem; font-weight: 600; margin-left: var(--spacing-sm); } .lawyer--text__belongto { margin: 0; } @media (min-width: 1024px) { .lawyer--text__name { font-size: 1.8rem; } } .lawyer--heading { font-size: 1.12rem; font-weight: 600; margin: var(--spacing-sm) 0 0; } .lawyer--history-list { display: flex; flex-wrap: wrap; margin: 0; } @media (min-width: 1024px) { .lawyer--heading { margin: var(--spacing-md) 0 0; } .lawyer--history-list { margin: var(--spacing-xs) 0; } } .lawyer--history-list dt { width: 70px; } .lawyer--history-list dd { width: calc(100% - 70px); margin-left: 0; } .lawyer--list { padding: 0; margin: 0; } .lawyer--list li { list-style: none; margin-bottom: 0; } @media (min-width: 1024px) { .lawyer--list { margin: var(--spacing-xs) 0; } .lawyer--list li { margin-bottom: var(--spacing-xs); } } /*アクセス*/ .content__map iframe { width: 100% !important; height: 350px !important; } @media (min-width: 1024px) { .content__map iframe { height: 430px !important; } } .content__map-text { margin: var(--spacing-md) 0; } @media (min-width: 1024px) { .content__map-text { margin: var(--spacing-lg) 0; } } .map-text__address { font-size: 0.8rem; } .map-text__access { font-size: 1rem; font-weight: 600; } @media (min-width: 1024px) { .map-text__address { font-size: 1rem; text-align: center; } .map-text__access { font-size: 1.25rem; text-align: center; } } /*プライバシーポリシー*/ .privacy-policy { list-style-type: none; padding: 0; margin: 0; border-top: 1px solid #ddd; } /* 直接の子要素であるliにのみスタイルを適用 */ .privacy-policy > li { position: relative; padding: 15px 0 15px 40px; border-bottom: 1px solid #ddd; counter-increment: list-item; } /* メインのナンバリング */ .privacy-policy > li::before { content: counter(list-item) "."; position: absolute; top: 15px; left: 10px; font-weight: bold; } /* サブリストのスタイル */ .sub-list { list-style-type: none; padding-left: 10px; margin-top: 10px; counter-reset: sub-item; /* ここでサブリストのカウンターをリセット */ } .sub-list li { font-size: 0.75rem; position: relative; padding-left: 25px; margin-bottom: 5px; border-bottom: none; counter-increment: sub-item; /* ここでサブリストの項目を増加 */ } /* サブリストのナンバリング */ .sub-list li::before { content: "(" counter(sub-item) ")"; position: absolute; left: 0; } /* レスポンシブ対応 */ @media (max-width: 768px) { .privacy-policy > li { padding: 15px 0 15px 25px; } .privacy-policy > li::before { left: 0; } } @media (min-width: 1024px) { .sub-list li { font-size: 1rem; } } /* ボタン */ .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; padding-right: 2.5rem; border: 1px solid var(--primary-color); border-radius: 4px; background-color: var(--primary-color); color: #ffffff; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; position: relative; } .button::after { content: "→"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; transition: transform 0.3s ease; } .button:hover { background-color: var(--accent-color); border-color: var(--accent-color); } .button:hover::after { transform: translateY(-50%) translateX(4px); } .button:active { transform: translateY(1px); } /* PCビューでのレイアウト調整 */ @media (min-width: 1024px) { .content-flex { display: flex; align-items: stretch; padding: 0; } .content-text { flex: 1; box-shadow: none; width: 500px; padding: var(--spacing-lg); } .content-image { flex: 1; position: relative; top: auto; left: auto; width: auto; height: auto; z-index: 1; overflow: hidden; } .content-flex--about, .content-flex--practice-areas { position: relative; } .content-flex--about { padding-left: 50%; } .content-flex--about .content-image { position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 1; } .content-flex--practice-areas { padding-right: 50%; flex-direction: row-reverse; } .content-flex--practice-areas .content-image { position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 1; } .content-flex--about .content-text, .content-flex--practice-areas .content-text { z-index: 2; padding: var(--spacing-lg); background-color: #ffffff; position: relative; } .content-flex--lawyers { /*justify-content: center;*/ align-items: center; /*min-height: 80vh;*/ } .content-flex--lawyers .content-text { background-color: rgba(255, 255, 255, 0.85); padding: var(--spacing-lg); /*text-align: center;*/ max-width: 550px; } .content-flex--lawyers .section__subtitle { color: var(--text-color); } } @media (min-width: 1200px) { .container { padding: 0; } } /* フッター */ .footer { background-color: #ffffff; color: var(--text-color); padding: var(--spacing-md) 0; text-align: center; } .footer__nav { display: none; } .footer__info { margin-bottom: var(--spacing-sm); } .footer__logo { font-weight: 500; font-size: 1.5rem; margin: 0; } .footer-address { font-size: 0.8rem; } .footer-tel { font-size: 0.8rem; } .footer-tel .tel-link { font-size: 0.8rem; } .footer__copyright { font-size: 0.75rem; opacity: 0.7; margin: var(--spacing-md) 0; } @media (min-width: 768px) { .footer { padding: var(--spacing-ll) 0; } .footer__nav { display: block; } .footer__menu { display: flex; justify-content: center; list-style: none; margin: 0 0 var(--spacing-lg) 0; padding: 0; gap: var(--spacing-md); } .footer__menu > li > a { font-size: 0.8rem; } .footer__logo { font-size: 1.8rem; } } .pagetop { display: none; position: fixed; bottom: 10px; right: 30px; z-index: 999; opacity: 0.8; } @media screen and (max-width: 768px) { .pagetop { right: 20px; } .pagetop img { width: 55px; height: 55px; } } @media screen and (max-width: 768px) { .tel-link > a { text-decoration: underline; } .tel-link.txtRed > a { color: #f00; } } /* 流れるテキスト -------------------------------------*/ .slide-in { overflow: hidden; display: inline-block; } .slide-in_inner { display: inline-block; } /*左右のアニメーション*/ .leftAnime { opacity: 0; /*事前に透過0にして消しておく*/ } .slideAnimeLeftRight { animation-name: slideTextX100; animation-duration: 0.8s; animation-fill-mode: forwards; opacity: 0; } @keyframes slideTextX100 { from { transform: translateX(-100%); /*要素を左の枠外に移動*/ opacity: 0; } to { transform: translateX(0); /*要素を元の位置に移動*/ opacity: 1; } } .slideAnimeRightLeft { animation-name: slideTextX-100; animation-duration: 0.8s; animation-fill-mode: forwards; opacity: 0; } @keyframes slideTextX-100 { from { transform: translateX(100%); /*要素を右の枠外に移動*/ opacity: 0; } to { transform: translateX(0); /*要素を元の位置に移動*/ opacity: 1; } } /*左右のアニメーション*/ .rightAnime { opacity: 0; /*事前に透過0にして消しておく*/ } .slideAnimeLeftRight { animation-name: slideTextX100; animation-duration: 0.8s; animation-fill-mode: forwards; opacity: 0; } @keyframes slideTextX100 { from { transform: translateX(-100%); /*要素を左の枠外に移動*/ opacity: 0; } to { transform: translateX(0); /*要素を元の位置に移動*/ opacity: 1; } } .slideAnimeRightLeft { animation-name: slideTextX-100; animation-duration: 0.8s; animation-fill-mode: forwards; opacity: 0; } @keyframes slideTextX-100 { from { transform: translateX(100%); /*要素を右の枠外に移動*/ opacity: 0; } to { transform: translateX(0); /*要素を元の位置に移動*/ opacity: 1; } } /*フェードイン -----------------------------------------------------------*/ /* スクロールをしたら出現する要素にはじめに透過0を指定　*/ .fadeUpTrigger { opacity: 0; } /* 下から */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /* 右から */ .fadeRight { animation-name: fadeRightAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /*スマホメニュー -------------------------------------*/ @media screen and (max-width: 1024px) { #spnavi { display: none; position: absolute; top: 0; width: 100%; background: #fff; left: 0; z-index: 90; padding: 12px 0 30px; } #spnavi > ul { display: block; margin: 0; padding: 1rem; } #spnavi > ul > li { list-style-type: none; margin: 0 auto; text-indent: 10px; padding: 5px 0; } #spnavi > ul > li > a { display: block; padding: 3px 0; font-size: 1rem; text-decoration: none; } #spnavi > ul > li > ul > li > a { display: block; padding: 3px 0 3px 20px; font-size: 1.4rem; text-decoration: none; } #spnavi > ul li a:hover { text-decoration: none; opacity: 0.7; } #spnavi h1 > a > img { width: 150px; height: auto; } /*開閉ボタン*/ #nav_toggle { display: block; width: 27px; height: 27px; position: absolute; top: 15px; right: 20px; z-index: 100; text-align: center; padding: 6px; border-radius: 50%; border: 1px solid #000; } #nav_toggle div { position: relative; } #nav_toggle span { display: block; height: 1px; background: var(--primary-color); position: absolute; width: 100%; left: 0; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } /*.top-page #nav_toggle span{ background: #ea5413; }*/ #nav_toggle span:nth-child(1) { top: 5px; } #nav_toggle span:nth-child(2) { top: 6px; display: none; } #nav_toggle span:nth-child(3) { top: 8px; } #nav_toggle p.togglemenu { background: none; color: #ed6103; font-size: 8px; padding-top: 19px; } /*開閉ボタンopen時*/ .open #nav_toggle span:nth-child(1) { top: 6px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); transform: rotate(135deg); background: var(--primary-color); } .open #nav_toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav_toggle span:nth-child(3) { top: 6px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); transform: rotate(-135deg); background: var(--primary-color); } .header-companylogo_sp { position: absolute; top: 20px; left: 10px; z-index: 99; /*top:-27px; right:-10px;*/ } .spnavi-arrow:before { content: ""; /*何も入れない*/ display: inline-block; /*忘れずに！*/ width: 10px; /*画像の幅*/ height: 10px; /*画像の高さ*/ background-image: url(../img/spnavi-arrow.png); background-size: contain; /*vertical-align: middle;*/ margin-right: 5px; } } /*スマホメニュー終わり ---------------------------------------*/ /*w1024only pconly sponly切り替え ---------------------------------------*/ @media screen and (min-width: 1024px) { .w1024only { display: none; } } @media screen and (max-width: 1024px) { .w1024only { display: block; position: relative; z-index: 2; } } @media screen and (min-width: 769px) { .sponly { display: none; } } @media screen and (max-width: 768px) { .pconly { display: none; } .sponly { display: block; position: relative; } } /*親テーマのtopボタン削除*/ #ast-scroll-top { display: none !important; }