@charset "utf-8"; /* Theme Name: タイの法律事務所・探偵部門 Theme URI: Author: Author URI: Description: */ /* font-family: 'Noto Serif JP', serif; */ /* noto-serif-jp-300 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Serif JP'; font-style: normal; font-weight: 300; font-display: swap; src: url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-300.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* noto-serif-jp-regular - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Serif JP'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-regular.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* noto-serif-jp-500 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Serif JP'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-500.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* noto-serif-jp-600 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Serif JP'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-600.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /* noto-serif-jp-700 - japanese_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Noto Serif JP'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+ */ url('./fonts/NotoSerifJP/noto-serif-jp-v21-japanese_latin-700.woff') format('woff'); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; border-spacing:0; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* 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*/ :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; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* orignal css */ :root { --base-color: #888888; --light-color: #f0f0f0; --pale-color: #f5f5f5; --border-color: #d8d8d8; --gray-color: #626262; --fs-14: clamp(1.2rem, 2vw - 0.25rem, 1.4rem); --fs-16: clamp(1.3rem, 1vw + 0.5rem, 1.6rem); --fs-18: clamp(1.4rem, 1vw + 0.75rem, 1.8rem); --fs-20: clamp(1.6rem, 1vw + 1rem, 2rem); --fs-22: clamp(1.7rem, 1vw + 1rem, 2.2rem); --fs-24: clamp(1.8rem, 2vw + 0.75rem, 2.4rem); --fs-26: clamp(1.9rem, 2vw + 0.75rem, 2.6rem); --fs-28: clamp(2rem, 2vw + 0.75rem, 2.8rem); --fs-30: clamp(2.2rem, 2vw + 0.75rem, 3rem); --fs-32: clamp(2.4rem, 2vw + 0.75rem, 3.2rem); --fs-36: clamp(2.6rem, 2vw + 1rem, 3.6rem); --fs-38: clamp(2.8rem, 2vw + 1.25rem, 3.8rem); --fs-44: clamp(3.2rem, 2vw + 1.75rem, 4.4rem); --fs-56c: clamp(3.2rem, 3vw + 1.5rem, 5.6rem); } html { font-size: 62.5%; } body { color: #333; font-family: 'Noto Serif JP', serif; font-weight: 500; font-size: 10px; font-size: 1.0rem; line-height: 1; -webkit-text-size-adjust: 100%; } main { font-size: clamp(1.3rem, 1vw + 0.5rem, 1.6rem); line-height: 2; } .inner { max-width: 1200px; padding: 0 clamp( 1.5em, 5vw, 2.5em ); margin: 0 auto; -webkit-box-sizing: content-box; box-sizing: content-box; } .cap { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; font-size: inherit; } mark { background-color: #ff9; color: inherit; } input[type="text"], input[type="password"], input[type="email"], input[type="submit"], button, textarea, select { vertical-align: middle; font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; font-size: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type="text"], input[type="password"], input[type="email"], textarea { width: 100%; } input[type="radio"] { -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; } input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; } .submits { text-align: center; margin: 2em 0 0; } input[type="submit"] { display: inline-block; width: 40%; min-width: 130px; max-width: 360px; color: #fff; background: var( --gray-color ); border: 2px var( --gray-color ) solid; font-weight: bold; font-weight: 700; font-size: var( --fs-20 ); line-height: 1; text-align: center; padding: 1em 2em; border-radius: 100em; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } input[type="submit"]:hover { color: var( --gray-color ); background: #fff; } /* IE text, password */ input::-ms-reveal, input::-ms-clear { visibility: hidden; } h2 { font-size: var( --fs-32 ); } @media (max-width: 767px) { .lang { display:none; } .select.language { display: none; width: 500px; line-height: 1; vertical-align: top; } } @media (min-width: 768px) { .lang { width: 24px; display: inline-flex; } .select.language { margin-left: -19px; display: none; width: 500px; line-height: 1; vertical-align: top; } } .select { position: relative; width: 500px; } .select.language .label { font-size: 1.4rem; line-height: 2.2857; color: #dd0330; border-bottom: 0 none; text-align: left; font-weight: 500; font-family: 'Roboto'; } .select .label { display: block; position: relative; line-height: 48px; font-size: 1.6rem; color: #010101; text-indent: 20px; border-bottom: 2px solid #df1e36; } .select.language .label.active:after { background: url(../images/select_02_active.png) 0 0 no-repeat; } .select.language .label:after { top: 14px; width: 8px; height: 5px; background: url(../images/select_02.png) 0 0 no-repeat; } .select .label.active:after { background: url(../images/select_active.png) 0 0 no-repeat; } .select .label:after { content: ''; display: block; position: absolute; right: 23px; top: 23px; width: 14px; height: 8px; background: url(../images/select.png) 0 0 no-repeat; } .select .select-list.active { margin-top: 3px; } .select.language .select-list { padding: 10px 0; border-top: 1px solid #df1e36; background-color: #fff; margin-left: -13px; -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); } .select .select-list.active { display: block; z-index:100; position: absolute; width: 100%; margin-top: -2px; -webkit-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); -moz-box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.02); } .select .select-list { display: none; } dl, ul, ol, menu, li { list-style: none; } .select.language .select-list li a { padding: 0; font-size: 14px; line-height: 30px; text-indent: 0; text-align: center; font-weight: 500; font-family: 'Roboto'; } .select .select-list li a { display: block; padding: 7px 20px; line-height: 26px; font-size: 16px; color: #010101; background-color: #fff; } @media (max-width: 767px) { .select-list2 { left:-32px; position:absolute; float:right; width: 80px; display: list-item; list-style: none; padding: 8px; font-size: var(--fs-14); background-color:#fff; color:#666; border:1px solid #333; z-index:10; text-align:left; } } @media (min-width: 768px) { .select-list2 { left:-13px; position:absolute; float:right; width: 80px; display: list-item; list-style: none; padding: 8px; font-size: var(--fs-14); background-color:#fff; color:#666; border:1px solid #333; z-index:10; } } .select-list2 li a { display: flex; align-items: center; text-decoration: none; color: inherit; } .text_right { text-align:right; }