@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap"); @import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css); @import url(https://fonts.googleapis.com/icon?family=Material+Icons); /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; line-break: after-white-space; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --c-white: #fff; --c-black: #000; --c-gray: #f4f4f4; --c-red: #BB2032; --c-t-red: #D60018; --c-t-blue: #1A4069; --c-l-blue: #0059b9; --c-b-blue: #084069; --c-b-gray: #E7EBF0; --c-b-yellow: #FFFFF0; --c-orange: #eca672; } /*---------------------------------------- base ----------------------------------------*/ html { height: 100%; font-size: 62.5%; overflow-y: scroll; overflow-x: hidden; scroll-behavior: smooth; } html body { height: 100%; -webkit-text-size-adjust: 100%; } @media screen and (max-width: 768px) { html body { width: 100%; } } body, h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, img, form { margin: 0; padding: 0; border: none; line-height: 100%; list-style-type: none; font-style: normal; font-weight: normal; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; text-align: left; color: var(--c-black); line-height: 1.6; } h1, h2, h3, h4, h5, h6, p, address, ul, ol, li, dl, dt, dd, table, th, td, form, input, textarea, select { font-size: 1.4rem; } h1, h2, h3, h4, h5, h6 { font-family: "TsukuBRdGothic-Regular", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: bold; } h2 { font-size: 3rem; color: var(--c-t-blue); display: inline-block; position: relative; padding: 0px 2rem 0rem 2rem; background: linear-gradient(transparent 80%, #E7EBF0 80%); margin-left: -1.6rem; line-height: 1.3; z-index: -2; margin-bottom: 1rem; } h2::before { position: absolute; content: ""; left: -2px; top: -2px; width: 0; height: 0; border: none; border-left: solid 40px white; border-bottom: solid 79px transparent; z-index: -1; } h2::after { position: absolute; content: ""; right: -3px; top: -7px; width: 0; height: 0; border: none; border-left: solid 40px transparent; border-bottom: solid 79px white; z-index: -1; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } table { border-spacing: 0; } input, textarea, select { vertical-align: middle; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; background-color: #fff; } button { background-color: transparent; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } input, select, button, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; border-radius: 0; padding: 0; } select::-ms-expand { display: none; } textarea { resize: none; } button, input[type=submit], input[type=button], select { cursor: pointer; } input[type=radio]:checked { appearance: none; } img { max-width: 100%; height: auto; vertical-align: middle; } a { text-decoration: none; color: var(--c-l-blue); -webkit-transition: opacity 0.4s ease; transition: opacity 0.4s ease; } a.underline { text-decoration: underline; } @media screen and (min-width: 769px) { a:hover { opacity: 0.8; } a[href^="tel:"] { display: inline-block; pointer-events: none; } } .container { max-width: 1200px; width: 94%; margin: 0 auto; } @media screen and (max-width: 768px) { .container { width: 92%; } } .sp { display: none; } @media screen and (max-width: 768px) { .sp { display: block; } } section { padding: 2.5rem 0 1rem; } .sec_bottom { margin-bottom: 6rem; margin-top: 3rem; } @media screen and (max-width: 768px) { .pc { display: none !important; } address, ul, ol, li, dl, dt, dd, table, th, td, form, input, textarea, select { font-size: 1.4rem; } } strong { font-weight: 700; } /*---------------------------------------- align ----------------------------------------*/ .center { text-align: center; } .right { text-align: right; } /*---------------------------------------- box ----------------------------------------*/ .sample-box-01 { background-color: #e0dddd; margin: 10px 10px 10px 10px; border: 1px solid #afadad; border-radius: 5px; padding: 5px; } .waku01 { background-color: #e0dddd; margin: 10px 10px 10px 10px; border: 1px solid #afadad; border-radius: 5px; padding: 5px; } .waku02 { background-color: #FFFFF0; margin: 10px 10px 10px 10px; border: 1px solid #afadad; border-radius: 5px; padding: 5px; } .box17 { margin: 2em 0; position: relative; padding: 0.5em 3.5em; border-top: solid 2px black; border-bottom: solid 2px black; } .box17::before { content: ""; position: absolute; top: -10px; left: 10px; width: 2px; height: -webkit-calc(100% + 20px); height: calc(100% + 20px); background-color: black; } .box17::after { content: ""; position: absolute; top: -10px; right: 10px; width: 2px; height: -webkit-calc(100% + 20px); height: calc(100% + 20px); background-color: black; } .yokonarabe { display: flex; width: 100%; margin: 0; } .yokonarabe > div { margin: 0 1%; border: 1px solid #999; background: #FFF; width: 48%; } .contents_box { max-width: 650px; height: 550px; background-color: aquamarine; overflow: hidden scroll; margin-left: 30px; } img.border { border: 1px solid; } .box27 { position: relative; margin: 3em 0 5em; padding: 0.5em 2em; border: solid 3px #62c1ce; } .box27:last-of-type { margin: 3em 0 0; } .box27 h3 { position: absolute; display: inline-block; top: -27px; left: -3px; padding: 0 9px; height: 25px; line-height: 25px; font-size: 17px; background: #62c1ce; color: #ffffff; font-weight: bold; border-radius: 5px 5px 0 0; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } .box27 p { font-size: 1.44rem !important; margin: 0 !important; } .box29, .box29B { margin: 2em 0 2em 2em; padding: 0 0 1rem; background: #fee6c4; width: 90%; } @media screen and (max-width: 920px) { .box29, .box29B { width: calc(100% - 2em); } } @media screen and (max-width: 500px) { .box29, .box29B { margin: 2em 0; width: 100%; } } .box29:first-of-type, .box29B:first-of-type { margin: 0 0 2em 2em; } @media screen and (max-width: 500px) { .box29:first-of-type, .box29B:first-of-type { margin: 0 0 2em; } } .box29 h3, .box29B h3 { font-size: 1.8rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; background: #fb7c55; padding: 8px; text-align: left; color: #FFF; letter-spacing: 0.05em; } .box29 p, .box29B p { margin: 1rem 20px 0 !important; font-size: 1.4rem !important; } .box29 { background: #dcefff; } .box29 h3 { background: #36c; } /*---------------------------------------- toTop ----------------------------------------*/ .totop { text-align: right; margin: 20px 0; } /*---------------------------------------- カッコ付きリスト ----------------------------------------*/ ol.brackets { list-style-type: none; } ol.brackets li { counter-increment: cnt; } ol.brackets li::before { content: counter(cnt) " ）"; } /*---------------------------------------- Line ----------------------------------------*/ hr.line { margin: 0 0 10px 0; padding: 2px 0 6px 0; border: 0; border-bottom: dotted 1px #666666; } hr.line.mt30 { margin: 30px 0 10px; } hr.solid { margin: 0 0 20px 0; padding: 4px 0 12px 0; border: 0; border-bottom: solid 1px #999; } .underLine { text-decoration: underline; } span.marker { background: linear-gradient(transparent 50%, #FFFF33 50%); } /*---------------------------------------- New mark ----------------------------------------*/ .new2 { color: #fff; background: #ff9933; padding: 0rem 0.5rem; font-size: 1rem; margin-right: 1rem; } .new3 { color: #006633; background: #ffff33; padding: 0rem 0.5rem; font-size: 1rem; margin-right: 1rem; } /*---------------------------------------- font size ----------------------------------------*/ .lTxt { font-size: 1.68rem !important; } .mTxt { font-size: 1.4rem !important; } .mTxt td { font-size: 1.4rem !important; } .sTxt { font-size: 1.2rem !important; } .gc { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif !important; } /*---------------------------------------- text color ----------------------------------------*/ .redTxt { color: var(--c-red); } .look { color: #c00; } .redTxt02 { color: #900; } .green { color: #166902; } .lGreen { color: #096; } .dkrTxt { color: #993333; } .brown { color: #2E1031; } .blueTxt { color: var(--c-t-blue); } .lBlueTxt { color: var(--c-l-blue); } .orangeTxt { color: var(--c-orange); } /*---------------------------------------- background color ----------------------------------------*/ .bgdred { background: #9D2932; } .bgbrown { background: #6A3931; } .bgdbrown { background: #4F1225; } /*---------------------------------------- button ----------------------------------------*/ .border_btn03 { display: inline-block; width: 100%; max-width: 230px; border: 2px solid #B476CE; color: #B476CE; background: #fff; padding: 1em 2em; font-weight: bold; text-decoration: none; text-align: center; transition: 0.3s; } .border_btn03:hover { border-style: dashed; } @media screen and (max-width: 478px) { .border_btn03 { margin: 0 0 10px; } } .shiny_btn01 { display: inline-block; position: relative; width: 100%; max-width: 150px; padding: 1em 2em; background-color: #F88400; box-shadow: 0 3px 0 0 #995100; border-radius: 10px; font-weight: bold; color: #fff; text-align: center; text-decoration: none; overflow: hidden; transition: 0.3s; } .shiny_btn01::before { content: ""; display: inline-block; position: absolute; top: -180px; left: 0; width: 30px; height: 100%; background-color: #fff; transition: 0.2s; animation: shiny_btn01 3s ease-in-out infinite; } .shiny_btn01:hover { text-decoration: none; color: #fff; box-shadow: none; transform: translateY(3px); } /*---------------------------------------- margin ----------------------------------------*/ .m0 { margin: 0; } .m10 { margin: 10px 0; } .mt10 { margin: 10px 0 0; } .mb10 { margin: 0 0 10px; } .m20 { margin: 20px 0; } .mt20 { margin: 20px 0 0; } .mb20 { margin: 0 0 20px; } .m30 { margin: 30px 0; } .mt30 { margin-top: 30px; } .mb30 { margin-bottom: 30px; } .ml30 { margin-left: 30px !important; } @media screen and (max-width: 679px) { .ml30 { margin: 0 !important; } } .mt50 { margin-top: 50px; } .mauto { margin: 0 auto; } .mauto20 { margin: 20px auto; } /*---------------------------------------- padding ----------------------------------------*/ p.pd10, div.pd10 { padding: 10px !important; } p.pd20, div.pd20 { padding: 20px !important; } p.pd30, div.pd30 { padding: 30px !important; } p.pd40, div.pd40 { padding: 40px !important; } /*---------------------------------------- width ----------------------------------------*/ .w20 { width: 20%; } .w25 { width: 25%; } .w30 { width: 30%; } .w40 { width: 40%; } .w50 { width: 50%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; } @media screen and (max-width: 679px) { .w80 { width: 90%; } } .w90 { width: 90%; } .mw640 { max-width: 640px; } /*---------------------------------------- display none ----------------------------------------*/ .dnone { display: none; } /*---------------------------------------- mov ----------------------------------------*/ .movResponsive { max-width: 640px; } .responsive, .movResponsive iframe { width: 100%; aspect-ratio: 16/9; height: auto; } /*---------------------------------------- figure ----------------------------------------*/ figure.indent2 { margin: 0 0 0 20px; text-indent: 1.5rem; } @media screen and (max-width: 500px) { figure.indent2 { text-indent: 0; } } figure.indent2.mt30 { margin: 30px 0 0 20px; } figure.border img { border: 1px solid #000; } /*---------------------------------------- ruby ----------------------------------------*/ [data-ruby] { position: relative; } [data-ruby]::before { content: attr(data-ruby); position: absolute; top: -1em; left: 50%; transform: translateX(-50%); margin: auto; font-size: 0.5em; font-weight: 400; width: max-content; } .t12[data-ruby]::before { top: -1.2em; } .t15[data-ruby]::before { top: -1.5em; } /*---------------------------------------- MV ----------------------------------------*/ @keyframes mv { 0% { opacity: 0; } 8.5% { opacity: 1; } 12.5% { opacity: 1; } 37.5% { opacity: 1; } 50% { opacity: 0; } } @keyframes shiny_btn01 { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } /*---------------------------------------- Top Page ----------------------------------------*/ .intro_area { display: flex; flex-flow: nowrap; align-items: flex-start; align-self: center; justify-content: space-between; margin: 0rem auto 10rem; position: relative; } @media screen and (max-width: 970px) { .intro_area { flex-flow: column; margin-bottom: 3rem; } } .intro_area a { width: 320px; } @media screen and (max-width: 970px) { .intro_area a { margin: 30px auto; width: 100%; } } .intro_area P { text-align: center; color: var(--c-t-red); font-family: "TsukuBRdGothic-Regular", sans-serif; } .intro_area h3 { text-align: center; font-size: 2.2rem; margin: 1rem auto; color: var(--c-t-blue); } @media screen and (max-width: 970px) { .intro_area h3 { font-size: 2rem; } } .intro_area h3 span { display: block; font-size: 1.8rem; } @media screen and (max-width: 970px) { .intro_area h3 span { display: inline-block; } } .intro_area .box { position: relative; } @media screen and (max-width: 970px) { .intro_area .box { margin: 2rem auto; } } .intro_area .box img { position: relative; z-index: 1; width: 120px; } @media screen and (max-width: 970px) { .intro_area .box img { width: 100px; } } .intro_area .box .box_inner { background: var(--c-b-gray); width: 320px; height: 170px; padding: 70px 15px 10px; border-radius: 10px; z-index: 0; position: absolute; top: 50px; } @media screen and (max-width: 970px) { .intro_area .box .box_inner { width: 100%; height: auto; top: 50px; padding: 40px 5px 10px; } } .news_area { margin: 0 0 0 12%; } @media screen and (max-width: 970px) { .news_area { margin: 0; } } .news_area p { padding-left: 1rem; } .new { color: var(--c-white); background: var(--c-red); padding: 0.1rem 0.5rem; margin-left: -4rem; font-size: 1.2rem; margin-right: 1rem; } @media screen and (max-width: 970px) { .new { margin-left: 0; } } .upcoming { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: 3rem; } .upcoming li { margin-right: 5rem; margin-bottom: 2rem; width: 10%; } @media screen and (max-width: 768px) { .upcoming li { margin-right: 3rem; width: 25%; } } .upcoming img { border: 1px solid; } .upcoming3 { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: 3rem; } .upcoming3 li { margin-right: 5rem; margin-bottom: 2rem; width: 25%; } .upcoming3 img { border: 1px solid; } .upcoming2 { display: flex; flex-wrap: wrap; flex-direction: row; margin-top: 3rem; } .upcoming2 li { margin-right: 5rem; margin-bottom: 2rem; width: 15%; } @media screen and (max-width: 768px) { .upcoming2 li { margin-right: 3rem; width: 30%; /* スマホ表示の下部バナー枠の設定 */ } } /*---------------------------------------- 固定ページ(デフォルトテンプレート） ----------------------------------------*/ .pageContainer { max-width: 1200px; width: 94%; margin: 0 auto; } @media screen and (max-width: 768px) { .pageContainer { width: 100%; max-width: none; margin: 0; } } .pageContainer .oneline2 { max-width: 1000px; width: 100%; margin: 0 auto; text-align: center; } @media screen and (max-width: 970px) { .pageContainer .oneline2 { max-width: none; } } .pageContainer .oneline2 #oneline2 { width: 90%; float: right; font-size: 1.2em; padding: 0 0 10px 0; text-align: left; } @media screen and (max-width: 970px) { .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 { padding: 0 20px; } } .pageContainer .oneline2 #oneline2 h1 { font-size: 3rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 400; text-align: center; } .pageContainer .oneline2 #oneline2 h1.info { text-indent: -9999em; margin: 0 auto; background: url(images/com_guide.gif) no-repeat; height: 33px; width: 200px; } .pageContainer .oneline2 #oneline2 h1.ayumi { text-indent: -9999em; margin: 0 auto; background: url(images/ayumi2.gif) no-repeat; height: 33px; width: 200px; } .pageContainer .oneline2 #oneline2 h1.request_form { text-indent: -9999em; margin: 0 auto; background: url(images/request_form2.gif) no-repeat; height: 33px; width: 283px; } .pageContainer .oneline2 #oneline2 h1.recruit { text-indent: -9999em; margin: 0 auto; background: url(images/recruit.gif) no-repeat; height: 33px; width: 200px; } .pageContainer .oneline2 #oneline2 h1.sitemap { text-indent: -9999em; margin: 0 auto; background: url(images/sitemap.gif) no-repeat; height: 33px; width: 200px; } .pageContainer .oneline2 #oneline2 h1.privacy_policy { text-indent: -9999em; margin: 0 auto; background: url(images/privacy_policy.gif) no-repeat; height: 40px; width: 450px; margin: 0 0 -20px; } @media screen and (max-width: 450px) { .pageContainer .oneline2 #oneline2 h1.privacy_policy { width: 100%; background-size: contain; } } .pageContainer .oneline2 #oneline2 h1.lib_use { text-indent: -9999em; margin: 0 auto 20px; background: url(images/lib_use.gif) no-repeat; height: 48px; width: 421px; } @media screen and (max-width: 421px) { .pageContainer .oneline2 #oneline2 h1.lib_use { width: 100%; background-size: contain; } } .pageContainer .oneline2 #oneline2 h1.lan_price { text-indent: -9999em; margin: 0 auto 20px; background: url(images/cd_lan_logo.gif) no-repeat; height: 40px; width: 478px; } @media screen and (max-width: 478px) { .pageContainer .oneline2 #oneline2 h1.lan_price { width: 100%; background-size: contain; } } .pageContainer .oneline2 #oneline2 h1.license_pack { text-indent: -9999em; margin: 0 auto 20px; background: url(images/license_pack.gif) no-repeat; height: 23px; width: 274px; } .pageContainer .oneline2 #oneline2 h1.explain { text-indent: -9999em; margin: 0 auto 20px; background: url(images/explain.gif) no-repeat; height: 56px; width: 447px; } @media screen and (max-width: 447px) { .pageContainer .oneline2 #oneline2 h1.explain { width: 100%; background-size: contain; } } .pageContainer .oneline2 #oneline2 h1 + h2 { margin: 0; } .pageContainer .oneline2 #oneline2 h2 { font-size: 1.3em; border-bottom-style: dotted; border-bottom-width: 1px; display: block; margin: 30px 0 0; padding: 0; background: none; line-height: 1.6; position: static; } .pageContainer .oneline2 #oneline2 p { margin: 0 15px 2px 5px; padding: 0; font-size: 1.1em; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 p { margin: 0 0 2px; } } .pageContainer .oneline2 #oneline2 p.indent4 { text-indent: 1em; padding-left: 1em; font-size: 1.2em; margin: 20px 15px 2px 5px; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 p.indent4 { margin: 20px 0 2px; } } .pageContainer .oneline2 #oneline2 p.note { background: #f0f8ff; display: inline-block; padding: 8px; margin: 5px 0 0 2.5em; font-size: 1.2rem; font-weight: bold; } .pageContainer .oneline2 #oneline2 p.indent2 { text-indent: 0.5em; margin: 20px 15px 2px 5px; font-size: 1.44rem; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 p.indent2 { margin: 20px 0 2px; } } .pageContainer .oneline2 #oneline2 p.close { text-align: center; margin: 30px 0; } .pageContainer .oneline2 #oneline2 p.mt20 { margin: 20px 15px 2px 5px; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 p.mt20 { margin: 20px 0 2px; } } .pageContainer .oneline2 #oneline2 p.mt30 { margin: 30px 10px 2px 5px; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 p.mt30 { margin: 30px 0 2px; } } .pageContainer .oneline2 #oneline2 li.indent4 { margin-left: -1.2em; text-indent: 1.2em; font-size: 1.44rem; } .pageContainer .oneline2 #oneline2 img.margin { margin: 2px 10px; } @media screen and (max-width: 430px) { .pageContainer .oneline2 #oneline2 img.margin { float: none; display: block; margin: 0 auto 0.5em; } } .pageContainer .oneline2 #oneline2 figure.ml30 { margin: 0 0 0 30px !important; } @media screen and (max-width: 768px) { .pageContainer .oneline2 #oneline2 figure.ml30 { margin: 0 !important; } } .pageContainer .oneline2 #oneline2 table { border: solid var(--c-black); border-width: 2px 2px 0; } .pageContainer .oneline2 #oneline2 table th { border-bottom: 2px solid var(--c-black); border-right: 2px solid var(--c-black); background-color: #E2E7E6; padding: 10px; font-weight: bold; font-size: 1.2rem; vertical-align: middle; } .pageContainer .oneline2 #oneline2 table td { border-bottom: 2px solid var(--c-black); padding: 10px; font-size: 1.2rem; } .pageContainer .oneline2 #oneline2 .tbl-r03 table { width: 70%; border-spacing: 0px; margin: 20px auto 30px; } @media screen and (max-width: 500px) { .pageContainer .oneline2 #oneline2 .tbl-r03 table { width: 100%; } } .pageContainer .oneline2 #oneline2 .tbl-r03 table th { text-align: center; white-space: nowrap; } .pageContainer .oneline2 #oneline2 ol { font-size: 1em; line-height: 180%; } .pageContainer .oneline2 #oneline2 ol li { font-size: 1em; } .pageContainer .oneline2 #oneline2 ol + p + .indent2 { margin: 0 10px 30px 0; } .pageContainer .oneline2 #oneline2 .cdTable table { border: none; margin: 0; } .pageContainer .oneline2 #oneline2 .cdTable table thead { border: none; } .pageContainer .oneline2 #oneline2 .cdTable table th { background: #DBFECF; text-align: center; border: 1px solid #ccc; font-size: 1.33rem; } .pageContainer .oneline2 #oneline2 .cdTable table td { border: 1px solid #ccc; } .pageContainer .oneline2 #oneline2 .cdTable02 table { border: none; margin: 0 0 20px; } .pageContainer .oneline2 #oneline2 .cdTable02 table thead { border: none; } .pageContainer .oneline2 #oneline2 .cdTable02 table th { background: #ddd; text-align: center; border: 1px solid #bbb; padding: 3px; font-size: 1.33rem; } .pageContainer .oneline2 #oneline2 .cdTable02 table td { border: 1px solid #bbb; vertical-align: middle; padding: 3px; font-size: 1.3rem; text-align: right; } @media screen and (max-width: 800px) { .pageContainer .oneline2 #oneline2 .cdTable02 table td img { display: block; margin: 5px 0 0; } } .pageContainer .oneline2 #oneline2 .cdTable02 table tr td:first-child { text-align: left; } .pageContainer .oneline2 #oneline2 .cdTable02 table tr td:nth-last-child(2) { text-align: right; } .pageContainer .oneline2 #oneline2 .roudoku { margin: 30px auto; width: 70%; } @media screen and (max-width: 500px) { .pageContainer .oneline2 #oneline2 .roudoku { width: 100%; } } .pageContainer .oneline2 #oneline2 .roudoku table { border: none; margin: 0; border: 1px solid; } .pageContainer .oneline2 #oneline2 .roudoku table th { text-align: center; border: 1px solid; } .pageContainer .oneline2 .access { margin: 0 0 0 30px; } .pageContainer .oneline2 .access h3 { font-size: 1.2rem; margin: 0 0 6px; } .pageContainer .oneline2 .access li { font-size: 1.2rem; margin: 0 0 6px 2.5em; text-indent: -2.25em; } .pageContainer .oneline2 .access li::before { margin: 0 0.5em 0 0; } .pageContainer .oneline2 .access li img { margin: 8px; } .pageContainer .oneline2 .access li table { text-indent: 0; margin: 10px 0 0 2em; } .pageContainer .oneline2 .access li table th, .pageContainer .oneline2 .access li table td { padding: 10px; } .pageContainer .oneline2 a { color: #00497c; } .pageContainer .oneline2 .pageNav { margin: 20px 0 !important; } .pageContainer .oneline2 .pageNav a { display: inline-block; } .pageContainer img { max-width: 100%; height: auto; vertical-align: middle; } .pageContainer dl.ayumi { font-family: "TsukuBRdGothic-Regular", "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; margin: 0 0 30px; } .pageContainer dl.ayumi dt { font-size: 1.4rem; font-weight: bold; border-bottom-style: dotted; border-bottom-width: 1px; } .pageContainer dl.ayumi dd { text-indent: -1em; margin: 0 10px 2px 2em; padding: 0 5px 0px 5px; font-size: 1.2rem; } .pageContainer dl.ayumi dd::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; background: #99CC00; transform: rotate(45deg); vertical-align: 2px; } .ebook .pageContainer .oneline2 #oneline2 h1 { color: #1A4069; padding: 0px 2rem 0rem 2rem; background: linear-gradient(transparent 80%, #E7EBF0 80%); margin-left: -1.6rem; line-height: 1.3; margin-bottom: 30px; } .ebook .pageContainer .oneline2 #oneline2 ul li { line-height: 150%; list-style-type: circle; } .ebook .pageContainer .oneline2 #oneline2 .flexContainer > div { display: flex; flex-wrap: wrap; align-items: center; margin: 30px 0; } .ebook .pageContainer .oneline2 #oneline2 .flexContainer > div > div { width: 50%; margin: 0 0 20px; } .ebook .pageContainer .oneline2 #oneline2 .flexContainer > div > div img { padding: 0 10px; } .ebook .pageContainer .oneline2 #oneline2 .flexContainer > div > div p { margin: 0.5em 0 0; } .windows7_capable .pageContainer .oneline2 { max-width: none; } .windows7_capable .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .windows7_capable .pageContainer .oneline2 #oneline2 h2 { margin: 30px 0 10px; text-align: center; border: none; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.3rem; font-weight: normal; color: var(--c-black); } .lib_use .pageContainer .oneline2 #oneline2 h2 { color: var(--c-black); } .lib_use .pageContainer .oneline2 #oneline2 p { font-size: 1.44rem; overflow-wrap: anywhere; } .lan_price .pageContainer .oneline2 { max-width: none; } .lan_price .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .lan_price .pageContainer .oneline2 #oneline2 h2 { margin: 20px 0 10px; border: none; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.8rem; font-weight: normal; color: var(--c-black); } .epwing .pageContainer .oneline2 { max-width: none; } .epwing .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .epwing .pageContainer .oneline2 #oneline2 .os table { border: none; margin: 0 0 20px; } .epwing .pageContainer .oneline2 #oneline2 .os table thead { border: none; } .epwing .pageContainer .oneline2 #oneline2 .os table thead th { background: #ccf; text-align: center; border: 1px solid #bbb; padding: 3px; font-size: 1.33rem; } .epwing .pageContainer .oneline2 #oneline2 .os table tr td { border: 1px solid #bbb; vertical-align: middle; padding: 3px; font-size: 1.3rem; } .epwing .pageContainer .oneline2 #oneline2 .os table tr td[rowspan="3"]:nth-last-of-type(3), .epwing .pageContainer .oneline2 #oneline2 .os table tr td[rowspan="4"]:nth-last-of-type(3), .epwing .pageContainer .oneline2 #oneline2 .os table tr td[rowspan="6"]:nth-last-of-type(3) { text-align: right; } .license_pack .pageContainer .oneline2 { max-width: none; } .license_pack .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .license_pack .pageContainer .oneline2 #oneline2 h2 { font-size: 3rem; color: #1A4069; display: inline-block; position: relative; padding: 0px 2rem 0rem 2rem; background: linear-gradient(transparent 80%, #E7EBF0 80%); margin-left: -1.6rem; line-height: 1.3; z-index: -2; margin-bottom: 1rem; border: none; } .roudoku .pageContainer .oneline2 #oneline2 h2 { color: var(--c-black); } .sitemap .flexContainer > div { display: flex; } .sitemap .flexContainer > div .flexItem { width: 50%; } .sitemap .flexContainer > div .flexItem h2 { border: none !important; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.8rem !important; } .sitemap .flexContainer > div .flexItem h2 + ul { margin: 0 0 20px 1.8rem; } .sitemap .flexContainer > div .flexItem h2 + ul li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; background: #9c0; transform: rotate(45deg); } .sitemap .flexContainer > div .flexItem h2 + ul li ul { margin: 0 0 0 1rem; } .sitemap .flexContainer > div .flexItem h2 + ul li ul li::before { content: ""; display: inline-block; width: 0.5em; height: 0.5em; margin-right: 0.5em; background: #6cf; transform: rotate(0); } .order .pageContainer .oneline2 #oneline2 h2 { border: none !important; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; color: var(--c-black); } .order .pageContainer .oneline2 #oneline2 h2::before, .order .pageContainer .oneline2 #oneline2 h2::after { display: none; } .order .pageContainer .oneline2 #oneline2 ul li { list-style: circle; font-size: 1.2rem; } .order .pageContainer .oneline2 #oneline2 ol li { list-style: decimal; font-size: 1.2rem; font-weight: 700; } .order .pageContainer .oneline2 #oneline2 ol ul li { list-style: circle; font-weight: 400; } .order .pageContainer .oneline2 #oneline2 table { max-width: 540px; border: none; } @media screen and (max-width: 640px) { .order .pageContainer .oneline2 #oneline2 table { margin: 0; } } .order .pageContainer .oneline2 #oneline2 table th { text-align: center; background: #e8e0dc; border: 3px double var(--c-black); } .order .pageContainer .oneline2 #oneline2 table td { border: 3px double var(--c-black); } .explain .pageContainer .oneline2 { max-width: none; } .explain .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex { align-items: normal; } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex { display: block; } } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi { width: 250px; padding: 40px 0 0; } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi { width: 100%; padding: 0; } } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul { display: flex; flex-wrap: wrap; } } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li { border: 1px solid #999; font-size: 1.1rem; white-space: nowrap; background: #EEEEEE; width: 230px; margin: 0 0 15px; padding: 7px 20px; } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li { width: 25%; margin: 0 0 5px; padding: 7px 1em; } } @media screen and (max-width: 600px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li { width: 33.333%; } } @media screen and (max-width: 375px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li { width: auto; } } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li:last-child { border: none; background: none; } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .pageNavi ul li a { display: block; } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent { width: calc(100% - 250px); padding: 0 0 0 50px; } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent { width: 100%; padding: 0; } } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent h2 { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; margin: 30px 0 7px; padding: 9px 0 10px; line-height: 110%; font-size: 1.6rem; color: #333333; text-decoration: underline; border: none; color: var(--c-black); } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent h2:first-child { margin: 0 0 7px; } @media screen and (max-width: 920px) { .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent h2:first-child { margin: 30px 0 7px; } } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent ul li { margin: 0 4rem; color: #000000; list-style-type: disc; font-size: 1.2rem; } .explain .pageContainer .oneline2 #oneline2 .is-layout-flex .mainContent figure { margin: 10px 4rem; } /*---------------------------------------- デジタルコンテンツ用テンプレート ----------------------------------------*/ #containerz { width: 100%; margin: 14px auto 0; overflow: hidden; padding: 10px; } #containerz #contents { float: right; margin: 0; padding: 4px 0 5px 0; font-size: 1.2em; width: calc(100% - 280px); text-align: left; } @media screen and (max-width: 920px) { #containerz #contents { margin: 0; padding: 10px 8px 5px 8px; font-size: 1.2em; width: 100%; letter-spacing: 0.05em; text-align: left; line-height: 1.7; float: none; } } @media screen and (max-width: 500px) { #containerz #contents { padding: 10px 0 5px; } } #containerz #contents h1 { font-size: 3rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 400; color: #1A4069; padding: 0px 2rem 0rem 2rem; background: linear-gradient(transparent 80%, #E7EBF0 80%); margin-left: -1.6rem; line-height: 1.3; margin-bottom: 30px; text-align: left; } #containerz #contents h1 span { display: none; } @media screen and (max-width: 920px) { #containerz #contents h1 { margin: 0 0 20px; } } @media screen and (max-width: 500px) { #containerz #contents h1 { font-size: 2.2rem; } } #containerz #contents ul li { margin: 0 0 0 4rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; list-style-type: disc; } @media screen and (max-width: 500px) { #containerz #contents ul li { margin-left: 2em; } } #containerz #contents ul li.non { list-style-type: none; } @media screen and (max-width: 500px) { #containerz #contents ul li.non { margin-left: 2em; } } #containerz #contents ul li.number { list-style-type: decimal; font-weight: 700; } #containerz #contents ul li.number.item02 { counter-reset: list-item 2; } #containerz #contents ul li.indent8 { margin-left: 60px; } @media screen and (max-width: 500px) { #containerz #contents ul li.indent8 { margin-left: 2em; } } #containerz #contents ul li.mb20 { margin: 0 4rem 20px; } @media screen and (max-width: 500px) { #containerz #contents ul li.mb20 { margin: 0 0 20px 2em; } } #containerz #contents ul li a { overflow-wrap: anywhere; } #containerz #contents hr.red { border-top: 2px solid var(--c-red); margin: 30px 0; } #containerz #contents p { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; margin: 5px 0 5px 0; padding: 0 2px 0 2px; line-height: 1.7; font-size: 1.5rem; } #containerz #contents p.bTxt { margin: 5px 0 5px 1em; padding: 0 2px 0 2px; line-height: 1.7; font-size: 1.5rem; font-weight: 700; } #containerz #contents p.yohaku { margin-left: 30px; margin-bottom: 20px; line-height: 1.7; font-size: 1.5rem; } @media screen and (max-width: 500px) { #containerz #contents p.yohaku { margin-left: 0; } } #containerz #contents p.yohaku02 { margin-left: 30px; line-height: 1.7; font-size: 1.5rem; } @media screen and (max-width: 500px) { #containerz #contents p.yohaku02 { margin-left: 0; } } #containerz #contents p.green + h2 { margin: 10px 3px 10px 3px; } #containerz #contents p.indent8B { margin-left: 30px; color: #CC0000; } #containerz #contents h2 { margin: 40px 3px 10px 3px; padding: 15px 10px 10px 18px; line-height: 1.4; font-size: 1.8rem; color: #54351f; border-top: solid 1px #dddddd; border-right: solid 1px #dddddd; border-bottom: solid 1px #966934; border-left: solid 5px #966934; background: #ffffff; position: static; display: block; } @media screen and (max-width: 920px) { #containerz #contents h2 { padding: 11px 10px 7px 13px; line-height: 1.7; font-size: 1.28em; color: #662200; border-top: solid 1px #dddddd; border-right: solid 1px #dddddd; border-bottom: solid 1px #bb905d; border-left: solid 5px #bb905d; } } #containerz #contents h2 + ul { margin: 20px 0 0; } #containerz #contents h2.border { color: #003366; border: dotted #003366; border-width: 0 0 1px 0; margin: 25px 0 5px 0; padding: 0 2px 0 2px; line-height: 1.7; font-size: 1.5rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } #containerz #contents h2.border + ul { margin: 0; } #containerz #contents h2.border + ul + figure.ml30 { margin: 20px 0 0 30px !important; } #containerz #contents h3.obi { padding: 5px 5px 5px 20px; margin: 20px 0; color: var(--c-white); font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 700; } #containerz #contents h3.border { color: #003366; border-bottom: 1px dotted #003366; margin: 25px 0 5px 0; padding: 0 2px 0 2px; line-height: 1.7; font-size: 1.5rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } #containerz #contents div + ul { margin: 20px 0 0; } #containerz #contents ol li { margin: 0 0 0 4rem; color: #000000; list-style-type: decimal; } #containerz #contents ol li.number { margin: 20px 0 0 4rem; font-weight: 700; } #containerz #contents ol li.number ul li { list-style: disc; margin-left: 1em; } #containerz #contents ol li.number ul li.non { list-style: none; } #containerz #contents ol.numberStart { counter-reset: item 2; padding-left: 0; } #containerz #contents ol.numberStart li { display: block; text-indent: -1.2em; } #containerz #contents ol.numberStart li::before { content: counter(item) ". "; counter-increment: item; } #containerz #contents ol.numberStart li ul li { text-indent: 0; padding-left: 0; } #containerz #contents ol.numberStart li ul li::before { display: none; } #containerz #contents dl.company { display: flex; flex-flow: row wrap; width: 100%; } @media screen and (max-width: 500px) { #containerz #contents dl.company { display: block; } } #containerz #contents dl.company dt { flex-basis: 45%; padding: 10px; background-color: #f1f1f1; border-bottom: 1px solid #ccc; } #containerz #contents dl.company dd { flex-basis: 55%; padding: 10px; background-color: #fff; border-bottom: 1px solid #ccc; } #containerz #contents .yohaku { margin-left: 30px; margin-bottom: 20px; } @media screen and (max-width: 500px) { #containerz #contents .yohaku { margin-left: 0; } } #containerz #contents .contentContainer div { margin: 0 0 0 5px; } #containerz #contents .contentContainer div p { font-size: 1.4rem; } @media screen and (max-width: 500px) { #containerz #contents .contentContainer { display: block; } #containerz #contents .contentContainer figure { text-align: center; } } #containerz #side_menu { font-size: 1.2em; float: left; width: 280px; } @media screen and (max-width: 920px) { #containerz #side_menu { margin: 15px 0 15px 0; padding: 0 8px 0 8px; text-align: left; letter-spacing: 0.05em; width: 100%; float: none; } } #containerz #side_menu .menulist { text-align: left; font-size: 1em; } @media screen and (max-width: 920px) { #containerz #side_menu .menulist { margin: 0 0 28px 0; padding: 5px 0 0px 0; text-align: left; font-size: 1.1em; } } #containerz table.yohaku { margin: 0 0 30px 30px; } #containerz table.yohaku th { background: #EEEEEE; padding: 6px; border: 2px solid; vertical-align: middle; font-weight: 400; } #containerz table.yohaku th span { font-weight: 700; } #containerz table.yohaku td { padding: 6px; border: 2px solid; } #containerz table.yohaku caption { text-align: center; margin: 30px 0 0; } #containerz table.yohaku.boder_double { border: 1px solid; border-collapse: separate; border-spacing: 2px; } #containerz table.yohaku.boder_double th { background: #ccc; border: 1px solid; font-weight: 700; } #containerz table.yohaku.boder_double th.normal { font-weight: normal; } #containerz table.yohaku.boder_double td { border: 1px solid; } #containerz table.yohaku.boder_double td.tohoku { background: #91fd9e; } #containerz table.yohaku.boder_double td.kinki { background: #fcbfa1; } #containerz table.yohaku.boder_double td.kanto { background: #b2fd91; } #containerz table.yohaku.boder_double td.chugoku { background: #89c5f9; } #containerz table.yohaku.boder_double td.shikoku { background: #add2f7; } #containerz table.yohaku.boder_double td.chubu { background: #d09df7; } #containerz table.yohaku.boder_double td.hokuriku { background: #e9b7f4; } #containerz table.yohaku.boder_double td.kyusyu { background: #fdeeaa; } #containerz table.yohaku.boder_double td.tokai { background: #FFCCFF; } #containerz table.yohaku.boder_double.centerTxt th, #containerz table.yohaku.boder_double.centerTxt td { text-align: center; vertical-align: middle; } #containerz table.yohaku.boder_double.half td { width: 50%; } #containerz table.yohaku.boder_double.mt30 { margin: 30px 0 30px 30px; } #containerz table.yohaku.w90 { width: 90%; } @media screen and (max-width: 500px) { #containerz table.yohaku.w90 { width: 100%; } } #containerz table.anchorNav { margin: 30px 0 0; } #containerz table.anchorNav td { padding: 5px; } #containerz table.anchorNav td.bg { background: #800000; color: var(--c-white); } #containerz table.anchorNav td.center a { display: inline-block; } #containerz table.anchorNav td ul { margin: 1em 0 0 0.5em; } #containerz table.anchorNav td ul li.non { margin: 0 !important; } #containerz img.waku { border-style: solid; border-width: 1px; margin: 0 2px; } @media screen and (max-width: 920px) { .page-template-page-template-dcs #containerz #contents .box p { font-size: 1.4rem; } } .index8 dl { margin: 0 1em; } /*---------------------------------------- オンライン情報サービス用テンプレート ----------------------------------------*/ .page-template-page-template-online .pageContainer { padding: 0; } @media screen and (max-width: 768px) { .page-template-page-template-online .pageContainer #containerz { padding: 10px 20px; } } .page-template-page-template-online .pageContainer #containerz .titleHeader { margin: 1em 0 40px; } .page-template-page-template-online .pageContainer #containerz .titleHeader h1.online { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 3.2rem; text-align: center; font-weight: 700; margin: 0 0 10px; } .page-template-page-template-online .pageContainer #containerz .titleHeader h1.online span { display: none; } .page-template-page-template-online .pageContainer #containerz .titleHeader h1.online span[data-ruby] { display: inline-block; } .page-template-page-template-online .pageContainer #containerz .titleHeader h1.online span.sTxt { display: inline; font-size: 1.3rem; font-weight: 400; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav { margin: 20px 0; padding: 0 10px; text-align: center; background: #cde4ff; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul { display: inline-block; line-height: 1; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li { display: inline-block; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1; margin: 5px 0; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li::before { content: "｜"; display: inline; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li:last-child::after { content: "｜"; display: inline; } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li.current_page_item a, .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li.current-page-ancestor a { color: var(--c-black); } .page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li#menu-item-393.current-page-ancestor a { color: var(--c-l-blue); } .page-template-page-template-online .pageContainer #containerz #contents { padding: 0; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida { margin: 9px 0 1.5em; padding: 0; line-height: 110%; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.6rem; color: #333333; text-decoration: underline; border: none; display: inline-block; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida mark { background: linear-gradient(transparent 50%, #FFFF33 50%); } .page-template-page-template-online .pageContainer #containerz #contents h2.mida::after, .page-template-page-template-online .pageContainer #containerz #contents h2.mida::before { display: none; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida.mt20 { margin: 20px 0 0; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida.m20 { margin: 20px 0; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida.mb20 { margin: 0 0 20px; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida + ul { margin: 0; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida:first-child { margin: 0 0 1.5em; } .page-template-page-template-online .pageContainer #containerz #contents h2.mida + h3.dotBorder { margin: 0 0 0 1rem; } .page-template-page-template-online .pageContainer #containerz #contents .waku02 { font-size: 1em; max-width: 650px; background-color: #ffffcc; margin: 10px 5px 10px 0px; border: 1px solid #afadad; border-radius: 5px; padding: 5px; } @media screen and (max-width: 679px) { .page-template-page-template-online .pageContainer #containerz #contents .waku02 { width: 100%; max-width: none; } } .page-template-page-template-online .pageContainer #containerz #contents .waku02 p { margin: 0 0 2px 10px; padding: 0 5px 1px 10px; font-size: 1.2em; } .page-template-page-template-online .pageContainer #containerz #contents .contents_box { font-size: 1em; max-width: 650px; height: 300px; background-color: #FFFFFF; overflow: hidden scroll; margin: 25px 0 0; } @media screen and (max-width: 679px) { .page-template-page-template-online .pageContainer #containerz #contents .contents_box { width: 100%; max-width: none; } } .page-template-page-template-online .pageContainer #containerz #contents .contents_box h3 { font-size: 1.3em; color: #003366; border-bottom-style: dotted; border-bottom-width: 1px; margin-left: 2em; text-indent: -1em; white-space: nowrap; } .page-template-page-template-online .pageContainer #containerz #contents .contents_box p.indent4x { margin-left: 2em; font-size: 1.3em; margin: 0 0 2px 2em; padding: 0 5px 1px 10px; } .page-template-page-template-online .pageContainer #containerz #contents p.indent2b { margin-left: 50px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents p.indent2b { margin-left: 0; } } .page-template-page-template-online .pageContainer #containerz #contents figure.indent2b { margin-left: 50px; margin-bottom: 15px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents figure.indent2b { margin-left: 0; } } .page-template-page-template-online .pageContainer #containerz #contents figure.indent2b.boder_double table { border: 1px solid; border-collapse: separate; border-spacing: 2px; width: auto; } .page-template-page-template-online .pageContainer #containerz #contents figure.indent2b.boder_double table th { background: #E2E7E6; border: 1px solid; font-size: 1.2rem; padding: 2px; } .page-template-page-template-online .pageContainer #containerz #contents table th { border: 1px solid; font-weight: 700; } .page-template-page-template-online .pageContainer #containerz #contents table td { border: 1px solid; font-size: 1.2rem; padding: 2px; } .page-template-page-template-online .pageContainer #containerz #contents table.license { margin: 0 0 12px !important; width: 90%; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents table.license { margin: 0 auto 12px !important; width: 95%; } } .page-template-page-template-online .pageContainer #containerz #contents table.license th { background: #E2E7E6; font-size: 1.2rem; border: 1px solid #999; padding: 3px; vertical-align: middle; } .page-template-page-template-online .pageContainer #containerz #contents table.license td { padding: 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.license + .redTxt02 { margin: -10px 0 1em; } .page-template-page-template-online .pageContainer #containerz #contents table.license.thw30 th { width: 30%; } .page-template-page-template-online .pageContainer #containerz #contents table.license.mb24 { margin: 0 0 24px !important; } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex { width: calc(100% - 3rem); } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex { width: calc(100% - 1rem); } } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex tr.bg { background: #ffc; } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex td { border: none; padding: 3px; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex td.alignCenter { vertical-align: middle; font-weight: 700; } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex td.alignTop { vertical-align: top; } .page-template-page-template-online .pageContainer #containerz #contents table.mailmagaIndex tr td:last-child { width: 80%; } .page-template-page-template-online .pageContainer #containerz #contents table.fileTable th { background: #E2E7E6; border: 1px solid #ccc; padding: 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.fileTable td { border-color: #ccc; padding: 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.fileTable td.indent9 { font-size: 1.2em; text-indent: 0.5px; background-color: #ffc; } .page-template-page-template-online .pageContainer #containerz #contents table.fileTable td.indent10 { font-size: 1.2em; text-indent: 0.5px; background-color: #F9E09F; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable { width: 90%; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents table.priceTable { width: 100%; } } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable caption { font-size: 1.44rem; text-align: center; margin: 0 0 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable th { background: #E2E7E6; border: 1px solid #999; padding: 3px; font-size: 1.2rem; font-weight: 700; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable td { border-color: #999; padding: 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable ul { margin: 5px; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable ul li { font-size: 1.2rem; } .page-template-page-template-online .pageContainer #containerz #contents table.priceTable.w40 { width: 350px; } @media screen and (max-width: 430px) { .page-template-page-template-online .pageContainer #containerz #contents table.priceTable.w40 { width: 100%; } } .page-template-page-template-online .pageContainer #containerz #contents table.lTxt th, .page-template-page-template-online .pageContainer #containerz #contents table.lTxt td { font-size: 1.4rem; border-color: #999; padding: 3px; } .page-template-page-template-online .pageContainer #containerz #contents table.lTxt.m30 { margin: 30px 0; } .page-template-page-template-online .pageContainer #containerz #contents table.lTxt.m0 { margin: 0; } .page-template-page-template-online .pageContainer #containerz #contents table.lTxt.m0.w60 { max-width: 540px; width: 100%; } .page-template-page-template-online .pageContainer #containerz #contents table.center { margin: 0 auto; } .page-template-page-template-online .pageContainer #containerz #contents table tr.bgGreen th, .page-template-page-template-online .pageContainer #containerz #contents table tr.bgGreen td { background-color: #cf0; } .page-template-page-template-online .pageContainer #containerz #contents table tr.bgGray th, .page-template-page-template-online .pageContainer #containerz #contents table tr.bgGray td { background-color: #EEF0EF; } .page-template-page-template-online .pageContainer #containerz #contents table.db { max-width: 600px; width: 100%; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents table.db { margin: 0 auto 50px; border-bottom: 1px solid; } } .page-template-page-template-online .pageContainer #containerz #contents table.db:last-child { margin: 0 0 50px; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents table.db:last-child { margin: 0 auto 50px; border: none; } } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents table.db tr { display: block; } } .page-template-page-template-online .pageContainer #containerz #contents table.db th { font-weight: normal; font-size: 1.4rem; padding: 5px 10px; width: 60%; border: none; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents table.db th { display: block; width: 100%; } } .page-template-page-template-online .pageContainer #containerz #contents table.db th.total { font-weight: 700; color: #33c; } .page-template-page-template-online .pageContainer #containerz #contents table.db td { width: 20%; font-size: 1.4rem; text-align: right; border: none; padding: 5px 10px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents table.db td { display: block; width: 100%; } } .page-template-page-template-online .pageContainer #containerz #contents table.db td.date { color: #8b0000; } .page-template-page-template-online .pageContainer #containerz #contents table.db td.total { color: #33c; } .page-template-page-template-online .pageContainer #containerz #contents table.db tr.border th, .page-template-page-template-online .pageContainer #containerz #contents table.db tr.border td { border-top: 1px solid; border-bottom: 1px solid; padding: 10px 10px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents table.db tr.border td { border: none; } .page-template-page-template-online .pageContainer #containerz #contents table.db tr.border th { border-bottom: none; } } .page-template-page-template-online .pageContainer #containerz #contents p { font-size: 1.2rem; margin: 1em 0; } .page-template-page-template-online .pageContainer #containerz #contents p + table { margin-top: -1em; } .page-template-page-template-online .pageContainer #containerz #contents p + table.mailmagaIndex { margin: 1em 0 0 3rem; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents p + table.mailmagaIndex { margin: 1em 0 0 1rem; } } .page-template-page-template-online .pageContainer #containerz #contents p + table.mailmagaIndex + .mailmagaIndex { margin: 0 0 50px 3rem; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents p + table.mailmagaIndex + .mailmagaIndex { margin: 0 0 50px 1rem; } } .page-template-page-template-online .pageContainer #containerz #contents p + table.priceTable { margin: 30px 0 0; } .page-template-page-template-online .pageContainer #containerz #contents p + ul li { font-size: 1.2rem; } .page-template-page-template-online .pageContainer #containerz #contents p + ul li.mb30 { margin: 0 4rem 30px; } .page-template-page-template-online .pageContainer #containerz #contents p.lTxt { font-size: 1.2em; margin: 0 0 2px 10px; padding: 0 5px 1px 10px; } .page-template-page-template-online .pageContainer #containerz #contents p.lTxt.m10 { margin: 10px 0 10px 10px; } .page-template-page-template-online .pageContainer #containerz #contents p.lTxt.mp0 { margin: 0; padding: 0; } .page-template-page-template-online .pageContainer #containerz #contents p.lTxt.mb30p0 { margin: 0 0 30px; padding: 0; } .page-template-page-template-online .pageContainer #containerz #contents p.llTxt { font-size: 1.3em; } .page-template-page-template-online .pageContainer #containerz #contents p.mb0 { margin: 1em 0 0; } .page-template-page-template-online .pageContainer #containerz #contents p.mt0 { margin: 0 0 1em; } .page-template-page-template-online .pageContainer #containerz #contents p.m0 { margin: 0; } .page-template-page-template-online .pageContainer #containerz #contents p.indent4x { margin-left: 2em; } @media screen and (max-width: 768px) { .page-template-page-template-online .pageContainer #containerz #contents p.indent4x { margin-left: 1em; } } .page-template-page-template-online .pageContainer #containerz #contents p.indent2 { text-indent: 1.5em; font-size: 1.2em; margin: 0 0 2px 10px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents p.indent2 { text-indent: 0; } } .page-template-page-template-online .pageContainer #containerz #contents p.indent2.mt20 { margin: 20px 0 2px 10px; } .page-template-page-template-online .pageContainer #containerz #contents p.indent2.mt30 { margin: 30px 0 2px 10px; } .page-template-page-template-online .pageContainer #containerz #contents p.indent2a { margin: 0 0 2px 50px; text-indent: -18px; font-size: 1.2em; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents p.indent2a { text-indent: -1em; margin: 0 0 2px 2.75rem; padding: 0; } } .page-template-page-template-online .pageContainer #containerz #contents p.detail { margin: 0 0 10px 20px; padding: 0; font-size: 1.4rem; color: #069; } .page-template-page-template-online .pageContainer #containerz #contents .new2 { color: #993300; background: #ffcc00; padding: 0rem 0.5rem; font-size: 1rem; margin-right: 1rem; } .page-template-page-template-online .pageContainer #containerz #contents .bgYellow { background: #FFFFCC; width: fit-content; padding: 10px; margin: 5px 0; } @media screen and (max-width: 375px) { .page-template-page-template-online .pageContainer #containerz #contents .bgYellow { width: 90%; } } .page-template-page-template-online .pageContainer #containerz #contents .bgYellow span { display: inline-block; width: 180px; margin: 0 0 20px; } @media screen and (max-width: 375px) { .page-template-page-template-online .pageContainer #containerz #contents .bgYellow span { display: block; width: auto; margin: 0; } } .page-template-page-template-online .pageContainer #containerz #contents .bgYellow span:last-of-type { margin: 0; } @media screen and (max-width: 375px) { .page-template-page-template-online .pageContainer #containerz #contents .bgYellow span:last-of-type { margin: 20px 0 0; } } .page-template-page-template-online .pageContainer #containerz #contents h3.dotBorder { font-size: 1.3em; color: #003366; border-bottom-style: dotted; border-bottom-width: 1px; margin: 25px 0 0 1rem; } .page-template-page-template-online .pageContainer #containerz #contents h3.dotBorder.mb20 { margin: 25px 0 20px 1rem; } .page-template-page-template-online .pageContainer #containerz #contents ol.movList { margin: 0 0 0 40px; } @media screen and (max-width: 679px) { .page-template-page-template-online .pageContainer #containerz #contents ol.movList { margin: 0; } } .page-template-page-template-online .pageContainer #containerz #contents ol.movList li { list-style: none; font-size: 1.2rem; margin: 6px 0 6px 2em; text-indent: -2em; } .page-template-page-template-online .pageContainer #containerz #contents ol.movList + p.indent2 { margin: 30px 0 0 50px; text-indent: 0; } @media screen and (max-width: 679px) { .page-template-page-template-online .pageContainer #containerz #contents ol.movList + p.indent2 { margin: 20px 0 0 1.75em; text-indent: -1.1em; } } .page-template-page-template-online .pageContainer #containerz #contents ol.brackets li { list-style: none; margin: 0 0 0 3em; text-indent: -2em; } .page-template-page-template-online .pageContainer #containerz #contents ol.brackets li:has(a)::before { color: var(--c-l-blue); } .page-template-page-template-online .pageContainer #containerz #contents .youtube { max-width: 640px; } .page-template-page-template-online .pageContainer #containerz #contents .merit { margin: 20px 0; width: 90%; } .page-template-page-template-online .pageContainer #containerz #contents .merit p { margin: 1em 0 1em 38px; } .page-template-page-template-online .pageContainer #containerz #contents .merit p.image { margin: 1em 0; } .page-template-page-template-online .pageContainer #containerz #contents ul li { margin: 0 0 0 4.75rem; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents ul li { margin: 0 0 0 2.75rem; } } .page-template-page-template-online .pageContainer #containerz #contents ul li.m20 { margin: 20px 0 0 4.75rem; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents ul li.m20 { margin: 20px 0 0 2.75rem; } } .page-template-page-template-online .pageContainer #containerz #contents ul li.indent4 { margin: 0 0 20px 2.75rem; } .page-template-page-template-online .pageContainer #containerz #contents ul li.indent4 ul li { margin: 0 0 0 1.375rem; } .page-template-page-template-online .pageContainer #containerz #contents ul li.mb20 { margin: 0 0 20px 4.75rem; } .page-template-page-template-online .pageContainer #containerz #contents .dataSample { overflow: hidden; } .page-template-page-template-online .pageContainer #containerz #contents .dataSample table { width: 90%; margin: 0 4rem 10px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents .dataSample table { width: 100%; margin: 0 0 10px; } } .page-template-page-template-online .pageContainer #containerz #contents .dataSample table th { background: #E2E7E6; font-weight: 400; font-size: 1.2rem; width: 40%; padding: 3px; border-color: #999; } .page-template-page-template-online .pageContainer #containerz #contents .dataSample table td { border-color: #999; } .page-template-page-template-online .pageContainer #containerz #contents .dataSample + ul { margin: 0; } .page-template-page-template-online .pageContainer #containerz #contents .dataSample + ul li { font-size: 1.2rem; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice { overflow: hidden; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice table { width: 90%; margin: 0 4rem 10px; } @media screen and (max-width: 500px) { .page-template-page-template-online .pageContainer #containerz #contents .dataPrice table { width: 100%; margin: 0 0 10px; } } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice table th { background: #E2E7E6; font-weight: 400; font-size: 1.2rem; padding: 3px; border-color: #999; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice table td { border-color: #999; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice + ul { margin: 0; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice + ul li { font-size: 1.2rem; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice.t01 table tr th:first-child { width: 35%; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice.t01 table tr th:nth-child(2) { width: 11%; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice.t02 table th { width: 30%; } .page-template-page-template-online .pageContainer #containerz #contents .dataPrice.t03 table th { font-weight: 700; } .page-template-page-template-online .pageContainer #containerz #contents h2.bgTitle { border: none; background: #fc3; padding: 10px; text-align: center; margin: 0 0 10px; max-width: 600px; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.6rem; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents h2.bgTitle { margin: 0 auto 10px; } } .page-template-page-template-online .pageContainer #containerz #contents h3.tableTitle { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.3rem; color: #33c; text-align: center; margin: 10px 0; max-width: 600px; } @media screen and (max-width: 920px) { .page-template-page-template-online .pageContainer #containerz #contents h3.tableTitle { margin: 10px auto; } } .page-template-page-template-online .pageContainer #containerz #contents .refcol table thead { border: none; } .page-template-page-template-online .pageContainer #containerz #contents .refcol table tr th { border-color: #999; padding: 0; text-align: left; font-size: 1.2rem; } .page-template-page-template-online .pageContainer #containerz #contents .refcol table tr td { border-color: #999; padding: 14px 8px 14px; vertical-align: middle; } .page-template-page-template-online .pageContainer #containerz #contents .refcol table tr td:first-child { background: #fff8e3; } .page-template-page-template-online .pageContainer #containerz details { margin: 0 0 10px 20px; } .page-template-page-template-online .pageContainer #containerz details summary { font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.4rem; color: #069; } .page-template-page-template-online .pageContainer #containerz details summary:after { content: url(images/plusminus01-015.gif); padding-left: 0.3em; vertical-align: middle; } .page-template-page-template-online .pageContainer #containerz details summary:hover { color: #c33; } .page-template-page-template-online .pageContainer #containerz details[open] summary:after { content: url(images/plusminus01-036.gif); } .page-template-page-template-online .pageContainer #containerz details ul { margin: 0.5em 0; } .page-template-page-template-online .pageContainer #containerz details ul li img { border: 1px solid; } .page-template-page-template-online .pageContainer #containerz details figure img { margin: 10px 40px; border: 1px solid; } .ort.page-template-page-template-online .pageContainer #containerz #contents p { margin: 0; } .ort.page-template-page-template-online .pageContainer #containerz #contents ul { margin: 1em 0; } .price2.page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li#menu-item-400.current-page-ancestor a { color: var(--c-l-blue); } .price2.page-template-page-template-online .pageContainer #containerz .titleHeader .database_nav ul li#menu-item-1441 a { color: var(--c-black); } @media screen and (max-width: 800px) { .book_asp_plus.page-template-page-template-online .pageContainer #containerz .titleHeader h1.online span.sTxt, .price2.page-template-page-template-online .pageContainer #containerz .titleHeader h1.online span.sTxt { display: block; } } /*---------------------------------------- カスタム投稿　Mail News ----------------------------------------*/ .single-mail_news main { font-size: 1.3rem; max-width: 500px; margin: 0 auto; padding: 0 20px; } .single-mail_news main div[align=center] { text-align: right; } .single-mail_news main a { color: #00e; text-decoration: underline; } /*---------------------- LP用テンプレート-----------------------------*/ /*---------------------------------------- biblio_list(最近の書誌図書関係文献) ----------------------------------------*/ .biblio_list * { font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif !important; } .biblio_list .container { margin: 0 auto; max-width: 1200px; padding: 0 2rem; position: relative; } .biblio_list .row { display: flex; flex-direction: row; padding: 0; width: 100%; } @media screen and (max-width: 679px) { .biblio_list .row { flex-direction: column; } } .biblio_list .row .wp-block-group__inner-container { display: flex; } .biblio_list .col { display: block; flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; } @media screen and (max-width: 679px) { .biblio_list .col { display: block; flex: 1 1 auto; margin-left: 0; max-width: 100%; width: 100%; } } .biblio_list .col.span-12 { flex: 0 0 100%; max-width: 100%; } .biblio_list .col:first-child { margin-left: 0; } .biblio_list .head { display: flex; flex-direction: row; padding: 1rem 0 0 0; justify-content: center; } @media screen and (max-width: 679px) { .biblio_list .head { flex-direction: column; margin-bottom: 20px; text-align: left; } } .biblio_list h1 { padding: 1rem 0; font-weight: 700; letter-spacing: 3px; text-align: center; font-size: 3rem; margin: 0 0 20px; } @media screen and (max-width: 679px) { .biblio_list h1 { width: 80%; margin: 0 auto 20px; } } .biblio_list a { display: block; color: #666; text-decoration-line: none; } .biblio_list #open { display: none; } @media screen and (max-width: 679px) { .biblio_list #open { display: block; background: url(images/button.png); background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; border: none; position: absolute; top: 20px; right: 0; } } .biblio_list #close { display: none; } @media screen and (max-width: 679px) { .biblio_list #close { background: url(images/button2.png); background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; border: none; position: absolute; top: 20px; right: 0; } } .biblio_list #close.active { display: block; } .biblio_list .navigation ul.navi { display: flex; flex-direction: row; justify-content: center; list-style: none; margin-bottom: 0.5rem; } @media screen and (max-width: 679px) { .biblio_list .navigation ul.navi { display: none; opacity: 0; transform: translateY(-20px); transition: opacity 0.3s ease, transform 0.3s ease; flex-direction: column; } .biblio_list .navigation ul.navi.active { display: block; opacity: 1; transform: translateY(0); } } .biblio_list .navigation ul.navi li { display: block; width: 25%; margin-bottom: 1rem; font-size: clamp(13px, 1.3333333333vw, 16px); } @media screen and (max-width: 679px) { .biblio_list .navigation ul.navi li { padding-top: 0; border-bottom: 1px solid #ccc; margin-bottom: 0; width: 100%; font-size: 16px; } } .biblio_list .navigation ul.navi li a { text-decoration: none; text-align: center; padding: 10px; } .biblio_list .navigation ul.navi li a:hover { text-decoration: underline; } .biblio_list .mainimg img { width: 50vw; display: block; margin: 0 auto; margin-bottom: 0.5rem; } .biblio_list h2.catch { background: none; display: block; text-align: center; color: #666; font-size: 3rem; font-weight: 400; margin: 0 0 3rem; padding: 0; line-height: 1.25; letter-spacing: -0.1rem; } .biblio_list main { margin: 5rem 0 5rem 0; } .biblio_list main p { font-size: 1.6rem; margin: 0 0 2.5rem; } .biblio_list .wp-block-table { overflow-x: visible; } .biblio_list .wp-block-table thead { border: none; } .biblio_list table { margin-bottom: 2.5rem; border-collapse: collapse; border: none; } .biblio_list table th, .biblio_list table td { padding: 1rem 2rem; font-size: clamp(11px, 1.25vw, 15px); text-align: left; border-bottom: 1px solid #ddd; border-top: none; border-left: none; border-right: none; } .biblio_list table th:first-child, .biblio_list table td:first-child { padding-left: 0; } .biblio_list table th { font-weight: bold; font-size: clamp(11px, 1.25vw, 15px); color: #666; background: #FFFFCC; position: sticky; top: 0; white-space: nowrap; } @media screen and (max-width: 679px) { .biblio_list table th { display: none; } } @media screen and (max-width: 679px) { .biblio_list table td { display: block; font-size: 1.5rem; } } @media screen and (max-width: 679px) { .biblio_list table tr td:first-child { background: #FFFFCC; } } .biblio_list table { /* tr th:first-child { width: 9%; } tr th:last-child, tr th:nth-child(2){ width: 13%; } tr th:nth-child(3) { width: 41%; } tr th:nth-child(4){ width: 15%; }*/ } .biblio_list .yokomi02 table th { background: #ccf; } @media screen and (max-width: 679px) { .biblio_list .yokomi02 table tr td:first-child { background: #ccf; } } .biblio_list h2.underline { background: none; border-bottom: 3px solid #000; color: #666; display: block; margin: 0 0 20px; padding-bottom: 0.5rem; font-size: 2.5rem; font-weight: 400; line-height: 1.25; letter-spacing: -0.1rem; } .biblio_list h2.underline ruby > rt { display: ruby-text; font-size: 50%; text-align: start; } .biblio_list footer p { text-align: center; font-size: 1.6rem; padding: 0 0 20px; } .biblio_list footer p a { display: inline; } .biblio_list #pagetop { position: fixed; bottom: 15px; right: 15px; } .biblio_list #pagetop a { display: block; background: #666; color: #fff; width: 50px; padding: 10px 5px; text-align: center; } /*---------------------------------------- honyaku_link(翻訳関連図書のご案内) ----------------------------------------*/ .honyaku_link a { color: #c39; text-decoration: underline; } .honyaku_link header { padding: 10px 0 0; } .honyaku_link main { margin: 50px auto; max-width: 740px; } @media screen and (max-width: 768px) { .honyaku_link main { margin: 50px 10px; } } @media screen and (max-width: 500px) { .honyaku_link main { margin: 50px 20px; } } .honyaku_link main table { border: none; } .honyaku_link main table tr td { border: none; font-size: 1.6rem; } .honyaku_link main table tr td:first-child { font-size: 1.8rem; } .honyaku_link main table tr td:first-child::before { content: url(images/maru.gif); display: inline; } @media screen and (max-width: 500px) { .honyaku_link main table tr td:first-child { padding: 0; } } @media screen and (max-width: 500px) { .honyaku_link main table tr td { display: block; } } .honyaku_link footer { max-width: 740px; margin: 0 auto; border-top: 1px solid #000; } .honyaku_link footer p { margin: 50px 0 0; font-size: 1.6rem; } /*商品詳細ページ*/ .bookcd .pageContainer #containerz #contents .cathcopy { color: #008000; font-size: 1.8rem; line-height: 1.4; margin: 0 0 15px; padding: 0; } .bookcd .pageContainer #containerz #contents h1 { border-width: 1px; border-style: solid; border-color: #ddf #aac #aac #ddf; color: #446; font-size: 2.2rem; padding: 5px 10px; background: var(--c-white); font-weight: 700; margin: 0 0 30px; } .bookcd .pageContainer #containerz #contents h1.single { display: inline-block; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents h1.single { margin: 0 0 10px; } } .bookcd .pageContainer #containerz #contents h1.ebook { font-size: 3rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 400; color: #1A4069; padding: 0px 2rem 0rem 2rem; background: linear-gradient(transparent 80%, #E7EBF0 80%); border: none; margin-left: -1.6rem; line-height: 1.3; margin-bottom: 30px; text-align: left; } .bookcd .pageContainer #containerz #contents .seriesTitle { font-size: 1.2rem; margin: 0 0 1rem; padding: 0; } .bookcd .pageContainer #containerz #contents .flexContainer { display: flex; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer { display: block; } } .bookcd .pageContainer #containerz #contents .flexContainer.wrap { flex-direction: row-reverse; } .bookcd .pageContainer #containerz #contents .flexContainer .imageArea { flex-shrink: 0; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer .imageArea { max-width: 200px; margin: 0 auto 10px; text-align: center; } } .bookcd .pageContainer #containerz #contents .flexContainer .textArea { flex-grow: 1; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p { margin: 0 1em 1.5em 0; padding: 0; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer .textArea p { margin: 0 0 0.5em; } } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.custom { color: #c00; margin: 0 0 1.5em 0; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.custom .icon { background: #6c9731; font-size: 1.1rem; color: var(--c-white); padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: -2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.nostock { background: #e60012; font-size: 1.1rem; color: var(--c-white); padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: 2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.ebook { background: #ffd700; font-size: 1.1rem; padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: 2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.ebook a { display: block; color: #008; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.reprint { background: #1861ae; font-size: 1.1rem; color: var(--c-white); padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: 2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.lan { background: #8b0000; font-size: 1.1rem; padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: 2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.lan a { display: block; color: var(--c-white); } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.license { background: #8a2be2; font-size: 1.1rem; padding: 1px 5px; margin: 0 0 1.5rem 5px; display: inline-block; height: 20px; border-radius: 3px; position: relative; top: 2px; } .bookcd .pageContainer #containerz #contents .flexContainer .textArea p.license a { display: block; color: var(--c-white); } .bookcd .pageContainer #containerz #contents .flexContainer.link { align-items: center; border-top: 3px double #8b0000; border-bottom: 3px double #8b0000; margin: 20px 0; padding: 10px 0; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer.link { display: flex; flex-wrap: wrap; justify-content: space-between; } } .bookcd .pageContainer #containerz #contents .flexContainer.link p { margin: 0 30px 0 0; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer.link p { font-size: 1.3rem; margin: 10px 0 0; width: 100%; text-align: center; } } @media screen and (max-width: 430px) { .bookcd .pageContainer #containerz #contents .flexContainer.link p { text-align: left; } } .bookcd .pageContainer #containerz #contents .flexContainer.link p.amazon, .bookcd .pageContainer #containerz #contents .flexContainer.link p.kinokuniya { width: 120px; flex-shrink: 0; } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz #contents .flexContainer.link p.amazon, .bookcd .pageContainer #containerz #contents .flexContainer.link p.kinokuniya { margin: 0 20px; } } @media screen and (max-width: 320px) { .bookcd .pageContainer #containerz #contents .flexContainer.link p.amazon, .bookcd .pageContainer #containerz #contents .flexContainer.link p.kinokuniya { margin: 0; } } .bookcd .pageContainer #containerz #contents p.errata a { background: #006402; font-size: 1.1rem; color: var(--c-white); padding: 1px 5px; margin: 0; display: inline-block; height: 20px; border-radius: 3px; } .bookcd .pageContainer #containerz #contents p.flyer span { display: none; } .bookcd .pageContainer #containerz #contents p.flyer a { display: block; width: 70px; height: 75px; border: 2px solid #dc143c; border-radius: 5px; color: #dc143c; font-size: 1rem; font-weight: 700; position: relative; padding: 52px 0 0; text-align: center; } .bookcd .pageContainer #containerz #contents p.flyer a::before { display: block; content: "\e415"; /* 例: Material Iconsのcode point */ font-family: "Material Icons"; font-size: 50px; color: #dc143c; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); } .bookcd .pageContainer #containerz #contents p.new_books span { display: none; } .bookcd .pageContainer #containerz #contents p.new_books a { display: block; width: 70px; height: 75px; border: 2px solid #0056FF; border-radius: 5px; color: #0056FF; font-size: 1rem; font-weight: 700; position: relative; padding: 52px 0 0; text-align: center; } .bookcd .pageContainer #containerz #contents p.new_books a::before { display: block; content: "\e415"; /* 例: Material Iconsのcode point */ font-family: "Material Icons"; font-size: 50px; color: #0056FF; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); } .bookcd .pageContainer #containerz #contents p.sample span { display: none; } .bookcd .pageContainer #containerz #contents p.sample a { display: block; width: 70px; height: 75px; border: 2px solid #FE7700; border-radius: 5px; color: #FE7700; font-size: 1rem; font-weight: 700; position: relative; padding: 52px 0 0; text-align: center; } .bookcd .pageContainer #containerz #contents p.sample a::before { display: block; content: "\e415"; /* 例: Material Iconsのcode point */ font-family: "Material Icons"; font-size: 50px; color: #FE7700; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); } .bookcd .pageContainer #containerz #contents h2 { font-size: 1.8rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; color: #111111; border-top: none; border-left: none; border-right: none; border-bottom: 1px dotted #111; margin: 0; padding: 0; display: inline-block; } .bookcd .pageContainer #containerz #contents h3 { font-size: 1.6rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; color: #111111; margin: 15px 0 -10px 0.5em; } .bookcd .pageContainer #containerz #contents ul.list { margin: 20px 0; } .bookcd .pageContainer #containerz #contents ul.list li { font-size: 1.5rem; margin: 0 0 0.5em 4rem; list-style: none; text-indent: -1.56rem; } .bookcd .pageContainer #containerz #contents ul.list li::before { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--c-b-blue); border-radius: 3px; margin: 0 0.25em 0 0; } .bookcd .pageContainer #containerz #contents ul.list li span { font-size: 1.1rem; padding: 1px 5px; margin: 0 0 0 10px; display: inline-block; height: 20px; border-radius: 3px; color: var(--c-white); position: relative; top: -2px; text-indent: 0; } .bookcd .pageContainer #containerz #contents ul.list li span.custom { background: #6c9731; } .bookcd .pageContainer #containerz #contents ul.list li span.nostock { background: #e60012; } .bookcd .pageContainer #containerz #contents ul.list li span.ebook { background: #ffd700; color: #008; } .bookcd .pageContainer #containerz #contents ul.list li span.ebook a { display: block; color: #008; } .bookcd .pageContainer #containerz #contents ul.list li span.reprint { background: #1861ae; } .bookcd .pageContainer #containerz #contents ul.list li span.errata { background: #006402; } .bookcd .pageContainer #containerz #contents ul.list li span.errata a { display: block; color: var(--c-white); } .bookcd .pageContainer #containerz #contents ul.list li ul { margin: 0.5em 0 0; } .bookcd .pageContainer #containerz #contents p.note { border-top: 3px double #8b0000; border-bottom: 3px double #8b0000; margin: 20px 0 !important; padding: 10px 0 !important; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu { border-top: 2px solid var(--c-b-blue); } } .bookcd .pageContainer #containerz #side_menu .navTitle { display: flex; width: 200px; justify-content: space-between; align-items: center; padding: 0 10px; margin: 0 0 20px; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu .navTitle { margin: 20px auto; } } .bookcd .pageContainer #containerz #side_menu .navTitle h2 { font-size: 2.8rem; font-weight: 700; border: none; border: none; width: auto; background: none; padding: 0; } .bookcd .pageContainer #containerz #side_menu .navTitle h2::before, .bookcd .pageContainer #containerz #side_menu .navTitle h2::after { display: none; } .bookcd .pageContainer #containerz #side_menu .navTitle p { font-size: 1.8rem; font-weight: 700; } .bookcd .pageContainer #containerz #side_menu h3 { border: 1px solid #999; font-size: 1.3rem; white-space: nowrap; display: inline-block; margin: 0 0 20px; background: #EEEEEE; width: 200px; padding: 7px 70px 5px 20px; position: static; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 400; color: var(--c-black); line-height: 1.6; } .bookcd .pageContainer #containerz #side_menu h3.active { font-weight: 700; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu h3 { width: 100%; display: block; padding: 7px 20px 5px; } } .bookcd .pageContainer #containerz #side_menu h3 a { display: block; } .bookcd .pageContainer #containerz #side_menu ul { margin: -10px 0 20px; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu ul { padding: 0; } } .bookcd .pageContainer #containerz #side_menu ul li { font-size: 1.4rem; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu ul li { border: #ddd solid; border-width: 0 1px 1px 1px; margin: 0; padding: 0.25em 0; } } .bookcd .pageContainer #containerz #side_menu ul li a { font-size: 1.4rem; color: #0059b9; display: block; width: 100%; } .bookcd .pageContainer #containerz #side_menu ul li a:visited { color: var(--c-red); } @media screen and (max-width: 679px) { .bookcd .pageContainer #containerz #side_menu ul li a { border: none; padding: 0; color: #0059b9 !important; } .bookcd .pageContainer #containerz #side_menu ul li a:visited { color: var(--c-red) !important; } } .bookcd .pageContainer #containerz #side_menu ul.book-menu { display: flex; width: 200px; flex-wrap: wrap; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu ul.book-menu { width: 100%; } } .bookcd .pageContainer #containerz #side_menu ul.book-menu li { width: 20%; } .bookcd .pageContainer #containerz #side_menu ul.book-menu li:nth-last-child(9), .bookcd .pageContainer #containerz #side_menu ul.book-menu li:nth-last-child(10) { width: 40%; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu ul.book-menu li { width: 10%; border: 1px solid #ddd; } .bookcd .pageContainer #containerz #side_menu ul.book-menu li:nth-last-child(9), .bookcd .pageContainer #containerz #side_menu ul.book-menu li:nth-last-child(10) { width: 20%; } .bookcd .pageContainer #containerz #side_menu ul.book-menu li a { display: block; } .bookcd .pageContainer #containerz #side_menu ul.book-menu li a::after { display: none; } } @media screen and (max-width: 920px) and (max-width: 430px) { .bookcd .pageContainer #containerz #side_menu ul.book-menu li a { font-size: 1.3rem; } } .bookcd .pageContainer #containerz #side_menu ul.toggle-content { display: none; } .bookcd .pageContainer #containerz #side_menu ul.is-active { display: block; } .bookcd .pageContainer #containerz #side_menu ul.link { margin: 20px 0 0; } .bookcd .pageContainer #containerz #side_menu ul.link li { padding: 0; font-size: 1.3rem; } .bookcd .pageContainer #containerz #side_menu ul.link li::before { display: inline-block; content: "\eaaa"; font-family: "Material Icons"; font-size: 15px; color: #dc143c; margin: 0 0.25em 0 0; position: relative; top: 2px; } .bookcd .pageContainer #containerz #side_menu ul.link li a { display: inline; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu ul.link li { border: none; text-align: left; } .bookcd .pageContainer #containerz #side_menu ul.link li a::after { display: none; } } .bookcd .pageContainer #containerz #side_menu p.banner { margin: 0 0 20px; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz #side_menu p.banner { text-align: center; } } .bookcd .pageContainer #containerz form input { width: 200px; border: 1px solid #999; border-radius: 3px; padding: 0.25em; display: block; margin: 0 0 10px; } .bookcd .pageContainer #containerz form input::placeholder { color: #ffb6c1; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz form input { width: 50%; margin: 0 auto 10px; } } @media screen and (max-width: 500px) { .bookcd .pageContainer #containerz form input { width: 100%; } } .bookcd .pageContainer #containerz form button { width: 200px; height: 35px; background: var(--c-b-blue); border-radius: 3px; color: #fff; font-size: 1.5rem; font-weight: 700; text-align: center; } @media screen and (max-width: 920px) { .bookcd .pageContainer #containerz form button { margin: 0 auto; display: block; } } .ebook .pageContainer #containerz #contents ul li { line-height: 150%; list-style-type: circle; } .ebook .pageContainer #containerz #contents .flexContainer > div { display: flex; flex-wrap: wrap; align-items: center; margin: 30px 0; } .ebook .pageContainer #containerz #contents .flexContainer > div > div { width: 50%; margin: 0 0 20px; } .ordermade .pageContainer #containerz #contents .flexContainer div { display: flex; } @media screen and (max-width: 500px) { .ordermade .pageContainer #containerz #contents .flexContainer div { display: block; } } .ordermade .pageContainer #containerz #contents .flexContainer div figure { flex-basis: 200px; margin: 0 0 0 1em; } @media screen and (max-width: 500px) { .ordermade .pageContainer #containerz #contents .flexContainer div figure { margin: 1em auto; text-align: center; } } .ordermade .pageContainer #containerz #contents .flexContainer div ul { flex: 1; } .ordermade .pageContainer #containerz #contents .flexContainer div ul li span.custom { background: #6c9731; font-size: 1.1rem; padding: 1px 5px; margin: 0; display: inline-block; height: 20px; border-radius: 3px; color: var(--c-white); position: relative; top: -2px; text-indent: 0; } .request_form .pageContainer .oneline2 #oneline2 { width: 100%; float: none; } .request_form form { margin: 20px 0 0; } .request_form form[data-screen=input] .formMessage02, .request_form form[data-screen=invalid] .formMessage02, .request_form form[data-screen=back] .formMessage02 { display: none; } .request_form form[data-screen=input] .formMessage01, .request_form form[data-screen=invalid] .formMessage01, .request_form form[data-screen=back] .formMessage01 { margin: 0 0 20px !important; padding: 0 !important; } .request_form form[data-screen=input] p, .request_form form[data-screen=invalid] p, .request_form form[data-screen=back] p { font-size: 13.2px !important; } .request_form form[data-screen=input] .smf-item, .request_form form[data-screen=invalid] .smf-item, .request_form form[data-screen=back] .smf-item { border: none; font-size: 1.2rem; margin: 0 auto; width: 80%; } @media screen and (max-width: 920px) { .request_form form[data-screen=input] .smf-item, .request_form form[data-screen=invalid] .smf-item, .request_form form[data-screen=back] .smf-item { width: 100%; } } .request_form form[data-screen=input] .smf-item__col, .request_form form[data-screen=invalid] .smf-item__col, .request_form form[data-screen=back] .smf-item__col { padding: 5px; } .request_form form[data-screen=input] .smf-item__col--label, .request_form form[data-screen=invalid] .smf-item__col--label, .request_form form[data-screen=back] .smf-item__col--label { background: none; border: 1px solid #ddd; margin: 0 5px 5px; } .request_form form[data-screen=input] .smf-item__col--controls, .request_form form[data-screen=invalid] .smf-item__col--controls, .request_form form[data-screen=back] .smf-item__col--controls { border: 1px solid #ddd; margin: 0 5px 5px; } .request_form form[data-screen=input] .smf-item__col--controls .smf-text-control__control, .request_form form[data-screen=invalid] .smf-item__col--controls .smf-text-control__control, .request_form form[data-screen=back] .smf-item__col--controls .smf-text-control__control { padding: 0.5rem 1rem; border: 1px solid #000; width: 50%; } @media (max-width: 640px) { .request_form form[data-screen=input] .smf-item__col--controls .smf-text-control__control, .request_form form[data-screen=invalid] .smf-item__col--controls .smf-text-control__control, .request_form form[data-screen=back] .smf-item__col--controls .smf-text-control__control { width: 100%; } } .request_form form[data-screen=input] .smf-item__col--controls .smf-textarea-control__control, .request_form form[data-screen=invalid] .smf-item__col--controls .smf-textarea-control__control, .request_form form[data-screen=back] .smf-item__col--controls .smf-textarea-control__control { padding: 0.5rem 1rem; border: 1px solid #000; } .request_form form[data-screen=input] .smf-action .smf-button-control__control, .request_form form[data-screen=invalid] .smf-action .smf-button-control__control, .request_form form[data-screen=back] .smf-action .smf-button-control__control { background: #6495ed; color: #fff; font-weight: 700; } .request_form form[data-screen=input] + #contactArea h3, .request_form form[data-screen=invalid] + #contactArea h3, .request_form form[data-screen=back] + #contactArea h3 { font-size: 1.3em; border-bottom-style: dotted; border-bottom-width: 1px; margin: 30px 0 20px; } .request_form form[data-screen=input] + #contactArea table, .request_form form[data-screen=invalid] + #contactArea table, .request_form form[data-screen=back] + #contactArea table { border: none; width: 60%; border-collapse: separate; border-spacing: 5px; margin: 0 auto 50px; } @media screen and (max-width: 920px) { .request_form form[data-screen=input] + #contactArea table, .request_form form[data-screen=invalid] + #contactArea table, .request_form form[data-screen=back] + #contactArea table { width: 100%; } } .request_form form[data-screen=input] + #contactArea table th, .request_form form[data-screen=invalid] + #contactArea table th, .request_form form[data-screen=back] + #contactArea table th { border: 1px solid #ccc; background: #E2E7E6; width: 50%; } @media screen and (max-width: 500px) { .request_form form[data-screen=input] + #contactArea table th, .request_form form[data-screen=invalid] + #contactArea table th, .request_form form[data-screen=back] + #contactArea table th { display: block; width: 100%; } } .request_form form[data-screen=input] + #contactArea table td, .request_form form[data-screen=invalid] + #contactArea table td, .request_form form[data-screen=back] + #contactArea table td { border: 1px solid #ccc; } @media screen and (max-width: 500px) { .request_form form[data-screen=input] + #contactArea table td, .request_form form[data-screen=invalid] + #contactArea table td, .request_form form[data-screen=back] + #contactArea table td { display: block; width: 100%; } } .request_form form[data-screen=confirm] .formMessage01 { display: none; } .request_form form[data-screen=confirm] .formMessage02 { margin: 0 0 20px !important; padding: 0 !important; } .request_form form[data-screen=confirm] p { font-size: 13.2px !important; } .request_form form[data-screen=confirm] .smf-item { border: none; font-size: 1.2rem; margin: 0 auto; width: 80%; } @media (max-width: 640px) { .request_form form[data-screen=confirm] .smf-item { width: 100%; } } .request_form form[data-screen=confirm] .smf-item__col { padding: 5px; } .request_form form[data-screen=confirm] .smf-item__col--label { background: #E2E7E6; border: solid #000; border-width: 1px 0 0 1px; } @media (max-width: 640px) { .request_form form[data-screen=confirm] .smf-item__col--label { border: none; } } .request_form form[data-screen=confirm] .smf-item__col--controls { border: solid #000; border-width: 1px 1px 0; } @media (max-width: 640px) { .request_form form[data-screen=confirm] .smf-item__col--controls { border: none; } } .request_form form[data-screen=confirm] .smf-item:last-of-type .smf-item__col--label { border-width: 1px 0 1px 1px; } @media (max-width: 640px) { .request_form form[data-screen=confirm] .smf-item:last-of-type .smf-item__col--label { border: none; } } .request_form form[data-screen=confirm] .smf-item:last-of-type .smf-item__col--controls { border-width: 1px 1px 1px 1px; } @media (max-width: 640px) { .request_form form[data-screen=confirm] .smf-item:last-of-type .smf-item__col--controls { border: none; } } .request_form form[data-screen=confirm] .smf-action .smf-button-control__control { background: #6495ed; color: #fff; font-weight: 700; } .request_form form[data-screen=confirm] + #contactArea { display: none; } .request_form form[data-screen=complete] p { text-align: center; margin: 0 0 50px; } .request_form form[data-screen=complete] + #contactArea { display: none; } .n_web_form, .refcol_form { padding: 50px 0 20px; margin: 0 auto; max-width: 960px; } .n_web_form h1, .refcol_form h1 { text-align: center; margin: 0 0 20px; } .n_web_form .wrapper, .refcol_form .wrapper { margin: 0 auto 20px; padding: 20px; max-width: 700px; font-size: 14px; border: solid 5px #EEE; } .n_web_form .wrapper form .smf-action .smf-button-control__control, .refcol_form .wrapper form .smf-action .smf-button-control__control { background: #6495ed; color: #fff; font-weight: 700; pointer-events: all; opacity: 1; cursor: pointer; } .n_web_form .wrapper form .smf-action.is-disabled .smf-button-control__control, .refcol_form .wrapper form .smf-action.is-disabled .smf-button-control__control { pointer-events: none; opacity: 0.5; cursor: not-allowed; } .n_web_form .wrapper form[data-screen=input] .formMessage02, .n_web_form .wrapper form[data-screen=invalid] .formMessage02, .n_web_form .wrapper form[data-screen=back] .formMessage02, .refcol_form .wrapper form[data-screen=input] .formMessage02, .refcol_form .wrapper form[data-screen=invalid] .formMessage02, .refcol_form .wrapper form[data-screen=back] .formMessage02 { display: none; } .n_web_form .wrapper form[data-screen=input] .smf-item__col--label, .n_web_form .wrapper form[data-screen=invalid] .smf-item__col--label, .n_web_form .wrapper form[data-screen=back] .smf-item__col--label, .refcol_form .wrapper form[data-screen=input] .smf-item__col--label, .refcol_form .wrapper form[data-screen=invalid] .smf-item__col--label, .refcol_form .wrapper form[data-screen=back] .smf-item__col--label { background: #EBF0F6; flex: 0 0 16em; max-width: 16em; } @media (max-width: 640px) { .n_web_form .wrapper form[data-screen=input] .smf-item__col--label, .n_web_form .wrapper form[data-screen=invalid] .smf-item__col--label, .n_web_form .wrapper form[data-screen=back] .smf-item__col--label, .refcol_form .wrapper form[data-screen=input] .smf-item__col--label, .refcol_form .wrapper form[data-screen=invalid] .smf-item__col--label, .refcol_form .wrapper form[data-screen=back] .smf-item__col--label { max-width: none; } } .n_web_form .wrapper form[data-screen=input] .smf-text-control__control, .n_web_form .wrapper form[data-screen=invalid] .smf-text-control__control, .n_web_form .wrapper form[data-screen=back] .smf-text-control__control, .refcol_form .wrapper form[data-screen=input] .smf-text-control__control, .refcol_form .wrapper form[data-screen=invalid] .smf-text-control__control, .refcol_form .wrapper form[data-screen=back] .smf-text-control__control { padding: 0.5rem 1rem; border: 1px solid #ccc; width: 60%; } .n_web_form .wrapper form[data-screen=input] .smf-text-control__control::placeholder, .n_web_form .wrapper form[data-screen=invalid] .smf-text-control__control::placeholder, .n_web_form .wrapper form[data-screen=back] .smf-text-control__control::placeholder, .refcol_form .wrapper form[data-screen=input] .smf-text-control__control::placeholder, .refcol_form .wrapper form[data-screen=invalid] .smf-text-control__control::placeholder, .refcol_form .wrapper form[data-screen=back] .smf-text-control__control::placeholder { color: #aaa; } @media (max-width: 640px) { .n_web_form .wrapper form[data-screen=input] .smf-text-control__control, .n_web_form .wrapper form[data-screen=invalid] .smf-text-control__control, .n_web_form .wrapper form[data-screen=back] .smf-text-control__control, .refcol_form .wrapper form[data-screen=input] .smf-text-control__control, .refcol_form .wrapper form[data-screen=invalid] .smf-text-control__control, .refcol_form .wrapper form[data-screen=back] .smf-text-control__control { width: 100%; } } .n_web_form .wrapper form[data-screen=input] .mod_form_importance, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance, .n_web_form .wrapper form[data-screen=back] .mod_form_importance, .refcol_form .wrapper form[data-screen=input] .mod_form_importance, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance, .refcol_form .wrapper form[data-screen=back] .mod_form_importance { margin: 20px 0 0 0; padding: 10px; border: double 3px #CCC; background-color: #DDD; } .n_web_form .wrapper form[data-screen=input] .mod_form_importance h2, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance h2, .n_web_form .wrapper form[data-screen=back] .mod_form_importance h2, .refcol_form .wrapper form[data-screen=input] .mod_form_importance h2, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance h2, .refcol_form .wrapper form[data-screen=back] .mod_form_importance h2 { font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.4rem; color: #000; padding: 0; background: none; margin: 0; z-index: auto; } .n_web_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt, .n_web_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt, .refcol_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt, .refcol_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt { max-width: 634px; height: 250px; overflow: scroll; margin: 10px 0 20px 0; padding: 10px 20px 15px 20px; background-color: #FFF; } .n_web_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt h3, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt h3, .n_web_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt h3, .refcol_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt h3, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt h3, .refcol_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt h3 { margin: 10px 0 5px 0; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: bold; border-bottom: solid 1px #DDD; } .n_web_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt ul, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt ul, .n_web_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt ul, .refcol_form .wrapper form[data-screen=input] .mod_form_importance .mod_form_importance_txt ul, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance .mod_form_importance_txt ul, .refcol_form .wrapper form[data-screen=back] .mod_form_importance .mod_form_importance_txt ul { list-style-type: disc; margin: 10px 0 20px 0; padding: 10px 20px 15px 20px; } .n_web_form .wrapper form[data-screen=input] .mod_form_importance .smf-label, .n_web_form .wrapper form[data-screen=invalid] .mod_form_importance .smf-label, .n_web_form .wrapper form[data-screen=back] .mod_form_importance .smf-label, .refcol_form .wrapper form[data-screen=input] .mod_form_importance .smf-label, .refcol_form .wrapper form[data-screen=invalid] .mod_form_importance .smf-label, .refcol_form .wrapper form[data-screen=back] .mod_form_importance .smf-label { text-align: center; } .n_web_form .wrapper form[data-screen=confirm] .formMessage01, .n_web_form .wrapper form[data-screen=confirm] .mod_form_importance, .n_web_form .wrapper form[data-screen=confirm] .dnone, .refcol_form .wrapper form[data-screen=confirm] .formMessage01, .refcol_form .wrapper form[data-screen=confirm] .mod_form_importance, .refcol_form .wrapper form[data-screen=confirm] .dnone { display: none; } .n_web_form .wrapper form[data-screen=confirm] .smf-item__col--label, .refcol_form .wrapper form[data-screen=confirm] .smf-item__col--label { background: #EBF0F6; flex: 0 0 16em; max-width: 16em; } @media (max-width: 640px) { .n_web_form .wrapper form[data-screen=confirm] .smf-item__col--label, .refcol_form .wrapper form[data-screen=confirm] .smf-item__col--label { max-width: none; } } .n_web_form .wrapper form[data-screen=confirm] .smf-text-control__control, .refcol_form .wrapper form[data-screen=confirm] .smf-text-control__control { padding: 0.5rem 1rem; border: 1px solid #ccc; width: 60%; } .n_web_form .wrapper form[data-screen=confirm] .smf-text-control__control::placeholder, .refcol_form .wrapper form[data-screen=confirm] .smf-text-control__control::placeholder { color: #aaa; } @media (max-width: 640px) { .n_web_form .wrapper form[data-screen=confirm] .smf-text-control__control, .refcol_form .wrapper form[data-screen=confirm] .smf-text-control__control { width: 100%; } } .n_web_form .wrapper form[data-screen=complete] h2, .refcol_form .wrapper form[data-screen=complete] h2 { font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.8rem; color: #BB2032; padding: 0; background: none; margin: 0 0 1em; z-index: auto; } .w_sale_form .dnone { display: block; } @media (max-width: 640px) { .w_sale_form .dnone { display: none; } } .w_sale_form .pageContainer .oneline2 { max-width: none; } .w_sale_form .pageContainer .oneline2 #oneline2 { width: 100%; float: none; padding: 0; margin: 0 0 20px; } .w_sale_form .pageContainer .oneline2 #oneline2 h1 { text-indent: 0; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-size: 1.8rem; color: #a00; text-align: center; } .w_sale_form .pageContainer .oneline2 #oneline2 p { margin: 0 20px; padding: 0; font-size: 1.2rem; } @media screen and (max-width: 500px) { .w_sale_form .pageContainer .oneline2 #oneline2 p { text-align: left; } } .w_sale_form form .wrapper { margin: 20px 0 30px; } .w_sale_form form .wrapper > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; } @media (max-width: 640px) { .w_sale_form form .wrapper > .wp-block-group__inner-container { display: block; } } .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-item { width: 50%; } @media (max-width: 640px) { .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-item { width: 100%; } } .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-item:nth-of-type(2) { border-top: 1px solid #ddd; } .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-item__col--label { background: #E2E7E6; } .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-text-control__control { padding: 0.5rem 1rem; width: 60%; } @media (max-width: 640px) { .w_sale_form form .wrapper > .wp-block-group__inner-container .smf-text-control__control { width: 100%; } } .w_sale_form form .order p { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; padding: 15px 0 0 !important; } .w_sale_form form .order p.header { background: #E2E7E6; padding: 10px !important; border-top: 1px solid #ddd; font-weight: 700; } .w_sale_form form .order p.header:last-child { border-right: 1px solid #ddd; } .w_sale_form form .order .smf-text-control input { width: 100%; } .w_sale_form form .order .smf-placeholder { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 5px; } .w_sale_form form .order .smf-placeholder:has(.smf-text-control):has(.number) { border-right: 1px solid #ddd; } @media (max-width: 640px) { .w_sale_form form .order .smf-placeholder { border-right: 1px solid #ddd; } .w_sale_form form .order .smf-placeholder:has(.smf-text-control):has(.number) { margin-bottom: 30px; } .w_sale_form form .order .smf-placeholder:has(.smf-text-control):has(.book) { border-top: 1px solid #ddd; } .w_sale_form form .order .smf-placeholder .smf-text-control:has(.book)::before { display: inline-block; content: "書　名"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form .order .smf-placeholder .smf-text-control:has(.isbn)::before { display: inline-block; content: "ISBN"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form .order .smf-placeholder .smf-text-control:has(.basep)::before { display: inline-block; content: "本体価"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form .order .smf-placeholder .smf-text-control:has(.number)::before { display: inline-block; content: "部数"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form .order .smf-placeholder input { width: 70%; } } @media (max-width: 320px) { .w_sale_form form .order .smf-placeholder input { width: 65%; } } .w_sale_form form .smf-action .smf-button-control__control { background: #6495ed; color: #fff; font-weight: 700; } .w_sale_form form .clear { text-align: right; margin: 20px 0 0; } .w_sale_form form .clear .smf-button-control__control { padding: 0.5333333333rem 1.0666666667rem; border-radius: 3px; border: 1px solid #ccc; background: #6495ed; color: #fff; font-weight: 700; } .w_sale_form form[data-screen=input] .formMessage02, .w_sale_form form[data-screen=invalid] .formMessage02, .w_sale_form form[data-screen=back] .formMessage02 { display: none; } .w_sale_form form[data-screen=confirm] .formMessage01, .w_sale_form form[data-screen=confirm] .clear { display: none; } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="014form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="024form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="034form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="044form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="054form"] { text-align: right; } @media (max-width: 640px) { .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="014form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="024form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="034form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="044form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="054form"] { text-align: left; } } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="015form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="025form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="035form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="045form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="055form"] { text-align: right; border-right: 1px solid #ccc; } @media (max-width: 640px) { .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="015form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="025form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="035form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="045form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="055form"] { text-align: left; margin-bottom: 20px; } } @media (max-width: 640px) { .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="012form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="022form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="032form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="042form"], .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="052form"] { border-top: 1px solid #ccc; } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="012form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="022form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="032form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="042form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="052form"]::before { display: inline-block; content: "書　名"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="013form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="023form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="033form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="043form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="053form"]::before { display: inline-block; content: "ISBN"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="014form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="024form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="034form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="044form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="054form"]::before { display: inline-block; content: "本体価"; margin: 0 3em 0 0; width: 3em; } .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="015form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="025form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="035form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="045form"]::before, .w_sale_form form[data-screen=confirm] .order .smf-placeholder[data-name="055form"]::before { display: inline-block; content: "部　数"; margin: 0 3em 0 0; width: 3em; } } .w_sale_form form[data-screen=complete] { width: 80%; margin: 20px auto 100px; } @media (max-width: 640px) { .w_sale_form form[data-screen=complete] { width: 100%; margin: 20px auto 50px; } } .w_sale_form form[data-screen=complete] p { font-size: 1.4rem !important; margin: 0 0 1em !important; } @media (max-width: 640px) { .w_sale_form .is-layout-grid { display: block; } } /*---------------------------------------- header ----------------------------------------*/ footer { clear: both; } .footer_copy { padding: 0rem 0; } .footer_copy p { font-size: 1em; text-align: center; } .footer_logo { width: 350px; } .footer_cont { background: var(--c-b-blue); padding-top: 3rem; margin: 0 auto; } .footer_cont .container { display: flex; flex-flow: nowrap; justify-content: center; align-items: flex-start; align-self: flex-start; } @media screen and (max-width: 768px) { .footer_cont .container { flex-flow: column; } } .footer_cont .container p, .footer_cont .container li a { color: var(--c-white); } .footer_cont .container .footer_nav { display: flex; } @media screen and (max-width: 768px) { .footer_cont .container .footer_nav { flex-flow: column; margin: 0 auto; } } .footer_cont .container .footer_nav ul { display: flex; } @media screen and (max-width: 768px) { .footer_cont .container .footer_nav ul { margin-bottom: 1rem; flex-direction: column; /* スマホ表示のフッター配列の設定 */ } } .footer_cont .container .footer_nav li { margin-right: 3rem; } @media screen and (max-width: 768px) { .footer_cont .container .footer_nav li { margin: 0 1.5rem 1.5rem 0; } } .footer_cont .container .footer_nav a { color: var(--c-white); } .footer_cont .container .footer_nav a:hover { border-bottom: 1px solid var(--c-white); } .address_area { width: 36%; margin-bottom: 2rem; /* white-space: nowrap; */ } .address_area p { line-height: 1.6; } .address_area h2 { color: var(--c-white); font-size: 1.8rem; border-bottom: 2px solid var(--c-white); margin-bottom: 1rem; display: inline-block; position: relative; z-index: 0; background: none; margin-left: 0; padding: 0 0 0.5rem 0; } .address_area h2::after, .address_area h2::before { border-left: none; border-right: none; } .sns_area { display: flex; flex-flow: nowrap; justify-content: flex-start; align-items: center; align-self: flex-start; margin-top: -0.8rem; margin-bottom: 1.5rem; } .sns_area li { margin-right: 2rem; } .sns_area li a:hover { text-decoration: none; border-bottom: none; } .sns_area img { width: 20px; /* 元は30px */ margin-left: 0.5rem; } /*---------------------------------------- global Nav ----------------------------------------*/ nav.gnav { background: var(--c-red); padding: 2rem 0; font-family: "TsukuBRdGothic-Regular", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } @media screen and (max-width: 970px) { nav.gnav { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 99; background: var(--c-red); transition: 0.5s; padding: 2rem 2rem; } } nav.gnav ul { display: flex; flex-wrap: flex-wrap; justify-content: center; } @media screen and (max-width: 970px) { nav.gnav ul { display: flex; flex-flow: column; justify-content: center; align-items: center; align-self: center; padding-top: 5rem; } } nav.gnav ul li { margin: 0 4rem; color: var(--c-orange); font-family: "TsukuBRdGothic-Regular", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } @media screen and (max-width: 1080px) { nav.gnav ul li { margin: 0 2rem; } } @media screen and (max-width: 970px) { nav.gnav ul li { margin: 1rem 0 2rem; font-size: 2rem; } } nav.gnav ul li a { color: var(--c-white); font-size: 1.4rem; white-space: nowrap; } nav.gnav ul li a:hover { border-bottom: 1px solid var(--c-white); } nav.gnav ul li.current-menu-item a { color: var(--c-orange); } .home nav.gnav ul li.home a { color: var(--c-orange); } @media screen and (max-width: 970px) { .drawer { position: fixed; top: 0; right: 0; z-index: 120; } } .drawer_hidden { display: none; } .drawer_open { display: none; } @media screen and (max-width: 970px) { .drawer_open { display: flex; height: 60px; width: 60px; justify-content: center; align-items: center; position: relative; z-index: 100; cursor: pointer; background: var(--c-red); } } @media screen and (max-width: 970px) { .drawer_open span { content: ""; display: block; height: 3px; width: 25px; border-radius: 3px; background: #fff; transition: 0.5s; position: absolute; } } @media screen and (max-width: 970px) { .drawer_open span::before { content: ""; display: block; height: 3px; width: 25px; border-radius: 3px; background: #fff; transition: 0.5s; position: absolute; bottom: 8px; } } @media screen and (max-width: 970px) { .drawer_open span::after { content: ""; display: block; height: 3px; width: 25px; border-radius: 3px; background: #fff; transition: 0.5s; position: absolute; top: 8px; } } #drawer_check:checked ~ .drawer_open span { background: rgba(255, 255, 255, 0); } #drawer_check:checked ~ .drawer_open span::before { bottom: 0; transform: rotate(45deg); } #drawer_check:checked ~ .drawer_open span::after { top: 0; transform: rotate(-45deg); } #drawer_check:checked ~ .gnav { left: 0; } /*---------------------------------------- side Nav ----------------------------------------*/ #side_menu h2 { border: 1px solid #999; font-size: 1.1em; white-space: nowrap; display: inline-block; margin: 0; background: #EEEEEE; width: 230px; padding: 7px 70px 5px 20px; position: static; font-family: "Noto Sans JP", "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; font-weight: 400; color: var(--c-black); line-height: 1.6; } @media screen and (max-width: 679px) { #side_menu h2 { font-size: 0.8em; width: 100%; } } #side_menu ul { margin: 10px 0 20px; } @media screen and (max-width: 920px) { #side_menu ul { width: 100%; padding: 10px 0 0; font-size: 1.2em; border-top: solid 1px; margin: 20px 0; } } @media screen and (max-width: 679px) { #side_menu ul { padding: 0; } } #side_menu ul li { padding: 6px 4px 0 20px; font-size: 1.4rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, "ＭＳＰゴシック", Helvetica, sans-serif; } @media screen and (max-width: 920px) { #side_menu ul li { text-align: center; font-size: 1.1em; margin: 12px 0; position: relative; } } @media screen and (max-width: 679px) { #side_menu ul li { padding: 0; margin: 0; } } @media screen and (max-width: 920px) { #side_menu ul li a { display: inline-block; } } @media screen and (max-width: 679px) { #side_menu ul li a { color: var(--c-black) !important; border: solid #ddd; border-width: 0 1px 1px 1px; font-size: 0.8em; padding: 8px 0; display: block; } } #side_menu ul li a:visited { color: var(--c-red); } @media screen and (max-width: 920px) { #side_menu ul li a:after { content: url(images/flow_icon.png); position: absolute; right: 10px; } } #side_menu ul li a.active { color: var(--c-black); font-weight: 700; } #side_menu ul li a.active:visited { color: var(--c-black); font-weight: 700; } #side_menu ul.dcsTop { margin: 0 0 20px; } #side_menu.dcs { padding: 20px 0 0; } #side_menu.dcs ul.dcsTop { display: none; } @media screen and (max-width: 920px) { #side_menu.online .menulist { text-align: center !important; } } #side_menu.online h2 { margin: 0 5px 10px; padding: 5px 10px; color: var(--c-white); width: 200px; height: 30px; font-size: 1.2rem; font-weight: bold; border: none; } #side_menu.online h2::after, #side_menu.online h2::before { display: none; } @media screen and (max-width: 920px) { #side_menu.online h2 { text-align: center; } } #side_menu.online h2.online { background: var(--c-black); } #side_menu.online h2.menu-mag { background: #0a6cad; } #side_menu.online h2.book-plus { background: #39874a; } #side_menu.online h2.menu-who { background: #e28432; } #side_menu.online h2.mag-asp { background: #666767; } #side_menu.online h2.dnone { display: none; } #side_menu.online h2.refcol { background: #a34162; } #side_menu.online h2.asp { background: #933; } @media screen and (max-width: 920px) { #side_menu.online ul { margin: 0 0 10px; padding: 0; border-top: 1px solid #ddd; } } #side_menu.online ul li { margin: 0 0 2px 10px; padding: 0 5px 1px 10px; font-size: 1.1em; } @media screen and (max-width: 920px) { #side_menu.online ul li { margin: 0; border: solid #ddd; border-width: 0 1px 1px 1px; padding: 10px 0; } #side_menu.online ul li:has(span) { display: flex; justify-content: center; align-items: center; } #side_menu.online ul li:has(span) .new2 { height: fit-content; } } #side_menu.online ul li mark.mark2 { padding: 6px 10px; background: #99FF99; } #side_menu.online ul li .new2 { color: #993300; background: #ffcc00; padding: 0rem 0.5rem; font-size: 1rem; margin-right: 1rem; } @media screen and (max-width: 920px) { #side_menu.online ul li a { border: none; padding: 0; } } #side_menu.online h3.subNav { margin: -10px 0 2px 10px; padding: 10px 5px 1px 10px; border-top: 1px solid; width: 200px; font-size: 1.2rem; font-weight: normal; } @media screen and (max-width: 920px) { #side_menu.online h3.subNav { margin: 0; text-align: center; width: 100%; border-top: 1px solid #ddd; } } #side_menu.online h3.subNav + ul { margin: 0 0 20px; } @media screen and (max-width: 920px) { #side_menu.online h3.subNav + ul { margin: 0; } } .mag-plus #side_menu.online h2.dnone, .mag-plus #side_menu ul.dnone { display: block; } .guide-youtube2 #side_menu.online ul li.mag04 a, .guide-youtube2 #side_menu.online ul li.mag04 a:valid, .guide-youtube3 #side_menu.online ul li.mag04 a, .guide-youtube3 #side_menu.online ul li.mag04 a:valid, .guide-youtube4 #side_menu.online ul li.mag04 a, .guide-youtube4 #side_menu.online ul li.mag04 a:valid, .guide-youtube5 #side_menu.online ul li.mag04 a, .guide-youtube5 #side_menu.online ul li.mag04 a:valid, .guide-youtube6 #side_menu.online ul li.mag04 a, .guide-youtube6 #side_menu.online ul li.mag04 a:valid { color: var(--c-black); font-weight: 700; } /*---------------------------------------- header ----------------------------------------*/ header { width: 100%; margin: 0 auto; } header .header_bg { background: var(--c-b-gray); } header .header_bg .mv_area { height: 26vh; position: relative; overflow: hidden; margin: 0 auto; z-index: 1; } @media screen and (max-width: 970px) { header .header_bg .mv_area { height: 20vh; } } header .header_bg .mv_area .slide { position: relative; z-index: -1; /*height:90vh;*/ width: 100vw; top: 0; } header .header_bg .mv_area .slide .slide_img { z-index: 1; opacity: 0; width: 100%; height: 30vh; background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top: 0; animation-name: mv; animation-iteration-count: infinite; animation-duration: 30s; } @media screen and (max-width: 768px) { header .header_bg .mv_area .slide .slide_img { height: 20vh; background-size: cover; } } header .header_bg .mv_area .slide .slide_img.img01 { background-image: url(images/01.jpg); background-position: center bottom; } @media screen and (max-width: 768px) { header .header_bg .mv_area .slide .slide_img.img01 { background-position: center center; } } header .header_bg .mv_area .slide .slide_img.img02 { animation-delay: 6s; background-image: url(images/02.jpg); animation-iteration-count: infinite; } header .header_bg .mv_area .slide .slide_img.img03 { animation-delay: 12s; background-image: url(images/03.jpg); animation-iteration-count: infinite; } header .header_bg .mv_area .slide .slide_img.img04 { animation-delay: 17s; background-image: url(images/04.jpg); animation-iteration-count: infinite; } header h1.logo { width: 239px; margin: 2rem 0; z-index: 10; position: relative; top: 0; } @media screen and (max-width: 970px) { header h1.logo { margin: 0.5rem 0; } } @media screen and (max-width: 768px) { .home header { height: 20vh; } }/*# sourceMappingURL=style.css.map */