@charset "UTF-8"; /* * Theme Name:jpi * Pj Name: WEBSITE_RENEWAL2025-6 * Author:The Japan Ship Owners' Mutual Protection & Indemnity Association. All Rights Reserved. * Author URI:https://www.piclub.or.jp * ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500&family=Noto+Sans+JP:wght@300;400;500&display=swap"); /* family * ---------------------------------------------------------- */ /* font family */ /* font size - 1. rem */ /* - 2. px for mixin*/ /* font Weight */ /*--Breakpoint settings--*/ /* color *---------------------------------------------------------- */ /* セクションタイトルフォント */ /* ヘッダー/フッダー/メニュー（既存ページに関連するブロックに関するスタイル） */ /* font */ /* * mobile 向けフォント */ /* * グラデーション */ /* * hover */ /* fullscreen menu */ /* google map link */ /* * 検索カードの子要素の並びを2行→3行に変更する */ /* * 共通clamp計算 (TB/SP) */ /*---Break point---*/ /** * 画像のホバー拡大効果のMixin * - 拡大率 * @param {Number} $scale - 拡大率のデフォルト値 */ /** * 画像のホバー拡大効果のMixin * - アニメーション時間（秒） * @param {Number} $duration - アニメーション時間（秒）のデフォルト値 */ /** * marsfinder（サイト内検索外部サービス） * スタイルハック（既存スタイル無効化） */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ /* *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; }*/ .top2025 { /* Preferred box-sizing value */ /* *, *::before, *::after { box-sizing: border-box; }*/ /* Fix mobile Safari increase font-size on landscape mode */ /* html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; }*/ /* Reapply the pointer cursor for anchor tags */ /* Remove list styles (bullets/numbers) */ /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ /* For images to not be able to exceed their container */ /* removes spacing between cells in tables */ /* Safari - solving issue when using user-select:none on the text input doesn't working */ /* revert the 'white-space' property for textarea elements on Safari */ /* minimum style to allow to style meter element */ /* preformatted text - use only for this feature */ /* reset default text opacity of input placeholder */ /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ /* apply back the draggable feature - exist only in Chromium and Safari */ /* Revert Modal native behavior */ /* Remove details summary webkit styles */ } .top2025, .top2025 :where(:not(html):not(iframe):not(canvas):not(img):not(svg):not(video):not(audio):not(symbol *)) { all: unset; display: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } .top2025 *::before, .top2025 *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .top2025 a, .top2025 button { cursor: revert; } .top2025 ol, .top2025 ul, .top2025 menu, .top2025 summary { list-style: none; } .top2025 ol { counter-reset: revert; } .top2025 img { max-inline-size: 100%; max-block-size: 100%; } .top2025 table { border-collapse: collapse; } .top2025 input, .top2025 textarea { -webkit-user-select: auto; } .top2025 textarea { white-space: revert; } .top2025 meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } .top2025 :where(pre) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } .top2025 ::-webkit-input-placeholder { color: unset; } .top2025 ::-moz-placeholder { color: unset; } .top2025 ::-ms-input-placeholder { color: unset; } .top2025 ::placeholder { color: unset; } .top2025 :where([hidden]) { display: none; } .top2025 :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } .top2025 :where([draggable="true"]) { -webkit-user-drag: element; } .top2025 :where(dialog:modal) { all: revert; -webkit-box-sizing: border-box; box-sizing: border-box; } .top2025 ::-webkit-details-marker { display: none; } .top2025 { /* core.css の打消しを記述 */ font-family: "Noto Sans JP", sans-serif, "Jost", sans-serif; font-weight: 400; } .top2025 .btn, .top2025 .lang-item-en a, .top2025 .lang-item-ja a, .top2025 .lang-item a { height: initial; } .top2025 .btn::after, .top2025 .lang-item-en a::after, .top2025 .lang-item-ja a::after, .top2025 .lang-item a::after { display: none; } /* common parts */ html, body { overscroll-behavior: none; } /*メニュー展開時にメニュー裏の要素をスクロール禁止*/ body.is-open { height: 100%; overflow: hidden; } .ui-menu.ui-autocomplete { z-index: 10000; height: 400px; overflow: auto; font-size: 18px; } .top2025 { /* button-color */ /* fullscreen Menu -search btn */ /* google map link */ /* pill search form 検索入力欄 */ } .top2025 a:focus-visible, .top2025 button:focus-visible, .top2025 input:focus-visible, .top2025 select:focus-visible, .top2025 textarea:focus-visible { outline: 2px solid #000000; outline-offset: 2px; } .top2025 .btn, .top2025 .lang-item-en a, .top2025 .lang-item-ja a, .top2025 .lang-item a { display: inline-block; padding: 0.199rem 0.941rem; color: #ffffff; letter-spacing: 0.08em; text-align: center; border-radius: 20px; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; border: 1px solid transparent; -webkit-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .top2025 .btn--emergency, .top2025 .lang-item a--emergency { background-color: #f76767; border-color: #f76767; } .top2025 .btn--contact, .top2025 .lang-item a--contact { background-color: #0595b6; border-color: #0595b6; } .top2025 .lang-item-en a, .top2025 .lang-item-ja a { background-color: #157bbe; border-color: #157bbe; text-transform: uppercase; } .top2025 .btn-sec-common { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: 1px solid transparent; position: relative; overflow: hidden; z-index: 1; } .top2025 .btn-sec-common > span, .top2025 .btn-sec-common > svg { position: relative; z-index: 2; } .top2025 .btn-sec-common > svg { width: 16px; height: 8px; } .top2025 .btn-sec-common::before { content: ""; position: absolute; top: 0; right: 100%; /* 開始位置 */ width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; -webkit-filter: blur(4px); filter: blur(4px); -webkit-transform: scale(0.9); transform: scale(0.9); z-index: 1; /* テキストより下、ボタン本体より上 */ } .top2025 .btn-sec-common-border-white { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; border: 1px solid #ffffff; position: relative; overflow: hidden; z-index: 1; } .top2025 .btn-sec-common-border-white::before { content: ""; position: absolute; top: 0; right: 100%; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background-image: linear-gradient(to right, #8ac0cf 0%, #0595b6 100%); -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; -webkit-filter: blur(4px); filter: blur(4px); -webkit-transform: scale(0.9); transform: scale(0.9); } .top2025 .btn--kindly-check { height: 6.764rem; padding: 1.764rem; gap: 0.882rem; border-radius: 100px; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.7; letter-spacing: 0.076rem; color: #ffffff; border-color: #ffffff; background-color: transparent; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .top2025 .btn--kindly-check::before { background-image: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background-image: linear-gradient(to right, #8ac0cf 0%, #0595b6 100%); -webkit-transform: translateX(100%) scale(1.2); transform: translateX(100%) scale(1.2); opacity: 0; -webkit-transition: 0.2s opacity ease-out; transition: 0.2s opacity ease-out; } .top2025 .btn--big { height: 4.235rem; padding: 0 1.882rem; gap: 1.176rem; border-radius: 100px; font-size: 1.176rem; font-weight: 400; line-height: 1.8; letter-spacing: 0.094rem; } .top2025 .btn--medium { height: 2.823rem; padding: 0 1.882rem; gap: 1.176rem; border-radius: 100px; font-size: 1rem; font-weight: 400; line-height: 1.7; letter-spacing: 0.08rem; } .top2025 .btn--blue { border-color: #007bb2; color: #007bb2; background-color: transparent; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; -webkit-box-sizing: border-box; box-sizing: border-box; } .top2025 .btn--blue::before { background-image: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background-image: linear-gradient(to right, #8ac0cf 0%, #0595b6 100%); -webkit-transform: translateX(100%) scale(1.2); transform: translateX(100%) scale(1.2); opacity: 0; -webkit-transition: 0.2s opacity ease-out; transition: 0.2s opacity ease-out; } .top2025 .news-tag { font-size: 0.823rem; line-height: 1em; display: inline-block; padding: 0.529rem 1rem; color: #ffffff; letter-spacing: 0.08em; text-align: center; border-radius: 20px; background-color: #f76767; border-color: #f76767; } .top2025 .hd-btn--show-detail { background-color: transparent; color: #ffffff; border: 1px solid #ffffff; border-radius: 9999px; padding: 0.529rem 1.764rem; font-size: 0.941rem; line-height: 1em; letter-spacing: 0.08em; font-weight: 400; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.176rem; } .top2025 .hd-btn--show-detail svg { width: 0.941rem; height: auto; } .top2025 .btn--card-link { padding: 0.117rem 0.941rem; border-radius: 100px; border: none; font-size: 0.705rem; line-height: 1.85; letter-spacing: 0.08em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.588rem; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; /* 疑似要素の基準点 */ overflow: hidden; z-index: 1; /*各要素の重なり順を管理する*/ background-image: -webkit-gradient(linear, right top, left top, from(#157bbe), to(#4eb9da)); background-image: linear-gradient(to left, #157bbe 0%, #4eb9da 100%); color: #ffffff; -webkit-transition: color 0.4s ease-in-out; transition: color 0.4s ease-in-out; } .top2025 .btn--card-link span, .top2025 .btn--card-link svg { position: relative; z-index: 2; } .top2025 .btn--card-link::before { content: ""; position: absolute; inset: 0; background-image: -webkit-gradient(linear, left top, right top, from(#157bbe), to(#4eb9da)); background-image: linear-gradient(to right, #157bbe 0%, #4eb9da 100%); opacity: 0; -webkit-transition: .4s opacity ease-out; transition: .4s opacity ease-out; } .top2025 .search-form__page-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; gap: 0px; padding: 2px 16px; height: 25px; white-space: nowrap; border-radius: 100px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0; color: #ffffff; position: relative; /* 疑似要素の基準点 */ overflow: hidden; z-index: 0; /*各要素の重なり順を管理する*/ -ms-flex-item-align: end; align-self: flex-end; background-image: -webkit-gradient(linear, right top, left top, from(#157bbe), to(#4eb9da)); background-image: linear-gradient(to left, #157bbe 0%, #4eb9da 100%); } .top2025 .search-form__page-link span, .top2025 .search-form__page-link img { position: relative; z-index: 1; } .top2025 .search-form__page-link::before { content: ""; position: absolute; inset: 0; background-image: -webkit-gradient(linear, left top, right top, from(#157bbe), to(#4eb9da)); background-image: linear-gradient(to right, #157bbe 0%, #4eb9da 100%); opacity: 0; -webkit-transition: .4s opacity ease-out; transition: .4s opacity ease-out; } .top2025 .google-map-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.294rem; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .top2025 .google-map-link:hover { opacity: 0.7; } .top2025 .google-map-link span { display: block; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 0.08rem; text-decoration: underline; padding-right: 3px; } .top2025 .site-search-form__gray { position: relative; font-size: 0.705rem; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.056rem; } .top2025 .site-search-form__gray input[type="search"] { width: 100%; height: 1.647rem; border-radius: 100px; background-color: #f5f5f5; color: #333; outline: none; padding: 0.47rem 4.411rem 0.47rem 0.882rem; border: 1px solid #b2b2b2; } .top2025 .site-search-form__gray input[type="search"]::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .site-search-form__gray input[type="search"]::-moz-placeholder { color: #8b8b8b; } .top2025 .site-search-form__gray input[type="search"]::-ms-input-placeholder { color: #8b8b8b; } .top2025 .site-search-form__gray input[type="search"]::placeholder { color: #8b8b8b; } .top2025 .site-search-form__gray button[type="submit"] { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0.294rem 0.588rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 4.058rem; height: 100%; border-radius: 100px; cursor: pointer; background: -webkit-gradient(linear, left top, right top, from(#dfdfdf), to(#b2b2b2)); background: linear-gradient(90deg, #dfdfdf 0%, #b2b2b2 100%); } .top2025 .site-search-form__gray button[type="submit"] svg { width: 17px; height: 17px; stroke: #ffffff; } .top2025 .search-card__body { position: relative; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.7; letter-spacing: 0.08rem; } .top2025 .search-card__body input[type="search"] { width: 100%; height: 1.941rem; border-radius: 100px; background-color: #ffffff; color: #333; padding: 0.352rem 3.529rem 0.352rem 0.941rem; cursor: pointer; border: 1px solid #ffffff; } .top2025 .search-card__body input[type="search"]::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .search-card__body input[type="search"]::-moz-placeholder { color: #8b8b8b; } .top2025 .search-card__body input[type="search"]::-ms-input-placeholder { color: #8b8b8b; } .top2025 .search-card__body input[type="search"]::placeholder { color: #8b8b8b; } .top2025 .search-card__body input[type="search"]:focus { outline: none; } .top2025 .search-card__body button[type="submit"] { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0.294rem 0.588rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 4.941rem; height: 100%; border-radius: 100px; cursor: pointer; overflow: hidden; z-index: 0; background: -webkit-gradient(linear, left top, right top, from(#0595b6), color-stop(37.98%, #8ac0cf), color-stop(96.15%, #84def7)); background: linear-gradient(90deg, #0595b6 0%, #8ac0cf 37.98%, #84def7 96.15%); } .top2025 .search-card__body button[type="submit"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background: linear-gradient(90deg, #8ac0cf 0%, #0595b6 100%); opacity: 1; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; border-radius: 18px; } .top2025 .search-card__body button[type="submit"] svg { width: 17px; height: 17px; stroke: #ffffff; position: relative; z-index: 1; } .top2025 .search-card__body button[type="submit"] img { width: 17px; height: 17px; stroke: #ffffff; position: relative; z-index: 1; } .top2025 .labeled-search-form__blue { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.705rem; font-size: 0.705rem; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.056rem; } .top2025 .labeled-search-form__blue label { font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.08rem; font-size: 0.882rem; color: #005989; } .top2025 .labeled-search-form__blue .input-wrapper { position: relative; } .top2025 .labeled-search-form__blue input[type="search"] { width: 100%; height: 1.647rem; border-radius: 100px; background-color: #f5f5f5; color: #333; outline: none; padding: 0.47rem 4.411rem 0.47rem 0.882rem; } .top2025 .labeled-search-form__blue input[type="search"]::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .labeled-search-form__blue input[type="search"]::-moz-placeholder { color: #8b8b8b; } .top2025 .labeled-search-form__blue input[type="search"]::-ms-input-placeholder { color: #8b8b8b; } .top2025 .labeled-search-form__blue input[type="search"]::placeholder { color: #8b8b8b; } .top2025 .labeled-search-form__blue button[type="submit"] { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0.294rem 0.588rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 4.058rem; height: 100%; border-radius: 100px; cursor: pointer; background: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background: linear-gradient(90deg, #8ac0cf 0%, #0595b6 100%); } .top2025 .labeled-search-form__blue button[type="submit"] svg { width: 17px; height: 17px; stroke: #ffffff; } /* common parts over px This SCSS is used in lower-level screens that rely on the previous version stylesheets. It overrides the base rem settings by applying px values to prevent changes in the root font size when loading shared components. If you change the rem value in _common.scss, please also update the corresponding values in this file accordingly. */ .top2025 { /* fullscreen Menu -search btn */ /* google map link */ } .top2025 .btn, .top2025 .lang-item-en a, .top2025 .lang-item-ja a, .top2025 .lang-item a { padding: 3.4px 16px; } .top2025 .btn--kindly-check { height: 115px; padding: 30px; gap: 15px; font-size: 17px; } .top2025 .btn--big { font-size: 20px; letter-spacing: 1.6px; } .top2025 .btn--medium { height: 48px; padding: 0 32px; gap: 20px; font-size: 17px; } .top2025 .news-tag { font-size: 14px; } .top2025 .hd-btn--show-detail { padding: 6px 24px; font-size: 16px; gap: 20px; } .top2025 .hd-btn--show-detail svg { width: 16px; } .top2025 .btn--card-link { padding: 2px 16px; font-size: 12px; gap: 10px; } .top2025 .search-form__page-link { gap: 10px; padding: 2px 16px; height: 25px; width: 208px; } .top2025 .google-map-link { gap: 5px; } .top2025 .labeled-search-form__blue { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .top2025 .labeled-search-form__blue label { font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.08rem; font-size: 15px; } /* header */ .top2025 { /* ============================================== header Responsive ============================================== */ /* * tablet */ /* * mobile */ } .top2025 .header { height: 0; } .top2025 .header__inner { width: 100%; position: fixed; top: 0; left: 0; background-color: #ffffff; z-index: 998; font-size: 17px; letter-spacing: normal; min-height: 99px; margin-left: auto; margin-right: auto; padding: 20px 24px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: padding 0.3s ease; transition: padding 0.3s ease; } .top2025 .header__logo { -ms-flex-negative: 0; flex-shrink: 0; } .top2025 .header__logo img { width: 311px; height: auto; display: block; } .top2025 .header__logo .header__link { display: block; } .top2025 .header__logo .header__link:focus-visible { outline: 2px solid #000000; outline-offset: 2px; } .top2025 .header__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25.5px; -webkit-transition: gap 0.3s ease; transition: gap 0.3s ease; } .top2025 .header__nav-area { -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .top2025 .header__utility-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; margin-bottom: 5px; } .top2025 .header__utility-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 24px; margin: 0; } .top2025 .header__utility-links a, .top2025 .header__utility-links button { font-size: 14px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; padding: 8px 0; } .top2025 .header__utility-links #js-search-modal-trigger { -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; color: #000000; } .top2025 .header__utility-links #js-search-modal-trigger:hover { opacity: 0.5; text-decoration: none; } .top2025 .header__utility-link--with-icon { gap: 4px; } .top2025 .header__utility-link--with-icon img { width: 18px; height: 18px; } .top2025 .header__utility-button--motion { cursor: pointer; gap: 4px; } .top2025 .header__utility-button--motion .motion-icon-wrapper { width: 17px; height: 17px; display: inline-block; color: #1f2a65; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .top2025 .header__utility-button--motion .motion-icon-wrapper svg circle { fill: currentColor; } .top2025 .header__utility-button--motion > span:last-child { color: #000000; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .top2025 .header__utility-button--motion:hover .motion-icon-wrapper, .top2025 .header__utility-button--motion:hover > span:last-child { color: #adadad; } .top2025 .header__utility-button--motion .icon-play { display: none; } .top2025 .header__utility-button--motion .icon-pause { display: inline; width: 100%; height: 100%; } .top2025 .header__utility-button--motion.is-paused .icon-play { display: inline; width: 100%; height: 100%; } .top2025 .header__utility-button--motion.is-paused .icon-pause { display: none; } .top2025 .header__utility-buttons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; margin: 0; padding: 0; } .top2025 .header__utility-buttons a { font-size: 12px; line-height: 1; font-weight: 500; padding: 5px 16px 6px; } .top2025 .header__actions { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 32px; } .top2025 .header__login { font-size: 16px; line-height: 1.85; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .top2025 .header__login:hover { color: #adadad; text-decoration: none; } .top2025 .header__hamburger-button { width: 56px; height: 56px; border: none; background-color: #1f2a65; border-radius: 9999px; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer !important; position: relative; z-index: 100; -webkit-transition: width 0.3s ease, height 0.3s ease; transition: width 0.3s ease, height 0.3s ease; } .top2025 .header__hamburger-button span { display: block; width: 32px; height: 1px; background-color: #ffffff; margin: 10px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; } .top2025 .header__hamburger-button:hover span { margin: 8px auto; opacity: 0.7; } .top2025 .header__hamburger-button.is-open span { margin: -1px auto; } .top2025 .header__hamburger-button.is-open span:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .top2025 .header__hamburger-button.is-open span:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /* * mypage-modal */ /* PC */ .top2025 .header__login-wrapper { position: relative; } .top2025 .mypage-modal { position: absolute; top: 100%; right: -100px; margin-top: 50px; width: 300px; z-index: 10; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; } .top2025 .mypage-modal.is-active { visibility: visible; opacity: 1; } .top2025 .mypage-modal::before { content: ""; position: absolute; top: -8px; right: 125px; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #ffffff transparent; } .top2025 .mypage-modal__content { background-color: rgba(255, 255, 255, 0.7); border-radius: 20px; overflow: hidden; -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .top2025 .mypage-modal__content-inner { padding: 15px 24px; } .top2025 .mypage-modal__links { border-bottom: 1px solid #a0a0a0; } .top2025 .mypage-modal__links li { margin-bottom: 8px; } .top2025 .mypage-modal__links li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #000000; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 1.12px; } .top2025 .mypage-modal__links li a:hover { opacity: 0.7; } .top2025 .mypage-modal__links li a img { display: inline-block; margin-left: 5px; } .top2025 .mypage-modal__user-id { padding-top: 8px; color: #777777; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 1.12px; } /* fullscreen-menu */ .top2025 { /* ============================================== fullscreen-navigation Responsive ============================================== */ } .top2025 .fullscreen-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow-y: auto; background: transparent; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s, visibility 0.3s; transition: opacity 0.3s, visibility 0.3s; color: #ffffff; /* pc */ /* * right area */ /* * マイページ */ /* pill search form 検索入力欄 */ } .top2025 .fullscreen-nav.is-open { visibility: visible; opacity: 1; background: -webkit-gradient(linear, left bottom, left top, color-stop(65%, #1f2a65), to(#005989)) right/35% 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#edf8fe)) left/65% 100% no-repeat; background: linear-gradient(to top, #1f2a65 65%, #005989) right/35% 100% no-repeat, linear-gradient(#edf8fe) left/65% 100% no-repeat; } .top2025 .fullscreen-nav::after { background: -webkit-gradient(linear, left bottom, left top, color-stop(16.22%, #1f2a65), color-stop(91.93%, #005989)); background: linear-gradient(0deg, #1f2a65 16.22%, #005989 91.93%); z-index: -2; } .top2025 .fullscreen-nav__body { display: grid; grid-template-columns: 65% 1fr; grid-template-rows: auto auto auto auto auto 1fr; z-index: 1; height: 100%; } .top2025 .fullscreen-nav__main { grid-column: 1 / 2; grid-row: 1 / 7; height: 100%; } .top2025 .fullscreen-nav__main ul.fullscreen-nav__list { padding: 40px 10px 42px 8%; color: #000000; height: 100%; } .top2025 .fullscreen-nav__main ul.fullscreen-nav__list a { text-decoration: none; } .top2025 .fullscreen-nav__main .fullscreen-nav__item:not(:last-child) { margin-bottom: 32px; } .top2025 .fullscreen-nav__main .fullscreen-nav__item-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; align-items: center; font-size: 20px; font-style: normal; font-weight: 700; line-height: 1.6; letter-spacing: 1.6px; color: #007bb2; } .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button { display: none; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 75px; padding-top: 15px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu dl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu dt { font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.6; letter-spacing: 1.12px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu dd a { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 1.12px; display: block; display: block; text-decoration: none; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu dd a:hover { color: #adadad; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu li a { text-decoration: none; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 1.12px; display: block; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu li a:hover { color: #adadad; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu[hidden] { height: 0; overflow: hidden; -webkit-transition: height 0.3s ease; transition: height 0.3s ease; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-loss { display: grid; grid-template-columns: auto auto 1fr; gap: 75px; padding-top: 15px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-loss ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-loss li a { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 1.12px; display: block; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-loss li a:hover { color: #adadad; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-link-only { padding-top: 15px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-link-only li a { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.5; letter-spacing: 1.12px; display: block; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-link-only li a:hover { color: #adadad; } .top2025 .fullscreen-nav__header { grid-column: 2 / 3; grid-row: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 63px clamp(10px, 11%, 49px) 46px clamp(10px, 12%, 47px); } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button { position: absolute; top: 34px; right: 34px; -ms-flex-item-align: end; align-self: flex-end; background: none; border: none; padding: 0; cursor: pointer; width: 56px; height: 56px; border: none; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: width 0.3s ease, height 0.3s ease; transition: width 0.3s ease, height 0.3s ease; } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button span { display: block; width: 32px; height: 1px; background-color: #ffffff; margin: 10px auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; opacity: 1; } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button:hover span { margin: 8px auto; opacity: 0.7; } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button.is-open span { margin: -1px auto; } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button.is-open span:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button.is-open span:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .top2025 .fullscreen-nav__header .fullscreen-nav__logo { font-size: 17px; } .top2025 .fullscreen-nav__info { padding: 0 clamp(10px, 12%, 49px) 32px clamp(10px, 11%, 47px); grid-column: 2 / 3; grid-row: 2; font-size: 14px; letter-spacing: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 25px; /* * mf_finder サイト内検索フォーム (fullscreen menu) */ } .top2025 .fullscreen-nav__info span, .top2025 .fullscreen-nav__info address { font-size: 14px; letter-spacing: 5px; font-style: normal; font-weight: 400; line-height: 1.85; } .top2025 .fullscreen-nav__info address { letter-spacing: 1.12px; } .top2025 .fullscreen-nav__info span { display: block; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 1.36px; padding-right: 3px; } .top2025 .fullscreen-nav__info a > span { font-size: 17px; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_form { position: relative; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.85; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_query_input { width: 100%; height: 28px; border-radius: 100px; background-color: #f5f5f5; color: #333; outline: none; padding: 8px 75px 8px 15px; font-size: 12px; border: 1px solid #b2b2b2; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_query_input::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_query_input::-moz-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_query_input::-ms-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_query_input::placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_submit { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 5px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 69px; height: 100%; border-radius: 23px; cursor: pointer; overflow: hidden; z-index: 0; background: -webkit-gradient(linear, left top, right top, color-stop(3.85%, #878787), to(#dfdfdf)); background: linear-gradient(90deg, #878787 3.85%, #dfdfdf 100%); } .top2025 .fullscreen-nav__info .mf_finder_searchBox_submit::before { content: ""; position: absolute; background: -webkit-gradient(linear, left top, right top, from(#dfdfdf), to(#b2b2b2)); background: linear-gradient(90deg, #dfdfdf 0%, #b2b2b2 100%); opacity: 1; -webkit-transition: 0.4s opacity ease-out; transition: 0.4s opacity ease-out; z-index: 0; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_submit span { display: block; width: 17px; height: 17px; background-image: url(../img/fullscreen_site-search-lens.svg); background-repeat: no-repeat; background-position: center; position: relative; z-index: 1; } .top2025 .fullscreen-nav__search-area { grid-column: 2 / 3; grid-row: 3; margin: 0 clamp(10px, 12%, 49px) 32px clamp(10px, 11%, 47px); -ms-flex-item-align: start; align-self: start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-radius: 20px; border: 1px solid #ffffff; background: rgba(255, 255, 255, 0.8); gap: 20px; padding: 20px; } .top2025 .fullscreen-nav__login { grid-column: 2 / 3; grid-row: 4; padding: 32px clamp(10px, 12%, 49px) 32px clamp(10px, 11%, 47px); letter-spacing: 0; font-size: 17px; -ms-flex-item-align: start; align-self: start; /* * open-style */ } .top2025 .fullscreen-nav__login .mypage-accordion { min-width: 200px; display: inline-block; } .top2025 .fullscreen-nav__login .mypage-accordion__btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: none; cursor: pointer; color: #fff; } .top2025 .fullscreen-nav__login .mypage-accordion__btn span { font-size: 16px; display: inline-block; padding-right: 8px; } .top2025 .fullscreen-nav__login .mypage-accordion__btn:hover { color: #adadad; } .top2025 .fullscreen-nav__login .mypage-accordion__btn:hover .mypage-accordion__icon::before, .top2025 .fullscreen-nav__login .mypage-accordion__btn:hover .mypage-accordion__icon::after { background-color: #a0a0a0; } .top2025 .fullscreen-nav__login .mypage-accordion__title { font-style: normal; font-weight: 400; line-height: 1.85; } .top2025 .fullscreen-nav__login .mypage-accordion__icon { position: relative; width: 10px; height: 10px; } .top2025 .fullscreen-nav__login .mypage-accordion__icon:hover::before, .top2025 .fullscreen-nav__login .mypage-accordion__icon:hover::after { background-color: #a0a0a0; } .top2025 .fullscreen-nav__login .mypage-accordion__icon::before, .top2025 .fullscreen-nav__login .mypage-accordion__icon::after { content: ""; position: absolute; background-color: #ffffff; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .top2025 .fullscreen-nav__login .mypage-accordion__icon::before { top: 50%; left: 0; width: 100%; height: 2px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .top2025 .fullscreen-nav__login .mypage-accordion__icon::after { top: 0; left: 50%; width: 2px; height: 100%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .top2025 .fullscreen-nav__login .mypage-accordion .mypage-accordion__greater-thansign { margin-left: 5px; } .top2025 .fullscreen-nav__login .mypage-accordion__greater-thansign--black { display: none; } .top2025 .fullscreen-nav__login .mypage-accordion__greater-thansign--gray { display: none; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover span { color: #adadad; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover .mypage-accordion__greater-thansign--gray { margin-left: 5px; display: block; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover .mypage-accordion__greater-thansign { display: none; } .top2025 .fullscreen-nav__login .mypage-accordion__content { grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.4s ease-in-out; transition: grid-template-rows 0.4s ease-in-out; transition: grid-template-rows 0.4s ease-in-out, -ms-grid-rows 0.4s ease-in-out; } .top2025 .fullscreen-nav__login .mypage-accordion__content:not([hidden]) { display: grid; } .top2025 .fullscreen-nav__login .mypage-accordion__content > div { overflow: hidden; } .top2025 .fullscreen-nav__login .mypage-accordion__links { padding: 15px 0 0 0; } .top2025 .fullscreen-nav__login .mypage-accordion__links li { margin-bottom: 5px; margin-left: 30px; padding-right: 30px; } .top2025 .fullscreen-nav__login .mypage-accordion__links li:last-child { padding-bottom: 16px; border-bottom: 1px solid #ffffff; } .top2025 .fullscreen-nav__login .mypage-accordion__links li a { text-decoration: none; } .top2025 .fullscreen-nav__login .mypage-accordion__links li a:hover { color: #adadad; } .top2025 .fullscreen-nav__login .mypage-accordion__links a { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; } .top2025 .fullscreen-nav__login .mypage-accordion__user-id { color: #ffffff; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; padding-left: 32px; } .top2025 .fullscreen-nav__login .mypage-accordion #mypage-content > ul > li > a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top2025 .fullscreen-nav__login .mypage-accordion #mypage-content > ul > li > a span { padding-right: 8px; } .top2025 .fullscreen-nav__login .mypage-accordion.is-open .mypage-accordion__icon::after { -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } .top2025 .fullscreen-nav__login .mypage-accordion.is-open .mypage-accordion__content { grid-template-rows: 1fr; } .top2025 .fullscreen-nav__actions { grid-column: 2 / 3; grid-row: 5; padding: 0 clamp(10px, 12%, 49px) clamp(10px, 32px, 32px) clamp(10px, 11%, 47px); -ms-flex-item-align: start; align-self: start; } .top2025 .fullscreen-nav__actions-btns { white-space: nowrap; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1px, 12%, 14.5px); } .top2025 .fullscreen-nav__actions-btns li { display: inline-block; list-style-type: none; } .top2025 .fullscreen-nav__actions-btns li a { display: block; font-size: 12px; line-height: 1.4; } .top2025 .fullscreen-nav__footer { grid-column: 2 / 3; grid-row: 6; padding: 0 clamp(10px, 11%, 49px) 0 clamp(10px, 12%, 47px); -ms-flex-item-align: start; align-self: start; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .top2025 .fullscreen-nav__footer .footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; padding-bottom: 25px; } .top2025 .fullscreen-nav__footer .footer-links a { text-decoration: none; } .top2025 .fullscreen-nav__footer .footer-links .footer-links__row { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; font-size: 14px; } .top2025 .fullscreen-nav__footer .footer-links .footer-links__row a { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.08rem; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 1px; } .top2025 .fullscreen-nav__footer .footer-links .footer-links__row a:hover { color: #adadad; } .top2025 .fullscreen-nav__footer .member-logos { border-top: 1px solid #ffffff; padding-top: 25px; margin-bottom: 170px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .top2025 .fullscreen-nav__footer .member-logos span { font-size: 15px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 1.2px; } .top2025 .fullscreen-nav__footer .member-logos div { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .top2025 .fullscreen-nav__footer .member-logos div img { max-height: 66px; width: auto; } .top2025 .fullscreen-nav__labeled-search-form__blue { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.96px; } .top2025 .fullscreen-nav__labeled-search-form__blue a { max-width: 200px; width: 100%; text-decoration: none; gap: 4px; } .top2025 .fullscreen-nav__labeled-search-form__blue label { font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 2px; font-size: 15px; color: #005989; } .top2025 .fullscreen-nav__labeled-search-form__blue .input-wrapper { position: relative; } .top2025 .fullscreen-nav__labeled-search-form__blue input[type="search"] { width: 100%; height: 28px; border: none; border-radius: 100px; background-color: #f5f5f5; color: #333; outline: none; padding-left: 17.69px; font-size: 12px; } .top2025 .fullscreen-nav__labeled-search-form__blue input[type="search"]::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__labeled-search-form__blue input[type="search"]::-moz-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__labeled-search-form__blue input[type="search"]::-ms-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__labeled-search-form__blue input[type="search"]::placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__labeled-search-form__blue button[type="submit"] { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 0.294rem 0.588rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 4.058rem; height: 100%; border-radius: 100px; cursor: pointer; position: absolute; top: 50%; right: 0; transform: translateY(-50%); padding: 5px 10px; display: flex; align-items: center; justify-content: center; width: 69px; height: 100%; border-radius: 18px; cursor: pointer; overflow: hidden; z-index: 0; background: -webkit-gradient(linear, left top, right top, from(#0595b6), color-stop(37.98%, #8ac0cf), color-stop(96.15%, #84def7)); background: linear-gradient(90deg, #0595b6 0%, #8ac0cf 37.98%, #84def7 96.15%); } .top2025 .fullscreen-nav__labeled-search-form__blue button[type="submit"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background: linear-gradient(90deg, #8ac0cf 0%, #0595b6 100%); opacity: 1; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; border-radius: 18px; } .top2025 .fullscreen-nav__labeled-search-form__blue button[type="submit"]:hover::before { opacity: 0; } .top2025 .fullscreen-nav__labeled-search-form__blue button[type="submit"] svg { width: 17px; height: 17px; stroke: #ffffff; position: relative; z-index: 1; } .top2025 .fullscreen-nav__labeled-search-form__blue button[type="submit"] img { width: 17px; height: 17px; stroke: #ffffff; position: relative; z-index: 1; } .top2025 .fullscreen-nav__site-search-form__gray { position: relative; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.85; } .top2025 .fullscreen-nav__site-search-form__gray input[type="search"] { width: 100%; height: 28px; border-radius: 100px; background-color: #f5f5f5; color: #333; outline: none; padding: 8px 75px 8px 15px; font-size: 12px; border: 1px solid #b2b2b2; } .top2025 .fullscreen-nav__site-search-form__gray input[type="search"]::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__site-search-form__gray input[type="search"]::-moz-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__site-search-form__gray input[type="search"]::-ms-input-placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__site-search-form__gray input[type="search"]::placeholder { color: #8b8b8b; } .top2025 .fullscreen-nav__site-search-form__gray button[type="submit"] { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); padding: 5px 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 69px; height: 100%; border-radius: 100px; cursor: pointer; overflow: hidden; z-index: 0; background: -webkit-gradient(linear, left top, right top, color-stop(3.85%, #878787), to(#dfdfdf)); background: linear-gradient(90deg, #878787 3.85%, #dfdfdf 100%); } .top2025 .fullscreen-nav__site-search-form__gray button[type="submit"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: -webkit-gradient(linear, left top, right top, from(#dfdfdf), to(#b2b2b2)); background: linear-gradient(90deg, #dfdfdf 0%, #b2b2b2 100%); opacity: 1; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; } .top2025 .fullscreen-nav__site-search-form__gray button[type="submit"]:hover::before { opacity: 0; } .top2025 .fullscreen-nav__site-search-form__gray button[type="submit"] img { position: relative; z-index: 1; } /* 　旧来のドロップダウンメニューを移植する */ body::before { content: ""; display: block; position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, 0); -webkit-transition: all 0.3s ease-in 0.7s; transition: all 0.3s ease-in 0.7s; z-index: 997; color: #000000; } body.cover::before, body.fixed::before { background: rgba(0, 0, 0, 0.3); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } body:not(.cover):not(.fixed)::before { visibility: hidden; } .top2025 .header__primary-nav { font-size: 15px; margin-bottom: -8px; } .top2025 .header__primary-nav > ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; list-style: none; padding: 0; margin: 0; -webkit-transition: gap 0.3s ease; transition: gap 0.3s ease; } .top2025 .header__primary-nav > ul > li > a { position: relative; } @-webkit-keyframes border-out-in { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 60% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 60.01% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @keyframes border-out-in { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 60% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 60.01% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } .top2025 .header__primary-nav > ul > li > a::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: currentColor; -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; visibility: hidden; } .top2025 .header__primary-nav > ul > li > a:hover { text-decoration: none; } .top2025 .header__primary-nav > ul > li > a:hover::after { visibility: visible; -webkit-animation: border-out-in 0.7s ease-in-out forwards; animation: border-out-in 0.7s ease-in-out forwards; } .top2025 .header__primary-nav > ul > li.openMenu .megaMenu { visibility: hidden; -webkit-transition: visibility 0.7s ease; transition: visibility 0.7s ease; color: #333; } .top2025 .header__primary-nav > ul > li.openMenu .megaMenu__wrapper { overflow: hidden; -webkit-transition: max-height 0.5s ease-in 0.2s, opacity 0.2s ease-in 0.5s; transition: max-height 0.5s ease-in 0.2s, opacity 0.2s ease-in 0.5s; max-height: 0vh; opacity: 0; } .top2025 .header__primary-nav > ul > li.openMenu:hover:not(.hover--cancel) .megaMenu { visibility: visible; } .top2025 .header__primary-nav > ul > li.openMenu:hover:not(.hover--cancel) .megaMenu__wrapper { -webkit-transition: max-height 0.5s ease-out 0.5s, opacity 0.2s ease-out 0.5s; transition: max-height 0.5s ease-out 0.5s, opacity 0.2s ease-out 0.5s; max-height: 100vh; opacity: 1; } .top2025 .header__primary-nav > ul .openMenu .megaMenu { position: absolute; left: 0; top: 100%; width: 100%; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__img { padding: 50px 40px; background-color: #fff; min-width: 230px; width: 21%; max-width: 380px; text-align: center; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__img img { display: block; margin: 0 auto 20px; max-width: 100%; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__inner { background-color: rgba(198, 240, 255, 0.95); padding: 50px 30px; max-width: calc(100% - 230px); width: 79%; min-width: calc(100% - 380px); } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list { display: -webkit-box; display: -ms-flexbox; display: flex; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__item > li:last-of-type { margin-bottom: 0; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block:not(:last-of-type) { margin-right: 60px; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block > ul { margin-top: 0; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block > h4 + ul { margin-top: 30px; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block:not(:first-of-type) > ul > li { border-left: solid 1px #000000; padding-left: 10px; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block > ul > li { line-height: 1; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block > ul > li:not(:first-child) { padding-top: 20px; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__list__block > ul > li a:hover { font-weight: bold; color: #1f2a65; text-decoration: none; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__title--main { font-size: 26px; font-weight: bold; margin-bottom: 30px; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__title--main a { color: #000000 !important; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__title--main a:hover { text-decoration: underline !important; } .top2025 .header__primary-nav > ul .openMenu .megaMenu__title--sub { font-size: 22px; line-height: 30px; font-weight: bold; } .top2025 .header__primary-nav > ul > li#header__nav__menu--jpi .megaMenu__list__block:last-child ul { margin-top: 60px; } .top2025 .header__primary-nav > ul > li#header__nav__menu--insurance .megaMenu__list__block:last-child ul > li:last-child, .top2025 .header__primary-nav > ul li#header__nav__menu--jpi .megaMenu__list__block:last-child ul > li:last-child { margin-top: 20px; padding-top: 0; } /* current design */ #home .header__primary-nav:not(:hover) #header__nav__menu--home > a, #home .header__primary-nav:not(:hover) #header__nav__menu--home > span, #news .header__primary-nav:not(:hover) #header__nav__menu--news > a, #news .header__primary-nav:not(:hover) #header__nav__menu--news > span, #losspre .header__primary-nav:not(:hover) #header__nav__menu--losspre > a, #losspre .header__primary-nav:not(:hover) #header__nav__menu--losspre > span, #insurance .header__primary-nav:not(:hover) #header__nav__menu--insurance > a, #insurance .header__primary-nav:not(:hover) #header__nav__menu--insurance > span, #jpi .header__primary-nav:not(:hover) #header__nav__menu--jpi > a, #jpi .header__primary-nav:not(:hover) #header__nav__menu--jpi > span { position: relative; cursor: default; } #home .header__primary-nav:not(:hover) #header__nav__menu--home > a::after, #home .header__primary-nav:not(:hover) #header__nav__menu--home > span::after, #news .header__primary-nav:not(:hover) #header__nav__menu--news > a::after, #news .header__primary-nav:not(:hover) #header__nav__menu--news > span::after, #losspre .header__primary-nav:not(:hover) #header__nav__menu--losspre > a::after, #losspre .header__primary-nav:not(:hover) #header__nav__menu--losspre > span::after, #insurance .header__primary-nav:not(:hover) #header__nav__menu--insurance > a::after, #insurance .header__primary-nav:not(:hover) #header__nav__menu--insurance > span::after, #jpi .header__primary-nav:not(:hover) #header__nav__menu--jpi > a::after, #jpi .header__primary-nav:not(:hover) #header__nav__menu--jpi > span::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: currentColor; visibility: visible; } .header__primary-nav a.current, .header__primary-nav span.current { font-weight: bold; color: #1f2a65 !important; } .megaMenu__list .megaMenu__title--sub a:hover { color: #1f2a65; font-weight: bold; text-decoration: none; } /* footer */ .top2025 { /* grid area assignment */ /* parts styling */ /* ページトップへ戻るボタン */ /* ============================================== Footer Responsive (SP) ============================================== */ } .top2025 .site-footer { background-color: #ffffff; padding: 75px 0; position: relative; font-size: 17px; } .top2025 .site-footer__inner { width: 80vw; max-width: 1548px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 40px clamp(56px, calc(-370.328px + 40.38vw), 200px); grid-template-areas: "info nav" "member bottom"; } .top2025 .site-footer__inner .site-footer__google-map-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; } .top2025 .site-footer__inner .site-footer__google-map-link span { display: block; text-decoration: underline; padding-right: 3px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 17px; letter-spacing: 1.36px; line-height: 28.9px; } .top2025 .site-footer__inner .site-footer__google-map-link span svg:first-of-type { width: 14px; height: 18px; } .top2025 .site-footer__inner .site-footer__google-map-link span svg:last-of-type { width: 12px; height: 10px; } .top2025 .site-footer__inner .site-footer__google-map-link span:hover { text-decoration: underline; } .top2025 .site-footer__inner .site-footer__google-map-link > svg:nth-child(1) > path { d: path("M 7 0 C 10.675 0 14 2.8175 14 7.175 C 14 10.08 11.6637 13.5187 7 17.5 C 2.33625 13.5187 0 10.08 0 7.175 C 0 2.8175 3.325 0 7 0 Z"); fill: black; } .top2025 .site-footer__inner .site-footer__google-map-link > svg:nth-child(1) > circle { cx: 7; cy: 7; r: 3.5; fill: white; } .top2025 .site-footer__inner .site-footer__google-map-link > svg:nth-child(3) > rect { x: 3; y: 1; width: 8px; height: 6px; stroke: currentcolor; stroke-linejoin: round; } .top2025 .site-footer__inner .site-footer__google-map-link > svg:nth-child(3) > path { d: path("M 1 2.57227 V 8.99957 H 9.57103"); stroke: currentcolor; stroke-linejoin: round; } .top2025 .site-footer__info { grid-area: info; } .top2025 .site-footer__nav { grid-area: nav; } .top2025 .site-footer__members { grid-area: member; -ms-flex-item-align: end; align-self: end; border-top: 1px solid rgba(139, 139, 139, 0.5); padding-top: 25px; } .top2025 .site-footer__bottom { grid-area: bottom; -ms-flex-item-align: end; align-self: end; } .top2025 .site-footer__info { display: grid; grid-template-columns: auto; gap: 20px; grid-template-areas: "logo" "address" "map-link"; } .top2025 .site-footer__logo { grid-area: logo; } .top2025 .site-footer__logo img { max-width: 100%; height: auto; aspect-ratio: 13/2; display: block; } .top2025 .site-footer__address { padding-top: 15px; } .top2025 .site-footer__address p { font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 1.36px; } .top2025 .site-footer__address address { margin-top: 28px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 1.6; letter-spacing: 1.36px; } .top2025 .site-footer__nav ul { padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 8px; } .top2025 .site-footer__nav ul a { color: #000000; font-size: 15px; line-height: 26px !important; font-style: normal; font-weight: 400; line-height: normal; letter-spacing: normal; } .top2025 .site-footer__nav ul a:hover { text-decoration: underline; } .top2025 .site-footer__title { font-size: 15px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 1.2px; } .top2025 .site-footer__members-logo { padding-top: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } .top2025 .site-footer__members-logo img { max-height: 66px; } .top2025 .site-footer__bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 40px; font-size: 12px; font-style: normal; font-weight: 400; line-height: 1.85; letter-spacing: 0.96px; } .top2025 .scroll-to-top { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background-color: #1f2a65; color: #ffffff; border: none; border-radius: 50%; cursor: pointer !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; z-index: 997; } .top2025 .scroll-to-top span { font-size: 15px; } .top2025 .scroll-to-top svg { width: 14px; height: auto; } .top2025 .scroll-to-top span, .top2025 .scroll-to-top svg { position: relative; top: 2px; } .top2025 .scroll-to-top:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); } /* サイト内検索 */ .top2025 { /** * marsfinder用のスタイル * css/mf-search.css (build: 3/7/2025, 5:31:55 AM) * http://www.marsflag.com/ **/ } .top2025 .search-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.3s ease, visibility 0.3s ease; transition: opacity 0.3s ease, visibility 0.3s ease; } .top2025 .search-modal.is-open { visibility: visible; opacity: 1; } .top2025 .search-modal__overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; } .top2025 .search-modal__content { position: absolute; top: 20px; right: 100px; z-index: 1; width: 100%; max-width: 530px; padding: 18px 15px 18px 18px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.75); -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .top2025 .search-modal__form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .top2025 .mf_finder_searchBox { margin: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; } .top2025 .mf_finder_searchBox_form { position: relative; width: 100%; font-size: 17px; font-style: normal; font-weight: 400; line-height: 1.7; letter-spacing: 1.36px; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input { height: 33px; width: 100%; border-radius: 100px; background-color: #ffffff; color: #333; font-size: 17px; padding: 6px 60px 6px 16px; cursor: pointer; border: 1px solid #ffffff; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input::-webkit-input-placeholder { color: #8b8b8b; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input::-moz-placeholder { color: #8b8b8b; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input::-ms-input-placeholder { color: #8b8b8b; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input::placeholder { color: #8b8b8b; } .top2025 .mf_finder_searchBox_form .mf_finder_searchBox_query_input:focus { outline: none; } .top2025 .mf_finder_searchBox_items { padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top2025 .mf_finder_searchBox_doctype { position: static; } .top2025 .mf_finder_searchBox_query_input { min-height: 0; } .top2025 .mf_finder_searchBox_submit { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 84px; height: 100%; border-radius: 100px; cursor: pointer; overflow: hidden; z-index: 0; background: -webkit-gradient(linear, left top, right top, from(#0595b6), color-stop(37.98%, #8ac0cf), color-stop(96.15%, #84def7)); background: linear-gradient(90deg, #0595b6 0%, #8ac0cf 37.98%, #84def7 96.15%); color: #ffffff; padding: 0; } .top2025 .mf_finder_searchBox_submit::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin-left: 0; background: -webkit-gradient(linear, left top, right top, from(#8ac0cf), to(#0595b6)); background: linear-gradient(90deg, #8ac0cf 0%, #0595b6 100%); opacity: 1; -webkit-transition: opacity 0.4s ease-out; transition: opacity 0.4s ease-out; z-index: -1; } .top2025 .mf_finder_searchBox_submit:hover::before { opacity: 0; } .top2025 .mf_finder_searchBox_submit span { display: block !important; width: 21px; height: 21px; background-image: url(../img/search_mf-finder.svg); background-repeat: no-repeat; background-position: center; position: relative; z-index: 1; margin-left: 0; margin-right: 0; } .top2025 .search-modal__close-button { -ms-flex-negative: 0; flex-shrink: 0; width: 21px; height: 21px; background-color: transparent; cursor: pointer; color: #000000; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top2025 .search-modal__close-button svg { width: 21px; height: 22px; } #js-search-modal-close > svg > line:nth-child(1) { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: matrix(0.708, 0.707, -0.708, 0.707, 0.6, 1.633); transform: matrix(0.708, 0.707, -0.708, 0.707, 0.6, 1.633); stroke: currentcolor; } #js-search-modal-close > svg > line:nth-child(2) { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: matrix(-0.708, 0.707, -0.708, -0.707, 19.998, 1.633); transform: matrix(-0.708, 0.707, -0.708, -0.707, 19.998, 1.633); stroke: currentcolor; } body.english .header__utility-links { padding: 0 0 0 15px; } body.english .btn-sec-common { white-space: nowrap; } body.english .about-us-section_inner { max-width: 1200px; } body.english .ig-group-section__introduction { gap: 2.823rem; } body.english .ig-group-section-adjust { display: none; } body.english .scheme-card__caption { margin: 4.117rem auto 0; padding-left: 0.7em; text-indent: -0.9em; letter-spacing: 1.36px; } body.english .scheme-card__header { margin-bottom: 2.47rem; } body.english .scheme-card__description { max-width: 44.117rem; } body.english .news-section__view-all a { letter-spacing: 0.02rem; } body.english .video-card { row-gap: 3.529rem; } body.english .features-introduction::after { background-image: url("../img/features-sp-en.png"); } body.english .insurance-rules { margin-top: 4.705rem; } body.english .insurance-rules__content { max-width: 35.882rem; gap: 1.058rem; } body.english .insurance-rules__title { margin-top: auto; } body.english .insurance-card__more { font-size: 1.411rem; font-style: normal; font-weight: 400; line-height: 1.7; letter-spacing: 0.112rem; } body.english .insurance-card__more a:hover { opacity: 0.7; } body.english .insurance-card__more a svg { display: none; } body.english .insurance-card__more a::after { display: none; } body.english .insurance-card__more a:hover::after { display: none; } body.english .insurance-card__title a { font-size: 1.411rem; font-weight: 400; line-height: 1.7; letter-spacing: 0.112rem; color: #007bb2; } body.english .about-us-section__header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.117rem; } body.english a.surveys-section__view-more { letter-spacing: 0.4px; } body.english .top-visual__caption .caption-sub { visibility: hidden; } body.english .kindly-check-section__content { margin-top: -80px; } body.english .fullscreen-nav__info address { letter-spacing: 0.08em; } body.english .fullscreen-nav input[type="search"] { letter-spacing: normal; } body.english .search-card__body input[type="search"] { letter-spacing: normal; } body.english .search-card__body input[type="search"]::-webkit-input-placeholder { font-size: 13px; } body.english .search-card__body input[type="search"]::-moz-placeholder { font-size: 13px; } body.english .search-card__body input[type="search"]::-ms-input-placeholder { font-size: 13px; } body.english .search-card__body input[type="search"]::placeholder { font-size: 13px; } .headVisual { /*--mb--*/ /*--pc--*/ } .headVisual__title { font-weight: bold; color: #1f2a65; } #insurance.english .insurance__map { -ms-flex-pack: distribute; justify-content: space-around; } @media (hover: hover){ .top2025 .btn--emergency:hover, .top2025 .lang-item a--emergency:hover{ background-color: transparent; color: #f76767; } .top2025 .btn--contact:hover, .top2025 .lang-item a--contact:hover{ background-color: transparent; color: #0595b6; } .top2025 .lang-item-en a:hover, .top2025 .lang-item-ja a:hover{ background-color: transparent; /* 背景を透明にする */ color: #157bbe; } .top2025 .btn-sec-common-border-white:hover{ border-color: transparent; } .top2025 .btn-sec-common-border-white:hover::before{ -webkit-transform: translateX(100%) scale(1.2); transform: translateX(100%) scale(1.2); } .top2025 .btn--kindly-check:hover{ color: white; } .top2025 .btn--kindly-check:hover::before{ opacity: 1; } .top2025 .btn--blue:hover{ border: 1px solid transparent; color: white; } .top2025 .btn--blue:hover::before{ opacity: 1; } .top2025 .btn--card-link:hover::before{ opacity: 1; } .top2025 .search-form__page-link:hover::before{ opacity: 1; } .top2025 .search-card__body button[type="submit"]:hover::before{ opacity: 0; } .top2025 .fullscreen-nav__info .mf_finder_searchBox_submit:hover::before{ opacity: 0; } } @media screen and (max-width: 767px){ .top2025 .btn--big{ font-size: 1rem; font-weight: 400; line-height: 1.7; letter-spacing: 0.08rem; } .top2025 .header__inner{ min-height: 80px; padding: 18px 16px; } .top2025 .header__nav-area, .top2025 .header__login{ display: none; } .top2025 .header__logo img{ width: 246px; } .top2025 .header__hamburger-button{ width: 44px; height: 44px; } .top2025 .header__hamburger-button span{ width: 24px; margin: 8px auto; } .top2025 .site-footer{ padding-top: 43px; } .top2025 .site-footer__info .site-footer__address address{ margin-top: 16px; } .top2025 .site-footer__inner{ width: 100%; padding-left: 16px; padding-right: 16px; grid-template-columns: auto 0; grid-template-areas: "nav" "info" "member" "bottom"; gap: 50px 0; } .top2025 .site-footer__nav ul{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .top2025 .site-footer__nav ul li:nth-child(1){ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .top2025 .site-footer__nav ul li:nth-child(4){ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .top2025 .site-footer__nav ul li:nth-child(7){ -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .top2025 .site-footer__nav ul li:nth-child(10){ -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .top2025 .site-footer__nav ul li:nth-child(2){ -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } .top2025 .site-footer__nav ul li:nth-child(5){ -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } .top2025 .site-footer__nav ul li:nth-child(8){ -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } .top2025 .site-footer__nav ul li:nth-child(6){ -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } .top2025 .site-footer__nav ul li:nth-child(9){ -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } .top2025 .site-footer__nav ul li:nth-child(3){ -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } .top2025 .site-footer__nav ul li:nth-child(11){ -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } .top2025 .site-footer__bottom{ gap: 16px 40px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } .top2025 .site-footer__sub-nav{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .top2025 .site-footer__info{ grid-template-areas: "address" "map-link" "logo"; } body.english .about-us-section_buttons-area .btn--big{ font-size: 0.941rem; gap: 0.705rem; } body.english .about-us-section_buttons-area .btn-sec-common:nth-child(2){ white-space: normal; text-align: center; } body.english .about-us-section_buttons-area .btn-sec-common:nth-child(3){ white-space: nowrap; } body.english .scheme-card__caption{ padding-left: 0; text-indent: 0; margin-top: 1.764rem; } body.english .insurance-rules__action{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } body.english .surveys-section__inner{ gap: 1.411rem; } body.english a.surveys-section__view-more{ white-space: nowrap; } body.english .kindly-check-section__header{ gap: 0; } body.english .kindly-check-section__content{ margin-top: -5px; } body.english .site-footer__nav ul li:nth-child(1){ -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } body.english .site-footer__nav ul li:nth-child(2){ -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } body.english .site-footer__nav ul li:nth-child(3){ -webkit-box-ordinal-group: 12; -ms-flex-order: 11; order: 11; } body.english .site-footer__nav ul li:nth-child(4){ -webkit-box-ordinal-group: 10; -ms-flex-order: 9; order: 9; } body.english .site-footer__nav ul li:nth-child(5){ -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } body.english .site-footer__nav ul li:nth-child(6){ -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } body.english .site-footer__nav ul li:nth-child(7){ -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } body.english .site-footer__nav ul li:nth-child(8){ -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } body.english .site-footer__nav ul li:nth-child(9){ -webkit-box-ordinal-group: 11; -ms-flex-order: 10; order: 10; } body.english .site-footer__nav ul li:nth-child(10){ -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } body.english .site-footer__nav ul li:nth-child(11){ -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } .headVisual{ margin-top: 0.8rem; } .headVisual__inner{ height: 0; padding-top: 30%; background: url(/wp-content/themes/jpi/assets/img/bg_h2_sp.jpg) no-repeat center center/cover; position: relative; } .headVisual__title{ font-size: 0.15rem; position: absolute; bottom: .1rem; left: 0.2rem; } :not(header) + .mainArea{ min-height: 0.8rem; } :not(header) + .mainArea .mypage__menu{ margin-top: 0.8rem; } } @media print, screen and (max-width: 1219px){ .top2025 .header__inner{ padding-left: 16px; padding-right: 16px; } .top2025 .header__content{ gap: 17px; } .top2025 .header__utility-links{ gap: 16px; padding: 0; } .top2025 .header__utility-links a, .top2025 .header__utility-links button{ font-size: 13px; } .top2025 .header__utility-nav{ margin-bottom: 10px; gap: 20px; } .top2025 .header__primary-nav ul{ gap: 20px; } .top2025 .header__primary-nav a{ font-size: 13.5px; } .top2025 .header__actions{ gap: 29px; } .top2025 .header__login{ font-size: 14.5px; } .top2025 .header__utility-buttons{ gap: 10px; } } @media print, screen and (min-width: 1023px) and (max-width: 1068px){ .top2025 .header__actions{ gap: 8px; } .top2025 .header__content{ gap: 8px; } .top2025 .header__utility-nav{ gap: 8px; } .top2025 .header__utility-links{ gap: 8px; } .top2025 .header__utility-buttons{ gap: 7px; } } @media print, screen and (min-width: 768px) and (max-width: 1023px){ .top2025 .header__nav-area, .top2025 .header__login{ display: none; } } @media (max-width: 1200px) and (min-width: 767px){ .top2025 .fullscreen-nav__actions-btns{ grid-template-columns: 1fr; } } @media (max-width: 767px){ .top2025 .fullscreen-nav.is-open{ background: -webkit-gradient(linear, left bottom, left top, color-stop(65%, #1f2a65), to(#005989)); background: linear-gradient(to top, #1f2a65 65%, #005989); } .top2025 .fullscreen-nav__body{ grid-template-columns: 1fr; grid-template-rows: auto auto auto auto auto auto 1fr; } .top2025 .fullscreen-nav__header{ grid-column: 1; grid-row: 1; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 22px clamp(10px, 11%, 16px) 24px clamp(10px, 12%, 27px); } .top2025 .fullscreen-nav__header .fullscreen-nav__logo{ width: 246px; } .top2025 .fullscreen-nav__header .fullscreen-nav__close-button{ position: static; } .top2025 .fullscreen-nav .search-form__page-link{ margin-right: auto; } .top2025 .fullscreen-nav__actions{ grid-column: 1; grid-row: 2; width: 100%; margin: 0 auto; padding: 0 clamp(1px, 16%, 16px) 25px clamp(1px, 16%, 16px); } .top2025 .fullscreen-nav__link-title{ display: none; } .top2025 .fullscreen-nav__login{ grid-column: 1; grid-row: 3; background-color: #fff; } .top2025 .fullscreen-nav__login .mypage-accordion{ display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .top2025 .fullscreen-nav__login .mypage-accordion__icon::before, .top2025 .fullscreen-nav__login .mypage-accordion__icon::after{ background-color: black; } .top2025 .fullscreen-nav__login .mypage-accordion__links li{ display: block; } .top2025 .fullscreen-nav__login .mypage-accordion__links li:last-child{ border-bottom: 1px solid #a0a0a0; } .top2025 .fullscreen-nav__login .mypage-accordion__user-id{ color: #777777; } .top2025 .fullscreen-nav__login .mypage-accordion__btn{ color: #000; } .top2025 .fullscreen-nav__login .mypage-accordion__greater-thansign--black{ margin-left: 5px; display: block; } .top2025 .fullscreen-nav__login .mypage-accordion__greater-thansign--gray, .top2025 .fullscreen-nav__login .mypage-accordion__greater-thansign{ display: none; } .top2025 .fullscreen-nav__login .mypage-accordion li span{ color: #000; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover span{ color: #a0a0a0; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover .mypage-accordion__greater-thansign--black{ display: none; } .top2025 .fullscreen-nav__login .mypage-accordion li:hover .mypage-accordion__greater-thansign--gray{ margin-left: 5px; display: block; } .top2025 .fullscreen-nav__main{ grid-column: 1; grid-row: 4; } .top2025 .fullscreen-nav ul.fullscreen-nav__list{ background: #edf8fe; } .top2025 .fullscreen-nav__search-area{ grid-column: 1; grid-row: 5; } .top2025 .fullscreen-nav__info{ grid-column: 1; grid-row: 6; padding: 0 16px 32px 16px; } .top2025 .fullscreen-nav__submenu{ padding-left: 30px; display: none; } .top2025 .fullscreen-nav__submenu dl:first-child{ padding-top: 12px; } .top2025 .fullscreen-nav__submenu dl:not(:first-child){ padding-top: 20px; } .top2025 .fullscreen-nav__submenu-link-only{ padding-left: 30px; } .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button{ position: relative; display: block; padding-right: 16px; font-size: 17px; } .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button::before, .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button::after{ content: ""; position: absolute; background-color: #007bb2; -webkit-transition: -webkit-transform 0.3s ease; transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; transition: transform 0.3s ease, -webkit-transform 0.3s ease; } .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button::before{ top: 50%; right: 8px; width: 8px; height: 2px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .top2025 .fullscreen-nav__main .fullscreen-nav__toggle-button::after{ top: 50%; right: 8px; width: 2px; height: 8px; -webkit-transform: translate(50%, -50%); transform: translate(50%, -50%); } .top2025 .fullscreen-nav__item.is-open .fullscreen-nav__toggle-button::after{ -webkit-transform: translate(50%, -50%) rotate(90deg); transform: translate(50%, -50%) rotate(90deg); } .top2025 .fullscreen-nav__item.is-open .fullscreen-nav__toggle-button ::after{ width: 100px; } .top2025 .fullscreen-nav__footer{ grid-column: 1; grid-row: 7; padding-bottom: 80px; padding: 0 16px 0 16px; } .top2025 .fullscreen-nav__footer .member-logos{ margin-bottom: 44px; } .top2025 .fullscreen-nav__footer .member-logos div:nth-child(0){ width: 34%; } .top2025 .fullscreen-nav__footer .member-logos div:nth-child(1){ width: 46%; } .top2025 .fullscreen-nav__footer .member-logos div{ display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 12px; grid-template-rows: 0fr; -webkit-transition: grid-template-rows 0.4s ease-in-out; transition: grid-template-rows 0.4s ease-in-out; transition: grid-template-rows 0.4s ease-in-out, -ms-grid-rows 0.4s ease-in-out; padding-top: 12px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu > div{ overflow: hidden; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu .is-open .fullscreen-nav__submenu{ grid-template-rows: 1fr; padding-top: 15px; } .top2025 .fullscreen-nav__main .fullscreen-nav__submenu-loss{ display: block; } .top2025 .fullscreen-nav__search-area{ border: 0; background: transparent; gap: 0px; padding: 0; margin: 40px 16px 0 16px; } .top2025 .fullscreen-nav__labeled-search-form__blue{ border-radius: 20px; border: 1px solid #ffffff; background: rgba(255, 255, 255, 0.8); padding: 20px; margin-bottom: 24px; } } @media print, screen and (min-width: 1024px) and (max-width: 1440px){ .top2025 .site-footer__inner{ width: clamp(960px, 93.75vw, 1192px); } } @media print, screen and (min-width: 1024px) and (max-width: 1100px){ .top2025 .site-footer__bottom{ -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 10px; } } @media print, screen and (max-width: 1023px){ .top2025 .site-footer__bottom{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .top2025 .site-footer__address address{ margin-top: 28px; } } @media print, screen and (max-width: 1023px) and (min-width: 767px){ .top2025 .site-footer__inner{ width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 32px; padding-right: 32px; grid-template-columns: 1fr; grid-template-areas: "info" "nav" "member" "bottom"; gap: 80px; } .top2025 .site-footer__nav ul{ gap: 20px 56px; display: inline-grid; } } @media screen and (max-width: 1023px){ body.english .btn-sec-common{ white-space: normal; } } @media screen and (min-width: 768px) and (max-width: 1200px){ body.english .about-us-section_inner .about-us-section_buttons-area .btn-sec-common{ gap: 0.705rem; font-size: clamp(1rem, calc(-0.024rem + 1.6vw), 1.176rem); } } @media screen and (min-width: 768px) and (max-width: 1023px){ body.english .ig-group-section-adjust{ display: inherit; } } @media screen and (max-width: 1400px){ body.english .features-introduction__description p br{ display: none; } } @media screen and (min-width: 768px){ .headVisual{ /*--tbl--*/ margin-top: 0.99rem; width: 100%; } .headVisual__inner{ height: 2.5rem; background: url(/wp-content/themes/jpi/assets/img/bg_h2.jpg) no-repeat center center/cover; } .headVisual__title{ font-size: 0.35rem; padding: 0.4rem 0; max-width: 10.24rem; margin-right: auto; margin-left: auto; } :not(header) + .mainArea .mypage__menu{ margin-top: 0.99rem; } } @media screen and (min-width: 768px) and (min-width: 768px) and (max-width: 1023px){ .headVisual{ padding-top: 0; } .headVisual__title{ padding-left: 0.2rem; } } @media screen and (min-width: 767px){ :not(header) + .mainArea{ min-height: 0.99rem; } }