@charset "UTF-8" /* -------------------------------------------------- サイト全体で共通のスタイル -------------------------------------------------- */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ /* サイト全体で共通のウェブフォント */ @charset "UTF-8"; /* サイト全体で共通のフォント */ @font-face { font-family: "Noto Sans JP"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/NotoSansJP-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: "Noto Sans JP"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/NotoSansJP-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: "Noto Sans JP"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/NotoSansJP-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: "Noto Sans JP"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/NotoSansJP-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } /* 英字用 */ @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Thin.woff') format('woff'); font-weight: 100; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Light.woff') format('woff'); font-weight: 300; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Regular.woff') format('woff'); font-weight: 400; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Medium.woff') format('woff'); font-weight: 500; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Bold.woff') format('woff'); font-weight: 700; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-ExtraBold.woff') format('woff'); font-weight: 800; font-style: normal; } @font-face { font-family: "Barlow"; src: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/fonts/Barlow-Black.woff') format('woff'); font-weight: 900; font-style: normal; } /* サイト全体で共通のアニメーション */ @charset "UTF-8"; /* サイト全体で共通のアニメーション */ /* tableのswipeアイコンの動き */ @keyframes table-swipe { 0% { opacity: 0; transform: translate(-20px, 5px) rotate(0); } 75% { opacity: 1; transform: translate(20px, -5px) rotate(15deg); } 100% { opacity: 1; transform: translate(20px, -5px) rotate(15deg); } } /* リンクフェードイン */ @keyframes link-underline { 0% { width: 0; } 100% { width: 100%; } } @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* フェードイン */ @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* scroll */ @-webkit-keyframes scroll { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 75% { -webkit-transform: translateY(25px); transform: translateY(25px); opacity: 0; } 100% { -webkit-transform: translateY(25px); transform: translateY(25px); opacity: 0; } } @keyframes scroll { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 75% { -webkit-transform: translateY(25px); transform: translateY(25px); opacity: 0; } 100% { -webkit-transform: translateY(25px); transform: translateY(25px); opacity: 0; } } /* サイト全体で共通の HTML 要素のスタイル */ @charset "UTF-8"; /* サイト全体で共通の要素のスタイル */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } html { background-color: #ffffff; color: #0d0d0d; font-family: 'Noto Sans JP', sans-serif; font-size: 62.5%; font-weight: 400; letter-spacing: 0.1em; line-height: 1.78em; } /* 多言語対応 */ html:lang(ja) { font-family: 'Noto Sans JP', sans-serif; } html.is-hamburger-nav-open { overflow: hidden; } ::selection { background-color: rgb(13 13 13 / 10%); } body { font-size: 1.4rem; letter-spacing: .1em; line-height: 1; } a { color: inherit; text-decoration: none; } a:hover, a:focus { text-decoration: none; } img { image-rendering: -webkit-optimize-contrast; } sub { font-size: 1.1rem; vertical-align: sub; } sup { font-size: 1.1rem; vertical-align: super; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } ol, ul { list-style: none; } button { outline: none; } /* ========================================================================== utility ========================================================================== */ .block { display: block; text-decoration: none; } .block, .block:active, .block:visited { color: inherit; } .inline-block { display: inline-block; } .break { word-wrap: break-word; } .full { box-sizing: border-box; width: 100%; } .stick { margin: 0 !important; } .stick-bottom { margin-bottom: 0 !important; } .stick-left { margin-left: 0 !important; } .stick-right { margin-right: 0 !important; } .stick-top { margin-top: 0 !important; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } .text-lower { text-transform: lowercase; } .text-upper { text-transform: uppercase; } .word { display: inline-block; } .hs_cos_wrapper_type_icon { display: none; } .hs_error_rollup { color: red; margin-top: 50px; text-align: center; } /* サイト全体で共通な自然なスタイル */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .natural { display: block; margin-top: 20px; margin-bottom: 20px; } .natural:first-child { margin-top: 0; } .natural:last-child { margin-bottom: 0; } .natural--bg { box-sizing: border-box; padding: 30px; background-color: #f7f7f7; } @media screen and (max-width:767px) { .natural--bg { padding: 20px; } } /* 背景色ありのスタイル */ .dnd-section-color--bg .natural--bg { background-color: #ffffff; } .natural h1, .natural h2, .natural h3, .natural h4, .natural h5, .natural h6 { display: block; } .natural pre, .natural h1, .natural h2, .natural h3, .natural h5, .natural h6, .natural .solid, .natural hr, .natural blockquote { display: block; } /* elements settings */ .natural pre+pre,.natural h1+pre,.natural h2+pre,.natural h3+pre,.natural h4+pre,.natural h5+pre,.natural h6+pre,.natural .solid+pre,.natural hr+pre,.natural blockquote+pre,.natural table+pre,.natural pre+h1,.natural h1+h1,.natural h2+h1,.natural h3+h1,.natural h4+h1,.natural h5+h1,.natural h6+h1,.natural .solid+h1,.natural hr+h1,.natural blockquote+h1,.natural table+h1,.natural pre+h2,.natural h1+h2,.natural h2+h2,.natural h3+h2,.natural h4+h2,.natural h5+h2,.natural h6+h2,.natural .solid+h2,.natural hr+h2,.natural blockquote+h2,.natural table+h2,.natural pre+h3,.natural h1+h3,.natural h2+h3,.natural h3+h3,.natural h4+h3,.natural h5+h3,.natural h6+h3,.natural .solid+h3,.natural hr+h3,.natural blockquote+h3,.natural table+h3,.natural pre+h4,.natural h1+h4,.natural h2+h4,.natural h3+h4,.natural h4+h4,.natural h5+h4,.natural h6+h4,.natural .solid+h4,.natural hr+h4,.natural blockquote+h4,.natural table+h4,.natural pre+h5,.natural h1+h5,.natural h2+h5,.natural h3+h5,.natural h4+h5,.natural h5+h5,.natural h6+h5,.natural .solid+h5,.natural hr+h5,.natural blockquote+h5,.natural table+h5,.natural pre+h6,.natural h1+h6,.natural h2+h6,.natural h3+h6,.natural h4+h6,.natural h5+h6,.natural h6+h6,.natural .solid+h6,.natural hr+h6,.natural blockquote+h6,.natural table+h6,.natural pre+.solid,.natural h1+.solid,.natural h2+.solid,.natural h3+.solid,.natural h4+.solid,.natural h5+.solid,.natural h6+.solid,.natural .solid+.solid,.natural hr+.solid,.natural blockquote+.solid,.natural table+.solid,.natural pre+hr,.natural h1+hr,.natural h2+hr,.natural h3+hr,.natural h4+hr,.natural h5+hr,.natural h6+hr,.natural .solid+hr,.natural hr+hr,.natural blockquote+hr,.natural table+hr,.natural pre+blockquote,.natural h1+blockquote,.natural h2+blockquote,.natural h3+blockquote,.natural h4+blockquote,.natural h5+blockquote,.natural h6+blockquote,.natural .solid+blockquote,.natural hr+blockquote,.natural blockquote+blockquote,.natural table+blockquote,.natural pre+table,.natural h1+table,.natural h2+table,.natural h3+table,.natural h4+table,.natural h5+table,.natural h6+table,.natural .solid+table,.natural hr+table,.natural blockquote+table,.natural table+table { margin-top: 38px; } .natural ol:not(:first-child), .natural ul:not(:first-child), .natural dl:not(:first-child), .natural figure:not(:first-child) { display: block; } .natural p:not(:last-child), .natural ol:not(:last-child), .natural ul:not(:last-child), .natural dl:not(:last-child), .natural figure:not(:last-child) { display: block; } /* heading */ .natural h2 { margin-top: 60px; margin-bottom: 25px; font-size: 2.2rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .natural h2 { margin-top: 80px; margin-bottom: 45px; font-size: 3.2rem; } } .natural h2:first-child { margin-top: 0; } .natural h2:last-child { margin-bottom: 0; } .natural h3 { margin-top: 25px; margin-bottom: 20px; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .natural h3 { margin-top: 55px; margin-bottom: 30px; font-size: 2.4rem; } } .natural h3:first-child { margin-top: 0; } .natural h3:last-child { margin-bottom: 0; } .natural h4 { margin-top: 30px; margin-bottom: 20px; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .natural h4 { margin-top: 45px; margin-bottom: 25px; font-size: 2.0rem; } } .natural h4:first-child { margin-top: 0; } .natural h4:last-child { margin-bottom: 0; } .natural h5 { margin-top: 30px; margin-bottom: 20px; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .natural h5 { font-size: 1.8rem; } } .natural h5:first-child { margin-top: 0; } .natural h5:last-child { margin-bottom: 0; } /* text */ .natural p { margin-top: 20px; margin-bottom: 20px; color: #222222; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .natural p { font-size: 1.6rem; } } .natural p:first-child { margin-top: 0; } .natural p:last-child { margin-bottom: 0; } .natural--white p { color: #ffffff; } .natural strong { font-weight: 700; } .natural em { font-style: italic; } /* figure / caption / image */ .natural figure figcaption, .natural caption { margin-top: 20px; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; } @media screen and (max-width:767px) { .natural figure figcaption, .natural caption { font-size: 1.2rem; line-height: 1.9; } } .natural figure figcaption:first-child, .natural caption:first-child { margin-top: 0 } .natural figure { max-width: 750px; margin: 20px auto; } @media screen and (min-width:768px) { .natural figure { margin-top: 30px; margin-bottom: 30px; } } .natural figure:first-child { margin-top: 0; } .natural figure:last-child { margin-bottom: 0; } .natural img { max-width: 100%; min-height: 10px; } @media screen and (min-width:768px) { .natural img { max-width: 650px; } } /* link */ .natural a { display: inline; position: relative; border-bottom: 1px solid #222222; color: #222222; text-decoration: none; word-break: break-all; transition: .5s; } @media screen and (min-width: 1050px) { .natural a:hover { opacity: .5; } } .natural a[target="_blank"] { padding-left: 16px; } @media screen and (max-width: 767px) { .natural a[target="_blank"] { padding-left: 14px; } } .natural a[target="_blank"]::before { content: ""; position: absolute; top: 8px; left: 2px; width: 12px; height: 12px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS45NjkiIGhlaWdodD0iMTEuOTY5IiB2aWV3Qm94PSIwIDAgMTEuOTY5IDExLjk2OSI+CiAgPHBhdGggaWQ9IuODkeOCuV82NDIxIiBkYXRhLW5hbWU9IuODkeOCuSA2NDIxIiBkPSJNLTc4OC41MjksMGgtNi4zNDJhLjUyOC41MjgsMCwwLDAtLjUyOC41MjlWMi4xNjdoLTMuODdhLjcuNywwLDAsMC0uNy43djguNGEuNy43LDAsMCwwLC43LjdoOC40YS43LjcsMCwwLDAsLjctLjdWNy40aDEuNjM4QS41MjguNTI4LDAsMCwwLTc4OCw2Ljg3MVYuNTI5QS41MjkuNTI5LDAsMCwwLTc4OC41MjksMFptLTIuNjM4LDEwLjk2OWgtNy44di03LjhoMy41N3YzLjdhLjUyNy41MjcsMCwwLDAsLjUyOC41MjhoMy43Wk0tNzg5LDYuNGgtNS40VjFoNS40WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzk5Ljk2OSkiIGZpbGw9IiM0MTQxNDEiLz4KPC9zdmc+Cg==") no-repeat center; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 767px) { .natural a[target="_blank"]::before { top: 6px; width: 10px; height: 10px; } } .natural a[target="_blank"][href*=".pdf"]::before { background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-size: 12px 15px; width: 12px; height: 15px; top: 5px; left: 0px; } @media screen and (max-width: 767px) { .natural a[target="_blank"][href*=".pdf"]::before { top: 2px; } } /* 画像バナーの場合はスタイルが当たらないようにする */ .natural a.img-link { border-bottom: none; padding-left: 0; } .natural a.img-link::before { content: none; } /* box */ .natural > .box { margin-top: 30px; margin-bottom: 30px; margin-left: 0; padding: 15px 20px; border: 1px solid #dbdbdb; border-radius: 5px; } @media screen and (min-width: 768px) { .natural > .box { margin-top: 35px; margin-bottom: 35px; padding: 20px 35px; } } /* list */ .natural ul, .natural ol { margin-top: 10px; margin-left: 1.3em; } .natural > ul, .natural > ol, .natural > .hs_cos_wrapper_type_rich_text > ul, .natural > .hs_cos_wrapper_type_rich_text > ol { margin-top: 30px; margin-bottom: 30px; margin-left: 0; padding: 15px 20px 15px 42px; border: 1px solid #dbdbdb; border-radius: 5px; } @media screen and (min-width: 768px) { .natural > ul, .natural > ol, .natural > .hs_cos_wrapper_type_rich_text > ul, .natural > .hs_cos_wrapper_type_rich_text > ol { margin-top: 35px; margin-bottom: 35px; padding: 20px 35px 20px 55px; } } .natural > ul:first-child, .natural > ol:first-child, .natural > .hs_cos_wrapper_type_rich_text > ul:first-child, .natural > .hs_cos_wrapper_type_rich_text > ol:first-child { margin-top: 0; } .natural > ul:last-child, .natural > ol:last-child, .natural > .hs_cos_wrapper_type_rich_text > ul:last-child, .natural > .hs_cos_wrapper_type_rich_text > ol:last-child { margin-bottom: 0; } .natural > ul li, .natural > .hs_cos_wrapper_type_rich_text > ul li { position: relative; margin-top: calc( 20px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 20px - (((1em * 2) - 1em) / 2) ); color: #222222; font-size: 1.5rem; font-weight: 400; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .natural > ul li, .natural > .hs_cos_wrapper_type_rich_text > ul li { font-size: 1.6rem; } } .natural > ul li:first-child, .natural > .hs_cos_wrapper_type_rich_text > ul li:first-child { margin-top: 0; } .natural > ul li:last-child, .natural > .hs_cos_wrapper_type_rich_text > ul li:last-child { margin-bottom: 0; } /* normal list style */ .natural > ul:not([style*="list-style-type"]), .natural > .hs_cos_wrapper_type_rich_text > ul:not([style*="list-style-type"]) { padding-left: 35px; } @media screen and (min-width: 768px) { .natural > ul:not([style*="list-style-type"]), .natural > .hs_cos_wrapper_type_rich_text > ul:not([style*="list-style-type"]) { padding-left: 51px; } } .natural > ul:not([style*="list-style-type"]) li::before, .natural > .hs_cos_wrapper_type_rich_text > ul:not([style*="list-style-type"]) li::before { content: ""; display: block; position: absolute; top: .8em; left: -15px; width: 5px; height: 5px; background-color: #dbdbdb; } /* 番号付きリスト */ .natural ol { list-style-type: decimal; } .natural ol li { display: list-item; margin-top: 0; font-size: 1.5rem; font-weight: 400; letter-spacing: .1em; line-height: 2; list-style: inherit; } @media screen and (min-width: 768px) { .natural ol li { font-size: 1.6rem; } } /* pre */ .natural pre { margin-top: 30px; margin-bottom: 30px; padding: 20px 20px 18px; border: 1px solid #dbdbdb; border-radius: 5px; font-size: 1.5rem; font-weight: 400; letter-spacing: .1em; line-height: 2; white-space: normal; } @media screen and (min-width: 768px) { .natural pre { margin-top: 35px; margin-bottom: 35px; padding: 26px 35px 28px; font-size: 1.6rem; } } .natural pre:first-child { margin-top: 0; } .natural pre:last-child { margin-bottom: 0; } /* div */ .natural div { margin-top: 15px; margin-bottom: 15px; font-size: 1.4rem; letter-spacing: .1em; line-height: 1.4; white-space: normal; } .natural div:first-child { margin-top: 0; } .natural div:last-child { margin-bottom: 0; } /* table */ .natural .js-table-scroll { margin-top: 30px !important; margin-bottom: 30px !important; } @media screen and (min-width: 768px) { .natural .js-table-scroll { margin-top: 40px !important; margin-bottom: 40px !important; } } .natural .js-table-scroll:first-child { margin-top: 0; } .natural .js-table-scroll:last-child { margin-bottom: 0; } .natural table { width: 100%; min-width: 610px; height: auto !important; border: 1px solid #dbdbdb !important; } @media screen and (min-width: 768px) { .natural table { max-width: 100%; } } .natural table tr { height: auto !important; } .natural table tr:not(:last-child) { border-bottom: 1px solid #dbdbdb; } .natural table tr:first-of-type td { background-color: rgba(203, 201, 187, .6); } .natural table td { height: auto !important; padding-right: 20px !important; padding-left: 20px !important; color: #222222; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; text-align: left; vertical-align: middle; } @media screen and (min-width: 768px) { .natural table td { padding: 15px !important; font-size: 1.6rem; } } .natural table td:not(:last-child) { border-right: 1px solid #dbdbdb; } /* blockquote */ .natural blockquote { position: relative; margin-top: 30px; margin-bottom: 30px; padding: 20px 45px; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .natural blockquote { margin-top: 40px; margin-bottom: 40px; padding: 25px 60px; } } .natural blockquote:first-child { margin-top: 0; } .natural blockquote:last-child { margin-bottom: 0; } .natural blockquote::before, .natural blockquote::after { content: ""; position: absolute; width: 18.65px; height: 13.09px; background: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/ico_blockquote.svg) no-repeat; background-size: contain; } .natural blockquote::before { top: 16px; left: 16px; } .natural blockquote::after { top: 16px; right: 16px; transform: rotate(180deg); } @media screen and (min-width: 768px) { .natural blockquote::before, .natural blockquote::after { position: absolute; width: 25.87px; height: 18.16px; } .natural blockquote::before { left: 20px; } .natural blockquote::after { right: 20px; transform: rotate(180deg); } } /* hr */ .natural hr { margin-top: 30px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .natural hr { margin-top: 40px; margin-bottom: 40px; } } /* key */ .natural .key { position: relative; padding-left: 20px; } @media screen and (min-width: 768px) { .natural .key { padding-left: 30px; } } .natural .key:before { content: ""; display: block; width: 13px; height: 15px; position: absolute; top: 5px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_key.svg); background-position: 0; background-repeat: no-repeat; background-size: 13px 15px; } @media screen and (min-width: 768px) { .natural .key:before { width: 18px; height: 21px; background-size: 18px 21px; } } /* サイト全体で共通のレイアウトスタイル */ @charset "UTF-8"; /* エレベーター */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ @media screen and (max-width: 899px) { .elevator { padding-top: 50px; } } .elevator__nav { display: flex; justify-content: space-between; position: relative; } .is-no-breadcrumb .elevator__nav { justify-content: flex-end; } .elevator__nav__breadcrumb { overflow: auto; box-sizing: border-box; width: calc(100% + 20px * 2); margin-right: -20px; margin-left: -20px; padding-top: 20px; padding-bottom: 20px; scrollbar-width: none; /* Firefox 対応 */ } .elevator__nav__breadcrumb::-webkit-scrollbar { /* Chrome, Safari 対応 */ display:none; } @media screen and (min-width: 1240px) { .elevator__nav__breadcrumb { width: calc(100% + 50px * 2); margin-right: -50px; margin-left: -50px; } } @media screen and (min-width: 1280px) { .elevator__nav__breadcrumb { width: 100%; margin-right: 0; margin-left: 0; } } .elevator__nav__breadcrumb__list, .elevator__nav__breadcrumb .hs-breadcrumb-menu { display: flex; align-items: center; padding-right: 20px; padding-left: 20px; font-size: 1.1rem; letter-spacing: .15em; line-height: 1em; } @media screen and (min-width: 1240px) { .elevator__nav__breadcrumb__list, .elevator__nav__breadcrumb .hs-breadcrumb-menu { font-size: 1.2rem; padding-right: 50px; padding-left: 50px; } } @media screen and (min-width: 1280px) { .elevator__nav__breadcrumb__list, .elevator__nav__breadcrumb .hs-breadcrumb-menu { padding-right: 0; padding-left: 0; } } .elevator__nav__breadcrumb__list__item, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item { padding: 0; color: rgb(34 34 34 / 50%); white-space: nowrap; } .elevator__nav__breadcrumb__list__item:not(:first-child), .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:not(:first-child), .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:not(:first-child), .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:not(:first-child) { position: relative; margin-left: 15px; padding-left: 21px; } .elevator__nav__breadcrumb__list__item:not(:first-child)::before, .elevator__nav__breadcrumb__list__item:not(:first-child)::after, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:not(:first-child)::before, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:not(:first-child)::after, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:not(:first-child)::before, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:not(:first-child)::after, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:not(:first-child)::before, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:not(:first-child)::after { content: ''; display: block; position: absolute; top: calc(50% - 1px); left: 0; width: 1px; height: 4px; background-color: #808080; transform: skewX(45deg); } .elevator__nav__breadcrumb__list__item:not(:first-child)::before, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:not(:first-child)::before, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:not(:first-child)::before, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:not(:first-child)::before { top: calc(50% - 4px); } .elevator__nav__breadcrumb__list__item:not(:first-child)::after, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:not(:first-child)::after, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:not(:first-child)::after, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:not(:first-child)::after { top: calc(50% - 0px); transform: scale(1, -1) skewX(45deg); } .elevator__nav__breadcrumb__list__item:first-child span.hs-breadcrumb-label, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:first-child span.hs-breadcrumb-label, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:first-child span.hs-breadcrumb-label, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:first-child span.hs-breadcrumb-label { color: #222222; } .elevator__nav__breadcrumb__list__item:last-child, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item:last-child, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item:last-child, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item:last-child { padding-right: 20px; } .elevator__nav__breadcrumb__list__item__anchor, .elevator__nav__breadcrumb__list__item a.hs-breadcrumb-label, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item__anchor, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item a.hs-breadcrumb-label, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item__anchor, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item a.hs-breadcrumb-label, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item__anchor, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label { color: #222222; text-decoration: underline; transition: all .5s; } .hs-breadcrumb-label[href*="javascript"]{ text-decoration: none!important; pointer-events: none; } .elevator__nav__breadcrumb__list__item__anchor__icon, .elevator__nav__breadcrumb__list__item a.hs-breadcrumb-label__icon, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item__anchor__icon, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item a.hs-breadcrumb-label__icon, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item__anchor__icon, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item a.hs-breadcrumb-label__icon, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item__anchor__icon, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label__icon { display: block; position: absolute; top: calc(50% - 4px); left: 0; width: 6px; height: 8px; } .elevator__nav__breadcrumb__list__item__anchor__icon__arrow, .elevator__nav__breadcrumb__list__item a.hs-breadcrumb-label__icon__arrow, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item__anchor__icon__arrow, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item a.hs-breadcrumb-label__icon__arrow, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item__anchor__icon__arrow, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item a.hs-breadcrumb-label__icon__arrow, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item__anchor__icon__arrow, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label__icon__arrow { fill: #808080; } .elevator__nav__breadcrumb__list__item__anchor:hover, .elevator__nav__breadcrumb__list__item a.hs-breadcrumb-label:hover, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item__anchor:hover, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item a.hs-breadcrumb-label:hover, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item__anchor:hover, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item a.hs-breadcrumb-label:hover, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item__anchor:hover, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item a.hs-breadcrumb-label:hover { color: #808080; } .elevator__nav__breadcrumb__list__item .hs-breadcrumb-menu-divider, .elevator__nav__breadcrumb__list .hs-breadcrumb-menu-item .hs-breadcrumb-menu-divider, .elevator__nav__breadcrumb .hs-breadcrumb-menu__item .hs-breadcrumb-menu-divider, .elevator__nav__breadcrumb .hs-breadcrumb-menu .hs-breadcrumb-menu-item .hs-breadcrumb-menu-divider { display: none; } @charset "UTF-8"; /* フッター */ .footer { position: relative; } @media screen and (min-width: 900px) { .footer { min-width: 1240px; } .content .footer { min-width: inherit; } } @media screen and (min-width: 900px) { .container.container--footer { max-width: 1450px; } } .footer--no-nav { text-align: center; } @media screen and (min-width: 900px) { .footer--no-nav { padding-top: 15px; padding-bottom: 15px; } } .footer__page-top { position: absolute; right: 12px; top: -52px; } @media screen and (min-width: 768px) { .footer__page-top { right: 20px; top: -80px; } } .footer__page-top.is-fixed { position: fixed; top: inherit; bottom: 20px; } .footer__page-top__anchor { display: block; position: relative; width: 40px; height: 40px; border-radius: 50px; font-size: 0rem; background-color: #ffffff; box-shadow: 0px 2px 5px 2px rgb(0 0 0 / 8%); transition: transform .5s; } @media screen and (min-width: 768px) { .footer__page-top__anchor { font-size: 1.0rem; font-weight: 500; height: 60px; font-family: 'Barlow', sans-serif; letter-spacing: .1em; line-height: 1.1; width: 60px; padding: 29px 0 0 0; box-sizing: border-box; text-align: center; } } @media screen and (min-width: 768px) { .footer__page-top__anchor:hover { transform: scale(1.1); } } .footer__page-top__anchor__icon { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; } @media screen and (min-width: 768px) { .footer__page-top__anchor__icon { top: 13px; transform: translate(-50%, 0); } } .footer__page-top__anchor__icon .footer__page-top__anchor__icon__path { fill: #0d0d0d; } .footer__above { padding: 40px 0 60px; background-color: #0d0d0d; color: #ffffff; } @media screen and (min-width: 900px) { .footer__above { padding: 60px 0; } } @media screen and (min-width: 900px) { .footer__above__nav__columns { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-left: -30px; margin-right: -30px; margin-bottom: 50px; } } @media screen and (min-width: 900px) { .footer__above__nav__columns__column { padding-left: 30px; padding-right: 30px; } } .footer__above__nav__columns__column:nth-child(1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 30px; padding-bottom: 30px; } @media screen and (min-width: 768px) { .footer__above__nav__columns__column:nth-child(1) { padding-top: 50px; padding-bottom: 30px; } } @media screen and (min-width: 900px) { .footer__above__nav__columns__column:nth-child(1) { padding-top: 0; padding-bottom: 0; } } .header__hamburger-nav .footer__above__nav__columns__column:nth-child(1) { padding-top: 0; } .footer__above__nav__columns__column:nth-child(3) { padding-top: 30px; padding-bottom: 30px; } @media screen and (min-width: 900px) { .footer__above__nav__columns__column:nth-child(3) { padding-top: 0; padding-bottom: 0; } } .header__hamburger-nav .footer__above__nav__columns__column:nth-child(3) { padding-bottom: 0; } .footer__above__nav__logo { text-align: center; margin-left: auto; margin-right: auto; width: 150px; } @media screen and (min-width: 900px) { .footer__above__nav__logo { margin-left: 0; margin-right: 0; } } .footer__above__nav__logo__anchor, .footer__above__nav__logo a { display: block; } .footer__above__nav__logo__anchor img, .footer__above__nav__logo a img { max-width: 100%; vertical-align: bottom; } .footer__above__nav__category__list { border-bottom: 1px solid rgb(255 255 255 / 30%); } @media screen and (min-width: 900px) { .footer__above__nav__category__list { border: none; display: flex; flex-wrap: wrap; margin-left: -22.5px; margin-right: -22.5px; margin-top: -20px; margin-bottom: -20px; } } .footer__above__nav__category__list__item { position: relative; box-sizing: border-box; } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item { padding-left: 22.5px; padding-right: 22.5px; padding-top: 20px; padding-bottom: 20px; width: 33.333%; } } .footer__above__nav__category__list__item:not(:first-child) { border-top: 1px solid rgb(255 255 255 / 30%); } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item:not(:first-child) { border: none; } } .footer__above__nav__category__list__item__inner { position: relative; } .footer__above__nav__category__list__item__anchor { display: block; font-size: 1.5rem; letter-spacing: .1em; font-weight: 500; line-height: 1.4em; padding: 22px 40px 22px 0; position: relative; transition: color .5s; } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item__anchor { padding: 0 30px 15px 0; border-bottom: 1px solid rgb(255 255 255 / 30%); } .footer__above__nav__category__list__item__anchor:hover { color: rgb(255 255 255 / 60%); } } .footer__above__nav__category__list__item__anchor__icon { position: absolute; top: calc(50% - 5px); right: 10px; width: 10px; } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item__anchor__icon { top: calc(50% - 9px); } } @media screen and (max-width: 1279px) { .footer__above__nav__category__list__item.footer__above__nav__category__list__item--accordion .footer__above__nav__category__list__item__anchor__icon { display: none; } } .footer__above__nav__category__list__item__anchor__icon__path { fill: #ffffff; } .footer__above__nav__category__list__item__button { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 30px; height: 64px; min-height: 64px; cursor: pointer; } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item__button { display: none; pointer-events: none; } } .footer__above__nav__category__list__item__button::before, .footer__above__nav__category__list__item__button::after { content: ""; display: block; position: absolute; top: calc(50% - 0.5px); left: calc(50% - 5.5px); width: 11px; height: 1px; background-color: #ffffff; transition: transform .5s, opacity .5s; } .footer__above__nav__category__list__item__button::before { transform: rotate(90deg); } .footer__above__nav__category__list__item__button.is-active::before { transform: rotate(0); } .footer__above__nav__category__list__item__button.is-active::after { opacity: 0; } @media screen and (min-width: 900px) { .footer__above__nav__category__list__item__button { display: none; } } .footer__above__nav__category__subnav__wrapper { display: none; } @media screen and (min-width: 900px) { .footer__above__nav__category__subnav__wrapper { display: block!important; margin-top: 20px; } } .footer__above__nav__category__subnav { padding-left: 20px; padding-right: 20px; padding-bottom: 25px; } @media screen and (min-width: 900px) { .footer__above__nav__category__subnav { padding: 0; } } @media screen and (min-width: 900px) { .footer__above__nav__category__subnav__list.footer__above__nav__category__subnav__list--2column { display: flex; flex-wrap: wrap; margin: -5px; } } @media screen and (min-width: 900px) { .footer__above__nav__category__subnav__list.footer__above__nav__category__subnav__list--2column .footer__above__nav__category__subnav__list__item { margin: 0; width: 50%; padding: 5px; box-sizing: border-box; } } .footer__above__nav__category__subnav__list__item:not(:first-child) { margin-top: 10px; } .footer__above__nav__category__subnav__list__item__anchor { display: block; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5em; transition: .5s; } @media screen and (min-width: 900px) { .footer__above__nav__category__subnav__list__item__anchor:hover { opacity: .6; } } .footer__below { padding-top: 30px; padding-bottom: 25px; } @media screen and (min-width: 768px) { .footer__below__columns { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .footer__below__columns__column:nth-child(2) { margin-top: 30px; } @media screen and (min-width: 768px) { .footer__below__columns__column:nth-child(2) { margin-top: 0; } } .footer__below__copyright { margin-top: 20px; font-family: 'Barlow', sans-serif; font-size: 1.0rem; letter-spacing: .25em; line-height: 1.5em; } @media screen and (min-width: 768px) { .footer__below__copyright { text-align: right; } } @media screen and (min-width: 900px) { .footer--no-nav .footer__below__copyright { text-align: center; } } .footer__below__extra-nav__list { display: flex; flex-wrap: wrap; margin: -7px -12.5px; } @media screen and (min-width: 768px) { .footer__below__extra-nav__list { margin: -7px -8px; } } @media screen and (min-width: 768px) { .footer__below__extra-nav__list { justify-content: flex-end; } } .footer__below__extra-nav__list__item { padding: 7px 12.5px; } @media screen and (min-width: 768px) { .footer__below__extra-nav__list__item { padding: 7px 8px; } } .footer__below__extra-nav__list__item__anchor { display: block; font-size: 1.2rem; line-height: 1.5em; letter-spacing: .1em; position: relative; opacity: .7; transition: .5s; } .footer__below__extra-nav__list__item__anchor:hover { opacity: .5; } @charset "UTF-8"; /* フッター_外部ページ用 */ .footer-simple { border-top: 1px solid #dbdbdb; position: relative; } @media screen and (min-width: 1280px) { .footer-simple { } } @media screen and (min-width: 1280px) { .container.container--footer { max-width: 1450px; } } .footer-simple__below { padding-top: 30px; padding-bottom: 25px; } @media screen and (min-width: 768px) { .footer-simple__below__columns { display: -webkit-box; display: -ms-flexbox; display: flex; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } .footer-simple__below__columns__column:nth-child(2) { margin-top: 30px; } @media screen and (min-width: 768px) { .footer-simple__below__columns__column:nth-child(2) { margin-top: 0; } } .footer-simple__below__copyright { margin-top: 20px; font-family: 'Barlow', sans-serif; font-size: 10px; letter-spacing: .25em; line-height: 1.5em; } @media screen and (min-width: 768px) { .footer-simple__below__copyright { text-align: right; } } .footer-simple__below__extra-nav__list { display: flex; flex-wrap: wrap; margin: -7px -12.5px; } @media screen and (min-width: 768px) { .footer-simple__below__extra-nav__list { margin: -7px -8px; } } @media screen and (min-width: 768px) { .footer-simple__below__extra-nav__list { justify-content: flex-end; } } .footer-simple__below__extra-nav__list__item { padding: 7px 12.5px; } @media screen and (min-width: 768px) { .footer-simple__below__extra-nav__list__item { padding: 7px 8px; } } .footer-simple__below__extra-nav__list__item__anchor { display: block; text-decoration: none; color: #0d0d0d; font-size: 12px; line-height: 1.5em; letter-spacing: .1em; position: relative; opacity: .7; transition: .5s; } .footer-simple__below__extra-nav__list__item__anchor:hover { opacity: .5; } @charset "UTF-8"; /* ヘッダー */ .header { position: fixed; width: 100%; z-index: 10; display: flex; align-items: center; box-sizing: border-box; height: 50px; background-color: #ffffff; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header { height: 60px; } } @media screen and (min-width: 900px) { .header { overflow: inherit; display: block; height: auto; min-width: 1240px; } } .header--no-nav { height: auto; padding-top: 15px; padding-bottom: 5px; } @media screen and (min-width: 768px) { .header--no-nav { padding-top: 30px; padding-bottom: 30px; } } @media screen and (min-width: 900px) { .header--no-nav { padding-top: 49px; padding-bottom: 50px; } } .header__columns { display: flex; justify-content: space-between; align-items: center; width: 100%; } @media screen and (min-width: 900px) { .header__columns { border-bottom: 1px solid #dbdbdb; } } .header__columns__column { box-sizing: border-box; } .header__columns__column:nth-child(2) { display: flex; justify-content: flex-end; } @media screen and (min-width: 900px) { .header__columns__column:nth-child(2) { align-items: center; } } .header__logo { margin-left: 12px; width: 155px; } @media screen and (min-width: 768px) { .header__logo { margin-left: 15px; width: 220px; } } @media screen and (min-width: 900px) { .header__logo { margin-left: 30px; width: 272px; } } .header__logo__anchor, .header__logo a { display: block; } .header__logo__anchor img, .header__logo a img { max-width: 100%; vertical-align: bottom; } .header__search-wrap { padding: 25px 20px; margin-top: 0; background-color: #0d0d0d; border-bottom: 1px solid hsla(0,0%,100%,.3); } @media screen and (min-width: 768px) { .header__search-wrap { padding: 25px 50px; } } .header__search { display: block; position: relative; } .header__search.header__search--pc { display: none; } @media screen and (min-width: 900px) { .header__search.header__search--pc { display: block; } } .header__search__search { outline: 0; border-radius: 0; border: none; background: none transparent; vertical-align: middle; color: inherit; -webkit-appearance: none; appearance: none; background-color: #f7f7f7!important; width: 100%; height: 40px; box-sizing: border-box; font-size: 1.3rem; letter-spacing: .1em; padding: 0 55px 0 15px; } @media screen and (min-width: 900px) { .header__search__search { width: 290px; } } .header__search__search::placeholder { color: #cfcfcf; } .header__search__submit { position: absolute; border-radius: 0; top: 4px; right: 4px; width: 53px; height: 32px; cursor: pointer; background: #0d0d0d; font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; color: #ffffff; appearance: none; border: none; display: block; transition: all .5s; padding: 0; } @media screen and (min-width: 900px) { .header__mr { margin-left: 30px; } } .header__mr__anchor { display: block; position: relative; box-sizing: border-box; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_headset.svg); background-repeat: no-repeat; background-position: 5px center; background-size: 16px 11px; border-left: 1px solid #dbdbdb; width: 100px; height: 50px; padding: 11px 6px 9px 26px; font-family: 'Barlow', sans-serif; font-size: 1.1rem; letter-spacing: 0em; font-weight: 500; transition: opacity .5s; } @media screen and (min-width: 768px) { .header__mr__anchor { height: 60px; padding: 16px 6px 14px 24px; } } @media screen and (min-width: 900px) { .header__mr__anchor { background-size: 16px 11px; background-position: 0 center; border-left: none; font-size: 1.4rem; letter-spacing: .1em; font-family: 'Noto Sans JP', sans-serif; font-weight: 500; height: auto; line-height: 1; width: 175px; padding: 0 0 0 25px; box-sizing: border-box; } } @media screen and (min-width: 900px) { .header__mr__anchor:hover { opacity: .6; } } .header__mr__anchor__text-pc { display: none; } @media screen and (min-width: 900px) { .header__mr__anchor__text-pc { display: block; } } .header__mr__anchor__text-pc__sub { display: block; margin-bottom: 5px; font-size: 1.1rem; } .header__mr__anchor__text-sp { display: block; text-align: center; } @media screen and (min-width: 900px) { .header__mr__anchor__text-sp { display: none; } } .header__mr__anchor__text-sp__sub { display: block; margin-top: 4px; font-size: 1.0rem; } #js-login-button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; box-sizing: border-box; border-left: 1px solid #dbdbdb; width: 50px; height: 50px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_login.svg); background-position: center; background-repeat: no-repeat; background-size: 16px 18px; } @media screen and (min-width: 768px) { #js-login-button { width: 60px; height: 60px; background-size: 18px 20px; } } @media screen and (min-width: 900px) { #js-login-button { display: none; } } .header__login.is-login-active { height: 100%; left: 0; opacity: 1; pointer-events: auto; position: fixed; top: 50px; transition: opacity .5s; width: 100%; } @media screen and (min-width: 768px) { .header__login.is-login-active { top: 60px; } } .header__login { background-color: hsla(0,0%,5%,.6); box-sizing: border-box; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 50px; width: 100%; z-index: 100; } @media screen and (min-width: 900px) { .header__login { pointer-events: inherit; width: 230px; border-left: 1px solid #dbdbdb; margin-left: 25px; display: block; opacity: 1; position: static; background-color: transparent; } } .header__login__inner { box-sizing: border-box; padding: 20px; background-color: #fff; margin-top: 10px; margin-left: auto; margin-right: 10px; max-width: 210px; } @media screen and (min-width: 900px) { .header__login__inner { padding: 0; margin-top: 0; margin-right: 0; max-width: none; } } /* ログイン時のスタイル */ .header__login.header__login--active .header__login__inner { max-width: none; padding: 30px 20px; margin-right: 20px; width: calc(100% - 40px); height: calc(100% - 70px); box-sizing: border-box; box-shadow: 0 0 20px 5px rgb(13 13 13 / 15%); overflow-x: hidden; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .header__login.header__login--active .header__login__inner::-webkit-scrollbar { display:none; } @media screen and (min-width: 768px) { .header__login.header__login--active .header__login__inner { max-width: 580px; height: auto; padding: 40px; margin-right: 10px; } } @media screen and (min-width: 900px) { .header__login.header__login--active .header__login__inner { max-width: none; height: auto; padding: 0; margin-right: 0; width: auto; box-shadow: none; } } @media screen and (min-width: 900px) { .header__login__inner__columns { display: flex; } } @media screen and (min-width: 900px) { .header__login__inner__columns__column { width: 50%; } } .header__login__inner__columns__column:not(:first-child) { margin-top: 5px; } @media screen and (min-width: 900px) { .header__login__inner__columns__column:not(:first-child) { margin-top: 0; } } .header__login__inner__anchor { display: block; text-align: center; padding: 11.5px; font-size: 1.3rem; font-weight: 500; } @media screen and (min-width: 900px) { .header__login__inner__anchor { padding: 16.5px; font-size: 1.2rem; transition: .5s; } } .header__login__inner__anchor.header__login__inner__anchor--new { border: 1px solid #dbdbdb; } @media screen and (min-width: 900px) { .header__login__inner__anchor.header__login__inner__anchor--new { border: none; } .header__login__inner__anchor.header__login__inner__anchor--new:hover { color: #ffffff; background-color: #0d0d0d; } } .header__login__inner__anchor.header__login__inner__anchor--login { color: #ffffff; background-color: #0d0d0d; border-left: 1px solid #dbdbdb; } @media screen and (min-width: 900px) { .header__login__inner__anchor.header__login__inner__anchor--login:hover { color: #0d0d0d; background-color: #ffffff; } } .header__login__inner__anchor.header__login__inner__anchor--member { margin-top: 15px; padding: 0; font-size: 1.1rem; text-decoration: underline; text-underline-offset: 0.5em; } @media screen and (min-width: 900px) { .header__login__inner__anchor.header__login__inner__anchor--member { margin-top: 0; border-top: 1px solid #dbdbdb; padding: 16.5px; font-size: 1.2rem; text-decoration: none; } .header__login__inner__anchor.header__login__inner__anchor--member:hover { opacity: .6; } } .header__login__inner__mr { } @media screen and (min-width: 900px) { .header__login__inner__mr { padding: 16.5px; text-align: center; } } .header__login__inner__mr__name { display: inline-block; position: relative; padding-right: 20px; font-size: 1.2rem; font-weight: 500; } .header__login__inner__mr__name:before { border-right: 2px solid #0d0d0d; border-top: 2px solid #0d0d0d; content: ""; height: 4px; right: 0; position: absolute; top: calc(50% - 3px); transform: rotate(135deg); width: 4px; transition: transform .5s; } @media screen and (min-width: 900px) { .header__login__inner__mr.is-active .header__login__inner__mr__name:before { transform: rotate(315deg); } } @media screen and (max-width: 899px) { .header__login__inner__mr__name, .header__login__inner__anchor.header__login__inner__anchor--member { display: none; } } .header__login__inner__mr__inner { display: none; } @media screen and (max-width: 899px) { .header__login__inner__mr__inner { display: block!important; } } @media screen and (min-width: 900px) { .header__login__inner__mr__inner { position: absolute; top: 47px; right: 10px; text-align: left; background-color: #fff; box-sizing: border-box; margin-left: auto; box-shadow: 0 0 20px 5px hsl(0deg 0% 5% / 15%); box-sizing: border-box; height: auto; width: 580px; padding: 40px; z-index: 100; } } @media screen and (min-width: 768px) { .mr-name-columns { display: flex; justify-content: space-between; margin-left: -15px; margin-right: -15px; margin-bottom: 35px; } .mr-name-columns__column { box-sizing: border-box; padding-left: 15px; padding-right: 15px; } } .mr-name-columns__column__name { font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .mr-name-columns__column__name { font-size: 1.5rem; } } .mr-name-columns__column__logout { margin-top: 10px; margin-left: auto; display: block; cursor: pointer; background: transparent; appearance: none; border: none; padding: 0; color: #0d0d0d; font-family: 'Noto Sans JP', sans-serif; font-size: 1.3rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-decoration: underline; transition: opacity .5s; } @media screen and (min-width: 768px) { .mr-name-columns__column__logout { margin-top: 0; } } @media screen and (min-width: 900px) { .mr-name-columns__column__logout:hover { opacity: .6; } } .mr-button-columns { margin-top: 15px; } .mr-button-columns:not(:first-child) { margin-top: 35px; } @media screen and (min-width: 768px) { .mr-button-columns { display: flex; margin-left: -15px; margin-right: -15px; } .mr-button-columns__column { box-sizing: border-box; width: 50%; padding-left: 15px; padding-right: 15px; } } .mr-button-columns__column:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .mr-button-columns__column:not(:first-child) { margin-top: 0; } } .mr-button-columns__paragraph { font-size: 1.2rem; line-height: 1.5; } .mr-button-columns__column__button { display: block; max-width: 300px; margin-left: auto; margin-right: auto; width: 100%; padding: 14px; cursor: pointer; background: transparent; appearance: none; border: none; border-radius: 50px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; color: #ffffff; background-color: #0d0d0d; transition: opacity .5s; } @media screen and (min-width: 900px) { .mr-button-columns__column__button:hover { opacity: .6; } } .mr-button-columns__column a { display: block; } .mr-button-columns__column a:not(:first-child) { margin-top: 10px; } .mr-title { font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .mr-title:not(:first-child) { margin-top: 35px; } .mr-paragraph { font-size: 1.2rem; line-height: 1.5; } @media screen and (min-width: 768px) { .mr-paragraph { font-size: 1.3rem; } } .mr-paragraph:not(:first-child) { margin-top: 5px; } .mr-attention { font-size: 1.2rem; line-height: 1.5; } .mr-attention:not(:first-child) { margin-top: 8px; } .mr-seminar-list { } .mr-seminar-list__item { } .mr-seminar-list__item__anchor { display: block; padding: 15px 0; border-bottom: 1px solid #dbdbdb; transition: opacity .5s; } @media screen and (min-width: 900px) { .mr-seminar-list__item__anchor:hover { opacity: .6; } } .mr-seminar-list__item__anchor__date { font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; } .mr-seminar-list__item__anchor__title { margin-top: 10px; font-size: 1.3rem; line-height: 1.5; letter-spacing: .1em; text-decoration: underline; } .header__login__inner__mr__inner .link-text__anchor { font-size: 1.2rem; } @media screen and (min-width: 768px) { .header__login__inner__mr__inner .link-text__anchor { font-size: 1.3rem; } } .header__login__inner__mr__inner .link-text__anchor__icon { top: 6px; } .header__main { opacity: 0; position: absolute; top: 50px; left: 0; z-index: 100; box-sizing: border-box; width: 100%; background-color: rgb(13 13 13 / 60%); pointer-events: none; } @media screen and (min-width: 900px) { .header__main { opacity: 1; position: static; padding: 0; background-color: #fff; pointer-events: auto; } } .header__main.is-active { opacity: 1; position: fixed; top: 50px; left: 0; width: 100%; height: calc(100% - 50px); pointer-events: auto; transition: opacity .5s; } @media screen and (min-width: 768px) { .header__main.is-active { top: 60px; height: calc(100% - 60px); } } .header__main__logo { display: flex; align-items: center; justify-content: center; height: 50px; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header__main__logo { height: 63px; margin-right: -30px; margin-left: -30px; } } @media screen and (min-width: 900px) { .header__main__logo { display: none; } } .header__main__logo__anchor { display: block; text-align: center; } .header__main__logo__anchor img { width: 60%; } @media screen and (min-width: 768px) { .header__main__logo__anchor img { width: 80%; } } .header__main__content { box-sizing: border-box; width: 100%; } .is-hamburger-nav-open .header__main__content { overflow-x: hidden; overflow-y: auto; height: 100%; } @media screen and (min-width: 768px) { .site-header__main__content__nav { margin-right: 0; margin-left: 0; } } @media screen and (min-width: 900px) { .site-header__main__content__nav { margin-right: auto; margin-left: auto; } } .site-header__main__content__nav.site-header__main__content__nav--pc { display: none; } @media screen and (min-width: 900px) { .site-header__main__content__nav.site-header__main__content__nav--tbsp { display: none; } .site-header__main__content__nav.site-header__main__content__nav--pc { display: block; } } @media screen and (min-width: 900px) { .site-header__main__content__nav__list { display: flex; justify-content: center; } } .site-header__main__content__nav__list__item { border-bottom: 1px solid rgb(255 255 255 / 30%); background-color: #0d0d0d; } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item { border: none; background-color: #ffffff; padding: 0 25px; } .site-header__main__content__nav__list__item.subnav--is-active { padding: 0 45px 0 25px; } } .site-header__main__content__nav__list__item__inner { display: block; position: relative; box-sizing: border-box; } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item__inner:hover { cursor: pointer; } } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item.subnav--is-active .site-header__main__content__nav__list__item__inner::before { border-right: 2px solid #0d0d0d; border-top: 2px solid #0d0d0d; content: ""; height: 4px; right: -20px; position: absolute; bottom: 33px; transform: rotate(135deg); width: 4px; } } .site-header__main__content__nav__list__item__anchor { color: #fff; display: block; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5em; padding: 21px 60px 21px 20px; position: relative; transition: color .5s; } @media screen and (min-width: 768px) { .site-header__main__content__nav__list__item__anchor { padding: 21px 90px 21px 50px; } } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item__anchor { text-align: center; padding: 22px 0 20px; font-size: 1.4rem; color: #0d0d0d; } } .site-header__main__content__nav__list__item__anchor__deco { display: block; margin-top: 5px; text-transform: uppercase; color: #222222; font-size: 1.0rem; font-weight: 500; font-family: 'Barlow', sans-serif; line-height: 1; letter-spacing: .2em; } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item__anchor:after { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #0d0d0d; transition: .5s; } .site-header__main__content__nav__list__item .site-header__main__content__nav__list__item__anchor.is-current:after, .site-header__main__content__nav__list__item:hover .site-header__main__content__nav__list__item__anchor:after { width: 100%; } } .site-header__main__content__nav__list__item__anchor__inner { position: relative; z-index: 1; } .site-header__main__content__nav__list__item__anchor__arrow { width: 10px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 28px; } @media screen and (min-width: 768px) { .site-header__main__content__nav__list__item__anchor__arrow { right: 48px; } } .site-header__main__content__nav__list__item__anchor__arrow__path { fill: #ffffff; } /* icon */ .site-header__main__content__nav__list__item__anchor__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 64px; height: 64px; min-height: 64px; cursor: pointer; } @media screen and (min-width: 768px) { .site-header__main__content__nav__list__item__anchor__icon { right: 20px; width: 68px; height: 68px; min-height: 68px; } } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item__anchor__icon { display: none; pointer-events: none; } } .site-header__main__content__nav__list__item__anchor__icon::before, .site-header__main__content__nav__list__item__anchor__icon::after { content: ""; display: block; position: absolute; top: calc(50% - 0.5px); left: calc(50% - 5.5px); width: 11px; height: 1px; background-color: #ffffff; transition: transform .5s, opacity .5s; } .site-header__main__content__nav__list__item__anchor__icon::before { transform: rotate(90deg); } .site-header__main__content__nav__list__item__inner.is-active .site-header__main__content__nav__list__item__anchor__icon::before { transform: rotate(0); } .site-header__main__content__nav__list__item__inner.is-active .site-header__main__content__nav__list__item__anchor__icon::after { opacity: 0; } @media screen and (min-width: 900px) { .site-header__main__content__nav__list__item__anchor__icon { display: none; } } .site-header__main__content__subnav__first { color: #ffffff; font-size: 20px; font-weight: 500; line-height: 1.5; padding-left: 35px; position: relative; transition: opacity .5s; } @media screen and (min-width: 900px) { .site-header__main__content__subnav__first:hover { opacity: .8; } } .site-header__main__content__subnav__first__arrow { width: 25px; height: 25px; background-color: #ffffff!important; padding: 8px; border-radius: 20px; box-sizing: border-box; position: absolute; top: 3px; left: 0; } /* === site-header global sub-nav list */ @media screen and (min-width: 900px) { .site-header__main__content__subnav { margin-top: 30px; border-top: 1px solid #ffffff; padding-top: 50px; } } .site-header__main__content__subnav__wrapper { display: none; background-color: #f7f7f7; } @media screen and (min-width: 900px) { .site-header__main__content__subnav__wrapper__inner { max-width: 1170px; padding: 0 50px; box-sizing: border-box; margin-left: auto; margin-right: auto; } } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list { display: flex; flex-wrap: wrap; margin-top: -15px; margin-bottom: -15px; margin-left: -40px; margin-right: -40px; } } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list__item { padding-top: 15px; padding-bottom: 15px; padding-left: 40px; padding-right: 40px; } } .site-header__main__content__subnav__list__item:not(:first-child) { border-top: solid 1px #dbdbdb; } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list__item:not(:first-child) { border-top: none; } } .site-header__main__content__subnav__list__item__anchor { position: relative; display: block; padding: 21px 60px 21px 20px; color: #0d0d0d; font-size: 1.4rem; letter-spacing: .1em; line-height: 1.5; transition: opacity .5s; } @media screen and (min-width: 768px) { .site-header__main__content__subnav__list__item__anchor { padding: 21px 90px 21px 50px; } } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list__item__anchor { padding: 0 0 0 20px; color: #ffffff; } .site-header__main__content__subnav__list__item__anchor:hover { opacity: .8; } } .site-header__main__content__subnav__list__item__anchor__text { position: relative; } .site-header__main__content__subnav__list__item__anchor__arrow { width: 10px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 28px; } @media screen and (min-width: 768px) { .site-header__main__content__subnav__list__item__anchor__arrow { right: 48px; } } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list__item__anchor__arrow { right: inherit; left: 0; } } @media screen and (min-width: 900px) { .site-header__main__content__subnav__list__item__anchor__arrow__path { fill: #ffffff; } } .header-product-info__line-wrap { padding: 20px 40px 25px 20px; border-top: solid 1px #dbdbdb; } @media screen and (min-width: 768px) { .header-product-info__line-wrap { padding: 20px 90px 25px 50px; } } .header-product-info-title { font-size: 1.4rem; letter-spacing: .1em; line-height: 1.5; } .header-product-info__line { margin-top: 13.5px; margin-left: -10px; margin-right: -10px; margin-bottom: -7.5px; display: flex; flex-wrap: wrap; } .header-product-info__line__item { width: 20%; padding: 7.5px 10px; box-sizing: border-box; } @media screen and (min-width: 768px) { .header-product-info__line__item { width: 10%; } } .header-product-info__line__item__anchor { display: block; position: relative; padding-left: 12px; color: #222222; font-size: 1.3rem; transition: .5s; } .header-product-info__line__item__anchor:hover, .header-product-info__line__item__anchor.header-product-info__line__item__anchor--nolink { opacity: .5; } .header-product-info__line__item__anchor:before { content: ''; width: 5px; height: 5px; border-top: solid 1px #222222; border-right: solid 1px #222222; position: absolute; left: 0; top: 4px; transform: rotate(45deg); } /* 領域情報 */ .header-area-info__line-wrap { padding: 20px; border-top: solid 1px #dbdbdb; } @media screen and (min-width: 768px) { .header-area-info__line-wrap { padding: 25px 50px; } } .header-area-info__line { display: flex; flex-wrap: wrap; margin-top: -10px; } .header-area-info__line__item { width: 33.333%; padding: 10px; box-sizing: border-box; } @media screen and (min-width: 768px) { .header-area-info__line__item { width: 16.666%; } } .header-area-info__line__item__anchor { position: relative; display: block; text-align: center; } .header-area-info__line__item__anchor__figure { position: relative; margin: 0 auto; width: 60px; height: 60px; border-radius: 30px; background-color: #ffffff; transition: .5s; } .header-area-info__line__item__anchor:hover .header-area-info__line__item__anchor__figure { background-color: #0d0d0d; } .header-area-info__line__item__anchor__figure__icon { position: absolute; width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s; } .header-area-info__line__item__anchor__figure__icon.header-area-info__line__item__anchor__figure__icon--hov { opacity: 0; } .header-area-info__line__item__anchor:hover .header-area-info__line__item__anchor__figure__icon.header-area-info__line__item__anchor__figure__icon--hov { opacity: 1; } .header-area-info__line__item__anchor:hover .header-area-info__line__item__anchor__figure__icon.header-area-info__line__item__anchor__figure__icon--def { opacity: 0; } .header-area-info__line__item__anchor__text { margin-top: 10px; text-align: center; font-size: 1.2rem; line-height: 1.5; } .header .support-info { background-color: #0d0d0d; padding: 40px 20px; } @media screen and (min-width: 768px) { .header .support-info { padding: 40px 50px; } } @media screen and (min-width: 900px) { .header .support-info { display: none; } } @media screen and (min-width: 768px) { .header .support-info__columns { display: flex; justify-content: space-between; } .header .support-info__columns__column { width: calc(50% - 10px); } } .header .side-effects__inner__attention { color: #ffffff; } .header .distribution.distribution--common-bottom .side-effects__inner__attention { color: #222222; } @media screen and (min-width: 768px) { .header .hhc_ai { margin-top: 0; } } @media screen and (min-width: 768px) { .header .hhc_hotline__inner { height: 100%; display: flex; flex-wrap: wrap; height: 100%; box-sizing: border-box; align-content: center; } } @media screen and (min-width: 768px) { .header .hhc_hotline__inner__title, .header .hhc_hotline__inner__tel, .header .hhc_hotline__inner__day, .header .hhc_hotline__inner__paragraph { width: 100%; } } /* === PC mega-menu style */ @media screen and (min-width: 900px) { .site-header__main__content__subnav__wrapper { padding: 50px 0 60px; position: fixed; left: 0; width: 100%; z-index: 10; background-color: #0d0d0d; } } .header__hamburger { position: relative; z-index: 101; width: 50px; height: 50px; padding: 0; border: none; border-radius: 0; background-color: #0d0d0d; appearance: none; cursor: pointer; } @media screen and (min-width: 768px) { .header__hamburger { width: 60px; height: 60px; } } @media screen and (min-width: 900px) { .header__hamburger { display: none; } } .header__hamburger__inner { display: block; position: absolute; top: calc(50% - 5.5px); left: calc(50% - 7px); } .header__hamburger__inner__line { display: block; position: absolute; left: 0; height: 1px; background-color: #fff; transition: all .5s; } .header__hamburger__inner__line:nth-child(1) { width: 14px; top: 0; } .is-active .header__hamburger__inner__line:nth-child(1) { top: 5px; transform: rotate(45deg); } .header__hamburger__inner__line:nth-child(2) { width: 14px; top: 5px; } .is-active .header__hamburger__inner__line:nth-child(2) { opacity: 0; transform: translateX(10px); } .header__hamburger__inner__line:nth-child(3) { width: 14px; top: 10px; } .is-active .header__hamburger__inner__line:nth-child(3) { top: 5px; transform: rotate(-45deg); } @charset "UTF-8"; /* ヘッダー_外部ページ用 */ .header-simple { box-sizing: border-box; display: flex; align-items: center; height: 50px; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header-simple { height: 60px; } } @media screen and (min-width: 1280px) { .header-simple { height: 90px; } } .header-simple .header__logo { margin-left: 12px; width: 190px; } @media screen and (min-width: 768px) { .header-simple .header__logo { margin-left: 15px; width: 220px; } } @media screen and (min-width: 1280px) { .header-simple .header__logo { margin-left: 30px; width: 272px; } } .header-simple .header__logo__anchor, .header-simple .header__logo a { display: block; } .header-simple .header__logo__anchor img, .header-simple .header__logo a img { max-width: 100%; vertical-align: bottom; } @charset "UTF-8"; /* content */ @media screen and (min-width: 900px) { .content.content--onecolumn { min-width: 1240px; padding-top: 172px; } .content.content--twocolumn { display: flex; min-width: 1240px; padding-top: 172px; } } .content__column { box-sizing: border-box; } .content__column.content__column--side { display: none; width: 370px; border-right: 1px solid #dbdbdb; background-color: #f7f7f7; } @media screen and (min-width: 900px) { .content__column.content__column--side { display: block; } } @media screen and (min-width: 900px) { .content__column.content__column--main { width: calc(100% - 370px); overflow: hidden; } } @charset "UTF-8"; /* サイドバー */ .sidebar__inner { padding: 40px; } @media screen and (min-width: 900px) { .sidebar__inner { padding: 20px 40px 40px; } } .sidebar__inner__box:not(:first-child) { margin-top: 30px; border-top: 1px solid #dbdbdb; } .header .sidebar__inner__box:not(:first-child) { margin-top: 0; background-color: #f7f7f7; } @media screen and (max-width: 1279px) { .header .distribution--common-bottom .support-info { background-color: #f7f7f7; padding: 20px 50px 40px; } } @media screen and (max-width: 767px) { .header .distribution--common-bottom .support-info { padding: 20px 20px 40px 20px; } } /* 製品情報 */ .product-info { position: relative; } .header .product-info { background-color: #f7f7f7; padding: 25px 0 0; } .product-info__title { font-size: 1.6rem; font-weight: 500; line-height: 1.5; } .header .product-info__title { display: none; } .product-info__list { position: absolute; top: 0; right: 0; text-align: right; } .product-info__list__anchor { display: inline-block; position: relative; padding-top: 1px; padding-left: 25px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; transition: opacity .5s; } @media screen and (min-width: 900px) { .product-info__list__anchor:hover { opacity: .6; } } .product-info__list__anchor__icon { position: absolute; padding: 4px; border-radius: 10px; box-sizing: border-box; top: 3px; left: 0; width: 17px; height: 17px; background-color: #0d0d0d; } .product-info__list__anchor__icon__path { fill: #ffffff; } .product-info__search { margin-top: 15px; display: block; position: relative; } .header .product-info__search { margin: 0 20px; } @media screen and (min-width: 768px) { .header .product-info__search { margin: 0 50px; } } .product-info__search__search { outline: 0; border: none; background: none transparent; vertical-align: middle; color: inherit; appearance: none; -webkit-appearance: none; background-color: #ffffff!important;; width: 100%; height: 40px; box-sizing: border-box; font-size: 1.4rem; letter-spacing: .1em; padding: 0 65px 0 20px; } @media screen and (min-width: 900px) { .product-info__search__search { font-size: 1.2rem; } } @media screen and (min-width: 1240px) { .product-info__search__search { font-size: 1.4rem; } } .product-info__search__search::placeholder { color: #cfcfcf; } .product-info__search__submit { position: absolute; border-radius: 0; top: 4px; right: 4px; width: 53px; height: 32px; padding: 0; cursor: pointer; background:#0d0d0d; font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; color: #ffffff; appearance: none; -webkit-appearance: none; border: none; display: block; transition: all .5s; } .product-info__line { margin-top: 13.5px; margin-left: -10px; margin-right: -10px; margin-bottom: -7.5px; display: flex; flex-wrap: wrap; } .header .product-info__line { margin-top: 20px; padding: 20px 20px 0 20px; border-top: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header .product-info__line { padding: 20px 50px 0 50px; } } .product-info__line__item { width: 20%; padding: 7.5px 10px; box-sizing: border-box; } .product-info__line__item__anchor { display: block; position: relative; padding-left: 12px; color: #222222; font-size: 1.3rem; transition: .5s; } .product-info__line__item__anchor:hover, .product-info__line__item__anchor.product-info__line__item__anchor--nolink { opacity: .5; } .product-info__line__item__anchor:before { content: ''; width: 5px; height: 5px; border-top: solid 1px #222222; border-right: solid 1px #222222; position: absolute; left: 0; top: 4px; transform: rotate(45deg); } .filter.filter--seminar-area, .filter.filter--seminar-weekday { margin-top: 20px; } .filter.filter--seminar-area, .filter.filter--seminar-weekday { margin-bottom: 20px; } .header .filter.filter--seminar-area, .header .filter.filter--seminar-weekday { padding: 0 20px; } @media screen and (min-width: 768px) { .header .filter.filter--seminar-area, .header .filter.filter--seminar-weekday { padding: 0 50px; } } .header .filter.filter--product-area { margin-top: 25px; } @media screen and (min-width: 900px) { .filter.filter--product-area { margin-top: 30px; } } .header .filter.filter--product-area { padding: 20px; border-top: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header .filter.filter--product-area { padding: 20px 50px; } } /* お知らせ */ .filter.filter--movie-library, .filter.filter--news { padding: 0 20px 20px; } @media screen and (min-width: 768px) { .filter.filter--movie-library, .filter.filter--news { padding: 0 50px 20px; } } @media screen and (min-width: 900px) { .filter.filter--movie-library, .filter.filter--news { padding: 0 0 20px; } } .header .news-search-wrap { padding: 20px 20px 25px; background-color: #f7f7f7; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .header .news-search-wrap { padding: 20px 50px 25px; } } @media screen and (min-width: 900px) { .news-search-wrap { padding: 20px 0 10px; } } .news-search-title { font-size: 1.4rem; font-weight: 500; line-height: 1.5; } .news-search { margin-top: 15px; display: block; position: relative; } .news-search__search { outline: 0; border: none; background: none transparent; vertical-align: middle; color: inherit; appearance: none; -webkit-appearance: none; background-color: #ffffff!important;; width: 100%; height: 40px; box-sizing: border-box; font-size: 1.4rem; letter-spacing: .1em; padding: 0 65px 0 20px; } @media screen and (min-width: 900px) { .news-search__search { font-size: 1.3rem; } } .news-search__search::placeholder { color: #cfcfcf; } .news-search__submit { position: absolute; border-radius: 0; top: 4px; right: 4px; width: 53px; height: 32px; padding: 0; cursor: pointer; background:#0d0d0d; font-size: 1.2rem; font-weight: 500; letter-spacing: .1em; color: #ffffff; appearance: none; -webkit-appearance: none; border: none; display: block; transition: all .5s; } .filter__lists { } .filter__lists__items:not(:first-child) { margin-top: 12px; } .filter__lists__items.filter__lists__items--disabled { opacity: .4; pointer-events: none; } .filter__lists__items label { position: relative; display: inline-block; padding: 0 0 0 25px; cursor: pointer; font-size: 1.4rem; line-height: 1.5; letter-spacing: .1em; transition: opacity .5s; } @media screen and (min-width: 900px) { .filter__lists__items label:hover { opacity: .6; } } /* デフォルトのチェックボックスを非表示に */ .filter__lists__items input[type=checkbox] { display: none; } .filter__lists__items label:after, .filter__lists__items label:before { position:absolute; content:""; } .filter__lists__items label:before { box-sizing: border-box; width: 15px; height: 15px; top: 2px; left: 0; border:1px solid #dbdbdb; background-color: #fff; border-radius: 3px; } .filter__lists__items label:after { width: 3px; height: 6px; top: 4px; left: 5px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; opacity: 0; transform: rotate(45deg); } .filter__lists__items input[type=checkbox]:checked + label:before { border: 1px solid #808080; background-color: #808080; } .filter__lists__items input[type=checkbox]:checked + label:after { opacity: 1; } .filter__lists__items__sub { padding-left: 15px; padding-top: 10px; } .filter__lists__items__sub__items:not(:first-child) { margin-top: 3px; } /* 領域情報 */ .area-info__title { font-size: 1.6rem; font-weight: 500; line-height: 1.5; } .area-info__line { display: flex; flex-wrap: wrap; margin-top: 10px; margin-left: -10px; margin-right: -10px; margin-bottom: -10px; } .area-info__line__item { width: 33.333%; padding: 10px; box-sizing: border-box; } .area-info__line__item__anchor { position: relative; display: block; text-align: center; } .area-info__line__item__anchor__figure { position: relative; margin: 0 auto; width: 60px; height: 60px; border-radius: 30px; background-color: #ffffff; transition: .5s; } .area-info__line__item__anchor__figure:before { content: ""; background-color: #0d0d0d; border-radius: 50%; display: block; height: 0; transform: translate(-50%, -50%); left: 50%; position: absolute; top: 50%; transition: .5s; width: 0; } .area-info__line__item__anchor:hover .area-info__line__item__anchor__figure:before { width: 100%; height: 100%; } .area-info__line__item__anchor__figure__icon { position: absolute; width: 70%; height: 70%; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .5s; } .area-info__line__item__anchor__figure__icon.area-info__line__item__anchor__figure__icon--hov { opacity: 0; } .area-info__line__item__anchor:hover .area-info__line__item__anchor__figure__icon.area-info__line__item__anchor__figure__icon--hov { opacity: 1; } .area-info__line__item__anchor:hover .area-info__line__item__anchor__figure__icon.area-info__line__item__anchor__figure__icon--def { opacity: 0; } .area-info__line__item__anchor__text { margin-top: 10px; text-align: center; font-size: 1.2rem; line-height: 1.5; } .ea-pharma_hotline { padding: 20px 20px 0; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .ea-pharma_hotline { padding: 20px 50px 0; } } @media screen and (min-width: 1280px) { .ea-pharma_hotline { padding: 20px 0 0; } } .ea-pharma_hotline__inner { padding: 30px 35px 30px; background-color: #ffffff; text-align: center; } @media screen and (min-width: 1280px) { .ea-pharma_hotline__inner { padding: 30px 25px; } } .ea-pharma_hotline__inner__title { border: 1px solid #0d0d0d; margin: 0 auto; max-width: 210px; padding: 6.5px; box-sizing: border-box; font-size: 1.3rem; font-weight: 500; line-height: 1; } .ea-pharma_hotline__inner__tel { margin-top: 20px; display: inline-block; font-family: 'Barlow', sans-serif; font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: .1em; } .ea-pharma_hotline__inner__day { margin-top: 20px; font-size: 1.3rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .ea-pharma_hotline__inner__paragraph { margin-top: 15px; padding: 0 20px; color: #222222; font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .ea-pharma_hotline__inner__paragraph { padding: 0; } } .ea-pharma_hotline__inner__link { margin-top: 20px; } .ea-pharma_hotline__inner__link__anchor { font-size: 1.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; text-decoration: underline; } /* リンク集 */ .sidebar .support-info { margin-top: 20px; } .sidebar .support-info__columns__column:not(:first-child) { margin-top: 20px; } @media screen and (max-width: 767px) { .header .support-info__columns__column:not(:first-child) { margin-top: 20px; } } .hhc_hotline { } .hhc_hotline__inner { padding: 25px 35px 30px; background-color: #ffffff; text-align: center; } .hhc_hotline__inner__title { border: 1px solid #0d0d0d; margin: 0 auto; max-width: 160px; padding: 6.5px; box-sizing: border-box; font-size: 1.3rem; font-weight: 500; line-height: 1; } .hhc_hotline__inner__tel { margin-top: 20px; display: inline-block; font-family: 'Barlow', sans-serif; font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: .1em; } .hhc_hotline__inner__day { margin-top: 20px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .hhc_hotline__inner__paragraph { margin-top: 15px; color: #222222; font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; } .hhc_ai { } .hhc_ai__anchor { display: block; transition: .5s; } .hhc_ai__anchor:hover { opacity: .6; } .hhc_ai__anchor__img { width: 100%; max-width: 100%; } .side-effects:not(:first-child) { margin-top: 20px; } .side-effects__inner__anchor { display: block; text-align: center; padding: 17.5px 15px 17px; border: 1px solid #dbdbdb; background-color: #ffffff; transition: .5s; } .side-effects__inner__anchor:hover { opacity: .6; } .side-effects__inner__anchor__text-wrap { display: inline-block; position: relative; padding-left: 30px; } .side-effects__inner__anchor__text-wrap__arrow { position: absolute; left: 0; top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 30px; padding: 6px; box-sizing: border-box; background-color: #0d0d0d; transition: .5s; } .side-effects__inner__anchor__text-wrap__arrow__path { fill: #ffffff; transition: .5s; } .side-effects__inner__anchor__text-wrap__pin { position: absolute; left: 0; top: calc(50% - 10px); width: 24px; height: 24px; box-sizing: border-box; transition: .5s; fill: #0d0d0d; } /* あとで見る(side) */ .side-effects__inner__anchor.side-effects__inner__anchor__favorite { position: relative; } .side-effects__inner__anchor__favorite__count__wrapper { position: absolute; right: 3.5em; top: 1.25em; width: 32px; } .side-effects__inner__anchor__favorite__count { color: #fff; font-weight: 700; position: absolute; transform: translateY(-0.5em); width: 100%; text-align: center; } .side-effects__inner__anchor__favorite__circle { background: #c00000; border-radius: 50%; bottom: -17px; content: ""; height: 32px; left: 15px; position: absolute; width: 32px; } /* あとで見る(top) */ .site-header__main__content__nav__list__item__inner { .side-effects__inner__anchor__favorite__count__wrapper { right: -28px; } .side-effects__inner__anchor__favorite__circle { left: 0; } } /* あとで見る(会員プルダウン） */ .mr-button-columns__column { a { position: relative; } .side-effects__inner__anchor__favorite__count__wrapper { right: calc(10% - 16px); top: 0; bottom: 2.51rem; } @media screen and (max-width: 767px) { .side-effects__inner__anchor__favorite__count__wrapper { right: calc(50% - 150px + 10px); } } .side-effects__inner__anchor__favorite__circle { left: 0; } .side-effects__inner__anchor__favorite__count { bottom: -1.4rem; } } .mr_button-columns__column.mr-button-columns__column__favorite { position: relative; } .side-effects__inner__anchor__text-wrap__sub { text-align: left; font-size: 1.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .side-effects__inner__anchor__text-wrap__main { text-align: left; /*font-size: 1.7rem;*/ font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } .side-effects__inner__anchor.side-effects__inner__link { position: relative; } .side-effects__inner__anchor.side-effects__inner__link::before { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; pointer-events: none; width: calc(100% - 4px); height: calc(100% - 4px); box-sizing: border-box; border: 1px solid #dbdbdb; } .side-effects__inner__anchor__text-wrap__icon { position: absolute; left: 0; top: calc(50% - 10px); width: 20px; height: 20px; transition: .5s; } .side-effects__inner__attention { margin-top: 10px; color: #222222; font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; } .side-effects__inner__attention__link { font-weight: 500; text-decoration: underline; text-underline-offset: 0.5em; transition: .5s; } .side-effects__inner__attention__link:hover { opacity: .6; text-decoration: underline; } /* common-bottom__nav__list */ @media screen and (min-width: 900px) { .header__main .distribution--common-bottom { display: none; } } .common-bottom-title { padding: 25px 20px 0; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5em; } @media screen and (min-width: 768px) { .common-bottom-title { padding: 25px 50px 0; } } @media screen and (min-width: 900px) { .common-bottom-title { padding: 25px 0 0; } } .common-bottom-title__anchor { position: relative; display: block; padding-right: 30px; transition: opacity .5s; } @media screen and (min-width: 900px) { .common-bottom-title__anchor:hover { opacity: .6; } } .common-bottom-title__anchor__arrow { width: 13px; height: 11px; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; } @media screen and (min-width: 768px) { .common-bottom-title__anchor__arrow { right: 0; } } .menu-back { background-color: #0d0d0d; } .sidebar .menu-back { display: none; } .menu-back__anchor { color: #fff; display: block; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5em; padding: 16px 20px; position: relative; transition: color .5s; } @media screen and (min-width: 768px) { .menu-back__anchor { padding: 16px 50px; } } .common-bottom__nav__list.common-bottom__nav__list--movie-library, .common-bottom__nav__list.common-bottom__nav__list--news { padding-bottom: 40px; background-color: #f7f7f7; } .common-bottom__nav__list__item { border-bottom: 1px solid #dbdbdb; background-color: #f7f7f7; } .menu-back { } .menu-back__arrow { margin-right: 10px; fill: #ffffff; } .common-bottom__nav__list__item__inner { display: block; position: relative; box-sizing: border-box; } .common-bottom__nav__list__item__anchor { display: block; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5em; padding: 21px 60px 21px 20px; position: relative; transition: .5s; } @media screen and (min-width: 768px) { .common-bottom__nav__list__item__anchor { padding: 21px 90px 21px 50px; } } @media screen and (min-width: 900px) { .common-bottom__nav__list__item__anchor { padding: 20px 20px 20px 0; } a.common-bottom__nav__list__item__anchor:hover { opacity: .6; } } .common-bottom__nav__list__item__anchor__deco { display: block; margin-top: 5px; text-transform: uppercase; color: #222222; font-size: 1.0rem; font-weight: 500; font-family: 'Barlow', sans-serif; line-height: 1; letter-spacing: .2em; } .common-bottom__nav__list__item__anchor__inner { position: relative; z-index: 1; } .common-bottom__nav__list__item__anchor__arrow { width: 10px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 28px; } @media screen and (min-width: 768px) { .common-bottom__nav__list__item__anchor__arrow { right: 48px; } } @media screen and (min-width: 900px) { .common-bottom__nav__list__item__anchor__arrow { right: 0; } } .common-bottom__nav__list__item__anchor__arrow__path { fill: #0d0d0d; } .common-bottom__nav__list__item__anchor__icon { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 64px; height: 64px; min-height: 64px; cursor: pointer; } @media screen and (min-width: 768px) { .common-bottom__nav__list__item__anchor__icon { right: 20px; width: 68px; height: 68px; min-height: 68px; } } @media screen and (min-width: 900px) { .common-bottom__nav__list__item__anchor__icon { height: 60px; min-height: 60px; right: -25px; width: 60px; } } .common-bottom__nav__list__item__anchor__icon::before, .common-bottom__nav__list__item__anchor__icon::after { content: ""; display: block; position: absolute; top: calc(50% - 0.5px); left: calc(50% - 5.5px); width: 11px; height: 1px; background-color: #0d0d0d; transition: transform .5s, opacity .5s; } .common-bottom__nav__list__item__anchor__icon::before { transform: rotate(90deg); } .common-bottom__nav__list__item__inner.is-active .common-bottom__nav__list__item__anchor__icon::before { transform: rotate(0); } .common-bottom__nav__list__item__inner.is-active .common-bottom__nav__list__item__anchor__icon::after { opacity: 0; } .common-bottom__nav__list__item__inner.common-bottom__nav__list__item__inner--disabled { opacity: .4; pointer-events: none; } .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region-heading { border-bottom: none; } .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region { border-bottom: none; } @media screen and (min-width: 900px) { .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region .common-bottom__nav__list__item__anchor, .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region-last .common-bottom__nav__list__item__anchor { padding: 0 20px 20px 0; } .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region .common-bottom__nav__list__item__anchor__icon, .common-bottom__nav__list.common-bottom__nav__list--movie-library .common-bottom__nav__list__item--region-last .common-bottom__nav__list__item__anchor__icon { top: 10px; } } .common-bottom__subnav__wrapper { display: none; background-color: #f7f7f7; } .common-bottom__subnav__wrapper { display: none; background-color: #f7f7f7; } /* ILS */ .common-bottom__subnav__wrapper__inner.common-bottom__subnav__wrapper__inner--ils { padding-top: 20px; } .common-bottom__subnav__wrapper__inner__title { padding: 0 20px; color: #0d0d0d; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .common-bottom__subnav__wrapper__inner__title { padding: 0 50px; } } @media screen and (min-width: 900px) { .common-bottom__subnav__wrapper__inner__title { padding: 0; } } .common-bottom__subnav__wrapper__inner__title:not(:first-child) { margin-top: 20px; } .common-bottom__subnav__list { padding: 0 0 20px 20px; } @media screen and (min-width: 900px) { .common-bottom__subnav__list { padding: 0 0 20px 0; } } .common-bottom__subnav__list__item:not(:first-child) { margin-top: 10px; } .common-bottom__subnav__list__item__anchor { position: relative; display: block; padding-right: 60px; color: #0d0d0d; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; transition: opacity .5s; } @media screen and (min-width: 768px) { .common-bottom__subnav__list__item__anchor { padding: 0 90px 0 30px; } } @media screen and (min-width: 900px) { .common-bottom__subnav__list__item__anchor { padding: 0 20px 0 0; } .common-bottom__subnav__list__item__anchor:hover { opacity: .6; } } .common-bottom__nav__list__item__paragraph { margin-top: 15px; font-size: 1.3rem; font-weight: 400; } .common-bottom__subnav__list__item__anchor__text { position: relative; } .common-bottom__subnav__list__item__anchor__arrow { width: 10px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 28px; } @media screen and (min-width: 768px) { .common-bottom__subnav__list__item__anchor__arrow { right: 48px; } } @media screen and (min-width: 900px) { .common-bottom__subnav__list__item__anchor__arrow { right: 0; } } .common-bottom__banner { padding: 40px 20px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .common-bottom__banner { padding: 30px 50px 50px 50px; } } @media screen and (min-width: 900px) { .common-bottom__banner { padding: 20px 0 0 0; } } .common-bottom__banner.common-bottom__banner--products-index { padding: 20px 20px 0px 20px; } @media screen and (min-width: 768px) { .common-bottom__banner.common-bottom__banner--products-index { padding: 30px 50px 0px 50px; } } @media screen and (min-width: 900px) { .common-bottom__banner.common-bottom__banner--products-index { padding: 30px 0px 0; } } .common-bottom__banner.common-bottom__banner--product-detail { padding: 40px 20px 20px 20px; } @media screen and (min-width: 768px) { .common-bottom__banner.common-bottom__banner--product-detail { padding: 40px 50px 20px; } } @media screen and (min-width: 900px) { .common-bottom__banner.common-bottom__banner--product-detail { padding: 20px 0px 0px; } } .common-bottom__banner__list { max-width: 335px; margin: 0 auto; } @media screen and (min-width: 768px) { .common-bottom__banner__list { max-width: none; display: flex; flex-wrap: wrap; margin: 0 -10px; } } @media screen and (min-width: 900px) { .common-bottom__banner__list { display: block; margin: 0; } } .common-bottom__banner__list__item:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .common-bottom__banner__list__item:not(:first-child) { margin-top: 0; } } @media screen and (min-width: 900px) { .common-bottom__banner__list__item:not(:first-child) { margin-top: 20px; } } @media screen and (min-width: 768px) { .common-bottom__banner__list__item:nth-child(n + 3) { margin-top: 20px; } } @media screen and (min-width: 768px) { .common-bottom__banner__list__item { width: 50%; box-sizing: border-box; padding: 0 10px; } } @media screen and (min-width: 900px) { .common-bottom__banner__list__item { width: 100%; padding: 0; } } .common-bottom__banner__list__item__anchor { display: block; transition: opacity .5s; } @media screen and (min-width: 900px) { .common-bottom__banner__list__item__anchor:hover { opacity: .6; } } .common-bottom__banner__list__item__anchor__img { width: 100%; } .common-bottom__products-index-banner { padding: 20px 20px 0px 20px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .common-bottom__products-index-banner { padding: 20px 50px 0px 50px; } } @media screen and (min-width: 900px) { .common-bottom__products-index-banner { padding: 20px 0 0 0; } } .common-bottom__products-index-banner__list { max-width: 335px; margin: 0 auto; } @media screen and (min-width: 768px) { .common-bottom__products-index-banner__list { max-width: none; display: flex; flex-wrap: wrap; margin: 0 -10px; } } @media screen and (min-width: 900px) { .common-bottom__products-index-banner__list { display: block; margin: 0; } } .common-bottom__products-index-banner__list__item:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .common-bottom__products-index-banner__list__item:not(:first-child) { margin-top: 0; } } @media screen and (min-width: 900px) { .common-bottom__products-index-banner__list__item:not(:first-child) { margin-top: 20px; } } @media screen and (min-width: 768px) { .common-bottom__products-index-banner__list__item:nth-child(n + 3) { margin-top: 20px; } } @media screen and (min-width: 768px) { .common-bottom__products-index-banner__list__item { width: 50%; box-sizing: border-box; padding: 0 10px; } } @media screen and (min-width: 900px) { .common-bottom__products-index-banner__list__item { width: 100%; padding: 0; } } .common-bottom__products-index-banner__list__item__anchor { display: block; text-align: center; padding: 28px; background-color: #fff; border: 1px solid #dbdbdb; transition: opacity .5s; } @media screen and (min-width: 900px) { .common-bottom__products-index-banner__list__item__anchor:hover { opacity: .6; } } .common-bottom__products-index-banner__list__item__anchor__text { display: inline-block; position: relative; color: #222222; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } .common-bottom__products-index-banner__list__item .common-bottom__products-index-banner__list__item__anchor__text { padding-left: 20px; } .common-bottom__products-index-banner__list__item .common-bottom__products-index-banner__list__item__anchor__text:before { content: ""; margin-top: 0; display: block; width: 15px; height: 15px; position: absolute; top: 4px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 15px 15px; } /* セミナーオンデマンド */ .common-bottom__ondemand-banner { padding: 30px 20px 40px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .common-bottom__ondemand-banner { padding: 30px 50px 40px; } } @media screen and (min-width:768px) and (max-width:1279px) { .common-bottom__ondemand-banner { display: flex; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1280px) { .common-bottom__ondemand-banner { padding: 30px 0 0 0; } } @media screen and (min-width:768px) and (max-width:1279px) { .common-bottom__ondemand-banner__item { width: 50%; max-width: 324px; padding-left: 10px; padding-right: 10px; } } .common-bottom__ondemand-banner__item:not(:first-child) { margin-top: 20px; } @media screen and (min-width:768px) and (max-width:1279px) { .common-bottom__ondemand-banner__item:not(:first-child) { margin-top: 0; } } .common-bottom__ondemand-banner__item__anchor { position: relative; box-sizing: border-box; background-color: #fff; border: 1px solid #dbdbdb; display: block; padding: 28px 20px; text-align: center; font-size: 1.5rem; font-weight: 500; transition: opacity .5s; } @media screen and (min-width: 768px) { .common-bottom__ondemand-banner__item__anchor:hover { opacity: .6; } } .common-bottom__ondemand-banner__item__anchor__inner { position: relative; display: inline-block; padding-left: 30px; padding-top: 4px; padding-bottom: 4px; } .common-bottom__ondemand-banner__item__anchor__arrow { position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 30px; padding: 6px; box-sizing: border-box; background-color: #0d0d0d; transition: .5s; } .common-bottom__ondemand-banner__item__anchor__arrow__path { fill: #ffffff; transition: .5s; } @charset "UTF-8"; /* 職種モーダル */ .occupation-popup { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgb(13 13 13 / 70%); z-index: 999; } .occupation-popup__inner { box-sizing: border-box; margin: 20px; padding: 40px 20px; background-color: #ffffff; overflow-x: hidden; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; max-height: calc(100% - 40px); } .occupation-popup__inner::-webkit-scrollbar { display:none; } @media screen and (min-width: 768px) { .occupation-popup__inner { margin: 50px; padding: 60px 50px; max-height: calc(100% - 100px); } } @media screen and (min-width: 1280px) { .occupation-popup__inner { max-width: 1000px; } } .occupation-popup__inner__main { text-align: center; } .occupation-popup__inner__main__big-title { color: #0d0d0d; font-size: 1.8rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .occupation-popup__inner__main__big-title { font-size: 2.2rem; } } .occupation-popup__inner__main__title { color: #0d0d0d; font-size: 1.6rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .occupation-popup__inner__main__title { font-size: 2.0rem; } } .occupation-popup__inner__main__title:not(:first-child) { margin-top: 25px; } .occupation-popup__inner__main__text { color: #222222; font-size: 1.3rem; line-height: 2; letter-spacing: .1em; } @media screen and (min-width: 768px) { .occupation-popup__inner__main__text { font-size: 1.4rem; } } .occupation-popup__inner__main__text:not(:first-child) { margin-top: 20px; } .occupation-popup__inner__main__pretext { color: #222222; font-size: 1.3rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .occupation-popup__inner__main__pretext { font-size: 1.4rem; } } .occupation-popup__inner__main__pretext:not(:first-child) { margin-top: 20px; } .occupation-button__columns { margin-top: 20px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .occupation-button__columns { display: flex; justify-content: center; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .occupation-button__columns__column { padding-left: 10px; padding-right: 10px; width: 50%; max-width: 280px; box-sizing: border-box; } } .occupation-button__columns__column:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .occupation-button__columns__column:not(:first-child) { margin-top: 0; } } .occupation-button__columns__column__button { display: block; max-width: 300px; margin-left: auto; margin-right: auto; width: 100%; padding: 14px; cursor: pointer; background: transparent; appearance: none; border: 1px solid #0d0d0d; border-radius: 50px; font-family: 'Noto Sans JP', sans-serif; font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; transition: opacity .5s; } @media screen and (min-width: 768px) { .occupation-button__columns__column__button { max-width: 260px; padding: 18.5px; } } @media screen and (min-width: 1280px) { .occupation-button__columns__column__button:hover { opacity: .6; } } .occupation-button__columns__column__button.occupation-button__columns__column__button--login { color: #ffffff; background-color: #0d0d0d; } .occupation-button__columns__column__button.occupation-button__columns__column__button--new { color: #0d0d0d; background-color: #ffffff; } .occupation-popup__inner__main__list { display: flex; flex-wrap: wrap; margin: 10px -15px -10px -15px; } @media screen and (min-width: 768px) { .occupation-popup__inner__main__list { justify-content: center; margin: 10px 60px -10px; } } .occupation-popup__inner__main__list__item { box-sizing: border-box; padding: 10px 15px; } .occupation-link a { font-size: 1.4rem; font-weight: 500; line-height: 1.5; color: #0d0d0d; display: inline-block; padding-left: 30px; position: relative; text-decoration: none; transition: .5s; } @media screen and (min-width: 768px) { .occupation-link a { font-size: 1.6rem; } } .occupation-link a::before { content: ""; position: absolute; left: 0; border-radius: 100%; border: 1px solid #0d0d0d; background-color: #0d0d0d; top: 0; width: 20px; height: 20px; transition: .5s; } @media screen and (min-width: 768px) { .occupation-link a::before { top: 2px; } } .occupation-link__icon { position: absolute; left: 7px; top: 7px; width: 8px; transition: .5s; } @media screen and (min-width: 768px) { .occupation-link__icon { top: 9px; } } .occupation-link__icon__path { fill: #ffffff; transition: .5s; } @media screen and (min-width: 1280px) { .occupation-link a:hover::before { background-color: #ffffff } .occupation-link a:hover .occupation-link__icon__path { fill: #0d0d0d; } } @charset "UTF-8"; /* noscript */ .noscript { display: block; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; line-height: 1.4; position: relative; z-index: 9999; } /* 印刷時の設定 */ /* 研修会・セミナー独自の設定 */ @media print { /* 2カラムテンプレートの調整 */ .content.content--twocolumn { display: block; } .content.content--twocolumn:after { content: ""; display: block; clear: both; } .content__column.content__column--side { display: block; float: left; } .content__column.content__column--main { width: calc(100% - 370px); overflow: hidden; float: right; } /* 研究会セミナーテンプレートの調整 */ body.seminar-template .header, body.seminar-template .content__column.content__column--side, body.seminar-template .index-search-button, body.seminar-template .footer { display: none; } body.seminar-template .content.content--twocolumn { padding-top: 0!important; } body.seminar-template .content__column.content__column--main { width: 100%; } body.seminar-template .home-seminar__columns { display: block; } body.seminar-template .home-seminar__columns__column { float: left; display: block; } body.seminar-template .home-seminar__columns:after { content: ""; display: block; clear: both; } body.seminar-template .home-seminar__columns__column__image { width: 300px; height: 169px; } body.seminar-template .home-seminar__columns__column:nth-child(2) { width: calc(100% - 330px); margin-left: 30px; } body.seminar-template .outside-links-list { display: block; } body.seminar-template .outside-links-list__item { float: left; display: block; padding-left: 0; padding-right: 0; margin-top: 5px; margin-bottom: 5px; margin-left: 10px; margin-right: 10px; width: 300px; } body.seminar-template .outside-links-list:after { content: ""; display: block; clear: both; } } /* vendors */ /* Slider */ .slick-slider { outline: none; position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-slide div { vertical-align: bottom; } .slick-slider:focus { outline: none; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } @media screen and (max-width:768px){ .slick-list{ margin-top: 50px; } } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir="rtl"] .slick-slide { float: right; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /** * Swiper 5.4.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * http://swiperjs.com * * Copyright 2014-2020 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 15, 2020 */ @font-face { font-family: swiper-icons; src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff"); font-weight: 400; font-style: normal; } :root { --swiper-theme-color:#007aff; } .swiper-container { margin-left: auto; margin-right: auto; position: relative; list-style: none; padding: 0; z-index: 1; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-multirow-column > .swiper-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -ms-flex-negative: 0; flex-shrink: 0; width: 100%; height: 100%; position: relative; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; } .swiper-slide-invisible-blank { visibility: hidden; } .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide { height: auto; } .swiper-container-autoheight .swiper-wrapper { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-transition-property: height, -webkit-transform; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; } .swiper-container-3d { -webkit-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); } .swiper-container-css-mode > .swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none; } .swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar { display: none; } .swiper-container-css-mode > .swiper-wrapper > .swiper-slide { scroll-snap-align: start start; } .swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; scroll-snap-type: x mandatory; } .swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper { -webkit-scroll-snap-type: y mandatory; -ms-scroll-snap-type: y mandatory; scroll-snap-type: y mandatory; } :root { --swiper-navigation-size:44px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(-1 * var(--swiper-navigation-size)/ 2); z-index: 10; cursor: pointer; 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; color: var(--swiper-navigation-color, var(--swiper-theme-color)); } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0.35; cursor: auto; pointer-events: none; } .swiper-button-next:after, .swiper-button-prev:after { font-family: swiper-icons; font-size: var(--swiper-navigation-size); text-transform: none !important; letter-spacing: 0; text-transform: none; font-variant: initial; line-height: 1; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 10px; right: auto; } .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after { content: "prev"; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 10px; left: auto; } .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after { content: "next"; } .swiper-button-next.swiper-button-white, .swiper-button-prev.swiper-button-white { --swiper-navigation-color:#ffffff; } .swiper-button-next.swiper-button-black, .swiper-button-prev.swiper-button-black { --swiper-navigation-color:#000000; } .swiper-button-lock { display: none; } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 0.3s opacity; transition: 0.3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 10px; left: 0; width: 100%; } .swiper-pagination-bullets-dynamic { overflow: hidden; font-size: 0; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transform: scale(0.33); transform: scale(0.33); position: relative; } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main { -webkit-transform: scale(1); transform: scale(1); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next { -webkit-transform: scale(0.66); transform: scale(0.66); } .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next { -webkit-transform: scale(0.33); transform: scale(0.33); } .swiper-pagination-bullet { width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: 0.2; } button.swiper-pagination-bullet { border: none; margin: 0; padding: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-bullet-active { opacity: 1; background: var(--swiper-pagination-color, var(--swiper-theme-color)); } .swiper-container-vertical > .swiper-pagination-bullets { right: 10px; top: 50%; -webkit-transform: translate3d(0px, -50%, 0); transform: translate3d(0px, -50%, 0); } .swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 6px 0; display: block; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 8px; } .swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { display: inline-block; -webkit-transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s top, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s top; transition: 0.2s transform, 0.2s top, 0.2s -webkit-transform; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 4px; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); white-space: nowrap; } .swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s left, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s left; transition: 0.2s transform, 0.2s left, 0.2s -webkit-transform; } .swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { -webkit-transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s right, 0.2s -webkit-transform; transition: 0.2s transform, 0.2s right; transition: 0.2s transform, 0.2s right, 0.2s -webkit-transform; } .swiper-pagination-progressbar { background: rgba(0, 0, 0, 0.25); position: absolute; } .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--swiper-pagination-color, var(--swiper-theme-color)); position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: left top; transform-origin: left top; } .swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { -webkit-transform-origin: right top; transform-origin: right top; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { width: 100%; height: 4px; left: 0; top: 0; } .swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical > .swiper-pagination-progressbar { width: 4px; height: 100%; left: 0; top: 0; } .swiper-pagination-white { --swiper-pagination-color:#ffffff; } .swiper-pagination-black { --swiper-pagination-color:#000000; } .swiper-pagination-lock { display: none; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-scrollbar-lock { display: none; } .swiper-zoom-container { width: 100%; height: 100%; 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; text-align: center; } .swiper-zoom-container > canvas, .swiper-zoom-container > img, .swiper-zoom-container > svg { max-width: 100%; max-height: 100%; -o-object-fit: contain; object-fit: contain; } .swiper-slide-zoomed { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s infinite linear; animation: swiper-preloader-spin 1s infinite linear; -webkit-box-sizing: border-box; box-sizing: border-box; border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color)); border-radius: 50%; border-top-color: transparent; } .swiper-lazy-preloader-white { --swiper-preloader-color:#fff; } .swiper-lazy-preloader-black { --swiper-preloader-color:#000; } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; -webkit-transition-property: opacity; transition-property: opacity; } .swiper-container-fade .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active, .swiper-container-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; visibility: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; height: 100%; } .swiper-container-cube .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-slide-shadow-bottom, .swiper-container-cube .swiper-slide-shadow-left, .swiper-container-cube .swiper-slide-shadow-right, .swiper-container-cube .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0px; width: 100%; height: 100%; background: #000; opacity: 0.6; -webkit-filter: blur(50px); filter: blur(50px); z-index: 0; } .swiper-container-flip { overflow: visible; } .swiper-container-flip .swiper-slide { pointer-events: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .swiper-container-flip .swiper-slide .swiper-slide { pointer-events: none; } .swiper-container-flip .swiper-slide-active, .swiper-container-flip .swiper-slide-active .swiper-slide-active { pointer-events: auto; } .swiper-container-flip .swiper-slide-shadow-bottom, .swiper-container-flip .swiper-slide-shadow-left, .swiper-container-flip .swiper-slide-shadow-right, .swiper-container-flip .swiper-slide-shadow-top { z-index: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*! Modaal - accessible modals - v0.4.4 by Humaan, for all humans. http://humaan.com */ .modaal-noscroll { overflow: hidden; } .modaal-accessible-hide { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; opacity: .7!important; background: #0d0d0d!important; } .modaal-wrapper { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: auto; opacity: 1; box-sizing: border-box; -webkit-overflow-scrolling: touch; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .modaal-wrapper * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; } .modaal-wrapper .modaal-close { border: none; background: transparent; padding: 0; -webkit-appearance: none; } .modaal-wrapper.modaal-start_none { display: none; opacity: 1; } .modaal-wrapper.modaal-start_fade { opacity: 0; } .modaal-wrapper *[tabindex="0"] { outline: none !important; } .modaal-wrapper.modaal-fullscreen { overflow: hidden; } .modaal-outer-wrapper { display: table; position: relative; width: 100%; height: 100%; } .modaal-fullscreen .modaal-outer-wrapper { display: block; } .modaal-inner-wrapper { display: table-cell; width: 100%; height: 100%; position: relative; vertical-align: middle; text-align: center; padding: 80px 80px; } @media screen and (max-width: 1049px) { .modaal-inner-wrapper { padding: 80px 50px; } } @media screen and (max-width: 767px) { .modaal-inner-wrapper { padding: 50px 20px; } } .modaal-fullscreen .modaal-inner-wrapper { padding: 0; display: block; vertical-align: top; } .modaal-container { position: relative; display: inline-block; width: 100%; margin: auto; text-align: left; max-width: 900px; border-radius: 0px; cursor: auto; overflow: inherit!important; } .modaal-container video { width: 100%; } .modaal-container.is_loading { height: 100px; width: 100px; overflow: hidden; } .modaal-fullscreen .modaal-container { max-width: none; height: 100%; overflow: auto; } .modaal-close { position: absolute; right: 0; top: -28px; color: #fff; cursor: pointer; opacity: 1; width: 18px; height: 18px; background: rgba(0, 0, 0, 0); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .modaal-close:focus, .modaal-close:hover { outline: none; } .modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after { opacity: .5; } .modaal-close span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-close:before, .modaal-close:after { display: block; content: " "; position: absolute; top: 0; left: 8px; width: 2px; height: 18px; background: #ffffff; -webkit-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .modaal-close:before { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .modaal-close:after { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modaal-fullscreen .modaal-close { background: #afb7bc; right: 10px; top: 10px; } .modaal-confirm-wrap { padding: 30px 0 0; text-align: center; font-size: 0; } .modaal-confirm-btn { font-size: 14px; display: inline-block; margin: 0 10px; vertical-align: middle; cursor: pointer; border: none; background: transparent; } .modaal-confirm-btn.modaal-ok { padding: 10px 15px; color: #fff; background: #555; border-radius: 3px; -webkit-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } .modaal-confirm-btn.modaal-ok:hover { background: #2f2f2f; } .modaal-confirm-btn.modaal-cancel { text-decoration: underline; } .modaal-confirm-btn.modaal-cancel:hover { text-decoration: none; color: #2f2f2f; } .modaal-instagram .modaal-container { width: auto; background: transparent; box-shadow: none !important; } .modaal-instagram .modaal-content-container { padding: 0; background: transparent; } .modaal-instagram .modaal-content-container > blockquote { width: 1px !important; height: 1px !important; opacity: 0 !important; } .modaal-instagram iframe { opacity: 0; margin: -6px !important; border-radius: 0 !important; width: 1000px !important; max-width: 800px !important; box-shadow: none !important; -webkit-animation: instaReveal 1s linear forwards; animation: instaReveal 1s linear forwards; } .modaal-image .modaal-inner-wrapper { padding-left: 140px; padding-right: 140px; } .modaal-image .modaal-container { width: auto; max-width: 100%; } .modaal-gallery-wrap { position: relative; color: #fff; } .modaal-gallery-item { display: none; } .modaal-gallery-item img { display: block; } .modaal-gallery-item.is_active { display: block; } .modaal-gallery-label { position: absolute; left: 0; width: 100%; margin: 20px 0 0; font-size: 18px; text-align: center; color: #fff; } .modaal-gallery-label:focus { outline: none; } .modaal-gallery-control { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; cursor: pointer; color: #fff; width: 50px; height: 50px; background: rgba(0, 0, 0, 0); border: none; border-radius: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .modaal-gallery-control.is_hidden { opacity: 0; cursor: default; } .modaal-gallery-control:focus, .modaal-gallery-control:hover { outline: none; background: #fff; } .modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after { background: #afb7bc; } .modaal-gallery-control span { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; } .modaal-gallery-control:before, .modaal-gallery-control:after { display: block; content: " "; position: absolute; top: 16px; left: 25px; width: 4px; height: 18px; border-radius: 4px; background: #fff; -webkit-transition: background 0.5s ease-in-out; transition: background 0.5s ease-in-out; } .modaal-gallery-control:before { margin: -5px 0 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .modaal-gallery-control:after { margin: 5px 0 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modaal-gallery-next-inner { left: 100%; margin-left: 40px; } .modaal-gallery-next-outer { right: 45px; } .modaal-gallery-prev:before, .modaal-gallery-prev:after { left: 22px; } .modaal-gallery-prev:before { margin: 5px 0 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .modaal-gallery-prev:after { margin: -5px 0 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .modaal-gallery-prev-inner { right: 100%; margin-right: 40px; } .modaal-gallery-prev-outer { left: 45px; } .modaal-video-wrap { position: relative; max-width: 1300px; margin: auto; } .modaal-video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000; margin-left: auto; margin-right: auto; } .modaal-video-container iframe, .modaal-video-container object, .modaal-video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modaal-iframe .modaal-content { width: 100%; height: 100%; } .modaal-iframe-elem { width: 100%; height: 100%; display: block; } .modaal-loading-spinner { background: none; position: absolute; width: 200px; height: 200px; top: 50%; left: 50%; margin: -100px 0 0 -100px; -webkit-transform: scale(0.25); -ms-transform: scale(0.25); transform: scale(0.25); } .modaal-loading-spinner > div { width: 24px; height: 24px; margin-left: 4px; margin-top: 4px; position: absolute; } .modaal-loading-spinner > div > div { width: 100%; height: 100%; border-radius: 15px; background: #fff; } .modaal-loading-spinner > div:nth-of-type(1) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; } .modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; } .modaal-loading-spinner > div:nth-of-type(1) { -ms-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(2) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .12s; animation-delay: .12s; } .modaal-loading-spinner > div:nth-of-type(2) { -ms-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(3) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .25s; animation-delay: .25s; } .modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; } .modaal-loading-spinner > div:nth-of-type(3) { -ms-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(4) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .37s; animation-delay: .37s; } .modaal-loading-spinner > div:nth-of-type(4) { -ms-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(5) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .5s; animation-delay: .5s; } .modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div { -ms-animation: modaal-loading-spinner 1s linear infinite; -moz-animation: modaal-loading-spinner 1s linear infinite; -webkit-animation: modaal-loading-spinner 1s linear infinite; -o-animation: modaal-loading-spinner 1s linear infinite; } .modaal-loading-spinner > div:nth-of-type(5) { -ms-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(6) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .62s; animation-delay: .62s; } .modaal-loading-spinner > div:nth-of-type(6) { -ms-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(7) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .75s; animation-delay: .75s; } .modaal-loading-spinner > div:nth-of-type(7) { -ms-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); } .modaal-loading-spinner > div:nth-of-type(8) > div { -webkit-animation: modaal-loading-spinner 1s linear infinite; animation: modaal-loading-spinner 1s linear infinite; -webkit-animation-delay: .87s; animation-delay: .87s; } .modaal-loading-spinner > div:nth-of-type(8) { -ms-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); -webkit-transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); } @media only screen and (min-width: 1400px) { .modaal-video-container { padding-bottom: 0; height: 731px; } } @media only screen and (max-width: 1140px) { .modaal-image .modaal-inner-wrapper { padding-left: 25px; padding-right: 25px; } .modaal-gallery-control { top: auto; bottom: 20px; -webkit-transform: none; -ms-transform: none; transform: none; background: rgba(0, 0, 0, 0.7); } .modaal-gallery-control:before, .modaal-gallery-control:after { background: #fff; } .modaal-gallery-next { left: auto; right: 20px; } .modaal-gallery-prev { left: 20px; right: auto; } } @media screen and (max-width: 900px) { .modaal-instagram iframe { width: 500px !important; } } @media only screen and (max-width: 600px) { .modaal-instagram iframe { width: 280px !important; } } @media screen and (max-height: 1100px) { .modaal-instagram iframe { width: 700px !important; } } @media screen and (max-height: 1000px) { .modaal-instagram iframe { width: 600px !important; } } @media screen and (max-height: 900px) { .modaal-instagram iframe { width: 500px !important; } .modaal-video-container { max-width: 900px; max-height: 510px; } } @media only screen and (max-height: 820px) { .modaal-gallery-label { display: none; } } @keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes instaReveal { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes modaal-loading-spinner { 0% { opacity: 1; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: .1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } @keyframes modaal-loading-spinner { 0% { opacity: 1; -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: .1; -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } } /* テンプレート独自のスタイル */ @charset "UTF-8"; /* 領域情報 */ .section-area-infomation:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .section-area-infomation:not(:first-child) { margin-top: 80px; } } .heading-2-area { } .heading-2-area__inner { position: relative; } .heading-2-area__inner__icon { position: absolute; display: block; width: 30px; height: 30px; top: 4px; left: 0; } @media screen and (min-width: 768px) { .heading-2-area__inner__icon { width: 50px; height: 50px; top: 2px; } } .heading-2-area__inner__text { padding-left: 35px; font-size: 2.2rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .heading-2-area__inner__text { padding-left: 60px; font-size: 3.2rem; } } .heading-2-area + .heading-3 { margin-top: 25px; } @media screen and (min-width: 768px) { .heading-2-area + .heading-3 { margin-top: 45px; } } .product-banner { margin-top: 30px; } @media screen and (min-width: 768px) { .product-banner { margin-top: 40px; display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } } .product-banner__item { box-sizing: border-box; } @media screen and (min-width: 768px) { .product-banner__item { width: 50%; padding-left: 15px; padding-right: 15px; } } @media screen and (min-width: 1280px) { .product-banner__item { width: 33.333%; } } .product-banner__item:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .product-banner__item:not(:first-child) { margin-top: 0; } .product-banner__item:nth-child(n+3) { margin-top: 30px; } } @media screen and (min-width: 1280px) { .product-banner__item:nth-child(n+3) { margin-top: 0; } .product-banner__item:nth-child(n+4) { margin-top: 30px; } } .product-banner__item__anchor { width: 100%; transition: .5s; } @media screen and (min-width: 768px) { .product-banner__item__anchor:hover { opacity: .7; } } .product-banner__item__anchor img { width: 100%; max-width: 100%; } .product-heading-link { margin-top: 35px; } @media screen and (min-width: 768px) { .product-heading-link { margin-top: 50px; margin-bottom: 70px; display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } } .product-heading-link__item { box-sizing: border-box; } @media screen and (min-width: 768px) { .product-heading-link__item { width: 33.333%; padding-left: 15px; padding-right: 15px; } } @media screen and (min-width: 1280px) { .product-heading-link__item { width: 25%; } } .product-heading-link__item:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .product-heading-link__item:not(:first-child) { margin-top: 0; } .product-heading-link__item:nth-child(n+4) { margin-top: 40px; } } @media screen and (min-width: 1280px) { .product-heading-link__item:nth-child(n+4) { margin-top: 0; } .product-heading-link__item:nth-child(n+5) { margin-top: 40px; } } .others-area { } @media screen and (min-width: 768px) { .others-area__list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } .others-area__list__item { box-sizing: border-box; } @media screen and (min-width: 768px) { .others-area__list__item { padding-left: 10px; padding-right: 10px; width: 50%; } } @media screen and (min-width: 1280px) { .others-area__list__item { width: 33.333%; } } .others-area__list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .others-area__list__item:not(:first-child) { margin-top: 0; } .others-area__list__item:nth-child(n+3) { margin-top: 20px; } } @media screen and (min-width: 1280px) { .others-area__list__item:nth-child(n+3) { margin-top: 0; } .others-area__list__item:nth-child(n+4) { margin-top: 20px; } } .others-area__list__item__anchor { display: block; box-sizing: border-box; height: 100%; padding: 30px 30px 40px; border: 1px solid #dbdbdb; text-align: center; transition: .5s; } @media screen and (min-width: 768px) { .others-area__list__item__anchor:hover { border-color: #0d0d0d; } } .others-area__list__item__anchor__figure { position: relative; margin: 0 auto; width: 100px; height: 100px; border-radius: 100px; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .others-area__list__item__anchor:hover .others-area__list__item__anchor__figure { background-color: #0d0d0d; } } .others-area__list__item__anchor__figure img { position: absolute; width: 60px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity .5s; } .others-area__list__item__anchor__figure__hov { opacity: 0; } @media screen and (min-width: 768px) { .others-area__list__item__anchor:hover .others-area__list__item__anchor__figure__def { opacity: 0; } .others-area__list__item__anchor:hover .others-area__list__item__anchor__figure__hov { opacity: 1; } } .others-area__list__item__anchor__title { margin-top: 25px; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .others-area__list__item__anchor__title { font-size: 2.2rem; } } .others-area__list__item__anchor__text { margin-top: 15px; text-align: left; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .others-area__list__item__anchor__text { font-size: 1.5rem; } } .others-area__list__item__anchor .link-text__anchor:hover { opacity: 1; } @charset "UTF-8"; /* blog */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ /* container */ .container.blog-container { max-width: calc(1130px + 20px * 2); } @media screen and (min-width: 768px) { .container.blog-container { max-width: calc(1130px + 30px * 2); } } @media screen and (min-width: 1280px) { .container.blog-container { max-width: calc(1130px + 100px * 2); } } /* blog contents area */ @media screen and (min-width: 1280px) { .blog-content { display: flex; margin-left: -35px; margin-right: -35px; } } .blog-content__main { width: 100%; } @media screen and (min-width: 1280px) { .blog-content__main { box-sizing: border-box; max-width: 820px; padding-left: 35px; padding-right: 35px; } } /* === article / 記事詳細 */ /* blog post hero */ .hero--blog-post { border-bottom: 1px solid #dbdbdb; } .blog-article { position: relative; border-top: 1px solid #dbdbdb; } .blog-article::before { content: ""; position: absolute; top: -1px; left: 0; width: 100px; height: 1px; background-color: #0d0d0d; } @media screen and (min-width: 768px) { .blog-article::before { width: 120px; } } .blog-article__head { padding-top: 25px; } .blog-article__head__date { display: block; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5; } @media screen and (min-width: 768px) { .blog-article__head__date { font-size: 1.6rem; } } .blog-article__head__heading { margin-top: 6px; color: #0d0d0d; font-size: 2.0rem; font-weight: 700; letter-spacing: .15em; line-height: 1.5em; } @media screen and (min-width: 768px) { .blog-article__head__heading { font-size: 2.8rem; } } .blog-article__head__category-list { margin-top: 15px; margin-right: -5px; margin-left: -5px; margin-bottom: -5px; } @media screen and (min-width: 768px) { .blog-article__head__category-list { margin-top: 20px; } } .blog-article__head__category-list__item { display: inline-block; min-width: 100px; margin: 5px; } @media screen and (min-width: 768px) { .blog-article__head__category-list__item { min-width: 120px; } } .blog-article__head__category-list__item__anchor { display: block; background-color: #F1F1ED; color: #222222; font-size: 1.2rem; letter-spacing: .15em; text-align: center; padding: 7px 15px 6px; border-radius: 3px; -webkit-transition: background-color .5s; transition: background-color .5s; } @media screen and (min-width: 768px) { .blog-article__head__category-list__item__anchor { font-size: 1.3rem; } } @media screen and (min-width: 1280px) { .blog-article__head__category-list__item__anchor:hover { background-color: #dbdbdb; } } .blog-article__head__thumbnail { margin-top: 25px; margin-right: -20px; margin-bottom: 45px; margin-left: -20px; } @media screen and (min-width: 768px) { .blog-article__head__thumbnail { margin-top: 30px; margin-right: -50px; margin-bottom: 50px; margin-left: -50px; } } @media screen and (min-width: 1280px) { .blog-article__head__thumbnail { margin-right: 0; margin-left: 0; } } .blog-article__head__thumbnail img { width: 100%; max-width: 100%; vertical-align: middle; } /* blog-article__body__content */ .blog-article__body__content.natural { padding-bottom: 0.6em; /* 最後のコンテンツが微妙に切れてしまうため対策 */ } .blog-article__body__content h2, .blog-article__body__summary__body h2 { margin-top: calc( 45px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 25px - (((1em * 2) - 1em) / 2) ); padding: 13px 15px; border-left: 4px solid #0d0d0d; background-color: #f7f7f7; color: #222222; font-size: 2.0rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .blog-article__body__content h2, .blog-article__body__summary__body h2 { margin-top: calc( 60px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 30px - (((1em * 2) - 1em) / 2) ); padding: 9px 20px; border-left: 5px solid #0d0d0d; font-size: 2.5rem; } } .blog-article__body__content h2:first-child, .blog-article__body__summary__body h2:first-child { margin-top: 0; } .blog-article__body__content h2:last-child, .blog-article__body__summary__body h2:last-child { margin-bottom: 0; } .blog-article__body__content h3, .blog-article__body__summary__body h3 { position: relative; margin-top: calc( 35px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 25px - (((1em * 2) - 1em) / 2) ); padding-bottom: 8px; color: #222222; font-size: 1.8rem; font-weight: 700; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .blog-article__body__content h3, .blog-article__body__summary__body h3 { margin-top: calc( 45px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 30px - (((1em * 2) - 1em) / 2) ); font-size: 2.0rem; } } .blog-article__body__content h3:first-child, .blog-article__body__summary__body h3:first-child { margin-top: 0; } .blog-article__body__content h3:last-child, .blog-article__body__summary__body h3:last-child { margin-bottom: 0; } .blog-article__body__content h3::before, .blog-article__body__summary__body h3::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .blog-article__body__content h3::after, .blog-article__body__summary__body h3::after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-top: 1px solid #808080; border-bottom: 1px solid #808080; } .blog-article__body__content h4, .blog-article__body__summary__body h4 { margin-top: calc( 35px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 20px - (((1em * 2) - 1em) / 2) ); padding-left: 12px; border-left: 3px solid #0d0d0d; color: #222222; font-size: 1.7rem; font-weight: 700 !important; letter-spacing: .15em; line-height: 1.5em; } @media screen and (min-width: 768px) { .blog-article__body__content h4, .blog-article__body__summary__body h4 { margin-top: calc( 40px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 25px - (((1em * 2) - 1em) / 2) ); font-size: 1.8rem; } } .blog-article__body__content h4:first-child, .blog-article__body__summary__body h4:first-child { margin-top: 0; } .blog-article__body__content h4:last-child, .blog-article__body__summary__body h4:last-child { margin-bottom: 0; } .blog-article__body__content h4::before, .blog-article__body__summary__body h4::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .blog-article__body__content h4::after, .blog-article__body__summary__body h4::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } .blog-article__body__content p, .blog-article__body__summary__body p { margin-top: calc( 35px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 20px - (((1em * 2) - 1em) / 2) ); color: #222222; font-size: 1.5rem; letter-spacing: .2em; line-height: 2em; } @media screen and (min-width: 768px) { .blog-article__body__content p, .blog-article__body__summary__body p { margin-top: calc( 40px - (((1em * 2) - 1em) / 2) ); margin-bottom: calc( 25px - (((1em * 2) - 1em) / 2) ); font-size: 1.6rem; } } .blog-article__body__content p:first-child, .blog-article__body__summary__body p:first-child { margin-top: 0; } .blog-article__body__content p:last-child, .blog-article__body__summary__body p:last-child { margin-bottom: 0; } .blog-article__body__content p::before, .blog-article__body__summary__body p::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .blog-article__body__content p::after, .blog-article__body__summary__body p::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } .blog-article__body__content strong, .blog-article__body__summary__body strong { font-weight: 700; } .blog-article__body__content em, .blog-article__body__summary__body em { font-style: italic; } .blog-article__body__content img, .blog-article__body__summary__body img { display: block; width: 100%; max-width: 100%; margin: 20px auto; } @media screen and (min-width: 768px) { .blog-article__body__content img, .blog-article__body__summary__body img { max-width: 650px; margin-top: 30px; margin-bottom: 30px; } } .blog-article__body__content img:first-child, .blog-article__body__summary__body img:first-child { margin-top: 0; } .blog-article__body__content img:last-child, .blog-article__body__summary__body img:last-child { margin-bottom: 0; } /* まとめ */ .blog-article__body__summary { margin-top: 45px; border: 1px solid #dbdbdb; border-radius: 5px; } @media screen and (min-width: 768px) { .blog-article__body__summary { margin-top: 60px; } } .blog-article__body__summary__head { padding: 11px 20px 10px; border-radius: 5px 5px 0 0; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .blog-article__body__summary__head { padding: 14px 30px; } } .blog-article__body__summary__head__heading { color: #222222; font-size: 1.8rem; font-weight: 700; letter-spacing: .1em; } @media screen and (min-width: 768px) { .blog-article__body__summary__head__heading { font-size: 2.0rem; } } .blog-article__body__summary__body { padding: 17px 20px; } @media screen and (min-width: 768px) { .blog-article__body__summary__body { padding: 27px 30px; } } /* cta */ .blog-article__body__cta { margin-top: 45px; margin-bottom: 45px; } @media screen and (min-width: 768px) { .blog-article__body__cta { margin-top: 60px; margin-bottom: 60px; } } .blog-article__body__cta:first-child { margin-top: 0; } .blog-article__body__cta:last-child { margin-bottom: 45px; } .blog-article__body__cta .container { max-width: 100%; padding-right: inherit; padding-left: inherit; } .natural .blog-article__body__cta a { border-bottom: none; } .natural .blog-article__body__cta a[target="_blank"] { padding-left: 50px; border-bottom: none; } @media screen and (max-width: 767px) { .natural .blog-article__body__cta a[target="_blank"] { padding-left: 20px; } } .natural .blog-article__body__cta a[target="_blank"]::before { content: none; } .blog-article__body__cta .cta-text-wrap { padding-bottom: 0; } .blog-article__body__cta .cta-text-wrap::before { content: none; } .blog-article__body__cta__anchor { display: block; } .blog-article__body__cta__content img { width: 100%; max-width: 100%; margin-right: auto; margin-left: auto; vertical-align: middle; } /* 前の記事 / 次の記事 */ .blog-article__foot { margin-top: 45px; padding-top: 15px; border-top: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .blog-article__foot { margin-top: 60px; padding-top: 20px; } } @media screen and (min-width: 768px) { .blog-article__foot__nav__list { display: flex; margin-right: -30px; margin-left: -30px; } .blog-article__foot__nav__list__item { width: 50%; padding-left: 30px; padding-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } } .blog-article__foot__nav__list__item--prev { margin-right: auto; } .blog-article__foot__nav__list__item--next { margin-top: 20px; margin-left: auto; padding-top: 20px; border-top: 1px dotted #dbdbdb; } @media screen and (min-width: 768px) { .blog-article__foot__nav__list__item--next { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px dotted #dbdbdb; } } .blog-article__foot__nav__list__item--next .blog-article__foot__nav__list__item__heading { text-align: right; } .blog-article__foot__nav__list__item__heading { color: #222222; font-size: 1.6rem; font-weight: 700; letter-spacing: .1em; } .blog-article__foot__nav__list__item__block { display: flex; align-items: flex-start; margin-top: 15px; } .blog-article__foot__nav__list__item__block__image { width: 100%; max-width: 110px; aspect-ratio: 16/9; } @media screen and (min-width: 768px) { .blog-article__foot__nav__list__item__block__image { max-width: 120px; } } .blog-article__foot__nav__list__item__block__image img { width: 100%; height: 100%; object-fit: cover; } .blog-article__foot__nav__list__item__block__heading { width: 100%; margin-left: 15px; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; transition: color .5s; } @media screen and (min-width: 768px) { .blog-article__foot__nav__list__item__block__heading { max-width: 210px; font-size: 1.4rem; } } @media screen and (min-width: 1280px) { a:hover .blog-article__foot__nav__list__item__block__heading { color: #0d0d0d; } } .blog-article__foot__back { margin-top: 60px; text-align: center; } @media screen and (min-width: 768px) { .blog-article__foot__back { margin-top: 80px; } } .blog-article__foot__back__anchor { position: relative; padding-left: 38px; color: #222222; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.4; transition: color .5s; } .blog-article__foot__back__anchor__icon { display: block; position: absolute; top: calc(50% - 14px); left: 0; width: 28px; height: 28px; transform: rotate(180deg); } .blog-article__foot__back__anchor__icon__circle { fill: #222222; transition: fill .5s; } @media screen and (min-width: 1280px) { .blog-article__foot__back__anchor:hover { color: #0d0d0d; } a:hover .blog-article__foot__back__anchor__icon__circle { fill: #0d0d0d; } } /* article / 記事詳細 === */ /* === article / 記事一覧 */ /* blog listing hero */ .hero--blog-listing .hero__image { background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/hero.jpg); } @media only screen and (max-width: 767px) { .hero--blog-listing .hero__image { background-position: 50% 50%; } } @media screen and (min-width: 768px) { .blog-content__main__article-list { display: flex; flex-wrap: wrap; margin-right: -20px; margin-left: -20px; } } @media screen and (min-width: 768px) { .blog-content__main__article-list__item { box-sizing: border-box; width: 50%; padding-right: 20px; padding-left: 20px; } } .blog-content__main__article-list__item:nth-child(n+2) { margin-top: 40px; } @media screen and (min-width: 768px) { .blog-content__main__article-list__item:nth-child(n+2) { margin-top: 0; } } @media screen and (min-width: 768px) { .blog-content__main__article-list__item:nth-child(n+3) { margin-top: 40px; } } .blog-content__main__article-list__item__block { display: block; } /* blog list item head */ .blog-content__main__article-list__item__block__head__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .blog-content__main__article-list__item__block__head__image::before { content: ""; display: block; padding-bottom: 56.25%; } .blog-content__main__article-list__item__block__head__date { display: block; margin-top: 15px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .2em; transition: color .5s; } @media screen and (min-width: 768px) { .blog-content__main__article-list__item__block__head__date { margin-top: 17px; font-size: 1.4rem; } } @media screen and (min-width: 1280px) { a:hover .blog-content__main__article-list__item__block__head__date { color: #0d0d0d; } } /* blog list item body */ .blog-content__main__article-list__item__block__body { margin-top: 7px; } .blog-content__main__article-list__item__block__body__title { color: #222222; font-size: 1.7rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; transition: color .5s; } @media screen and (min-width: 768px) { .blog-content__main__article-list__item__block__body__title { font-size: 1.8rem; } } @media screen and (min-width: 1280px) { a:hover .blog-content__main__article-list__item__block__body__title { color: #0d0d0d; } } .blog-content__main__pager { display: flex; align-items: center; justify-content: center; margin-top: 50px; } @media screen and (min-width: 768px) { .blog-content__main__pager { margin-top: 75px; } } .blog-content__main__pager__item:not(:first-child) { margin-left: 15px; } .blog-content__main__pager__item__anchor { display: block; font-size: 1.7rem; font-weight: 500; font-family: 'Barlow', sans-serif; letter-spacing: .1em; color: #808080; padding-left: 5px; padding-right: 5px; -webkit-transition: color .5s; transition: color .5s; } @media screen and (min-width: 768px) { .blog-content__main__pager__item__anchor { font-size: 1.8rem; } } @media screen and (min-width: 1280px) { .blog-content__main__pager__item__anchor:hover { color: #0d0d0d; } } .blog-content__main__pager__item.is-current .blog-content__main__pager__item__anchor { color: #0d0d0d; } .blog-content__main__pager__item__anchor__icon { display: block; width: 24px; height: 24px; } @media screen and (min-width: 768px) { .blog-content__main__pager__item__anchor__icon { width: 28px; height: 28px; } } .blog-content__main__pager__item__anchor--prev .blog-content__main__pager__item__anchor__icon { transform: rotate(180deg); } .blog-content__main__pager__item__anchor__icon__circle { fill: #808080; transition: fill .5s; } @media screen and (min-width: 1280px) { a:hover .blog-content__main__pager__item__anchor__icon__circle { fill: #0d0d0d; } } /* blog list side menu */ .blog-content__aside { width: 100%; margin-top: 60px; } @media screen and (min-width: 1280px) { .blog-content__aside { box-sizing: border-box; max-width: 380px; margin-top: 0; padding-right: 35px; padding-left: 35px; } } .blog-content__aside__magazine { max-width: 450px; margin-left: auto; margin-right: auto; } .blog-content__aside__magazine__anchor { padding: 30px; display: block; color: #ffffff; background-color: #0d0d0d; font-size: 1.5rem; letter-spacing: .2em; text-align: center; position: relative; -webkit-transition: opacity .5s; transition: opacity .5s; } @media screen and (min-width: 768px) { .blog-content__aside__magazine__anchor { padding: 45px 30px 45px 30px; font-size: 1.8rem; } } @media screen and (min-width: 1280px) { .blog-content__aside__magazine__anchor { padding: 32px 30px 32px 30px; } .blog-content__aside__magazine__anchor:hover { opacity: .7; } } .blog-content__aside__magazine__anchor__inner { display: block; position: relative; padding-top: 30px; } @media screen and (min-width: 768px) { .blog-content__aside__magazine__anchor__inner { padding-top: 42px; } } .blog-content__aside__magazine__anchor__inner__icon { position: absolute; width: 30px; height: 20px; top: 0; left: calc(50% - 15px); } @media screen and (min-width: 768px) { .blog-content__aside__magazine__anchor__inner__icon { width: 38px; height: 25px; left: calc(50% - 19px); } } .blog-content__aside__magazine__anchor__inner__icon__path { fill: #ffffff; } .blog-content__aside__heading { position: relative; padding-bottom: 10px; border-bottom: 1px solid #dbdbdb; color: #222222; font-weight: 700; font-size: 1.8rem; letter-spacing: .1em; line-height: 1.5; } .blog-content__aside__heading:not(:first-child) { margin-top: 40px; } .blog-content__aside__heading::before { content: ""; background-color: #0d0d0d; height: 1px; width: 85px; bottom: -1px; left: 0; position: absolute; } .blog-content__aside__article-list { margin-top: 20px; } @media screen and (min-width: 768px) { .blog-content__aside__article-list { margin-top: 30px; } } .blog-content__aside__article-list__item:not(:first-child) { margin-top: 20px; padding-top: 20px; border-top: 1px dotted #dbdbdb; } .blog-content__aside__article-list__item:last-child { padding-bottom: 20px; border-bottom: 1px dotted #dbdbdb; } .blog-content__aside__article-list__item__block { display: flex; } .blog-content__aside__article-list__item__block__head { width: 100%; max-width: 100px; } .blog-content__aside__article-list__item__block__head__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .blog-content__aside__article-list__item__block__head__image::before { content: ""; display: block; padding-bottom: 56.25%; } .blog-content__aside__article-list__item__block__head__date { display: block; margin-top: 10px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.2rem; letter-spacing: .25em; transition: color .5s; } @media screen and (min-width: 768px) { .blog-content__aside__article-list__item__block__head__date { font-size: 1.3rem; } } @media screen and (min-width: 1280px) { a:hover .blog-content__aside__article-list__item__block__head__date { color: #0d0d0d; } } .blog-content__aside__article-list__item__block__body { width: 100%; margin-left: 15px; } @media screen and (min-width: 1280px) { .blog-content__aside__article-list__item__block__body { max-width: 195px; } } .blog-content__aside__article-list__item__block__body__title { color: #222222; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; transition: color .5s; } @media screen and (min-width: 768px) { .blog-content__aside__article-list__item__block__body__title { font-size: 1.4rem; } } @media screen and (min-width: 1280px) { a:hover .blog-content__aside__article-list__item__block__body__title { color: #0d0d0d; } } /* article / 記事一覧 === */ @charset "UTF-8"; /* デジタルMR */ .section-manager-mr-box { margin-top: 40px; } @media screen and (min-width: 768px) { .section-manager-mr-box { margin-top: 50px; } } .manager-mr-box { padding: 20px; box-sizing: border-box; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .manager-mr-box { padding: 30px; } } .manager-mr-box__dl { display: flex; align-items: flex-start; } .manager-mr-box__dt { /* width: 76px; */ border: 1px solid #0d0d0d; margin-right: 20px; padding: 2px; text-align: center; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; white-space: nowrap; } @media screen and (min-width: 768px) { .manager-mr-box__dt { /* width: 85px; */ padding: 3px; font-size: 1.5rem; } } .manager-mr-box__dd { margin-top: 2px; width: calc(100% - 96px); font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .manager-mr-box__dd { margin-top: 4px; } } .manager-mr-box__text { margin-top: 15px; font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .manager-mr-box__text { margin-top: 10px; font-size: 1.4rem; } } @media screen and (min-width: 768px) { .manager-mr { margin-top: 40px; } } .section-manager-mr { margin-top: 30px; } @media screen and (min-width: 768px) { .section-manager-mr { margin-top: 45px; } } .manager-mr-h3 { font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .manager-mr-h3 { font-size: 2.0rem; } } .manager-mr + .manager-mr-h3 { margin-top: 50px; } @media screen and (min-width: 768px) { .manager-mr + .manager-mr-h3 { margin-top: 80px; } } @media screen and (min-width: 1280px) { .manager-mr + .manager-mr-h3 { margin-top: 50px; } } @media screen and (min-width:768px) and (max-width:1279px) { .manager-mr + .heading-2 { margin-top: 115px; } } .manager-mr__columns { margin-top: 30px; } @media screen and (min-width: 1280px) { .manager-mr__columns { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } } @media screen and (min-width: 1280px) { .manager-mr__columns__column { box-sizing: border-box; width: 50%; padding-left: 25px; padding-right: 25px; } } .manager-mr__columns__column:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .manager-mr__columns__column:not(:first-child) { margin-top: 80px; } } @media screen and (min-width: 1280px) { .manager-mr__columns__column:not(:first-child) { margin-top: 0; } .manager-mr__columns__column:nth-child(n+3) { margin-top: 40px; } } .inner__columns { display: flex; margin-left: -12.5px; margin-right: -12.5px; } @media screen and (min-width: 768px) { .inner__columns { margin-left: -12.5px; margin-right: -12.5px; } } .inner__columns:not(:first-child) { margin-top: 40px; } .inner__columns__column { box-sizing: border-box; padding-left: 10px; padding-right: 10px; } @media screen and (min-width: 768px) { .inner__columns__column { padding-left: 12.5px; padding-right: 12.5px; } } .inner__columns__column.inner__columns__column--image { width: 130px; } @media screen and (min-width: 768px) { .inner__columns__column.inner__columns__column--image { width: 175px; } } .inner__columns__column.inner__columns__column--text { width: calc(100% - 130px); } @media screen and (min-width: 768px) { .inner__columns__column.inner__columns__column--text { width: calc(100% - 175px); } } .inner__columns__column__image { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .inner__columns__column__image:before { content: ""; display: block; padding-top: 100%; } .inner__columns__column--text__name { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .inner__columns__column--text__name { font-size: 1.8rem; } } .inner__columns__column--text__paragraph { margin-top: 10px; font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .inner__columns__column--text__paragraph { font-size: 1.4rem; } } .inner__columns__column--text__button-columns { margin-top: 20px; } @media screen and (min-width:768px) and (max-width:1279px) { .inner__columns__column--text__button-columns { display: flex; margin-left: -5px; margin-right: -5px; } .inner-button { width: 220px; box-sizing: border-box; padding-left: 5px; padding-right: 5px; } } @media screen and (min-width: 1280px) { .inner-button { width: 230px; } } .inner-button__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; max-width: 220px; padding: 13.5px 18px; background-color: #0d0d0d; color: #ffffff; font-size: 1.3rem; font-weight: 500; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .inner-button__anchor { font-size: 1.4rem; padding: 15px 18px; } } @media screen and (min-width: 1280px) { .inner-button__anchor:hover { opacity: .6; } } .inner-button:not(:first-child) { margin-top: 10px; } @media screen and (min-width:768px) and (max-width:1279px) { .inner-button:not(:first-child) { margin-top: 0; } } .inner-button__anchor__text { position: relative; display: inline-block; } .inner-button.inner-button--reserve .inner-button__anchor__text { padding-left: 25px; } .inner-button.inner-button--contact .inner-button__anchor__text { padding-left: 20px; } .inner-button__anchor__text:before { content: ""; display: inline-block; position: absolute; background-position: center; background-repeat: no-repeat; background-size: contain; } .inner-button.inner-button--reserve .inner-button__anchor__text:before { top: 2px; left: 0; width: 16px; height: 11px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pc.svg); } .inner-button.inner-button--contact .inner-button__anchor__text:before { top: 3px; left: 0; width: 14px; height: 10px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_mail_white.svg); } .section-digital-mr-movie { margin-top: 30px; } @media screen and (min-width: 768px) { .digital-mr-movie { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } } @media screen and (min-width: 768px) { .digital-mr-movie__item { width: 50%; box-sizing: border-box; padding-left: 25px; padding-right: 25px; } } .digital-mr-movie__item:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .digital-mr-movie__item:not(:first-child) { margin-top: 0; } .digital-mr-movie__item:nth-child(n+3) { margin-top: 30px; } } .digital-mr-movie__item__image-wrap { overflow: hidden; position: relative; } .digital-mr-movie__item__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .digital-mr-movie__item__anchor:hover .digital-mr-movie__item__image { transform: scale(1.05); } } .digital-mr-movie__item__image:before { content: ""; display: block; padding-top: 56.25%; } .digital-mr-movie__item__image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .digital-mr-movie__item__anchor:hover .digital-mr-movie__item__image:after { opacity: .5; } } .digital-mr-movie__item__image__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .digital-mr-movie__item__image__svg__path { fill: #ffffff; } .digital-mr-movie__item__image__time { position: absolute; right: 0; bottom: 0; background-color: grey; color: #fff; font-size: 1.2rem; box-sizing: border-box; display: inline-block; font-size: 1.1rem; letter-spacing: .1em; padding: 5px 10px; text-align: center; } .digital-mr-movie__item__text { margin-top: 15px; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .digital-mr-movie__item__text { margin-top: 25px; font-size: 1.8rem; } } .section-manager-mr-login-box { margin-top: 40px; } @media screen and (min-width: 768px) { .section-manager-mr-login-box { margin-top: 50px; } } .manager-mr-login-box { padding: 30px 20px; box-sizing: border-box; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .manager-mr-login-box { padding: 40px; } } .manager-mr-login-box.manager-mr-login-box--bottom { margin-top: 60px; } @media screen and (min-width: 768px) { .manager-mr-login-box.manager-mr-login-box--bottom { margin-top: 80px; } } .manager-mr-login-box__columns { } @media screen and (min-width:768px) { .manager-mr-login-box__columns { display: flex; justify-content: center; margin-left: -10px; margin-right: -10px; } .manager-mr-login-box-button { width: 290px; box-sizing: border-box; padding-left: 10px; padding-right: 10px; } } .manager-mr-login-box-button__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; max-width: 295px; padding: 18.5px 18px; border: 1px solid #0d0d0d; font-size: 1.3rem; font-weight: 500; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .manager-mr-login-box-button__anchor { font-size: 1.4rem; padding: 22px 18px; } } .manager-mr-login-box-button.manager-mr-login-box-button--login .manager-mr-login-box-button__anchor { background-color: #0d0d0d; color: #ffffff; } .manager-mr-login-box-button.manager-mr-login-box-button--new .manager-mr-login-box-button__anchor { color: #0d0d0d; } @media screen and (min-width: 1280px) { .manager-mr-login-box-button__anchor:hover { opacity: .6; } } .manager-mr-login-box-button:not(:first-child) { margin-top: 15px; } @media screen and (min-width:768px) { .manager-mr-login-box-button:not(:first-child) { margin-top: 0; } } .manager-mr-login-box-button__anchor__text { position: relative; display: inline-block; } .manager-mr-login-box__text { margin-top: 20px; text-align: center; color: #222222; font-size: 1.2rem; line-height: 1.5; } @media screen and (min-width:768px) { .manager-mr-login-box__text { font-size: 1.4rem; } } @charset "UTF-8"; /* lp */ .lp-form form .legal-consent-container:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container:not(:first-child) { margin-top: 30px; } } .lp-form form fieldset { max-width: 100%; } .lp-form form fieldset:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .lp-form form fieldset:not(:first-child) { margin-top: 30px; } } .lp-form form .hs-form-field > .input { margin-right: 0; } .lp-form form fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; box-sizing: border-box; } @media screen and (min-width: 1280px) { .lp-form form fieldset.form-columns-2 .hs-form-field { width: 100%; float: left; } } .lp-form form fieldset.form-columns-2 .hs-form-field > .input { margin-right: 0; } .lp-form form fieldset.form-columns-2 .hs-form-field:nth-child(2) { margin-top: 40px; } @media screen and (min-width: 768px) { .lp-form form fieldset.form-columns-2 .hs-form-field:nth-child(2) { margin-top: 30px; } } @media screen and (min-width: 1280px) { .lp-form form .hs-form-field { display: flex; flex-wrap: wrap; } } .lp-form form .hs-form-field:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field:not(:first-child) { margin-top: 30px; } } .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > label { display: block; font-size: 1.6rem; width: 200px; letter-spacing: .15em; line-height: 2em; font-weight: 500; border-top: 1px solid #0d0d0d; padding-top: 9px; } @media screen and (max-width: 767px) { .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > label { font-size: 1.3rem; width: 100%; } } .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input { display: block; margin-top: 7px; margin-right: 0; } @media screen and (min-width: 1280px) { .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input { margin-top: 0; margin-left: 30px; width: calc(100% - 230px); } } .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input ul > li.hs-form-checkbox:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input ul > li.hs-form-checkbox:not(:first-child) { margin-top: 20px; } } .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input ul > li.hs-form-checkbox span { font-size: 1.3rem; line-height: 2; padding-left: 5px; width: calc(100% - 25px); display: inline-flex; color: #222222; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > .input ul > li.hs-form-checkbox span { font-size: 1.6rem; line-height: 1.5; letter-spacing: .15em; } } .lp-form form .hs-fieldtype-checkbox label.hs-form-checkbox-display input[type="checkbox"] { width: 13px !important; height: 13px; border-radius: 3px; top: 4px; } @media screen and (min-width: 768px) { .lp-form form .hs-fieldtype-checkbox label.hs-form-checkbox-display input[type="checkbox"] { top: 10px; } } .lp-form form .hs-form-field:not(.hs-fieldtype-booleancheckbox) > ul.hs-error-msgs .hs-error-msg { color: #CB0303; } .lp-form form .hs-form-field.hs-fieldtype-text > .input input, .lp-form form .hs-form-field.hs-fieldtype-text > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input input, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-select > .input input, .lp-form form .hs-form-field.hs-fieldtype-phonenumber > .input input, .lp-form form .hs-form-field.hs-fieldtype-select > .input textarea { outline: 0; background: none transparent; vertical-align: middle; color: inherit; appearance: none; border: 1px solid #dbdbdb; border-radius: 5px; width: 100% !important; box-sizing: border-box; font-size: 1.3rem; letter-spacing: .15em; padding: 12px 14px 11px; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-text > .input input, .lp-form form .hs-form-field.hs-fieldtype-text > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input input, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-select > .input input, .lp-form form .hs-form-field.hs-fieldtype-phonenumber > .input input, .lp-form form .hs-form-field.hs-fieldtype-select > .input textarea { font-size: 1.6rem; padding: 15px 14px 14px; } } .lp-form form .hs-form-field.hs-fieldtype-text > .input input.hs-input.invalid.error, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea.hs-input.invalid.error, .lp-form form .hs-form-field.hs-fieldtype-phonenumber > .input textarea.hs-input.invalid.error { border-color: #CB0303; } .lp-form form .hs-form-field.hs-fieldtype-text > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-select > .input textarea { min-height: 120px; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-text > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea, .lp-form form .hs-form-field.hs-fieldtype-select > .input textarea { min-height: 200px; } } .lp-form form .hs-form-field.hs-fieldtype-text .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-select .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-field-desc { margin-top: 10px; font-size: 1.6rem; color: #0d0d0d; } @media screen and (max-width: 1279px) { .lp-form form .hs-form-field.hs-fieldtype-text .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-select .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-field-desc { width: auto; } } @media screen and (max-width: 767px) { .lp-form form .hs-form-field.hs-fieldtype-text .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-select .hs-field-desc, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-field-desc { margin-left: 0; font-size: 1.3rem; } } .lp-form form .hs-form-field.hs-fieldtype-text .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-select .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-field-desc[style*="display:block"] + .input { margin-top: 10px; } @media screen and (min-width: 1280px) { .lp-form form .hs-form-field.hs-fieldtype-text .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-select .hs-field-desc[style*="display:block"] + .input, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-field-desc[style*="display:block"] + .input { margin-top: 0; margin-left: 230px; } } /* ヘルプテキストがある場合に落ちないようにする */ @media screen and (min-width: 1280px) { .lp-form form .hs-form-field .hs-field-desc[style*="display:block"] { width: calc(100% - 230px); margin-left: 30px; } .lp-form form .hs-form-field .hs-field-desc[style*="display:block"] + .input { margin-left: 230px; } } .lp-form form .hs-form-field.hs-fieldtype-text .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-select .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-checkbox .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-radio .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-file .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-date .hs-error-msgs { color: #CB0303; font-size: 1.5rem; font-weight: 400; line-height: 2; letter-spacing: .05em; margin-top: 10px; margin-left: 230px; width: 100%; } @media screen and (max-width: 1279px) { .lp-form form .hs-form-field.hs-fieldtype-text .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-select .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-checkbox .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-radio .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-file .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-date .hs-error-msgs { margin-left: 0; } } @media screen and (max-width: 767px) { .lp-form form .hs-form-field.hs-fieldtype-text .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-phonenumber .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-textarea .hs-error-msgs, .lp-form form .hs-form-field.hs-fieldtype-select .hs-error-msgs { font-size: 1.3rem; } } .lp-form form .hs-form-field.hs-fieldtype-select > .input { position: relative; max-width: 350px; } .lp-form form .hs-form-field.hs-fieldtype-text > .input input.hs-input.invalid.error, .lp-form form .hs-form-field.hs-fieldtype-phonenumber > .input input.hs-input.invalid.error, .lp-form form .hs-form-field.hs-fieldtype-textarea > .input textarea.hs-input.invalid.error { border-color: #CB0303; } .lp-form form .hs-form-field.hs-fieldtype-select > .input::before { content: ''; position: absolute; top: 18px; right: 15px; width: 10px; height: 6px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCA2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzBmMGYwZjt9PC9zdHlsZT48L2RlZnM+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBhdGggaWQ9IuWQiOS9k18xNCIgZGF0YS1uYW1lPSLlkIjkvZMgMTQiIGNsYXNzPSJjbHMtMSIgZD0iTTUsNGw1LTRWMkw1LDZaTTAsMlYwTDUsNFY2WiIvPjwvZz48L2c+PC9zdmc+"); background-repeat: no-repeat; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-select > .input::before { top: 23px; right: 20px; } } /* IE */ @media all and (-ms-high-contrast: none) { .lp-form form .hs-form-field.hs-fieldtype-select > .input::before { display: none; } } .lp-form form .hs-form-field.hs-fieldtype-select > .input select.hs-input { display: block; outline: none; text-indent: 0.01px; background: none transparent; color: inherit; appearance: none; border: 1px solid #dbdbdb; border-radius: 5px; width: 100%; max-height: 40px; box-sizing: border-box; font-size: 1.3rem; font-weight: 400; line-height: 1.5; letter-spacing: .15em; padding: 11px 30px 11px 14px; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-select > .input select.hs-input { font-size: 1.6rem; font-weight: 400; padding: 12px 40px 14px 14px; max-height: 50px; } } /* IE */ @media all and (-ms-high-contrast: none) { .lp-form form .hs-form-field.hs-fieldtype-select > .input select.hs-input { padding: 15px 25px 9px 12px; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input { text-align: center; } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label { display: inline-block; } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > input { display: none; } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > input:checked + span::after { opacity: 1; pointer-events: auto; } .lp-form form .checkbox-title { display: inline-block; float: left; font-size: 1.3rem; letter-spacing: .15em; line-height: 2em; font-weight: 400; border-top: 1px solid #0d0d0d; width: 100%; padding-top: 9px; } @media screen and (min-width: 768px) { .lp-form form .checkbox-title { font-size: 1.6rem; width: 200px; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input { margin-left: 0; margin-top: 5px; text-align: center; } @media screen and (min-width: 1280px) { .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input { margin-left: 30px; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span { display: inline-block; font-size: 1.7rem; letter-spacing: .2em; line-height: 2em; font-weight: 500; text-align: left; position: relative; padding-left: 40px; margin-left: 0; } @media screen and (max-width: 767px) { .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span { font-size: 1.5rem; padding-left: 30px; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span::before { content: ''; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #dbdbdb; box-sizing: border-box; background-color: transparent; position: absolute; top: 4px; left: 0; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span::before { width: 25px; height: 25px; } } /* IE */ @media all and (-ms-high-contrast: none) { .lp-form form .legal-consent-container .hs-fieldtype-booleancheckbox .input label > span::before { top: 5px; } .lp-form form .legal-consent-container .hs-fieldtype-booleancheckbox .input label > span::after { top: 11px !important; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > input:checked + span::before { border-color: #dbdbdb; background-color: #dbdbdb; } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span::after { content: ''; width: 11px; height: 8px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNi45NiAxMS40NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGlkPSLjg5HjgrlfOTciIGRhdGEtbmFtZT0i44OR44K5IDk3IiBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDUuMWw2Ljg5LDYuMzRMMTcsMi4yMSwxNC43LDAsNi44OSw3LjMxLDIuMDcsMi43N1oiLz48L2c+PC9nPjwvc3ZnPg=="); background-size: cover; position: absolute; top: 10px; left: 4px; transition: opacity .2s; opacity: 0; pointer-events: none; } @media screen and (min-width: 768px) { .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span::after { width: 17px; height: 11px; top: 11px; } } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .input label > span .aInput { text-decoration: underline; } .lp-form form .hs-form-field.hs-fieldtype-booleancheckbox .hs-error-msgs { color: #CB0303; text-align: center; margin-top: 10px; width: 100%; } .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list { display: flex; flex-wrap: wrap; } .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list .hs-form-radio { display: inline-block; } @media screen and (max-width: 767px) { .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list.multi-container, .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list.multi-container .hs-form-radio { display: block; } } .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list .hs-form-radio:not(:last-child) { margin-right: 25px; } .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list .hs-form-radio label>span { color: #222222; font-size: 1.6rem; font-weight: 400; line-height: 2; letter-spacing: .15em; padding-left: 10px; } @media screen and (max-width: 767px) { .lp-form form .hs-form-field.hs-fieldtype-radio .input ul.inputs-list .hs-form-radio label>span { font-size: 13px; } } .lp-form form .hs-form-field.hs-fieldtype-date .input .hs-dateinput .fn-date-picker.pika-single { border-radius: 5px; border: 1px solid #dbdbdb; border-bottom-color: #dbdbdb; } .fn-date-picker .pika-label { font-size: 1.5rem !important; font-weight: 400 !important; color: #222222; } .fn-date-picker .pika-next, .fn-date-picker .pika-prev { background-size: inherit !important; position: absolute; transition: .5s; } .fn-date-picker .pika-prev { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgNiAxMiI+CiAgPHBhdGggaWQ9IuWkmuinkuW9ol82MyIgZGF0YS1uYW1lPSLlpJrop5LlvaIgNjMiIGQ9Ik02LDBsNiw2SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEyKSByb3RhdGUoLTkwKSIgZmlsbD0iI2JhYWQ1MiIvPgo8L3N2Zz4K") !important; left: 0; top: 0; } .fn-date-picker .pika-next { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiB2aWV3Qm94PSIwIDAgNiAxMiI+CiAgPHBhdGggaWQ9IuWkmuinkuW9ol82MiIgZGF0YS1uYW1lPSLlpJrop5LlvaIgNjIiIGQ9Ik02LDBsNiw2SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2KSByb3RhdGUoOTApIiBmaWxsPSIjYmFhZDUyIi8+Cjwvc3ZnPgo=") !important; right: 0; top: 0; } .fn-date-picker .pika-table th { border-style: inherit !important; color: #414141 !important; font-size: 1.2rem !important; font-weight: 500 !important; } .fn-date-picker .pika-button { border-radius: 2px !important; color: #414141 !important; font-size: 1.3rem !important; font-weight: 500; background-color: #F1F1ED !important; } .fn-date-picker .is-today .pika-button { color: #BAAD52 !important; font-weight: 500 !important; } .fn-date-picker .pika-table abbr { cursor: inherit !important; text-decoration: none !important; } button.pika-button.pika-day:hover { background: #909090 !important; } .fn-date-picker .is-selected .pika-button { color: #fff !important; font-weight: 500 !important; background: #BAAD52 !important; box-shadow: none !important; } .lp-form form .hs-form-field .input .hs-dateinput input.hs-input { box-sizing: border-box; border-radius: 5px; border: 1px solid #dbdbdb; color: #222222; font-size: 16px; font-weight: 300; line-height: 2; letter-spacing: .15em; height: 50px; padding: 15px; width: 100%; } @media screen and (max-width: 767px) { .lp-form form .hs-form-field .input .hs-dateinput input.hs-input { font-size: 13px; height: 40px; } } .lp-form form .legal-consent-container .hs-fieldtype-booleancheckbox { justify-content: center; float: inherit; width: 100%; } .lp-form form .legal-consent-container .hs-fieldtype-booleancheckbox .input label>span { display: inline-block; font-size: 1.5rem; letter-spacing: .2em; line-height: 2em; font-weight: 400; position: relative; padding-left: 30px; margin-left: 0; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .hs-fieldtype-booleancheckbox .input label>span { font-size: 1.7rem; padding-left: 40px; } } .legal-consent-container .hs-error-msgs label { color: #cb0303 !important; } .lp-form form .legal-consent-container .hs-richtext { color: #0d0d0d; font-size: 1.3rem; letter-spacing: .15em; line-height: 2em; } .lp-form form .legal-consent-container .hs-richtext a { display: inline; position: relative; border-bottom: 1px solid #E8D815; text-decoration: none; transition: .5s; } @media screen and (min-width: 1280px) { .lp-form form .legal-consent-container .hs-richtext a:hover { color: #0d0d0d; } } .lp-form form .legal-consent-container .hs-richtext a[target="_blank"] { padding-left: 20px; } @media screen and (max-width: 767px) { .lp-form form .legal-consent-container .hs-richtext a[target="_blank"] { padding-left: 15px; } } .lp-form form .legal-consent-container .hs-richtext a[target="_blank"]:before { background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS45NjkiIGhlaWdodD0iMTEuOTY5IiB2aWV3Qm94PSIwIDAgMTEuOTY5IDExLjk2OSI+CiAgPHBhdGggaWQ9IuODkeOCuV82NDIxIiBkYXRhLW5hbWU9IuODkeOCuSA2NDIxIiBkPSJNLTc4OC41MjksMGgtNi4zNDJhLjUyOC41MjgsMCwwLDAtLjUyOC41MjlWMi4xNjdoLTMuODdhLjcuNywwLDAsMC0uNy43djguNGEuNy43LDAsMCwwLC43LjdoOC40YS43LjcsMCwwLDAsLjctLjdWNy40aDEuNjM4QS41MjguNTI4LDAsMCwwLTc4OCw2Ljg3MVYuNTI5QS41MjkuNTI5LDAsMCwwLTc4OC41MjksMFptLTIuNjM4LDEwLjk2OWgtNy44di03LjhoMy41N3YzLjdhLjUyNy41MjcsMCwwLDAsLjUyOC41MjhoMy43Wk0tNzg5LDYuNGgtNS40VjFoNS40WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzk5Ljk2OSkiIGZpbGw9IiM0MTQxNDEiLz4KPC9zdmc+Cg==") no-repeat center; background-position: center; background-repeat: no-repeat; background-size: cover; content: ""; margin-top: -6px; position: absolute; top: 10px; left: 0; width: 12px; height: 12px; } @media all and (-ms-high-contrast:none){ .lp-form form .legal-consent-container .hs-richtext a[target="_blank"]:before { margin-top: -6px; } } .lp-form form .legal-consent-container .hs-richtext strong { font-weight: 700; } .lp-form form .legal-consent-container .hs-richtext::before { content: ''; display: block; width: 0; height: 0; margin-top: calc((1 - 2) * .5em); } .lp-form form .legal-consent-container .hs-richtext::after { content: ''; display: block; width: 0; height: 0; margin-bottom: calc((1 - 2) * .5em); } .lp-form form .legal-consent-container .hs-richtext:not(:first-child) { margin-top: 20px; } .lp-form form .legal-consent-container .hs-richtext:not(:last-child) { margin-bottom: 20px; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .hs-richtext { font-size: 1.4rem; } } .lp-form form .legal-consent-container .input { text-align: center; } .lp-form form .legal-consent-container .input label { display: inline-block; } .lp-form form .legal-consent-container .input label > input { display: none; } .lp-form form .legal-consent-container .input label > input:checked + span::after { opacity: 1; pointer-events: auto; } .lp-form form .legal-consent-container .input label > span { display: inline-block; font-size: 1.5rem; letter-spacing: .2em; line-height: 2em; font-weight: 700; text-align: left; position: relative; padding-left: 30px; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .input label > span { font-size: 1.7rem; } } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .input label > span { padding-left: 40px; } } .lp-form form .legal-consent-container .input label > span::before { content: ''; width: 20px; height: 20px; border-radius: 5px; box-sizing: border-box; background-color: #dbdbdb; position: absolute; top: 4px; left: 0; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .input label > span::before { width: 25px; height: 25px; } } .lp-form form .legal-consent-container .input label > span::after { content: ''; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNi45NiAxMS40NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGlkPSLjg5HjgrlfOTciIGRhdGEtbmFtZT0i44OR44K5IDk3IiBjbGFzcz0iY2xzLTEiIGQ9Ik0wLDUuMWw2Ljg5LDYuMzRMMTcsMi4yMSwxNC43LDAsNi44OSw3LjMxLDIuMDcsMi43N1oiLz48L2c+PC9nPjwvc3ZnPg=="); background-size: cover; position: absolute; transition: opacity .2s; opacity: 0; pointer-events: none; } @media screen and (min-width: 768px) { .lp-form form .legal-consent-container .input label > span::after { width: 17px; height: 11px; top: calc(50% - 5px); } } .lp-form form .legal-consent-container .hs-error-msgs { color: #CB0303; text-align: center; margin-top: 10px; width: 100%; } .lp-form form .hs-submit { margin-top: 20px; } @media screen and (min-width: 768px) { .lp-form form .hs-submit { margin-top: 30px; } } .lp-form form .hs-submit .actions { width: 280px; margin-left: auto; margin-right: auto; position: relative; background-color: #222222; } .lp-form form .hs-submit .actions::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #0d0d0d; transform: scale(0, 1); transform-origin: right top; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99), -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); } .lp-form form .hs-submit .actions input { text-align: left; width: 100%; cursor: pointer; background: transparent; appearance: none; border: none; display: block; color: #ffffff; font-size: 1.4rem; letter-spacing: .2em; line-height: 1.5em; font-weight: 500; padding: 15px 30px 14px; position: relative; z-index: 1; transition: all .5s; } @media screen and (min-width: 768px) { .lp-form form .hs-submit .actions input { font-size: 1.5rem; } } @media screen and (min-width: 768px) { .lp-form form .hs-submit .actions input { font-size: 1.6rem; padding: 19px 30px 17px; } } .lp-form form .hs-submit .actions::after { content: ''; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+DQoJPGRlZnM+DQoJPHN0eWxlPi5pY29fYXJyb3dfY2lyY2xlX3doaXRle2ZpbGw6I2ZmZjt9PC9zdHlsZT4NCjwvZGVmcz4NCgk8cGF0aCBjbGFzcz0iaWNvX2Fycm93X2NpcmNsZV93aGl0ZSIgZD0iTTE0LDBBMTQsMTQsMCwxLDAsMjgsMTQsMTQsMTQsMCwwLDAsMTQsMFpNMTMsMThIMTFsNC00LTQtNGgybDQsNFoiLz4NCjwvc3ZnPg=="); width: 24px; height: 24px; position: absolute; top: calc(50% - 12px); right: 20px; } @media screen and (min-width: 768px) { .lp-form form .hs-submit .actions::after { width: 28px; height: 28px; top: calc(50% - 14px); } } @media screen and (min-width: 768px) { .lp-form form .hs-submit .actions:hover::before { transform-origin: left top; transform: scale(1, 1); } } .hs_error_rollup { color: #CB0303; margin-top: 30px; } @charset "UTF-8"; /* news */ .news-list { position: relative; border-bottom: 1px solid #dbdbdb; } .news-list__item:not(:first-child) { border-top: 1px solid #dbdbdb; } .news-list__item__anchor { position: relative; display: block; padding-top: 25px; padding-bottom: 25px; padding-right: 30px; transition: .5s; } @media screen and (min-width: 768px) { .news-list__item__anchor { padding-left: 20px; padding-right: 60px; } } .news-list__item:first-child .news-list__item__anchor { padding-top: 0; } @media screen and (min-width: 768px) { .news-list__item__anchor:hover { background-color: #fbfbfb; } } .news-list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .news-list__item__anchor__arrow { width: 31px; height: 31px; right: 20px; bottom: 50%; transform: translateY(50%); padding: 11px; } } @media screen and (min-width: 768px) { .news-list__item__anchor:hover .news-list__item__anchor__arrow { background-color: #0d0d0d; } } .news-list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .news-list__item__anchor:hover .news-list__item__anchor__arrow__path { fill: #ffffff; } } @media screen and (min-width: 768px) { .news-list__item__content__head { display: flex; align-items: center; } } .news-list__item__content__head__date { color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .news-list__item__content__head__date { margin-right: 10px; width: 80px; font-size: 1.4rem; } } .news-list__item__content__head__category { display: flex; flex-wrap: wrap; margin-top: 7.5px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } @media screen and (min-width: 768px) { .news-list__item__content__head__category { margin-top: -2.5px; width: calc(100% - 90px); } } .news-list__item__content__head__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .news-list__item__content__head__category__item { } } .news-list__item__content__head__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .news-list__item__content__head__category__item__inner { font-size: 1.2rem; } } .news-list__item__content__head__category__item.news-list__item__content__head__category__item--black .news-list__item__content__head__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .news-list__item__content__head__category__item.news-list__item__content__head__category__item--gray .news-list__item__content__head__category__item__inner { background-color: #808080; color: #ffffff; } .news-list__item__content__head__category__item.news-list__item__content__head__category__item--white .news-list__item__content__head__category__item__inner { padding: 4px 10px; border: 1px solid #808080; color: #808080; } .news-list__item__content__body { margin-top: 10px; } @media screen and (min-width: 768px) { .news-list__item__content__body { margin-top: 15px; } } @media screen and (min-width: 1280px) { .news-list__item__content__body { margin-top: 20px; } } .news-list__item__content__body .paragraph { position: relative; line-height: 1.5; } @media screen and (min-width: 768px) { .news-list__item__content__body .paragraph { font-size: 1.5rem; } } .news-list__item__anchor[target="_blank"] .news-list__item__content__body .paragraph, .news-list__item__anchor[href*=".pdf"] .news-list__item__content__body .paragraph { padding-left: 17px; } .news-list__item__anchor[target="_blank"] .news-list__item__content__body .paragraph:before { content: ""; margin-top: 0; display: block; width: 12px; height: 12px; position: absolute; top: 4px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 12px; } @media screen and (min-width: 768px) { .news-list__item__anchor[target="_blank"] .news-list__item__content__body .paragraph:before { top: 5px; } } .news-list__item__anchor[href*=".pdf"] .news-list__item__content__body .paragraph:before { content: ""; margin-top: 0; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } .news-article { border-top: 1px solid #dbdbdb; padding-top: 20px; position: relative; } .news-article:before { content: ""; background-color: #0d0d0d; height: 1px; width: 100px; top: -1px; left: 0; position: absolute; } @media screen and (min-width: 768px) { .news-article:before { width: 120px; } } .news-article__head__date { display: block; color: #808080; font-size: 1.2rem; letter-spacing: .2em; line-height: 1.5em; font-weight: 500; } @media screen and (min-width: 768px) { .news-article__head__date { font-size: 1.6rem; } } .news-article__head__heading { color: #0d0d0d; font-size: 2.0rem; letter-spacing: .15em; line-height: 1.5em; font-weight: 700; margin-top: 6px; } @media screen and (min-width: 768px) { .news-article__head__heading { font-size: 2.8rem; } } .news-article__head__category-list { margin-top: 20px; } @media screen and (min-width: 768px) { .news-article__head__category-list { margin-top: 25px; } } .news-article__head__category-list__item { display: inline-block; min-width: 100px; margin-right: 6px; } @media screen and (min-width: 768px) { .news-article__head__category-list__item { min-width: 120px; } } .news-article__head__category-list__item:not(:first-child) { margin-top: 0; } .news-article__head__category-list__item__anchor { display: block; background-color: #F1F1ED; color: #222222; font-size: 1.2rem; letter-spacing: .15em; text-align: center; padding: 7px 10px 6px; border-radius: 3px; -webkit-transition: background-color .5s; transition: background-color .5s; } @media screen and (min-width: 768px) { .news-article__head__category-list__item__anchor { font-size: 1.3rem; } } .news-article__head__category-list__item__anchor:hover { background-color: #dbdbdb; } .news-article__head__thumbnail { margin-top: 25px; margin-bottom: 50px; margin-right: -20px; margin-left: -20px; } @media screen and (min-width: 768px) { .news-article__head__thumbnail { margin-left: 0; margin-right: 0; margin-top: 30px; } } .news-article__head__thumbnail img { max-width: 100%; width: 100%; vertical-align: middle; } .news-article__body { margin-top: 60px !important; } /* news-article__body__content */ .news-article__body__content.natural { padding-bottom: 0.6em; /* 最後のコンテンツが微妙に切れてしまうため対策 */ } .news-article__body__content h2, .news-article__body__summary__body h2 { font-size: 2.0rem; letter-spacing: .15em; line-height: 1.5em; font-weight: 700; color: #222222; background-color: #F1F1ED; border-left: 4px solid #0d0d0d; padding: 7px 15px 15px 15px; } @media screen and (min-width: 768px) { .news-article__body__content h2, .news-article__body__summary__body h2 { font-size: 2.5rem; border-left: 5px solid #0d0d0d; padding: 5px 20px 13px 20px; } } .news-article__body__content h2:not(:first-child), .news-article__body__summary__body h2:not(:first-child) { margin-top: 50px; } @media screen and (min-width: 768px) { .news-article__body__content h2:not(:first-child), .news-article__body__summary__body h2:not(:first-child) { margin-top: 60px; } } .news-article__body__content h2:not(:last-child), .news-article__body__summary__body h2:not(:last-child) { margin-bottom: 25px; } @media screen and (min-width: 768px) { .news-article__body__content h2:not(:last-child), .news-article__body__summary__body h2:not(:last-child) { margin-bottom: 30px; } } .news-article__body__content h3, .news-article__body__summary__body h3 { font-size: 1.8rem; letter-spacing: .15em; line-height: 1.875em; line-height: 1.875em; font-weight: 700; color: #222222; position: relative; padding-bottom: 4px; margin-top: -.5em; } .news-article__body__content h3::after, .news-article__body__summary__body h3::after { content: ''; display: block; width: 0; height: 0; margin-top: calc((1 - 1.875) * .5em); } @media screen and (min-width: 768px) { .news-article__body__content h3, .news-article__body__summary__body h3 { font-size: 2.0rem; } } .news-article__body__content h3::after, .news-article__body__summary__body h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; height: 2px; } .news-article__body__content h3:not(:first-child), .news-article__body__summary__body h3:not(:first-child) { margin-top: 35px; } @media screen and (min-width: 768px) { .news-article__body__content h3:not(:first-child), .news-article__body__summary__body h3:not(:first-child) { margin-top: 40px; } } .news-article__body__content h3:not(:last-child), .news-article__body__summary__body h3:not(:last-child) { margin-bottom: 20px; } @media screen and (min-width: 768px) { .news-article__body__content h3:not(:last-child), .news-article__body__summary__body h3:not(:last-child) { margin-bottom: 25px; } } .news-article__body__content h4, .news-article__body__summary__body h4 { font-size: 1.7rem; letter-spacing: .15em; line-height: 1.5em; font-weight: 700; color: #222222; padding-left: 12px; border-left: 3px solid #0d0d0d; margin-top: -.5em; margin-bottom: -.5em; } @media screen and (min-width: 768px) { .news-article__body__content h4, .news-article__body__summary__body h4 { font-size: 1.8rem; } } .news-article__body__content h4::before, .news-article__body__summary__body h4::before { content: ''; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em); } .news-article__body__content h4::after, .news-article__body__summary__body h4::after { content: ''; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em); } .news-article__body__content h4:not(:first-child), .news-article__body__summary__body h4:not(:first-child) { margin-top: 35px; } @media screen and (min-width: 768px) { .news-article__body__content h4:not(:first-child), .news-article__body__summary__body h4:not(:first-child) { margin-top: 40px; } } .news-article__body__content h4:not(:last-child), .news-article__body__summary__body h4:not(:last-child) { margin-bottom: 20px; } @media screen and (min-width: 768px) { .news-article__body__content h4:not(:last-child), .news-article__body__summary__body h4:not(:last-child) { margin-bottom: 25px; } } .news-article__body__content p, .news-article__body__summary__body p { font-size: 1.5rem; letter-spacing: .2em; line-height: 2em; line-height: 2em; color: #222222; margin-top: -.5em; margin-bottom: -.5em; } .news-article__body__content p::before, .news-article__body__summary__body p::before { content: ''; display: block; width: 0; height: 0; margin-top: calc((1 - 2) * .5em); } .news-article__body__content p::after, .news-article__body__summary__body p::after { content: ''; display: block; width: 0; height: 0; margin-bottom: calc((1 - 2) * .5em); } @media screen and (min-width: 768px) { .news-article__body__content p, .news-article__body__summary__body p { font-size: 1.6rem; } } .news-article__body__content p:not(:first-child), .news-article__body__summary__body p:not(:first-child) { margin-top: 20px; } .news-article__body__content p:not(:last-child), .news-article__body__summary__body p:not(:last-child) { margin-bottom: 20px; } @media screen and (min-width: 768px) { .news-article__body__content p:not(:last-child), .news-article__body__summary__body p:not(:last-child) { margin-bottom: 30px; } } .news-article__body__content img, .news-article__body__summary__body img { display: block; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .news-article__body__content img, .news-article__body__summary__body img { max-width: 500px; } } .news-article__body__content img:not(:first-child), .news-article__body__summary__body img:not(:first-child) { margin-top: 35px; } @media screen and (min-width: 768px) { .news-article__body__content img:not(:first-child), .news-article__body__summary__body img:not(:first-child) { margin-top: 40px; } } .news-article__body__content img:not(:last-child), .news-article__body__summary__body img:not(:last-child) { margin-bottom: 35px; } @media screen and (min-width: 768px) { .news-article__body__content img:not(:last-child), .news-article__body__summary__body img:not(:last-child) { margin-bottom: 40px; } } .news-article__body__summary { margin-top: 50px; border: 1px solid #dbdbdb; border-radius: 5px; } @media screen and (min-width: 768px) { .news-article__body__summary { margin-top: 60px; } } .news-article__body__summary__head { background-color: #F1F1ED; border-radius: 5px 5px 0 0; padding: 11px 20px 10px; } @media screen and (min-width: 768px) { .news-article__body__summary__head { padding: 14px 30px; } } .news-article__body__summary__head__heading { font-size: 1.8rem; letter-spacing: .2em; font-weight: 700; color: #222222; } @media screen and (min-width: 768px) { .news-article__body__summary__head__heading { font-size: 2.2rem; } } .news-article__body__summary__body { padding: 20px; } @media screen and (min-width: 768px) { .news-article__body__summary__body { padding: 30px; } } .news-article__body__cta__anchor { display: block; } .news-article__body__cta__content img { max-width: 100%; width: 100%; vertical-align: middle; margin-left: auto; margin-right: auto; } .news-article__body__cta:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .news-article__body__cta:not(:first-child) { margin-top: 80px; } } .news-article__body__cta:not(:last-child) { margin-bottom: 60px; } @media screen and (min-width: 768px) { .news-article__body__cta:not(:last-child) { margin-bottom: 80px; } } .news-article__foot { margin-top: 60px; padding-top: 25px; border-top: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .news-article__foot { margin-top: 80px; } } @media screen and (min-width: 768px) { .news-article__foot__nav__list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -30px; margin-right: -30px; } } @media screen and (min-width: 768px) { .news-article__foot__nav__list__item { width: 50%; padding-left: 30px; padding-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } } .news-article__foot__nav__list__item--prev { margin-right: auto; } .news-article__foot__nav__list__item--next { margin-left: auto; margin-top: 20px; padding-top: 20px; border-top: 1px dotted #dbdbdb; } @media screen and (min-width: 768px) { .news-article__foot__nav__list__item--next { margin-top: 0; padding-top: 0; border-top: none; border-left: 1px dotted #dbdbdb; } } .news-article__foot__nav__list__item--next .news-article__foot__nav__list__item__heading { text-align: right; } .news-article__foot__nav__list__item__heading { color: #222222; font-size: 1.6rem; letter-spacing: .2em; font-weight: 700; } .news-article__foot__nav__list__item__block { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 15px; } .news-article__foot__nav__list__item__block__image { width: 100%; max-width: 110px; } @media screen and (min-width: 768px) { .news-article__foot__nav__list__item__block__image { max-width: 120px; } } .news-article__foot__nav__list__item__block__image img { max-width: 100%; width: 100%; vertical-align: middle; } .news-article__foot__nav__list__item__block__heading { width: 100%; margin-left: 15px; font-size: 1.4rem; letter-spacing: .15em; line-height: 1.6em; font-weight: 500; -webkit-transition: color .5s; transition: color .5s; } @media screen and (min-width: 768px) { .news-article__foot__nav__list__item__block__heading { max-width: 210px; } } a:hover .news-article__foot__nav__list__item__block__heading { color: #0d0d0d; } .news-article__foot__back { margin-top: 60px; text-align: center; } @media screen and (min-width: 768px) { .news-article__foot__back { margin-top: 80px; } } .news-article__foot__back__anchor { color: #222222; font-size: 1.6rem; letter-spacing: .15em; line-height: 1.4em; font-weight: 500; position: relative; padding-left: 38px; -webkit-transition: color .5s; transition: color .5s; } .news-article__foot__back__anchor__icon { display: block; position: absolute; top: calc(50% - 14px); left: 0; width: 28px; height: 28px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .news-article__foot__back__anchor__icon__circle { fill: #222222; -webkit-transition: fill .5s; transition: fill .5s; } a:hover .news-article__foot__back__anchor__icon__circle { fill: #0d0d0d; } .news-article__foot__back__anchor:hover { color: #0d0d0d; } .news-archive__menu { margin-bottom: 15px; } .news-archive__menu__laptop-wider__list { display: none; } @media screen and (min-width: 768px) { .news-archive__menu__laptop-wider__list { display: -webkit-box; display: -ms-flexbox; display: flex; } } .news-archive__menu__laptop-wider__list__item:not(:first-child) .news-archive__menu__laptop-wider__list__item__anchor { padding: 2px 20px; border-left: 1px dotted #dbdbdb; } .news-archive__menu__laptop-wider__list__item:hover { color: #0d0d0d; } .news-archive__menu__laptop-wider__list__item.is-current { color: #0d0d0d; } .news-archive__menu__laptop-wider__list__item__anchor { display: block; padding: 2px 20px 2px 0; -webkit-transition: color .5s; transition: color .5s; } .news-archive__menu__laptop-wider__list__item__anchor.is-active { position: relative; } .news-archive__menu__laptop-wider__list__item__anchor.is-active .tab_icon { content: ''; width: 50px; height: 5px; left: calc(50% - 25px); bottom: -15px; overflow: hidden; position: absolute; z-index: -1; } .news-archive__menu__laptop-wider__list__item__anchor.is-active.all .tab_icon { left: 0; } .news-archive__menu__laptop-wider__list__item__anchor.is-active .tab_icon:before { content: ''; background-color: #0d0d0d; height: 10px; width: 50px; left: calc(50% - 25px); top: -1px; position: absolute; z-index: -1; } @media screen and (min-width: 768px) { .news-archive__menu__palmtop { display: none; } } .news-archive__menu__palmtop__label { display: block; position: relative; } .news-archive__menu__palmtop__label__icon { position: absolute; top: calc(50% - 4px); right: 16px; -webkit-transform: rotate(90deg); transform: rotate(90deg); width: 6px; height: 8px; } .news-archive__menu__palmtop__label__icon__arrow { fill: #222222; } .news-archive__menu__palmtop__label__select { display: block; outline: none; text-indent: 0.01px; text-overflow: ''; background: none transparent; vertical-align: middle; color: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 1px solid #dbdbdb; border-radius: 5px; width: 100%; font-size: 1.6rem; letter-spacing: .15em; padding: 10px; } .news-archive__content__list { border-top: 1px solid #dbdbdb; border-bottom: 1px dotted #dbdbdb; } .news-archive__content__list__item:not(:first-child) { border-top: 1px dotted #dbdbdb; } .news-archive__content__list__item__anchor { display: block; padding-top: 20px; padding-bottom: 20px; -webkit-transition: background-color .5s; transition: background-color .5s; } @media screen and (min-width: 768px) { .news-archive__content__list__item__anchor { padding-top: 30px; padding-bottom: 30px; } } @media screen and (min-width: 768px) { .news-archive__content__list__item__anchor:hover { background-color: #f7f7f7; } } @media screen and (min-width: 768px) { .news-archive__content__list__item__content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .news-archive__content__list__item__content__head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (min-width: 768px) { .news-archive__content__list__item__content__head { width: 250px; } } .news-archive__content__list__item__content__head__date { font-family: 'Barlow', sans-serif; font-size: 1.2rem; letter-spacing: .15em; color: #808080; font-weight: 500; } @media screen and (min-width: 768px) { .news-archive__content__list__item__content__head__date { font-size: 1.4rem; } } .news-archive__content__list__item__content__head__category { margin-left: 15px; } @media screen and (min-width: 768px) { .news-archive__content__list__item__content__head__category { margin-left: 20px; } } .news-archive__content__list__item__content__head__category__inner { display: inline-block; background-color: #F1F1ED; font-size: 1.2rem; letter-spacing: .15em; padding: 5px; min-width: 100px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } @media screen and (min-width: 768px) { .news-archive__content__list__item__content__head__category__inner { font-size: 1.3rem; min-width: 120px; } } .news-archive__content__list__item__content__body { margin-top: 15px; } @media screen and (min-width: 768px) { .news-archive__content__list__item__content__body { margin-top: 0; margin-left: 30px; } } .news-archive__pager { margin-top: 50px; 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; } @media screen and (min-width: 768px) { .news-archive__pager { margin-top: 75px; } } .news-archive__pager__item:not(:first-child) { margin-left: 15px; } .news-archive__pager__item__anchor { display: block; font-size: 1.7rem; font-weight: 500; font-family: 'Barlow', sans-serif; letter-spacing: .1em; color: #dbdbdb; padding-left: 5px; padding-right: 5px; -webkit-transition: color .5s; transition: color .5s; } @media screen and (min-width: 768px) { .news-archive__pager__item__anchor { font-size: 1.8rem; } } .news-archive__pager__item__anchor__icon { display: block; width: 28px; height: 28px; } .news-archive__pager__item__anchor__icon__circle { fill: #dbdbdb; -webkit-transition: fill .5s; transition: fill .5s; } a:hover .news-archive__pager__item__anchor__icon__circle { fill: #0d0d0d; } .news-archive__pager__item__anchor:hover { color: #0d0d0d; } .news-archive__pager__item__anchor--prev .news-archive__pager__item__anchor__icon { -webkit-transform: rotate(180deg); transform: rotate(180deg); } @charset "UTF-8"; /* 指導箋 */ .section-prescribe-db { margin-top: 25px; } @media screen and (min-width: 768px) { .section-prescribe-db { margin-top: 40px; } } .section-prescribe-db:last-child { margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-prescribe-db:last-child { margin-bottom: 80px; } } .prescribe-db-list { display: flex; flex-wrap: wrap; margin-left: -7.5px; margin-right: -7.5px; } @media screen and (min-width: 768px) { .prescribe-db-list { padding: 0 15px; margin-left: -8.5px; margin-right: -8.5px; } } .prescribe-db-list__item { width: 50%; padding-left: 7.5px; padding-right: 7.5px; box-sizing: border-box; } @media screen and (min-width: 768px) { .prescribe-db-list__item { width: 33.333%; padding-left: 8.5px; padding-right: 8.5px; } } @media screen and (min-width: 1280px) { .prescribe-db-list__item { width: 25%; } } .prescribe-db-list__item:nth-child(n+3) { margin-top: 20px; } @media screen and (min-width: 768px) { .prescribe-db-list__item:nth-child(n+3) { margin-top: 0; } .prescribe-db-list__item:nth-child(n+4) { margin-top: 24px; } } @media screen and (min-width: 1280px) { .prescribe-db-list__item:nth-child(n+4) { margin-top: 0; } .prescribe-db-list__item:nth-child(n+5) { margin-top: 24px; } } .prescribe-db-list__item__anchor { display: block; box-sizing: border-box; height: 100%; padding-bottom: 14px; border-bottom: 1px solid #dbdbdb; } .prescribe-db-list__item__anchor__img { display: block; text-align: center; position: relative; /* お気に入りピンマーク用 */ } .prescribe-db-list__item__anchor__img img { height: 102px; object-fit: contain; width: auto; max-width: 100%; } @media screen and (min-width: 768px) { .prescribe-db-list__item__anchor__img img { height: 135px; } } .prescribe-db-list__item__anchor__tag { display: inline-block; margin-top: 14px; padding: 4px 9px 5px; background: #0d0d0d; color: #fff; font-size: 1.1rem; } @media screen and (min-width: 768px) { .prescribe-db-list__item__anchor__tag { margin-top: 18px; padding: 5px 14px; font-size: 1.2rem; } } .prescribe-db-list__item__anchor__text { margin-top: 14px; position: relative; display: inline-block; padding-left: 20px; font-size: 1.2rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .prescribe-db-list__item__anchor__text:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .prescribe-db-list__item__anchor__text { margin-top: 18px; font-size: 1.3rem; } .prescribe-db-list__item__anchor:hover .prescribe-db-list__item__anchor__text { text-decoration: underline; opacity: .6; } } .prescribe-db-list__item__anchor__text:before { content: ""; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .prescribe-db-list__item__anchor__text:before { top: 4px; width: 12px; height: 15px; background-size: 12px 15px; } } /* ===== 指導箋 お気に入りピンマーク ===== */ /* 指導箋専用ピンマーク（背景なし、黒アイコン） */ .prescribe-library__pin { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; background: transparent; /* 背景なし */ cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 9; transition: opacity 0.3s ease; } .prescribe-library__pin:hover { opacity: 0.7; /* ホバー時は透明度変更 */ } .prescribe-library__pin:focus { outline: none; /* フォーカス時の果を完全に削除 */ } .prescribe-library__pin.loading { opacity: 0.5; cursor: not-allowed; } /* ツールチップ（PC版のみ、左側に表示、未お気に入り時のみ） */ .prescribe-library__pin__tooltip { position: absolute; top: 50%; right: 100%; /* ピンマークの左側 */ transform: translateY(-50%); margin-right: 8px; /* ピンマークとの間隔 */ background: #666666; /* 濃い不透明なグレー */ color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 11; } /* 未お気に入り時のみツールチップを表示 */ .prescribe-library__pin[data-favorited="false"]:hover .prescribe-library__pin__tooltip { opacity: 1; visibility: visible; } /* お気に入り追加済み時はツールチップを非表示 */ .prescribe-library__pin[data-favorited="true"]:hover .prescribe-library__pin__tooltip { opacity: 0; visibility: hidden; } /* フィードバックメッセージ（ツールチップと同じ位置と背景色） */ .prescribe-library__feedback { position: absolute; top: 50%; right: 100%; /* ピンマークの左側 */ transform: translateY(-50%); margin-right: 8px; /* ピンマークとの間隔 */ background: #666666; /* ツールチップと同じ濃いグレー */ color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 12; } .prescribe-library__feedback.show { opacity: 1; visibility: visible; } /* スマートフォン対応 */ @media (max-width: 768px) { .prescribe-library__pin__tooltip { display: none; } .prescribe-library__feedback { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); } } @charset "UTF-8"; /* products */ /* 製品情報トップ ここから */ /* position: sticky; するためにoverflowを初期値にする */ .content__column.content__column--main { overflow: initial !important; } @media screen and (min-width: 1280px) { .section.section--product-index { padding-top: 0; } } .product-hero__inner { padding-top: 20px; } @media screen and (min-width: 768px) { .product-hero__inner { padding-top: 40px; } } .product-hero__inner__heading { padding-bottom: 60px; border-bottom: 1px solid #dbdbdb; font-size: 2.6rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .product-hero__inner__heading { padding-bottom: 70px; font-size: 3.6rem; } } .product-hero__inner__img { margin-top: 30px; } @media screen and (min-width: 768px) { .product-hero__inner__img { margin-top: 40px; } } .product-hero__inner__img.product-hero__inner__img--pctb { display: none; } @media screen and (min-width: 768px) { .product-hero__inner__img.product-hero__inner__img--pctb { display: block; } .product-hero__inner__img.product-hero__inner__img--sp { display: none; } } .product-hero__inner__img img { max-width: 100%; width: 100%; backface-visibility: hidden; } .index-search-button { margin-right: 0px; margin-bottom: 30px; margin-left: 0px; } @media screen and (min-width: 768px) { .index-search-button { margin-right: 0px; margin-bottom: 40px; margin-left: 0px; } } .index-search-button:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .index-search-button:not(:first-child) { margin-top: 80px; } } @media screen and (min-width: 900px) { .index-search-button { display: none; } } .index-search-button__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; max-width: 335px; padding: 18px; background-color: #0d0d0d; color: #ffffff; font-size: 1.4rem; font-weight: 500; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .index-search-button__anchor:hover { opacity: .6; } } .product-popup__inner { box-sizing: border-box; background-color: #ffffff; padding: 30px 25px; } @media screen and (min-width: 768px) { .product-popup__inner { padding: 60px 50px; } } .product-popup__inner .paragraph { font-size: 1.4rem; } .product-popup__inner .paragraph:not(:first-child) { margin-top: 40px; font-size: 1.4rem; } .product-popup__inner__links { display: none; } .product-popup__inner__links__list { margin-top: 30px; } @media screen and (min-width: 768px) { .product-popup__inner__links__list { display: flex; justify-content: center; align-items: center; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .product-popup__inner__links__list__item { padding-left: 10px; padding-right: 10px; width: 50%; box-sizing: border-box; } } .product-popup__inner__links__list__item:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .product-popup__inner__links__list__item:not(:first-child) { margin-top: 0; } } .product-popup__inner__links__list__item__anchor { display: block; width: 100%; max-width: 300px; box-sizing: border-box; text-align: center; padding: 17px 20px; border-radius: 100px; border: 1px solid #0d0d0d; font-size: 14px; font-weight: 500; transition: opacity .5s; } @media screen and (min-width: 768px) { .product-popup__inner__links__list__item__anchor { padding: 27px 30px; } } .product-popup__inner__links__list__item__anchor:hover { opacity: .6; } .product-popup__inner__links__list__item__anchor.product-popup__inner__links__list__item__anchor--blank { background-color: #0d0d0d; color: #ffffff; } .product-popup__inner__links__list__item__anchor__text { display: inline-block; } .product-popup__inner__links__list__item__anchor.product-popup__inner__links__list__item__anchor--blank .product-popup__inner__links__list__item__anchor__text { padding-left: 20px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window_white.svg); background-position: 0 50%; background-size: 14px; background-repeat: no-repeat; } .index-search { margin-bottom: 30px; } .index-search__box { display: flex; align-items: center; flex-wrap: wrap; box-sizing: border-box; width: 100%; padding: 20px; min-height: 60px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .index-search__box { padding: 20px 25px; } } @media screen and (min-width: 1280px) { .product-index-items-wrap .index-search__box { margin-top: 80px; } } .index-search__box__category { display: flex; flex-wrap: nowrap; } .index-search__box__category__title { margin-top: 2px; min-width: 90px; margin-right: 10px; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .index-search__box__category__title { margin-right: 15px; } } .index-search__box__category__list { display: flex; flex-wrap: wrap; margin: -2.5px; } .index-search__box__category__list__item { display: inline-block; box-sizing: border-box; margin: 2.5px; padding: 5px 10px; font-size: 1.1rem; color: #222222; border: 1px solid #222222; background-color: #ffffff; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .index-search__box__category__list__item { font-size: 1.2rem; } } .index-search__box__keyword { font-size: 1.3rem; line-height: 1.5; letter-spacing: .1em; } .index-search__result { margin-top: 30px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .index-search__result { font-size: 1.5rem; } } .product-index-items-wrap { border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 1280px) { .product-index-items-wrap { border-bottom: none; } } .product-index-items { border-top: 1px solid #dbdbdb; border-left: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; } @media screen and (min-width: 1280px) { .product-index-items { margin-top: 80px; border-top: none; border-left: none; border-right: none; border-bottom: none; } } .product-index-h2__accordion { display: none; } @media screen and (max-width: 1279px) { .product-index-h2__accordion { display: block; } } .product-index-h2__accordion { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 43px; height: 55px; min-height: 55px; cursor: pointer; } .product-index-h2__accordion::before, .product-index-h2__accordion::after { content: ""; display: block; position: absolute; left: calc(50% - 5px); top: calc(50% - 0px); width: 11px; height: 1px; background-color: #0d0d0d; transition: transform .5s, opacity .5s; } .product-index-h2__accordion::before { transform: rotate(90deg); } .product-index-h2__accordion.is-active::before { transform: rotate(0); } .product-index-h2__accordion.is-active::after { opacity: 0; } @media screen and (max-width: 1279px) { .heading-2.product-index-h2 { background-color: hsla(0,0%,86%,.6); font-size: 1.5rem; margin: 0; padding: 15px; min-height: 55px; position: relative; box-sizing: border-box; } .heading-2.product-index-h2:after { content: none; } .heading-2.product-index-h2 .heading-2__inner__text { background-image: none; padding-left: 0; } } .products-table { display: none; } @media screen and (min-width: 1280px) { .products-table { display: block!important; } } .products-table__table { width: 100%; position: relative; } @media screen and (min-width: 1280px) { .products-table__table { border: 1px solid #dbdbdb; } } #products-fixed-header.products-table__table { display: none; position: fixed; border-bottom: none; z-index: 100; } #products-fixed-header.is-fixed { display: table; } .products-table__head { display: none; } @media screen and (min-width: 1280px) { .products-table__head { display: table-caption; } } /* thead固定用 */ .products-table__head.is-thead-sticky { position: sticky; top: 0; z-index: 9; } .products-table__head__row__header { box-sizing: border-box; padding: 15px; background-color: #e9e9e9; color: #222222; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; text-align: left; line-break: strict; } @media screen and (min-width: 1280px) { .products-table__head__row__header { padding: 10px; font-size: 1.0rem; border-bottom: 1px solid #dbdbdb; } .products-table__head__row:first-child .products-table__head__row__header:first-child { width: 38.5%; } .products-table__head__row:first-child .products-table__head__row__header:nth-child(2), .products-table__head__row:first-child .products-table__head__row__header:nth-child(6), .products-table__head__row:first-child .products-table__head__row__header:nth-child(7) { width: 9.66%; } .products-table__head__row:first-child .products-table__head__row__header:nth-child(3), .products-table__head__row:first-child .products-table__head__row__header:nth-child(4), .products-table__head__row:first-child .products-table__head__row__header:nth-child(5) { width: 11.36%; } .products-table__head__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; } } .products-table__head__row:nth-child(2) .products-table__head__row__header { padding: 10px; text-align: center; } .products-table__head__row:nth-child(2) .products-table__head__row__header:last-child { border-right: 1px solid #dbdbdb; } .products-table__head__row__header__anchor { display: inline-block; margin-top: 5px; font-size: 1.1rem; line-height: 1.3; text-decoration: underline; transition: opacity .5s; } @media screen and (min-width: 1280px) { .products-table__head__row__header__anchor { font-size: 1.0rem; } } .products-table__head__row__header__anchor:focus { text-decoration: underline; } .products-table__head__row__header__anchor:hover { opacity: .6; text-decoration: underline; } .products-table__body__row__header { display: block; box-sizing: border-box; width: 100%; text-align: left; } @media screen and (min-width: 1280px) { .products-table__body__row__header { display: table-cell; vertical-align: middle; padding: 17px 10px; border-right: 1px solid #dbdbdb; } .products-table__body__row__header:first-child { width: 38.5%; } } .products-table__body__row.products-table__body__row--item .products-table__body__row__header { background-color: #f7f7f7; } @media screen and (min-width: 1280px) { .products-table__body__row.products-table__body__row--item .products-table__body__row__header { width: 100%; border-right: none; } } .products-table__body__row__header__anchor { display: block; position: relative; padding: 17px 30px 17px 15px; color: #222222; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .products-table__body__row__header__anchor:focus { text-decoration: underline; } @media screen and (min-width: 1280px) { .products-table__body__row__header__anchor { padding: 0; display: inline-block; border-bottom: none; font-size: 1.1rem; } .products-table__body__row__header__anchor:hover { opacity: .6; text-decoration: underline; } } .products-table__body__row .products-table__body__row__header .products-table__body__row__header__anchor { border-top: 1px solid #dbdbdb; } @media screen and (min-width: 1280px) { .products-table__body__row .products-table__body__row__header .products-table__body__row__header__anchor { border-top: none; } } @media screen and (min-width: 1280px) { .product-index-items:last-child .products-table__body__row:last-child .products-table__body__row__header__anchor { border-bottom: none; } } .products-table__body__row.products-table__body__row--item .products-table__body__row__header__anchor, .products-table__body__row.products-table__body__row--item + .products-table__body__row .products-table__body__row__header__anchor { border: none; } .products-table__body__row__header__button { display: none; margin: 0 5px 0 15px; padding: 2px 0 2px 17px; font-size: 1.3rem; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0 50%; background-repeat: no-repeat; background-size: 12px 14.5px; transition: opacity .5s; text-decoration: underline; } .products-table__body__row__header__button:focus { text-decoration: underline; } @media screen and (min-width: 1280px) { .products-table__body__row__header__button { display: inline-block; font-size: 1.1rem; background-size: 11px 13.5px; } .products-table__body__row__header__button:hover { opacity: .6; text-decoration: underline; } } .products-table__body__row__header__paragraph { display: none; margin-top: 5px; font-size: 1.2rem; font-weight: 500; line-height: 1.5; color: #222222; } @media screen and (min-width: 1280px) { .products-table__body__row__header__paragraph { display: block; } } .products-table__body__row__header--bg { background-color: #f7f7f7; } @media screen and (min-width: 1280px) { .products-table__body__row:not(:last-child) { border-bottom: 1px solid #dbdbdb; } } .products-table__body__row__data { padding: 15px 15px; color: #222222; font-size: 1.4rem; letter-spacing: .1em; line-height: 1.5; text-align: center; vertical-align: middle; position: relative; box-sizing: border-box; } @media screen and (max-width: 1279px) { .products-table__body__row__data { display: none; } } .products-table__body__row__data.products-table__body__row__data--nodata:before { content: ""; position: absolute; top: calc(50% - 1px); left: calc(50% - 5px); display: block; width: 10px; height: 2px; background-color: #0d0d0d; } @media screen and (min-width: 1280px) { .products-table__body__row__data:not(:last-child) { border-right: 1px solid #dbdbdb; } .products-table__body__row__data:nth-child(2), .products-table__body__row__data:nth-child(7), .products-table__body__row__data:nth-child(8) { width: 9.66%; } .products-table__body__row__data:nth-child(3), .products-table__body__row__data:nth-child(4) { width: 11.36%; } .products-table__body__row__data:nth-child(5), .products-table__body__row__data:nth-child(6) { width: 5.68%; } } .products-table__body__row__data__anchor { transition: .5s; } .products-table__body__row__data__anchor:hover { opacity: .6; } .products-table__body__row__data__anchor.products-table__body__row__data__anchor--icon_pdf { display: inline-block; width: 16px; height: 20px; background-image: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/common/icon_pdf.svg'); background-position: 0; background-repeat: no-repeat; background-size: 16px 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .products-table__body__row__data__anchor.products-table__body__row__data__anchor--icon_window { display: inline-block; width: 15px; height: 15px; background-image: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/common/icon_window.svg'); background-position: 0; background-repeat: no-repeat; background-size: 15px 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .products-table__body__row__data__anchor.products-table__body__row__data__anchor--icon_browser { display: inline-block; width: 20px; height: 15px; background-image: url('https://7242392.fs1.hubspotusercontent-na1.net/hubfs/7242392/medical.eisai/assets/common/icon_browser.svg'); background-position: 0; background-repeat: no-repeat; background-size: 20px 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .products-table__body__row__header__anchor__arrow { width: 10px; height: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; } @media screen and (min-width: 1280px) { .products-table__body__row__header__anchor__arrow { display: none; } } .products-table__body__row__header__anchor__arrow__path { fill: #0d0d0d; } /* 製品情報トップ ここまで */ /* 製品情報_品目トップ ここから */ .product-description .product-description__paragraph.paragraph { margin-bottom: 30px; } @media screen and (min-width: 768px) { .product-description .product-description__paragraph.paragraph { margin-bottom: 40px; } } .use-info { margin-top: 30px; } @media screen and (min-width: 768px) { .use-info__list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .use-info__list__item { width: 50%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } } .use-info__list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .use-info__list__item:not(:first-child) { margin-top: 0; } .use-info__list__item:nth-child(n+3) { margin-top: 20px; } } .use-info__list__item__anchor { height: 100%; border: 1px solid #dbdbdb; display: flex; justify-content: space-between; padding: 15px; box-sizing: border-box; transition: .5s; } @media screen and (min-width: 768px) { .use-info__list__item__anchor:hover { border-color: #0d0d0d; } } .use-info__list__item__anchor__figure { width: 90px; } @media screen and (min-width: 768px) { .use-info__list__item__anchor__figure { width: 100px; } } .use-info__list__item__anchor__figure img { max-width: 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; } .use-info__list__item__anchor__text { width: calc(100% - 105px); } @media screen and (min-width: 768px) { .use-info__list__item__anchor__text { width: calc(100% - 120px); } } .use-info__list__item__anchor__tag { display: inline-block; margin-bottom: 10px; padding: 4px 9px 5px; background: #0d0d0d; color: #fff; font-size: 1.1rem; } @media screen and (min-width: 768px) { .use-info__list__item__anchor__tag { padding: 5px 14px; font-size: 1.2rem; } } .use-info__list__item__anchor__title { box-sizing: border-box; position: relative; padding-left: 20px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .use-info__list__item__anchor__title { font-size: 1.6rem; } } .use-info__list__item.use-info__list__item--nofigure .use-info__list__item__anchor__title { width: 100%; } .use-info__list__item__anchor__title:before { content: ""; display: inline-block; width: 11px; height: 14px; position: absolute; top: 5px; left: 0; margin-right: 5px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .use-info__list__item__anchor__title:before { width: 12px; height: 15px; } } @media screen and (min-width: 768px) { .instruction-sheet__list { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } } .instruction-sheet:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .instruction-sheet:not(:first-child) { margin-top: 50px; } } @media screen and (min-width: 768px) { .instruction-sheet__list__item { width: 50%; padding-left: 25px; padding-right: 25px; box-sizing: border-box; } } .instruction-sheet__list__item:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .instruction-sheet__list__item:not(:first-child) { margin-top: 0; } .instruction-sheet__list__item:nth-child(n+3) { margin-top: 15px; } } @media screen and (min-width: 1280px) { .instruction-sheet__list__item:nth-child(n+3) { margin-top: 20px; } } .instruction-sheet__list__item__anchor { position: relative; display: inline-block; padding-left: 20px; width: calc(100% - 105px); font-size: 1.4rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .instruction-sheet__list__item__anchor:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .instruction-sheet__list__item__anchor { width: calc(100% - 120px); font-size: 1.6rem; } .instruction-sheet__list__item__anchor:hover { text-decoration: underline; opacity: .6; } } .instruction-sheet__list__item__anchor:before { content: ""; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .instruction-sheet__list__item__anchor:before { top: 5px; width: 12px; height: 15px; background-size: 12px 15px; } } .connection { margin-top: 30px; } @media screen and (min-width: 768px) { .connection__list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .connection__list__item { width: 50%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } } .connection__list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .connection__list__item:not(:first-child) { margin-top: 0; } .connection__list__item:nth-child(n+3) { margin-top: 20px; } } .connection__list__item__anchor { height: 100%; border: 1px solid #dbdbdb; display: flex; justify-content: space-between; padding: 15px; box-sizing: border-box; transition: .5s; } @media screen and (min-width: 768px) { .connection__list__item__anchor:hover { border-color: #0d0d0d; } } .connection__list__item__anchor__figure { width: 90px; } @media screen and (min-width: 768px) { .connection__list__item__anchor__figure { width: 100px; } } .connection__list__item__anchor__figure img { max-width: 100%; width: 100%; } .connection__list__item__anchor__figure img.is_thumbnail { aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #ccc; box-sizing: border-box; border-radius: 4px; } .connection__list__item__anchor__text { width: calc(100% - 105px); } @media screen and (min-width: 768px) { .connection__list__item__anchor__text { width: calc(100% - 120px); } } .connection__list__item.connection__list__item--no-figure .connection__list__item__anchor__text { width: 100%; } .connection__list__item__anchor__tag { display: inline-block; margin-bottom: 10px; padding: 4px 9px 5px; background: #0d0d0d; color: #fff; font-size: 1.1rem; } @media screen and (min-width: 768px) { .connection__list__item__anchor__tag { padding: 5px 14px; font-size: 1.2rem; } } .connection__list__item__anchor__text__title { position: relative; font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .connection__list__item__anchor__text__title { font-size: 1.6rem; } } .connection__list__item.connection__list__item--nofigure .connection__list__item__anchor__text__title { width: 100%; } .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--pdf { padding-left: 15px; } .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--pdf:before { content: ""; display: inline-block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--pdf:before { width: 12px; height: 15px; top: 5px; } } .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--window { padding-left: 15px; } .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--window:before { content: ""; display: inline-block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .connection__list__item__anchor__text__title.connection__list__item__anchor__text__title--window:before { width: 12px; height: 15px; top: 5px; } } .connection__list__item__anchor__text__paragraph { margin-top: 10px; font-size: 1.3rem; line-height: 1.5; } @media screen and (min-width: 768px) { .connection__list__item__anchor__text__paragraph { font-size: 1.4rem; } } @media screen and (min-width: 768px) { .product-thumb-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .product-thumb-list__item { width: 50%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } } .product-thumb-list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .product-thumb-list__item:not(:first-child) { margin-top: 0; } .product-thumb-list__item:nth-child(n+3) { margin-top: 20px; } } .product-thumb-list__item__anchor { height: 100%; border: 1px solid #dbdbdb; display: flex; align-items: center; justify-content: space-between; padding: 10px; box-sizing: border-box; transition: .5s; } @media screen and (min-width: 768px) { .product-thumb-list__item__anchor:hover { border-color: #0d0d0d; } } .product-thumb-list__item__anchor__figure { width: 60px; background-repeat: no-repeat; background-size: cover; background-position: center; } .product-thumb-list__item__anchor__figure:before { content: ""; display: block; padding-top: 100%; } .product-thumb-list__item__anchor__figure img { max-width: 100%; width: 100%; } .product-thumb-list__item__anchor__text { width: calc(100% - 75px); } /* 製品画像が無いパターン */ .product-thumb-list__item.product-thumb-list__item--no-figure .product-thumb-list__item__anchor__text { width: 100%; } .product-thumb-list__item__anchor__text__title { position: relative; font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .product-thumb-list__item__anchor__text__title { font-size: 1.6rem; } } .section-item-index-links-wrap { margin-top: 60px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .section-item-index-links-wrap { margin-top: 80px; margin-bottom: 40px; } } .item-index-links-wrap:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .item-index-links-wrap:not(:first-child) { margin-top: 80px; } } @media screen and (min-width: 768px) { .item-index-links { display: flex; margin: 0 -5px; } } .item-index-links__item { text-align: center; } @media screen and (min-width: 768px) { .item-index-links__item { flex: 1; margin: 0 5px; } } .item-index-links__item:not(:first-child) { margin-top: 5px; } @media screen and (min-width: 768px) { .item-index-links__item:not(:first-child) { margin-top: 0; } } .item-index-links__item__anchor { display: block; box-sizing: border-box; padding: 17px; background-color: #f7f7f7; color: #222222; font-size: 1.4rem; font-weight: 500; line-height: 1.5; transition: .5s; } @media screen and (min-width: 768px) { .item-index-links__item__anchor { display: flex; justify-content: center; align-items: center; height: 100%; font-size: 1.5rem; padding: 14px; } } @media screen and (min-width: 1280px) { .item-index-links__item__anchor { padding: 24px 20px; } } .item-index-links__item.is-active .item-index-links__item__anchor, .item-index-links__item__anchor:hover { background-color: #0d0d0d; color: #ffffff; } /* 製品情報_品目トップ ここまで */ /* 製品情報__製品詳細 ここから */ .section-product-detail:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .section-product-detail:not(:first-child) { margin-top: 80px; } } .product-gallery { } @media screen and (min-width: 1280px) { .product-gallery__columns { display: flex; margin-left: -20px; margin-right: -20px; } } .product-gallery__columns__column { box-sizing: border-box; } @media screen and (min-width: 1280px) { .product-gallery__columns__column { padding-left: 20px; padding-right: 20px; } } .product-gallery__columns__column:nth-child(1) { max-width: 335px; margin: 0 auto; } @media screen and (min-width: 768px) { .product-gallery__columns__column:nth-child(1) { max-width: 400px; } } @media screen and (min-width: 1280px) { .product-gallery__columns__column:nth-child(1) { width: 300px; } } .product-gallery__columns__column:nth-child(2) { margin-top: 40px; } @media screen and (min-width: 1280px) { .product-gallery__columns__column:nth-child(2) { margin-top: 0; width: calc(100% - 300px); } } /* ギャラリーがないパターン */ @media screen and (min-width: 1280px) { .product-gallery__columns.product-gallery__columns--no-gallery { display: block; margin-left: 0; margin-right: 0; } } .product-gallery__columns.product-gallery__columns--no-gallery .product-gallery__columns__column:nth-child(1) { padding-left: 0; padding-right: 0; max-width: none; width: 100%; } .product-gallery-main { } .product-gallery-main__list { } .product-gallery-main__list__items__anchor { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 1280px) { .product-gallery-main__list__items__anchor { width: 260px; } } .product-gallery-main__list__items__anchor:before { content: ""; display: block; padding-top: 100%; } .product-gallery-main__list__items__anchor:after { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 36px; height: 36px; background-color: #ffffff; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: center; background-repeat: no-repeat; background-size: 15px 15px; opacity: .6; } .product-gallery-thumbnail { margin-top: 5px; } .product-gallery-thumbnail__list { display: flex; padding: 0 17px; } @media screen and (min-width: 768px) { .product-gallery-thumbnail__list { padding: 0 20px; } } @media screen and (min-width: 1280px) { .product-gallery-thumbnail__list { padding: 0 18.5px; } } .product-gallery-thumbnail__list__items { width: 70px!important; margin-left: 2.5px; margin-right: 2.5px; height: auto; } @media screen and (min-width: 768px) { .product-gallery-thumbnail__list__items { width: 85px!important; } } @media screen and (min-width: 1280px) { .product-gallery-thumbnail__list__items { width: 51px!important; } } .product-gallery-thumbnail__list__items__anchor { display: block; position: relative; background-position: center; background-repeat: no-repeat; background-size: contain; } @media screen and (min-width: 768px) { .product-gallery-thumbnail__list__items__anchor:hover { cursor: pointer; } } .product-gallery-thumbnail__list__items__anchor:before { content: ""; display: block; padding-top: 100%; } .product-gallery-thumbnail__list__nav__prev { position: absolute; left: 0; width: 16px; height: 100%; background-color: #808080; cursor: pointer; outline: none; transition: opacity .5s; } @media screen and (min-width:768px) and (max-width:1049px) { .product-gallery-thumbnail__list__nav__prev { width: 18px; } } .product-gallery-thumbnail__list__nav__prev:hover { opacity: .6; } .product-gallery-thumbnail__list__nav__prev::after { content: normal; } .product-gallery-thumbnail__list__nav__prev__icon { position: absolute; top: calc(50% - 4px); left: calc(50% - 3px); width: 6px; height: 8px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .product-gallery-thumbnail__list__nav__prev__icon__arrow { fill: #ffffff; -webkit-transition: fill .5s; transition: fill .5s; } @media screen and (min-width: 768px) { .product-gallery-thumbnail__list__nav__prev:hover .product-gallery-thumbnail__list__nav__prev__icon__arrow { fill: #ffffff; } } .product-gallery-thumbnail__list__nav__next { position: absolute; right: 0; width: 16px; height: 100%; background-color: #808080; cursor: pointer; outline: none; transition: opacity .5s; } @media screen and (min-width:768px) and (max-width:1049px) { .product-gallery-thumbnail__list__nav__next { width: 18px; } } .product-gallery-thumbnail__list__nav__next:hover { opacity: .6; } .product-gallery-thumbnail__list__nav__next::after { content: normal; } .product-gallery-thumbnail__list__nav__next__icon { position: absolute; top: calc(50% - 4px); left: calc(50% - 3px); width: 6px; height: 8px; } .product-gallery-thumbnail__list__nav__next__icon__arrow { fill: #ffffff; -webkit-transition: fill .5s; transition: fill .5s; } .product-gallery__allimages { margin-top: 15px; } .product-gallery__allimages__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; max-width: 335px; padding: 9px 20px; border: 1px solid #0d0d0d; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .product-gallery__allimages__anchor:hover { opacity: .6; } } .product-gallery__allimages__anchor__text { display: inline-block; font-size: 1.3rem; font-weight: 500; } .product-gallery__allimages__anchor__text:before { content: ""; display: inline-block; position: relative; top: 1px; margin-right: 5px; width: 10px; height: 10.75px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_download.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } .product-gallery__pdflink-wrap { display: flex; justify-content: center; margin-left: -5px; margin-right: -5px; } @media screen and (min-width: 1280px) { .product-gallery__pdflink-wrap { justify-content: flex-start; } } .product-gallery__pdflink { display: block; width: 50%; padding-left: 5px; padding-right: 5px; max-width: 163px; } @media screen and (min-width: 768px) { .product-gallery__pdflink { max-width: 180px; } } .product-gallery__pdflink__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; padding: 12px 20px 14px 20px; background-color: #0d0d0d; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .product-gallery__pdflink__anchor:hover { opacity: .6; } } .product-gallery__pdflink__anchor__text { display: inline-block; color: #ffffff; font-size: 1.3rem; font-weight: 500; } .product-gallery__pdflink__anchor__text:before { content: ""; display: inline-block; position: relative; top: 1px; margin-right: 5px; width: 10px; height: 12.5px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf_white.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } .product-gallery__paragraph { margin-top: 20px; font-size: 1.3rem; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .product-gallery__paragraph { font-size: 1.4rem; line-height: 2; } } .table-gallery__table { border: 1px solid #dbdbdb; } .table-gallery__table:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .table-gallery__table__dl { display: flex; } } .table-gallery__table__dl__dt { padding: 15px; background-color: #f7f7f7; border-bottom: 1px solid #dbdbdb; font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .table-gallery__table__dl__dt { width: 200px; } .table-gallery__table__dl:last-child .table-gallery__table__dl__dt { border-bottom: none; } } .table-gallery__table__dl__dd { padding: 15px; } @media screen and (min-width: 768px) { .table-gallery__table__dl__dd { width: calc(100% - 200px); border-left: 1px solid #dbdbdb; } } .table-gallery__table__dl:not(:last-child) .table-gallery__table__dl__dd { border-bottom: 1px solid #dbdbdb; } .table-gallery__table__dl__dd__anchor { display: block; font-size: 1.4rem; line-height: 1.5; text-decoration: underline; transition: .5s; } .table-gallery__table__dl__dd__anchor:focus { text-decoration: underline; } .table-gallery__table__dl__dd__anchor:hover { text-decoration: underline; opacity: .6; } .table-gallery__table__dl__dd__anchor.table-gallery__table__dl__dd__anchor--pdf:not(:first-child) { margin-top: 10px; } .table-gallery__table__dl__dd__anchor.table-gallery__table__dl__dd__anchor--pdf:before { content: ""; display: inline-block; width: 12px; height: 15px; position: relative; top: 3px; margin-right: 8px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 15px; } .table-gallery__table__dl__dd__anchor.table-gallery__table__dl__dd__anchor--window { display: inline-block; } .table-gallery__table__dl__dd__anchor.table-gallery__table__dl__dd__anchor--window:not(:first-child) { margin-left: 15px; } .table-gallery__table__dl__dd__anchor.table-gallery__table__dl__dd__anchor--window:before { content: ""; display: inline-block; width: 12px; height: 12px; position: relative; top: 1px; margin-right: 8px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 12px; } .table-gallery__table__dl__dd__popup-anchor { display: block; font-size: 1.2rem; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .table-gallery__table__dl__dd__popup-anchor:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .table-gallery__table__dl__dd__popup-anchor:hover { text-decoration: underline; opacity: .6; } } .table-gallery__table__dl__dd__popup-anchor:not(:first-child) { margin-top: 10px; } nop { display: none; } /* 製品情報__製品詳細 ここまで */ /* ===== 関連コンテンツ・適正使用情報のピンマーク用スタイル ===== */ /* カードコンテナを相対配置に */ .connection__list__item, .use-info__list__item { position: relative !important; /* ピンマークの絶対配置の基準点にする */ } /* ピンマークのスタイル - カード右上に固定 */ .relation-library__pin, .related-info-library__pin { position: absolute; top: 10px; right: 20px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9; /* ドロップダウンメニューより下、リンクより上に表示 */ transition: opacity 0.3s ease; background: rgba(255, 255, 255, 0.9); /* 半透明の白背景（黒アイコンが見やすくなる） */ border-radius: 50%; /* 円形の背景 */ } /* 画像なしの場合も同じ位置に配置 */ .connection__list__item--no-figure .relation-library__pin, .use-info__list__item--no-figure .related-info-library__pin { position: absolute; top: 10px; right: 10px; /* 位置は変わらない */ } .relation-library__pin:hover, .related-info-library__pin:hover { opacity: 0.8; background: rgba(255, 255, 255, 1); /* ホバー時は完全に不透明 */ } .relation-library__pin.loading, .related-info-library__pin.loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* SVGアイコンのスタイル */ .relation-library__pin svg, .related-info-library__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } /* お気に入り済みの場合はアイコンを塗りつぶし */ .relation-library__pin[data-favorited="true"] svg, .related-info-library__pin[data-favorited="true"] svg { fill: #000; stroke: #000; } /* ツールチップ（PC版のみ、左側に表示、未お気に入り時のみ） */ .relation-library__pin__tooltip, .related-info-library__pin__tooltip { position: absolute; top: 50%; right: 100%; /* ピンマークの左側 */ transform: translateY(-50%); margin-right: 8px; background: #333333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 11; } /* 未お気に入り時のみツールチップを表示 */ @media screen and (min-width: 768px) { .relation-library__pin[data-favorited="false"]:hover .relation-library__pin__tooltip, .related-info-library__pin[data-favorited="false"]:hover .related-info-library__pin__tooltip { opacity: 1; visibility: visible; } } /* フィードバックメッセージ */ .relation-library__feedback, .related-info-library__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background: #333333; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 12; } .relation-library__feedback.show, .related-info-library__feedback.show { opacity: 1; visibility: visible; } /* スマートフォン対応 */ @media (max-width: 768px) { .relation-library__pin__tooltip, .related-info-library__pin__tooltip { display: none; } .relation-library__feedback, .related-info-library__feedback { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); right: auto; z-index: 1000; } /* モバイルでは背景を少し大きく */ .relation-library__pin, .related-info-library__pin { width: 36px; height: 36px; } } /* アンカー要素がピンマークに重ならないように */ .connection__list__item__anchor, .use-info__list__item__anchor { display: block; position: relative; z-index: 1; } /* テキストエリアがピンマークと重ならないように余白を確保 */ .connection__list__item__anchor__text, .use-info__list__item__anchor__text { padding-right: 50px; /* ピンマークの幅分の余白 */ } /* ===== 関連コンテンツのピンマーク用スタイル ここまで ===== */ /* ===== 動画ライブラリのピンマーク用スタイル（白アイコン仕様） ===== */ /* 動画カードコンテナを相対配置に */ .home-video__content__list__item { position: relative !important; /* ピンマークの絶対配置の基準点にする */ } /* 動画用ピンマークのスタイル - カード右上に固定（白アイコン） */ .video-library__pin { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9; /* 統一されたz-index */ transition: opacity 0.3s ease; /* 動画サムネイルの上で見やすくするため半透明黒背景 */ background: rgba(0, 0, 0, 0.6); border-radius: 50%; /* 円形の背景 */ } .video-library__pin:hover { opacity: 0.9; background: rgba(0, 0, 0, 0.8); /* ホバー時は濃く */ } .video-library__pin.loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* 動画用SVGアイコンのスタイル（白色） */ .video-library__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } /* お気に入り済みの場合はアイコンを塗りつぶし（白色） */ .video-library__pin[data-favorited="true"] svg { fill: #fff; stroke: #fff; } /* 動画用ツールチップ（PC版のみ、左側に表示、未お気に入り時のみ） */ .video-library__pin__tooltip { position: absolute; top: 50%; right: 100%; /* ピンマークの左側 */ transform: translateY(-50%); margin-right: 8px; background: #333333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 11; /* 統一されたz-index */ } /* 未お気に入り時のみツールチップを表示 */ @media screen and (min-width: 768px) { .video-library__pin[data-favorited="false"]:hover .video-library__pin__tooltip { opacity: 1; visibility: visible; } } /* 動画用フィードバックメッセージ */ .video-library__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background: #333333; color: white; padding: 8px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; z-index: 12; /* 統一されたz-index */ } .video-library__feedback.show { opacity: 1; visibility: visible; } /* スマートフォン対応 */ @media (max-width: 768px) { .video-library__pin__tooltip { display: none; } .video-library__feedback { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); right: auto; z-index: 1000; } /* モバイルでは背景を少し大きく */ .video-library__pin { width: 36px; height: 36px; } } /* 動画アンカー要素がピンマークに重ならないように */ .home-video__content__list__item__anchor { display: block; position: relative; z-index: 1; } /* 動画タイトルがピンマークと重ならないように余白を確保 */ .home-video__content__list__item__title { padding-right: 50px; /* ピンマークの幅分の余白 */ } /* ===== 動画ライブラリのピンマーク用スタイル ここまで ===== */ @charset "UTF-8"; /* seminar */ .section-seminar-index:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .section-seminar-index:not(:first-child) { margin-top: 80px; } } .section-seminar-detail:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .section-seminar-detail:not(:first-child) { margin-top: 80px; } } .study-group__content { margin-top: 40px; } .study-group__content.study-group__content--bottom { margin-top: 30px; } .study-group__content__list { position: relative; } .study-group__content__list__item { border-bottom: 1px solid #dbdbdb; } .study-group__content__list__item__anchor { position: relative; display: block; padding-bottom: 15px; transition: .5s; } @media screen and (min-width: 768px) { .study-group__content__list__item__anchor { padding-bottom: 30px; } } @media screen and (min-width: 1280px) { .study-group__content__list__item__anchor { padding-bottom: 20px; } } .study-group__content__list__item:not(:first-child) .study-group__content__list__item__anchor { padding-top: 30px; } @media screen and (min-width: 1280px) { .study-group__content__list__item:not(:first-child) .study-group__content__list__item__anchor { padding-top: 20px; } } .study-group__content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .study-group__content__list__item__anchor:hover .study-group__content__list__item__anchor__arrow { background-color: #0d0d0d; } } @media screen and (min-width: 768px) { .study-group__content__list__item__anchor__arrow { bottom: 20px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .study-group__content__list__item__anchor:hover .study-group__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .study-group__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .study-group__content__list__item__anchor:hover .study-group__content__list__item__anchor__arrow__path { fill: #ffffff; } } .study-group__content__list__item__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } @media screen and (min-width: 768px) { .study-group__content__list__item__category.study-group__content__list__item__category--head { margin-top: -2.5px; } .study-group__content__list__item__category.study-group__content__list__item__category--bottom { margin-top: 14.5px; } } .study-group__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .study-group__content__list__item__category__item { } } .study-group__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .study-group__content__list__item__category__item__inner { font-size: 1.2rem; } } .study-group__content__list__item__category--head .study-group__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .study-group__content__list__item__category__item.study-group__content__list__item__category__item--white .study-group__content__list__item__category__item__inner { padding: 4px 10px; color: #808080; border: 1px solid #808080; } .study-group__content__list__item__category__item.study-group__content__list__item__category__item--gray .study-group__content__list__item__category__item__inner { background-color: #808080; color: #fff; } .study-group__content__list__item__title { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; opacity: .7; } @media screen and (min-width: 768px) { .study-group__content__list__item__title { font-size: 1.8rem; } } a.study-group__content__list__item__anchor .study-group__content__list__item__title { color: #222222; opacity: 1; } .study-group__content__list__item__date { margin-top: 15px; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; padding-right: 30px; } @media screen and (min-width: 768px) { .study-group__content__list__item__date { margin-top: 17px; font-size: 1.4rem; } } .study-group__content + .home-link-button { margin-top: 40px; } @media screen and (min-width: 768px) { .study-group__content + .home-link-button { display: none; } } .seminar-detail-columns:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .seminar-detail-columns:not(:first-child) { margin-top: 50px; } } @media screen and (min-width: 1280px) { .seminar-detail-columns:not(:first-child) { margin-top: 0; } } @media screen and (min-width: 1280px) { .seminar-detail-columns { display: flex; margin-left: -25px; margin-right: -25px; } .seminar-detail-columns.seminar-detail-columns--no-image { display: block; margin-left: 0; margin-right: 0; } } .seminar-detail-columns__column { box-sizing: border-box; } .seminar-detail-columns__column.seminar-detail-columns__column--img { text-align: center; } @media screen and (min-width: 1280px) { .seminar-detail-columns__column.seminar-detail-columns__column--img { order: 2; } } @media screen and (min-width: 1280px) { .seminar-detail-columns__column { padding-left: 30px; padding-right: 30px; } .seminar-detail-columns--no-image .seminar-detail-columns__column { padding-left: 0; padding-right: 0; } .seminar-detail-columns__column.seminar-detail-columns__column--text { width: calc(100% - 388px); order: 1; } .seminar-detail-columns--no-image .seminar-detail-columns__column.seminar-detail-columns__column--text { width: 100%; } .seminar-detail-columns__column.seminar-detail-columns__column--img { width: 388px; margin-top: 0; } } .seminar-detail-columns__column.seminar-detail-columns__column--img img { width: 100%; max-width: 328px; } .seminar-detail-columns__column--img__popup img { max-width: 100%; width: 100%; } .seminar-detail-columns__column--img__anchor { transition: .5s; } @media screen and (min-width: 768px) { .seminar-detail-columns__column--img__anchor:hover { opacity: .6; } } .seminar-agenda { margin-top: 40px; } @media screen and (min-width: 768px) { .seminar-agenda { margin-top: 60px; } } @media screen and (min-width: 1280px) { .seminar-agenda { margin-top: 50px; } } .seminar-agenda ul:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .seminar-agenda ul:not(:first-child) { margin-top: 50px; } } .seminar-agenda ul li { position: relative; padding-left: 1em; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-agenda ul li { font-size: 1.6rem; } } .seminar-agenda ul li:before { content: "・"; position: absolute; top: 0; left: 0; } .seminar-agenda h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-agenda h2 { font-size: 1.8rem; } } .seminar-agenda h2:not(:first-child) { margin-top: 10px; } .seminar-agenda h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-agenda h3 { font-size: 1.6rem; } } .seminar-agenda h3:not(:first-child) { margin-top: 10px; } .seminar-agenda h4 { font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-agenda h4 { font-size: 1.5rem; } } .seminar-agenda h4:not(:first-child) { margin-top: 15px; } .seminar-agenda p { font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-agenda p { font-size: 1.5rem; } } .seminar-agenda p:not(:first-child) { margin-top: 10px; } .seminar-consent-box__attention { margin-top: 20px; font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .seminar-consent-box__attention { font-size: 1.4rem; } } .seminar-consent-box__attention__anchor { text-decoration: underline; font-weight: 500; } .seminar-date { display: flex; align-items: flex-start; } .seminar-date.seminar-date--pc { display: none; } @media screen and (min-width: 1280px) { .seminar-date.seminar-date--pc { display: flex; } .seminar-date.seminar-date--tbsp { display: none; } } .seminar-date__title { margin-right: 15px; width: 76px; text-align: center; box-sizing: border-box; padding: 5px; border: 1px solid #0d0d0d; font-size: 1.3rem; font-weight: 500; } @media screen and (min-width: 768px) { .seminar-date__title { font-size: 1.5rem; width: 85px; } } .seminar-date__text { margin-top: -1px; width: calc(100% - 91px); font-size: 1.4rem; line-height: 2; font-weight: 500; } @media screen and (min-width: 768px) { .seminar-date__text { margin-top: -3px; width: calc(100% - 100px); font-size: 1.6rem; } } .seminar-consent-box { padding: 30px 20px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .seminar-consent-box { padding: 40px; } } .seminar-consent-box:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .seminar-consent-box:not(:first-child) { margin-top: 35px; } } .seminar-consent-box-wrap.seminar-consent-box-wrap--bottom .seminar-consent-box { margin-top: 50px; } .seminar-consent-box.seminar-consent-box--closed { padding: 20px; } .seminar-consent-box__closed-text { text-align: center; color: #808080; line-height: 1.5; font-size: 1.8rem; font-weight: 500; } @media screen and (min-width: 768px) { .seminar-consent-box__closed-text { font-size: 2.2rem; } } .seminar-consent-box__title { font-size: 1.3rem; color: #222222; line-height: 1.5; font-weight: 500; } @media screen and (min-width: 768px) { .seminar-consent-box__title { font-size: 1.5rem; } } .seminar-consent-box__text { font-size: 1.3rem; color: #222222; line-height: 2; } @media screen and (min-width: 768px) { .seminar-consent-box__text { font-size: 1.5rem; } } .seminar-consent-box__text:not(:first-child) { margin-top: 15px; } .seminar-consent-box__form { text-align: center; } .seminar-consent-box__form:not(:first-child) { margin-top: 30px; } .seminar-consent-box__form__label { position: relative; display: inline-block; padding: 0 0 0 25px; cursor: pointer; color: #222222; font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; transition: opacity .5s; } @media screen and (min-width: 768px) { .seminar-consent-box__form__label { font-size: 1.4rem; } } .seminar-consent-box__form__label:hover { opacity: .6; } /* デフォルトのチェックボックスを非表示に */ .seminar-consent-box__form__input[type=checkbox] { display: none; } .seminar-consent-box__form__label:after, .seminar-consent-box__form__label:before { position:absolute; content:""; } .seminar-consent-box__form__label:before { box-sizing: border-box; width: 15px; height: 15px; top: 2px; left: 0; border:1px solid #dbdbdb; background-color: #fff; border-radius: 3px; } @media screen and (min-width: 768px) { .seminar-consent-box__form__label:before { width: 18px; height: 18px; } } .seminar-consent-box__form__label:after { width: 3px; height: 6px; top: 4px; left: 5px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; opacity: 0; transform: rotate(45deg); } @media screen and (min-width: 768px) { .seminar-consent-box__form__label:after { width: 4px; height: 7px; top: 5px; left: 6px; } } .seminar-consent-box__form__input[type=checkbox]:checked + label:before { border: 1px solid #808080; background-color: #808080; } .seminar-consent-box__form__input[type=checkbox]:checked + label:after { opacity: 1; } .seminar-consent-box__form__attention { margin-top: 15px; color: #222222; font-size: 1.2rem; line-height: 1.5; letter-spacing: .1em; } @media screen and (min-width: 768px) { .seminar-consent-box__form__attention { margin-top: 20px; font-size: 1.4rem; } } .seminar-consent-box__form__button-wrap { margin-top: 15px; } @media screen and (min-width:768px) and (max-width:1279px) { .seminar-consent-box__form__button-wrap--2column-top { display: flex; justify-content: center; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width:768px) { .seminar-consent-box__form__button-wrap--2column-bottom { display: flex; justify-content: center; margin-left: -10px; margin-right: -10px; } } .seminar-consent-box__form__button { text-align: center; width: 100%; max-width: 295px; margin: 0 auto; cursor: pointer; background: #0d0d0d; appearance: none; border: none; border-radius: 50px; display: block; color: #ffffff; font-size: 1.5rem; letter-spacing: .1em; line-height: 1.5em; font-weight: 500; padding: 15px 30px 14px; position: relative; z-index: 1; transition: opacity .5s; } @media screen and (min-width: 768px) { .seminar-consent-box__form__button { padding: 23px 30px 22px; font-size: 1.7rem; max-width: 300px; } } @media screen and (min-width: 1280px) { .seminar-consent-box__form__button-wrap.seminar-consent-box__form__button-wrap--2column-top .seminar-consent-box__form__button, .seminar-consent-box__form__button-wrap.seminar-consent-box__form__button-wrap--2column-bottom .seminar-consent-box__form__button { max-width: 280px; } } @media screen and (min-width: 1280px) { .seminar-consent-box__form__button-wrap.seminar-consent-box__form__button-wrap--2column-top .seminar-consent-box__form__button, .seminar-consent-box__form__button-wrap.seminar-consent-box__form__button-wrap--2column-bottom .seminar-consent-box__form__button { max-width: 300px; } } .seminar-consent-box__form__button:disabled { background: #808080; } @media screen and (min-width:768px) and (max-width:1279px) { .seminar-consent-box__form__button-wrap--2column-top .seminar-consent-box__form__button { margin-left: 10px; margin-right: 10px; } } @media screen and (min-width:768px) { .seminar-consent-box__form__button-wrap--2column-bottom .seminar-consent-box__form__button { margin-left: 10px; margin-right: 10px; } } .seminar-consent-box__form__button:not(:first-child) { margin-top: 15px; } @media screen and (min-width:768px) and (max-width:1279px) { .seminar-consent-box__form__button-wrap--2column-top .seminar-consent-box__form__button:not(:first-child) { margin-top: 0; } } @media screen and (min-width:768px) { .seminar-consent-box__form__button-wrap--2column-bottom .seminar-consent-box__form__button:not(:first-child) { margin-top: 0; } } @media screen and (min-width:768px) { .seminar-consent-box__form__button:hover { opacity: .6; } .seminar-consent-box__form__button:disabled:hover { opacity: 1; cursor: default; } } .section-ils { margin-top: 40px; } @media screen and (min-width:768px) { .section-ils { margin-top: 50px; } } /* ===== ライブセミナー お気に入りピンマーク ===== */ /* セミナーアイテムの親要素にposition設定 */ .home-seminar__content__list__item__image-wrap, .live-seminar__item__image-wrap, .home-seminar__columns__column__image, .study-group__content__list__item .home-seminar__columns__column__image { position: relative !important; } /* ===== お気に入りピンマーク（動画ライブラリと同じ仕様） ===== */ /* セミナー用：白アイコン → 黒背景 ピンの針が見えなくならないように*/ /* ===== ピンアイコンクリック問題の修正 ===== */ .seminar-library__pin { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 9 !important; cursor: pointer; pointer-events: auto; border-radius: 50% !important; padding: 4px; display: flex; align-items: center; justify-content: center; isolation: isolate; /* セミナー用：白アイコン → 黒背景 */ background: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } .seminar-library__pin:hover { background: rgba(0, 0, 0, 0.2) !important; } /* 親リンク内のピンアイコンの優先度を上げる */ a .seminar-library__pin { z-index: 10; } .seminar-library__item a { z-index: 1; } .seminar-library__pin { position: absolute; top: 4px; right: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 9; !important border-radius: 50%; /* 丸く */ padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; background: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } /* タブレット・PC表示時の調整 */ @media screen and (min-width: 768px) { .seminar-library__pin { top: 10px; right: 10px; width: 40px; height: 40px; } } /* ローディング状態 */ .seminar-library__pin.loading { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* SVGのスタイルを確実に適用 */ .seminar-library__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } /* アニメーション効果のみ保持 */ .seminar-library__pin svg path { transition: fill 0.3s ease, stroke 0.3s ease; } /* ===== ツールチップ（PC専用、左側表示） ===== */ /* ツールチップ本体 */ .seminar-library__pin__tooltip { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.8) !important; color: #fff !important; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 11; pointer-events: none; } /* 研究会ページでも確実に背景色を適用 */ .study-group__content .seminar-library__pin__tooltip, .study-group__content__list__item .seminar-library__pin__tooltip { background-color: rgba(0, 0, 0, 0.8) !important; color: #fff !important; } /* PC時のホバー表示（お気に入り未登録のみ） */ @media screen and (min-width: 768px) { .seminar-library__pin:hover .seminar-library__pin__tooltip { opacity: 1; visibility: visible; } /* お気に入り済み状態ではツールチップを非表示 */ .seminar-library__pin[data-favorited="true"]:hover .seminar-library__pin__tooltip { opacity: 0; visibility: hidden; } } /* SPでは非表示（ツールチップのみ） */ @media screen and (max-width: 767px) { .seminar-library__pin__tooltip { display: none; } } /* フィードバック表示時の強制表示（最強特異性） */ .seminar-library__pin .seminar-library__pin__tooltip { /* 通常状態では変更なし */ } /* JavaScriptでstyle属性が設定された時の強制表示 */ .seminar-library__pin .seminar-library__pin__tooltip[style] { opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 9 !important; } /* お気に入り済み状態でもフィードバック時は表示 */ .seminar-library__pin[data-favorited="true"] .seminar-library__pin__tooltip[style] { opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 9 !important; } /* ===== フィードバックメッセージ ===== */ /* フィードバックメッセージ本体 */ .seminar-library__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.9) !important; color: #fff !important; padding: 8px 16px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 15; pointer-events: none; } /* 研究会ページでも確実に背景色を適用 */ .study-group__content .seminar-library__feedback, .study-group__content__list__item .seminar-library__feedback { background-color: rgba(0, 0, 0, 0.9) !important; color: #fff !important; } /* 表示時のアニメーション（シンプル版） */ .seminar-library__feedback.show { opacity: 1 !important; visibility: visible !important; display: block !important; } /* スマートフォン対応 */ @media (max-width: 768px) { .seminar-library__feedback { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); } } /* ===== ピンマーク ここまで ===== */ @charset "UTF-8"; /* 動画ライブラリ */ .movie-library__content { margin-top: 30px; } @media screen and (min-width: 768px) { .movie-library__content { margin-top: 45px; } } @media screen and (min-width: 768px) { .movie-library__content__list { display: flex; flex-wrap: wrap; margin-left: -0.5px; margin-right: -0.5px; } } .movie-library__content__list__item { box-sizing: border-box; } @media screen and (min-width: 768px) { .movie-library__content__list__item { width: 50%; padding-left: 0.5px; padding-right: 0.5px; } } @media screen and (min-width: 1280px) { .movie-library__content__list__item { width: 33.333%; } } .movie-library__content__list__item:not(:first-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .movie-library__content__list__item:not(:first-child) { margin-top: 0; } .movie-library__content__list__item:nth-child(n+3) { margin-top: 50px; } } @media screen and (min-width: 1280px) { .movie-library__content__list__item:nth-child(n+3) { margin-top: 0; } .movie-library__content__list__item:nth-child(n+4) { margin-top: 50px; } } .movie-library__content__list__item__anchor { position: relative; display: block; height: 100%; padding-bottom: 15px; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor { padding-bottom: 20px; } } .movie-library__content__list__item__anchor:after { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #dbdbdb; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor:after { width: calc(100% - 30px); left: 15px; } } .movie-library__content__list__item__image-wrap { overflow: hidden; position: relative; } .movie-library__content__list__item__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor:hover .movie-library__content__list__item__image { transform: scale(1.05); } } .movie-library__content__list__item__image:before { content: ""; display: block; padding-top: 56.25%; } .movie-library__content__list__item__image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor:hover .movie-library__content__list__item__image:after { opacity: .5; } } .movie-library__content__list__item__image__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .movie-library__content__list__item__image__svg__path { fill: #ffffff; } .movie-library__content__list__item__image-time { position: absolute; right: 0; bottom: 0; background-color: grey; color: #fff; font-size: 1.2rem; box-sizing: border-box; display: inline-block; font-size: 1.1rem; letter-spacing: .1em; padding: 5px 10px; text-align: center; } @media screen and (min-width: 768px) { .movie-library__content__list__item__image-time { font-size: 1.2rem; } } .movie-library__content__list__item__text-wrap { margin-top: 15px; } @media screen and (min-width: 768px) { .movie-library__content__list__item__text-wrap { padding: 0 15px; } .movie-library__content__list__item__text-wrap { margin-top: 20px; } } .movie-library__content__list__item__title { margin-top: 10px; box-sizing: border-box; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .movie-library__content__list__item__title { font-size: 1.7rem; } } .movie-library__content__list__item__category { display: flex; flex-wrap: wrap; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } .movie-library__content__list__item__category.movie-library__content__list__item__category--bottom { margin-top: 10px; } @media screen and (min-width: 768px) { .movie-library__content__list__item__category.movie-library__content__list__item__category--bottom { margin-top: 13px; } } .movie-library__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .movie-library__content__list__item__category__item { } } .movie-library__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .movie-library__content__list__item__category__item__inner { font-size: 1.2rem; } } .movie-library__content__list__item__category.movie-library__content__list__item__category--head .movie-library__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .movie-library__content__list__item__category.movie-library__content__list__item__category--bottom .movie-library__content__list__item__category__item--gray .movie-library__content__list__item__category__item__inner { background-color: #808080; color: #ffffff; } .movie-library__content__list__item__category.movie-library__content__list__item__category--bottom .movie-library__content__list__item__category__item--white .movie-library__content__list__item__category__item__inner { padding: 4px 10px; border: 1px solid #808080; color: #808080; } .movie-library__content__list__item__txt, .movie-library__content__list__item__date { margin-top: 15px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .movie-library__content__list__item__txt, .movie-library__content__list__item__date { margin-top: 25px; font-size: 1.4rem; } } .movie-library__content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor__arrow { right: 15px; bottom: 15px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor:hover .movie-library__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .movie-library__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__content__list__item__anchor:hover .movie-library__content__list__item__anchor__arrow__path { fill: #ffffff; } } .movie-library__columns__column__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .movie-library__columns__column__image:before { content: ""; display: block; padding-top: 56.25%; } .movie-library__columns__column__title { margin-top: 10px; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .movie-library__columns__column__title { font-size: 1.8rem; } } .movie-library__content__list__item__content__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } .movie-library__content__list__item__content__category__item { box-sizing: border-box; padding: 2.5px; } .movie-library__content__list__item__content__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; color: #ffffff; background-color: #808080; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .movie-library__content__list__item__content__category__item__inner { font-size: 1.2rem; } } .movie-library__content + .home-link-button { margin-top: 30px; } @media screen and (min-width: 768px) { .movie-library__content + .home-link-button { margin-top: 40px; } } .movie-library__main__item { box-sizing: border-box; } .movie-library__main__item__anchor { position: relative; display: block; transition: .5s; } .movie-library__main__item__image-wrap { overflow: hidden; } .movie-library__main__item__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__main__item__anchor:hover .movie-library__main__item__image { transform: scale(1.05); } } .movie-library__main__item__image:before { content: ""; display: block; padding-top: 56.25%; } .movie-library__main__item__image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .movie-library__main__item__anchor:hover .movie-library__main__item__image:after { opacity: .5; } } .movie-library__main__item__image__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .movie-library__main__item__image__svg__path { fill: #ffffff; } .movie-library__main__item__date { margin-top: 20px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .movie-library__main__item__date { margin-top: 25px; font-size: 1.4rem; } } .movie-library__main__item__title { margin-top: 10px; box-sizing: border-box; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .movie-library__main__item__title { font-size: 1.6rem; } } .movie-library__main__item__buttons { margin-top: 20px; } @media screen and (min-width: 768px) { .movie-library__main__item__buttons { display: flex; flex-wrap: wrap; margin: 25px -5px -5px -5px; } } @media screen and (min-width: 768px) { .buttons__pdflink { box-sizing: border-box; width: 260px; padding: 5px; } } .buttons__pdflink:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .buttons__pdflink:not(:first-child) { margin-top: 0; } } .buttons__pdflink__anchor { margin: 0 auto; display: block; box-sizing: border-box; text-align: center; padding: 17px 20px 19px; background-color: #0d0d0d; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .buttons__pdflink__anchor:hover { opacity: .6; } } .buttons__pdflink__anchor__text { display: inline-block; color: #ffffff; font-size: 1.4rem; font-weight: 500; } .buttons__pdflink__anchor__text:before { content: ""; display: inline-block; position: relative; top: 1px; margin-right: 10px; width: 10px; height: 12.5px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf_white.svg); background-position: center; background-repeat: no-repeat; background-size: contain; } /* ===== お気に入りピンマーク（仕様準拠版） ===== */ /* 親要素にposition: relativeを追加（重要） */ .movie-library__content__list__item__image-wrap { position: relative; } /* ピンマークのベーススタイル（コンテンツタイプ別背景） */ .movie-library__pin, .video-library__pin { position: absolute; top: 4px; right: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 5; border-radius: 50%; /* 丸く */ padding: 4px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; /* 動画用：白アイコン → 黒背景 */ background: rgba(0, 0, 0, 0.1) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .movie-library__pin:hover, .video-library__pin:hover { background: rgba(0, 0, 0, 0.7) !important; } /* タブレット・PC表示時の調整 */ @media screen and (min-width: 768px) { .movie-library__pin { top: 10px; right: 10px; width: 40px; height: 40px; } } /* ローディング状態 */ .movie-library__pin.loading { pointer-events: none; } /* SVGのスタイルを確実に適用 */ .movie-library__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } /* アニメーション効果のみ保持 */ .movie-library__pin svg path { transition: fill 0.3s ease, stroke 0.3s ease; } /* ===== ツールチップ（PC専用） ===== */ /* ツールチップ本体 */ .movie-library__pin__tooltip { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 6; pointer-events: none; } /* PC時のホバー表示（お気に入り未登録のみ） */ @media screen and (min-width: 768px) { .movie-library__pin:hover .movie-library__pin__tooltip { opacity: 1; visibility: visible; } /* お気に入り済み状態ではツールチップを非表示 */ .movie-library__pin[data-favorited="true"]:hover .movie-library__pin__tooltip { opacity: 0; visibility: hidden; } } /* SPでは非表示（ツールチップのみ） */ @media screen and (max-width: 767px) { .movie-library__pin__tooltip { display: none; } } /* フィードバック表示時の強制表示（最強特異性） */ .movie-library__content .movie-library__content__list .movie-library__content__list__item .movie-library__pin .movie-library__pin__tooltip { /* 通常状態では変更なし */ } /* JavaScriptでstyle属性が設定された時の強制表示 */ .movie-library__content .movie-library__content__list .movie-library__content__list__item .movie-library__pin .movie-library__pin__tooltip[style] { opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 9 !important; } /* お気に入り済み状態でもフィードバック時は表示 */ .movie-library__content .movie-library__content__list .movie-library__content__list__item .movie-library__pin[data-favorited="true"] .movie-library__pin__tooltip[style] { opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 12 !important; } /* ===== フィードバックメッセージ ===== */ /* フィードバックメッセージ本体 */ .movie-library__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px 16px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 15; pointer-events: none; } /* 表示時のアニメーション（シンプル版） */ .movie-library__feedback.show { opacity: 1 !important; visibility: visible !important; display: block !important; } /* ===== 動画詳細ページ お気に入り機能（既存デザインシステム準拠） ===== */ /* 視聴動画タイトル下ボタンエリア */ .movie-detail__favorite-button-area { margin-top: 20px; } @media screen and (min-width: 768px) { .movie-detail__favorite-button-area { margin-top: 25px; } } /* 視聴動画お気に入りボタン（既存ピンマークスタイルに準拠） */ .movie-detail__favorite-button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; background: none !important; /* ピンマークと同様：背景色完全削除 */ background-color: transparent !important; border: 2px solid #dbdbdb; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; color: #808080; transition: all 0.3s ease; min-width: 200px; justify-content: center; box-shadow: none !important; } @media screen and (min-width: 768px) { .movie-detail__favorite-button { padding: 15px 25px; font-size: 16px; min-width: 240px; } } /* 全ての状態で背景色を強制的に削除（ピンマークと同じパターン） */ .movie-detail__favorite-button, .movie-detail__favorite-button:hover, .movie-detail__favorite-button:focus, .movie-detail__favorite-button:active, .movie-detail__favorite-button[data-favorited="true"], .movie-detail__favorite-button[data-favorited="false"] { background: none !important; background-color: transparent !important; box-shadow: none !important; } .movie-detail__favorite-button:hover { border-color: #808080; color: #0d0d0d; } .movie-detail__favorite-button:focus { outline: 2px solid #0d0d0d; outline-offset: 2px; } .movie-detail__favorite-button.loading { opacity: 0.6; cursor: not-allowed; pointer-events: none; } /* お気に入り済み状態のボタン（統一カラーパレット使用） */ .movie-detail__favorite-button[data-favorited="true"] { border-color: #0d0d0d; color: #0d0d0d; } .movie-detail__favorite-button[data-favorited="true"]:hover { border-color: #0d0d0d; color: #0d0d0d; opacity: 0.8; } /* ボタンアイコン */ .movie-detail__favorite-button__icon { flex-shrink: 0; transition: all 0.3s ease; } /* お気に入り済み状態のアイコン（塗りつぶし） */ .movie-detail__favorite-button[data-favorited="true"] .movie-detail__favorite-button__icon path { fill: currentColor; stroke: none; } /* ボタンテキスト */ .movie-detail__favorite-button__text { white-space: nowrap; transition: all 0.3s ease; } /* フィードバック状態（一時的な文言変更）- グリーンの代わりにメインカラー使用 */ .movie-detail__favorite-button.feedback-state { border-color: #0d0d0d; color: #0d0d0d; } .movie-detail__favorite-button.feedback-state .movie-detail__favorite-button__icon { color: #0d0d0d; } /* おすすめ動画エリアのピンマーク */ /* 既存の動画ライブラリCSSを流用（上記のピンマークCSSがそのまま適用される） */ /* おすすめ動画エリアの親要素調整 */ .recommended-movies .movie-library__content__list__item__image-wrap { position: relative; } /* スマートフォン対応 */ @media (max-width: 768px) { .movie-detail__favorite-button { width: 100%; max-width: 300px; margin: 0 auto; display: flex; } } /* 動画詳細ページ専用のピンマーク調整（デザイン統一） */ .movie-detail__recommended-area .movie-library__pin { /* 既存のピンマークスタイルを継承 */ /* 背景色なし、トランジション効果、ツールチップ等は既存CSS適用 */ } /* 動画詳細ページのフィードバックメッセージ（統一デザイン） */ .movie-detail__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px 16px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 15; pointer-events: none; } /* 表示時のアニメーション */ .movie-detail__feedback.show { opacity: 1 !important; visibility: visible !important; display: block !important; } @charset "UTF-8"; /* VSRADマニュアル・パンフ */ .section-vsrad-manual { margin-top: 25px; } @media screen and (min-width: 768px) { .section-vsrad-manual { margin-top: 40px; } } .section-vsrad-manual:last-child { margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-vsrad-manual:last-child { margin-bottom: 80px; } } .vsrad-manual-list { display: flex; flex-wrap: wrap; margin-left: -7.5px; margin-right: -7.5px; } @media screen and (min-width: 768px) { .vsrad-manual-list { padding: 0 15px; margin-left: -8.5px; margin-right: -8.5px; } } .vsrad-manual-list__item { width: 50%; padding-left: 7.5px; padding-right: 7.5px; box-sizing: border-box; } @media screen and (min-width: 768px) { .vsrad-manual-list__item { width: 33.333%; padding-left: 8.5px; padding-right: 8.5px; } } @media screen and (min-width: 1280px) { .vsrad-manual-list__item { width: 25%; } } .vsrad-manual-list__item:nth-child(n+3) { margin-top: 20px; } @media screen and (min-width: 768px) { .vsrad-manual-list__item:nth-child(n+3) { margin-top: 0; } .vsrad-manual-list__item:nth-child(n+4) { margin-top: 24px; } } @media screen and (min-width: 1280px) { .vsrad-manual-list__item:nth-child(n+4) { margin-top: 0; } .vsrad-manual-list__item:nth-child(n+5) { margin-top: 24px; } } .vsrad-manual-list__item__anchor { display: block; box-sizing: border-box; height: 100%; padding-bottom: 14px; border-bottom: 1px solid #dbdbdb; } .vsrad-manual-list__item__anchor__img { display: block; text-align: center; } .vsrad-manual-list__item__anchor__img img { height: 102px; object-fit: contain; width: auto; max-width: 100%; } @media screen and (min-width: 768px) { .vsrad-manual-list__item__anchor__img img { height: 135px; } } .vsrad-manual-list__item__anchor__tag { display: inline-block; margin-top: 14px; padding: 4px 9px 5px; background: #0d0d0d; color: #fff; font-size: 1.1rem; } @media screen and (min-width: 768px) { .vsrad-manual-list__item__anchor__tag { margin-top: 18px; padding: 5px 14px; font-size: 1.2rem; } } .vsrad-manual-list__item__anchor__text { margin-top: 14px; position: relative; display: inline-block; padding-left: 20px; font-size: 1.2rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .vsrad-manual-list__item__anchor__text:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .vsrad-manual-list__item__anchor__text { margin-top: 18px; font-size: 1.3rem; } .vsrad-manual-list__item__anchor:hover .vsrad-manual-list__item__anchor__text { text-decoration: underline; opacity: .6; } } .vsrad-manual-list__item__anchor__text:before { content: ""; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .vsrad-manual-list__item__anchor__text:before { top: 4px; width: 12px; height: 15px; background-size: 12px 15px; } } /* ========================================================================== search_hk.css ========================================================================== */ .hotline_wrapper { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .hotline_ttl { border: 1px solid; font-size: 14px; padding: 1rem 3rem; } .hotline_number { font-size: 25px; } .hotline_date1, .hotline_date2 { font-weight: bold; line-height: 140%; } .hotline_detail { font-size: 10px; line-height: 140%; } .side_search_box { padding-top: 2rem; } .search_ttl { margin-bottom: 3rem; } .search_btn { display: flex; align-items: center; cursor: pointer; margin-bottom: 2rem; justify-content: space-between; } @media screen and (max-width: 900px){ .content.content--twocolumn { display: flex; flex-direction: column-reverse; } .search__content__column--side { display: block!important; width: 100%!important; } .search__sidebar__none { display: none; } .sidebar__inner__box:not(:first-child) { border-top: none; margin-top: 0px; } } .distribution .search__sidebar__none { display: block; padding: 30px 50px 20px 50px; background: #F6F6F6; } .distribution .support-info { background-color: #F6F6F6; } .distribution .product-info__title{ display: none; } .distribution .search_btn { margin: 0; padding-bottom: 2rem; } .side_search_box svg{ height: 9px; transform: translateY(-50%); width: 10px; } @media screen and (max-width: 767px){ .distribution .search__sidebar__none { padding: 30px 26px 20px 20px; } } main.mylist-page { .section { padding-bottom: 0; } .section:last-child { padding-bottom: 100px; } .section li { position: relative; } .no-favorite-message { display: none; } /* スライダー全般 */ .section-home-video.home-video::before { display: none; } .section-home-video.home-video { padding-top: 0; margin-bottom: 0; } /* セミナー-エリア */ .section-area-seminar { .home-video__content__list__item__image::after { display: none; } .home-video__content__list__item__date { margin-bottom: 24px; } .icon-trash::before { background-color: white; } } /* 動画エリア */ .section-area-movie { .icon-trash::before { background-color: white; } } /* 指導箋エリア */ .section-area-prescribe { .home-link-button.home-link-button--bottom { display: none !important; } } /* ごみ箱アイコン */ .icon-trash::before { content: ""; position: absolute; top: 8px; right: 16px; z-index: 9; width: 24px; height: 24px; background-color: currentColor; mask: url('data:image/svg+xml;utf8,') no-repeat center; /*mask: url('data:image/svg+xml;utf8,');*/ background-repeat: no-repeat; background-position: center; background-size: contain; transition: background-color 0.25s; } .icon-trash:hover::before { cursor: pointer; background-color: darkgray; mask: url('data:image/svg+xml;utf8,') no-repeat center; /*background-image: url('data:image/svg+xml;utf8,');*/ transition: background-color 0.25s; } /* 削除確認ダイアログ（モーダル） */ .favorite-delete-dialog-wrapper { position: fixed; inset: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.5); /* 背景をグレー(半透明)に */ display: flex; align-items: center; justify-content: center; padding: 24px; } .favorite-delete-dialog { background-color: #fff; border: 1px solid #111; border-radius: 8px; padding: 24px 24px; width: 100%; max-width: 360px; text-align: center; line-height: 1.6; box-shadow: 0 10px 30px rgba(0,0,0,0.25); font-size: 16px; .favorite-delete-dialog__buttons { margin-top: 16px; display: flex; } button { margin: 8px; padding: 8px; border: 1px solid #111; border-radius: 20px; font-size: 14px; width: 180px; /* キャンセルボタン */ &.favorite-delete-dialog__button--cancel { background-color: #fff; color: #111; transition: 0.25s; &:hover { background-color: #111; color: white; transition: 0.25s; cursor: pointer; } } &.favorite-delete-dialog__button--delete { background-color: #111; color: white; transition: 0.25s; &:hover { background-color: #fff; color: #111; transition: 0.25s; cursor: pointer; } } } } .d-none { display: none !important; } } /* サイト全体で共通のエレメント */ @charset "utf-8"; /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ /* カラム */ @media screen and (min-width: 768px) { .columns { display: flex; flex-wrap: wrap; margin-right: -25px; margin-left: -25px; } .columns__column { box-sizing: border-box; padding-right: 25px; padding-left: 25px; } } .columns__column:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .columns__column:not(:first-child) { margin-top: 0; } } .columns__column:not(:last-child) { margin-bottom: 20px; } @media screen and (min-width: 768px) { .columns__column:not(:last-child) { margin-bottom: 0; } } .columns--one > .columns__column.margin-top-heading-2:nth-child(n+2) { margin-top: 100px; } @media screen and (max-width:767px) { .columns--one > .columns__column.margin-top-heading-2:nth-child(n+2) { margin-top: 80px; } } @media screen and (min-width:768px) { .columns--two > .columns__column.margin-top-heading-2:nth-child(n+3) { margin-top: 100px; } } @media screen and (max-width:767px) { .columns--two > .columns__column.margin-top-heading-2:not(:first-child) { margin-top: 80px; } } .columns--two > .columns__column.margin-top-heading-3:nth-child(n+3) { margin-top: 60px; } @media screen and (max-width:767px) { .columns--two > .columns__column.margin-top-heading-3:nth-child(n+2) { margin-top: 50px; } } .columns__column.margin-top-heading-4 { margin-top: 50px; } @media screen and (max-width:767px) { .columns__column.margin-top-heading-4 { margin-top: 40px; } } .columns__column.margin-top-heading-5 { margin-top: 40px; } @media screen and (max-width:767px) { .columns__column.margin-top-heading-5 { margin-top: 30px } } .columns__column { box-sizing: border-box; padding-right: 25px; padding-left: 25px; } .columns .columns__column { padding-right: 25px; padding-left: 25px; } @media screen and (max-width:767px) { .columns .columns__column { padding-left: 0; padding-right: 0; } } .columns--one > .columns__column:nth-child(n+2), .columns--one-two > .columns__column:nth-child(n+3), .columns--two-one > .columns__column:nth-child(n+3), .columns--four > .columns__column:nth-child(n+5) { margin-top: 50px; } .columns--one > .columns__column { float: none; width: 100% } @media screen and (max-width:767px) { .columns--one { margin-right: 0; margin-left: 0; } } .columns--two > .columns__column { width: 50% } .columns--two > .columns__column:nth-child(n+3){ margin-top: 50px; } @media screen and (max-width:767px) { .columns--two { margin-right: 0; margin-left: 0; } .columns--two > .columns__column { flex: auto; width: 100%; padding: 0; } .columns--two > .columns__column:not(:first-child) { margin-top: 30px; } .columns--two > .columns__column:not(:last-child) { margin-bottom: 0; } } @media screen and (max-width:1049px) { .columns--two.columns--to-two { margin-right: -15px; margin-left: -15px; } .columns--two.columns--to-two > .columns__column { flex: none; width: 50%; padding-right: 15px; padding-left: 15px; } .columns--two.columns--to-two > .columns__column:not(:first-child) { margin-top: 0; } .columns--two.columns--to-two > .columns__column:nth-child(n+3) { margin-top: 30px; } } .columns--three > .columns__column:nth-child(n+4) { margin-top: 50px; } /* 1:2カラム */ .columns--one-two { margin-right: -25px; margin-left: -25px; } @media screen and (max-width: 1049px) { .columns--one-two { margin-right: -15px; margin-left: -15px; } } @media screen and (max-width:767px) { .columns--one-two { margin-left: 0; margin-right: 0; } } .columns--one-two > .columns__column { padding-right: 25px; padding-left: 25px; } @media screen and (max-width: 1049px) { .columns--one-two > .columns__column { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width:767px) { .columns--one-two > .columns__column { flex: auto; width: 100%; padding: 0; } } .columns--one-two > .columns__column:nth-child(odd) { flex: 1; } .columns--one-two > .columns__column:nth-child(even) { flex: 2; } @media screen and (max-width:767px) { .columns--one-two > .columns__column:nth-child(2) { margin-top: 20px; } } /* 2:1カラム */ .columns--two-one > .columns__column:nth-child(1) { flex: 2; } .columns--two-one > .columns__column:nth-child(2) { flex: 1; } @media screen and (max-width:767px) { .columns--two-one { margin-left: 0; margin-right: 0; } .columns--two-one > .columns__column { flex: auto; width: 100%; padding: 0; } .columns--two-one > .columns__column:nth-child(2) { margin-top: 30px; } } /* 3:1カラム */ .columns--three-one > .columns__column:nth-child(1) { flex: 3; } .columns--three-one > .columns__column:nth-child(2) { flex: 1; } @media screen and (max-width:767px) { .columns--three-one { margin-right: 0; margin-left: 0; } .columns--three-one > .columns__column { flex: auto; width: 100%; padding: 0; } .columns--three-one > .columns__column:nth-child(2) { margin-top: 30px; } } /* 1:3カラム */ .columns--one-three { margin-bottom: 0; } .columns--one-three > .columns__column:nth-child(odd) { flex: 1; } .columns--one-three > .columns__column:nth-child(even) { flex: 3; } @media screen and (max-width:767px) { .columns--one-three { margin-right: 0; margin-left: 0; } .columns--one-three > .columns__column { flex: auto; width: 100%; padding: 0; } .columns--one-three > .columns__column:nth-child(2) { margin-top: 30px; } } /* 3カラム */ .columns--three > .columns__column { width: 33.333%; } @media screen and (max-width:1049px) { .columns--three > .columns__column { width: 50%; } .columns--three > .columns__column:not(:nth-child(1)), .columns--three > .columns__column:not(:nth-child(2)) { margin-top: 0; } .columns--three > .columns__column:not(:nth-last-child(-n+2)) { margin-bottom: 50px; } } @media screen and (max-width:767px) { .columns--three > .columns__column { flex: auto; width: 100%; } .columns--three > .columns__column:not(:first-child) { margin-top: 30px; } .columns--three > .columns__column:not(:last-child) { margin-bottom: 0; } .columns--three.columns--to-two > .columns__column { flex: inherit; } } @media screen and (max-width:1049px) { .columns--three.columns--to-one > .columns__column { width: 50%; padding-right: 15px; padding-left: 15px; } } @media screen and (max-width:767px) { .columns--three.columns--to-one > .columns__column { width: 100%; } } @media screen and (max-width:767px) { .columns--three.columns--to-two { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .columns--three.columns--to-two > .columns__column { width: 50%; padding-right: 15px; padding-left: 15px; } .columns--three.columns--to-two > .columns__column:not(:first-child) { margin-top: 0; } .columns--three.columns--to-two > .columns__column:nth-child(n+3) { margin-top: 30px; } .columns--three.columns--to-two > .columns__column { flex: inherit; } } /* 4カラム */ .columns.columns--four { margin-right: -15px; margin-left: -15px; } .columns--four>.columns__column { width: 25%; padding-right: 15px; padding-left: 15px; } @media screen and (max-width:1049px) { .columns--four.columns--to-one > .columns__column, .columns--four.columns--to-two > .columns__column { width: 50%; } .columns--four.columns--to-one > .columns__column:nth-child(n+3) { margin-top: 30px; } .columns--four.columns--to-two > .columns__column:nth-child(n+3) { margin-top: 40px; } } @media screen and (max-width:767px) { .columns--four.columns--to-one { margin-right: 0; margin-left: 0; } .columns--four.columns--to-one > .columns__column { width: 100%; padding-right: 0; padding-left: 0; } .columns--four.columns--to-one > .columns__column:nth-child(n+2) { margin-top: 30px; } .columns--four.columns--to-two { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .columns--four.columns--to-two > .columns__column { width: 50%; padding-right: 15px; padding-left: 15px; } .columns--four.columns--to-two > .columns__column { width: 50%; } .columns--four.columns--to-two > .columns__column:not(:first-child) { margin-top: 0; } .columns--four.columns--to-two > .columns__column:not(:last-child) { margin-bottom: 0; } .columns--four.columns--to-two > .columns__column:nth-child(n+3) { margin-top: 30px; } } .columns--reverse > .columns__column:nth-child(1) { order: 2; } @media screen and (max-width:767px) { .columns--reverse > .columns__column:nth-child(1) { order: 1; } } .columns--reverse > .columns__column:nth-child(2) { order: 1; } @media screen and (max-width:767px) { .columns--reverse > .columns__column:nth-child(2) { order: 2; } } .columns--vertical-center { align-items: center; } /* img＋textbutton（heading）＋p */ .text-button-heading-columns:not(:last-child) { margin-bottom: 50px; } /* ------- 2:1 1:2などのスタイル ------- */ @media screen and (min-width: 768px) { .l_h2_gt_r_img .columns, .l_h2_r_img .columns, .l_h3_gt_r_img .columns, .l_h3_r_img .columns, .l_img_lt_r_h2 .columns, .l_img_lt_r_h3 .columns, .l_img_r_h2 .columns, .l_img_r_h3 .columns { flex-wrap: nowrap; } } .l_h2_gt_r_img .columns__column, .l_h2_r_img .columns__column, .l_h3_gt_r_img .columns__column, .l_h3_r_img .columns__column, .l_img_lt_r_h2 .columns__column, .l_img_lt_r_h3 .columns__column, .l_img_r_h2 .columns__column, .l_img_r_h3 .columns__column { width: 50%; } @media screen and (max-width: 767px) { .l_h2_gt_r_img .columns__column, .l_h2_r_img .columns__column, .l_h3_gt_r_img .columns__column, .l_h3_r_img .columns__column, .l_img_lt_r_h2 .columns__column, .l_img_lt_r_h3 .columns__column, .l_img_r_h2 .columns__column, .l_img_r_h3 .columns__column { width: 100%; } } .l_h2_gt_r_img { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h2_gt_r_img { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_h2_gt_r_img .columns__column:nth-child(1) { order: 2; width: 365px; } } @media screen and (min-width: 768px) { .l_h2_gt_r_img .columns__column:nth-child(2) { order: 1; width: 740px; } } .l_h2_gt_r_img .heading-2 { margin-top: 0; margin-bottom: 0; } .l_h2_gt_r_img .heading-2:not(:first-child) { margin-top: 0; } .l_h2_gt_r_img .heading-2:not(:last-child) { margin-bottom: 20px; } .l_h2_gt_r_img .paragraph { margin-top: 0; margin-bottom: 0; } .l_h2_gt_r_img .paragraph:not(:first-child) { margin-top: 10px; } .l_h2_gt_r_img .paragraph:not(:last-child) { margin-bottom: 25px; } .l_h2_gt_r_img .link-button { margin-top: 0; margin-bottom: 0; } .l_h2_gt_r_img .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_h2_gt_r_img .link-button:not(:first-child) { margin-top: 40px; } } .l_h2_gt_r_img .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h2_gt_r_img .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_h2_r_img */ .l_h2_r_img { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h2_r_img { margin-top: 80px; margin-bottom: 45px; } } @media screen and (min-width: 768px) { .l_h2_r_img .columns__column:nth-child(1) { order: 2; } .l_h2_r_img .columns__column:nth-child(2) { order: 1; } } .l_h2_r_img .heading-2 { margin-top: 0; margin-bottom: 0; } .l_h2_r_img .heading-2:not(:first-child) { margin-top: 0; } .l_h2_r_img .heading-2:not(:last-child) { margin-bottom: 20px; } .l_h2_r_img .paragraph { margin-top: 0; margin-bottom: 0; } .l_h2_r_img .paragraph:not(:first-child) { margin-top: 20px; } .l_h2_r_img .paragraph:not(:last-child) { margin-bottom: 20px; } .l_h2_r_img .link-button { margin-top: 0; margin-bottom: 0; } .l_h2_r_img .link-button:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .l_h2_r_img .link-button:not(:first-child) { margin-top: 40px; } } .l_h2_r_img .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h2_r_img .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_h3_gt_r_img */ .l_h3_gt_r_img { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h3_gt_r_img { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_h3_gt_r_img .columns__column:nth-child(1) { order: 2; width: 365px; } .l_h3_gt_r_img .columns__column:nth-child(2) { order: 1; width: 740px; } } .l_h3_gt_r_img .heading-3 { margin-top: 0; margin-bottom: 0; } .l_h3_gt_r_img .heading-3:not(:first-child) { margin-top: 0; } .l_h3_gt_r_img .heading-3:not(:last-child) { margin-bottom: 20px; } .l_h3_gt_r_img .paragraph { margin-top: 0; margin-bottom: 0; } .l_h3_gt_r_img .paragraph:not(:first-child) { margin-top: 10px; } .l_h3_gt_r_img .paragraph:not(:last-child) { margin-bottom: 25px; } .l_h3_gt_r_img .link-button { margin-top: 0; margin-bottom: 0; } .l_h3_gt_r_img .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_h3_gt_r_img .link-button:not(:first-child) { margin-top: 40px; } } .l_h3_gt_r_img .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h3_gt_r_img .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_h3_r_img */ .l_h3_r_img { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h3_r_img { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_h3_r_img .columns__column:nth-child(1) { order: 2; } .l_h3_r_img .columns__column:nth-child(2) { order: 1; } } .l_h3_r_img .heading-3 { margin-top: 0; margin-bottom: 0; } .l_h3_r_img .heading-3:not(:first-child) { margin-top: 0; } .l_h3_r_img .heading-3:not(:last-child) { margin-bottom: 10px; } @media screen and (min-width: 768px) { .l_h3_r_img .heading-3:not(:last-child) { margin-bottom: 20px; } } .l_h3_r_img .paragraph { margin-top: 0; margin-bottom: 0; } .l_h3_r_img .paragraph:not(:first-child) { margin-top: 10px; } .l_h3_r_img .paragraph:not(:last-child) { margin-bottom: 25px; } .l_h3_r_img .link-button { margin-top: 0; margin-bottom: 0; } .l_h3_r_img .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_h3_r_img .link-button:not(:first-child) { margin-top: 40px; } } .l_h3_r_img .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_h3_r_img .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_img_lt_r_h2 */ .l_img_lt_r_h2 { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_lt_r_h2 { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_img_lt_r_h2 .columns__column:nth-child(1) { order: 1; width: 365px; } .l_img_lt_r_h2 .columns__column:nth-child(2) { order: 2; width: 740px; } } .l_img_lt_r_h2 .heading-2 { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h2 .heading-2:not(:first-child) { margin-top: 0; } .l_img_lt_r_h2 .heading-2:not(:last-child) { margin-bottom: 20px; } .l_img_lt_r_h2 .paragraph { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h2 .paragraph:not(:first-child) { margin-top: 10px; } .l_img_lt_r_h2 .paragraph:not(:last-child) { margin-bottom: 25px; } .l_img_lt_r_h2 .link-button { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h2 .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_img_lt_r_h2 .link-button:not(:first-child) { margin-top: 40px; } } .l_img_lt_r_h2 .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_lt_r_h2 .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_img_lt_r_h3 */ .l_img_lt_r_h3 { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_lt_r_h3 { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_img_lt_r_h3 .columns__column:nth-child(1) { order: 1; width: 365px; } .l_img_lt_r_h3 .columns__column:nth-child(2) { order: 2; width: 740px; } } .l_img_lt_r_h3 .heading-3 { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h3 .heading-3:not(:first-child) { margin-top: 0; } .l_img_lt_r_h3 .heading-3:not(:last-child) { margin-bottom: 20px; } .l_img_lt_r_h3 .paragraph { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h3 .paragraph:not(:first-child) { margin-top: 10px; } .l_img_lt_r_h3 .paragraph:not(:last-child) { margin-bottom: 25px; } .l_img_lt_r_h3 .link-button { margin-top: 0; margin-bottom: 0; } .l_img_lt_r_h3 .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_img_lt_r_h3 .link-button:not(:first-child) { margin-top: 40px; } } .l_img_lt_r_h3 .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_lt_r_h3 .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_img_r_h2 */ .l_img_r_h2 { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_r_h2 { margin-top: 80px; margin-bottom: 45px; } } @media screen and (min-width: 768px) { .l_img_r_h2 .columns__column:nth-child(1) { order: 1; } .l_img_r_h2 .columns__column:nth-child(2) { order: 2; } } .l_img_r_h2 .heading-2 { margin-top: 0; margin-bottom: 0; } .l_img_r_h2 .heading-2:not(:first-child) { margin-top: 0; } .l_img_r_h2 .heading-2:not(:last-child) { margin-bottom: 20px; } .l_img_r_h2 .paragraph { margin-top: 0; margin-bottom: 0; } .l_img_r_h2 .paragraph:not(:first-child) { margin-top: 20px; } .l_img_r_h2 .paragraph:not(:last-child) { margin-bottom: 20px; } .l_img_r_h2 .link-button { margin-top: 0; margin-bottom: 0; } .l_img_r_h2 .link-button:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .l_img_r_h2 .link-button:not(:first-child) { margin-top: 40px; } } .l_img_r_h2 .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_r_h2 .link-button:not(:last-child) { margin-bottom: 40px; } } /* l_img_r_h3 */ .l_img_r_h3 { margin-top: 40px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_r_h3 { margin-top: 55px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .l_img_r_h3 .columns__column:nth-child(1) { order: 1; } .l_img_r_h3 .columns__column:nth-child(2) { order: 2; } } .l_img_r_h3 .heading-3 { margin-top: 0; margin-bottom: 0; } .l_img_r_h3 .heading-3:not(:first-child) { margin-top: 0; } .l_img_r_h3 .heading-3:not(:last-child) { margin-bottom: 10px; } @media screen and (min-width: 768px) { .l_img_r_h3 .heading-3:not(:last-child) { margin-bottom: 20px; } } .l_img_r_h3 .paragraph { margin-top: 0; margin-bottom: 0; } .l_img_r_h3 .paragraph:not(:first-child) { margin-top: 10px; } .l_img_r_h3 .paragraph:not(:last-child) { margin-bottom: 25px; } .l_img_r_h3 .link-button { margin-top: 0; margin-bottom: 0; } .l_img_r_h3 .link-button:not(:first-child) { margin-top: 25px; } @media screen and (min-width: 768px) { .l_img_r_h3 .link-button:not(:first-child) { margin-top: 40px; } } .l_img_r_h3 .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .l_img_r_h3 .link-button:not(:last-child) { margin-bottom: 40px; } } @charset "UTF-8"; /* コンテナ */ .container { -webkit-box-sizing: border-box; box-sizing: border-box; max-width: calc(1050px + 20px * 2); margin-left: auto; margin-right: auto; padding-right: 20px; padding-left: 20px; } @media screen and (min-width: 768px) { .container { max-width: calc(1050px + 50px * 2); padding-right: 50px; padding-left: 50px; } } @media screen and (min-width: 900px) { .container { padding-right: 30px; padding-left: 30px; } } @media screen and (min-width: 1240px) { .container { max-width: calc(1050px + 100px * 2); padding-right: 100px; padding-left: 100px; } } @media screen and (min-width: 1450px) { .content.content--onecolumn .container { max-width: calc(1200px + 200px * 2); padding-right: 200px; padding-left: 200px; } } .container--full { max-width: none; } /* ========================================================================== entry-button ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .entry-button:not(:last-child) { margin-top: ; margin-bottom: ; } @media screen and (max-width: 767px) { .entry-button:not(:last-child) { margin-top: ; margin-bottom: ; } } .entry-button.rich-button-center { text-align: center; } .entry-button a { display: inline-block; box-sizing: border-box; position: relative; min-width: 450px; padding: 13px 100px 19px 40px; border: 1px solid #0d0d0d; background-color: #0d0d0d; border-radius: 100px; color: #ffffff; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 2; text-align: left; transition: .5s; } @media screen and (max-width: 767px) { .entry-button a { display: block; min-width: inherit; max-width: 450px; margin: 0 auto; padding: 13px 93px 19px 40px; font-size: 1.4rem; } } .entry-button.is-active a { pointer-events: inherit; } .entry-button a::after { content: attr(data-entry); display: block; width: 100%; color: #ffffff; font-family: 'Barlow', sans-serif; font-size: 1.6rem; font-weight: 600; letter-spacing: .2em; line-height: 1; text-transform: uppercase; transition: .5s; opacity: .6; } @media screen and (max-width: 767px) { .entry-button a::after { font-size: 1.4rem; } } .entry-button .entry-button__icon { position: absolute; top: calc(50% - 14px); right: 25px; width: 28px; height: 28px; transition: .5s; } @media screen and (max-width: 767px) { .entry-button .entry-button__icon { width: 24px; height: 24px; } } .entry-button .entry-button__icon__circle { fill: #ffffff; transition: .5s; } .entry-button .entry-button__icon__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 1050px) { .entry-button a:hover { color: #0d0d0d; background-color: #ffffff; } .entry-button a:hover::after { color: #0d0d0d; } .entry-button a:hover .entry-button__icon__circle { fill: #0d0d0d; } .entry-button a:hover .entry-button__icon__path { fill: #ffffff; } } /* ========================================================================== figure ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-image-caption { margin-bottom: 60px; margin-top: 60px; } @media screen and (max-width: 767px) { .section-image-caption { margin-bottom: 40px; margin-top: 40px; } } .figure:not(:first-child) { margin-top: 60px; } @media screen and (max-width: 767px) { .figure:not(:first-child) { margin-top: 30px; } } .figure { text-align: center; margin: 0 auto; } .figure img { max-width: 100%; height: auto; } @media screen and (max-width: 767px) { .figure img { max-width: 100% !important; } } .figcaption { margin-top: 15px; font-size: 1.4rem; letter-spacing: .1em; line-height: 1.4; text-align: left; } .figure.figure--smallbottom:not(:last-child) { margin-bottom: 30px; } @media screen and (max-width: 767px) { .figure.figure--smallbottom:not(:last-child) { margin-bottom: 25px; } } @charset "UTF-8"; /* 見出し */ .heading-1 { font-size: 38px; font-weight: bold; letter-spacing: 0.3em; line-height: 1.4; } @charset "UTF-8"; /* h2 */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-heading2 { margin-top: 60px; margin-bottom: 25px; } @media screen and (min-width: 768px) { .section-heading2 { margin-top: 80px; margin-bottom: 45px; } } .heading-2 { margin-top: 60px; margin-bottom: 25px; font-size: 2.2rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .heading-2 { margin-top: 80px; margin-bottom: 45px; font-size: 3.2rem; } } .heading-2:first-child { margin-top: 0; } .heading-2:last-child { margin-bottom: 0; } .heading-2::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } /* === child elements in modules モジュール内に配置する際のエレメントスタイルとは異なる場合のスタイル */ .heading-2.heading--child { margin-top: 25px; margin-bottom: 25px; } @media screen and (min-width: 768px) { .heading-2.heading--child { margin-top: 35px; margin-bottom: 30px; } } .heading-2.heading--child:first-child { margin-top: 0; } .heading-2.heading--child:last-child { margin-bottom: 0; } .heading-2.heading--child + * { margin-top: 0; } /* child elements in modules === */ .heading-2__inner__text { display: inline-block; padding-left: 15px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/home_h2_deco.svg); background-position: top left; background-repeat: no-repeat; background-size: 14px 14px; } @media screen and (min-width: 768px) { .heading-2__inner__text { padding-left: 20px; background-size: 16px 16px; } } .heading-2--reverse { color: #ffffff; } .heading-2--reverse .heading-2__deco { color: #ffffff; } /* h2装飾なし */ .heading-2.heading-2--no-deco .heading-2__inner__text { padding-left: 0; background-image: none; } @charset "UTF-8"; /* h3 */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-heading3 { margin-top: 40px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .section-heading3 { margin-top: 55px; margin-bottom: 30px; } } .heading-3 { margin-top: 40px; margin-bottom: 20px; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .heading-3 { margin-top: 55px; margin-bottom: 30px; font-size: 2.4rem; } } .heading-3:first-child { margin-top: 0; } .heading-3:last-child { margin-bottom: 0; } .heading-3::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .heading-3::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } /* === child elements in modules モジュール内に配置する際のエレメントスタイルとは異なる場合のスタイル */ .heading-3.heading--child { margin-top: 25px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .heading-3.heading--child { margin-top: 30px; margin-bottom: 25px; } } .heading-3.heading--child:first-child { margin-top: 0; } .heading-3.heading--child:last-child { margin-bottom: 0; } .heading-3.heading--child + * { margin-top: 0; } /* child elements in modules === */ @charset "UTF-8"; /* h4 */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-heading4 { margin-top: 30px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .section-heading4 { margin-top: 45px; margin-bottom: 25px; } } .heading-4 { margin-top: 30px; margin-bottom: 20px; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .heading-4 { margin-top: 45px; margin-bottom: 25px; font-size: 2.0rem; } } .heading-4:first-child { margin-top: 0; } .heading-4:last-child { margin-bottom: 0; } .heading-4::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .heading-4::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } /* === child elements in modules モジュール内に配置する際のエレメントスタイルとは異なる場合のスタイル */ .heading-4.heading--child { margin-top: 25px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .heading-4.heading--child { margin-top: 30px; margin-bottom: 25px; } } .heading-4.heading--child:first-child { margin-top: 0; } .heading-4.heading--child:last-child { margin-bottom: 0; } .heading-4.heading--child + * { margin-top: 0; } /* child elements in modules === */ @charset "UTF-8"; /* h5 */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-heading5 { margin-top: 30px; margin-bottom: 20px; } .heading-5 { margin-top: 30px; margin-bottom: 20px; font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .heading-5 { font-size: 1.8rem; } } .heading-5:first-child { margin-top: 0; } .heading-5:last-child { margin-bottom: 0; } .heading-5::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em);; } .heading-5::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em);; } /* === child elements in modules モジュール内に配置する際のエレメントスタイルとは異なる場合のスタイル */ .heading-5.heading--child { margin-top: 25px; margin-bottom: 20px; } .heading-5.heading--child:first-child { margin-top: 20px; } .heading-5.heading--child:last-child { margin-bottom: 20px; } .heading-5.heading--child + * { margin-top: 0; } /* child elements in modules === */ @charset "UTF-8"; /* h6 */ .heading-6 { } @charset "UTF-8"; /* heading-subtitle */ .heading-subtitle { position: relative; padding-left: 11px; font-size: 1.4rem; line-height: 1.5; color: #222222; } .heading-subtitle:not(:last-child) { margin-bottom: 15px; } .heading-subtitle::before { content: ''; width: 5px; height: 2px; background-color: #808080; position: absolute; top: 10px; left: 0; } .heading-subtitle+.heading-2, .heading-subtitle+.heading-3, .heading-subtitle+.heading-4, .heading-subtitle+.heading-5, .heading-subtitle+.heading-6 { margin-top: 0; } @charset "UTF-8"; /* home-h2 */ .home-h2-wrap { position: relative; } @media screen and (min-width: 768px) { .home-h2-wrap { display: flex; justify-content: space-between; } } .home-h2-wrap .home-link-button { display: none; } @media screen and (min-width: 768px) { .home-h2-wrap .home-link-button { display: block; margin-top: 10px; } } .home-h2 { position: relative; } .home-h2__deco { position: relative; z-index: 1; font-size: 2.8rem; font-family: 'Barlow', sans-serif; letter-spacing: .2em; font-weight: 600; line-height: 1.5; text-transform: uppercase; } @media screen and (min-width: 768px) { .home-h2__deco { font-size: 3.6rem; } } .home-h2__main { position: relative; z-index: 1; margin-top: 3px; padding-left: 25px; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/home_h2_deco.svg); background-position: 0 3px; background-repeat: no-repeat; background-size: 14px 14px; font-size: 1.4rem; letter-spacing: .2em; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .home-h2__main { margin-top: 5px; background-size: 16px 16px; font-size: 1.5rem; } } .home-h2__deco-bg { position: absolute; top: 0; right: -35px; color: #f7f7f7; font-size: 6.0rem; font-family: 'Barlow', sans-serif; letter-spacing: .14em; font-weight: 500; line-height: 1; text-transform: uppercase; white-space: nowrap; opacity: .5; } @media screen and (min-width: 768px) { .home-h2__deco-bg { top: -10px; right: -70px; font-size: 9.0rem; } } @media screen and (min-width: 768px) { .home-h2__deco-bg { right: -140px; } } .home-link-button.home-link-button--bottom { display: block!important; margin-top: 30px; } @media screen and (min-width: 768px) { .home-link-button.home-link-button--bottom { margin-top: 40px; } } .home-link-button__anchor { position: relative; display: inline-block; padding-left: 50px; padding-top: 9.5px; padding-bottom: 9.5px; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-link-button__anchor { padding-left: 60px; font-size: 1.5rem; padding-top: 14px; padding-bottom: 14px; } } .arrow-wrap { display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; box-sizing: border-box; overflow: hidden; } @media screen and (min-width: 768px) { .arrow-wrap { width: 50px; height: 50px; } } .home-link-button .arrow-wrap { width: 32px; height: 32px; } @media screen and (min-width: 768px) { .home-link-button .arrow-wrap { width: 40px; height: 40px; } } .arrow-wrap:before, .arrow-wrap:after { content: ""; position: absolute; display: block; border-radius: 50%; transition: .5s; } .arrow-wrap:before { width: 100%; height: 100%; top: 0; left: 0; background-color: #0d0d0d; } .arrow-wrap:after { width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; background-color: #ffffff; transform: scale(0); opacity: 0; } @media screen and (min-width: 768px) { .home-link-button__anchor:hover .arrow-wrap:after { transform: scale(1); opacity: 1; } } .home-link-button__anchor__arrow { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; box-sizing: border-box; transition: .5s; z-index: 2; } @media screen and (min-width: 768px) { .home-link-button__anchor__arrow { width: 13px; height: 12px; } } .home-link-button__anchor__arrow.home-link-button__anchor__arrow--before { transform: translateX(-50%) translateY(-50%); opacity: 1; } @media screen and (min-width: 768px) { .home-link-button__anchor:hover .home-link-button__anchor__arrow.home-link-button__anchor__arrow--before { transform: translateX(75%) translateY(-50%); opacity: 0; } } .home-link-button__anchor__arrow.home-link-button__anchor__arrow--after { opacity: 0; transform: translateX(-175%) translateY(-50%); } @media screen and (min-width: 768px) { .home-link-button__anchor:hover .home-link-button__anchor__arrow.home-link-button__anchor__arrow--after { transform: translateX(-50%) translateY(-50%); opacity: 1; } } .home-link-button__anchor__arrow.home-link-button__anchor__arrow--before .home-link-button__anchor__arrow__path { fill: #ffffff; } .home-link-button__anchor__arrow.home-link-button__anchor__arrow--after .home-link-button__anchor__arrow__path { fill: #0d0d0d;; } @charset "UTF-8"; /* 画像バナー */ .section-image-banner { margin-top: 40px; } @media screen and (max-width: 767px) { .section-image-banner { margin-top: 30px; } } .section-image-banner { margin-bottom: 25px; } @media screen and (max-width: 767px) { .section-image-banner { margin-bottom: 20px; } } .image-banner__columns.image-banner__columns--two, .image-banner__columns.image-banner__columns--three { display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } @media screen and (min-width: 768px) { .image-banner__columns.image-banner__columns--two, .image-banner__columns.image-banner__columns--three { margin-left: -15px; margin-right: -15px; } } .image-banner__columns__column { box-sizing: border-box; } .image-banner__columns.image-banner__columns--two .image-banner__columns__column, .image-banner__columns.image-banner__columns--three .image-banner__columns__column { width: 50%; padding-left: 5px; padding-right: 5px; } @media screen and (min-width: 768px) { .image-banner__columns.image-banner__columns--two .image-banner__columns__column, .image-banner__columns.image-banner__columns--three .image-banner__columns__column { padding-left: 15px; padding-right: 15px; } .image-banner__columns.image-banner__columns--three .image-banner__columns__column { width: 33.333%; } } .image-banner__columns.image-banner__columns--two .image-banner__columns__column:nth-child(n+3), .image-banner__columns.image-banner__columns--three .image-banner__columns__column:nth-child(n+3) { margin-top: 10px; } @media screen and (min-width: 768px) { .image-banner__columns.image-banner__columns--two .image-banner__columns__column:nth-child(n+3) { margin-top: 30px; } .image-banner__columns.image-banner__columns--three .image-banner__columns__column:nth-child(n+3) { margin-top: 0; } .image-banner__columns.image-banner__columns--three .image-banner__columns__column:nth-child(n+4) { margin-top: 30px; } } .image-banner__columns__column__anchor { display: block; transition: opacity .5s; } @media screen and (min-width: 768px) { .image-banner__columns__column__anchor:hover { opacity: .6; } } .image-banner__columns__column__anchor__img { width: 100%; } .image-banner__columns__column__anchor__img.image-banner__columns__column__anchor__img--sp { display: none; } @media screen and (max-width: 767px) { .image-banner__columns__column.use-sp-img .image-banner__columns__column__anchor__img.image-banner__columns__column__anchor__img--sp { display: block; } .image-banner__columns__column.use-sp-img .image-banner__columns__column__anchor__img.image-banner__columns__column__anchor__img--pctb { display: none; } } @charset "UTF-8"; /* 画像 */ .image { margin-left: auto; margin-right: auto; } .image img { max-width: 100%; width: 100%; vertical-align: middle; } .image__anchor { -webkit-transition: opacity .5s; transition: opacity .5s; } .image__anchor:hover { opacity: .7; } @charset "UTF-8"; /* リード文 */ .section-lead { margin-top: 75px; margin-bottom: 55px; } @media screen and (min-width: 768px) { .section-lead { margin-top: 55px; } } .lead { font-size: 1.5rem; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .lead { font-size: 1.7rem; } } .lead:not(:first-child) { margin-top: 75px; } @media screen and (min-width: 768px) { .lead:not(:first-child) { margin-top: 55px; } } .lead:not(:last-child) { margin-bottom: 55px; } .lead.text-center { margin-right: auto; margin-left: auto; } .lead.text-right { margin-left: auto; } @charset "UTF-8"; /* リンクボタン */ .section-button { margin-top: 30px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .section-button { margin-top: 40px; margin-bottom: 40px; } } .link-button { max-width: 280px; } .link-button:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .link-button:not(:first-child) { margin-top: 40px; } } .link-button:not(:last-child) { margin-bottom: 30px; } @media screen and (min-width: 768px) { .link-button:not(:last-child) { margin-bottom: 40px; } } .link-button__anchor { position: relative; display: inline-block; padding-left: 55px; padding-top: 9.5px; padding-bottom: 9.5px; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .link-button__anchor { padding-left: 65px; font-size: 1.5rem; padding-top: 14px; padding-bottom: 14px; } } .link-button--ja .link-button__anchor { font-weight: 500; letter-spacing: .1em; } .link-button--eng .link-button__anchor { font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .2em; } .link-button__anchor__inner { position: relative; z-index: 1; text-transform: uppercase; } /* icon */ .link-button-arrow-wrap { display: inline-block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; box-sizing: border-box; overflow: hidden; } @media screen and (min-width: 768px) { .link-button-arrow-wrap { width: 50px; height: 50px; } } .link-button-arrow-wrap:before, .link-button-arrow-wrap:after { content: ""; position: absolute; display: block; border-radius: 50%; transition: .5s; } .link-button-arrow-wrap:before { width: 100%; height: 100%; top: 0; left: 0; background-color: #0d0d0d; } .link-button-arrow-wrap:after { width: calc(100% - 2px); height: calc(100% - 2px); top: 1px; left: 1px; background-color: #ffffff; transform: scale(0); opacity: 0; } @media screen and (min-width: 768px) { .link-button__anchor:hover .link-button-arrow-wrap:after { transform: scale(1); opacity: 1; } } .link-button__anchor__icon { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; box-sizing: border-box; transition: .5s; z-index: 2; } @media screen and (min-width: 768px) { .link-button__anchor__icon { width: 13px; height: 12px; } } .link-button__anchor__icon.link-button__anchor__icon--before { transform: translateX(-50%) translateY(-50%); opacity: 1; } @media screen and (min-width: 768px) { .link-button__anchor:hover .link-button__anchor__icon.link-button__anchor__icon--before { transform: translateX(75%) translateY(-50%); opacity: 0; } } .link-button__anchor__icon.link-button__anchor__icon--after { opacity: 0; transform: translateX(-175%) translateY(-50%); } @media screen and (min-width: 768px) { .link-button__anchor:hover .link-button__anchor__icon.link-button__anchor__icon--after { transform: translateX(-50%) translateY(-50%); opacity: 1; } } .link-button__anchor__icon.link-button__anchor__icon--before .link-button__anchor__icon__path { fill: #ffffff; } .link-button__anchor__icon.link-button__anchor__icon--after .link-button__anchor__icon__path { fill: #0d0d0d;; } /* reverse */ .link-button--reverse .link-button__anchor { color: #ffffff; } .link-button--reverse .link-button-arrow-wrap:before { background-color: #ffffff; border: 1px solid #ffffff; box-sizing: border-box; } .link-button--reverse .link-button__anchor:hover .link-button-arrow-wrap:before { background-color: transparent; } .link-button--reverse .link-button-arrow-wrap:after { content: none; } .link-button--reverse .link-button__anchor__icon.link-button__anchor__icon--before .link-button__anchor__icon__path { fill: #0d0d0d; } .link-button--reverse .link-button__anchor__icon.link-button__anchor__icon--after .link-button__anchor__icon__path { fill: #ffffff; } .link-button.rich-button-center { margin-right: auto; margin-left: auto; } /* === MAX 3column list */ .section-button__list { display: flex; flex-wrap: wrap; margin-top: 30px; margin-bottom: 30px; } .section-button__list .link-button { width: 280px; margin-top: 0; } @media screen and (min-width: 768px) { .section-button__list { margin-top: 40px; margin-bottom: 40px; } .section-button__list .link-button:not(:last-child) { margin-right: 40px; } } @media screen and (min-width: 1050px) { .section-button__list .link-button:not(:last-child) { margin-bottom: 0; } } /* center */ .section-button__list.rich-button-center { justify-content: center; } @media screen and (max-width: 767px) { .section-button__list.rich-button-center { flex-direction: column; align-items: center; } } @media screen and (min-width: 768px) { .section-button__list.rich-button-center .link-button { margin-right: 20px; margin-left: 20px; } } /* MAX 3column list === */ @charset "UTF-8"; /* テキストリンク */ .section-text-button { margin-top: 12px; margin-bottom: 12px; } @media screen and (min-width: 768px) { .section-text-button { margin-top: 20px; margin-bottom: 20px; } } .link-text { font-size: 1.5rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5; } .link-text:not(:first-child) { margin-top: 12px; } @media screen and (min-width: 768px) { .link-text:not(:first-child) { margin-top: 20px; } } .link-text:not(:last-child) { margin-bottom: 12px; } @media screen and (min-width: 768px) { .link-text:not(:last-child) { margin-bottom: 20px; } } .link-text__anchor { display: inline-block; position: relative; font-size: 1.4rem; padding-left: 20px; transition: opacity .5s; } @media screen and (min-width: 768px) { .link-text__anchor { font-size: 1.5rem; } } @media screen and (min-width: 1050px) { .link-text__anchor:hover { opacity: .6; } } .link-text--ja .link-text__anchor { font-family: 'Noto Sans JP', sans-serif; letter-spacing: .1em; } .link-text--eng .link-text__anchor { font-family: 'Barlow', sans-serif; letter-spacing: .2em; } .link-text__anchor__icon { display: block; position: absolute; top: 8px; left: 0; width: 10px; height: 8.5px; transition: all .5s; } @media screen and (min-width: 768px) { .link-text__anchor__icon { top: 7px; } } .link-text__anchor__icon__arrow { fill: #0d0d0d; transition: fill .5s; } .link-text--reverse .link-text__anchor { color: #ffffff; } .link-text--reverse .link-text__anchor__icon__arrow { fill: #ffffff; } /* center */ .link-text.link-text--center { text-align: center; } /* ========================================================================== link ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .link { display: inline-block; position: relative; color: #222222; text-decoration: none; word-break: break-all; transition: .5s; } .link:hover { opacity: .6; text-decoration: none; } .link::after { content: ""; position: absolute; bottom: 2px; left: 0; width: 100%; height: 1px; background-color: #0d0d0d; transition: .5s; } .link:hover::after { background-color: #0d0d0d; } .link--window { padding-left: 15px; } .link--window::before { content: ""; position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-top: -6px; background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS45NjkiIGhlaWdodD0iMTEuOTY5IiB2aWV3Qm94PSIwIDAgMTEuOTY5IDExLjk2OSI+CiAgPHBhdGggaWQ9IuODkeOCuV82NDIxIiBkYXRhLW5hbWU9IuODkeOCuSA2NDIxIiBkPSJNLTc4OC41MjksMGgtNi4zNDJhLjUyOC41MjgsMCwwLDAtLjUyOC41MjlWMi4xNjdoLTMuODdhLjcuNywwLDAsMC0uNy43djguNGEuNy43LDAsMCwwLC43LjdoOC40YS43LjcsMCwwLDAsLjctLjdWNy40aDEuNjM4QS41MjguNTI4LDAsMCwwLTc4OCw2Ljg3MVYuNTI5QS41MjkuNTI5LDAsMCwwLTc4OC41MjksMFptLTIuNjM4LDEwLjk2OWgtNy44di03LjhoMy41N3YzLjdhLjUyNy41MjcsMCwwLDAsLjUyOC41MjhoMy43Wk0tNzg5LDYuNGgtNS40VjFoNS40WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzk5Ljk2OSkiIGZpbGw9IiM0MTQxNDEiLz4KPC9zdmc+Cg==") no-repeat center; background-position: center; background-repeat: no-repeat; background-size: cover; } @media all and (-ms-high-contrast:none){ .link--window::before { margin-top: -11px; } } .heading-link:not(:first-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .heading-link:not(:first-child) { margin-top: 20px; } } .section-heading-link { margin-top: 30px; margin-bottom: 30px; } @media screen and (max-width: 767px) { .section-heading-link { margin-top: 20px; margin-bottom: 30px; } } .heading-link:not(:last-child) { margin-bottom: 30px; } @media screen and (max-width: 767px) { .heading-link:not(:last-child) { margin-bottom: 20px; } } .heading-link a { color: #0d0d0d; display: inline-block; position: relative; text-decoration: none; transition: .5s; } .heading-2.heading-link a { padding-left: 45px; } .heading-3.heading-link a { padding-left: 40px; } .heading-4.heading-link a, .heading-5.heading-link a { padding-left: 35px; } @media screen and (max-width: 767px) { .heading-2.heading-link a { padding-left: 35px; } .heading-3.heading-link a { padding-left: 30px; } .heading-4.heading-link a, .heading-5.heading-link a { padding-left: 30px; } } .heading-link a::before { content: ""; position: absolute; left: 0; border-radius: 100%; border: 1px solid #0d0d0d; background-color: #0d0d0d; transition: .5s; } .heading-2.heading-link a::before { top: 7px; width: 32px; height: 32px; } .heading-3.heading-link a::before { top: 3px; width: 28px; height: 28px; } .heading-4.heading-link a::before { top: 3px; width: 24px; height: 24px; } .heading-5.heading-link a::before { top: 1px; width: 24px; height: 24px; } @media screen and (max-width: 767px) { .heading-2.heading-link a::before { top: 4px; width: 24px; height: 24px; } .heading-3.heading-link a::before { top: 0px; width: 24px; height: 24px; } .heading-4.heading-link a::before { top: 2px; width: 20px; height: 20px; } .heading-5.heading-link a::before { top: 1px; width: 20px; height: 20px; } } .heading-link__icon { position: absolute; transition: .5s; } .heading-link__icon__path { fill: #ffffff; transition: .5s; } .heading-2 .heading-link__icon { top: 19px; left: 12px; width: 10px; height: 8.5px; } .heading-3 .heading-link__icon { top: 13px; left: 10px; width: 10px; height: 8.5px; } .heading-4 .heading-link__icon { top: 12px; left: 9px; width: 8px; height: 6.5px; } .heading-5 .heading-link__icon { top: 10px; left: 9px; width: 8px; height: 6.5px; } @media screen and (max-width: 767px) { .heading-2 .heading-link__icon { top: 13px; left: 9px; width: 8px; height: 6.5px; } .heading-3 .heading-link__icon { top: 10px; left: 9px; width: 8px; height: 6.5px; } .heading-4 .heading-link__icon { top: 9px; left: 8px; width: 6px; height: 6.5px; } .heading-5 .heading-link__icon { top: 9px; left: 8px; width: 6px; height: 6.5px; } } @media screen and (min-width: 1050px) { .heading-link a:hover::before { background-color: #ffffff } .heading-link a:hover .heading-link__icon__path { fill: #0d0d0d; } } .link-id { margin-top: -60px; padding-top: 60px; } @charset "UTF-8"; /* 段落 */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-paragraph { margin-top: 20px; margin-bottom: 20px; } .paragraph { color: #222222; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .paragraph { font-size: 1.6rem; } } .paragraph::before { content: ""; display: block; width: 0; height: 0; margin-top: calc((1 - 2) * .5em);; } .paragraph::after { content: ""; display: block; width: 0; height: 0; margin-bottom: calc((1 - 2) * .5em);; } .paragraph:not(:first-child) { margin-top: 20px; } .paragraph:not(:last-child) { margin-bottom: 20px; } /* adjust margin-top when "heading + paragraph" */ .heading-2 + .paragraph::before, .heading-3 + .paragraph::before, .heading-4 + .paragraph::before, .heading-5 + .paragraph::before { content: ""; display: block; width: 0; height: 0; margin-top: calc(((1 - 2) * .5em) * 2);; } .paragraph--reverse { color: #ffffff; } .paragraph.text-center { margin-right: auto; margin-left: auto; } .paragraph.text-right { margin-left: auto; } @charset "UTF-8"; /* セクション */ .section { padding-top: 60px; padding-bottom: 80px; } @media screen and (min-width: 768px) { .section { padding-top: 80px; padding-bottom: 100px; } } .dnd-section-color { padding-bottom: 80px; padding-top: 60px; } @media screen and (min-width: 768px) { .dnd-section-color { padding-bottom: 100px; padding-top: 80px; } } .dnd-section-color-support { padding-bottom: 0; } .dnd-section-color-support .section-button__list { margin-bottom: 0; } .dnd-section-color .hs_cos_wrapper_type_module--first>div { margin-top: 0; } .dnd-section-color .hs_cos_wrapper_type_module--last>div { margin-bottom: 0; } .dnd-section-color--bg { background-color: #f7f7f7; } /* ========================================================================== tag-list ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .tag-list { display: flex; flex-wrap: wrap; margin-top: -7.5px; } .tag-list:not(:last-child) { margin-bottom: 20px; } .tag-list__item { margin: 7.5px 0; padding: 9px 20px; border-radius: 50px; background-color: #dbdbdb; color: #ffffff; font-size: 1.6rem; font-weight: 400; letter-spacing: .1em; line-height: 2; text-align: center; } _:-ms-fullscreen, :root .tag-list__item { padding: 10px 20px 2px 20px; } .tag-list__item:not(:last-child) { margin-right: 15px; } .heading-icon-columns .heading-4:not(:last-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .tag-list__item { padding: 6px 15px; font-size: 1.3rem; } } /* ========================================================================== view ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .view--is-desktop { display: block; } @media screen and (max-width:1049px) { .view--is-desktop { display: none !important; } } .view--is-desktop-lower { display: block } @media screen and (max-width:767px) { .view--is-desktop-lower { display: none !important; } } .view--is-laptop { display: none } @media screen and (min-width:768px) and (max-width:1049px) { .view--is-laptop { display: block } } .view--is-laptop-lower { display: none } @media screen and (max-width:1049px) { .view--is-laptop-lower { display: block } } .view--is-palmtop { display: none !important; } @media screen and (max-width:767px) { .view--is-palmtop { display: block !important; } } /* ========================================================================== form ========================================================================== */ .hs-form-private { box-sizing: border-box; margin-left: auto; margin-right: auto; max-width: 1090px; padding-left: 20px; padding-right: 20px; line-height: 1.6; } @media screen and (min-width: 1240px) { .hs-form-private { max-width: 1250px; padding-left: 100px; padding-right: 100px; } } .hs-form-private a { text-decoration: underline; transition: opacity .5s; } .hs-form-private a:hover { text-decoration: underline; opacity: .6; } .hs-form-private .hs-richtext h6 { font-size: 0.67em; } .hs-form-private fieldset { width: 100% !important; display: flex !important; gap: 20px !important; max-width: 100% !important; margin-bottom: 20px !important; } @media screen and (max-width: 767px) { .hs-form-private fieldset { flex-wrap: wrap; } } .hs-form-private .hs-button { margin: 0; cursor: pointer; display: inline-block; font-weight: 500; line-height: 12px; position: relative; text-align: center; transition: all .15s linear; background-color: #ff7a59; border: 1px solid #ff7a59; color: #fff; border-radius: 100px; box-sizing: border-box; font-size: 14px; max-width: 300px; padding: 17px 20px; text-align: center; width: 100%; } @media screen and (min-width: 768px) { .hs-form-private .hs-button { padding: 27px 30px; } } .hs-form-required { margin-left: 4px; color: #e51520; } .hs-form-field { float: none !important; width: 100% !important; } @media screen and (max-width: 767px) { .hs-form-private fieldset >.hs-form-field:nth-child(3) { padding-bottom: 20px; border-bottom: 1px solid #959494; } } .hs-form-field input, .hs-form-field select { display: inline-block; width: 100% !important; margin: 0 !important; height: 40px; padding: 9px 10px; font-size: 16px; font-weight: 400; line-height: 22px; color: #33475b; background-color: #f5f8fa; border: 1px solid #959494; box-sizing: border-box; border-radius: 3px; } .hs-form-field label { display: block; margin-bottom: 10px; } .hs-error-msg { color: #e51520; margin-top: 10px; } @media only screen and (max-device-width: 700px) { .hs-form__field-row .hs-form__field-row__column:nth-chid(3) { padding-bottom: 18px; border-bottom: 1px solid #ccc; } } /* サイト全体で共通のモジュール */ /* basic */ @charset "UTF-8"; /* home-message */ .section-home-message { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-message { margin-top: 80px; margin-bottom: 80px; } } .home-message__heading { font-size: 1.4rem; font-weight: 600; letter-spacing: .2em; line-height: 1.5em; font-family: 'Barlow', sans-serif; position: relative; } @media screen and (min-width: 768px) { .home-message__heading { font-size: 1.6rem; } } .home-message__heading::before { content: ''; display: block; width: calc((100vw - 100%) / 2); height: 1px; position: absolute; top: 0; right: 100%; border-top: 1px solid #0d0d0d; } .home-message__heading__inner { display: inline-block; border-top: 1px solid #0d0d0d; padding-top: 7px; text-transform: uppercase; } @media screen and (min-width: 768px) { .home-message .heading-3 { margin-top: 40px; } } @charset "UTF-8"; /* home-conversion */ .section-home-conversion { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-conversion { margin-top: 80px; margin-bottom: 80px; } } .home-conversion__columns { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -20px; margin-right: -20px; } @media screen and (min-width: 768px) { .home-conversion__columns { margin-left: 0; margin-right: 0; } } .home-conversion__columns__column { width: 50%; } .home-conversion__anchor { display: block; height: 100%; background-color: #0d0d0d; } @media screen and (min-width: 768px) { .home-conversion__anchor:hover .home-conversion__content__box::before { transform-origin: left top; transform: scale(1, 1); } .home-conversion__anchor:hover .home-conversion__content--reverse .home-conversion__content__box::before { transform-origin: left bottom; transform: scale(1, 1); } } .home-conversion__content { box-sizing: border-box; position: relative; padding-bottom: 190px; height: 100%; } @media screen and (min-width: 768px) { .home-conversion__content { padding-bottom: 150px; } } .home-conversion__content__image { width: 100%; position: absolute; bottom: 0; left: 0; padding-top: 190px; background-size: cover; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 768px) { .home-conversion__content__image { padding-top: 150px; } } .home-conversion__content--reverse { display: flex; align-items: flex-end; padding-top: 190px; padding-bottom: 0; } @media screen and (min-width: 768px) { .home-conversion__content--reverse { padding-top: 150px; } } .home-conversion__content--reverse .home-conversion__content__image { bottom: auto; top: 0; } .home-conversion__content--reverse .home-conversion__content__box::before { transform-origin: left top; } .home-conversion__content__box { display: flex; align-items: center; position: relative; box-sizing: border-box; width: 100%; height: 100%; margin-right: auto; padding: 50px 15px 40px; background-color: #0d0d0d; } @media screen and (min-width: 768px) { .home-conversion__content__box { padding: 60px 50px; } } .home-conversion__content__box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #222222; transform: scale(1, 0); transform-origin: left bottom; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99), -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); } .home-conversion__content__box__inner { position: relative; z-index: 1; } .home-conversion__content__box__inner__heading { margin-bottom: 20px; color: #ffffff; text-align: center; } @media screen and (min-width: 768px) { .home-conversion__content__box__inner__heading { margin-bottom: 40px; } } .home-conversion__content__box__inner__heading::after { content: attr(data-decoration-text); display: block; margin-top: 11px; font-family: 'Barlow', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: .2em; } @media screen and (min-width: 768px) { .home-conversion__content__box__inner__heading::after { font-size: 1.4rem; } } .home-conversion__content__box__inner__heading__text { display: block; font-size: 1.8rem; letter-spacing: .2em; line-height: 1.5em; } @media screen and (min-width: 768px) { .home-conversion__content__box__inner__heading__text { font-size: 2.4rem; } } @charset "utf-8"; /* CTA 画像バナー */ .section-cta { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-cta { margin-top: 80px; margin-bottom: 80px; } } .cta__anchor, .cta a { display: block; } .cta__anchor img, .cta a img { max-width: 100%; width: 100%; height: auto; vertical-align: middle; margin-left: auto; margin-right: auto; } .cta:not(:first-child) { margin-top: 60px; } @media screen and (min-width: 768px) { .cta:not(:first-child) { margin-top: 80px; } } .cta:not(:last-child) { margin-bottom: 60px; } @media screen and (min-width: 768px) { .cta:not(:last-child) { margin-bottom: 80px; } } /* CTA（テキスト） */ .section-cta-text { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-cta-text { margin-top: 80px; margin-bottom: 80px; } } .cta-text-wrap { position: relative; box-sizing: border-box; padding-bottom: 60px; } @media screen and (max-width: 767px) { .cta-text-wrap { padding-bottom: 40px; } } .cta-text-wrap .container { position: relative; } @media screen and (max-width: 767px) { .cta-text-wrap .container { padding-right: 0; padding-left: 0; } } .cta-text-wrap:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: calc(100% - 90px); background-color: #0d0d0d; } .cta-text { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; } .cta-text::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background-color: #0d0d0d; opacity: .3; transition: .5s; } .cta-text:hover::after { opacity: .6; } .cta-text__bg { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-repeat: no-repeat; background-size: cover; background-position: center; transition: .5s; } .cta-text:hover .cta-text__bg { transform: scale(1.05); } .cta-text .cta_button { display: block; position: relative; z-index: 3; padding: 60px 80px 50px 80px; color: #ffffff; } @media screen and (max-width: 1049px) { .cta-text .cta_button { padding: 66px 40px 50px 40px; } } @media screen and (max-width: 767px) { .cta-text .cta_button { padding: 40px 20px 40px 20px; } } .cta_button_decoeation { background-color: #0d0d0d; position: absolute; top: -15px; left: 180px; padding: 14px 40px; text-align: center; box-sizing: border-box; font-size: 16px; font-weight: 700; font-family: 'Barlow', sans-serif; color: #ffffff; letter-spacing: .2em; transition: .5s; z-index: 3; } @media screen and (max-width: 1049px) { .cta_button_decoeation { left: 100px; } } @media screen and (max-width: 767px) { .cta_button_decoeation { padding: 14px 40px; font-size: 13px; top: -20px; left: 20px; padding: 8px 30px; } } .cta_button_decoeation::after { content: ""; position: absolute; left: calc(50% - 10px); bottom: -10px; transition: .5s; width: 0; height: 0; border-style: solid; border-width: 10px 10px 0 10px; border-color: #0d0d0d transparent transparent transparent; font-weight: 600; } .cta-text .cta_button__title { display: block; padding-bottom: 15px; font-size: 32px; font-weight: 500; letter-spacing: .2em; line-height: 1.5; } @media screen and (max-width: 767px) { .cta-text .cta_button__title { font-size: 22px; } } .cta-text .cta_button__title span { position: relative; z-index: 1; background-image: linear-gradient(transparent 95%, #0d0d0d 95%); } .cta-text .cta_button__text { display: block; font-size: 1.3rem; font-weight: 500; letter-spacing: .2em; line-height: 2em; } @media screen and (min-width: 768px){ .cta-text .cta_button__text { font-size: 1.7rem; } } .cta-text .cta_button__text:not(:first-child) { margin-top: 10px; } .cta-text .link-button__anchor { background-repeat: no-repeat; background-position: right 20px center; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij4KICA8ZyBpZD0i44Kw44Or44O844OXXzY2OTgiIGRhdGEtbmFtZT0i44Kw44Or44O844OXIDY2OTgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzIgLTE2KSI+CiAgICA8Y2lyY2xlIGlkPSJiZyIgY3g9IjE0IiBjeT0iMTQiIHI9IjE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMzIgMTYpIiBmaWxsPSIjNDE0MTQxIi8+CiAgICA8cGF0aCBpZD0iYXJyb3ciIGQ9Ik0wLDgsNCw0LDAsMEgyTDYsNCwyLDhaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyNDQgMjYpIiBmaWxsPSIjZmZmIi8+CiAgPC9nPgo8L3N2Zz4K'); } @media screen and (max-width: 767px){ .cta-text .link-button__anchor { background-size: 24px; } } .cta-text .link-button__anchor::before { content: none; } /* 中央寄せのスタイル */ .cta-text--center .cta_button__title, .cta-text--center .cta_button__text { text-align: center; } .cta-text--center .link-button { margin-left: auto; margin-right: auto; } .cta-text--center .cta_button_decoeation { left: 50%; transform: translateX(-50%); } @charset "UTF-8"; /* case-others */ .section-case-others { margin-top: 30px; margin-bottom: 45px; } @media screen and (min-width: 768px) { .section-case-others { margin-top: 45px; margin-bottom: 60px; } } .case-others__list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .case-others__list__item { width: 100%; } @media screen and (min-width: 768px) { .case-others__list__item { width: calc(100% / 2); } } @media screen and (min-width: 1050px) { .case-others__list__item { width: calc(100% / 3); } } .case-others__list__item:nth-child(n+2) { margin-top: 30px; } @media screen and (min-width: 768px) { .case-others__list__item:nth-child(n+2) { margin-top: 0; } } @media screen and (min-width: 768px) { .case-others__list__item:nth-child(n+2) { margin-top: 0; } } @media screen and (min-width: 768px) { .case-others__list__item:nth-child(n+3) { margin-top: 40px; } } @media screen and (min-width: 1050px) { .case-others__list__item:nth-child(n+3) { margin-top: 0; } } @media screen and (min-width: 768px) { .case-others__list__item:nth-child(n+4) { margin-top: 40px; } } .case-others__list__item__card { display: block; } .case-others__list__item__card:hover .link-text__anchor { opacity: .6; } .case-others__list__item__card__head { position: relative; } .case-others__list__item__card__head__image { overflow: hidden; } .case-others__list__item__card__head__image img { max-width: 100%; width: 100%; vertical-align: middle; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); transition: transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99), -webkit-transform 0.6s cubic-bezier(0.03, 0.98, 0.52, 0.99); } a:hover .case-others__list__item__card__head__image img { -webkit-transform: scale(1.1); transform: scale(1.1); } .case-others__list__item__card__head__image::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; } .case-others__list__item__card__head__heading { padding: 0 20px; box-sizing: border-box; font-size: 2.2rem; letter-spacing: .1em; line-height: 1.5em; font-weight: 500; position: absolute; top: 50%; left: 0; z-index: 1; width: 100%; color: #ffffff; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .case-others__list__item__card__body { padding: 20px 10px 0 10px; } @media screen and (min-width: 768px) { .case-others__list__item__card__body { padding: 25px 25px 0 25px; } } .case-others__list__item__card__body__number { font-size: 1.4rem; font-family: 'Barlow', sans-serif; font-weight: 600; letter-spacing: .2em; line-height: 1.5em; } @media screen and (min-width: 768px) { .case-others .link-text:not(:first-child) { margin-top: 30px; } } @charset "UTF-8"; /* service-flow */ .section-service-flow { margin-top: 30px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-service-flow { margin-top: 45px; margin-bottom: 80px; } } .service-flow__list__item:not(:first-child) { position: relative; margin-top: 50px; } .service-flow__list__item:not(:first-child)::before { content: ''; position: absolute; top: -33px; left: calc(50% - 9px); width: 0; height: 0; border-style: solid; border-width: 18px 10px 0 10px; border-color: #0d0d0d transparent transparent transparent; } .service-flow__list__item__box { padding: 30px 20px; border-radius: 5px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .service-flow__list__item__box { padding: 20px; } } /* 背景色ありのスタイル */ .dnd-section-color--bg .service-flow__list__item__box { background-color: #fff; } @media screen and (min-width: 768px) { .service-flow__list__item__box { padding: 28px 25px; } } @media screen and (min-width: 768px) { .service-flow__list__item__box.service-flow__list__item__box--noheading { padding: 28px 30px; } } @media screen and (min-width: 1050px) { .service-flow__list__item__box.service-flow__list__item__box--noheading { padding: 28px 50px; } } @media screen and (min-width: 768px) { .service-flow__list__item__box__columns { display: flex; align-items: center; justify-content: space-between; } } @media screen and (min-width: 768px) { .service-flow__list__item__box__columns__column:nth-child(1) { width: 110px; } } @media screen and (min-width: 1050px) { .service-flow__list__item__box__columns__column:nth-child(1) { width: 225px; } } .service-flow__list__item__box__columns__column:nth-child(1).column--single { width: 100%; max-width: none; } @media screen and (min-width: 768px) { .service-flow__list__item__box__columns__column:nth-child(1).column--single { text-align: center; } } .service-flow__list__item__box__columns__column:nth-child(2) { margin-top: 10px; } @media screen and (min-width: 768px) { .service-flow__list__item__box__columns__column:nth-child(2) { width: calc(100% - 110px); margin-top: 0; margin-left: 50px; } } @media screen and (min-width: 1050px) { .service-flow__list__item__box__columns__column:nth-child(2) { width: calc(100% - 225px); } } @charset "UTF-8"; /* service-question */ .section-service-question { margin-top: 30px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-service-question { margin-top: 45px; margin-bottom: 80px; } } .service-question__list__item:not(:first-child) { padding-top: 30px; margin-top: 27px; border-top: 1px dotted #dbdbdb; } @media screen and (min-width: 768px) { .service-question__list__item:not(:first-child) { padding-top: 40px; margin-top: 37px; } } .service-question__list__item__question::before { content: attr(data-decoration-text); display: inline-block; box-sizing: border-box; width: 123px; padding: 4.5px 5px 4.5px; border-radius: 18px; background-color: #222222; color: #ffffff; font-family: 'Barlow', sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5em; text-align: center; } @media screen and (min-width: 768px) { .service-question__list__item__question::before { width: 146px; padding: 3.5px 5px 3.5px; font-size: 1.4rem; } } .service-question__list__item__question__inner { display: block; margin-top: 16px; } .service-question__list__item__answer { margin-top: 17px; } @media screen and (min-width: 768px) { .service-question__list__item__answer { margin-top: 25px; } } .service-question__list__item__answer::before { content: attr(data-decoration-text); display: inline-block; box-sizing: border-box; width: 123px; padding: 5px 5px 4px; border-radius: 18px; border: 1px solid #0d0d0d; background-color: #ffffff; font-family: 'Barlow', sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5em; text-align: center; } @media screen and (min-width: 768px) { .service-question__list__item__answer::before { width: 146px; padding: 4px 5px 3px; font-size: 1.4rem; } } .service-question__list__item__answer .natural.service-question__list__item__answer__inner { display: block; margin-top: 16px; } /* === アコーディオン */ .service-question.accordion--active .service-question__list__item { padding: 0 76px 0 20px; border: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .service-question.accordion--active .service-question__list__item { padding: 0 130px 0 40px; } } .service-question.accordion--active .service-question__list__item:not(:first-child) { margin-top: 20px; } /* question */ .service-question.accordion--active .service-question__list__item__question { position: relative; padding: 20px 0 20px 34px; cursor: pointer; } @media screen and (min-width: 768px) { .service-question.accordion--active .service-question__list__item__question { padding: 40px 0 45px 54px; } } .service-question.accordion--active .service-question__list__item__question__inner { margin-top: 0; margin-bottom: 0; } /* answer */ .service-question.accordion--active .service-question__list__item__answer { display: none; position: relative; margin-top: 0; padding: 15px 0 20px 34px; border-top: 1px dotted #dbdbdb; } @media screen and (min-width: 768px) { .service-question.accordion--active .service-question__list__item__answer { padding: 30px 0 35px 54px; } } .service-question.accordion--active .service-question__list__item__answer__inner { margin-top: 0; } /* q/a icon */ .service-question.accordion--active .service-question__list__item__question::before, .service-question.accordion--active .service-question__list__item__answer::before { display: block; position: absolute; left: 0; width: auto; padding: initial; border-radius: initial; background-color: transparent; color: #222222; font-size: 2.2rem; font-weight: 600; letter-spacing: .1em; } .service-question.accordion--active .service-question__list__item__question::before { content: "Q."; top: 10px; left: 0; } .service-question.accordion--active .service-question__list__item__answer::before { content: "A."; top: 13px; border: none; color: #0d0d0d; } @media screen and (min-width: 768px) { .service-question.accordion--active .service-question__list__item__question::before, .service-question.accordion--active .service-question__list__item__answer::before { font-size: 3.2rem; } .service-question.accordion--active .service-question__list__item__question::before { top: 24px; } .service-question.accordion--active .service-question__list__item__answer::before { top: 23px; } } /* +/- icon */ .service-question__list__item__question__icon { position: absolute; top: calc(50%); right: -56px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #dbdbdb; transform: translateY(-50%); transition: .5s; } @media screen and (min-width: 768px) { .service-question__list__item__question__icon { right: -100px; width: 70px; height: 70px; } } .service-question__list__item__question__icon::before, .service-question__list__item__question__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; background-color: #0d0d0d; transform: translate(-50%); transition: .5s; } @media screen and (min-width: 768px) { .service-question__list__item__question__icon::before, .service-question__list__item__question__icon::after { width: 14px; } } .service-question__list__item__question__icon::before { transform: translate(-50%); } .service-question__list__item__question__icon::after { transform: translate(-50%) rotate(90deg); } .service-question__list__item__question.is-active .service-question__list__item__question__icon::after { transform: translate(-50%) rotate(0); } @media screen and (min-width: 1050px) { .service-question.accordion--active .js-accordion-button:hover .service-question__list__item__question__icon { background-color: #0d0d0d; } .service-question.accordion--active .js-accordion-button:hover .service-question__list__item__question__icon::before, .service-question.accordion--active .js-accordion-button:hover .service-question__list__item__question__icon::after { background-color: #ffffff; } } /* アコーディオン === */ @charset "UTF-8"; /* case-lead */ .section-case-lead { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-case-lead { margin-top: 80px; margin-bottom: 80px; } } .case-lead { background-color: #f7f7f7; padding-top: 60px; padding-bottom: 60px; } /* 背景色ありのスタイル */ .dnd-section-color--bg .case-lead { background-color: #fff; } @media screen and (min-width: 768px) { .case-lead__block { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -25px; margin-right: -25px; } } @media screen and (min-width: 768px) { .case-lead__block__image { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 25px; padding-right: 25px; } } .case-lead__block__image__box { width: 150px; height: 150px; margin-left: auto; margin-right: auto; padding: 20px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #ffffff; 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; } @media screen and (min-width: 768px) { .case-lead__block__image__box { width: 200px; height: 200px; } } @media screen and (min-width: 1050px) { .case-lead__block__image__box { width: 250px; height: 250px; } } .case-lead__block__image__box__logo img { max-width: 100%; vertical-align: bottom; } /* IE対応 */ @media all and (-ms-high-contrast: none) { .case-lead__block__image__box__logo { min-width: 100%; text-align: center; } } .case-lead__block__text { width: 100%; } @media screen and (min-width: 768px) { .case-lead__block__text { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 25px; padding-right: 25px; } } .case-lead__block__text__heading { font-size: 2.2rem; font-weight: 500; letter-spacing: .2em; line-height: 1.5em; margin-top: 30px; } @media screen and (min-width: 768px) { .case-lead__block__text__heading { margin-top: 0; } } .case-lead__block__text__heading::before { content: ''; display: block; width: 0; height: 0; margin-top: calc((1 - 1.5) * .5em); } .case-lead__block__text__heading::after { content: ''; display: block; width: 0; height: 0; margin-bottom: calc((1 - 1.5) * .5em); } @media screen and (min-width: 768px) { .case-lead__block__text__heading { font-size: 3.2rem; } } .case-lead__block__text__client { border-top: 1px solid #222222; padding-top: 20px; margin-top: 20px; } @media screen and (min-width: 768px) { .case-lead__block__text__client { margin-top: 35px; } } .case-lead__block__text__client__name { font-size: 1.6rem; line-height: 1.5em; } .case-lead__block__text__client__name.natural p { line-height: 1.5em; } @charset "UTF-8"; /* 説明リスト */ .section-description-list { margin-top: 40px; margin-bottom: 45px; } @media screen and (min-width: 768px) { .section-description-list { margin-top: 55px; margin-bottom: 55px; } } .description-list__group { border-bottom: 1px dotted #aab2bd; } @media screen and (min-width: 768px) { .description-list__group { display: flex; } } .description-list__group:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .description-list__group:not(:first-child) { margin-top: 0; } } .description-list__group__term { color: #222222; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 2; } @media screen and (min-width: 768px) { .description-list__group__term { box-sizing: border-box; max-width: 200px; min-width: 200px; padding-top: 20px; padding-bottom: 20px; padding-right: 30px; font-size: 1.6rem; } } @media screen and (min-width: 1050px) { .description-list__group__term { max-width: 220px; min-width: 220px; } } @media screen and (min-width: 768px) { .description-list__group__desc { display: flex; align-items: flex-start; } } @media screen and (max-width: 767px) { .description-list__group__desc { position: relative; margin-top: 10px; padding-top: 10px; padding-bottom: 20px; padding-left: 15px; } .description-list__group__desc::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: calc(100% - 10px); border-left: 1px dotted #aab2bd; } } @media screen and (min-width: 768px) { .description-list__group__desc__inner { position: relative; flex: 1; padding: 20px 30px; } .description-list__group__desc__inner::before { content: ""; position: absolute; top: 20px; left: 0; width: 1px; height: calc(100% - 40px); border-left: 1px dotted #aab2bd; } } @media screen and (max-width: 767px) { .description-list__group__desc__inner:nth-child(2) { margin-top: 10px; padding-top: 10px; border-top: 1px dotted #aab2bd; } } .description-list .natural { margin-top: 0; margin-bottom: 0; } @charset "UTF-8"; /* glossary-index */ .section-glossary-index { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-glossary-index { margin-top: 80px; margin-bottom: 80px; } } .glossary-index__list { border-top: 1px solid #dbdbdb; } .glossary-index__list__item { padding-top: 30px; } @media screen and (min-width: 768px) { .glossary-index__list__item { padding-top: 40px; } } .glossary-index__list__item:not(:first-child) { border-top: 1px solid #dbdbdb; margin-top: 40px; } @media screen and (min-width: 768px) { .glossary-index__list__item:not(:first-child) { margin-top: 50px; } } .glossary-index__list__item .heading-2:not(:last-child) { margin-bottom: 15px; } @media screen and (min-width: 768px) { .glossary-index__list__item .heading-2:not(:last-child) { margin-bottom: 35px; } } @media screen and (min-width: 768px) { .glossary-index__list__item__word-list { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } } @media screen and (min-width: 768px) { .glossary-index__list__item__word-list__item { box-sizing: border-box; width: calc(100% / 3); padding-left: 25px; padding-right: 25px; } } @media screen and (min-width: 1050px) { .glossary-index__list__item__word-list__item { width: calc(100% / 4); } } .glossary-index__list__item__word-list__item:nth-child(n+2) { margin-top: 5px; } @media screen and (min-width: 768px) { .glossary-index__list__item__word-list__item:nth-child(n+2) { margin-top: 0; } } @media screen and (min-width: 768px) { .glossary-index__list__item__word-list__item:nth-child(n+4) { margin-top: 30px; } } @media screen and (min-width: 1050px) { .glossary-index__list__item__word-list__item:nth-child(n+4) { margin-top: 0; } } @media screen and (min-width: 1050px) { .glossary-index__list__item__word-list__item:nth-child(n+5) { margin-top: 30px; } } .glossary-index__list__item__word-list__item__anchor { display: block; position: relative; padding-left: 15px; font-size: 1.3rem; letter-spacing: .1em; line-height: 2; text-decoration: underline; transition: opacity .5s; } @media screen and (min-width: 768px) { .glossary-index__list__item__word-list__item__anchor { font-size: 1.6rem; } .glossary-index__list__item__word-list__item__anchor:hover { opacity: .6; } } .glossary-index__list__item__word-list__item__anchor::before { content: ''; position: absolute; top: 1em; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #222222; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .glossary-index__list__item__word-list__item__anchor:hover { color: #0d0d0d; text-decoration: underline; } @charset "UTF-8"; /* faq-question */ .section-faq-question { margin-top: 30px; margin-bottom: 40px; } @media screen and (min-width: 768px) { .section-faq-question { margin-top: 45px; margin-bottom: 55px; } } .faq-question__list__item { border-left: 1px dotted #222222; border-right: 1px dotted #222222; } .faq-question__list__item:first-child { border-top: 1px dotted #222222; } .faq-question__list__item:last-child { border-bottom: 1px dotted #222222; } .faq-question__list__item:not(:first-child) { border-top: 1px dotted #222222; } .faq-question__list__item__question { padding: 10px calc(15px + 36px) 10px 15px; position: relative; z-index: 1; cursor: pointer; -webkit-transition: background-color .5s; transition: background-color .5s; } @media screen and (min-width: 768px) { .faq-question__list__item__question { padding: 15px calc(20px + 60px) 15px 20px; } } .faq-question__list__item__question:hover { background-color: #f7f7f7; } .faq-question__list__item__question.is-active { border-bottom: 1px dotted #dbdbdb; } /* 背景色ありのスタイル */ .dnd-section-color--bg .faq-question__list__item__question:hover { background-color: #fff; } .dnd-section-color--bg .faq-question__list__item__question.is-active { background-color: #fff; } .faq-question__list__item__question__inner { font-size: 1.6rem; letter-spacing: .2em; line-height: 1.5em; font-weight: 500; } @media screen and (min-width: 768px) { .faq-question__list__item__question__inner { font-size: 2.0rem; } } .faq-question__list__item__question__button { pointer-events: none; position: absolute; padding: 0; width: 36px; height: 100%; top: 0; right: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; background-color: transparent; border-left: 1px dotted #222222; } @media screen and (min-width: 768px) { .faq-question__list__item__question__button { width: 60px; } } .faq-question__list__item__question__button::before, .faq-question__list__item__question__button::after { content: ''; position: absolute; top: calc(50% - 1px); right: calc(50% - 5px); width: 10px; height: 2px; background-color: #0d0d0d; -webkit-transition: -webkit-transform .5s; transition: -webkit-transform .5s; transition: transform .5s; transition: transform .3s, -webkit-transform .5s; } @media screen and (min-width: 768px) { .faq-question__list__item__question__button::before, .faq-question__list__item__question__button::after { width: 14px; right: calc(50% - 7px); } } .is-active .faq-question__list__item__question__button::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .faq-question__list__item__question__button::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .is-active .faq-question__list__item__question__button::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .faq-question__list__item__answer { display: none; padding: 11px 15px 9px; } @media screen and (min-width: 768px) { .faq-question__list__item__answer { padding: 16px 20px 14px 20px; } } .faq-question__list__item__answer__inner { font-size: 1.3rem; letter-spacing: .2em; line-height: 2em; } @media screen and (min-width: 768px) { .faq-question__list__item__answer__inner { font-size: 1.6rem; } } /* ========================================================================== table ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .table { width: 100%; } .js-table-scroll__icon { display: none; } @media screen and (max-width:600px) { .js-table-scroll { margin-right: -20px; overflow-x: scroll; overflow-y: hidden; position: relative; } .js-table-scroll>.table { width: 600px } .js-table-scroll:before { content: ""; } .js-table-scroll:before { background-color: rgba(15, 15, 15, .3); border-radius: 5px; box-sizing: border-box; content: "SWIPE"; color: #ffffff; font-family: 'Barlow', sans-serif; font-size: 20px; font-weight: bold; left: 50%; line-height: 60px; height: 120px; transform: translate(-50%, -50%); text-align: center; opacity: 1; padding-top: 35px; position: absolute; transition: .5s; top: 50%; width: 120px; z-index: 1; } .js-table-scroll__icon { display: block; height: 8px; left: calc(50% - 30px); position: absolute; top: calc(50% - 20px); width: 61px; z-index: 2; transition: .5s; } .js-table-scroll__icon__path { fill: #ffffff; } .js-table-scroll.is-checked:before, .js-table-scroll.is-checked .js-table-scroll__icon { opacity: 0; } } /* style1 : normal */ .section-table1 { margin-bottom: 30px; margin-top: 30px; } @media screen and (min-width: 768px) { .section-table1 { margin-bottom: 40px; margin-top: 40px; } } .table-normal__table { border: 1px solid #dbdbdb; } .table-normal__head__row__header { max-width: 200px; padding: 15px; border-bottom: 1px solid #dbdbdb; background-color: rgba(219, 219, 219, 60%); color: #222222; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 2; text-align: left; } @media screen and (max-width: 767px) { .table-normal__head__row__header { font-size: 1.3rem; } } .table-normal__head__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; } .table-normal__body__row__header { box-sizing: border-box; width: 250px; padding: 20px 15px; border-right: 1px solid #dbdbdb; background-color: #f7f7f7; color: #222222; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 2; text-align: left; } /* style1 背景色ありのスタイル */ .dnd-section-color--bg ..table-normal__body__row__header { background-color: #ffffff; } .table-normal__body__row__header--bg { background-color: #f7f7f7; } @media screen and (max-width: 1049px) { .table-normal__body__row__header { padding: 15px 15px; width: 180px; } } @media screen and (max-width: 767px) { .table-normal__body__row__header { font-size: 13px; width: 150px; } } .table-normal__body__row:not(:last-child) { border-bottom: 1px solid #dbdbdb; } .table-normal__body__row__data { max-width: 200px; padding: 15px 15px; color: #222222; font-size: 1.6rem; letter-spacing: .1em; line-height: 2; text-align: left; vertical-align: middle; } @media screen and (max-width: 767px) { .table-normal__body__row__data { padding: 15px; font-size: 1.3rem; } } .table-normal__body__row__data:not(:last-child) { border-right: 1px solid #dbdbdb; } /* style2 : combination */ .section-table2 { margin-bottom: 30px; margin-top: 30px; } @media screen and (min-width: 768px) { .section-table2 { margin-bottom: 40px; margin-top: 40px; } } .table-combination__table { border: 1px solid #dbdbdb; } .table-combination__head__row__header.table__head__row__header--title { background-color: #222222; color: #ffffff; } .table-combination__head__row__header { width: 350px; padding: 10px 20px; color: #222222; font-size: 2.0rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } .table-combination__head__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; } @media screen and (max-width: 1049px) { .table-combination__body__row { display: flex; flex-wrap: wrap; } } .table-combination__body__row:not(:last-child) { border-bottom: 1px solid #dbdbdb; } .table-combination__body__row__header { box-sizing: border-box; width: 252px; padding: 20px 15px; color: #222222; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; vertical-align: middle; } .table-combination__body__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } @media screen and (max-width: 1049px) { .table-combination__body__row__header { padding: 20px 15px; border-right: none; text-align: center; } .table-combination__body__row__header:not(:last-child) { width: 100%; border-right: none; } } @media screen and (max-width: 767px) { .table-combination__body__row__header { padding: 15px; font-size: 13px; text-align: center; } .table-combination__body__row__header:not(:last-child) { width: 100%; } } .table-combination__body__row__data { box-sizing: border-box; width: 260px; padding: 20px 15px; } @media screen and (max-width: 1049px) { .table-combination__body__row__data { width: 50%; padding: 20px 15px; } .table-combination__body__row__data:last-child { border-left: none; } } .table-combination__body__row__data:not(:last-child) { border-right: 1px solid #dbdbdb; } .table-combination__body__row__data.table-combination__body__row__data--bg:last-child { background-color: #f7f7f7; } @media screen and (max-width: 767px) { .table-combination__body__row__data { padding: 15px; } } .table-comparison__body__row__data .list--default>.list__item:before { content: ""; position: absolute; top: 13px; left: 0; width: 3px; height: 3px; border-radius: 3px; background-color: #222222; } /* style2 背景色ありのスタイル */ .dnd-section-color--bg .table-combination__table { border: 1px solid #dbdbdb; } .dnd-section-color--bg .table-combination__head__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; } .dnd-section-color--bg .table-combination__body__row:not(:last-child) { border-bottom: 1px solid #dbdbdb; } .dnd-section-color--bg .table-combination__body__row__header:not(:last-child) { border-right: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb; } .dnd-section-color--bg .table-combination__body__row__data:not(:last-child) { border-right: 1px solid #dbdbdb; } .dnd-section-color--bg .table-combination__body__row__data.table-combination__body__row__data--bg:last-child { background-color: #fff; } /* ========================================================================== list ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ /* 余白 */ .section-list--default, .section-list--line, .section-list--number { margin-top: 25px; margin-bottom: 25px; } @media screen and (min-width: 768px) { .section-list--default, .section-list--line, .section-list--number { margin-top: 30px; margin-bottom: 30px; } } .section-list--check { margin-top: 30px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .section-list--check { margin-top: 40px; margin-bottom: 40px; } } /* === 2列の場合 */ @media screen and (min-width: 768px) { .list-wrapper.list-wapper--2clm { display: flex; justify-content: space-between; margin-right: -25px; margin-left: -25px; } } .list-wrapper.list-wapper--2clm .list:not(:last-child) { margin-top: 40px; } @media screen and (min-width: 768px) { .list-wrapper.list-wapper--2clm .list:not(:last-child) { margin-top: 50px; } } @media screen and (min-width: 768px) { .list-wrapper.list-wapper--2clm .list { box-sizing: border-box; width: 50%; padding-right: 25px; padding-left: 25px; } .list-wrapper.list-wapper--2clm .list:not(:first-child), .list-wrapper.list-wapper--2clm .list:not(:last-child) { margin-top: 0; } } /* 2列の場合 === */ .list__item { margin-top: 15px; margin-bottom: 15px; } @media screen and (min-width: 768px) { .list__item { margin-top: 22px; margin-bottom: 22px; } } .list__item:first-child { margin-top: 0; } .list__item:last-child { margin-bottom: 0; } @media screen and (max-width: 767px) { .list__item .paragraph:not(:last-child) { margin-bottom: 12px; } .list__item .link-text:not(:first-child) { margin-top: 12px; } } /* ドット */ .list--default:not(:first-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .list--default:not(:first-child) { margin-top: 25px; } } .list--default:not(:last-child) { margin-bottom: 30px; } @media screen and (max-width: 767px) { .list--default:not(:last-child) { margin-bottom: 25px; } } .list--default > .list__item { position: relative; padding-left: 15px; list-style-type: none; } .list--default > .list__item::before { content: ""; display: block; position: absolute; top: 13px; left: 0; width: 5px; height: 5px; background-color: #dbdbdb; } @media all and (-ms-high-contrast:none){ .list--default > .list__item::before { top: 9px; } } @media screen and (max-width: 767px) { .list--default>.list__item::before { top: 10px; } } /* ライン */ .list--line:not(:first-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .list--line:not(:first-child) { margin-top: 25px; } } .list--line:not(:last-child) { margin-bottom: 30px; } @media screen and (max-width: 767px) { .list--line:not(:last-child) { margin-bottom: 25px; } } .list--line .list__item { position: relative; padding-left: 15px; } .list--line .list__item::before { content: "-"; position: absolute; top: 8px; left: 0; color: #222222; line-height: 1; } @media screen and (max-width: 767px) { .list--line .list__item::before { top: 6px; } } /* チェック */ .list--check:not(:first-child) { margin-top: 40px; } @media screen and (max-width: 767px) { .list--check:not(:first-child) { margin-top: 30px; } } .list--check:not(:last-child) { margin-bottom: 40px; } @media screen and (max-width: 767px) { .list--check:not(:last-child) { margin-bottom: 30px; } } .list.list--check .list__item { position: relative; margin-top: 30px; padding-left: 25px; } @media screen and (max-width: 767px) { .list.list--check .list__item { margin-top: 25px; } } .list.list--check .list__item .paragraph { font-size: 18px; font-weight: 500; position: relative; } @media screen and (max-width: 767px) { .list.list--check .list__item .paragraph { font-size: 15px; line-height: 1.5; } } .list.list--check .list__item::before { content: ''; display: block; position: absolute; top: 13px; left: 0; width: 10px; height: 5px; border-bottom: 2px solid #808080; border-left: 2px solid #808080; transform: rotate(-45deg); } @media screen and (max-width: 767px) { .list.list--check .list__item::before { top: 5px; } } /* 数字 */ .list--number:not(:first-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .list--number:not(:first-child) { margin-top: 25px; } } .list--number:not(:last-child) { margin-bottom: 30px; } @media screen and (max-width: 767px) { .list--number:not(:last-child) { margin-bottom: 25px; } } .list--number { counter-reset: number; } .list--number .list__item { padding-left: 35px; position: relative; } @media screen and (max-width: 767px) { .list--number .list__item { padding-left: 25px; } } .list--number .list__item::before { content: counter(number) "."; counter-increment: number; position: absolute; top: 3px; left: 0; color: #222222; line-height: 2; text-transform: uppercase; } @media screen and (max-width: 767px) { .list--number .list__item::before { top: -1px; } } /* ========================================================================== sub_navigation ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .sub-navigation { display: flex; flex-wrap: wrap; } /* タブ */ .section-tab { margin-bottom: 50px; margin-top: 50px; } .sub-navigation.sub-navigation--tab { align-items: flex-end; } .sub-navigation--tab__list { flex: 1; text-align: center; padding-bottom: 20px; position: relative; } @media only screen and (max-width: 1049px) { .sub-navigation--tab__list { flex: inherit; width: calc(25% - 4px); } } .sub-navigation--tab__list:not(:first-child) { margin-left: 2px; } .sub-navigation--tab__list__link { display: block; position: relative; padding: 15px 10px 10px 10px; border-bottom: 8px solid #f7f7f7; color: #222222; font-size: 1.7rem; font-weight: 500; transition: .5s; } @media only screen and (max-width: 767px) { .sub-navigation--tab__list__link { font-size: 1.4rem; } } .sub-navigation--tab__list__link a { color: #808080; line-height: 1.5; transition: .5s; } .sub-navigation--tab__list__link::before, .sub-navigation--tab__list__link::after { content: ""; display: inline-block; position: absolute; left: calc(50% - 1px); width: 2px; } .sub-navigation--tab__list__link::before { content: ""; bottom: -8px; z-index: 2; height: 0; background-color: #ffffff; transition: .2s .5s; } .sub-navigation--tab__list__link::after { content: ""; bottom: -28px; height: 0; background-color: #0d0d0d; transition: .5s; } .sub-navigation--tab__list__link .tab__list__link__text { display: block; position: relative; padding-top: 15px; } .sub-navigation--tab__list__link:hover::before { height: 8px; } .sub-navigation--tab__list__link:hover::after { height: 23px; } .sub-navigation--tab__list:hover .sub-navigation--tab__list__link { border-bottom: 8px solid #0d0d0d; } .sub-navigation--tab__list:hover .sub-navigation--tab__list__link a { color: #0d0d0d; } .sub-navigation--tab__list:hover .sub-navigation--tab__list__link::before { height: 8px; } .sub-navigation--tab__list:hover .sub-navigation--tab__list__link::after { height: 20px; } .sub-navigation--tab__list:hover .sub-navigation--tab__list__link .sub-navigation--tab__list__link__text::before, .sub-navigation--tab__list__link:hover .sub-navigation--tab__list__link__text::before { opacity: 1; transform: translateY(0); } @media only screen and (max-width: 767px) { .sub-navigation--tab__list { flex: inherit; width: calc(50% - 1px); } .sub-navigation--tab__list:not(:first-child) { margin-left: 0; } .sub-navigation--tab__list:nth-child(2n) { margin-left: 2px; } .sub-navigation--tab__list .tab__list__link { padding: 0 10px 5px 10px; font-size: 1.4rem; } .sub-navigation--tab__list .tab__list__link__text::before { left: calc(50% - 18px); width: 35px; height: 4px; } } /* タブスタイル 背景色ありのスタイル */ .dnd-section-color--bg .sub-navigation--tab__list__link { border-bottom: 8px solid #dbdbdb; } /* アンカーリンク */ .section-anchor { margin-top: 40px; margin-bottom: 40px; } @media only screen and (min-width: 768px) { .section-anchor { margin-top: 60px; margin-bottom: 60px; } } .linkin-page { display: flex; flex-wrap: wrap; align-items: flex-start; } @media screen and (max-width: 1049px) { .linkin-page { margin-right: 0; margin-left: 0; } } .linkin-page:not(:first-child) { margin-top: 60px } @media screen and (max-width: 767px) { .linkin-page:not(:first-child) { margin-top: 40px; } } .linkin-page:not(:last-child) { margin-bottom: 40px } @media screen and (max-width: 767px) { .linkin-page:not(:last-child) { margin-bottom: 40px } } .linkin-page__item { box-sizing: border-box; width: calc(25% - 23px); } @media screen and (max-width:767px) { .linkin-page__item { padding: 0; width: 100%; } .linkin-page__item:not(:first-child) { margin-top: 25px; } } .linkin-page__item:nth-child(n+5) { margin-top: 40px; } @media screen and (min-width: 768px) { .linkin-page__item:not(:nth-child(4n+4)) { margin-right: 30px; } } .linkin-page__item a { display: flex; align-items: center; border-top: 1px solid #222222; color: #222222; text-decoration: none; transition: .5s; } @media screen and (max-width: 767px) { .linkin-page__item a { display: block; } } @media screen and (min-width: 1050px) { .linkin-page__item a:hover { opacity: .5; } } .linkin-page__item__text { display: block; width: 100%; color: #0d0d0d; font-size: 1.6rem; line-height: 1.5; transition: .5s; } @media screen and (max-width:767px) { .linkin-page__item__text { font-size: 1.3rem; } .linkin-page__item__text:not(:first-child) { margin-top: 5px; } } @media screen and (min-width:1050px) { .linkin-page__item a:hover .linkin-page__item__text { color: #0d0d0d; } } .linkin-page__item__text__inner { display: block; position: relative; padding-top: 15px; padding-right: 25px; } .linkin-page__item a .linkin-page__item__text__inner::before { content: ""; display: inline-block; position: absolute; top: 20px; right: 5px; width: 8px; height: 8px; border-right: solid 1px #0d0d0d; border-bottom: solid 1px #0d0d0d; transform: rotate(45deg); transition: .5s; } .linkin-page__item a:hover .linkin-page__item__text__inner::before { border-color: #0d0d0d; } @media screen and (max-width: 767px) { .linkin-page__item a .linkin-page__item__text__inner::before { width: 6px; height: 6px; } } /* 目次のスタイル */ .section-index { margin-top: 50px; margin-bottom: 50px; } .sub-navigation--anchor { display: flex; flex-wrap: wrap; align-items: flex-start; margin-top: -20px; } @media screen and (max-width: 1049px) { .sub-navigation--anchor { margin-right: 0; margin-left: 0; } } .sub-navigation--anchor:not(:first-child) { margin-top: 40px } @media screen and (max-width: 767px) { .sub-navigation--anchor:not(:first-child) { margin-bottom: 30px; } } .sub-navigation--anchor:not(:last-child) { margin-bottom: 40px } @media screen and (max-width: 767px) { .sub-navigation--anchor:not(:last-child) { margin-bottom: 30px } } .sub-navigation--anchor__item { box-sizing: border-box; width: 10%; margin-top: 20px; } @media screen and (min-width: 1050px) { .sub-navigation--anchor__item:nth-child(10n+10) { border-right: 2px solid #dbdbdb; } } .sub-navigation--anchor__item a { display: block; position: relative; padding: 18px 10px; border-left: 2px solid #dbdbdb; text-align: center; text-decoration: none; } .sub-navigation--anchor__item:last-child a { border-right: 2px solid #dbdbdb!important; } .sub-navigation--anchor__item a::before { content: ""; display: inline-block; position: absolute; bottom: 2px; left: calc(50% - 2.5px); width: 5px; height: 5px; border-right: solid 2px #0d0d0d; border-bottom: solid 2px #0d0d0d; transform: rotate(45deg); transition: .5s; } @media screen and (min-width: 1050px) { .sub-navigation--anchor__item a:hover::before { bottom: -3px; } } .sub-navigation--anchor__item__text { display: block; color: #0d0d0d; font-size: 1.6rem; font-weight: 500; line-height: 1.5; transition: .5s; } @media screen and (max-width:767px) { .sub-navigation--anchor__item__text { font-size: 1.4rem; } } @media screen and (max-width:1049px) { .sub-navigation--anchor__item { flex: inherit; box-sizing: border-box; width: 20%; margin-top: 0; padding: 0; } .sub-navigation--anchor__item:nth-child(n+6) { margin-top: 30px; } .sub-navigation--anchor__item:nth-child(5n) a { border-right: 2px solid #dbdbdb; } } @media screen and (max-width:767px) { .sub-navigation--anchor__item { width: 25%; padding: 0; } .sub-navigation--anchor__item a { padding: 13px 5px; font-size: 1.4rem; } .sub-navigation--anchor__item:nth-child(5n) a { border-right: none; } .sub-navigation--anchor__item:nth-child(n+6) { margin-top: 0; } .sub-navigation--anchor__item:nth-child(n+5) { margin-top: 20px; } .sub-navigation--anchor__item:nth-child(4n) a { border-right: 2px solid #dbdbdb; } } @charset "utf-8"; /* movie */ .section-movie { margin-top: 20px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .section-movie { margin-top: 40px; margin-bottom: 40px; } } .section-movie .movie-caption { margin-top: 15px; color: #222222; font-size: 14px; letter-spacing: .15em; line-height: 1.5; } @media screen and (max-width: 767px) { .section-movie .movie-caption { margin-top: 10px; font-size: 12px; } } /* ========================================================================== map ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-map { margin-bottom: 40px; margin-top: 40px; } @media screen and (max-width: 767px) { .section-map { margin-bottom: 20px; margin-top: 20px; } } .map .hs-responsive-embed-inner-wrapper { width: 100%; height: 0; position: relative; padding-bottom: 56.2% !important; } .map iframe { width: 100% !important; height: 100% !important; top: 0 !important; left: 0 !important; position: absolute !important; } /* ========================================================================== zoom ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-zoom { margin-top: 25px; margin-bottom: 40px; } @media screen and (min-width: 768px) { .section-zoom { margin-top: 40px; margin-bottom: 60px; } } @media screen and (min-width: 1050px) { .section-zoom__inner { display: flex; flex-wrap: wrap; margin-right: -25px; margin-left: -25px; } } @media screen and (max-width: 767px) { .section-zoom__inner { max-width: 450px; margin-right: auto; margin-left: auto; } } /* title / text contents column */ @media screen and (min-width: 1050px) { .section-zoom__main-area { flex: 1; order: 2; min-width: 380px; padding-right: 25px; padding-left: 25px; } } /* image column */ .section-zoom__image-area { position: relative; margin-top: 20px; } @media screen and (min-width: 768px) { .section-zoom__image-area { margin-top: 25px; } } @media screen and (min-width: 1050px) { .section-zoom__image-area { flex: 2; order: 1; position: relative; max-width: 620px; margin-top: 0; padding-right: 25px; padding-left: 25px; } } /* Zoom image area */ .section-zoom__zoom-image { display: none; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; border: 1px solid #dbdbdb; background-color: #ffffff; } @media screen and (min-width: 1050px) { .section-zoom__zoom-image.is-active { display: block; } } /* Main image area */ .section-zoom__image-area__main-wrapper { display: flex; align-items: center; justify-content: center; height: 198px; background-color: #fff; text-align: center; } @media screen and (min-width: 768px) { .section-zoom__image-area__main-wrapper { height: 375px; } } @media screen and (min-width: 1050px) { .section-zoom__image-area__main-wrapper { height: 348px; } } .section-zoom__image-area__main { display: inline-block; position: relative; } @media screen and (min-width: 1050px) { .section-zoom__image-area__main::before { content: ""; display: block; position: absolute; right: 0; bottom: 0; width: 50px; height: 50px; background-color: #ffffff; opacity: .6; } .section-zoom__image-area__main::after { content: ""; display: block; position: absolute; right: 12px; bottom: 13px; width: 22px; height: 21px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS4zOSAyMC42NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7fS5jbHMtMntmaWxsOiM3MDcwNzA7fS5jbHMtM3tmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTUxIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNTEiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTMyIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMzIiPjxnIGlkPSLlkIjkvZNfMjIiIGRhdGEtbmFtZT0i5ZCI5L2TIDIyIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNy43NCwyMC42NmwtNS4yOS01LjI5YTguMjYsOC4yNiwwLDEsMSwzLjQxLTMuODlMMjEuMzksMTdaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjAsMTdsLTQuODItNC44My0uNDgtLjQ3LjI2LS42MmE3LjI2LDcuMjYsMCwxLDAtMywzLjQxbC42Ny0uMzkuNTQuNTUsNC41OSw0LjU4TDIwLDE3bTEuNDIsMC0zLjY1LDMuNjUtNS4yOS01LjI5YTguMjUsOC4yNSwwLDEsMSwzLjQxLTMuODlaIi8+PC9nPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTUwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNTAiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTQ5IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNDkiPjxnIGlkPSLmpZXlhoblvaJfMyIgZGF0YS1uYW1lPSLmpZXlhoblvaIgMyI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI4LjI1IiBjeT0iOC4yNSIgcj0iNS4xNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTguMjUsMTMuNDFBNS4wOSw1LjA5LDAsMCwxLDQuNjEsMTEuOWE1LjE0LDUuMTQsMCwwLDEsMC03LjI5aDBhNS4xNiw1LjE2LDAsMCwxLDguOCwzLjY0LDUuMTYsNS4xNiwwLDAsMS01LjE2LDUuMTZaTTUuMzEsNS4zMWE0LjE2LDQuMTYsMCwwLDAsMCw1Ljg4LDQuMTYsNC4xNiwwLDEsMCwyLjk0LTcuMUE0LjE2LDQuMTYsMCwwLDAsNS4zMSw1LjMxWiIvPjwvZz48L2c+PC9nPjwvZz48ZyBpZD0i6ZW35pa55b2iXzg2NSIgZGF0YS1uYW1lPSLplbfmlrnlvaIgODY1Ij48cmVjdCBjbGFzcz0iY2xzLTMiIHg9IjUuODkiIHk9IjcuNzUiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjYuMzkiIHk9IjcuNzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjEiLz48L2c+PGcgaWQ9IumVt+aWueW9ol84NjYiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDg2NiI+PHJlY3QgY2xhc3M9ImNscy0zIiB4PSI3Ljg5IiB5PSI1Ljc1IiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ii8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSI3Ljg5IiB5PSI2LjI1IiB3aWR0aD0iMSIgaGVpZ2h0PSI0Ii8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==); } } .section-zoom__image-area__main img { max-width: 100%; max-height: 198px; vertical-align: top; } @media screen and (min-width: 768px) { .section-zoom__image-area__main img { max-height: 375px; } } @media screen and (min-width: 1050px) { .section-zoom__image-area__main img { max-height: 348px; } } /* Lens */ .section-zoom__lens { display: none; position: absolute; z-index: 2; width: 100%; max-width: 150px; max-height: 150px; background: #ffffff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMS4zOSAyMC42NiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOm5vbmU7fS5jbHMtMntmaWxsOiM3MDcwNzA7fS5jbHMtM3tmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTUxIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNTEiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTMyIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxMzIiPjxnIGlkPSLlkIjkvZNfMjIiIGRhdGEtbmFtZT0i5ZCI5L2TIDIyIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0xNy43NCwyMC42NmwtNS4yOS01LjI5YTguMjYsOC4yNiwwLDEsMSwzLjQxLTMuODlMMjEuMzksMTdaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMjAsMTdsLTQuODItNC44My0uNDgtLjQ3LjI2LS42MmE3LjI2LDcuMjYsMCwxLDAtMywzLjQxbC42Ny0uMzkuNTQuNTUsNC41OSw0LjU4TDIwLDE3bTEuNDIsMC0zLjY1LDMuNjUtNS4yOS01LjI5YTguMjUsOC4yNSwwLDEsMSwzLjQxLTMuODlaIi8+PC9nPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTUwIiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNTAiPjxnIGlkPSLjgrDjg6vjg7zjg5dfMTQ5IiBkYXRhLW5hbWU9IuOCsOODq+ODvOODlyAxNDkiPjxnIGlkPSLmpZXlhoblvaJfMyIgZGF0YS1uYW1lPSLmpZXlhoblvaIgMyI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI4LjI1IiBjeT0iOC4yNSIgcj0iNS4xNiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTguMjUsMTMuNDFBNS4wOSw1LjA5LDAsMCwxLDQuNjEsMTEuOWE1LjE0LDUuMTQsMCwwLDEsMC03LjI5aDBhNS4xNiw1LjE2LDAsMCwxLDguOCwzLjY0LDUuMTYsNS4xNiwwLDAsMS01LjE2LDUuMTZaTTUuMzEsNS4zMWE0LjE2LDQuMTYsMCwwLDAsMCw1Ljg4LDQuMTYsNC4xNiwwLDEsMCwyLjk0LTcuMUE0LjE2LDQuMTYsMCwwLDAsNS4zMSw1LjMxWiIvPjwvZz48L2c+PC9nPjwvZz48ZyBpZD0i6ZW35pa55b2iXzg2NSIgZGF0YS1uYW1lPSLplbfmlrnlvaIgODY1Ij48cmVjdCBjbGFzcz0iY2xzLTMiIHg9IjUuODkiIHk9IjcuNzUiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHg9IjYuMzkiIHk9IjcuNzUiIHdpZHRoPSI0IiBoZWlnaHQ9IjEiLz48L2c+PGcgaWQ9IumVt+aWueW9ol84NjYiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDg2NiI+PHJlY3QgY2xhc3M9ImNscy0zIiB4PSI3Ljg5IiB5PSI1Ljc1IiB3aWR0aD0iMSIgaGVpZ2h0PSI1Ii8+PHJlY3QgY2xhc3M9ImNscy0yIiB4PSI3Ljg5IiB5PSI2LjI1IiB3aWR0aD0iMSIgaGVpZ2h0PSI0Ii8+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==) no-repeat 50% 50% / 22px 22px; opacity: .6; } @media screen and (min-width: 1050px) { .section-zoom__image-area__main:hover .section-zoom__lens { display: block; } } /* Thumbnail list */ .section-zoom__image-area__thumb { display: flex; flex-wrap: wrap; margin-top: 10px; margin-right: -5px; margin-left: -5px; } @media screen and (min-width: 768px) { .section-zoom__image-area__thumb { margin-top: 28px; margin-right: -14px; margin-left: -14px; } } .section-zoom__image-area__thumb__item { box-sizing: border-box; width: 25%; height: 45px; padding-right: 5px; padding-left: 5px; cursor: pointer; } @media screen and (min-width: 768px) { .section-zoom__image-area__thumb__item { width: 20%; height: 63px; padding-right: 14px; padding-left: 14px; } } @media screen and (min-width: 1050px) { .section-zoom__image-area__thumb__item { width: 25%; height: 75px; transition: opacity .3s ease; } .section-zoom__image-area__thumb__item:hover { opacity: .6; } } .section-zoom__image-area__thumb__item:nth-child(n+5) { margin-top: 10px; } @media screen and (min-width: 1050px) { .section-zoom__image-area__thumb__item:nth-child(n+5) { margin-top: 28px; } } @media screen and (max-width: 1049px) and (min-width: 768px) { .section-zoom__image-area__thumb__item:nth-child(n+5) { margin-top: 0; } .section-zoom__image-area__thumb__item:nth-child(n+6) { margin-top: 28px; } } .section-zoom__image-area__thumb__item img { width: 100%; height: 45px; object-fit: cover; } @media screen and (min-width: 768px) { .section-zoom__image-area__thumb__item img { height: 63px; } } @media screen and (min-width: 1050px) { .section-zoom__image-area__thumb__item img { height: 75px; } } /* ========================================================================== group-image ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-group-image { margin-top: 40px; margin-bottom: 40px; } @media screen and (max-width: 767px) { .section-group-image { margin-top: 30px; margin-bottom: 30px; } } .group-image { margin-right: 0; margin-left: 0; } @media screen and (max-width: 767px) { .group-image { display: block; max-width: 450px; margin: 0 auto; } } .group-image .columns__column { width: calc(50% - 1px); padding-right: 0; padding-left: 0; } @media screen and (max-width: 767px) { .group-image .columns__column { width: 100%; } } .group-image .columns__column .columns { display: flex; flex-wrap: wrap; width: 100%; margin-left: 0; } .group-image .columns__column .columns .columns__column { width: calc(50% - .5px); margin-right: 1px; margin-bottom: 1px; padding-right: 0; padding-left: 0; } .group-image .columns__column .columns .columns__column:nth-of-type(even) { margin-right: 0; } .group-image .columns__column .columns .columns__column:nth-last-child(-n+2) { margin-bottom: 0; } .group-image .columns__column:nth-child(1), .group-image .columns__column:nth-child(2) { margin-top: 0; } .group-image .columns__column:nth-child(odd) { margin-right: 1px; } @media screen and (max-width: 767px) { .columns--two > .columns__column:not(:last-child) { flex: inherit; } .columns--two.group-image > .columns__column:first-child { flex: inherit; margin-bottom: 1px; } .columns--two.group-image > .columns__column:nth-child(2) { margin-top: 1px; } _::-webkit-full-page-media, _:future, :root .columns--two.group-image > .columns__column:nth-child(2) { margin-top: 2px; } _::-webkit-full-page-media, _:future, :root .group-image .columns__column .columns .columns__column { margin-bottom: 2px; } } .group-image img { display: block; width: 100%; max-width: 100%; } /* ========================================================================== bg-on-text ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-bg-on-text { margin-bottom: 80px; margin-top: 80px; } @media screen and (max-width: 767px) { .section-bg-on-text { margin-bottom: 60px; margin-top: 60px; } } .bg-on-text { display: flex; align-items: center; box-sizing: border-box; position: relative; z-index: 1; width: 100%; min-height: 320px; padding: 50px 0; background-repeat: no-repeat; background-position: center; background-size: cover; } @media screen and (max-width: 767px) { .bg-on-text { padding: 30px 0 40px 0; } } .bg-on-text::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d; opacity: .3; transition: .5s; } .bg-on-text.bl-hover::before { opacity: .5; } .bg-on-text__container { padding-left: 80px; padding-right: 80px; } @media screen and (max-width: 1049px) { .bg-on-text__container { padding-left: 50px; padding-right: 50px; } } @media screen and (max-width: 767px) { .bg-on-text__container { padding-left: 20px; padding-right: 20px; } } .bg-on-text__inner { position: relative; } @media screen and (max-width: 767px) { .bg-on-text__inner .heading-2:not(:last-child) { margin-bottom: 20px; } } .bg-on-text__inner__text { color: #ffffff; margin: 0 auto; max-width: 950px; } .bg-on-text__inner__text p { color: #ffffff; } .bg-on-text .link-text:not(:first-child) { margin-top: 20px; } @media screen and (min-width: 768px) { .bg-on-text .link-text:not(:first-child) { margin-top: 35px; } } @media screen and (min-width: 1050px) { .bg-on-text.bl-hover .link-text .link-text__anchor { opacity: .6; } } /* === center */ .bg-on-text--center { justify-content: center; max-width: 1050px; margin: 0 auto; } .bg-on-text--center .bg-on-text__inner { max-width: none; } @media screen and (min-width: 768px) { .bg-on-text--center .link-text, .bg-on-text--center .heading-2 { text-align: center; } .bg-on-text--center .heading-2__deco { left: calc(50% - 25px); } } @media screen and (max-width: 1449px) { .bg-on-text--center { width: calc(100% - 200px); } } @media screen and (max-width: 1049px) { .bg-on-text--center { width: calc(100% - 100px); } } @media screen and (max-width: 767px) { .bg-on-text--center { width: calc(100% - 40px); max-width: 1050px; margin: 0 auto; } } /* center === */ /* === 全幅背景 */ .bg-on-text--button { padding: 100px 0 80px 0; } @media screen and (max-width: 767px) { .bg-on-text--button { padding: 60px 0 40px 0; } } @media screen and (max-width: 1049px) { .bg-on-text--button .bg-on-text__container { padding-left: 0; padding-right: 0; } } .section-bg-on-text .bg-on-text__inner .link-button--center { margin-left: auto; margin-right: auto; } @media screen and (min-width: 1050px) { .bg-on-text.bl-hover .link-button__anchor .link-button__anchor__icon.link-button__anchor__icon--before { transform: translateX(75%) translateY(-50%); opacity: 0; } .bg-on-text.bl-hover .link-button__anchor .link-button__anchor__icon.link-button__anchor__icon--after { transform: translateX(-50%) translateY(-50%); opacity: 1; } .bg-on-text.bl-hover .link-button--reverse .link-button__anchor .link-button-arrow-wrap:before { background-color: transparent; } } /* 全幅背景 === */ /* ========================================================================== 035_2column_img_h_txt_btn ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-2column_img_h_txt_btn { margin-top: 80px; margin-bottom: 45px; } @media screen and (max-width: 767px) { .section-2column_img_h_txt_btn { margin-top: 60px; margin-bottom: 30px; } } .section-2column_img_h_txt_btn__wrap--border { border: 1px solid #dbdbdb; padding: 45px; padding: 45px 40px; font-size: 20px; letter-spacing: .17em; line-height: 1.5; } @media screen and (max-width: 1049px) { .section-2column_img_h_txt_btn__wrap--border { padding: 40px 30px; } } @media screen and (max-width: 767px) { .section-2column_img_h_txt_btn__wrap--border { padding: 20px; } } .section-2column_img_h_txt_btn .columns:not(:first-child) { margin-top: 55px; } @media screen and (max-width: 767px) { .section-2column_img_h_txt_btn .columns:not(:first-child) { margin-top: 40px; } } /* ========================================================================== h2_btn_img_bg ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-h2_btn_img_bg { margin-top: 80px; margin-bottom: 80px; } @media screen and (max-width: 767px) { .section-h2_btn_img_bg { margin-top: 40px; margin-bottom: 40px; } } .h2_btn_img_bg { position: relative; box-sizing: border-box; } .h2_btn_img_bg:not(:first-child) { margin-top: 130px; } @media screen and (max-width: 1049px) { .h2_btn_img_bg:not(:first-child) { margin-top: 80px; } } @media screen and (max-width: 767px) { .h2_btn_img_bg:not(:first-child) { margin-top: 40px; } } .h2_btn_img_bg .figure { position: relative; width: calc(100% + 50px); } @media screen and (max-width: 1239px) { .h2_btn_img_bg .figure { width: 100%; } } .h2_btn_img_bg:nth-child(even) .figure { left: -50px; } @media screen and (max-width: 1239px) { .h2_btn_img_bg:nth-child(even) .figure { left: 0; } } .h2_btn_img_bg .figure.view--is-palmtop { margin-bottom: 20px; } .h2_btn_img_bg .figure::before { content: ""; display: block; position: absolute; top: 90px; width: 100%; height: calc(100% - 40px); background-color: #f7f7f7; } @media screen and (max-width: 1049px) { .h2_btn_img_bg .figure::before { top: 70px; height: calc(100% - 22px); } } @media screen and (max-width:767px) { .h2_btn_img_bg .figure::before { top: 155px; height: calc(100% - 26px); } } /* 背景色ありのスタイル */ .dnd-section-color--bg .h2_btn_img_bg .figure::before { background-color: #ffffff; } .h2_btn_img_bg:nth-child(odd) .figure::before { left: -100px; } @media screen and (max-width:767px) { .h2_btn_img_bg:nth-child(odd) .figure::before { left: -20px; } } .h2_btn_img_bg:nth-child(even) .figure::before { right: -100px; } @media screen and (max-width:767px) { .h2_btn_img_bg:nth-child(even) .figure::before { right: -20px; } } .h2_btn_img_bg .figure img { position: relative; z-index: 1; } .h2_btn_img_bg .columns { z-index: 1; } .h2_btn_img_bg .heading-2, .h2_btn_img_bg .paragraph, .h2_btn_img_bg .button { position: relative; z-index: 2; } .h2_btn_img_bg .heading-2:not(:first-child) { margin-top: 0; } .h2_btn_img_bg .columns--two .columns__column:first-child { z-index: 2; } @media screen and (min-width:415px) and (max-width:767px) { .h2_btn_img_bg .columns--two { max-width: 500px; } .h2_btn_img_bg:nth-child(even) .columns--two { margin-left: auto; } .h2_btn_img_bg .columns--two > .columns__column .view--is-palmtop { display: none !important; } .h2_btn_img_bg .columns--two > .columns__column.view--is-desktop-lower { display: block !important; } } @media screen and (max-width:767px) { .h2_btn_img_bg .columns--two { margin-left: 0; margin-right: 0 } .h2_btn_img_bg .columns--two > .columns__column { flex: auto; width: 100%; padding: 0; } .h2_btn_img_bg .columns--two > .columns__column:not(:first-child) { flex: auto; margin-top: 30px; } .h2_btn_img_bg .columns--two > .columns__column:not(:last-child) { flex: auto; margin-bottom: 0; } .h2_btn_img_bg .heading-2:not(:first-child) { margin-top: 25px; margin-bottom: 20px; } } .h2_btn_img_bg:nth-child(odd)::before { left: 0; } .h2_btn_img_bg:nth-child(even)::before { right: 0; } .h2_btn_img_bg:nth-child(even) .columns .columns__column:nth-child(1) { order: 2; } .h2_btn_img_bg:nth-child(even) .columns .columns__column:nth-child(2) { order: 1; } .h2_btn_img_bg .columns__column.view--is-desktop-lower { position: relative; } /* ========================================================================== slideimg ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-h2_btn_slider { margin-top: 80px; } @media screen and (max-width: 767px) { .section-h2_btn_slider { margin-top: 60px; } } .section-h2_btn_slider { margin-bottom: 80px; } @media screen and (max-width: 767px) { .section-h2_btn_slider { margin-bottom: 60px; } } .slideimg-wrap { counter-reset: number; } .slideimg { padding: 100px 0 80px; } @media screen and (max-width: 767px) { .slideimg { padding: 60px 0 60px; } } .slideimg:nth-child(even) { background-color: #ffffff; } .slideimg:nth-child(odd) { background-color: #f7f7f7; } .slideimg .container { max-width: 1350px!important; } .slideimg:nth-child(odd) .columns .columns__column:nth-child(1) { order: 2; } .slideimg:nth-child(odd) .columns .columns__column:nth-child(2) { order: 1; } @media screen and (max-width: 1049px) { .slideimg .columns { display: block; margin-left: 0; margin-right: 0; } .slideimg .columns .columns__column { padding-left: 0; padding-right: 0; width: 100%; } .slideimg:nth-child(odd) .columns .columns__column:nth-child(1) { order: 1; } .slideimg:nth-child(odd) .columns .columns__column:nth-child(2) { margin-top: 30px; order: 2; } .slideimg:nth-child(even) .columns .columns__column:nth-child(2) { margin-top: 30px; } } @media screen and (max-width: 767px) { .slideimg .columns { max-width: 450px; margin: 0 auto; } .slideimg:nth-child(odd) .columns .columns__column:nth-child(2) { margin-top: 25px; } .slideimg:nth-child(even) .columns .columns__column:nth-child(2) { margin-top: 20px; } } @media screen and (max-width: 1049px) { .slideimg .link-button { margin-left: auto; margin-right: auto; } } @media screen and (max-width: 767px) { .slideimg .link-button { margin-left: inherit; margin-right: inherit; } } .heading-2--point { position: relative; padding-top: 0; } @media screen and (max-width: 1049px) { .heading-2--point { padding-top: 0; } } @media screen and (max-width: 767px) { .heading-2--point { padding-top: 0; } } .heading-2.heading-2--point .heading-2__inner__main { position: relative; margin-top: 5px; } @media screen and (max-width: 767px) { .heading-2.heading-2--point .heading-2__inner__main { margin-top: 3px; } } .heading-2.heading-2--point .heading-2--point__decolation { display:block; overflow-wrap: break-word; counter-increment: number; color: #0d0d0d; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: 70px; line-height: 1; letter-spacing: .15em; position: relative; margin-top: -10px; } .heading-2.heading-2--point .heading-2--point__decolation:after { content: counter(number, decimal-leading-zero); } @media screen and (max-width: 1049px) { .heading-2.heading-2--point { text-align: center; margin-bottom: 30px; } .heading-2.heading-2--point .heading-2--point__decolation { left: 50%; transform: translateX(-50%); margin-top: 0; } } .heading-2.heading-2--point .heading-2__inner { margin-top: 5px; } @media screen and (max-width: 767px) { .heading-2.heading-2--point .heading-2__inner { margin-top: 3px; } } /* 2カラムテンプレート用の調整 */ @media screen and (min-width:1280px) and (max-width:1399px) { .content.content--twocolumn .heading-2.heading-2--point .heading-2--point__decolation { font-size: 60px; } } @media screen and (max-width: 767px) { .heading-2.heading-2--point { margin-bottom: 20px; } .heading-2.heading-2--point .heading-2--point__decolation { font-size: 30px; } } .slideimg:nth-child(odd) .heading-2.heading-2--point .heading-2--point__decolation { color: #ffffff; } .slideimg:nth-child(even) .heading-2.heading-2--point .heading-2--point__decolation { color: #f7f7f7; } @media screen and (max-width: 1049px) { .slideimg .button--default a { margin: 0 auto; } } @media screen and (max-width: 320px) { .slideimg .button--default a { margin-left: 20px; } } .slideimg .slideimg_slick.slick-dotted { padding-bottom: 40px; margin-bottom: 0; } .slideimg .slideimg_slick img { width: 100% } .slideimg .slick-prev, .slideimg .slick-next { padding: 0px; font-size: 0px; line-height: 0; position: absolute; transform: none; cursor: pointer; border: 0px; outline: 0px; width: 40px; height: 40px; background-color: #222222; top: inherit; bottom: 0; background-position: center; background-size: 6px 8px; background-repeat: no-repeat; z-index: 5; transition: .5s; } .slideimg .slick-prev { left: 0; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImFycm93X3doaXRlXyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IgoJIHk9IjBweCIgdmlld0JveD0iMCAwIDYgOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNiA4OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGlkPSJhcnJvdyIgY2xhc3M9InN0MCIgZD0iTTYsMEwyLDRsNCw0SDRMMCw0bDQtNEg2eiIvPgo8L3N2Zz4K"); } .slideimg .slick-next { right: inherit; left: 41px; background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYXJyb3dfd2hpdGVfIiBkYXRhLW5hbWU9ImFycm93KHdoaXRlKSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgNiA4Ij4KICA8cGF0aCBpZD0iYXJyb3ciIGQ9Ik0wLDgsNCw0LDAsMEgyTDYsNCwyLDhaIiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo="); } .slideimg .slick-prev:hover, .slideimg .slick-next:hover { background-color: #0d0d0d; } .slideimg .slick-dots { list-style: none; padding: 0px; text-align: right; z-index: 2; width: calc(100% - 100px); margin-left: 100px; position: absolute; bottom: 13px; } @media screen and (max-width: 767px) { .slideimg .slick-dots { bottom: 8px; } } .slideimg .slick-dots li { position: relative; display: inline-block; padding: 0px; cursor: pointer; margin: 0 10px; width: 5px; height: 5px; } .slideimg .slick-dots li:last-child { margin-right: 0; } .slideimg .slick-dots li button { font-size: 0; line-height: 0; display: block; border: 0; padding: 0; cursor: pointer; color: transparent; outline: 0; border-radius: 0; width: 3px; height: 3px; background-color: #0d0d0d; } .slick-dots li button:before { display: none; } .slideimg .slick-dots li button:hover, .slideimg .slick-dots li button:focus, .slideimg .slick-dots li.slick-active button { width: 5px; height: 5px; background-color: #0d0d0d; } @media screen and (max-width: 767px) { .slideimg .slideimg_slick.slick-dotted { padding-bottom: 30px; } .slideimg .slick-prev, .slideimg .slick-next { width: 30px; height: 30px; } .slideimg .slick-next { left: 31px; } .slideimg .slick-dots li { margin: 0 7.5px; } } .slick-slide.slideimg_slick__items { height: auto; } .dnd-section-color--bg .slideimg:nth-child(even) { background-color: #f7f7f7; } .dnd-section-color--bg .slideimg:nth-child(odd) { background-color: #ffffff; } .dnd-section-color--bg .slideimg:nth-child(odd) .heading-2.heading-2--point .heading-2--point__decolation { color: #f7f7f7; } .dnd-section-color--bg .slideimg:nth-child(even) .heading-2.heading-2--point .heading-2--point__decolation { color: #ffffff; } /* ========================================================================== ballon-columns ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-talk { margin-top: 55px; margin-bottom: 55px; overflow: hidden; } @media screen and (max-width: 767px) { .section-talk { margin-top: 40px; margin-bottom: 40px; } } .ballon-columns-wrapper:not(:last-child) { margin-bottom: 55px; } @media screen and (max-width: 767px) { .ballon-columns-wrapper:not(:last-child) { margin-bottom: 40px; } } .ballon-columns { display: flex; align-items: flex-start; position: relative; z-index: 1; padding-top: 40px; } @media screen and (max-width: 767px) { .ballon-columns { display: block; padding-top: 30px; } } .ballon-columns::before { content: ""; position: absolute; top: 0; z-index: 0; width: calc(100% + 200px); height: 230px; background-color: #f7f7f7; } @media screen and (min-width: 1500px) { .ballon-columns::before { width: calc(100% + 500px); } } @media screen and (max-width: 1049px) { .ballon-columns::before { height: 210px; } } @media screen and (max-width: 767px) { .ballon-columns::before { right: inherit; left: -20px; width: calc(60% + 50px); height: 100%; max-height: 560px; } } @media screen and (max-width: 414px) { .ballon-columns::before { width: 100%; } } /* 背景色ありのスタイル */ .dnd-section-color--bg .ballon-columns::before { background-color: #fff; } .ballon-columns-wrapper:nth-child(odd) .ballon-columns::before { right: -200px; } @media screen and (min-width: 1500px) { .ballon-columns-wrapper:nth-child(odd) .ballon-columns::before { right: -500px; } } .ballon-columns-wrapper:nth-child(even) .ballon-columns::before { left: -200px; } @media screen and (min-width: 1500px) { .ballon-columns-wrapper:nth-child(even) .ballon-columns::before { left: -500px; } } @media screen and (max-width: 767px) { .ballon-columns-wrapper:nth-child(even) .ballon-columns::before { right: -20px; left: inherit; } } .ballon-columns__content { position: relative; z-index: 1; box-sizing: border-box; width: calc(50% - 25px); padding: 0 50px; } @media screen and (max-width: 767px) { .ballon-columns__content { width: calc(60% + 50px); padding: 0; } } @media screen and (max-width: 414px) { .ballon-columns__content { width: 100%; } } @media screen and (max-width: 767px) { .ballon-columns__content .natural { padding-right: 20px; } } .ballon-columns .natural p { color: #0d0d0d; } .ballon-columns-wrapper:nth-child(even) .ballon-columns__content { order: 2; } @media screen and (max-width: 767px) { .ballon-columns-wrapper:nth-child(even) .ballon-columns__content { margin-left: auto; } .ballon-columns-wrapper:nth-child(even) .ballon-columns__content .natural { padding-right: 0; padding-left: 30px; } } .ballon-columns__content figure:not(:last-child) { margin-bottom: 20px; } .ballon-columns__ballon { position: relative; box-sizing: border-box; width: calc(50% + 25px); padding: 40px; border: 1px solid #dbdbdb; border-radius: 5px; background-color: #ffffff; } @media screen and (max-width: 767px) { .ballon-columns__ballon { width: 100%; max-width: 600px; margin-top: 35px; padding: 25px; } } .ballon-columns-wrapper:nth-child(even) .ballon-columns__ballon { order: 1; } .ballon-columns__ballon::before { content: ""; position: absolute; top: 42px; left: -17px; z-index: 1; width: 0; height: 0; border-color: transparent #ffffff transparent transparent; border-style: solid; border-width: 17px 17px 17px 0; } @media screen and (max-width: 767px) { .ballon-columns__ballon::before { top: -15px; left: 40px; border-color: transparent transparent #ffffff transparent; border-width: 0 15px 15px 15px; } } .ballon-columns-wrapper:nth-child(even) .ballon-columns__ballon::before { right: -17px; left: inherit; border-color: transparent transparent transparent #ffffff; border-width: 17px 0 17px 17px; } @media screen and (max-width: 767px) { .ballon-columns-wrapper:nth-child(even) .ballon-columns__ballon::before { top: -15px; right: 42px; border-color: transparent transparent #ffffff transparent; border-width: 0 15px 15px 15px; } } .ballon-columns__ballon::after { content: ""; position: absolute; top: 40px; left: -19px; z-index: 0; width: 0; height: 0; border-color: transparent #dbdbdb transparent transparent; border-style: solid; border-width: 19px 19px 19px 0; } @media screen and (max-width: 767px) { .ballon-columns__ballon::after { top: -17px; left: 38px; border-color: transparent transparent #dbdbdb transparent; border-width: 0 17px 17px 17px; } } .ballon-columns-wrapper:nth-child(even) .ballon-columns__ballon::after { right: -19px; left: inherit; border-color: transparent transparent transparent #dbdbdb; border-width: 19px 0 19px 19px; } @media screen and (max-width: 767px) { .ballon-columns-wrapper:nth-child(even) .ballon-columns__ballon::after { top: -17px; right: 40px; border-color: transparent transparent #dbdbdb transparent; border-width: 0 17px 17px 17px; } } /* ========================================================================== check-list-columns ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-h2_check_img { margin-top: 80px; } @media screen and (max-width: 767px) { .section-h2_check_img { margin-top: 60px; } } .section-h2_check_img { margin-bottom: 55px; } @media screen and (max-width: 767px) { .section-h2_check_img { margin-bottom: 40px; } } .check-list-columns { margin-left: -25px; margin-right: -25px; } @media screen and (max-width: 767px) { .check-list-columns { margin-left: 0; margin-right: 0; } } .check-list-columns:not(:first-child) { margin-top: 45px; } @media screen and (max-width: 767px) { .check-list-columns:not(:first-child) { margin-top: 25px; } } .check-list-columns > .columns__column { padding-left: 25px; padding-right: 25px; } @media screen and (max-width: 767px) { .check-list-columns > .columns__column { padding-left: 0; padding-right: 0; } } .check-list:not(:last-child) { margin-bottom: 20px; } .check-list .check-list__item { font-size: 17px; font-weight: 500; letter-spacing: .17em; line-height: 2; padding-left: 30px; position: relative; } @media screen and (max-width: 767px) { .check-list .check-list__item { font-size: 15px; } } .check-list .check-list__item:not(:last-child) { margin-bottom: 10px; } .check-list .check-list__item .check-list__item__icon { height: 20px; left: 0; position: absolute; top: 7px; width: 20px; } @media screen and (max-width: 767px) { .check-list .check-list__item .check-list__item__icon { height: 18px; top: 6px; width: 18px; } } .check-list .check-list__item .check-list__item__icon__path { fill: #0d0d0d; } /* ========================================================================== illust_column ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-h3_check_img { margin-top: 55px; } @media screen and (max-width: 767px) { .section-h3_check_img { margin-top: 40px; } } .section-h3_check_img { margin-bottom: 40px; } @media screen and (max-width: 767px) { .section-h3_check_img { margin-bottom: 30px; } } .illust_column { position: relative; } .illust_column__image { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: calc(50% - 50px); } .illust_column__image img { width: 100%; } @media screen and (max-width: 1049px) { .illust_column__image { display: block; margin-left: auto; margin-right: auto; max-width: 550px; position: static; transform: inherit; width: 100%; } } @media screen and (max-width: 767px) { .illust_column__image { max-width: 450px; } } .illust_column__inner { box-sizing: border-box; padding: 0 50px 0 100px; position: relative; width: calc(50% + 50px); } @media screen and (max-width: 1049px) { .illust_column__inner { padding: 0 50px; width: 100%; } } @media screen and (max-width: 767px) { .illust_column__inner { padding: 0 20px; } } @media screen and (max-width: 1049px) { .illust_column .natural { margin-bottom: 24px; } } @media screen and (max-width: 767px) { .illust_column .natural { margin-bottom: 15px; } } /* ========================================================================== square_column1 ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .square_column1 { padding: 90px 0; position: relative; } @media screen and (max-width: 1049px) { .square_column1 { padding: 30px 0; } } @media screen and (max-width: 767px) { .square_column1 { padding: 120px 0 0 0; } .square_column1:not(:last-child) { margin-bottom: 60px; } } .square_column1 .square_column1__bg { position: absolute; top: 0; width: 50%; height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (max-width: 767px) { .square_column1 .square_column1__bg { width: calc(50% + 100px); height: calc(100% - 40px); } } @media screen and (max-width: 414px) { .square_column1 .square_column1__bg { width: calc(100% - 20px); max-height: 237px; } } .square_column1:nth-child(odd) .square_column1__bg { right: 0; } .square_column1:nth-child(even) .square_column1__bg { left: 0; } .square_column1 > .square_column1__inner { box-sizing: border-box; position: relative; z-index: 0; width: calc(50% + 150px); padding: 50px 100px; background-color: #ffffff; } /* 背景色ありのスタイル */ .dnd-section-color--bg .square_column1 > .square_column1__inner { background-color: #f7f7f7; } @media screen and (max-width: 1049px) { .square_column1 > .square_column1__inner { width: calc(50% + 200px); padding: 50px; } } @media screen and (max-width: 767px) { .square_column1 > .square_column1__inner { width: calc(100% - 20px); padding: 50px 30px 0 20px; } } .square_column1:nth-child(even) .square_column1__inner { margin-left: auto; } @media screen and (max-width: 767px) { .square_column1 .square_column1__inner .button--default a { margin: 0; } } /* ========================================================================== link-arrow-columns ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .link-arrow-columns { display: flex; } .link-arrow-columns:not(:first-child), .section-2column_ttl_bgimg { margin-top: 80px; } @media screen and (max-width: 767px) { .link-arrow-columns:not(:first-child), .section-2column_ttl_bgimg { margin-top: 60px; } } .link-arrow-columns:not(:last-child), .section-2column_ttl_bgimg { margin-bottom: 80px; } @media screen and (max-width: 767px) { .link-arrow-columns:not(:last-child), .section-2column_ttl_bgimg { margin-bottom: 60px; } } .link-arrow-columns__item { width: 50%; background-repeat: no-repeat; background-size: cover; background-position: center; } .link-arrow-columns__item a { display: block; box-sizing: border-box; position: relative; padding: 73px 100px; height: 100%; color: #ffffff; } @media screen and (max-width: 1049px) { .link-arrow-columns__item a { padding: 48px 20px; } } .link-arrow-columns__item a:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: #0d0d0d; transition: .5s; transition-timing-function: ease-in; opacity: .3; } .link-arrow-columns__item a:hover:after { opacity: .5; } .link-arrow-columns__item__heading { box-sizing: border-box; display: block; position: relative; z-index: 1; font-size: 2.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; text-align: center; } @media screen and (max-width: 767px) { .link-arrow-columns__item__heading { font-size: 1.8rem; } } .link-arrow-columns__item__heading::after { content: attr(data-link-arrow-columns); display: block; margin-top: 10px; font-family: 'Barlow', sans-serif; font-size: 1.4rem; letter-spacing: .2em; line-height: 1.5; text-align: center; text-transform: uppercase; } @media screen and (max-width: 767px) { .link-arrow-columns__item__heading::after { font-size: 1.1rem; } } .link-arrow-columns__item__button { display: block; position: relative; z-index: 1; width: 28px; height: 28px; margin-top: 30px; margin-right: auto; margin-left: auto; border-radius: 100%; background-color: #ffffff; } @media screen and (max-width: 767px) { .link-arrow-columns__item__button { width: 24px; height: 24px; margin-top: 20px; } } .link-arrow-columns__item__button__icon { position: absolute; top: calc(50% - 4px); left: 12px; width: 6px; height: 8px; transition: .5s; } @media screen and (max-width: 767px) { .link-arrow-columns__item__button__icon { top: calc(50% - 3px); left: 10px; width: 5px; height: 6px; transition: .5s; } } .link-arrow-columns__item__button__icon__path { fill: #222222; } /* ========================================================================== 2column_ttl_bgimg_bgband ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-2column_ttl_bgimg_bgband { position: relative; margin-top: 80px; margin-bottom: 80px; padding-bottom: 60px; } @media screen and (max-width: 767px) { .section-2column_ttl_bgimg_bgband { margin-top: 60px; margin-bottom: 60px; padding-bottom: 50px; } } .section-2column_ttl_bgimg_bgband:before { content: ""; display: block; width: 100%; height: 207px; background-color: #222222; position: absolute; bottom: 0; left: 0; } .bg-on-text-wrap--two { display: flex; justify-content: center; } @media screen and (max-width: 767px) { .bg-on-text-wrap--two:after { height: 50px; } } .bg-on-text-wrap--two .bg-on-text { display: flex; justify-content: center; align-items: center; width: calc(50% - 1px); max-width: 524px; margin: 0; padding: 40px 0; min-height: 290px; margin-left: 100px; } .bg-on-text-wrap--two .bg-on-text:last-child { margin-left: 2px; margin-right: 100px; } .bg-on-text-wrap--two .bg-on-text:after { position: absolute; background-color: #0d0d0d; content: ""; left: 15px; top: 15px; height: calc(100% - 30px); width: calc(100% - 30px); transition: .5s; opacity: 0; } .bg-on-text-wrap--two .bg-on-text__container { padding-left: 20px; padding-right: 20px; } .bg-on-text-wrap--two .bg-on-text__inner { padding-bottom: 0; } .bg-on-text-wrap--two .bg-on-text__inner .heading-2 { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .bg-on-text-wrap--two .bg-on-text__inner .heading-2:not(:last-child) { margin-bottom: 0; } .bg-on-text-wrap--two .hov-area { box-sizing: border-box; padding: 0 40px; position: relative; width: 100%; transition: .5s; opacity: 0; z-index: 2; } .bg-on-text-wrap--two .hov-area .bg-on-text__button { position: relative; bottom: auto; left: auto; } .bg-on-text-wrap--two .hov-area .bg-on-text__button .link-text__anchor:hover { color: #ffffff; } .bg-on-text-wrap--two .hov-area .bg-on-text__button .link-text__anchor:hover .link-text__anchor__icon__arrow { fill: #ffffff; } .bg-on-text-wrap--two .bg-on-text.bl-hover:after { opacity: .5; } .bg-on-text-wrap--two .bg-on-text.bl-hover .hov-area { opacity: 1; } @media screen and (max-width: 1049px) { .bg-on-text-wrap--two .bg-on-text { margin-left: 50px; padding: 0 20px; min-height: 260px; } .bg-on-text-wrap--two .bg-on-text:last-child { margin-right: 50px; } .bg-on-text-wrap--two .bg-on-text__container { padding-left: 0; padding-right: 0; } .bg-on-text-wrap--two .hov-area { display: none; } .bg-on-text-wrap--two .bg-on-text__inner .heading-2 { width: 100%; position: relative; top: auto; left: auto; transform: translate(0, 0); } } @media screen and (max-width: 767px) { .bg-on-text-wrap--two .bg-on-text { margin-left: 0; } .bg-on-text-wrap--two .bg-on-text:last-child { margin-right: 0; } } /* ========================================================================== h3_img_alternate_bg ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-h3_img_alternate_bg { margin-top: 80px; } @media screen and (max-width: 767px) { .section-h3_img_alternate_bg { margin-top: 60px; } } .section-h3_img_alternate_bg { margin-bottom: 80px; } @media screen and (max-width: 767px) { .section-h3_img_alternate_bg { margin-bottom: 60px; } } .heading-2.heading-2--h3_img_alternate_bg .heading-2__deco { text-transform: uppercase; font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 70px; letter-spacing: .15em; color: #0d0d0d; margin-bottom: -45px; opacity: .1; } @media screen and (max-width: 767px) { .heading-2.heading-2--h3_img_alternate_bg .heading-2__deco { font-size: 30px; margin-bottom: -20px; } } .h3_img_alternate_bg { margin-top: 50px; } @media screen and (max-width: 767px) { .h3_img_alternate_bg { margin-top: 30px; } } .h3_img_alternate_bg .h3_img_alternate_bg__columns { display: flex; flex-wrap: wrap; position: relative; } .h3_img_alternate_bg .h3_img_alternate_bg__columns:before { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: #f7f7f7; opacity: .5; } /* 背景色ありのスタイル */ .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns:before { background-color: #ffffff } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column { box-sizing: border-box; position: relative; width: 50%; padding: 70px 50px; overflow: hidden; } @media screen and (max-width: 1049px) { .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column { padding: 70px 30px; } } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:first-child, .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n), .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n+1) { background-color: #f7f7f7; } /* 背景色ありのスタイル */ .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:first-child, .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n), .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n+1) { background-color: #ffffff } @media screen and (max-width: 767px) { .h3_img_alternate_bg .h3_img_alternate_bg__columns { display: block; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column { width: 100%; padding: 40px 30px; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:first-child, .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n), .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n+1) { background: inherit; } /* 背景色ありのスタイル */ .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:first-child, .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n), .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(4n+1) { background: inherit; } /* 背景色ありのスタイル */ .dnd-section-color--bg .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(odd) { background-color: #ffffff; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(odd) { background-color: #f7f7f7; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column:nth-child(even) { background-color: inherit; } } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column .h3_img_alternate_bg__columns__column__inner { max-width: 525px; margin: 0 auto; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column .h3_img_alternate_bg__columns__column__inner .figure:not(:last-child) { margin-top: 30px; margin-bottom: 35px; } @media screen and (max-width: 767px) { .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column .h3_img_alternate_bg__columns__column__inner .figure:not(:last-child) { margin-top: 20px; margin-bottom: 20px; } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column .h3_img_alternate_bg__columns__column__inner .figure { max-width: 450px; margin: 0 auto; } } .h3_img_alternate_bg .h3_img_alternate_bg__columns .h3_img_alternate_bg__columns__column .h3_img_alternate_bg__columns__column__inner .natural { margin-top: 30px; } /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-3_4column_img_h_txt_btn { margin-top: 55px; margin-bottom: 55px; } @media screen and (max-width: 767px) { .section-3_4column_img_h_txt_btn { margin-top: 35px; margin-bottom: 35px; } } /* .columns--to-one.columns--three */ @media screen and (min-width: 768px) { .section-3_4column_img_h_txt_btn .columns.columns--to-one.columns--three { margin-left: -15px; margin-right: -15px; } .section-3_4column_img_h_txt_btn .columns.columns--to-one.columns--three .columns__column { padding-left: 15px; padding-right: 15px; } } @media screen and (max-width: 767px) { .section-3_4column_img_h_txt_btn .columns--to-one.columns--three > .columns__column { padding-left: 0; padding-right: 0; } } .section-3_4column_img_h_txt_btn .figure img { vertical-align: bottom; } .section-3_4column_img_h_txt_btn .columns__column__inner.columns__column__inner--bg { padding: 30px; background-color: #f7f7f7; } @media screen and (max-width:1049px) { .section-3_4column_img_h_txt_btn .columns__column__inner.columns__column__inner--bg { padding: 25px 20px; } } /* 背景色ありのスタイル */ .dnd-section-color--bg .section-3_4column_img_h_txt_btn .columns__column__inner.columns__column__inner--bg { background-color: #fff; } /* columns--four 2カラムテンプレート用の調整 */ @media screen and (min-width:1280px) and (max-width:1599px) { .content.content--twocolumn .section-3_4column_img_h_txt_btn .columns--four>.columns__column { width: 50%; } .content.content--twocolumn .section-3_4column_img_h_txt_btn .columns--four>.columns__column:nth-child(n+3) { margin-top: 50px; } } /* ========================================================================== relation-link ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-3column_h2_link_txt_bgimg { margin-top: 45px; margin-bottom: 45px; } @media screen and (max-width: 767px) { .section-3column_h2_link_txt_bgimg { margin-top: 30px; margin-bottom: 30px; } } .relation-link .heading-2 { margin-bottom: 30px; } @media screen and (max-width: 767px) { .relation-link .heading-2 { margin-bottom: 25px; } } .relation-link .bg_img-columns--three { display: flex; flex-wrap: wrap; } @media screen and (max-width: 767px) { .relation-link .bg_img-columns--three { display: block; } } .relation-link .bg_img-columns--three .bg_img-columns__column { box-sizing: border-box; position: relative; width: 33.333%; background-position: center; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 767px) { .relation-link .bg_img-columns--three .bg_img-columns__column { width: 100%; } } .relation-link .bg_img-columns--three .bg_img-columns__column::before { content: ""; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; background-color: #0d0d0d; transition: .5s; opacity: .3; } @media screen and (min-width: 1050px) { .relation-link .bg_img-columns--three .bg_img-columns__column.bl-hover::before { background-color: #0d0d0d; opacity: .6; } } .relation-link .bg_img-columns--three .bg_img-columns__column .heading-link a::before { background-color: #ffffff; } .relation-link .bg_img-columns--three .bg_img-columns__column .heading-link a .heading-link__icon__path { fill: #0d0d0d; } .relation-link .bg_img-columns--three .bg_img-columns__column .heading-3 { position: relative; } @media screen and (max-width: 1049px) { .relation-link .bg_img-columns--three .bg_img-columns__column .heading-3:not(:last-child) { margin-bottom: 25px; } } @media screen and (max-width: 767px) { .relation-link .bg_img-columns--three .bg_img-columns__column .heading-3:not(:last-child) { margin-bottom: 15px; } } .relation-link .bg_img-columns--three .bg_img-columns__column .heading-link__inner { color: #ffffff; } .relation-link .bg_img-columns--three .bg_img-columns__column .natural p, .relation-link .bg_img-columns--three .bg_img-columns__column .paragraph { position: relative; z-index: 1; color: #ffffff; } /* .relation-link--1 */ .section-3column_h2_link_txt_bgimg .relation-link--1.bg_img-columns__column { padding: 60px 55px 80px; } @media screen and (max-width: 1449px) { .section-3column_h2_link_txt_bgimg .relation-link--1.bg_img-columns__column { padding: 60px 40px; } } @media screen and (max-width: 1049px) { .section-3column_h2_link_txt_bgimg .relation-link--1.bg_img-columns__column { padding: 50px 40px; } } @media screen and (max-width: 767px) { .section-3column_h2_link_txt_bgimg .relation-link--1.bg_img-columns__column { padding: 40px 20px 50px 20px; } } /* .relation-link--2 */ .section-3column_h2_link_txt_bgimg .relation-link--2.bg_img-columns__column { padding: 70px 80px; } @media screen and (max-width: 1049px) { .section-3column_h2_link_txt_bgimg .relation-link--2.bg_img-columns__column { padding: 70px 20px; } } @media screen and (max-width: 767px) { .section-3column_h2_link_txt_bgimg .relation-link--2.bg_img-columns__column { padding: 50px 35px; } } @media screen and (max-width: 414px) { .section-3column_h2_link_txt_bgimg .relation-link--2.bg_img-columns__column { padding: 50px 20px; } } .section-3column_h2_link_txt_bgimg .relation-link--2 .bg_img-columns__column__inner { display: table; width: 100%; height: 100%; } .section-3column_h2_link_txt_bgimg .relation-link--2 .bg_img-columns__column__inner .heading-3 { display: table-cell; text-align: center; vertical-align: middle; } .section-3column_h2_link_txt_bgimg .relation-link--2 .heading-link a { padding-bottom: 40px; padding-left: 0; } .section-3column_h2_link_txt_bgimg .relation-link--2 .heading-link a::before { top: inherit; bottom: 0; left: calc(50% - 14px); } @media screen and (max-width: 767px) { .section-3column_h2_link_txt_bgimg .relation-link--2 .heading-link a::before { left: calc(50% - 12px); } } .section-3column_h2_link_txt_bgimg .relation-link--2 .heading-link .heading-link__icon { top: inherit; bottom: 10px; left: calc(50% - 2px); } @media screen and (max-width: 767px) { .section-3column_h2_link_txt_bgimg .relation-link--2 .heading-link .heading-link__icon { bottom: 9px; left: calc(50% - 3px); } } /* ========================================================================== icon-list ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-3column_icon_txt_link { margin-top: 30px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .section-3column_icon_txt_link { margin-top: 40px; margin-bottom: 40px; } } .section-3column_icon_txt_link:first-child { margin-top: 0; } .section-3column_icon_txt_link:last-child { margin-bottom: 0; } .icon-list { display: flex; flex-wrap: wrap; counter-reset: number; } .icon-list__item { box-sizing: border-box; position: relative; z-index: 0; width: calc(33.3333% - 20px); padding: 30px 20px; border-radius: 3px; background: #f7f7f7; transition: .5s; } /* 背景色ありのスタイル */ .dnd-section-color--bg .icon-list__item { background: #fff; } @media screen and (min-width: 1050px) { .icon-list__item.bl-hover { background: #0d0d0d; } } @media screen and (max-width: 1049px) and (min-width: 768px) { .icon-list__item { width: calc(50% - 12.5px); } .icon-list__item:nth-child(odd) { margin-right: 25px; } .icon-list__item:nth-child(n+3) { margin-top: 30px; } } @media screen and (max-width: 767px) { .icon-list__item { width: 100%; padding: 25px 20px; } .icon-list__item:not(:last-child) { margin-bottom: 20px; } } @media screen and (min-width: 1050px) { .icon-list__item:not(:nth-child(3n+3)) { margin-right: 30px; } .icon-list__item:nth-child(n+4) { margin-top: 30px; } } .icon-list__item__title { display: flex; align-items: center; } .icon-list__item__title:not(:last-child) { margin-bottom: 20px; } .icon-list__item__title__icon { width: 60px; margin-right: 15px; } .icon-list__item__title__icon__src { display: block; position: absolute; max-width: 60px; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; transition: .5s; } .icon-list__item .icon-list__item__title__icon__src--hover { opacity: 0; } .icon-list__item.bl-hover .icon-list__item__title__icon__src { opacity: 0; } .icon-list__item.bl-hover .icon-list__item__title__icon__src--hover { opacity: 1; } .icon-list__item__title__text { width: calc(100% - 75px); font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (max-width: 767px) { .icon-list__item__title__text { font-size: 1.6rem; } } .icon-list__item__title__text a { color: #0d0d0d; text-decoration: none; transition: .5s; } .icon-list__item .paragraph { transition: .5s; } .icon-list__item.bl-hover .icon-list__item__title__text, .icon-list__item.bl-hover .icon-list__item__title__text a, .icon-list__item.bl-hover .paragraph { color: #ffffff; } /* ========================================================================== point ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-point_h2_h3_bg { margin-top: 55px; margin-bottom: 55px; } @media screen and (max-width: 767px) { .section-point_h2_h3_bg { margin-top: 30px; margin-bottom: 30px; } } .point { counter-reset: number; } .point .point-columns { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } @media screen and (max-width: 1049px) { .point .point-columns { margin-right: 0; margin-left: 0; } } @media screen and (max-width: 767px) { .point .point-columns .point-columns__column:not(:first-child) { margin-top: 20px; } } .point .point-columns .point-columns__column { box-sizing: border-box; width: 33.333%; padding-right: 15px; padding-left: 15px; } @media screen and (max-width: 1049px) { .point .point-columns .point-columns__column { flex: auto; width: 100%; padding: 0; } .point .point-columns .point-columns__column:not(:first-child) { flex: auto; margin-top: 30px; } } @media screen and (max-width: 767px) { .point .point-columns .point-columns__column:not(:first-child) { margin-top: 20px; } } @media screen and (min-width: 1050px) { .point .point-columns .point-columns__column:nth-child(n+4) { margin-top: 30px; } } .point .point-columns .point-columns__column .point-columns__column__inner { box-sizing: border-box; position: relative; height: 100%; padding: 45px 30px 40px; background-color: #f7f7f7; } /* 背景色ありのスタイル */ .dnd-section-color--bg .point .point-columns .point-columns__column .point-columns__column__inner { background-color: #fff; } @media screen and (max-width: 767px) { .point .point-columns .point-columns__column .point-columns__column__inner { padding: 30px 20px; } } .point .point-columns .point-columns__column .point-columns__column__inner::before { content: ""; display: inline-block; position: absolute; top: 0; left: calc(50% - 20px); width: 40px; height: 7px; background-color: #ffffff; } /* 背景色ありのスタイル */ .dnd-section-color--bg .point .point-columns .point-columns__column .point-columns__column__inner:before { background-color: #f7f7f7; } @media screen and (max-width: 767px) { .point .point-columns .point-columns__column .point-columns__column__inner:before { height: 5px; } } .point .heading-3.heading-3--point { margin-bottom: 16px; text-align: center; } @media screen and (min-width: 768px) { .point .heading-3.heading-3--point { margin-bottom: 20px; } } .point .heading-3.heading-3--point::before { content: none; } .point .heading-3.heading-3--point .heading-3--point__main { display: block; } .point .heading-3.heading-3--point .heading-3--point__decolation { display: block; position: relative; top: 0; width: auto; margin-bottom: 10px; padding-bottom: 10px; color: #0d0d0d; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: 600; letter-spacing: .2em; line-height: 1.5; } .point .heading-3.heading-3--point .heading-3--point__decolation::before { content: ""; display: inline-block; position: absolute; bottom: 0; left: calc(50% - 5px); width: 10px; height: 2px; background-color: #808080; } .point .heading-3.heading-3--point .heading-3--point__decolation::after { counter-increment: number; content: counter(number, decimal-leading-zero); } @media screen and (max-width: 767px) { .point .heading-3.heading-3--point .heading-3--point__decolation { font-size: 1.1rem; } } .section-point_h2_h3_bg .figure.point-columns__figure { max-width: 350px; margin: 20px auto 16px; } @media screen and (min-width: 768px) { .section-point_h2_h3_bg .figure.point-columns__figure { margin-bottom: 20px; } } /* ========================================================================== reason-column ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-3column_h2_link_bg { margin-top: 45px; } @media screen and (max-width: 767px) { .section-3column_h2_link_bg { margin-top: 30px; } } .section-3column_h2_link_bg { margin-bottom: 45px; } @media screen and (max-width: 767px) { .section-3column_h2_link_bg { margin-bottom: 30px; } } @media screen and (max-width: 767px) { .reason-column .columns { max-width: 500px; } .reason-column .columns--three>.columns__column:not(:first-child) { margin-top: 40px; } } .reason-column .heading-3:not(:first-child) { margin-top: 25px; } @media screen and (max-width: 767px) { .reason-column .heading-3:not(:first-child) { margin-top: 20px; } } .relation-columns { display: flex; flex-wrap: wrap; margin-right: -20px; margin-left: -20px; } .relation-columns .relation-columns__column { box-sizing: border-box; width: 33.333%; padding-right: 20px; padding-left: 20px; } .relation-columns .relation-columns__column:nth-child(n+4) { margin-top: 30px; } .relation-columns .heading-link a { padding-top: 5px; font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } .relation-columns .heading-link a:hover, .relation-columns .heading-link a:hover:before { color: #0d0d0d; } @media screen and (max-width: 767px) { .relation-columns { margin-right: 0; margin-left: 0; } .relation-columns .relation-columns__column { width: 100%; padding-right: 0; padding-left: 0; } .relation-columns .relation-columns__column:nth-child(n+4) { margin-top: 20px; } .relation-columns .relation-columns__column:not(:first-child) { margin-top: 20px; } .relation-columns .heading-link a { padding-top: 4px; padding-left: 35px; font-size: 1.5rem; } } /* ========================================================================== point-list ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-point { margin-top: 45px; margin-bottom: 45px; } @media screen and (max-width: 767px) { .section-point { margin-top: 30px; margin-bottom: 30px; } } .point-list { counter-reset: number; display: flex; flex-wrap: wrap; } @media screen and (max-width: 1049px) { .point-list { display: block; } } .point-list__item { box-sizing: border-box; position: relative; width: calc(33.3333% - 30px); padding: 55px 30px 40px; border: 1px solid #dbdbdb; } /* 2カラムテンプレート用の調整 */ @media screen and (min-width:1280px) and (max-width:1399px) { .content.content--twocolumn .point-list__item { width: calc(33.3333% - 20px); } } @media screen and (max-width: 1049px) { .point-list__item { width: 100%; } .point-list__item:not(:last-child) { margin-bottom: 30px; } } @media screen and (max-width: 767px) { .point-list__item { padding: 45px 20px 30px 20px; } .point-list__item:not(:last-child) { margin-bottom: 20px; } } @media screen and (min-width: 1050px) { .point-list__item:not(:nth-child(3n+3)) { margin-right: 30px; } .point-list__item:nth-child(n+4) { margin-top: 40px; } } /* 2カラムテンプレート用の調整 */ @media screen and (min-width:1280px) and (max-width:1399px) { .content.content--twocolumn .point-list__item:not(:nth-child(3n+3)) { margin-right: 20px; } } .point-list__item::before { content: ""; display: block; position: absolute; top: 0; left: 50%; width: 107px; height: 3px; background-color: #0d0d0d; transform: translateX(-50%); } @media screen and (max-width: 767px) { .point-list__item::before { width: 86px; } } .point-list__item .point-list__item__decolation { content: attr(data-english); position: absolute; top: -1px; left: 50%; padding-top: 18px; padding-right: 25px; color: #0d0d0d; font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .2em; line-height: 1; transform: translateX(-50%); } @media screen and (max-width: 767px) { .point-list__item .point-list__item__decolation { padding-top: 10px; padding-right: 20px; padding-left: 10px; font-size: 1.1rem; } } .point-list__item:nth-child(n+10) .point-list__item__decolation { padding-right: 50px; } @media screen and (max-width: 767px) { .point-list__item:nth-child(n+10) .point-list__item__decolation { padding-right: 35px; } } .point-list__item .point-list__item__decolation::after { content: counter(number); counter-increment: number; position: absolute; top: 13px; right: 0; color: #0d0d0d; font-family: 'Barlow', sans-serif; font-size: 3.0rem; font-weight: 500; line-height: 1; } @media screen and (max-width: 767px) { .point-list__item .point-list__item__decolation::after { font-size: 2.0rem; top: 8px; } } .point-list__item .natural:not(:first-child) { margin-top: 0; } /* paragraph */ .section-point .paragraph:not(:first-child) { margin-top: 0; } /* figure */ .section-point .figure.point-list__figure { max-width: 350px; margin: 0 auto 15px; } @charset "UTF-8"; /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ /* history */ .section-history { margin-top: 60px; margin-bottom: 60px; } @media screen and (max-width: 767px) { .section-history { margin-top: 40px; margin-bottom: 40px; } } .history { position: relative; padding-top: 30px; padding-bottom: 30px; padding-left: 55px; } @media screen and (max-width: 767px) { .history { padding-top: 20px; padding-bottom: 20px; padding-left: 35px; } } .history::before { content: ""; position: absolute; left: 7.5px; top: 0; width: 2px; height: 100%; background-color: #dbdbdb } @media screen and (max-width: 767px) { .history::before { left: 6.5px; } } .heading-3-history { position: relative; color: #0d0d0d; font-size: 2.4rem; } .heading-3-history::before { content: ""; position: absolute; left: -54.5px; top: 17px; width: 15px; height: 15px; border-radius: 100%; background-color: #0d0d0d; } @media screen and (max-width: 767px) { .heading-3-history::before { top: 17px; left: -35.5px; } } @media screen and (min-width: 768px) { .history-columns { display: flex; align-items: flex-start; } } .history-columns:not(:first-child) { margin-top: 30px; } @media screen and (max-width: 767px) { .history-columns:not(:first-child) { margin-top: 20px; } } .history-columns__column:first-child { width: 100%; } @media screen and (min-width: 768px) { .history-columns__column:first-child { width: 220px; margin-right: 30px; } } @media screen and (max-width: 767px) { .history-columns__column:first-child { margin-bottom: 5px; } } @media screen and (min-width: 768px) { .history-columns__column:last-child { width: calc(100% - 250px); } } .history-columns__column.history-columns__column--single { width: 100%; } .history-columns__column img { width: 100%; height: 100%; max-width: 100%; } /* blog */ @charset "UTF-8"; /* blog post author */ .blog-article__body__author { margin-top: 45px; margin-bottom: 45px; padding-bottom: 25px; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .blog-article__body__author { margin-top: 60px; margin-bottom: 60px; padding-bottom: 35px; } } .blog-article__body__author__heading.heading-2 { margin-bottom: 25px; padding: 11px 20px; border-bottom: 1px solid #dbdbdb; background-color: #f7f7f7; font-size: 1.7rem; } @media screen and (min-width: 768px) { .blog-article__body__author__heading.heading-2 { margin-bottom: 35px; padding: 13px 23px; font-size: 2.0rem; } } .blog-article__body__author__wrapper { display: flex; align-items: flex-start; justify-content: space-between; } .blog-article__body__author__image { width: 100px; height: 100px; margin-right: 20px; } .blog-article__body__author__image img { width: 100px; height: 100px; object-fit: cover; } @media screen and (min-width: 768px) { .blog-article__body__author__image { width: 210px; height: 210px; margin-right: 40px; } .blog-article__body__author__image img { width: 210px; height: 210px; } } .blog-article__body__author__content__name.heading-3 { margin-bottom: 10px; font-size: 1.8rem; } @media screen and (min-width: 768px) { .blog-article__body__author__content__name.heading-3 { margin-bottom: 14px; font-size: 2.5rem; } } @media screen and (min-width: 768px) { .blog-article__body__author__content__profile { font-size: 1.4rem; } } @charset "UTF-8"; /* blog post author */ .blog-article__body__lead { margin-top: 40px; margin-bottom: 40px; } @media screen and (min-width: 768px) { .blog-article__body__lead { margin-top: 60px; margin-bottom: 60px; } } .blog-article__body__lead__text { font-weight: 400; } @media screen and (min-width: 768px) { .blog-article__body__lead__text { font-size: 1.6rem; } } @charset "UTF-8"; /* blog post index */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .blog-article__body__index { position: relative; z-index: 0; margin-top: 56px; margin-bottom: 45px; border: 2px solid #dbdbdb; border-radius: 5px; padding: 36px 20px 32px; } @media screen and (min-width: 768px) { .blog-article__body__index { margin-top: 74px; margin-bottom: 60px; padding: 35px 35px 38px; } } .blog-article__body__index__title { position: absolute; top: -14px; left: 50%; z-index: 1; box-sizing: border-box; width: 130px; padding: 7px 0 6px; border-top: 2px solid #0d0d0d; border-radius: 0 0 5px 5px; background-color: #f7f7f7; font-family: 'Barlow', sans-serif; font-size: 1.5rem; font-weight: 700; letter-spacing: .2em; text-align: center; transform: translateX(-50%); } @media screen and (min-width: 768px) { .blog-article__body__index__title { top: -18px; padding: 9px 0 8px; font-size: 1.6rem; } } .blog-article__body__index__body__list { counter-reset: number 0; } .blog-article__body__index__body__list__item { margin-top: calc( 22px - (((1em * 2) - 1em) / 2) ); padding-left: 2.3em; font-size: 1.5rem; letter-spacing: .1em; line-height: 2; text-indent: -2.3em; } .blog-article__body__index__body__list__item:first-of-type { margin-top: 0; } @media screen and (min-width: 768px) { .blog-article__body__index__body__list__item { font-size: 1.6rem; } } .blog-article__body__index__body__list__item::before { content: counter(number, decimal-leading-zero) "："; counter-increment: number 1; } .blog-article__body__index__body__list__item a { text-decoration: underline #0d0d0d; text-underline-offset: .5em; } @media screen and (min-width: 1050px) { .blog-article__body__index__body__list__item a { transition: color .5s; } .blog-article__body__index__body__list__item a:hover { color: #0d0d0d; } } @charset "UTF-8"; /* blog post share button */ .blog-article__body__share-button { display: flex; align-items: center; justify-content: flex-start; margin-top: 30px; margin-bottom: 45px; } @media screen and (min-width: 768px) { .blog-article__body__share-button { margin-top: 40px; margin-bottom: 60px; } } .blog-article__body__share-button__item { margin-left: 20px; } .blog-article__body__share-button__item:first-of-type { margin-left: 0; } @charset "UTF-8"; /* blog post related articles */ .blog-article__body__related-articles { margin-top: 55px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .blog-article__body__related-articles { margin-top: 80px; margin-bottom: 80px; } } @media screen and (min-width: 768px) { .blog-article__body__related-articles__list { display: flex; justify-content: space-between; } } .blog-article__body__related-articles__list__item { margin-top: 30px; } .blog-article__body__related-articles__list__item:first-of-type { margin-top: 0; } @media screen and (min-width: 768px) { .blog-article__body__related-articles__list__item { width: calc((100% - 60px) / 3); margin-top: 0; } } .blog-article__body__related-articles__list__item__image { margin-bottom: 11px; aspect-ratio: 16/9; } .blog-article__body__related-articles__list__item__image img { width: 100%; height: 100%; object-fit: cover; } .blog-article__body__related-articles__list__item__date { margin-top: 11px; margin-bottom: 6px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .2em; } @media screen and (min-width: 768px) { .blog-article__body__related-articles__list__item__date { margin-top: 15px; font-size: 1.4rem; } } .blog-article__body__related-articles__list__item__title { margin-top: 6px; font-size: 1.7rem; font-weight: 500; letter-spacing: .1em; line-height: 1.6; } @media screen and (min-width: 768px) { .blog-article__body__related-articles__list__item__title { font-size: 1.8rem; } } /* common */ @charset "UTF-8"; /* hero */ .hero__inner { box-sizing: border-box; padding-top: 30px; padding-bottom: 50px; border-bottom: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .hero__inner { min-height: 175px; padding-top: 50px; padding-bottom: 60px; } } @media screen and (min-width: 1280px) { .hero__inner { padding-top: 40px; } } .hero__heading { font-size: 2.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .hero__heading { font-size: 3.6rem; } } .hero--small .hero__heading { font-size: 1.8rem; } @media screen and (min-width: 768px) { .hero--small .hero__heading { font-size: 2.6rem; } } .hero__sub-heading { margin-top: 10px; color: #222222; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .hero__sub-heading { font-size: 1.6rem; } } .hero__tags { display: flex; flex-wrap: wrap; margin: 23.5px -2.5px -2.5px; } .hero__tags__item { margin: 2.5px; padding: 1.5px 8px 3.5px 8px; font-size: 1.1rem; letter-spacing: .1em; line-height: 1.2; color: #808080; border: 1px solid #808080; } @media screen and (min-width: 768px) { .hero__tags__item { font-size: 1.2rem; } } .hero__tags__item.hero__tags__item--black { color: #ffffff; border-color: #0d0d0d; background-color: #0d0d0d; } .hero__tags__item.hero__tags__item--gray { color: #ffffff; border-color: #808080; background-color: #808080; } .hero__tags__item.hero__tags__item--red { color: #ffffff; border-color: #c30000; background-color: #c30000; } .hero-minimal { position: relative; } .hero-minimal::after { content: none; } .hero-minimal__heading { padding-top: 55px; padding-bottom: 74px; font-size: 2.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; text-align: center; } @media screen and (min-width: 768px) { .hero-minimal__heading { padding-top: 74px; padding-bottom: 92px; font-size: 3.0rem; } } @media screen and (min-width: 1280px) { .hero-minimal__heading { padding-bottom: 80px; font-size: 4.0rem; } } .hero-minimal__heading::before { content: attr(data-decoration-text); display: block; margin-bottom: 13px; font-size: 1.5rem; font-weight: 400; letter-spacing: .2em; line-height: 1.2; text-transform: uppercase; } @media screen and (min-width: 768px) { .hero-minimal__heading::before { margin-bottom: 17px; font-size: 2.0rem; } } @media screen and (min-width: 1280px) { .hero-minimal__heading::before { margin-bottom: 11px; } } /* unique */ /* ========================================================================== title-wrap-columns ========================================================================== */ /* サイト全体で共通の設定 */ /* -------------------------------------------------- サイト全体で共通の設定 -------------------------------------------------- */ /* ブレイクポイント --------------------------------------*/ /* カラースキーム --------------------------------------*/ /* 記事詳細のtableの1行目のbackground-color用 不透明度を設定したテーマカラー(light_pale_color)が効かないため特別に作成 */ /* フォント --------------------------------------*/ /* 基本のフォント */ /* 英字のフォント */ /* html 要素 */ /* 文字のサイズ --------------------------------------*/ /* html 要素 */ /* small要素 */ /* sub、sup 要素 */ /* heading */ /* system pages */ /* 文字のウェイト --------------------------------------*/ /* heading */ /* base text */ /* button */ /* system pages */ /* 文字間 --------------------------------------*/ /* system pages */ /* 行間 --------------------------------------*/ /* container の設定 --------------------------------------*/ /* 幅の上限と下限 */ /* 左右内側の余白 */ /* natural の設定 --------------------------------------*/ /* 要素間の上下余白 */ /* 上下マージン ----------------------------------------------*/ /* between column */ /* vertical line-height crop */ /* vertical line-height crop (heading + paragraph) */ /* offset line-height from vertical margin */ /* transition の設定 ---------------------------------------*/ .section-sitemap { margin-top: 80px; margin-bottom: 80px; } @media screen and (max-width: 767px) { .section-sitemap { margin-top: 60px; margin-bottom: 60px; } } .sitemap-list { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } @media screen and (max-width: 767px) { .sitemap-list { margin-left: -20px; margin-right: -20px; } } .sitemap-list-01 { box-sizing: border-box; display: block; width: 50%; padding-right: 25px; padding-left: 25px; } @media screen and (max-width: 1049px) { .sitemap-list-01 { width: 100%; } } @media screen and (max-width: 767px) { .sitemap-list-01 { padding-right: 20px; padding-left: 20px; } } .sitemap-list-01:nth-child(n+3) { margin-top: 50px; } @media screen and (max-width: 1049px) { .sitemap-list-01:nth-child(n+2) { margin-top: 50px; } } @media screen and (max-width: 767px) { .sitemap-list-01:nth-child(n+2) { margin-top: 40px; } } .sitemap-list-02, .sitemap-list-03, .sitemap-list-04, .sitemap-list-05, .sitemap-list-06, .sitemap-list-07 { margin-top: 15px; } .sitemap-list-02 { padding-left: 30px; } @media screen and (max-width: 767px) { .sitemap-list-02 { padding-left: 20px; } } .sitemap__link { display: inline-block; font-weight: 400; line-height: 1.5; letter-spacing: .2em; color: #222222; transition: all .5s; } @media screen and (min-width: 1050px) { .sitemap__link:hover { color: #808080; } } .sitemap-list-01 > a.sitemap__link { color: #0d0d0d; font-size: 24px; } @media screen and (min-width: 1050px) { .sitemap-list-01 > a.sitemap__link:hover { color: #808080; } } @media screen and (max-width: 767px) { .sitemap-list-01 > a.sitemap__link { font-size: 18px; } } .sitemap-list-02 > a.sitemap__link { font-size: 20px; } @media screen and (max-width: 767px) { .sitemap-list-02 > a.sitemap__link { font-size: 16px; } } .sitemap-list-03 > a.sitemap__link { font-size: 18px; } @media screen and (max-width: 767px) { .sitemap-list-03 > a.sitemap__link { font-size: 15px; } } .sitemap-list-04 > a.sitemap__link { font-size: 16px; } .sitemap-list-05 > a.sitemap__link { font-size: 15px; } .sitemap-list-06 > a.sitemap__link { font-size: 14px; } .sitemap-list-07 > a.sitemap__link { font-size: 13px; } @media screen and (max-width: 767px) { .sitemap-list-04 > a.sitemap__link, .sitemap-list-05 > a.sitemap__link, .sitemap-list-06 > a.sitemap__link { font-size: 13px; } } .sitemap__link .sitemap__link__inner { display: inline-block; position: relative; } .sitemap-list-01 > a.sitemap__link .sitemap__link__inner { padding-left: 30px; } @media screen and (max-width: 767px) { .sitemap-list-01 > a.sitemap__link .sitemap__link__inner { padding-left: 20px; } } .sitemap-list-01 > a.sitemap__link .sitemap__link__inner:before { content: ""; width: 13px; height: 3px; top: 18px; left: 0; background-color: #0d0d0d; position: absolute; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-01 > a.sitemap__link .sitemap__link__inner:before { width: 10px; top: 13px; } } .sitemap-list-01 > a.sitemap__link .sitemap__link__inner:after { content: ""; display: inline-block; width: 7px; height: 7px; border-top: 2px solid #0d0d0d; border-right: 2px solid #0d0d0d; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 5px; margin-bottom: 4px; position: relative; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-01 > a.sitemap__link .sitemap__link__inner:after { width: 6px; height: 6px; margin-bottom: 3px; } } @media screen and (min-width: 1050px) { .sitemap-list-01 > a.sitemap__link:hover .sitemap__link__inner:after { border-top: 2px solid #808080; border-right: 2px solid #808080; } } .sitemap-list-02 > a.sitemap__link .sitemap__link__inner:before { content: ""; width: 5px; height: 2px; top: 15px; left: -20px; background-color: #222222; position: absolute; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-02 > a.sitemap__link .sitemap__link__inner:before { top: 12px; left: -10px; } } .sitemap-list-02 > a.sitemap__link .sitemap__link__inner:after { content: ""; display: inline-block; width: 5px; height: 5px; border-top: 2px solid #222222; border-right: 2px solid #222222; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 5px; margin-bottom: 4px; position: relative; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-02 > a.sitemap__link .sitemap__link__inner:after { margin-bottom: 3px; } } @media screen and (min-width: 1050px) { .sitemap-list-02 > a.sitemap__link:hover .sitemap__link__inner:after { border-top: 2px solid #808080; border-right: 2px solid #808080; } } .sitemap-list-03 > a.sitemap__link .sitemap__link__inner:before { content: ""; width: 3px; height: 3px; top: 12px; left: -15px; background-color: #222222; position: absolute; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-03 > a.sitemap__link .sitemap__link__inner:before { } } .sitemap-list-04 > a.sitemap__link .sitemap__link__inner:before { content: ""; width: 2px; height: 2px; top: 11px; left: -15px; background-color: #222222; position: absolute; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-04 > a.sitemap__link .sitemap__link__inner:before { top: 9px; } } @media screen and (max-width: 767px) { .sitemap-list-04 > .sitemap-list__child, .sitemap-list-05 > .sitemap-list__child, .sitemap-list-06 > .sitemap-list__child { padding-left: 10px; } } .sitemap-list-03 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-04 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-05 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-06 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-07 > a.sitemap__link .sitemap__link__inner:after { content: ""; display: inline-block; width: 4px; height: 4px; border-top: 2px solid #222222; border-right: 2px solid #222222; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-left: 5px; margin-bottom: 3px; position: relative; transition: all .5s; } @media screen and (max-width: 767px) { .sitemap-list-03 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-04 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-05 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-06 > a.sitemap__link .sitemap__link__inner:after, .sitemap-list-07 > a.sitemap__link .sitemap__link__inner:after { width: 4px; height: 4px; margin-bottom: 2px; } } @media screen and (min-width: 1050px) { .sitemap-list-03 > a.sitemap__link:hover .sitemap__link__inner:after, .sitemap-list-04 > a.sitemap__link:hover .sitemap__link__inner:after, .sitemap-list-05 > a.sitemap__link:hover .sitemap__link__inner:after, .sitemap-list-06 > a.sitemap__link:hover .sitemap__link__inner:after, .sitemap-list-07 > a.sitemap__link:hover .sitemap__link__inner:after { border-top: 2px solid #808080; border-right: 2px solid #808080; } } /* URLスラッグに「thanks」に該当するものは削除 */ .sitemap-list--thanks { display: none; } @charset "UTF-8"; /* home hero */ .home-hero__list { position: relative; } .home-hero__list__item { position: relative; width: 100vw!important; height: auto; } @media screen and (min-width: 768px) { .home-hero__list__item { width: 600px!important; } } @media screen and (min-width: 900px) { .home-hero__list__item { width: 800px!important; } } .home-hero__list__inner{ display: block; height: auto; background-color: #ffffff; position: relative; } .home-hero__list__inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: auto; } .home-hero__list__inner__image img { backface-visibility: hidden; max-width: 100%; width: 100%; } .home-hero__list__inner__image.home-hero__list__inner__image--pctb, .home-hero__list__inner__image.home-hero__list__inner__image--sp{ display: none; } @media screen and (min-width: 768px) { .slick-initialized .home-hero__list__inner__image.home-hero__list__inner__image--pctb { display: block; } .slick-initialized .home-hero__list__inner__image.home-hero__list__inner__image--sp { display: none; } } @media screen and (max-width: 767px) { .slick-initialized .home-hero__list__inner__image.home-hero__list__inner__image--pctb { display: none; } .slick-initialized .home-hero__list__inner__image.home-hero__list__inner__image--sp { display: block; } } .home-hero__list__nav__prev { position: absolute; top: calc(50% - 6px); left: 5px; transform: translateY(-50%); cursor: pointer; outline: none; width: 32px; height: 32px; padding: 6px; text-align: center; box-sizing: border-box; background-color: rgb(255 255 255 / 70%); z-index: 5; border-radius: 50px; transition: background-color .5s; } @media screen and (min-width: 768px) { .home-hero__list__nav__prev { left: 20px; padding: 9px; width: 36px; height: 36px; } } @media screen and (min-width: 900px) { .home-hero__list__nav__prev { left: 30px; } .home-hero__list__nav__prev:hover { background-color: rgb(255 255 255 / 100%); } } .home-hero__list__nav__prev::after { content: normal; } .home-hero__list__nav__prev__icon { width: 6px; height: 8px; display: block; position: absolute; top: calc(50% - 4px); right: calc(50% - 3px); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .home-hero__list__nav__prev__icon__arrow { fill: #222222; } .home-hero__list__nav__next { position: absolute; top: calc(50% - 6px); right: 5px; transform: translateY(-50%); cursor: pointer; outline: none; width: 32px; height: 32px; padding: 6px; text-align: center; box-sizing: border-box; background-color: rgb(255 255 255 / 70%); z-index: 5; border-radius: 50px; transition: background-color .5s; } @media screen and (min-width: 768px) { .home-hero__list__nav__next { right: 20px; padding: 9px; width: 36px; height: 36px; } } @media screen and (min-width: 900px) { .home-hero__list__nav__next { right: 30px; } .home-hero__list__nav__next:hover { background-color: rgb(255 255 255 / 100%); } } .home-hero__list__nav__next::after { content: normal; } .home-hero__list__nav__next__icon { width: 6px; height: 8px; display: block; position: absolute; top: calc(50% - 4px); left: calc(50% - 3px); } .home-hero__list__nav__next__icon__arrow { fill: #222222; } .home-hero__list-dots { margin-top: 10px; display: flex; justify-content: center; } .home-hero__list-dots li { display: flex; margin: 0 2.5px; } .home-hero__list-dots button { cursor: pointer; outline: none; padding: 0; appearance: none; font-size: 0; border: none; background-color: #d3d3d3; width: 20px; height: 2px; transition: background-color .5s; } @media screen and (min-width: 768px) { .home-hero__list-dots button { width: 30px; } } .home-hero__list-dots li:hover button, .home-hero__list-dots li.slick-active button { background-color: #0d0d0d; } @charset "UTF-8"; /* home-news */ .section-home-news { margin-top: 30px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-news { margin-top: 45px; margin-bottom: 80px; } } @media screen and (max-width: 767px) { .home-news__menu { margin-bottom: 15px; } } .home-news__menu__laptop-wider__list { display: none; } @media screen and (min-width: 768px) { .home-news__menu__laptop-wider__list { display: flex; flex-wrap: wrap; } } .home-news__menu__laptop-wider__list__item { position: relative; padding: 5px 20px 25px 0; cursor: pointer; transition: color .5s; } @media screen and (min-width: 768px) { .home-news__menu__laptop-wider__list__item:not(:first-child):after { content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 18px; border-left: 1px dotted #dbdbdb; } } .home-news__menu__laptop-wider__list__item:not(:first-child) { padding: 5px 20px 25px; } .home-news__menu__laptop-wider__list__item:hover { color: #0d0d0d; } .home-news__menu__laptop-wider__list__item.is-current { color: #0d0d0d; } .home-news__menu__laptop-wider__list__item.is-current { position: relative; } .home-news__menu__laptop-wider__list__item.is-current .tab_icon { content: ''; overflow: hidden; position: absolute; bottom: 0; left: calc(50% - 25px); z-index: 1; width: 50px; height: 5px; } .home-news__menu__laptop-wider__list__item:first-child.is-current .tab_icon { left: 0; } .home-news__menu__laptop-wider__list__item.is-current .tab_icon:before { content: ''; position: absolute; top: -1px; left: calc(50% - 25px); z-index: -1; width: 50px; height: 10px; background: #0d0d0d; } .home-news__menu__laptop-wider__list__item.is-current .tab_icon:before { left: 0; } @media screen and (min-width: 768px) { .home-news__menu__palmtop { display: none; } } .home-news__menu__palmtop__label { display: block; position: relative; } .home-news__menu__palmtop__label__icon { position: absolute; top: calc(50% - 4px); right: 16px; width: 6px; height: 8px; transform: rotate(90deg); } .home-news__menu__palmtop__label__icon__arrow { fill: #222222; } .home-news__menu__palmtop__label__select { display: block; width: 100%; padding: 10px; outline: none; border: 1px solid #dbdbdb; border-radius: 5px; background: none transparent; color: inherit; font-size: 1.6rem; letter-spacing: .1em; text-indent: 0.01px; text-overflow: ''; appearance: none; } .home-news__content__list { display: none; position: relative; border-top: 1px solid #dbdbdb; border-bottom: 1px dotted #dbdbdb; } .home-news__content__list.show { display: block; } .home-news__content__list__item:not(:first-child) { border-top: 1px dotted #dbdbdb; } .home-news__content__list__item__anchor { display: block; padding-top: 15px; padding-bottom: 20px; transition: background-color .5s; } @media screen and (min-width: 768px) { .home-news__content__list__item__anchor { padding-top: 30px; padding-bottom: 30px; } } @media screen and (min-width: 768px) { .home-news__content__list__item__anchor:hover { background-color: #f7f7f7; } } @media screen and (min-width: 768px) { .home-news__content__list__item__content { display: flex; align-items: center; } } .home-news__content__list__item__content__head { display: flex; align-items: center; } @media screen and (min-width: 768px) { .home-news__content__list__item__content__head { width: 250px; } } .home-news__content__list__item__content__head__date { color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .home-news__content__list__item__content__head__date { flex: 1; } } .home-news__content__list__item__content__head__category { margin-left: 15px; } @media screen and (min-width: 768px) { .home-news__content__list__item__content__head__category { flex: 1; margin-left: 20px; } } .home-news__content__list__item__content__head__category__inner { display: inline-block; box-sizing: border-box; min-width: 100px; padding: 5px; background-color: #0d0d0d; color: #ffffff; font-size: 1.2rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .home-news__content__list__item__content__head__category__inner { min-width: 120px; font-size: 1.3rem; } } .home-news__content__list__item__content__body { margin-top: 15px; } @media screen and (min-width: 768px) { .home-news__content__list__item__content__body { flex: 3; margin-top: 0; margin-left: 30px; } } @charset "UTF-8"; /* home-blog */ .section-home-blog { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-blog { margin-top: 80px; margin-bottom: 80px; } } @media screen and (min-width: 900px) { .section-home-blog { overflow-x: hidden; } } .home-blog__container { position: relative; } .home-blog__slider { overflow: hidden; margin-right: calc(((100vw - 100%) / 2) * -1); } .home-blog__slider .slick-meta-wrapper { position: absolute; top: 0; right: 0; } .home-blog__slider__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; margin-bottom: 20px; max-width: 1050px; padding-right: 20px; position: absolute; top: 30px; right: 0; } .home-blog__slider__nav__pager { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: static; margin-left: 20px; margin-right: 20px; width: auto; } @media screen and (min-width: 768px) { .home-blog__slider__nav__pager { margin-left: 30px; margin-right: 30px; } } .home-blog__slider__nav__pager__of { width: 15px; height: 1px; background-color: #808080; margin-left: 20px; margin-right: 20px; } @media screen and (min-width: 768px) { .home-blog__slider__nav__pager__of { width: 25px; } } .home-blog__slider__nav__pager__total { color: #808080; } .home-blog__slider__nav__prev { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; position: static; cursor: pointer; outline: none; } .home-blog__slider__nav__prev::after { content: normal; } .home-blog__slider__nav__prev__icon { width: 6px; height: 8px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .home-blog__slider__nav__prev__icon__arrow { fill: #808080; -webkit-transition: fill .5s; transition: fill .5s; } @media screen and (min-width: 768px) { .home-blog__slider__nav__prev:hover .home-blog__slider__nav__prev__icon__arrow { fill: #0d0d0d; } } .home-blog__slider__nav__next { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; position: static; cursor: pointer; outline: none; } .home-blog__slider__nav__next::after { content: normal; } .home-blog__slider__nav__next__icon { width: 6px; height: 8px; } .home-blog__slider__nav__next__icon__arrow { fill: #808080; -webkit-transition: fill .5s; transition: fill .5s; } @media screen and (min-width: 768px) { .home-blog__slider__nav__next:hover .home-blog__slider__nav__next__icon__arrow { fill: #0d0d0d; } } .home-blog__slider__list { display: -webkit-box; display: -ms-flexbox; display: flex; margin-left: -10px; margin-right: -10px; } @media screen and (min-width: 768px) { .home-blog__slider__list { margin-left: -25px; margin-right: -25px; } } .home-blog__slider__list__item { -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; padding-right: 10px; } @media screen and (min-width: 768px) { .home-blog__slider__list__item { padding-left: 25px; padding-right: 25px; } } .home-blog__slider__list__item:focus { outline: none; } .slick-slide.home-blog__slider__list__item { height: auto; } .home-blog__slider__list__item__card { display: block; width: 240px; } @media screen and (min-width: 768px) { .home-blog__slider__list__item__card { width: 375px; } } .home-blog__slider__list__item__card:focus { outline: none; } .home-blog__slider__list__item__card__head__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .home-blog__slider__list__item__card__head__image:before { content: ""; display: block; padding-bottom: 56.25%; } .home-blog__slider__list__item__card__body { margin-top: 20px; } .home-blog__slider__list__item__card__body__date { color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; } .home-blog__slider__list__item__card__body__category { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin: 7.5px -7.5px -7.5px -7.5px; } .home-blog__slider__list__item__card__body__category__item { margin: 7.5px; } .home-blog__slider__list__item__card__body__category__item__inner { display: inline-block; background-color: #0d0d0d; color: #ffffff; font-size: 1.2rem; letter-spacing: .1em; padding: 5px 15px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; } @media screen and (min-width: 768px) { .home-blog__slider__list__item__card__body__category__item__inner { padding: 5px 20px; font-size: 1.3rem; } } .home-blog__slider__list__item__card__body__heading { margin-top: 10px; font-size: 1.5rem; line-height: 1.92em; font-weight: 500; } @media screen and (min-width: 768px) { .home-blog__slider__list__item__card__body__heading { font-size: 1.8rem; } } @charset "UTF-8"; /* home-new-topic */ .section-home-new-topic { overflow: hidden; margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-new-topic { margin-top: 80px; } } .home-new-topic__menu { margin-top: 30px; margin-bottom: 15px; } @media screen and (min-width: 768px) { .home-new-topic__menu { margin-top: 45px; margin-bottom: 0; } } .home-new-topic__menu__laptop-wider__list { display: none; } @media screen and (min-width: 768px) { .home-new-topic__menu__laptop-wider__list { display: flex; flex-wrap: wrap; } } .home-new-topic__menu__laptop-wider__list__item { position: relative; padding: 5px 20px 15px 0; color: #0d0d0d; font-size: 1.5rem; letter-spacing: .1em; cursor: pointer; transition: color .5s; } @media screen and (min-width: 768px) { .home-new-topic__menu__laptop-wider__list__item:not(:first-child):after { content: ""; position: absolute; top: 5px; left: 0; width: 1px; height: 15px; border-left: 1px dotted #dbdbdb; } } .home-new-topic__menu__laptop-wider__list__item:not(:first-child) { padding: 5px 20px 15px; } .home-new-topic__menu__laptop-wider__list__item.is-current { font-weight: 500; } .home-new-topic__menu__laptop-wider__list__item.is-current { position: relative; } .home-new-topic__menu__laptop-wider__list__item.is-current .tab_icon { content: ''; overflow: hidden; position: absolute; bottom: 0; left: calc(50% - 25px); z-index: -1; width: 44px; height: 3px; } .home-new-topic__menu__laptop-wider__list__item:first-child.is-current .tab_icon { left: 0; } .home-new-topic__menu__laptop-wider__list__item.is-current .tab_icon:before { content: ''; position: absolute; top: -1px; left: calc(50% - 25px); z-index: -1; width: 50px; height: 10px; background: #0d0d0d; } .home-new-topic__menu__laptop-wider__list__item.is-current .tab_icon:before { left: 0; } @media screen and (min-width: 768px) { .home-new-topic__menu__palmtop { display: none; } } .home-new-topic__menu__palmtop__label { display: block; position: relative; } .home-new-topic__menu__palmtop__label__icon { position: absolute; top: calc(50% - 4px); right: 20px; width: 6px; height: 8px; transform: rotate(90deg); } .home-new-topic__menu__palmtop__label__icon__arrow { fill: #222222; } .home-new-topic__menu__palmtop__label__select { display: block; width: 100%; padding: 12px 20px; outline: none; border: none; border-radius: 0; background: #f7f7f7; color: inherit; font-size: 1.4rem; letter-spacing: .1em; text-indent: 0.01px; appearance: none; } .home-new-topic__content__list { display: none; position: relative; border-top: 1px solid #0d0d0d; border-bottom: 1px solid #dbdbdb; } .home-new-topic__content__list.show { display: block; } .home-new-topic__content__list__item:not(:first-child) { border-top: 1px solid #dbdbdb; } .home-new-topic__content__list__item__anchor { position: relative; display: block; padding-top: 25px; padding-bottom: 25px; padding-right: 30px; transition: .5s; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor { padding-left: 20px; padding-right: 60px; } } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor:hover { background-color: #fbfbfb; } } .home-new-topic__content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor__arrow { width: 31px; height: 31px; right: 20px; bottom: 50%; transform: translateY(50%); padding: 11px; } } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor:hover .home-new-topic__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .home-new-topic__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor:hover .home-new-topic__content__list__item__anchor__arrow__path { fill: #ffffff; } } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__head { display: flex; align-items: center; } } .home-new-topic__content__list__item__content__head__date { color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__head__date { margin-right: 10px; width: 80px; font-size: 1.4rem; } } .home-new-topic__content__list__item__content__head__category { display: flex; flex-wrap: wrap; margin-top: 7.5px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__head__category { margin-top: -2.5px; width: calc(100% - 90px); } } .home-new-topic__content__list__item__content__head__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__head__category__item { } } .home-new-topic__content__list__item__content__head__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__head__category__item__inner { font-size: 1.2rem; } } .home-new-topic__content__list__item__content__head__category__item.home-new-topic__content__list__item__content__head__category__item--black .home-new-topic__content__list__item__content__head__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .home-new-topic__content__list__item__content__head__category__item.home-new-topic__content__list__item__content__head__category__item--gray .home-new-topic__content__list__item__content__head__category__item__inner { background-color: #808080; color: #ffffff; } .home-new-topic__content__list__item__content__head__category__item.home-new-topic__content__list__item__content__head__category__item--white .home-new-topic__content__list__item__content__head__category__item__inner { padding: 4px 10px; border: 1px solid #808080; color: #808080; } .home-new-topic__content__list__item__content__body { margin-top: 10px; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__body { margin-top: 15px; } } @media screen and (min-width: 1280px) { .home-new-topic__content__list__item__content__body { margin-top: 20px; } } .home-new-topic__content__list__item__content__body .paragraph { line-height: 1.5; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__content__body .paragraph { font-size: 1.5rem; } } .home-new-topic__content__list__item__anchor[target="_blank"] .home-new-topic__content__list__item__content__body .paragraph, .home-new-topic__content__list__item__anchor[href*=".pdf"] .home-new-topic__content__list__item__content__body .paragraph { padding-left: 17px; position: relative; } .home-new-topic__content__list__item__anchor[target="_blank"] .home-new-topic__content__list__item__content__body .paragraph:before { content: ""; margin-top: 0; display: block; width: 12px; height: 12px; position: absolute; top: 4px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 12px; } @media screen and (min-width: 768px) { .home-new-topic__content__list__item__anchor[target="_blank"] .home-new-topic__content__list__item__content__body .paragraph:before { top: 5px; } } .home-new-topic__content__list__item__anchor[href*=".pdf"] .home-new-topic__content__list__item__content__body .paragraph:before { content: ""; margin-top: 0; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } .paragraph.home-new-topic__content__list__null { margin: 25px 0px; } @media screen and (min-width: 768px) { .paragraph.home-new-topic__content__list__null { margin: 41px 0px; } } .home-new-topic__content + .home-link-button { margin-top: 30px; } @media screen and (min-width: 768px) { .home-new-topic__content + .home-link-button { margin-top: 40px; display: none; } } @charset "UTF-8"; /* home-seminar */ .section-home-seminar { overflow: hidden; position: relative; margin-top: 60px; margin-bottom: 0; padding-top: 60px; padding-bottom: 80px; } @media screen and (min-width: 768px) { .section-home-seminar { margin-top: 80px; padding-top: 80px; padding-bottom: 100px; } } .section-home-seminar:before { content: ""; display: block; position: absolute; top: 0; right: 0; width: calc(100% - 70px); height: 100%; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .section-home-seminar:before { width: calc(100% - 167px); } } @media screen and (min-width: 1280px) { .section-home-seminar:before { width: calc(100% - 215px); } } .home-seminar .home-h2__deco-bg { color: #ffffff; opacity: .6; } .home-seminar__content { margin-top: 40px; } .home-seminar__content.home-seminar__content--seminar-detail { margin-top: 30px; } .home-seminar__content__list { position: relative; } .home-seminar__content__list__item { border-bottom: 1px solid #dbdbdb; } .home-seminar__content__list__item__anchor { position: relative; display: block; padding-bottom: 20px; transition: .5s; } .home-seminar__content__list__item:not(:first-child) .home-seminar__content__list__item__anchor { padding-top: 45px; } @media screen and (min-width: 768px) { .home-seminar__content__list__item__anchor { padding-bottom: 30px; } .home-seminar__content__list__item:not(:first-child) .home-seminar__content__list__item__anchor { padding-top: 20px; } } @media screen and (min-width: 1280px) { .home-seminar__content__list__item__anchor { padding-bottom: 20px; } } .home-seminar__content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #ffffff; transition: .5s; } .home-seminar__content--bottom .home-seminar__content__list__item__anchor__arrow { background-color: #f7f7f7; } @media screen and (min-width: 768px) { .home-seminar__content--bottom .home-seminar__content__list__item__anchor:hover .home-seminar__content__list__item__anchor__arrow { background-color: #0d0d0d; } } @media screen and (min-width: 768px) { .home-seminar__content__list__item__anchor__arrow { bottom: 20px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .home-seminar__content__list__item__anchor:hover .home-seminar__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .home-seminar__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .home-seminar__content__list__item__anchor:hover .home-seminar__content__list__item__anchor__arrow__path { fill: #ffffff; } } .home-seminar__columns__column:nth-child(1) { overflow: hidden; } @media screen and (min-width: 768px) { .home-seminar__columns { display: flex; justify-content: space-between; } .home-seminar__columns__column:nth-child(1) { width: 250px; } .home-seminar__columns__column:nth-child(2) { width: calc(100% - 290px); } } @media screen and (min-width: 1050px) { .home-seminar__columns__column:nth-child(1) { width: 300px; } .home-seminar__columns__column:nth-child(2) { width: calc(100% - 340px); } } .home-seminar__columns__column__image { position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 1050px) { .home-seminar__content__list__item__anchor:hover .home-seminar__columns__column__image { transform: scale(1.05); } } .home-seminar__columns__column__image:before { content: ""; display: block; padding-top: 56.25%; } .home-seminar__content__list__item__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } @media screen and (min-width: 768px) { .home-seminar__content__list__item__category.home-seminar__content__list__item__category--head { margin-top: -2.5px; } .home-seminar__content__list__item__category.home-seminar__content__list__item__category--bottom { margin-top: 14.5px; } } .home-seminar__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .home-seminar__content__list__item__category__item { } } .home-seminar__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .home-seminar__content__list__item__category__item__inner { font-size: 1.2rem; } } .home-seminar__content__list__item__category--head .home-seminar__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .home-seminar__content__list__item__category__item.home-seminar__content__list__item__category__item--white .home-seminar__content__list__item__category__item__inner { padding: 4px 10px; color: #808080; border: 1px solid #808080; } .home-seminar__content__list__item__category__item.home-seminar__content__list__item__category__item--gray .home-seminar__content__list__item__category__item__inner { background-color: #808080; color: #fff; } .home-seminar__content__list__item__category__item.home-seminar__content__list__item__category__item--red .home-seminar__content__list__item__category__item__inner { background-color: #c30000; color: #fff; } .home-seminar__content__list__item__popup img { width: 100%; max-width: 100%; } .home-seminar__columns__column__title { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-seminar__columns__column__title { font-size: 1.8rem; } } .home-seminar__columns__column__title:not(:first-child) { margin-top: 10px; } .home-seminar__columns__column__sub-title { margin-top: 5px; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-seminar__columns__column__sub-title { margin-top: 7px; font-size: 1.6rem; } } .home-seminar__columns__column__date { margin-top: 15px; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; padding-right: 30px; } @media screen and (min-width: 768px) { .home-seminar__columns__column__date { margin-top: 17px; font-size: 1.4rem; } } .home-seminar__columns__column__ipass { margin-bottom: 20px; padding: 13px 20px; background-color: #f7f7f7; border: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .home-seminar__columns__column__ipass { margin-left: auto; width: calc(100% - 330px); } } @media screen and (min-width: 1280px) { .home-seminar__columns__column__ipass { width: calc(100% - 380px); } } .home-seminar__columns__column__ipass__dl { display: flex; justify-content: space-between; font-size: 1.4rem; font-family: 'Barlow', sans-serif; color: #222222; letter-spacing: .1em; line-height: 1.5; } .home-seminar__columns__column__ipass__dl__dt { width: 50px; position: relative; } .home-seminar__columns__column__ipass__dl__dt:after { content: ":"; position: absolute; top: 0; right: 0; } .home-seminar__columns__column__ipass__dl__dd { width: calc(100% - 60px); } .home-seminar__content + .home-link-button { margin-top: 40px; } @media screen and (min-width: 768px) { .home-seminar__content + .home-link-button { display: none; } } /* ===== トップページ セミナー お気に入りピンマーク ===== */ /* ピンマークのベーススタイル */ .home-seminar__pin { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 9; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; background: none !important; background-color: transparent !important; box-shadow: none !important; } /* タブレット・PC表示時 */ @media screen and (min-width: 768px) { .home-seminar__pin { top: 10px; right: 10px; } } /* ローディング状態 */ .home-seminar__pin.loading { pointer-events: none; opacity: 0.6; } /* SVGスタイル */ .home-seminar__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } .home-seminar__pin svg path { transition: fill 0.3s ease, stroke 0.3s ease; } /* ツールチップ（PC専用） */ .home-seminar__pin__tooltip { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 6; pointer-events: none; } /* PC時のホバー表示 */ @media screen and (min-width: 768px) { .home-seminar__pin:hover .home-seminar__pin__tooltip { opacity: 1; visibility: visible; } /* お気に入り済み状態ではツールチップ非表示 */ .home-seminar__pin[data-favorited="true"]:hover .home-seminar__pin__tooltip { opacity: 0; visibility: hidden; } } /* SPではツールチップ非表示 */ @media screen and (max-width: 767px) { .home-seminar__pin__tooltip { display: none; } } /* フィードバックメッセージ */ .home-favorite__feedback { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 8px 16px; border-radius: 4px; font-size: 13px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 15; pointer-events: none; } /* フィードバック表示時 */ .home-favorite__feedback.show { opacity: 1 !important; visibility: visible !important; display: block !important; } /* エラー時の色 */ .home-favorite__feedback.error { background-color: rgba(195, 0, 0, 0.9); } @charset "UTF-8"; /* home-video */ .section-home-video { overflow: hidden; position: relative; margin-top: 0; padding-top: 60px; margin-bottom: 80px; } @media screen and (min-width: 768px) { .section-home-video { padding-top: 80px; margin-bottom: 100px; } } .section-home-video:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 274px; background-color: #0d0d0d; } @media screen and (min-width: 768px) { .section-home-video:before { width: 52%; } } @media screen and (min-width: 1280px) { .section-home-video:before { width: 51%; } } @media screen and (min-width: 900px) and (max-width: 1239px) { .home-video { overflow: hidden; } .home-video.home-video__content { margin-top: 0; } } .home-video .home-h2__main, .home-video .home-h2__sub, .home-video .home-h2__deco { color: #ffffff; } .home-video .home-h2__deco-bg { z-index: -1; } .home-video__content { margin-top: 40px; margin-right: -20px; } @media screen and (min-width: 768px) { .home-video__content { margin-right: -50px; } } @media screen and (min-width: 1050px) { .home-video__content { margin-right: -100px; } } @media screen and (min-width: 1280px) { .home-video__content { margin-right: 0; } } .home-video__content.home-video__content--small-top { margin-top: 25px; } @media screen and (min-width: 768px) { .home-video__content.home-video__content--small-top { margin-top: 40px; } } .home-video__content .slick-track { margin-left: inherit; margin-right: inherit; } .home-video__content__list { } .home-video__content__list__item { box-sizing: border-box; padding: 0 1px; height: auto; } @media screen and (max-width: 1279px) { .home-video__content__list__item { width: 292px!important; } } .home-video__content__list__item__anchor { position: relative; display: block; padding-bottom: 20px; transition: .5s; } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor { padding-bottom: 25px; } } .home-video__content__list__item__anchor:after { content: ""; display: block; position: absolute; bottom: 0; left: 15px; width: calc(100% - 30px); height: 1px; background-color: #dbdbdb; } .home-video__content__list__item__image-wrap { overflow: hidden; position: relative; } .home-video__content__list__item__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor:hover .home-video__content__list__item__image { transform: scale(1.05); } } .home-video__content__list__item__image:before { content: ""; display: block; padding-top: 56.25%; } .home-video__content__list__item__image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor:hover .home-video__content__list__item__image:after { opacity: .5; } } .home-video__content__list__item__image__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .home-video__content__list__item__image__svg__path { fill: #ffffff; } .home-video__content__list__item__image__time { position: absolute; right: 0; bottom: 0; background-color: grey; color: #fff; font-size: 1.2rem; box-sizing: border-box; display: inline-block; font-size: 1.1rem; letter-spacing: .1em; padding: 5px 10px; text-align: center; } .home-video__content__list__item__title { margin-top: 10px; padding: 0 15px; box-sizing: border-box; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-video__content__list__item__title { font-size: 1.7rem; } } .home-video__content__list__item__image-wrap + .home-video__content__list__item__title { margin-top: 20px; } .home-video__content__list__item__category { display: flex; flex-wrap: wrap; margin-left: 12.5px; margin-right: 12.5px; margin-bottom: -2.5px; } .home-video__content__list__item__category.home-video__content__list__item__category--head { margin-top: 15px; } @media screen and (min-width: 768px) { .home-video__content__list__item__category.home-video__content__list__item__category--head { margin-top: 20px; } } .home-video__content__list__item__category.home-video__content__list__item__category--bottom { margin-top: 10px; } @media screen and (min-width: 768px) { .home-video__content__list__item__category.home-video__content__list__item__category--bottom { margin-top: 13px; } } .home-video__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } @media screen and (min-width: 768px) { .home-video__content__list__item__category__item { } } .home-video__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .home-video__content__list__item__category__item__inner { font-size: 1.2rem; } } .home-video__content__list__item__category.home-video__content__list__item__category--head .home-video__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .home-video__content__list__item__category.home-video__content__list__item__category--bottom .home-video__content__list__item__category__item--gray .home-video__content__list__item__category__item__inner { background-color: #808080; color: #ffffff; } .home-video__content__list__item__category.home-video__content__list__item__category--bottom .home-video__content__list__item__category__item--white .home-video__content__list__item__category__item__inner { padding: 4px 10px; border: 1px solid #808080; color: #808080; } .home-video__content__list__item__date { margin-top: 15px; padding: 0 15px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } @media screen and (min-width: 768px) { .home-video__content__list__item__date { margin-top: 25px; font-size: 1.4rem; } } .home-video__content__list__item__anchor__arrow { position: absolute; right: 15px; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor__arrow { bottom: 15px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor:hover .home-video__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .home-video__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .home-video__content__list__item__anchor:hover .home-video__content__list__item__anchor__arrow__path { fill: #ffffff; } } .home-video__columns__column__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .home-video__columns__column__image:before { content: ""; display: block; padding-top: 56.25%; } .home-video__columns__column__title { margin-top: 10px; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-video__columns__column__title { font-size: 1.8rem; } } .home-video__content__list__item__content__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } .home-video__content__list__item__content__category__item { box-sizing: border-box; padding: 2.5px; } .home-video__content__list__item__content__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; color: #ffffff; background-color: #808080; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .home-video__content__list__item__content__category__item__inner { font-size: 1.2rem; } } .home-video__content + .home-link-button { margin-top: 30px; } @media screen and (min-width: 768px) { .home-video__content + .home-link-button { display: none; } } .home-video__slider__nav { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; color: #34393d; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .25em; } @media screen and (min-width: 768px) { .home-video__slider__nav { margin-top: 20px; } } .home-video__slider__nav__pager { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: static; margin-left: 10px; margin-right: 10px; width: auto; } .home-video__slider__nav__pager__of { width: 50px; height: 1px; background-color: #34393d; margin-left: 20px; margin-right: 20px; } .home-video__slider__nav__prev { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; position: static; cursor: pointer; outline: none; transition: opacity .5s; } .home-video__slider__nav__prev:hover { opacity: .6; } .home-video__slider__nav__prev::after { content: normal; } .home-video__slider__nav__prev__icon { display: block; width: 40px; height: 40px; box-sizing: border-box; padding: 16px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .home-video__slider__nav__prev__icon__arrow { fill: #34393d; -webkit-transition: fill .5s; transition: fill .5s; } @media screen and (min-width: 768px) { .home-video__slider__nav__prev:hover .home-video__slider__nav__prev__icon__arrow { fill: #34393d; } } .home-video__slider__nav__next { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; position: static; cursor: pointer; outline: none; transition: opacity .5s; } .home-video__slider__nav__next:hover { opacity: .6; } .home-video__slider__nav__next::after { content: normal; } .home-video__slider__nav__next__icon { display: block; width: 40px; height: 40px; box-sizing: border-box; padding: 16px; } .home-video__slider__nav__next__icon__arrow { fill: #34393d; -webkit-transition: fill .5s; transition: fill .5s; } /* ===== トップページ 動画 お気に入りピンマーク ===== */ /* 動画用ピンマークのベーススタイル */ .home-video__pin { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; cursor: pointer; z-index: 9; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; background: none !important; background-color: transparent !important; box-shadow: none !important; } /* タブレット・PC表示時 */ @media screen and (min-width: 768px) { .home-video__pin { top: 10px; right: 10px; } } /* ローディング状態 */ .home-video__pin.loading { pointer-events: none; opacity: 0.6; } /* SVGスタイル */ .home-video__pin svg { width: 24px; height: 24px; transition: all 0.3s ease; } .home-video__pin svg path { transition: fill 0.3s ease, stroke 0.3s ease; } /* ツールチップ（PC専用） */ .home-video__pin__tooltip { position: absolute; top: 50%; right: 100%; transform: translateY(-50%); margin-right: 8px; background-color: rgba(0, 0, 0, 0.8); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 6; pointer-events: none; } /* PC時のホバー表示 */ @media screen and (min-width: 768px) { .home-video__pin:hover .home-video__pin__tooltip { opacity: 1; visibility: visible; } /* お気に入り済み状態ではツールチップ非表示 */ .home-video__pin[data-favorited="true"]:hover .home-video__pin__tooltip { opacity: 0; visibility: hidden; } } /* SPではツールチップ非表示 */ @media screen and (max-width: 767px) { .home-video__pin__tooltip { display: none; } } @charset "UTF-8"; /* home-video-sp */ .section-home-video-sp { overflow: hidden; position: relative; margin-top: 0; padding-top: 30px; margin-bottom: 40px; } @media screen and (min-width: 900px) { .section-home-video-sp { display: none; } } .section-home-video-sp:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 125px; background-color: #0d0d0d; } .home-video-sp .home-h2__main, .home-video-sp .home-h2__deco, .home-video-sp .home-h2__sub { color: #fff; } .home-video-sp .home-h2__deco-bg { color: #272727; } .home-video-sp__content { margin-top: 50px; margin-left: -5px; margin-right: -5px; } .home-video-sp__content.home-video-sp__content--small-top { margin-top: 25px; } .home-video-sp__content .slick-track { margin-left: inherit; margin-right: inherit; } .home-video-sp__content__list { } .home-video-sp__content__list__item { box-sizing: border-box; padding: 0 1px; height: auto; } .home-video-sp__content__list__item__anchor { position: relative; display: flex; align-items: flex-start; padding-bottom: 30px; transition: .5s; } .home-video-sp__content__list__item__data-wrap { width: calc(100% - 130px); } .home-video-sp__content__list__item__image-wrap { overflow: hidden; position: relative; width: 130px; } .home-video-sp__content__list__item__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } .home-video-sp__content__list__item__image:before { content: ""; display: block; padding-top: 56.25%; } .home-video-sp__content__list__item__image:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } .home-video-sp__content__list__item__image__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; z-index: 2; } .home-video-sp__content__list__item__image__svg__path { fill: #ffffff; } .home-video-sp__content__list__item__image__time { position: absolute; right: 0; bottom: 0; background-color: grey; color: #fff; font-size: 1.2rem; box-sizing: border-box; display: inline-block; font-size: 1rem; letter-spacing: .1em; padding: 3px 5px; text-align: center; } .home-video-sp__content__list__item__title { padding: 0 15px; box-sizing: border-box; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } .home-video-sp__content__list__item__image-wrap + .home-video-sp__content__list__item__title { margin-top: 20px; } .home-video-sp__content__list__item__category { display: flex; flex-wrap: wrap; margin-left: 12.5px; margin-right: 12.5px; margin-bottom: -2.5px; } .home-video-sp__content__list__item__category.home-video-sp__content__list__item__category--head { margin-top: 15px; } .home-video-sp__content__list__item__category.home-video-sp__content__list__item__category--bottom { margin-top: 10px; } .home-video-sp__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } .home-video-sp__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } .home-video-sp__content__list__item__category.home-video-sp__content__list__item__category--head .home-video-sp__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .home-video-sp__content__list__item__category.home-video-sp__content__list__item__category--bottom .home-video-sp__content__list__item__category__item--gray .home-video-sp__content__list__item__category__item__inner { background-color: #808080; color: #ffffff; } .home-video-sp__content__list__item__category.home-video-sp__content__list__item__category--bottom .home-video-sp__content__list__item__category__item--white .home-video-sp__content__list__item__category__item__inner { padding: 4px 10px; border: 1px solid #808080; color: #808080; } .home-video-sp__content__list__item__date { margin-top: 15px; padding: 0 15px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; } .home-video-sp__content__list__item__anchor__arrow { position: absolute; right: 15px; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } .home-video-sp__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } .home-video-sp__columns__column__image { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; } .home-video-sp__columns__column__image:before { content: ""; display: block; padding-top: 56.25%; } .home-video-sp__columns__column__title { margin-top: 10px; font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } .home-video-sp__content__list__item__content__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } .home-video-sp__content__list__item__content__category__item { box-sizing: border-box; padding: 2.5px; } .home-video-sp__content__list__item__content__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; color: #ffffff; background-color: #808080; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } .home-video-sp__content + .home-link-button { } @charset "UTF-8"; /* home-clinician */ .section-home-clinician { overflow: hidden; margin-top: 0; margin-top: 60px; margin-bottom: 80px; } @media screen and (min-width: 768px) { .section-home-clinician { margin-top: 80px; margin-bottom: 100px; } } .home-clinician__content { margin-top: 40px; box-sizing: border-box; padding: 30px 25px; border: 1px solid #dbdbdb; } @media screen and (min-width: 768px) { .home-clinician__content { margin-top: 45px; padding: 30px 40px 50px; } } @media screen and (min-width: 1280px) { .home-clinician__content { padding: 30px 40px; } } @media screen and (min-width: 768px) { .home-clinician__columns { display: flex; } } .home-clinician__columns__column.home-clinician__columns__column--image { text-align: center; } @media screen and (min-width: 768px) { .home-clinician__columns__column.home-clinician__columns__column--image { width: 190px; margin-right: 40px; } } .home-clinician__columns__column.home-clinician__columns__column--image img { max-width: 170px; } @media screen and (min-width: 768px) { .home-clinician__columns__column.home-clinician__columns__column--image img { max-width: none; } } .home-clinician__columns__column.home-clinician__columns__column--text { margin-top: 30px; } @media screen and (min-width: 768px) { .home-clinician__columns__column.home-clinician__columns__column--text { margin-top: 20px; width: calc(100% - 230px); } } .home-clinician__columns__column__title { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .home-clinician__columns__column__title { font-size: 2.2rem; } } .home-clinician__columns__column__paragraph { font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .home-clinician__columns__column__paragraph { font-size: 1.5rem; } } .home-clinician__columns__column__paragraph:not(:first-child) { margin-top: 15px; } .download-link-button-wrap { margin-top: 25px; } @media screen and (min-width: 768px) { .download-link-button-wrap { margin-top: 30px; } } @media screen and (min-width: 1280px) { .download-link-button-wrap { margin: 25px -5px -5px -5px; display: flex; } } .download-link-button { max-width: 285px; } @media screen and (min-width: 768px) { .download-link-button { width: 240px; } } @media screen and (min-width: 1280px) { .download-link-button { padding: 5px; } } .download-link-button:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 1280px) { .download-link-button:not(:first-child) { margin-top: 0; } } .download-link-button__anchor { display: block; position: relative; border-radius: 100px; padding: 15px 28px 14px 28px; text-align: center; border: 1px solid #0d0d0d;; background-color: #0d0d0d; color: #ffffff; font-size: 1.4rem; line-height: 1.5; word-break: break-all; transition: all .5s; } @media screen and (min-width: 768px) { .download-link-button__anchor:hover { background-color: #ffffff; color: #0d0d0d; } } .download-link-button__anchor__inner { position: relative; display: inline-block; padding-left: 25px; } .download-link-button.download-link-button--no-icon .download-link-button__anchor__inner { padding-left: 0; } .download-link-button__anchor__inner__arrow { display: block; position: absolute; top: 50%; left: 0; width: 13px; height: 14px; transform: translateY(-50%); transition: all .5s; } .download-link-button__anchor__inner__arrow__path { fill: #ffffff; transition: all .5s; } @media screen and (min-width: 768px) { .download-link-button__anchor:hover .download-link-button__anchor__inner__arrow__path { fill: #0d0d0d; } } .home-clinician__content + .home-link-button { margin-top: 30px; } @media screen and (min-width: 768px) { .home-clinician__content + .home-link-button { display: none; } } @charset "UTF-8"; /* prescribe */ .section-prescribe { margin-top: 25px; margin-bottom: 35px; } @media screen and (min-width: 768px) { .section-prescribe { margin-top: 35px; margin-bottom: 55px; } } .prescribe-list { padding: 0 20px; } @media screen and (min-width: 768px) { .prescribe-list { display: flex; flex-wrap: wrap; padding: 0 15px; } } .instruction-sheet:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .instruction-sheet:not(:first-child) { margin-top: 50px; } } @media screen and (min-width: 768px) { .prescribe-list__item { width: 50%; padding-left: 25px; padding-right: 25px; box-sizing: border-box; } } @media screen and (min-width: 1280px) { .prescribe-list__item { width: 33.333%; } } .prescribe-list__item:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .prescribe-list__item:not(:first-child) { margin-top: 0; } .prescribe-list__item:nth-child(n+3) { margin-top: 30px; } } @media screen and (min-width: 1280px) { .prescribe-list__item:nth-child(n+3) { margin-top: 0; } .prescribe-list__item:nth-child(n+4) { margin-top: 25px; } } .prescribe-list__item__anchor { position: relative; display: inline-block; padding-left: 20px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .prescribe-list__item__anchor:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .prescribe-list__item__anchor { font-size: 1.5rem; } .prescribe-list__item__anchor:hover { text-decoration: underline; opacity: .6; } } .prescribe-list__item__anchor:before { content: ""; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .prescribe-list__item__anchor:before { top: 4px; width: 12px; height: 15px; background-size: 12px 15px; } } @charset "UTF-8"; /* outside-links */ .section-outside-links { margin-top: 40px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-outside-links { margin-top: 50px; margin-bottom: 80px; } } .outside-links-list { } @media screen and (min-width: 768px) { .outside-links-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } .instruction-sheet:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .instruction-sheet:not(:first-child) { margin-top: 50px; } } @media screen and (min-width: 768px) { .outside-links-list__item { width: 50%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } } @media screen and (min-width: 1280px) { .outside-links-list__item { width: 33.333%; } } .outside-links-list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .outside-links-list__item:not(:first-child) { margin-top: 0; } .outside-links-list__item:nth-child(n+3) { margin-top: 20px; } } @media screen and (min-width: 1280px) { .outside-links-list__item:nth-child(n+3) { margin-top: 0; } .outside-links-list__item:nth-child(n+4) { margin-top: 20px; } } .outside-links-list__item__anchor { display: flex; flex-wrap: wrap; align-items: center; box-sizing: border-box; height: 100%; padding: 18.5px 15px; border: 1px solid #dbdbdb; transition: border-color .5s; } @media screen and (min-width: 768px) { .outside-links-list__item__anchor { padding: 15px 20px; min-height: 80px; } .outside-links-list__item__anchor:hover { border-color: #0d0d0d; } } @media screen and (min-width: 1280px) { .outside-links-list__item__anchor { padding: 15px 20px; } } .outside-links-list__item__anchor__text { position: relative; display: inline-block; padding-left: 20px; font-size: 1.4rem; font-weight: 500; line-height: 1.5; } @media screen and (min-width: 768px) { .outside-links-list__item__anchor__text { font-size: 1.6rem; } } .outside-links-list__item__anchor__text:before { content: ""; display: block; width: 12px; height: 12px; position: absolute; top: 4px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_window.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 12px; } @media screen and (min-width: 768px) { .outside-links-list__item__anchor__text:before { top: 6px; } } @charset "UTF-8"; /* instruction_sheet_index*/ .section-instruction_sheet_index{ margin-top: 20px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .section-instruction_sheet_index{ margin-top: 45px; margin-bottom: 40px; } } @media screen and (min-width: 768px) { .instruction_sheet_index-list { display: flex; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 768px) { .instruction_sheet_index-list__item { width: 50%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; } } .instruction_sheet_index-list__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .instruction_sheet_index-list__item:not(:first-child) { margin-top: 0; } .instruction_sheet_index-list__item:nth-child(n+3) { margin-top: 20px; } } .instruction_sheet_index-list__item__anchor { display: flex; align-items: center; box-sizing: border-box; height: 100%; padding: 22.5px 25px; border: 1px solid #dbdbdb; transition: border-color .5s; } @media screen and (min-width: 768px) { .instruction_sheet_index-list__item__anchor:hover { border-color: #0d0d0d; } } .instruction_sheet_index-list__item__anchor__text { position: relative; display: inline-block; box-sizing: border-box; width: calc(100% - 36px); padding-left: 15px; color: #222222; font-size: 1.8rem; font-weight: 500; line-height: 1.5; } .instruction_sheet_index-list__item__anchor__icon { display: block; width: 36px; height: 33px; } @charset "UTF-8"; /* medipoli*/ .section-medipoli{ margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-medipoli{ margin-top: 80px; margin-bottom: 80px; } } .medipoli { padding: 30px 20px; background-color: #f7f7f7; box-sizing: border-box; } @media screen and (min-width: 768px) { .medipoli { padding: 30px 40px; } } @media screen and (min-width: 1280px) { .medipoli { padding: 40px; } } .medipoli-columns { } @media screen and (min-width: 768px) { .medipoli-columns { display: flex; align-items: center; margin-left: -10px; margin-right: -10px; } } @media screen and (min-width: 1280px) { .medipoli-columns { margin-left: -15px; margin-right: -15px; } } .medipoli-columns__column { box-sizing: border-box; } @media screen and (min-width: 768px) { .medipoli-columns__column { padding-left: 10px; padding-right: 10px; } } @media screen and (min-width: 1280px) { .medipoli-columns__column { padding-left: 15px; padding-right: 15px; } } .medipoli-columns__column.medipoli-columns__column--img { width: 100%; } @media screen and (min-width: 768px) { .medipoli-columns__column.medipoli-columns__column--img { width: 290px; } } @media screen and (min-width: 1280px) { .medipoli-columns__column.medipoli-columns__column--img { width: 360px; } } .medipoli-columns__column--img__image { position: relative; } .medipoli-columns__column--img__image img { width: 100%; max-width: 100%; } .medipoli-columns__column.medipoli-columns__column--text { margin-top: 20px; } @media screen and (min-width: 768px) { .medipoli-columns__column.medipoli-columns__column--text { margin-top: 0; width: calc(100% - 290px) } } @media screen and (min-width: 1280px) { .medipoli-columns__column.medipoli-columns__column--text { width: calc(100% - 360px) } } .medipoli__paragraph { font-size: 1.3rem; line-height: 2; } @media screen and (min-width: 768px) { .medipoli__paragraph { font-size: 1.6rem; } } .medipoli__button { margin: 15px auto 0; display: block; box-sizing: border-box; text-align: center; max-width: 335px; padding: 18px; background-color: #0d0d0d; color: #ffffff; font-size: 1.4rem; font-weight: 500; border-radius: 50px; transition: opacity .5s; } @media screen and (min-width: 768px) { .medipoli__button { margin: 20px 0 0 0; max-width: 280px; } .medipoli__button:hover { opacity: .6; } } @charset "UTF-8"; /* pdf-content */ .section-pdf-content { margin-top: 40px; margin-bottom: 40px; } @media screen and (min-width: 768px) { .section-pdf-content { margin-top: 60px; margin-bottom: 60px; } } .pdf-content { } .pdf-content__list { position: relative; } .pdf-content__list__item { border-bottom: 1px solid #dbdbdb; } .pdf-content__list__item__anchor { position: relative; display: block; padding-bottom: 20px; transition: .5s; } .pdf-content__list__item:not(:first-child) .pdf-content__list__item__anchor { padding-top: 20px; } .pdf-content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .pdf-content__list__item__anchor:hover .pdf-content__list__item__anchor__arrow { background-color: #0d0d0d; } } @media screen and (min-width: 768px) { .pdf-content__list__item__anchor__arrow { bottom: 20px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .pdf-content__list__item__anchor:hover .pdf-content__list__item__anchor__arrow { background-color: #0d0d0d; } } .pdf-content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .pdf-content__list__item__anchor:hover .pdf-content__list__item__anchor__arrow__path { fill: #ffffff; } } .pdf-content__columns__column:nth-child(1) { overflow: hidden; } .pdf-content__columns { display: flex; justify-content: space-between; } .pdf-content__columns__column:nth-child(1) { width: 90px; } .pdf-content__columns__column:nth-child(2) { width: calc(100% - 110px); } @media screen and (min-width: 768px) { .pdf-content__columns__column:nth-child(1) { width: 130px; } .pdf-content__columns__column:nth-child(2) { width: calc(100% - 170px); } } .pdf-content__columns__column__image { position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover; transition: .5s; } @media screen and (min-width: 768px) { .pdf-content__list__item__anchor:hover .pdf-content__columns__column__image { transform: scale(1.05); } } .pdf-content__columns__column__image:before { content: ""; display: block; padding-top: 144.44%; } .pdf-content__list__item__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } .pdf-content__list__item__category.pdf-content__list__item__category--head { margin-top: -2.5px; } .pdf-content__list__item__category.pdf-content__list__item__category--bottom { margin-top: 9.5px; } .pdf-content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } .pdf-content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .pdf-content__list__item__category__item__inner { font-size: 1.2rem; } } .pdf-content__list__item__category--head .pdf-content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .pdf-content__list__item__category__item.pdf-content__list__item__category__item--white .pdf-content__list__item__category__item__inner { padding: 4px 10px; color: #808080; border: 1px solid #808080; } .pdf-content__list__item__category__item.pdf-content__list__item__category__item--gray .pdf-content__list__item__category__item__inner { background-color: #808080; color: #fff; } .pdf-content__columns__column__title { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .pdf-content__columns__column__title { font-size: 1.8rem; } } .pdf-content__columns__column__title:not(:first-child) { margin-top: 10px; } .pdf-content__columns__column__paragraph { font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .pdf-content__columns__column__paragraph { font-size: 1.5rem; } } .pdf-content__columns__column__paragraph:not(:first-child) { margin-top: 10px; } .pdf-content__columns__column__sub-title { margin-top: 5px; font-size: 1.4rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .pdf-content__columns__column__sub-title { margin-top: 7px; font-size: 1.6rem; } } .pdf-content__columns__column__date { margin-top: 15px; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; padding-right: 30px; } @media screen and (min-width: 768px) { .pdf-content__columns__column__date { margin-top: 17px; font-size: 1.4rem; } } @charset "UTF-8"; /* E-NEURO_bg_link */ .e-neuro-bglink { position: relative; margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .e-neuro-bglink { margin-top: 80px; margin-bottom: 80px; } } .e-neuro-bglink__bg { background-position: center; background-repeat: no-repeat; background-size: cover; } .e-neuro-bglink__bg.e-neuro-bglink__bg--sp { margin-left: -20px; margin-right: -20px; } .e-neuro-bglink__bg.e-neuro-bglink__bg--sp:after { content: ""; display: block; padding-top: 34.13%; } @media screen and (min-width: 768px) { .e-neuro-bglink__bg.e-neuro-bglink__bg--sp { display: none; } .e-neuro-bglink__bg.e-neuro-bglink__bg--pctb { padding: 30px; } } @media screen and (min-width: 1280px) { .e-neuro-bglink__bg.e-neuro-bglink__bg--pctb { padding: 65px 50px; } } .e-neuro-bglink__anchor { display: block; margin-top: 30px; } @media screen and (min-width: 768px) { .e-neuro-bglink__anchor { margin-top: 0; margin-left: auto; max-width: 300px; } } .e-neuro-bglink__movie-wrap { overflow: hidden; } .e-neuro-bglink__movie { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-bglink__anchor:hover .e-neuro-bglink__movie { transform: scale(1.05); } } .e-neuro-bglink__movie:before { content: ""; display: block; padding-top: 56.25%; } .e-neuro-bglink__movie:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-bglink__anchor:hover .e-neuro-bglink__movie:after { opacity: .5; } } .e-neuro-bglink__movie__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .e-neuro-bglink__movie__svg__path { fill: #ffffff; } @charset "UTF-8"; /* unq_17_DB_E-NEURO_movie_link */ .e-neuro-movie { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .e-neuro-movie { margin-top: 80px; margin-bottom: 80px; } } .e-neuro-movie__content { margin-top: 30px; } @media screen and (min-width: 1250px) { .e-neuro-movie__content + .heading-2 { margin-top: 50px; } } .e-neuro-movie__content__list { position: relative; } .e-neuro-movie__content__list__item { border-bottom: 1px solid #dbdbdb; } .e-neuro-movie__content__list__item__anchor { position: relative; display: block; padding-bottom: 15px; transition: .5s; } .e-neuro-movie__content__list__item:not(:first-child) .e-neuro-movie__content__list__item__anchor { padding-top: 40px; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor { padding-bottom: 30px; } .e-neuro-movie__content__list__item:not(:first-child) .e-neuro-movie__content__list__item__anchor { padding-top: 20px; } } @media screen and (min-width: 1280px) { .e-neuro-movie__content__list__item__anchor { padding-bottom: 20px; } } .e-neuro-movie__content__list__item__anchor__arrow { position: absolute; right: 0; bottom: 10px; width: 25px; height: 25px; border-radius: 30px; padding: 9px; box-sizing: border-box; background-color: #f7f7f7; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor:hover .e-neuro-movie__content__list__item__anchor__arrow { background-color: #0d0d0d; } } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor__arrow { bottom: 20px; width: 31px; height: 31px; padding: 11px; } } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor:hover .e-neuro-movie__content__list__item__anchor__arrow { background-color: #0d0d0d; } } .e-neuro-movie__content__list__item__anchor__arrow__path { fill: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor:hover .e-neuro-movie__content__list__item__anchor__arrow__path { fill: #ffffff; } } .e-neuro-movie__columns__column:nth-child(1) { overflow: hidden; } @media screen and (min-width: 768px) { .e-neuro-movie__columns { display: flex; justify-content: space-between; } .e-neuro-movie__columns__column:nth-child(1) { width: 250px; } .e-neuro-movie__columns__column:nth-child(2) { width: calc(100% - 290px); } } @media screen and (min-width: 1050px) { .e-neuro-movie__columns__column:nth-child(1) { width: 300px; } .e-neuro-movie__columns__column:nth-child(2) { width: calc(100% - 340px); } } .e-neuro-movie__movie-wrap { overflow: hidden; } .e-neuro-movie__movie { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; backface-visibility: hidden; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor:hover .e-neuro-movie__movie { transform: scale(1.05); } } .e-neuro-movie__movie:before { content: ""; display: block; padding-top: 56.25%; } .e-neuro-movie__movie:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0d0d0d; opacity: .3; transition: .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__anchor:hover .e-neuro-movie__movie:after { opacity: .5; } } .e-neuro-movie__movie__svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; z-index: 2; } .e-neuro-movie__movie__svg__path { fill: #ffffff; } .e-neuro-movie__content__list__item__category { display: flex; flex-wrap: wrap; margin-top: 13px; margin-left: -2.5px; margin-right: -2.5px; margin-bottom: -2.5px; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__category.e-neuro-movie__content__list__item__category--head { margin-top: -2.5px; } .e-neuro-movie__content__list__item__category.e-neuro-movie__content__list__item__category--bottom { margin-top: 14.5px; } } .e-neuro-movie__content__list__item__category__item { box-sizing: border-box; padding: 2.5px; } .e-neuro-movie__content__list__item__category__item__inner { display: inline-block; box-sizing: border-box; padding: 5px 10px; font-size: 1.1rem; letter-spacing: .1em; text-align: center; } @media screen and (min-width: 768px) { .e-neuro-movie__content__list__item__category__item__inner { font-size: 1.2rem; } } .e-neuro-movie__content__list__item__category--head .e-neuro-movie__content__list__item__category__item__inner { background-color: #0d0d0d; color: #ffffff; } .e-neuro-movie__content__list__item__category__item.e-neuro-movie__content__list__item__category__item--white .e-neuro-movie__content__list__item__category__item__inner { padding: 4px 10px; color: #808080; border: 1px solid #808080; } .e-neuro-movie__content__list__item__category__item.e-neuro-movie__content__list__item__category__item--gray .e-neuro-movie__content__list__item__category__item__inner { background-color: #808080; color: #fff; } .e-neuro-movie__columns__column__title { font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .e-neuro-movie__columns__column__title { font-size: 1.8rem; } } .e-neuro-movie__columns__column__title:not(:first-child) { margin-top: 10px; } .e-neuro-movie__columns__column__sub-title { margin-top: 5px; font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; } @media screen and (min-width: 768px) { .e-neuro-movie__columns__column__sub-title { margin-top: 7px; font-size: 1.5rem; } } .e-neuro-movie__columns__column__date { margin-top: 15px; color: #808080; font-family: 'Barlow', sans-serif; font-size: 1.3rem; font-weight: 500; letter-spacing: .1em; line-height: 1; padding-right: 30px; } @media screen and (min-width: 768px) { .e-neuro-movie__columns__column__date { margin-top: 17px; font-size: 1.4rem; } } .e-neuro-movie__links { margin-top: 15px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .e-neuro-movie__links { margin-top: 10px; display: flex; flex-wrap: wrap; width: calc(100% - 260px); margin-left: auto; margin-right: -15px; } } @media screen and (min-width: 1050px) { .e-neuro-movie__links { margin-top: 15px; width: calc(100% - 310px); } } @media screen and (min-width: 768px) { .e-neuro-movie__links__item { box-sizing: border-box; width: 50%; padding-left: 15px; padding-right: 15px; } } .e-neuro-movie__links__item:not(:first-child) { margin-top: 15px; } @media screen and (min-width: 768px) { .e-neuro-movie__links__item:not(:first-child) { margin-top: 0; } .e-neuro-movie__links__item:nth-child(n+3) { margin-top: 15px; } } .e-neuro-movie__links__item__anchor { display: inline-block; position: relative; letter-spacing: .1em; font-size: 1.4rem; font-weight: 500; line-height: 1.5; padding-left: 20px; transition: opacity .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__links__item__anchor { font-size: 1.6rem; } } @media screen and (min-width: 1050px) { .e-neuro-movie__links__item__anchor:hover { opacity: .6; } } .e-neuro-movie__links__item__anchor__icon { display: block; position: absolute; top: 6px; left: 0; width: 10px; height: 8.5px; transition: all .5s; } @media screen and (min-width: 768px) { .e-neuro-movie__links__item__anchor__icon { top: 9px; } } .e-neuro-movie__links__item__anchor__icon__arrow { fill: #0d0d0d; transition: fill .5s; } @charset "UTF-8"; /* btc_48_anchor_bottom-right */ .anchor_bottom-right { margin-top: 40px; margin-bottom: 40px; text-align: right; } @media screen and (min-width: 768px) { .anchor_bottom-right { margin-top: 60px; margin-bottom: 60px; } } .anchor_bottom-right__link { display: inline-block; position: relative; letter-spacing: .1em; font-size: 1.4rem; font-weight: 500; line-height: 1.5; padding-left: 20px; transition: opacity .5s; } @media screen and (min-width: 768px) { .anchor_bottom-right__link { font-size: 1.5rem; padding-left: 25px; } } @media screen and (min-width: 1280px) { .anchor_bottom-right__link:hover { opacity: .6; } } .anchor_bottom-right__link__icon { display: block; position: absolute; top: 6px; left: 0; width: 10px; height: 8.5px; transform: rotate(-90deg); transition: all .5s; } @media screen and (min-width: 768px) { .anchor_bottom-right__link__icon { top: 6px; width: 12px; height: 10px; } } .anchor_bottom-right__link__icon__arrow { fill: #0d0d0d; transition: fill .5s; } @charset "UTF-8"; /* unq_26_clinician_current_issue */ .section-current-issue-clinician { margin-top: 40px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-current-issue-clinician { margin-top: 45px; margin-bottom: 80px; } } @media screen and (min-width: 768px) { .current-issue-clinician__columns { display: flex; } } .current-issue-clinician__columns__column.current-issue-clinician__columns__column--image { text-align: center; } @media screen and (min-width: 768px) { .current-issue-clinician__columns__column.current-issue-clinician__columns__column--image { width: 170px; margin-right: 40px; } } .current-issue-clinician__columns__column.current-issue-clinician__columns__column--image img { max-width: 180px; width: 100%; } @media screen and (min-width: 768px) { .current-issue-clinician__columns__column.current-issue-clinician__columns__column--image img { max-width: none; } } .current-issue-clinician__columns__column.current-issue-clinician__columns__column--text { margin-top: 30px; } @media screen and (min-width: 768px) { .current-issue-clinician__columns__column.current-issue-clinician__columns__column--text { margin-top: 0; width: calc(100% - 240px); } } .current-issue-clinician__columns__column__title { font-size: 1.8rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .current-issue-clinician__columns__column__title { font-size: 2.4rem; } } .current-issue-clinician__columns__column__paragraph { font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .current-issue-clinician__columns__column__paragraph { font-size: 1.5rem; } } .current-issue-clinician__columns__column__paragraph:not(:first-child) { margin-top: 15px; } .clinician-button-wrap { margin-top: 25px; } @media screen and (min-width: 768px) { .clinician-button-wrap { margin: 25px -5px -5px -5px; display: flex; } } .clinician-button { max-width: 300px; } @media screen and (min-width: 768px) { .clinician-button { max-width: none; width: 220px; } } @media screen and (min-width: 768px) { .clinician-button { padding: 5px; } } .clinician-button:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .clinician-button:not(:first-child) { margin-top: 0; } } .clinician-button__anchor { display: block; position: relative; border-radius: 100px; padding: 10px 10px 9px; text-align: center; border: 1px solid #0d0d0d;; background-color: #0d0d0d; color: #ffffff; font-size: 1.3rem; line-height: 1.5; word-break: break-all; transition: all .5s; } @media screen and (min-width: 768px) { .clinician-button__anchor { padding: 11px 10px; font-size: 1.4rem; } } @media screen and (min-width: 768px) { .clinician-button__anchor:hover { background-color: #ffffff; color: #0d0d0d; } } .clinician-button__anchor__inner { position: relative; display: inline-block; padding-left: 25px; } .clinician-button.clinician-button--no-icon .clinician-button__anchor__inner { padding-left: 0; } .clinician-button__anchor__inner__arrow { display: block; position: absolute; top: 50%; left: 0; width: 13px; height: 15px; transform: translateY(-50%); transition: all .5s; } .clinician-button__anchor__inner__arrow__path { fill: #ffffff; transition: all .5s; } @media screen and (min-width: 768px) { .clinician-button__anchor:hover .clinician-button__anchor__inner__arrow__path { fill: #0d0d0d; } } .read-trial { margin-top: 25px; padding: 25px 20px; background-color: #f7f7f7; } @media screen and (min-width: 768px) { .read-trial { margin-top: 30px; padding: 30px 40px; } } .read-trial__title { font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .read-trial__title { font-size: 1.8rem; } } .read-trial__link { margin-top: 15px; } .read-trial__link__anchor { position: relative; display: inline-block; padding-left: 17px; font-size: 1.3rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } @media screen and (min-width: 768px) { .read-trial__link__anchor { font-size: 1.5rem; } } @media screen and (min-width: 768px) { .read-trial__link__anchor:hover { text-decoration: underline; opacity: .6; } } .read-trial__link__anchor:focus { text-decoration: underline; } .read-trial__link__anchor:before { content: ""; display: block; width: 11px; height: 14px; position: absolute; top: 3px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 11px 14px; } @media screen and (min-width: 768px) { .read-trial__link__anchor:before { top: 4px; width: 12px; height: 15px; background-size: 12px 15px; } } .read-trial__paragraph { margin-top: 15px; font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .read-trial__paragraph { font-size: 1.4rem; } } @charset "UTF-8"; /* unq_27_clinician_back_number */ .section-backnumber-clinician { margin-top: 60px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-backnumber-clinician { margin-top: 80px; margin-bottom: 80px; } } .backnumber-clinician__content:not(:first-child) { margin-top: 50px; } @media screen and (min-width: 1280px) { .backnumber-clinician__columns-wrap { display: flex; flex-wrap: wrap; margin-left: -25px; margin-right: -25px; } } .backnumber-clinician__columns { display: flex; box-sizing: border-box; } @media screen and (min-width: 1280px) { .backnumber-clinician__columns { width: 50%; padding-left: 25px; padding-right: 25px; } } .backnumber-clinician__columns:not(:first-child) { margin-top: 30px; } @media screen and (min-width: 768px) { .backnumber-clinician__columns:not(:first-child) { margin-top: 40px; } } @media screen and (min-width: 1280px) { .backnumber-clinician__columns:not(:first-child) { margin-top: 0; } .backnumber-clinician__columns:nth-child(n+3) { margin-top: 50px; } } @media screen and (min-width: 768px) { .backnumber-clinician__content__h3.heading-3 { margin-bottom: 40px; } } .backnumber-clinician__columns__column.backnumber-clinician__columns__column--image { width: 90px; margin-right: 20px; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column.backnumber-clinician__columns__column--image { width: 120px; margin-right: 25px; } } .backnumber-clinician__columns__column.backnumber-clinician__columns__column--image a { transition: .5s; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column.backnumber-clinician__columns__column--image a:hover { opacity: .6; } } .backnumber-clinician__columns__column.backnumber-clinician__columns__column--image img { width: 100%; } .backnumber-clinician__columns__column.backnumber-clinician__columns__column--text { width: calc(100% - 110px); } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column.backnumber-clinician__columns__column--text { width: calc(100% - 145px); } } .backnumber-clinician__columns__column__no { font-size: 1.3rem; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column__no { font-size: 1.5rem; } } .backnumber-clinician__columns__column__title { font-size: 1.5rem; font-weight: 500; letter-spacing: .1em; line-height: 1.5; color: #222222; } .backnumber-clinician__columns__column__title:not(:first-child) { margin-top: 10px; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column__title { font-size: 1.8rem; } } .backnumber-clinician__columns__column__title__anchor { text-decoration: underline; transition: .5s; } .backnumber-clinician__columns__column__title__anchor:hover, .backnumber-clinician__columns__column__title__anchor:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column__title__anchor:hover { opacity: .6; } } .backnumber-clinician__columns__column__paragraph { font-size: 1.2rem; letter-spacing: .1em; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column__paragraph { font-size: 1.4rem; } } .backnumber-clinician__columns__column__paragraph:not(:first-child) { margin-top: 15px; } @media screen and (max-width: 767px) { .backnumber-clinician__columns__column .clinician-button { max-width: 185px; } } @media screen and (min-width: 768px) { .backnumber-clinician__columns__column .clinician-button:not(:first-child) { margin-top: 15px; } } .home-link-button.home-link-button--backnumber-clinician { margin-top: 35px; } @media screen and (min-width: 768px) { .home-link-button.home-link-button--backnumber-clinician { margin-top: 50px; } } .home-link-button--backnumber-clinician__arrow { width: 13px; height: 15px; position: relative; top: 2px; } @charset "UTF-8"; /* unq_28_clinician_pdf */ .section-pdf-clinician { margin-top: 30px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-pdf-clinician { margin-top: 40px; margin-bottom: 80px; } } .pdf-clinician__lists { } .pdf-clinician__lists__item { padding-bottom: 20px; } .pdf-clinician__lists__item:not(:first-child) { padding-top: 20px; border-top: 1px solid #dbdbdb; } .pdf-clinician__lists__item:last-child { border-bottom: 1px solid #dbdbdb; } .pdf-clinician__lists__item__anchor { position: relative; display: inline-block; padding-left: 20px; font-size: 1.6rem; font-weight: 500; line-height: 1.5; text-decoration: underline; transition: opacity .5s; } .pdf-clinician__lists__item__anchor:focus { text-decoration: underline; } @media screen and (min-width: 768px) { .pdf-clinician__lists__item__anchor { padding-left: 25px; font-size: 1.8rem; } .pdf-clinician__lists__item__anchor:hover { text-decoration: underline; opacity: .6; } } .pdf-clinician__lists__item__anchor:before { content: ""; display: block; width: 12px; height: 15px; position: absolute; top: 6px; left: 0; background-image: url(https://22456482.fs1.hubspotusercontent-na1.net/hubfs/22456482/raw_assets/public/medical.eisai/01_JP/assets/images/common/icon_pdf.svg); background-position: 0; background-repeat: no-repeat; background-size: 12px 15px; } @media screen and (min-width: 768px) { .pdf-clinician__lists__item__anchor:before { top: 5px; width: 14px; height: 18px; background-size: 14px 18px; } } .pdf-clinician__lists__item__paragraph { font-size: 1.3rem; line-height: 1.5; color: #222222; } @media screen and (min-width: 768px) { .pdf-clinician__lists__item__paragraph { font-size: 1.5rem; } } .pdf-clinician__lists__item__paragraph:not(:first-child) { margin-top: 10px; } @charset "UTF-8"; /* unq_31_home_button */ .section-home-button { margin-top: 50px; margin-bottom: 60px; } @media screen and (min-width: 768px) { .section-home-button { margin-top: 70px; margin-bottom: 80px; } } @media screen and (min-width: 1280px) { .section-home-button { display: none; } } .home-button-item__anchor { position: relative; display: block; text-align: center; padding: 13.5px; border: 1px solid #dbdbdb; font-size: 1.4rem; font-weight: 500; line-height: 1.5; transition: opacity .5s; } @media screen and (min-width: 768px) { .home-button-item__anchor { padding: 18px; font-size: 1.5rem; } .home-button-item__anchor:hover { opacity: .6; } } .home-button-item__anchor__text { display: inline-block; position: relative; padding-left: 25px; } @media screen and (min-width: 768px) { .home-button-item__anchor__text { padding-left: 30px; } } .home-button-item__anchor__text__arrow { position: absolute; top: 2px; left: 0; width: 17px; height: 17px; border-radius: 20px; padding: 5px; box-sizing: border-box; background-color: #0d0d0d; transition: .5s; } @media screen and (min-width: 768px) { .home-button-item__anchor__text__arrow { top: 0; width: 21px; height: 21px; padding: 6px; } } .home-button-item__anchor__text__arrow__path { fill: #ffffff; } .js-unq35-seminars-area { @media screen and (min-width: 768px) { /* リスト全体(ul) */ .home-seminar__content__list { display: flex; flex-wrap: wrap; } /* 個々のアイテム(li) */ .home-seminar__content__list__item { position: relative; width: 33%; border: none; &:after { content: ''; border-bottom: 1px solid #dbdbdb; position: absolute; bottom: 0; width: calc(100% - 30px); left: 15px; } } /* やじるしアイコン以外部分 */ .home-seminar__columns { display: block; margin-bottom: 10px; } /* 画像ブロック、説明ブロック */ .home-seminar__columns__column { padding: 10px 0; width: 100%; &:nth-child(2) { padding: 10px 15px; width: calc(100% - 30px); } } /* アイテム上下のスペース */ .home-seminar__content__list__item__anchor { position: unset; padding: 0 !important; } /* タイトルの右側をくっつけない */ .home-seminar__columns__column__title { padding-right: 10px; } /* 日付の下にやじるし用のスペースを作る */ .home-seminar__columns__column__date { margin-bottom: 1.5em; } /* やじるしの位置調整 */ .home-seminar__content__list__item__anchor__arrow { right: 15px; bottom: 15px; } } } /* モジュール全体 */ .region-index { margin-bottom: 35px; } /* 領域アイコン */ .region-index__h2 { display: flex; align-items: center; margin-bottom: 35px; } .region-index__h2_icon { padding-top: 14px; img { width: 75px; } } /* 領域名 */ .region-index-h2__title_anchor { text-decoration: underline; } /* 疾患ボックス */ .region-index-diseases { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } /* 疾患名 */ .region-index-disease__item { border: 1px solid #dbdbdb; padding: 15px; } .region-index-disease__item_title { margin-bottom: 0 !important; } .region-index-disease__item_anchor { text-decoration: underline; } /* 品目 */ .region-index-product__item { margin-left: 10px; } .region-index-product__item_title { position: relative; margin: 30px 0 25px 40px !important; } .region-index-product__item_arrow{ width: 25px; height: 25px; left: -40px; } .region-index-product__item_anchor { text-decoration: underline; } /* 剤形 */ .region-index-detail__item { margin-left: 40px; line-height: 2em; } .region-index-detail__item_title { position: relative; } .region-index-detail__item_arrow { width: 25px; height: 25px; top: 2px; left: -25px; background-color: #fff; polygon { fill: #000; } } .region-index-detail__item_anchor { text-decoration: underline; }