@charset "UTF-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.8.4 (last updated 14.2.2023) 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 { -webkit-box-sizing: border-box; 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-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* 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; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /*chromeの補完機能OFF*/ input:-webkit-autofill { -webkit-transition: background-color 5000s ease-in-out 0s !important; transition: background-color 5000s ease-in-out 0s !important; } :focus { outline: 0; } h1, h2, h3, h4, h5, h6, ul, ol, li, p, dl, dt, dd { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } /* ======================================= layout ======================================= */ :root { --font-mincho: "YuMincho", "Yu Mincho", "Noto Serif JP", "Hiragino Mincho ProN", sans-serif; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { background: #fff; color: #4d4d4d; font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic Medium", Meiryo, serif; line-height: 1; margin: auto; width: 100%; } @media only screen and (max-width: 600px) { body { font-size: 3.467vw; } } @media only screen and (min-width: 601px) { body { font-size: 14px; min-width: 980px; } } a { color: #4d4d4d; text-decoration: none; } @media only screen and (min-width: 601px) { a:hover img { opacity: 0.8; -webkit-transition: all 0.5s; transition: all 0.5s; } } b, strong { font-weight: 700; } img { vertical-align: bottom; } @media only screen and (max-width: 600px) { img { /* width: 100%; */ } } @media only screen and (min-width: 601px) { img { max-width: 100%; } } @media only screen and (max-width: 600px) { .none-sp { display: none; } iframe { display: none; } } @media only screen and (min-width: 601px) { .none-pc { display: none; } } @media only screen and (max-width: 600px) { .wrapper { padding: 4vw 0; width: 100%; } } @media only screen and (min-width: 601px) { .wrapper { margin: auto; width: 950px; } } @media only screen and (max-width: 600px) { .header { display: none; } } @media only screen and (min-width: 601px) { .header_sp { display: none; } } @media only screen and (max-width: 600px) { .header_sp { width: 100%; height: auto; } } @media only screen and (min-width: 601px) { .columns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: auto; width: 950px; } } @media only screen and (max-width: 600px) { .aside { display: none; } } @media only screen and (min-width: 601px) { .aside { width: 295px; } } @media only screen and (min-width: 601px) { .primary { width: 640px; } } @media only screen and (max-width: 600px) { .guide { display: none; } } .caution { background: #a5a486; color: #fff; font-weight: bold; margin: 2em 0; text-align: center; } @media only screen and (max-width: 600px) { .caution { font-size: 94%; padding: 0.5em; line-height: 1.4; } } @media only screen and (min-width: 601px) { .caution { font-size: 16px; line-height: 1.875; } } .copyright { border: solid #4d4d4d; border-width: 1px 0; line-height: 1.4; margin: 0.5em 0; padding: 0.5em; text-align: center; } @media only screen and (max-width: 600px) { .copyright { font-size: 92%; } } @media only screen and (min-width: 601px) { .copyright { font-size: 13px; } } /* ======================================= 記事 ======================================= */ @media only screen and (max-width: 600px) { .contents { margin: auto; width: 90.667vw; } } @media only screen and (min-width: 601px) { .contents { border: 1px solid #dcdcdc; margin: 20px 0; padding: 20px 29px; } } .c-header { position: relative; } .c-header__title-en { margin: auto; } @media only screen and (max-width: 600px) { .c-header__title-en { width: 25.467vw; } } @media only screen and (min-width: 601px) { .c-header__title-en { width: 147px; } } .c-header__title-ja { border-bottom: 1px solid #333; color: #333; font-family: var(--font-mincho); font-weight: 500; margin-top: 0.5em; padding: 0.2em 0; position: absolute; right: 0; top: 0; } @media only screen and (max-width: 600px) { .c-header__title-ja { font-size: 3.2vw; } } @media only screen and (min-width: 601px) { .c-header__title-ja { font-size: 15px; } } .outline { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #333; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: 0.1em; line-height: 1.3; } .outline_2 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #fff; color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: flex-end; letter-spacing: 0.1em; line-height: 1.3; } @media only screen and (max-width: 600px) { .outline { font-size: 3.2vw; margin-top: 4vw; padding: 2vw; } } @media only screen and (min-width: 601px) { .outline { font-size: 13px; margin-top: 25px; padding: 3px 5px; } } .outline__delimiter { padding: 0 0.5em; } @media only screen and (max-width: 600px) { .interview { margin-top: 3.333vw; } } @media only screen and (min-width: 601px) { .interview { margin-top: 25px; } } .interview__title { color: #333; font-weight: 700; } @media only screen and (max-width: 600px) { .interview__title { font-size: 4.533vw; line-height: 1.647; } } @media only screen and (min-width: 601px) { .interview__title { font-size: 20px; line-height: 1.75; } } .interview__image-large { text-align: center; } @media only screen and (max-width: 600px) { .interview__image-large { margin-top: 4vw; } } @media only screen and (min-width: 601px) { .interview__image-large { margin-top: 20px; } } @media only screen and (max-width: 600px) { .interview__post { font-size: 3.467vw; line-height: 1.769; margin-top: 3.333vw; } } @media only screen and (min-width: 601px) { .interview__post { font-size: 14px; line-height: 2.071; margin-top: 25px; } } @media only screen and (max-width: 600px) { .interview-section { margin-top: 6vw; } } @media only screen and (min-width: 601px) { .interview-section { margin-top: 50px; } } .interview-section__title { background: #f2f2f2; color: #333; font-weight: 700; letter-spacing: 0.02em; } @media only screen and (max-width: 600px) { .interview-section__title { font-size: 4vw; line-height: 1.633; padding: 1.067vw 1.6vw; } } @media only screen and (min-width: 601px) { .interview-section__title { font-size: 18px; line-height: 1.667; padding: 3px 12px; } } @media only screen and (max-width: 600px) { .interview-section__post { font-size: 3.467vw; line-height: 1.769; margin-top: 4.667vw; } } @media only screen and (min-width: 601px) { .interview-section__post { font-size: 14px; line-height: 2.071; margin-top: 20px; } } .interview-section__post::after { clear: both; content: ""; display: block; } .interview-section__post b { color: #333; display: block; margin-bottom: -1em; } @media only screen and (max-width: 600px) { .interview-section__post b { font-size: 3.733vw; line-height: 1.714; } } @media only screen and (min-width: 601px) { .interview-section__post b { font-size: 16px; line-height: 1.813; } } .interview-section__image-right { float: right; } @media only screen and (max-width: 600px) { .interview-section__image-right { margin: 0 0 1.333vw 4vw; width: 36vw; } } @media only screen and (min-width: 601px) { .interview-section__image-right { margin: 0 0 10px 30px; width: 230px; } } .interview-section__image-left { float: left; } @media only screen and (max-width: 600px) { .interview-section__image-left { margin: 0 4vw 1.333vw 0; width: 36vw; } } @media only screen and (min-width: 601px) { .interview-section__image-left { margin: 0 30px 10px 0; width: 230px; } } .interview-section__image-center { text-align: center; } @media only screen and (max-width: 600px) { .interview-section__image-center { margin-top: 4.667vw; } } @media only screen and (min-width: 601px) { .interview-section__image-center { margin-top: 20px; } } .interview-section__image-center:first-child { margin-top: 0; } .product { border: 1px solid #e6e6e6; } @media only screen and (max-width: 600px) { .product { margin-top: 8vw; padding: 4.667vw 3.467vw 8vw; } } @media only screen and (min-width: 601px) { .product { margin-top: 30px; padding: 20px 25px 30px; } } .product__title { color: #998675; font-weight: 700; } @media only screen and (max-width: 600px) { .product__title { font-size: 3.467vw; line-height: 1.769; } } @media only screen and (min-width: 601px) { .product__title { font-size: 16px; line-height: 1.813; } } @media only screen and (max-width: 600px) { .product__name { font-size: 3.2vw; margin-top: 2.667vw; } } @media only screen and (min-width: 601px) { .product__name { font-size: 13px; margin-top: 15px; } } .product__name-link { background: #998675; color: #fff; display: inline-block; position: relative; } @media only screen and (max-width: 600px) { .product__name-link { border-radius: 1.333vw; padding: 1.333vw 6vw 1.333vw 1.333vw; } } @media only screen and (min-width: 601px) { .product__name-link { border-radius: 10px; padding: 6px 30px 6px 6px; } .product__name-link:hover { opacity: 0.8; } } .product__name-link::after { border: solid #fff; border-width: 1px 1px 0 0; content: ""; display: block; position: absolute; top: 50%; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); } @media only screen and (max-width: 600px) { .product__name-link::after { height: 1.12vw; right: 3.333vw; width: 1.12vw; } } @media only screen and (min-width: 601px) { .product__name-link::after { height: 7px; right: 14px; width: 7px; } } .product__columns { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 600px) { .product__columns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; margin-top: 3.333vw; } } @media only screen and (min-width: 601px) { .product__columns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 15px; } } @media only screen and (max-width: 600px) { .product__detail { font-size: 3.2vw; line-height: 1.833; margin-top: 4.667vw; } } @media only screen and (min-width: 601px) { .product__detail { font-size: 13px; line-height: 2.231; width: 300px; } } @media only screen and (max-width: 600px) { .product__image { margin: auto; width: 53.333vw; } } @media only screen and (min-width: 601px) { .product__image { width: 200px; } } .product-comment { border-top: 1px solid #e6e6e6; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (max-width: 600px) { .product-comment { margin-top: 4vw; padding-top: 4vw; } } @media only screen and (min-width: 601px) { .product-comment { margin-top: 20px; padding-top: 15px; } } .product-comment__title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #998675; color: #998675; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } @media only screen and (max-width: 600px) { .product-comment__title { font-size: 3.2vw; line-height: 1.417; width: 15.6vw; } } @media only screen and (min-width: 601px) { .product-comment__title { font-size: 13px; width: 100px; } } @media only screen and (max-width: 600px) { .product-comment__post { font-size: 3.2vw; line-height: 1.833; width: 64vw; } } @media only screen and (min-width: 601px) { .product-comment__post { font-size: 13px; line-height: 2.231; width: 420px; } } .product__button { font-weight: bold; text-align: center; } @media only screen and (max-width: 600px) { .product__button { font-size: 4vw; margin: 6vw auto 0; width: 80vw; } } @media only screen and (min-width: 601px) { .product__button { font-size: 18px; margin-top: 30px; } } .product__button-link { background: rgba(153, 134, 117, 0.3); display: block; position: relative; } @media only screen and (max-width: 600px) { .product__button-link { border-radius: 1.333vw; padding: 5.333vw; } } @media only screen and (min-width: 601px) { .product__button-link { border-radius: 10px; padding: 18px; } .product__button-link:hover { opacity: 0.8; } } .product__button-link::after { border: solid #4d4d4d; border-width: 2px 2px 0 0; content: ""; display: block; position: absolute; top: 50%; -webkit-transform: translateY(-50%) rotate(50deg) skewY(-10deg); transform: translateY(-50%) rotate(50deg) skewY(-10deg); } @media only screen and (max-width: 600px) { .product__button-link::after { height: 2.533vw; right: 9.333vw; width: 2.533vw; } } @media only screen and (min-width: 601px) { .product__button-link::after { height: 11px; right: 35px; width: 11px; } } @media only screen and (max-width: 600px) { .lastly { margin-top: 8vw; } } @media only screen and (min-width: 601px) { .lastly { margin-top: 30px; } } .lastly__title { color: #333; font-weight: 700; } @media only screen and (max-width: 600px) { .lastly__title { font-size: 3.733vw; } } @media only screen and (min-width: 601px) { .lastly__title { font-size: 16px; } } .lastly__title::before { color: #998675; content: "■"; margin-right: 0.5em; } @media only screen and (max-width: 600px) { .lastly__post { font-size: 3.467vw; line-height: 1.769; margin-top: 4.667vw; } } @media only screen and (min-width: 601px) { .lastly__post { font-size: 14px; line-height: 2.071; margin-top: 20px; } } .lastly__image { text-align: center; } @media only screen and (max-width: 600px) { .lastly__image { margin-top: 4.667vw; } } @media only screen and (min-width: 601px) { .lastly__image { margin-top: 30px; } .lastly__image img { width: 100%; } } @media only screen and (max-width: 600px) { .navigation { margin: 8vw 0; } } @media only screen and (min-width: 601px) { .navigation { margin: 35px 0; } } .navigation__button { font-weight: bold; text-align: center; } @media only screen and (max-width: 600px) { .navigation__button { font-size: 3.333vw; margin-top: 4vw; } } @media only screen and (min-width: 601px) { .navigation__button { font-size: 16px; margin-top: 15px; } } .navigation__button-link { background: #fff; border: 1px solid #ccc; color: #666; display: block; } @media only screen and (max-width: 600px) { .navigation__button-link { padding: 4.667vw; } } @media only screen and (min-width: 601px) { .navigation__button-link { padding: 16px; } .navigation__button-link:hover { background: #ccc; } } .navigation__button-text { position: relative; } .navigation__button-text::after { content: "→"; font-weight: 400; position: absolute; right: -1.5em; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }/*# sourceMappingURL=responsive.css.map */