/*----------------------------------------------*/ /* /* config /* /*----------------------------------------------*/ /* fontfamily --------------------------------------*/ /* font-weight --------------------------------------*/ /* line-height --------------------------------------*/ /* color --------------------------------------*/ /* width --------------------------------------*/ /* main */ /* global navi */ /* column max width */ /* 2column max width */ /* dlModEleFloat */ /* tModEleNews */ /* fModEleTable th */ /* input textarea */ /* btn */ /* margin /*----------------------------------------------*/ /* between column */ /* padding ----------------------------------------------*/ /* box */ /* column */ /* li padding-left */ /* dd padding-left */ /* faq*/ /* border radius */ /* img opacity */ /* indent */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* transition*/ /* boxShadow*/ /* borderRadius*/ /* @import url('http://example.com/example_style.css'); */ /*@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/ @import url(https://fonts.googleapis.com/css?family=Mr+De+Haviland:400); @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700); @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 100; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Thin.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Thin.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Thin.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 200; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Light.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Light.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Light.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 300; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Demilight.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Demilight.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Demilight.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Regular.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Regular.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Regular.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 500; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Medium.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Medium.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Medium.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 700; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Bold.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Bold.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Bold.otf") format("opentype"); } @font-face { font-family: "Noto Sans Japanese"; font-style: normal; font-weight: 900; font-display: swap; src: url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Black.woff") format("woff"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Black.woff2") format("woff2"), url("https://www.turbine.co.jp/hubfs/fonts/NotoSans_Black.otf") format("opentype"); } /****************************************************************************/ /* This is the default custom CSS file that is included in every template. */ /* It can be edited, but it cannot be renamed or deleted. */ /* You will see it included in the source of every page as */ /* 'コードファイル/Custom/system/default/Hs Default Custom Style.css' */ /****************************************************************************/ /*----------------------------------------------*/ /* /* box-sizing /* /*----------------------------------------------*/ *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /*----------------------------------------------*/ /* /* reset /* /*----------------------------------------------*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } th,td { padding: 10px 15px; } .main th p, .main td p { padding: 0; margin-right: 0; margin-left: 0; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .row-fluid [class*="span"] { min-height: inherit; } /*----------------------------------------------*/ /* /* elements /* /*----------------------------------------------*/ /* html --------------------------------------*/ html{ font-size: 62.5%; visibility: hidden; } html.wf-active { visibility: visible; } ::-moz-selection{ color: #222222; background-color: #f6f2ed; } ::selection { color: #222222; background-color: #f6f2ed; } /* body --------------------------------------*/ body { background-color: #ffffff; color: #666666; text-align: left; font-family: Noto Sans Japanese,YuGothic,'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', Osaka, sans-serif; -webkit-text-size-adjust: 100%; line-height: 2.0; font-size: 1.6rem; font-weight: 400; overflow-x: hidden; line-break: strict; word-break: break-word; overflow-wrap: break-word; word-wrap: break-word; } /* img --------------------------------------*/ img{ max-width: 100%; height: auto; vertical-align: bottom; -ms-interpolation-mode: bicubic; } img[src$=".svg"] { width: 100%; } /* input --------------------------------------*/ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea { padding: 5px 5px; border: 1px solid #cccccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="tel"]:hover, input[type="number"]:hover, input[type="date"]:hover, select:hover, textarea:hover{ border: 1px solid #cccccc; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus { border: 1px solid #cccccc; } input[type="button"], input[type="submit"], input[type="button"].disabled:hover, input[type="submit"].disabled:hover { padding: 3px 5px; color: inherit; } input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, input[type="button"]:visited, input[type="button"].disabled:hover:hover, input[type="button"].disabled:hover:focus, input[type="button"].disabled:hover:active, input[type="button"].disabled:hover:visited, input[type="submit"].disabled:hover:hover, input[type="submit"].disabled:hover:focus, input[type="submit"].disabled:hover:active, input[type="submit"].disabled:hover:visited { text-decoration: none; } .block>span { display: block; } .block02>span { display: inline-block; } .natural+.-mt20 { margin-top: 20px; } a { color: #222222; } a:hover { text-decoration: none; } .row-fluid [class*="span"] { min-height: inherit !important; } :placeholder-shown { color: #cccccc; } /* Google Chrome, Safari, Opera 15+, Android, iOS */ ::-webkit-input-placeholder { color: #cccccc; } /* Firefox */ ::-moz-placeholder { color: #cccccc; opacity: 1; } /* IE 10+ */ :-ms-input-placeholder { color: #cccccc; } .row-fluid [class*="span"]:first-child .container, .row-fluid [class*="span"] .container{ float: none; width: 100% !important; max-width: 1050px; margin-right: auto; margin-left: auto; } @media only screen and (max-width: 1117px) { .row-fluid [class*="span"]:first-child .container{ margin-right: 0; margin-left: 0; padding: 0 20px; max-width: 1100px; } .row-fluid [class*="span"]:first-child .container .container { padding: 0; } } .row-fluid .container .span12 { float: none; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* ========================================================================== columns ========================================================================== */ .columns { width: 100%; -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; } .columns.-center { -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;; } .columns > .column{ margin-bottom: 0; width: 100%; margin-top: 60px; } .columns.-center>.column { width: auto !important; } .-border-r.-solid > .column { border-right: 1px solid #cccccc; } .-border-r.-dotted > .column { border-right: 1px dotted #cccccc; } .-border-r.-solid > .column:last-child, .-border-r.-dotted > .column:last-child{ border-right: none; } .-two > .column { width: 50.0%; max-width: 525.0px; margin-top: 20px; } .-two > .column:nth-of-type(2n+1) { padding-right: 15px; } .-two > .column:nth-of-type(2n+2) { padding-left: 15px; } .-two > .column:nth-of-type(1), .-two > .column:nth-of-type(2){ margin-top: 0; } .-two.-two-one > .column:nth-of-type(2n+1) { width: 67.14285714285714%; max-width: 705.0px; } .-two.-two-one > .column:nth-of-type(2n+2) { width: 32.857142857142854%; max-width: 345.0px; } .-two.-one-two > .column:nth-of-type(2n+1) { width: 32.857142857142854%; max-width: 345.0px; } .-two.-one-two > .column:nth-of-type(2n+2) { width: 67.14285714285714%; max-width: 705.0px; } .-two.-three-one > .column:nth-of-type(2n+1) { width: 75.0%; max-width: 787.5px; } .-two.-three-one > .column:nth-of-type(2n+2) { width: 25.0%; max-width: 262.5px; } .-two.-one-three > .column:nth-of-type(2n+1) { width: 25.0%; max-width: 262.5px; } .-two.-one-three > .column:nth-of-type(2n+2) { width: 75.0%; max-width: 787.5px; } .-three > .column:nth-of-type(3n+1) { width: 32.857142857142854%; max-width: 345.0px; padding-right: 15px; } .-three > .column:nth-of-type(3n+2) { width: 34.285714285714285%; max-width: 360.0px; padding-right: 15px; padding-left: 15px; } .-three > .column:nth-of-type(3n+3) { width: 32.857142857142854%; max-width: 345.0px; padding-left: 15px; } .-three > .column:nth-of-type(1), .-three > .column:nth-of-type(2), .-three > .column:nth-of-type(3) { margin-top: 0; } .-four .column { width: 25.714285714285715%; max-width: 270.0px; padding-right: 15px; padding-left: 15px; margin: 0; } .-four .column:nth-of-type(4n+1), .-four .column:nth-of-type(4n+4){ width: 24.285714285714285%; max-width: 255.0px; } .-four .column:nth-of-type(1){ padding-left: 0; } .-four .column:nth-of-type(4){ padding-right: 0; } .-five .column { width: 20.571428571428573%; max-width: 216.0px; padding-right: 15px; padding-left: 15px; margin: 0; } .-five .column:nth-of-type(5n+1), .-five .column:nth-of-type(5n+5){ width: 19.142857142857142%; max-width: 201.0px; } .-five .column:nth-of-type(1){ padding-left: 0; } .-five .column:nth-of-type(5){ padding-right: 0; } @media only screen and (min-width: 641px) and (max-width: 768px) { .-bp-768.-two > .column:nth-of-type(2), .-bp-768.-three > .column:nth-of-type(2), .-bp-768.-three > .column:nth-of-type(3), .-bp-768.-four > .column:nth-of-type(2), .-bp-768.-four > .column:nth-of-type(3), .-bp-768.-four > .column:nth-of-type(4){ margin: 60px 0 0; } .-bp-768.-border-r > .column { margin-top: 60px; padding-top: 60px; } .-bp-768 > .column.-order02, .-bp-768.-two.-order02 { margin: 60px 0 0; } .-two.-two-one>.column:nth-of-type(1), .-two.-two-one>.column:nth-of-type(2), .-two.-one-two>.column:nth-of-type(1), .-two.-one-two>.column:nth-of-type(2), .-two.-three-one>.column:nth-of-type(1), .-two.-three-one>.column:nth-of-type(2), .-two.-one-three>.column:nth-of-type(1), .-two.-one-three>.column:nth-of-type(2){ width: 50.0%; max-width: 525.0px; } .-four.-rate-211 > .column{ width: 50.0%; max-width: 525.0px; margin: 60px 0 0 0; } .-four.-rate-211 > .column:nth-of-type(2), .-four.-rate-211 > .column:nth-of-type(4){ padding-left: 15px; padding-right: 0; } .-four.-rate-211 > .column:nth-of-type(1), .-four.-rate-211 > .column:nth-of-type(2){ margin-top: 0; } .-four.-rate-211.-border-r.-solid > .column:nth-of-type(2), .-four.-rate-211.-border-t.-dotted > .column:nth-of-type(2){ border-right: none; } .-five > .column{ padding: 0 15px; margin: 60px 0 0 0; } .-five > .column:nth-of-type(1), .-five > .column:nth-of-type(2), .-five > .column:nth-of-type(3) { margin-top: 0; } .-five > .column:nth-of-type(3n+1){ width: 32.857142857142854%; max-width: 345.0px; padding-left: 0; } .-five > .column:nth-of-type(3n+2){ width: 34.285714285714285%; max-width: 360.0px; } .-five > .column:nth-of-type(3n+3){ width: 32.857142857142854%; max-width: 345.0px; padding-right: 0; } } @media only screen and (min-width: 481px) and (max-width: 768px) { .-four.-rate-221 > .column{ width: 50.0%; max-width: 525.0px; margin: 60px 0 0 0; } .-four.-rate-221 > .column:nth-of-type(2), .-four.-rate-221 > .column:nth-of-type(4){ padding-left: 15px; padding-right: 0; } .-four.-rate-221 > .column:nth-of-type(1), .-four.-rate-221 > .column:nth-of-type(2){ margin-top: 0; } .-four.-rate-221.-border-r.-solid > .column:nth-of-type(2), .-four.-rate-221.-border-r.-dotted > .column:nth-of-type(2){ border-right: none; } } @media only screen and (max-width: 768px) { .-bp-768{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .-bp-768 > .column { width: 100% !important; max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; } .-bp-768.-border-r.-solid > .column { border-right: none !important; border-top: 1px solid #cccccc; } .-bp-768.-border-r.-dotted > .column { border-right: none !important; border-top: 1px doteed #cccccc; } .-bp-768.-border-r > .column:first-child { margin-top: 0; padding-top: 0; border: none:; } .-bp-768 > .column.-order01, .-bp-768.-two.-order01 { -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; order: 1;; margin: 0; } .-bp-768 > .column.-order02, .-bp-768.-two.-order02 { -webkit-order: 2; -moz-order: 2; -ms-order: 2; -o-order: 2; order: 2;; } .-bp-768 > .column:first-child { margin-top: 0 !important; } .-four.-rate-222 > .column{ width: 50%; max-width: 525.0px; margin: 60px 0 0 0; } .-four.-rate-222 > .column:nth-of-type(2), .-four.-rate-222 > .column:nth-of-type(4){ padding-left: 15px !important; padding-right: 0 !important; } .-four.-rate-222 > .column:nth-of-type(1), .-four.-rate-222 > .column:nth-of-type(2){ margin-top: 0 !important; } .-four.-rate-222.-border-r.-solid > .column:nth-of-type(2), .-four.-rate-222.-border-r.-dotted > .column:nth-of-type(4){ border-right: none; } } @media only screen and (min-width: 481px) and (max-width: 640px) { .-four.-rate-221 > .column, .-four.-rate-421 > .column{ width: 50.0%; max-width: 525.0px; margin: 20px 0 0 0; } .-four.-rate-421 > .column:nth-of-type(2), .-four.-rate-421 > .column:nth-of-type(4){ padding-left: 15px; padding-right: 0; } .-four.-rate-421 > .column:nth-of-type(1), .-four.-rate-421 > .column:nth-of-type(2){ margin-top: 0; } .-four.-rate-421.-border-r.-solid > .column:nth-of-type(2), .-four.-rate-421.-border-r.-dotted > .column:nth-of-type(4){ border-right: none; } } @media only screen and (max-width: 640px) { .-two > .column, .-bp-640.-two > .column:nth-of-type(2), .-three > .column, .-bp-640.-three > .column:nth-of-type(2), .-bp-640.-three > .column:nth-of-type(3), .-four > .column, .-bp-640.-four > .column:nth-of-type(2), .-bp-640.-four > .column:nth-of-type(3), .-bp-640.-four > .column:nth-of-type(4){ margin-top: 20px; } .-two.-border-r > .column, .-three.-border-r > .column, .-four.-border-r > .column{ margin-top: 20px; padding-top: 20px; } .-bp-640, .-bp-640.-two, .-bp-640.-three, .-bp-640.-four{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; } .-bp-640 > .column{ width: 100% !important; max-width: 100% !important; padding-right: 0 !important; padding-left: 0 !important; } .-bp-640 > .column:first-child { margin-top: 0 !important; } .-bp-640.-two > .column.-order01, .-bp-640 > .column.-order01{ -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; order: 1;; margin: 0 !important; } .-bp-640 > .column.-order02, .-bp-640.-two > .column.-order02{ -webkit-order: 2; -moz-order: 2; -ms-order: 2; -o-order: 2; order: 2;; margin: 20px 0 0 !important; } .-bp-640.-border-r > .column { padding: 20px 0 0; margin: 20px 0 0; } .-bp-640.-border-r.-solid > .column { border-right: none; border-top: 1px solid #cccccc; } .-bp-640.-border-r.-dotted > .column { border-right: none; border-top: 1px dotted #cccccc; } .-bp-640.-border-r > .column:first-child{ padding-top: 0 !important; margin-top: 0 !important; border-top: none; } .-two.-two-one { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; } .-two.-two-one > .column:nth-of-type(2n+1) { margin-top: 20px; } .-two.-two-one > .column:nth-of-type(2n+2) { width: 100% !important; max-width: 100% !important; } .-two.-two-one > .column.-order01{ -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; order: 1;; margin: 0 !important; } .-two.-two-one > .column.-order02{ -webkit-order: 2; -moz-order: 2; -ms-order: 2; -o-order: 2; order: 2;; margin: 20px 0 0 !important; } .-four.-rate-422 > .column{ width: 50.0%; max-width: 525.0px; margin: 20px 0 0 0; padding-right: 15px !important; padding-left: 0 !important; } .-four.-rate-422 > .column:nth-of-type(2), .-four.-rate-422 > .column:nth-of-type(4){ padding-left: 15px !important; padding-right: 0 !important; } .-four.-rate-422 > .column:nth-of-type(1), .-four.-rate-422 > .column:nth-of-type(2){ margin-top: 0; } .-four.-rate-422.-border-r.-solid > .column:nth-of-type(2), .-four.-rate-422.-border-r.-dotted > .column:nth-of-type(2){ border-right: none; } .-five > .column{ padding: 0 15px; margin: 20px 0 0 0; width: 50.0%; max-width: 525.0px; } .-five > .column:nth-of-type(1), .-five > .column:nth-of-type(2) { margin-top: 0; } .-five > .column:nth-of-type(2n+1){ padding-left: 0; } .-five > .column:nth-of-type(2n+2){ padding-right: 0; } } @media only screen and (max-width: 480px) { .-bp-480, .-bp-480.-two, .-bp-480.-three, .-bp-480.-four{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .-bp-480 > .column, .-bp-480.-two > .column:nth-of-type(2), .-bp-480.-three > .column:nth-of-type(2), .-bp-480.-three > .column:nth-of-type(3), .-bp-480.-four > .column:nth-of-type(2), .-bp-480.-four > .column:nth-of-type(3), .-bp-480.-four > .column:nth-of-type(4), .-three.-rate-221 > .column, .-four.-rate-221 > .column, .-three.-rate-321 > .column, .-four.-rate-421 > .column, .-three.-rate-321 > .column:nth-of-type(3n+3), .-four.-rate-421 > .column:nth-of-type(4n+4), .-three.-rate-321 > .column:nth-of-type(2n+2), .-four.-rate-421 > .column:nth-of-type(2n+2){ width: 100% !important; max-width: 100% !important; margin: 20px 0 0; padding-right: 0 !important; padding-left: 0 !important; } .-bp-480 > li:first-child, .-bp-480 > .column:first-child { margin-top: 0 !important; } .-bp-480 > .column.-order01, .-bp-480.-two > .column.-order01{ -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; order: 1;; margin: 0 !important; } .-bp-480 > .column.-order02, .-bp-480.-two > .column.-order02{ -webkit-order: 2; -moz-order: 2; -ms-order: 2; -o-order: 2; order: 2;; margin: 20px 0 0 !important; } .-bp-480.-border-r > .column, .-four.-rate-441.-border-r > .column{ padding: 20px 0 0; margin: 20px 0 0; } .-bp-480.-border-r.-solid > .column, .-four.-rate-441.-border-r.-solid > .column{ border-right: none; border-top: 1px solid #cccccc; } .-bp-480.-border-r.-dotted > .column, .-four.-rate-441.-border-r.-dotted > .column{ border-right: none; border-top: 1px dotted #cccccc; } .-bp-480.-border-r > .column:first-child, .-four.-rate-441.-border-r > .column:first-child{ padding-top: 0 !important; margin-top: 0 !important; border-top: none; } .-four.-rate-442 > .column{ width: 50.0%; max-width: 525.0px; margin: 20px 0 0 0; padding-right: 15px; } .-four.-rate-442 > .column:nth-of-type(2), .-four.-rate-442 > .column:nth-of-type(4){ padding-right: 0; padding-left: 15px; } .-four.-rate-442 > .column:nth-of-type(1), .-four.-rate-442 > .column:nth-of-type(2), .-four.-rate-421 > .column:nth-of-type(1), .-four.-rate-421 > .column:nth-of-type(2){ margin-top: 0; } .-four.-rate-442.-border-r > .column:nth-of-type(2) { border-right: none; } } /* p --------------------------------------*/ .natural p{ font-size: 1.6rem; line-height: 2.0; } .natural p+p { margin-top: 30px; } /* a --------------------------------------*/ .natural a { display: inline-block; position: relative; color: #222222; text-decoration: none; padding-left: 12px; min-height: 10px; word-break: break-all; } .natural a::after { content: ""; position: absolute; left: 0; top: 0.8em; border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .natural a:link { color: #222222; text-decoration: none; } .natural a:visited { color: #222222; text-decoration: none; } .natural a:active { color: #222222; text-decoration: none; } .natural a:hover { color: #222222; text-decoration: underline; } .natural a:focus { color: #222222; text-decoration: underline; } .natural a[target="_blank"] { display: inline-block; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0MjkwYzc7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5wb3B1cDwvdGl0bGU+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjE2IDExLjIgMTYgMCA0LjggMCA0LjggNC44IDAgNC44IDAgMTYgMTEuMiAxNiAxMS4yIDExLjIgOS42IDExLjIgOS42IDE0LjQgMS42IDE0LjQgMS42IDYuNCA0LjggNi40IDQuOCAxMS4yIDE2IDExLjIiLz48L2c+PC9nPjwvc3ZnPg==); background-position: left 0.8em; background-repeat: no-repeat; background-size: 10px 10px; padding-left: 15px; min-height: 10px; word-break: break-all; } .natural a[target="_blank"]::after { display: none; } /* 画像リンクの外部リンクアイコンを消す */ .natural a.js-no-icon { padding-left: 0; background-image: none; } .natural a.js-no-icon::after { content: none; } /* アンカー用のaタグの外部リンクアイコンを消す */ .natural a[data-hs-anchor] { display: initial; width: 0; height: 0; min-height: 0; margin: 0; padding: 0; background: none; } .natural a[data-hs-anchor]::after { content: none; } /* table --------------------------------------*/ .natural table { width: 100%; border-top: 1px solid #cccccc; border-left: 1px solid #cccccc; } .natural caption { padding-bottom: 5px; font-weight: bold; text-align: left; } .natural th,.natural td { text-align: left; border-right: 1px solid #cccccc; border-bottom: 1px solid #cccccc; font-size: 1.6rem; } .natural th { vertical-align:middle; line-height: 1.9; background-color: #f6f2ed; color: #222222; } .natural td { line-height: 1.8; background-color: #ffffff; } .natural h2 { color: #222222; font-size: 3.0rem; font-weight: 500; line-height: 1.5; margin-bottom: 50px; } .natural h3 { color: #222222; font-size: 2.4rem; font-weight: 500; line-height: 1.6; margin-bottom: 34px; background-position: right 7px; } .natural h3>a { position: relative; color: #222222; font-size: 2.4rem; font-weight: 500; line-height: 1.6; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyINCgkgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9Ii01IC0yIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01IC0yIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxkZWZzPg0KPC9kZWZzPg0KPHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMxNUFFRTAiIHBvaW50cz0iNSwwIDAsMCAxMC4wNjIsMTAuMDAyIDAsMjAgNSwyMCAxNC41LDEwLjAwMiAiLz4NCjwvc3ZnPg0K); padding-right: 32px; min-height: 24px; } .natural h3>a:link { color: #222222; text-decoration: none;} .natural h3>a:visited { color: #000000; text-decoration: none;} .natural h3>a:active { color: #222222; text-decoration: none;} .natural h3>a:hover { color: #222222; text-decoration: none;} .natural h3>a:focus { color: #222222; text-decoration: none;} .natural h4 { color: #222222; font-size: 2.0rem; font-weight: 500; line-height: 1.7; margin-bottom: 12px; } .natural h4>a { color: #222222; font-size: 2.0rem; font-weight: 500; line-height: 1.7; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyINCgkgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9Ii01IC0yIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01IC0yIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxkZWZzPg0KPC9kZWZzPg0KPHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMxNUFFRTAiIHBvaW50cz0iNSwwIDAsMCAxMC4wNjIsMTAuMDAyIDAsMjAgNSwyMCAxNC41LDEwLjAwMiAiLz4NCjwvc3ZnPg0K); padding-right: 32px; min-height: 24px; } .natural h4>a:link { color: #222222; } .natural h4>a:visited { color: #000000; } .natural h4>a:active { color: #222222; } .natural h4>a:hover { color: #222222; } .natural h4>a:focus { color: #222222; } .natural ul, .natural ol{ padding-left: 1em; } .natural ul>li, .natural ol>li{ list-style-type: none; position: relative; font-size: 1.6rem; } .natural ul>li+li, .natural ol>li+li{ margin-top: 0px; } .natural ul>li:after { display: block; content: ''; position: absolute; top: .9em; left: -1em; width: 6px; height: 6px; background-color: #666666; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .natural .list-bar>li:after { display: block; content: ''; position: absolute; top: 45%; left: -1em; width: 6px; height: 2px; background-color: #666666; } .natural ul>li>a, .natural ol>li>a { padding-left: 0; } .natural ul>li>a:after, .natural ol>li>a:after { display: none; } .natural ol>li{ counter-increment: li; } .natural ol>li:before { content: counter(li)'. '; display: block; position: absolute; top: 0; left: -1em; color: #666666; } .natural strong { font-weight: 500; } @media only screen and (min-width: 641px) and (max-width: 768px) { .natural p, .natural th, .natural td, .natural ul>li, .natural ol>li{ font-size: 1.4rem; } .natural h2 { font-size: 2.6rem; margin-bottom: 50px; } .natural h3 { font-size: 2.2rem; margin-bottom: 34px; } .natural h3>a{ font-size: 2.2rem; } .natural h4 { font-size: 1.8rem; margin-bottom: 12px; } .natural h4>a{ font-size: 1.8rem; } } @media print, screen and (max-width: 640px) { .natural p, .natural th, .natural td, .natural ul>li, .natural ol>li{ font-size: 1.4rem; } .natural h2 { font-size: 2.2rem; margin-bottom: 32px; } .natural h3 { font-size: 2.0rem; margin-bottom: 34px; } .natural h3>a{ font-size: 2.0rem; } .natural h4 { font-size: 1.8rem; margin-bottom: 12px; } .natural h4>a{ font-size: 1.8rem; } .natural .horizontal { border-left: 1px solid #cccccc; overflow-x: scroll; } .natural .vertical table, .natural .horizontal table { border-left: none; } .natural .horizontal table { width: 640px; } .natural .vertical table tr th, .natural .vertical table tr td { display: block; border-bottom: none; border-left: 1px solid #cccccc; height: auto !important; } .natural .vertical table tr th { width: auto; border-bottom: 1px solid #cccccc; } .natural .vertical table tr { border-bottom: 1px solid #cccccc; } } /* ========================================================================== text ========================================================================== */ .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .word { display: inline-block !important; } /* ========================================================================== bg-color ========================================================================== */ .section { background-color: #ffffff; } .section.-l-blue { background-color: #f6f2ed; } .section.-l-blue .container { background-color: ; } .section.-brown { background-color: #39312e; } /* ========================================================================== division ========================================================================== */ .division-top-l { padding-top: 100px !important; } .division-top-m { padding-top: 80px !important; } .division-top-s { padding-top: 60px !important; } .division-top-ss { padding-top: 40px !important; } .division-top-sss { padding-top: 20px !important; } .division-bottom-l { padding-bottom: 100px !important; } .section.-l-blue .container.division-bottom-l { padding-bottom: 0; padding-bottom: 100px !important; } .division-bottom-m { padding-bottom: 80px !important; } .division-bottom-s { padding-bottom: 60px !important; } .division-bottom-ss { padding-bottom: 40px !important; } .division-bottom-sss { padding-bottom: 20px !important; } .division-img { overflow: hidden; width: 100%; } .division-img img{ width: 100%; } .hr-line { border: none; margin: 0; border-top: 1px solid #cccccc; width: 100%; padding: 1px 0; } @media only screen and (min-width: 641px) and (max-width: 768px) { .division-top-l { padding-top: 100px !important; } .division-top-m { padding-top 80px !important; } .division-top-s { padding-top: 60px !important; } .division-top-ss { padding-top: !important; } .division-top-sss { padding-top: !important; } .division-bottom-l { padding-bottom: 100px !important; } .section.-l-blue .container.division-bottom-l { padding-bottom: 0; padding-bottom: 100px !important; } .division-bottom-m { padding-bottom: 80px !important; } .division-bottom-s { padding-bottom: 60px !important; } .division-bottom-ss { padding-bottom: !important; } .division-bottom-sss { padding-bottom: !important; } } @media only screen and (max-width: 640px) { .division-top-l { padding-top: 60px !important; } .division-top-m { padding-top 60px !important; } .division-top-s { padding-top: 20px !important; } .division-top-ss { padding-top: !important; } .division-bottom-l { padding-bottom: 60px !important; } .section.-l-blue .container.division-bottom-l { padding-bottom: 0; padding-bottom: 60px !important; } .division-bottom-m { padding-bottom: 60px !important; } .division-bottom-s { padding-bottom: 20px !important; } .division-bottom-ss { padding-bottom: !important; } .division-bottom-sss { padding-bottom: !important; } } /* ========================================================================== display ========================================================================== */ @media only screen and (min-width: 1050px) { .pc, .pc-tb{ display: block !important; } .tb, .sp, .tb-sp{ display: none !important; } } @media only screen and (min-width: 769px) { .tb-sp02 { display: none !important; } } @media only screen and (min-width: 641px) and (max-width: 1049px) { .pc, .sp{ display: none !important; } .tb, .pc-tb{ display: block !important; } .tb-sp { display: block !important; } } @media only screen and (max-width: 768px) { .tb-sp02 { display: block !important; } } @media only screen and (max-width: 640px) { .sp { display: block !important; } .tb, .pc, .pc-tb{ display: none !important; } .tb-sp { display: block !important; } } /* ========================================================================== figure ========================================================================== */ .figure-box .img { margin-bottom: 20px; text-align: center; } .figure-box a { text-decoration: none; color: #222222; } .figure-box a .detail-link { margin: 16px 20px 0; } .figure-box a .heading02, .figure-box a .heading03, .figure-box a .heading04, .figure-box a .text-lead { position: relative; } .figure-box a[target="_blank"] .heading02, .figure-box a[target="_blank"] .heading03, .figure-box a[target="_blank"] .heading04, .figure-box a[target="_blank"] .text-lead { background-size: 20px 20px; padding-left: 0; display: inline-block; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0MjkwYzc7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5wb3B1cDwvdGl0bGU+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjE2IDExLjIgMTYgMCA0LjggMCA0LjggNC44IDAgNC44IDAgMTYgMTEuMiAxNiAxMS4yIDExLjIgOS42IDExLjIgOS42IDE0LjQgMS42IDE0LjQgMS42IDYuNCA0LjggNi40IDQuOCAxMS4yIDE2IDExLjIiLz48L2c+PC9nPjwvc3ZnPg==); background-position: left 0.5em; background-repeat: no-repeat; } .figure-box a .heading02:before, .figure-box a .heading03:before, .figure-box a .heading04:before, .figure-box a .text-lead:before{ content: ""; position: absolute; top: 10px; left: 0; width: 20px; height: 20px; background-color: #af0000; } .figure-box a .heading02:after, .figure-box a .heading03:after, .figure-box a .heading04:after, .figure-box a .text-lead:after{ content: ""; position: absolute; left: 4px; top: 16px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 6px; height: 6px; } .figure-box a[target="_blank"] .heading02:before, .figure-box a[target="_blank"] .heading03:before, .figure-box a[target="_blank"] .heading04:before, .figure-box a[target="_blank"] .text-lead:before, .figure-box a[target="_blank"] .heading02:after, .figure-box a[target="_blank"] .heading03:after, .figure-box a[target="_blank"] .heading04:after, .figure-box a[target="_blank"] .text-lead:after{ display: none; } .figure-box a .heading02>span, .figure-box a .heading03>span, .figure-box a .heading04>span, .figure-box a .text-lead>span { display: inline-block; padding-left: 30px; -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; transition: transform 0.3s liner; } @media only screen and (min-width: 769px) { .figure-box a .img, .figure-box .img{ overflow: hidden; } .figure-box a .img img, .figure-box .img a img{ -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -ms-transition: -ms-transform 0.3s linear; transition: transform 0.3s liner; } .figure-box a:hover .img img, .figure-box .img a:hover img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .figure-box a:hover .heading02>span, .figure-box a:hover .heading03>span, .figure-box a:hover .heading04>span, .figure-box a:hover .text-lead>span{ color: #222222 !important; } } /* カラムタグ */ .choice_field__list{ display: flex; flex-wrap: wrap; margin: 10px 0; } .choice_field__list p{ font-weight: 500; } .choice_field__item{ box-sizing: border-box; background-color: #ffffff; padding: 1.5px 5px; margin-right: 6px; margin-bottom: 6px; line-height: 1.5; font-size: 1.4rem; border: solid 1px #cccccc; } @media screen and (max-width: 1049px) { .choice_field__ite{ font-size: 1.3rem; } } .section.-l-blue .choice_field__item{ border: none; } .padding-box.-blue .choice_field__item{ border: none; } .choice_field{ display: flex; flex-wrap: wrap; } .choice_field .choice_field__list{ width: 85%; margin-top: 5px; margin-bottom: 0; } @media screen and (max-width:900px) { .choice_field .choice_field__list{ width: 78%; } } @media screen and (max-width:767px) { .choice_field .choice_field__list{ width: 72%; } } .padding-box { padding: 20px; } .padding-box.-blue { background-color: #f6f2ed; } .padding-box.-border { border: 1px solid #cccccc; } .-brown .padding-box.-border { border: 1px solid #ffffff; } /* ========================================================================== heading ========================================================================== */ .heading01 { color: #222222; font-size: 11.0rem; font-weight: 400; line-height: 0.8; font-family: sans-serif; margin-top: 50px; } html.wf-active .heading01 { font-family: "shelby",sans-serif; } .heading01 span { word-break: break-all; } .heading02 { color: #222222; font-size: 3.0rem; font-weight: 500; line-height: 1.5; margin-bottom: 20px; } .heading02>.link-list{ color: #222222; font-size: 3.0rem; font-weight: 500; line-height: 1.5; } .heading03 { color: #222222; font-size: 2.4rem; font-weight: 500; line-height: 1.6; margin-bottom: 20px; } .heading03>.link-list{ color: #222222; font-size: 2.4rem; font-weight: 500; line-height: 1.6; } .heading04 { color: #222222; font-size: 2.0rem; font-weight: 500; line-height: 1.7; margin-bottom: 20px; } .heading04>.link-list{ color: #222222; font-size: 2.0rem; font-weight: 500; line-height: 1.7; } .heading04 a[target="_blank"].link-list { background-position: left center; } .text-lead { color: #222222; font-size: 1.8rem; font-weight: 500; line-height: ; margin-bottom: 20px; } .heading02>a.link-list, .heading03>a.link-list, .heading04>a.link-list, .text-lead>a.link-list { position: relative; padding-left: 0; } .heading02>a.link-list:hover>span, .heading03>a.link-list:hover>span, .heading04>a.link-list:hover>span, .text-lead>a.link-list:hover>span { color: #222222 !important; } .heading02>a:before, .heading03>a:before, .heading04>a:before, .text-lead>a:before{ content: ""; position: absolute; top: 50%; left: 0; margin-top: -10px; width: 20px; height: 20px; background-color: #af0000; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZmZmZjt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93LXJpZ2h0LXN1YjwvdGl0bGU+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjAgMTAgNSA1IDAgMCAyIDAgNyA1IDIgMTAgMCAxMCIvPjwvZz48L2c+PC9zdmc+DQo=); background-position: center center; background-repeat: no-repeat; background-size: 6px 11px; } .heading02>a[target="_blank"].link-list, .heading03>a[target="_blank"].link-list, .heading04>a[target="_blank"].link-list, .text-lead>a[target="_blank"].link-list{ background-size: 20px 20px; padding-left: 0; } .heading02>a[target="_blank"]:before, .heading03>a[target="_blank"]:before, .heading04>a[target="_blank"]:before, .text-lead>a[target="_blank"]:before { display: none; } .heading02>a>span, .heading03>a>span, .heading04>a>span, .text-lead>a>span { display: inline-block; padding-left: 30px; } @media only screen and (min-width: 641px) and (max-width: 768px) { .heading01 { font-size: 8.0rem; } .heading02 { font-size: 2.6rem; } .heading03 { font-size: 2.2rem; } .heading03>.link-list{ font-size: 2.2rem; } .heading04 { font-size: 1.8rem; } .heading04>.link-list{ font-size: 1.8rem; } .text-lead { font-size: 1.6rem; } } @media only screen and (max-width: 640px) { .heading01 { font-size: 6.0rem; } .heading02 { font-size: 2.2rem; } .heading03 { font-size: 2.0rem; } .heading03>.link-list{ font-size: 2.0rem; } .heading04 { font-size: 1.8rem; } .heading04>.link-list{ font-size: 1.8rem; } .text-lead { font-size: 1.6rem; } } /* ========================================================================== arrowed-link ========================================================================== */ .link-list { position: relative; color: #222222; text-decoration: none; padding-left: 18px; min-height: 10px; } .-brown .link-list { color: #ffffff; } .link-list:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -3.5px; border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 7px; height: 7px; } .-brown .link-list:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .link-list:link { color: #222222; text-decoration: none; } .link-list:visited { color: #222222; text-decoration: none; } .link-list:active { color: ; text-decoration: none; } .link-list:hover { color: #222222; text-decoration: underline; } .link-list:focus { color: #222222; text-decoration: underline; } .-brown .link-list:link { color: #ffffff; text-decoration: none; } .-brown .link-list:visited { color: #ffffff; text-decoration: none; } .-brown .link-list:active { color: #ffffff; text-decoration: none; } .-brown .link-list:hover { color: #ffffff; text-decoration: underline; } .-brown .link-list:focus { color: #ffffff; text-decoration: underline; } a[target="_blank"].link-list { display: inline-block; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0MjkwYzc7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5wb3B1cDwvdGl0bGU+PGcgaWQ9IuODrOOCpOODpOODvF8yIiBkYXRhLW5hbWU9IuODrOOCpOODpOODvCAyIj48ZyBpZD0i44Os44Kk44Ok44O8XzEtMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+PHBvbHlnb24gY2xhc3M9ImNscy0xIiBwb2ludHM9IjE2IDExLjIgMTYgMCA0LjggMCA0LjggNC44IDAgNC44IDAgMTYgMTEuMiAxNiAxMS4yIDExLjIgOS42IDExLjIgOS42IDE0LjQgMS42IDE0LjQgMS42IDYuNCA0LjggNi40IDQuOCAxMS4yIDE2IDExLjIiLz48L2c+PC9nPjwvc3ZnPg==); background-position: left 0.5em; background-repeat: no-repeat; background-size: 10px 10px; padding-left: 15px; min-height: 10px; word-break: break-all; } .icon img { vertical-align: middle; margin-left: 0.5em; } .no-link { text-decoration: none; } .no-link:hover { text-decoration: none; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* ========================================================================== link ========================================================================== */ .page-link { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;; } .page-link>li+li { padding-left: 30px; } .page-link>li >p{ text-align: center; position: relative; min-height: 35px; } .page-link>li >p:after{ content: ""; display: block; position: absolute; bottom: 0; right: 50%; margin-right: -4px; border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 8px; height: 8px; -moz-transition: -moz-transform 0.2s linear; -webkit-transition: -webkit-transform 0.2s linear; -o-transition: -o-transform 0.2s linear; -ms-transition: -ms-transform 0.2s linear; transition: transform 0.2s linear; } .page-link a{ display: block; padding-bottom: 10px; margin-bottom: 30px; background-image: none; padding-left: 0; color: #222222 !important; font-size: 1.6rem; font-weight: 500; } .page-link .link-list:after{ display: none; } .page-link>li:hover p:after{ -webkit-transform:translate(0,10px) rotate(-45deg); -ms-transform:translate(0,10px) rotate(-45deg); transform:translate(0,10px) rotate(-45deg); -moz-transition: -moz-transform 0.2s linear; -webkit-transition: -webkit-transform 0.2s linear; -o-transition: -o-transform 0.2s linear; -ms-transition: -ms-transform 0.2s linear; transition: transform 0.2s linear; } @media only screen and (min-width: 641px) and (max-width: 768px) { .anchor-link { padding-top: 60px !important; margin-top: -60px !important; } } @media only screen and (max-width: 640px) { .anchor-link { padding-top: 50px !important; margin-top: -50px !important; } } @media only screen and (max-width: 640px) { .page-link { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; } .page-link>li { margin-right: 0; margin-left: 0; } .page-link>li+li { margin: 0; padding: 0; } .page-link>li >p{ text-align: left; min-height: inherit; } .page-link a{ padding-bottom: 0; padding: 16px 0; padding-left: 0; border-bottom: 1px solid #cccccc; line-height: 1.2; } .page-link>li >p:after{ right: 0; top: 50%; margin-right: 0; margin-top: -8px; background-position: right center; } } /* boxShadow*/ /* ========================================================================== btn ========================================================================== */ .button-top { margin-top: 30px; } .button-top-border { margin-top: 15px; padding-top: 15px; border-top: 1px solid #cccccc; } .-brown .button-top-border { border-top: 1px solid #ffffff; } .button { display: block; width: 100%; text-align: left; text-decoration: none; outline: none; margin:auto; padding: 0 20px; } .button.-auto { width: auto; display: inline-block; } .button { -webkit-transition: all .3s; transition: all .3s; } .button>span { display: inline-block; vertical-align: middle; padding: 13px 0 13px 18px; line-height: 1; } .button.-favorite1 { background-color: #333333; border: 1px solid #333333; color: #ffffff; } .button.-favorite2 { background-color: #ffffff; border: 1px solid #ffffff; color: #ffffff; } .button.-favorite3 { background-color: #af0000; border: 1px solid #af0000; color: #ffffff; } .button.-favorite4 { background-color: #ffffff; border: 1px solid #ffffff; color: #ffffff; } .button.-favorite5 { background-color: #ffffff; border: 1px solid #ffffff; color: #ffffff; } .button.-favorite6 { background-color: #ffffff; border: 1px solid #ffffff; color: #ffffff; } .button.-favorite1>span, .button.-favorite2>span, .button.-favorite3>span, .button.-favorite4>span, .button.-favorite5>span, .button.-favorite6>span { position: relative; } .button.-favorite1>span:after, .button.-favorite2>span:after, .button.-favorite3>span:after, .button.-favorite4>span:after, .button.-favorite5>span:after, .button.-favorite6>span:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -3.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 7px; height: 7px; } .button.-favorite1:hover, .button.-favorite2:hover, .button.-favorite3:hover, .button.-favorite4:hover, .button.-favorite5:hover, .button.-favorite6:hover { background-color: #ffffff; } .button.-favorite1:hover { color: #333333; } .button.-favorite2:hover { color: #ffffff; } .button.-favorite3:hover { color: #af0000; } .button.-favorite4:hover { color: #ffffff; } .button.-favorite5:hover { color: #ffffff; } .button.-favorite6:hover { color: #ffffff; } .button.-favorite1:hover>span:after { border-left: 2px solid #333333; border-bottom: 2px solid #333333; } .button.-favorite2:hover>span:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .button.-favorite3:hover>span:after { border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; } .button.-favorite4:hover>span:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .button.-favorite5:hover>span:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } .button.-favorite6:hover>span:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } /* ========================================================================== movie ========================================================================== */ .movie { position: relative; width: 100%; padding-top: 56.25%; } .movie iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /* ========================================================================== map ========================================================================== */ .map { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .map iframe, .map object, .map embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ .tab-contents { position: relative; } .tab-contents .anchor-link { display: none; width: 100%; } .tab-contents .anchor-link.active { display: block; } .tab-contents>div>.tab-list li .active { background-color: #cccccc; color: #222222; } .tab-contents>div>.tab-list li .active :hover { background-color: #cccccc; color: #222222; } .tab-contents .inner { margin-top: 60px; background-color: transparent; } @media only screen and (max-width: 640px) { .tab-contents .inner { margin-top: 20px; } } .tab-contents .tab-list { border-bottom: 1px solid #cccccc; border-left: 1px solid#cccccc; -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; } .tab-contents .tab-list>li { margin-right: 0; margin-left: 0; } .tab-contents .button.-tab { display: table; width: 100%; position: relative; background-color: #ffffff; border-right: 1px solid #cccccc; border-top: 1px solid #cccccc; color: #222222; padding: 0 30px; } .tab-contents .button.-tab, .tab-contents .button.-tab:before, .tab-contents .button.-tab:after { -webkit-transition: all .3s; transition: all .3s; } .tab-contents .button.-tab:hover { background-color: #cccccc; color: #222222; } .tab-contents .button.-tab>span { display: table-cell; vertical-align: middle; text-align: center; font-size: 1.6rem; font-weight: 500; height: 48px; padding: 0; } /* ========================================================================== list ========================================================================== */ .list-disc, .list-bar, .list-number{ padding-left: 1em; } .list-disc>li, .list-bar>li, .list-number>li{ list-style-type: none; position: relative; } .list-disc>li+li, .list-bar>li+li, .list-number>li+li{ margin-top: 16px; } .list-disc>li:after { display: block; content: ''; position: absolute; top: .7em; left: -1em; width: 6px; height: 6px; background-color: #666666; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .list-bar>li:after { display: block; content: ''; position: absolute; top: 45%; left: -1em; width: 6px; height: 2px; background-color: #666666; } .list-number>li{ counter-increment: li; } .list-number>li>ol>li{ counter-increment: li2; } .list-number>li:before { content: counter(li)'. '; display: block; position: absolute; top: 0; left: -1em; color: #666666; } .list-number>li>ol>li:before { content: counter(li2)'. '; display: block; position: absolute; top: 0; left: -1em; color: #666666; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* transition*/ /* boxShadow*/ /* borderRadius*/ /* ========================================================================== header ========================================================================== */ /*common*/ .site-header01, .site-header02, .site-header03 { position: absolute; top: 0; left: 0; width: 100% !important; z-index: 100; } /****************************************************************************/ /* site-header01 */ /****************************************************************************/ /* header-upper common */ .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between;; -webkit-box-pack: justify; -ms-flex-pack: justify;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; width: 100%; height: 85px; } @media only screen and (max-width: 768px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; height: 60px; } } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left { width: 60%; margin-left: 0; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right{ width: 40%; margin-left: 0; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left { padding-right: 10px; } @media only screen and (max-width: 768px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left { padding-right: 0; } } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right { padding-left: 10px; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left .widget-type-logo { max-width: 150px; height: 30px; width: 32%; line-height: 1; } @media only screen and (max-width: 768px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left .widget-type-logo { max-width: 150px; width: 100%; } } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left .header-caption { font-size: 1.2rem; margin-left: 20px; width: auto; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-box-pack: end; -ms-flex-pack: end;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li { position: relative; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #222222; border-bottom: 2px solid #222222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li a { color: #222222; padding-left: 16px; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } @media only screen and (min-width: 769px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li a:hover { color: #222222; } } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:last-child a{ display: block; height: 50px; line-height: 50px; padding: 0 20px; background-color: #af0000; border: 1px solid #af0000; color: #222222; font-size: 1.6rem; text-decoration: none; background-image: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:last-child:after { display: none; } @media only screen and (min-width: 769px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:last-child a:hover{ background-color: #ffffff; color: #af0000; } } .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li+li { margin-left: 20px; } /* header-upper 1-a */ .site-header01 .header-nav0101, .site-header01 .header-nav0102, .site-header01 .header-nav0103 { position: relative; } .nav-btn { display: none; position: absolute; top: 0; right: 0; width: 60px; height: 60px; text-align: center; background-color: #39312e; cursor: pointer; z-index: 500; padding-top: 22px; } .nav-btn.is-scroll-head { opacity: 0; position: fixed; } .nav-btn.is-scroll { opacity: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;; } .nav-btn>div { position: relative; } .nav-btn>div span.-bar { width: 16px; height: 2px; display: block; background: #ffffff; position: absolute; margin-left: -8px; left: 50%; top: 50%; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .nav-btn.close>div span.-bar { background: #ffffff; } .nav-btn>div span.-bar.top { -webkit-transform: translateY(-5px) scale(1); -ms-transform: translateY(-5px) scale(1); transform: translateY(-5px) scale(1); } .nav-btn.close>div span.-bar.top { -webkit-transform: rotate(-45deg) translateY(0); -ms-transform: rotate(-45deg) translateY(0); transform: rotate(-45deg) translateY(0); } .nav-btn.close>div span.-bar.middle { background: rgba(255,255,255,0); } .nav-btn>div span.-bar.bottom { -webkit-transform: translateY(5px) scale(1); -ms-transform: translateY(5px) scale(1); transform: translateY(5px) scale(1); } .nav-btn.close>div span.-bar.bottom { -webkit-transform: rotate(45deg) translateY(0); -ms-transform: rotate(45deg) translateY(0); transform: rotate(45deg) translateY(0); } .nav-btn span.menu{ display: block; text-align: center; color: #ffffff; font-size: 1.0rem; line-height: 1; padding-top: 13px; letter-spacing: .1em; } @media only screen and (max-width: 768px) { .nav-btn { display: block; } } .site-header01 .header-nav0101 .header-upper { background-color: #ffffff; } /* header-upper 1-b */ .site-header01 .header-nav0102 .header-upper { background-color: #ffffff; } /* header-upper 1-c */ .site-header01 .header-nav0103 .header-upper { background-color: #ffffff; } .site-header01 .header-nav0103 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left .header-caption { color: #222222; } .site-header01 .header-nav0103 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li a { color: #222222; } .site-header01 .header-nav0103 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header01 .header-nav0103 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:last-child a { background-image: none; } /* header-lower common */ .header-lower { position: relative; } .site-header01 .header-lower div.active-branch>ul { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-box-pack: end; -ms-flex-pack: end;; } .site-header01 .header-lower div.active-branch>ul+div ul { display: none; } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul+div ul { display: block; } } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; } } .site-header01 .header-lower div.active-branch>ul>li { /*width: 14.28571428571429%;*/ width: 14.285714285714286%; } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul>li { width: 100%; } } .site-header01 .header-lower div.active-branch>ul>li>a { display: table; width: 100%; text-decoration: none; text-align: center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; color: #222222; } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul>li>a { display: block; color: #222222; text-align: left; } } .site-header01 .header-lower div.active-branch>ul>li.active>a { background-color: #cccccc; font-weight: 500; color: #222222; } @media only screen and (min-width: 769px) { .site-header01 .header-lower div.active-branch>ul>li:hover>a { background-color: #cccccc; font-weight: 500; color: #222222; } } .site-header01 .header-lower div.active-branch>ul>li>a>span { display: table-cell; vertical-align: middle; height: 45px; border-left: 1px solid #cccccc; padding: 0px; font-size: 1.6rem; position: relative; } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul>li>a>span { display: block; height: auto; border-left: none; border-bottom: 1px solid #ffffff; min-height: 10px; padding: 20px 0 20px 12px; } .site-header01 .header-lower div.active-branch>ul>li>a>span:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header01 .header-lower div.active-branch>ul+div ul { border-top: 1px solid #ffffff; padding-top: 20px; } .site-header01 .header-lower div.active-branch>ul+div ul>li+li { padding-top: 20px; } .site-header01 .header-lower div.active-branch>ul+div ul>li { position: relative; } .site-header01 .header-lower div.active-branch>ul+div ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header01 .header-lower div.active-branch>ul+div ul>li>a { display: block; min-height: 10px; padding-left: 12px; } .site-header01 .header-lower div.active-branch>ul+div ul>li:last-child a { display: block; height: 40px; line-height: 40px; padding: 0 20px; background-color: #af0000; border: 1px solid #af0000; color: #222222; font-size: 1.6rem; text-decoration: none; background-image: none; } .site-header01 .header-lower div.active-branch>ul+div ul>li:last-child:after { display: none; } } .site-header01 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: 1px solid #cccccc; } @media only screen and (max-width: 768px) { .site-header01 .header-lower div.active-branch>ul>li:last-child>a>span { border: none; } } @media only screen and (max-width: 768px) { .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-left .header-caption, .site-header01 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right{ display: none; } } /*compactmenu common*/ .site-header01 .header-lower .global-menu div.active-branch>ul>li ul>li { position: relative; } .site-header01 .header-lower .global-menu div.active-branch>ul>li ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #222222; border-bottom: 2px solid #222222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } @media only screen and (max-width: 768px) { .site-header01 .header-lower .global-menu div.active-branch>ul>li ul>li:after { border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; } } .site-header01 .header-lower .global-menu div.active-branch>ul>li ul>li a{ color: #222222; padding-left: 16px; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } @media only screen and (min-width: 769px) { .site-header01 .header-lower .global-menu div.active-branch>ul>li ul>li a:hover{ color: #222222; } } /*horizontal*/ .site-header01 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { width: 100%; background-color: #cccccc; opacity: 0; position: absolute; top: 45px; left: 0; visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; padding: 20px; } @media only screen and (min-width: 769px) { .site-header01 .header-lower .horizontal div.active-branch>ul>li:hover>.compact-wrapper { opacity: 1; visibility: visible; z-index: 3; } } .site-header01 .header-lower .horizontal div.active-branch>ul>li ul{ display: none; } .site-header01 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; } .site-header01 .header-lower .horizontal div.active-branch>ul>li ul>li+li { margin-left: 20px; } /*vertical*/ .site-header01 .header-lower .vertical div.active-branch>ul { position: relative; } .site-header01 .header-lower .vertical div.active-branch>ul>li>ul { position: absolute; background-color: #cccccc; visibility: hidden; top: 100%; width: auto; min-width: 14.285714285714286%; opacity: 0; padding: 20px 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header01 .header-lower .vertical div.active-branch>ul>li:last-child>ul { right: 0; } @media only screen and (min-width: 769px) { .site-header01 .header-lower .vertical div.active-branch>ul>li:hover>ul { opacity: 1; visibility: visible; z-index: 4; } } .site-header01 .header-lower .vertical div.active-branch>ul>li>ul>li { padding: 0 20px; } .site-header01 .header-lower .vertical div.active-branch>ul>li>ul>li:after { left: 20px; } .site-header01 .header-lower .vertical div.active-branch>ul>li>ul>li+li { margin-top: 20px; } /* header-lower 1-a */ .site-header01 .header-nav0101 .header-lower { background-color: #ffffff; } @media only screen and (max-width: 768px) { .site-header01 .header-nav0101 .header-lower, .site-header01 .header-nav0102 .header-lower, .site-header01 .header-nav0103 .header-lower{ max-height: 0; overflow: hidden; background-color: #af0000; position: fixed; left: 0; top: 60px; z-index: 600; width: 100%; height: 100%; -webkit-transition: max-height .3s ease-out; -moz-transition: max-height .3s ease-out; -ms-transition: max-height .3s ease-out; -o-transition: max-height .3s ease-out; transition: max-height .3s ease-out;; } .site-header01 .header-nav0101 .header-lower.view, .site-header01 .header-nav0102 .header-lower.view, .site-header01 .header-nav0103 .header-lower.view{ max-height: 100%; overflow-y: auto; } } /* header-lower 1-b */ .site-header01 .header-nav0102 .header-lower { background-color: #ffffff; } .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li>a { color: #222222; } .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li.active>a { background-color: #cccccc; color: #222222; } @media only screen and (min-width: 769px) { .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li:hover>a { background-color: #cccccc; color: #222222; } } .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li>a>span { border-left: 1px solid #ffffff; } @media only screen and (max-width: 768px) { .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li>a>span { border-left: none; } } .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: 1px solid #ffffff; } @media only screen and (max-width: 768px) { .site-header01 .header-nav0102 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: none; } } /* header-lower 1-c */ .site-header01 .header-nav0103 .header-lower { background-color: #cccccc; } @media only screen and (max-width: 768px) { .site-header01 .header-nav0103 .header-lower { background-color: #af0000; } } /****************************************************************************/ /* site-header02 */ /****************************************************************************/ .site-header02 .header-upper .row-fluid .container, .site-header02 .header-lower .row-fluid .container { max-width: 100% !important; padding: 0 40px; } @media only screen and (max-width: 1260px) { .site-header02 .header-upper .row-fluid .container, .site-header02 .header-lower .row-fluid .container { padding: 0px; } } .site-header02 .header-nav0201, .site-header02 .header-nav0202, .site-header02 .header-nav0203, .site-header02 .header-nav0204 { position: relative; } @media only screen and (max-width: 1024px) { .header-nav0201 .nav-btn, .header-nav0202 .nav-btn, .header-nav0203 .nav-btn, .header-nav0204 .nav-btn{ display: block; } } .site-header02 .header-nav0201 .header-upper { background-color: #ffffff; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0201 .header-upper { display: none; } } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid { height: 60px; } } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between;; -webkit-box-pack: justify; -ms-flex-pack: justify;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; width: 100%; height: 50px; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-caption { font-size: 1.2rem; color: #222222; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-box-pack: end; -ms-flex-pack: end;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li+li { margin-left: 20px; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li { position: relative; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li a { padding-left: 16px; color: #222222; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header02 .header-nav0201 .header-upper .container>.row-fluid-wrapper>.row-fluid>.header-upper-right ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } /* header-lower common */ @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu{ max-height: 0; overflow: hidden; background-color: #39312e; position: fixed; left: 0; top: 60px; z-index: 600; width: 100%; height: 100%; -webkit-transition: max-height .3s ease-out; -moz-transition: max-height .3s ease-out; -ms-transition: max-height .3s ease-out; -o-transition: max-height .3s ease-out; transition: max-height .3s ease-out;; padding: 0 20px; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu.view{ max-height: 100%; overflow-y: auto; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between;; -webkit-box-pack: justify; -ms-flex-pack: justify;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: end; -ms-flex-align: end;; width: 100%; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid { -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo { float: none; width: 200px; padding-right: 10px; margin: 0; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo { width: 100%; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo img, .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo svg{ width: 200px; vertical-align: middle; height: 40px; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo svg .st0, .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo svg .st1 { fill: #ffffff; } .site-header02 .header-lower.is-scroll .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo svg .st0 { fill: #404040; } .site-header02 .header-lower.is-scroll .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo svg .st1 { fill: #A20014; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right { float: none; width: calc(100% - 200px); margin: 0; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .header-text { position: absolute; top: 10px; right: 40px; text-align: right; color: #ffffff; font-size: 1.0rem; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right { width: 100%; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .header-text { display: none; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-box-pack: end; -ms-flex-pack: end;; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul { width: 100%; display: block; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child { padding-left: 10px; } @media only screen and (max-width: 1260px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child { padding-left: 5px; } } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child { padding-left: 0; border-left: none; margin-top: 20px; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { text-decoration: none; text-align: center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; white-space:nowrap; color: #ffffff; display: table-cell; vertical-align: middle; height: 40px; padding: 0 11px; font-size: 1.4rem; } @media only screen and (max-width: 1260px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { padding: 0 5px; font-size: 1.3rem; } } .site-header02 .header-lower.is-scroll-head .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { color: #222222; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { display: block; color: #ffffff; text-align: left; white-space: normal; font-size: 1.4rem; } .site-header02 .header-lower.is-scroll-head .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { color: #ffffff; } .site-header02 .header-lower.is-scroll .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a { color: #ffffff; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li.active>a, .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li.active-branch>a{ background-color: rgba(57,49,45,0.7); font-weight: 500; color: #ffffff; } .site-header02 .header-lower.is-scroll .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:hover>a { color: #ffffff; } @media only screen and (min-width: 1025px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:hover>a { background-color: rgba(57,49,45,0.7); color: #ffffff; font-weight: 500; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a{ display: block; height: 40px; line-height: 40px; white-space: nowrap; padding: 0 10px; background-color: #af0000; border: 1px solid #af0000; color: #ffffff; font-size: 1.4rem; text-decoration: none; background-image: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a>span{ display: inline-block; border: none; padding: 0; vertical-align: inherit; } @media only screen and (max-width: 1260px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a { padding: 0 5px; } } @media only screen and (min-width: 1025px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a:hover{ background-color: #ffffff; color: #af0000; } } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child ul { display: none !important; } @media only screen and (max-width: 1024px) { .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a { display: block; height: auto; border-left: none; border-bottom: 1px solid #ffffff; min-height: 10px; padding: 20px 0 20px 12px; position: relative; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li>a:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a { display: block; height: 40px; line-height: 40px; padding: 0 10px; background-color: transparent; border-color: transparent; color: #ffffff; font-size: 1.4rem; text-decoration: none; background-image: none; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a>span { background-image: none; } .site-header02 .header-lower .container>.row-fluid-wrapper>.row-fluid .header-right .global-menu div.active-branch>ul>li:last-child a>span:after { display: none; } } /*compactmenu common*/ .site-header02 .header-lower .global-menu div.active-branch>ul>li ul>li { position: relative; } .site-header02 .header-lower .global-menu div.active-branch>ul>li ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header02 .header-lower .global-menu div.active-branch>ul>li ul>li a{ color: #ffffff; padding: 5px 40px; display: block; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } @media only screen and (min-width: 1025px) { .site-header02 .header-lower .global-menu div.active-branch>ul>li ul>li a:hover{ transform: translateX(5px); } } /*horizontal*/ .site-header02 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { width: 100%; background-color: #cccccc; opacity: 0; position: absolute; top: 45px; left: 0; visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; padding: 20px; } @media only screen and (min-width: 1025px) { .site-header02 .header-lower .horizontal div.active-branch>ul>li:hover>.compact-wrapper { opacity: 1; visibility: visible; z-index: 3; } .site-header02 .header-lower .horizontal div.active-branch>ul>li:last-child:hover>.compact-wrapper { opacity: 0; visibility: hidden; } } .site-header02 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; } .site-header02 .header-lower .horizontal div.active-branch>ul>li ul>li+li { margin-left: 20px; } /*vertical*/ .site-header02 .header-lower .vertical div.active-branch>ul { position: relative; } .site-header02 .header-lower .vertical div.active-branch>ul>li>ul { position: absolute; background-color: rgba(57,49,45,0.7); visibility: hidden; top: 100%; width: auto; min-width: 14.285714285714286%; opacity: 0; padding: 20px 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header02 .header-lower .vertical div.active-branch>ul>li:last-child>ul { right: 0; } @media only screen and (min-width: 1025px) { .site-header02 .header-lower .vertical div.active-branch>ul>li:hover>ul { opacity: 1; visibility: visible; z-index: 4; } .site-header02 .header-lower .vertical div.active-branch>ul>li:last-child:hover>ul { opacity: 0; visibility: hidden; } } .site-header02 .header-lower .vertical div.active-branch>ul>li>ul>li:after { left: 20px; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header02 .header-lower .vertical div.active-branch>ul>li>ul>li:hover:after { left: 25px; } /* header-lower 2-a */ .site-header02 .header-nav0201 .header-lower { background-color: #ffffff; padding-top: 40px; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0201 .header-lower { padding-top: 0; } } .site-header02 .header-nav0201 .header-lower .container>.row-fluid-wrapper>.row-fluid>.widget-type-logo{ padding-bottom: 5px; } .site-header02 .header-nav0201 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { top: 55px; } /* header-lower 2-b */ .site-header02 .header-nav0202 .header-lower { padding-top: 40px; } .site-header02 .header-nav0202 .header-lower.is-scroll-head { opacity: 0; background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; padding-top: 11px; padding-bottom: 10px; border-bottom: 1px solid #cccccc; } .site-header02 .header-nav0202 .header-lower.is-scroll { -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;; opacity: 1; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0202 .header-lower { padding-top: 0; } .site-header02 .header-nav0202 .header-lower.is-scroll { padding-top: 0; padding-bottom: 0; } .site-header02 .header-nav0202 .header-lower.is-scroll-head { padding-top: 0; padding-bottom: 0; } } .site-header02 .header-nav0202 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { top: 65px; } /* header-lower 2-c */ .site-header02 .header-nav0203 .header-lower:before { content: ""; position: absolute; width: 50%; top: 0; left: 50%; height: 100%; background-color: #ffffff; z-index: -1; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0203 .header-lower:before { display: none; } } .site-header02 .header-nav0203 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { top: 90px; } /* header-lower 2-d */ .site-header02 .header-nav0204 .header-lower { background-color: #ffffff; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; height: 90px; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid { height: 60px; } } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul { -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; -webkit-box-align: center; -ms-flex-align: center;; height: 90px; background-color: #ffffff; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul { height: auto; background-color: transparent; padding: 0; } } .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child, .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child { border-left: 1px solid #ffffff; height: 50px; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child, .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child { border-left: none; height: auto; } } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a{ color: #222222; height: 90px; padding: 20px 0; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a{ height: auto; padding: 0; } } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a { color: #222222; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a { height: 50px; padding: 0 20px; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li.active>a, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li.active>a { background-color: #cccccc; color: #222222; } @media only screen and (min-width: 1025px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:hover>a, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:hover>a { background-color: #cccccc; color: #222222; } } @media only screen and (min-width: 1025px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a:hover, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a:hover { background-color: #ffffff; color: #af0000; } } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span { border-left: none; position: relative; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span:before, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span:before { content: ""; position: absolute; display: inline-block; left: 0; top: 0; width: 1px; height: 50px; border-left: 1px solid #ffffff; } @media only screen and (max-width: 1024px) { .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span:before, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li>a>span:before { display: none; } } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:first-child>a>span:before, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:first-child>a>span:before { display: none; border: none; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a>span:before, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a>span:before { display: none; border: none; } .site-header02 .header-nav0203 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a>span, .site-header02 .header-nav0204 .header-lower .container>.row-fluid-wrapper>.row-fluid>.global-menu div.active-branch>ul>li:last-child>a>span { border-left: none; } .site-header02 .header-nav0204 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { top: 90px; } /****************************************************************************/ /* site-header03 */ /****************************************************************************/ /* header-upper common */ .site-header03 .header-nav0301, .site-header03 .header-nav0302 { position: relative; } .site-header03 .header-upper .container { position: relative; padding: 30px 0 !important; } @media only screen and (max-width: 768px) { .site-header03 .header-upper .container { padding: 0 !important; } } .site-header03 .header-upper .container .widget-type-logo { text-align: center; } @media only screen and (max-width: 768px) { .site-header03 .header-upper .container .widget-type-logo { text-align: left; height: 60px; line-height: 60px; padding-left: 20px; } } .site-header03 .header-upper .container .widget-type-logo img, .site-header03 .header-upper .container .widget-type-logo svg{ max-width: 150px; vertical-align: middle; height: 30px; } .site-header03 .header-upper .container .header-navi-button { position: absolute; right: 0; top: 30px; z-index: 2; width: auto; } @media only screen and (max-width: 1117px) { .site-header03 .header-upper .container .header-navi-button { right: 20px; } } @media only screen and (max-width: 768px) { .site-header03 .header-upper .container .header-navi-button { right: 80px; top: 12px; } } @media only screen and (max-width: 400px) { .site-header03 .header-upper .container .header-navi-button { display: none; } } .site-header03 .header-upper .container .header-navi-button ul>li a{ display: block; height: 50px; line-height: 50px; padding: 0 20px; background-color: #af0000; border: 1px solid #af0000; color: #222222; font-size: 1.6rem; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header03 .header-upper .container .header-navi-button ul>li a:hover{ background-color: #ffffff; color: #af0000; } /* header-lower common */ .site-header03 .header-lower div.active-branch>ul { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between;; -webkit-box-pack: justify; -ms-flex-pack: justify;; } @media only screen and (max-width: 768px) { .site-header03 .header-lower div.active-branch>ul { -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; } } .site-header03 .header-lower div.active-branch>ul>li { width: 14.285714285714286%; } @media only screen and (max-width: 768px) { .site-header03 .header-lower div.active-branch>ul>li { width: 100%; } } .site-header03 .header-lower div.active-branch>ul>li>a { display: table; width: 100%; text-decoration: none; text-align: center; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; color: #222222; } @media only screen and (max-width: 768px) { .site-header03 .header-lower div.active-branch>ul>li>a { display: block; color: #222222; text-align: left; } } .site-header03 .header-lower div.active-branch>ul>li.active>a { background-color: #cccccc; font-weight: 500; color: #222222; } @media only screen and (min-width: 769px) { .site-header03 .header-lower div.active-branch>ul>li>a:hover { background-color: #cccccc; font-weight: 500; color: #222222; } } .site-header03 .header-lower div.active-branch>ul>li>a>span { display: table-cell; vertical-align: middle; height: 45px; border-left: 1px solid #cccccc; padding: 0 20px; font-size: 1.6rem; } @media only screen and (max-width: 768px) { .site-header03 .header-lower div.active-branch>ul>li>a>span { position: relative; display: block; height: auto; border-left: none; border-bottom: 1px solid #ffffff; min-height: 10px; padding: 20px 0 20px 12px; } .site-header03 .header-lower div.active-branch>ul>li>a>span:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } } .site-header03 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: 1px solid #cccccc; } @media only screen and (max-width: 768px) { .site-header03 .header-lower div.active-branch>ul>li:last-child>a>span { border: none; } } /* header-lower 3-a */ .site-header03 .header-nav0301 .header-lower { background-color: #ffffff; } @media only screen and (max-width: 768px) { .site-header03 .header-nav0301 .header-lower, .site-header03 .header-nav0302 .header-lower{ max-height: 0; overflow: hidden; background-color: #af0000; position: fixed; left: 0; top: 60px; z-index: 600; width: 100%; height: 100%; -webkit-transition: max-height .3s ease-out; -moz-transition: max-height .3s ease-out; -ms-transition: max-height .3s ease-out; -o-transition: max-height .3s ease-out; transition: max-height .3s ease-out;; } .site-header03 .header-nav0301 .header-lower.view, .site-header03 .header-nav0302 .header-lower.view{ max-height: 100%; overflow-y: auto; } } /* header-lower 3-b */ .site-header03 .header-nav0302 .header-lower { background-color: #ffffff; } .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li>a { color: #222222; } .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li.active>a { background-color: #cccccc; color: #222222; } @media only screen and (min-width: 769px) { .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li>a:hover { background-color: #cccccc; color: #222222; } } .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li>a>span { border-left: 1px solid #ffffff; } @media only screen and (max-width: 768px) { .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li>a>span { border-left: none; } } .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: 1px solid #ffffff; } @media only screen and (max-width: 768px) { .site-header03 .header-nav0302 .header-lower div.active-branch>ul>li:last-child>a>span { border-right: none; } } /*compactmenu common*/ .site-header03 .header-lower .global-menu div.active-branch>ul>li ul>li { position: relative; } .site-header03 .header-lower .global-menu div.active-branch>ul>li ul>li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #222222; border-bottom: 2px solid #222222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-header03 .header-lower .global-menu div.active-branch>ul>li ul>li a{ color: #222222; padding-left: 16px; text-decoration: none; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } @media only screen and (min-width: 769px) { .site-header03 .header-lower .global-menu div.active-branch>ul>li ul>li a:hover{ color: #222222; } } /*horizontal*/ .site-header03 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper { width: 100%; background-color: #cccccc; opacity: 0; position: absolute; top: 45px; left: 0; visibility: hidden; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; padding: 20px; } @media only screen and (min-width: 769px) { .site-header03 .header-lower .horizontal div.active-branch>ul>li:hover>.compact-wrapper { opacity: 1; visibility: visible; z-index: 3; } } .site-header03 .header-lower .horizontal div.active-branch>ul>li ul{ display: none; } .site-header03 .header-lower .horizontal div.active-branch>ul>li>.compact-wrapper ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-box-pack: start; -ms-flex-pack: start;; } .site-header03 .header-lower .horizontal div.active-branch>ul>li ul>li+li { margin-left: 20px; } /*vertical*/ .site-header03 .header-lower .vertical div.active-branch>ul { position: relative; } .site-header03 .header-lower .vertical div.active-branch>ul>li>ul { position: absolute; background-color: #cccccc; visibility: hidden; top: 100%; width: auto; min-width: 14.285714285714286%; opacity: 0; padding: 20px 0; -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s;; } .site-header03 .header-lower .vertical div.active-branch>ul>li:last-child>ul { right: 0; } @media only screen and (min-width: 769px) {v .site-header03 .header-lower .vertical div.active-branch>ul>li:hover>ul { opacity: 1; visibility: visible; z-index: 4; } } .site-header03 .header-lower .vertical div.active-branch>ul>li>ul>li { padding: 0 20px; } .site-header03 .header-lower .vertical div.active-branch>ul>li>ul>li:after { left: 20px; } .site-header03 .header-lower .vertical div.active-branch>ul>li>ul>li+li { margin-top: 20px; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* transition*/ /* ========================================================================== main ========================================================================== */ .billboard { position: relative; } .billboard.type02 { background-repeat: no-repeat; background-position: center top; background-size: cover; } @media only screen and (max-width: 768px) { .billboard.type01 { background-repeat: no-repeat; background-position: center top; background-size: cover; } } .billboard.type01, .billboard.type02 { width: 100%; height: 100vh; overflow: hidden; min-height: auto; } .billboard.type03 { overflow: hidden; opacity: 0; transition: all .3s; } .billboard.type03.active { opacity: 1; } .billboard.type04, .billboard.type05{ max-width: 1600px; margin: auto; overflow: hidden; } .billboard.type01 video { position: absolute; display: inherit; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; background-size: cover; } .billboard.type03 img{ width: 100%; max-width: inherit; position: absolute; } .billboard.type03 img.view--is-desk-laptop{ display: block; } .billboard.type03 img.view--is-palmtop{ display: none; } @media only screen and (min-width: 641px) { .billboard.type03 { min-height: 200px; } } @media only screen and (max-width: 768px) { .billboard.type03 img.view--is-desk-laptop{ display: none; } .billboard.type03 img.view--is-palmtop{ display: block; } } .billboard.type04 img{ width: 1600px; max-width: inherit; position: absolute; } .billboard .content-wrapper { position: absolute; top: 0; left: 0; width: 100%; } .billboard.type01 .content-wrapper, .billboard.type02 .content-wrapper { min-height: 800px; } .billboard .content-wrapper>.container { display: table; } .billboard.type01 .content-wrapper>.container, .billboard.type02 .content-wrapper>.container { height: 100vh; } .billboard .content-wrapper>.container>.site-title { display: table-cell; vertical-align: middle; } .billboard .slick-list .slider { background-position: center center; background-repeat: no-repeat; background-size: cover; width: 100%; height: 100vh; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* transition*/ /* boxShadow*/ /* borderRadius*/ /* ========================================================================== footer ========================================================================== */ .site-footer .footer-upper { background-image: url(//2661057.fs1.hubspotusercontent-na1.net/hubfs/2661057/image-site/common/CTA-bg.jpg); background-size: cover; background-repeat: no-repeat; background-position: center top; min-height: 478px; padding: 64px 0 40px; } .site-footer .footer-upper .heading02 { font-weight: 500; } .site-footer .footer-upper .message{ font-weight: 400; letter-spacing: 0.1em; } .site-footer .footer-upper .message>span{ font-weight: 500; } /*footer-middle01*/ .site-footer .footer-middle01 { padding: 50px 0; } .site-footer .footer-middle01 .container { position: relative; } .site-footer .footer-middle01 div.active-branch { margin-bottom: 60px; } .site-footer .footer-middle01 div.active-branch>ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; width: 100%; } .site-footer .footer-middle01 div.active-branch>.active-branch>ul{ display: block; } .site-footer .footer-middle01 div.active-branch>ul>li{ width: 20.571428571428573%; max-width: 216.0px; margin-top: 40px; padding-right: 15px; padding-left: 15px; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-middle01 div.active-branch>ul>li{ width: 34.285714285714285%; max-width: 360.0px; } } @media only screen and (min-width: 769px) { .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(5n+1), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(5n+5){ width: 19.142857142857142%; max-width: 201.0px; } .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(5n+1) { padding-left: 0; } .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(5n+5){ padding-right: 0; } } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3n+1), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3n+3){ width: 32.857142857142854%; max-width: 345.0px; } .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3n+1) { padding-left: 0; } .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3n+3){ padding-right: 0; } } .site-footer .footer-middle01 div.active-branch>ul>li.active-branch>ul>li { width: 100%; margin-top: 0; max-width: inherit; padding-right: 0; } @media only screen and (min-width: 769px) { .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(1), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(2), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(4), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(5){ margin-top: 0; } } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(1), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(2), .site-footer .footer-middle01 div.active-branch>ul>li:nth-of-type(3){ margin-top: 0; } } .site-footer .footer-middle01 div.active-branch>ul>li>a { display: block; padding-bottom: 10px; padding-left: 18px; border-bottom: 1px solid #cccccc; text-decoration: none; position: relative; } .site-footer .footer-middle01 div.active-branch>ul>li>a:hover { text-decoration: underline; } .site-footer .footer-middle01 div.active-branch>ul>li>a:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -9.5px; border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 7px; height: 7px; } .site-footer .footer-middle01 div.active-branch>ul>li>a>span{ position: relative; padding-left: 12px; min-height: 10px; display: inline-block; color: #222222; font-size: 1.4rem; font-weight: 500; line-height: 1.5; text-decoration: none; } .site-footer .footer-middle01 div.active-branch>ul>li>a>span:after{ content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #222222; border-bottom: 2px solid #222222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-footer .footer-middle01 div.active-branch>ul>li>ul { margin-top: 20px; } .site-footer .footer-middle01 div.active-branch>ul>li>ul>li>a { color: #666666; text-decoration: none; padding-bottom: 0; border-bottom: none; font-size: 1.4rem; } .site-footer .footer-middle01 div.active-branch>ul>li>ul>li>a:hover { text-decoration: underline; } .site-footer .footer-middle01 div.active-branch>ul>li>ul>li>a>span:after { display: none; } .site-footer .footer-middle01 .container .footer-corporation { background-color: #ffffff; } @media only screen and (min-width: 769px) { .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span4{ width: 39.71428571428571%; margin: 0; padding-right: 15px; } } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span4 .corporation{ font-size: 1.6rem; font-weight: 500; margin-bottom: 20px; } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span4 .address{ font-size: 1.4rem; margin-bottom: 5px; } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span4 .tel{ font-size: 1.6rem; font-weight: 500; margin-bottom: 20px; } @media only screen and (min-width: 769px) { .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8{ width: 60.28571428571429%; margin: 0; padding-left: 15px; } } @media only screen and (max-width: 768px) { .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8{ margin-top: 40px; } } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8 .message{ margin-bottom: 20px; } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8 .sns-list .row-fluid{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; } @media only screen and (max-width: 768px) { .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8 .sns-list .row-fluid{ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; } } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8 .sns-list .row-fluid .span4 { float: none; width: auto; margin-left: 10px; padding-right: 0; } .site-footer .footer-middle01 .container .footer-corporation .row-fluid .span8 .sns-list .row-fluid .span4:first-child { margin-left: 0; } /*footer-middle02*/ .site-footer .footer-middle02 { padding: 70px 0; } .site-footer .footer-middle02 .container { position: relative; } @media only screen and (min-width: 769px) { .site-footer .footer-middle02 .container .row-fluid .span4{ width: 39.71428571428571%; margin: 0; padding-right: 15px; } } .site-footer .footer-middle02 .container .row-fluid .span4 .section { margin-bottom: 60px; } .site-footer .footer-middle02 .container .row-fluid .span4 .corporation{ font-size: 1.6rem; font-weight: 500; margin-bottom: 20px; } .site-footer .footer-middle02 .container .row-fluid .span4 .address{ font-size: 1.4rem; margin-bottom: 20px; } .site-footer .footer-middle02 .container .row-fluid .span4 .tel{ font-size: 1.6rem; font-weight: 500; } .site-footer .footer-middle02 .container .row-fluid .span4 .message{ margin-bottom: 20px; } .site-footer .footer-middle02 .container .row-fluid .span4 .sns-list .row-fluid{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; } @media only screen and (max-width: 768px) { .site-footer .footer-middle02 .container .row-fluid .span4 .sns-list .row-fluid{ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center;; } } .site-footer .footer-middle02 .container .row-fluid .span4 .sns-list .row-fluid .span2 { float: none; width: auto; margin-left: 10px; } .site-footer .footer-middle02 .container .row-fluid .span4 .sns-list .row-fluid .span2:first-child { margin-left: 0; } @media only screen and (min-width: 769px) { .site-footer .footer-middle02 .container .row-fluid .span8{ width: 60.28571428571429%; margin: 0; padding-left: 15px; } } @media only screen and (max-width: 768px) { .site-footer .footer-middle02 .container .row-fluid .span8{ margin-top: 40px; } } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; width: 100%; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>.active-branch>ul{ display: block; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li{ width: 34.285714285714285%; max-width: 360.0px; margin-top: 40px; padding-right: 15px; padding-left: 15px; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(3n+1), .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(3n+3){ width: 32.857142857142854%; max-width: 345.0px; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(3n+1) { padding-left: 0; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(3n+3){ padding-right: 0; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li.active-branch>ul>li { width: 100%; margin-top: 0; max-width: inherit; padding: 0; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(1), .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(2), .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li:nth-of-type(3){ margin-top: 0; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>a { display: block; padding-bottom: 10px; border-bottom: 1px solid #cccccc; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>a>span{ position: relative; padding-left: 12px; min-height: 10px; display: inline-block; color: #222222; font-size: 1.4rem; font-weight: 500; line-height: 1.5; text-decoration: none; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>a>span:after{ content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #222222; border-bottom: 2px solid #222222; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>ul { margin-top: 20px; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>ul>li>a { color: #222222; text-decoration: none; padding-bottom: 0; border-bottom: none; display: inline-block; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>ul>li>a:hover { text-decoration: underline !important; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>ul>li>a>span { padding-left: 0; font-weight: 400; } .site-footer .footer-middle02 .container .row-fluid .span8 .active-branch>ul>li>ul>li>a>span:after { display: none; } .site-footer .footer-lower { background-color: #39312e; position: relative; } .site-footer .footer-lower .row-fluid .span4 { width: 50%; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-lower .row-fluid .span4 { width: 100%; float: none; margin-bottom: 20px; } } .site-footer .footer-lower .row-fluid .span8 { width: 45%; margin-left: 5%; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-lower .row-fluid .span8 { width: 100%; float: none; margin-left: 0; } } .site-footer .footer-lower .row-fluid .span4 p, .lp .site-footer .footer-lower .row-fluid p{ width: 100%; height: 60px; display: table; color: #222222; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-lower .row-fluid .span4 p { height: auto; margin-top: 20px; } } .site-footer .footer-lower .row-fluid .span4 p span, .lp .site-footer .footer-lower .row-fluid p span{ display: table-cell; vertical-align: middle; font-size: 1.2rem; color: #ffffff; } .site-footer .footer-lower .row-fluid .span8 ul{ -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: nowrap; -moz-flex-wrap: nowrap; -ms-flex-wrap: nowrap; -o-flex-wrap: nowrap; flex-wrap: nowrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center;; width: 100%; height: 60px; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-footer .footer-lower .row-fluid .span8 ul{ -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; height: auto; margin-bottom: 20px; } } .site-footer .footer-lower .row-fluid .span8 ul li+li { margin-left: 20px; } .site-footer .footer-lower .row-fluid .span8 ul li { position: relative; } .site-footer .footer-lower .row-fluid .span8 ul li:after { content: ""; position: absolute; left: 0; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid#ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 5px; height: 5px; } .site-footer .footer-lower .row-fluid .span8 ul li a{ color:#ffffff; text-decoration: none; padding-left: 12px; font-size: 1.4rem; } .site-footer .footer-lower .container .page-top { position: fixed; display: none; bottom: 5px; right: 20px; width: 50px; height: 50px; z-index: 90; } .site-footer .footer-lower .container .page-top a { overflow: hidden; display: block; width: 40px; height: 40px; background-color: #39312e; text-indent: 100%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;; } .site-footer .footer-lower .container .page-top a>span { position: relative; display: block; width: 50px; height: 50px; padding: 15px; } .site-footer .footer-lower .container .page-top a>span:after { content: ""; position: absolute; left: 40%; top: 40%; margin-top: -5px; margin-left: -8px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(135deg); transform: rotate(135deg); width: 15px; height: 15px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;; } .site-footer .footer-lower .container .page-top a:hover>span:after { margin-top: 9px; top: 0; } .site-footer .footer-lower .container .page-top.-bottom a { background-color: transparent; } @media only screen and (max-width: 640px) { .site-footer .footer-middle01, .site-footer .footer-middle02{ padding: 20px 0; } .site-footer .footer-middle01 .container .widget-type-menu, .site-footer .footer-middle02 .container .widget-type-menu{ display: none; } .site-footer .footer-lower { padding: 25px 0 20px; } .lp .site-footer .footer-lower { padding: 0; } .site-footer .footer-lower .row-fluid { -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -ms-flexbox; display: flex;; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; } .site-footer .footer-lower .row-fluid .span4 { -webkit-order: 2; -moz-order: 2; -ms-order: 2; -o-order: 2; -ms-flex-order: 2; order: 2;; width: 100%; float: none; } .site-footer .footer-lower .row-fluid .span8 { -webkit-order: 1; -moz-order: 1; -ms-order: 1; -o-order: 1; -ms-flex-order: 1; order: 1;; width: 100%; float: none; margin-left: 0; } .site-footer .footer-lower .row-fluid .span8 ul{ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start;; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start;; width: 100%; height: auto; } .site-footer .footer-lower .row-fluid .span8 ul li+li { margin: 10px 0 0 0; padding-left: 0; border-left: none; } .site-footer .footer-lower .row-fluid .span4 p { text-align: center; } } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* ========================================================================== breadcrumnbs ========================================================================== */ .bread-crumbs{ border-bottom: 1px solid #cccccc; } .bread-crumbs ul { display: table; height: 40px; } .bread-crumbs ul li { font-size: 1.2rem; float: none; display: table-cell; vertical-align: middle; white-space:nowrap; padding: 10px; } .bread-crumbs ul li a:hover { text-decoration: none; } .bread-crumbs ul li.hs-breadcrumb-menu-item:first-child { padding-left: 0; } .bread-crumbs ul li a{ color: #222222; } .bread-crumbs .hs-breadcrumb-menu-divider:before { content: '＞'; padding-left: 10px; } @media only screen and (max-width: 640px) { .bread-crumbs{ overflow: auto; line-height: 1; } } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* ========================================================================== site-content ========================================================================== */ .site-content .main { position: relative; } .site-content .main .left-button{ position: absolute; top: 108px; left: 0; z-index: 100; } .site-content .main .-fixed{ position: fixed; } @media only screen and (max-width: 1180px) { .site-content .main .left-button{ display: none; } } .site-content .subnavi { margin-top: 80px; } @media only screen and (min-width: 641px) and (max-width: 768px) { .site-content .subnavi { margin-top: 80px; margin-bottom: 80px; } } @media only screen and (max-width: 640px) { .site-content .subnavi { margin-top: 60px; margin-bottom: 60px; } } .site-content .subnavi .span8 { width: 68%; max-width: 720px; padding-right: 40px; float: left; } @media only screen and (max-width: 768px) { .site-content .subnavi .span8 { width: 100%; max-width: 100%; padding-right: 0; margin-bottom: 60px; float: none; } } @media only screen and (max-width: 640px) { .site-content .subnavi .span8 { margin-bottom: 20px; } } .site-content .subnavi .span4 { width: 32%; max-width: 340px; margin-left: 0; float: left; } @media only screen and (max-width: 768px) { .site-content .subnavi .span4 { width: 100%; max-width: 100%; float: none; } } .site-content .content-sns { position: relative; } .site-content .content-sns .sns-list { position: absolute; right: 0; top: 30px; -js-display: flex; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row;; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap;; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end;; } @media only screen and (max-width: 1100px) { .site-content .content-sns .sns-list { right: 20px; } } .site-content .content-sns .sns-list>li { margin: 0; } .site-content .content-sns .sns-list>li+li { margin-left: 10px; } .site-content .content-sns .sns-list .sns-google-plus>div, .site-content .content-sns .sns-list .sns-google-plus>div>iframe { width: 58px !important; } .site-content .content-sns .sns-list .sns-facebook span, .site-content .content-sns .sns-list .sns-linkedin span{ vertical-align: top !important; } /*qa*/ .qa { margin: 0; padding: 0; } .qa > dt, .qa > dd { position: relative; } .qa > dt > span, .qa > dd > span { display: inline-block; } .qa > dt .icon, .qa > dd .icon { padding: 0; position: absolute; top: 3px; left: 0; width: 35px; height: 35px; margin-right: 20px; line-height: 35px; color: #ffffff; text-align: center; font-weight: 500; font-size: 1.6rem; } .qa> dt .text, .qa> dd .natural { padding-left: 55px; } .qa > dt { color: #222222; font-size: 1.6rem; font-weight: 500; margin-bottom: 20px; } .qa > dt .icon { background-color: #af0000; } .qa > dd .icon { background-color: #746e6c; } .qa > dd+dt { margin-top: 30px; padding-top: 30px; border-top: 1px solid #cccccc; } .qa > dd+dt .icon { top: 33px; } .site-content .container .form { background-color:#f2ede7; padding:30px; color:#333; } @media only screen and (max-width: 768px) { .site-content .container .form { padding: 15px; } } fieldset{ max-width: inherit !important; } .hs-error-msgs, .hs-form .hs-error-msgs label { color:#af0000; } .site-content .container .form h3 { display: table; position: relative; width: 100%; font-size: 2.6rem; font-weight: bold; line-height: 2; margin: 0 0 20px; } .site-content .container .form h3>span { display: table-cell; vertical-align: middle; min-height: 50px; font-size: 2.4rem; font-weight: 500; line-height: 1.4; } /* .site-content .form h3:before, .site-content .form h3:after { content: ''; position: absolute; left: 50%; margin-left: -8px; border-right: 8px solid transparent; border-left: 8px solid transparent; bottom: -13px; border-top: 13px solid ; } */ @media only screen and (min-width: 641px) and (max-width: 768px) { .site-content .container .form h3 { margin-bottom: 32px; } .site-content .container .form h3>span { font-size: 2.2rem; } } @media only screen and (max-width: 640px) { .site-content .container .form h3 { margin-bottom: 32px; } .site-content .container .form h3>span { font-size: 2.0rem; } } .hs-form-required, .hs-error-msgs{ color: #af0000; } .site-content .container .form .hs-form .hs-form-field { margin-bottom: 15px; } .site-content .container .form .hs-form label { margin: auto; font-weight: bold; } /* .site-content .container .form .hs-form li>label { margin: 0; } */ .site-content .container .form .hs-form .hs-error-msgs { margin-top: 5px; } .site-content .container .form .hs-form .hs_checkprivacy_mail_magazine label, .site-content .container .form .hs-form .hs-error-msgs label{ margin: 0; } .site-content .container .form .hs-form .hs-form-field .input{ margin-top: 5px; } .site-content .container .form input[type="email"], .site-content .container .form input[type="text"], .site-content .container .form input[type="date"], .site-content .container .form input[type="number"], .site-content .container .form input[type="tel"]{ width: 100%; } .site-content .container .form input[type="text"]:focus, .site-content .container .form input[type="email"]:focus, .site-content .container .form input[type="date"]:focus, .site-content .container .form input[type="number"]:focus, .site-content .container .form input[type="tel"]:focus{ background-color: #ffffff; } .site-content .container .form input[type="checkbox"] { vertical-align: middle; margin-right: 5px; } .site-content .container .form select { max-width: 100%; } .site-content .container .form .input ul { margin-top: 0; } .site-content .container .form .actions { margin-top: 16px; display: block; width: auto; height: 50px; text-align: center; text-decoration: none; line-height: 50px; outline: none; background-color: #af0000; border: 1px solid #af0000; color: #ffffff; } .site-content .container .form .actions::before, .site-content .container .form .actions::after { position: absolute; z-index: -1; display: block; content: ''; } .site-content .container .form .actions, .site-content .container .form .actions::before, .site-content .container .form .actions::after { -webkit-transition: all .3s; transition: all .3s; } .site-content .container .form .actions>.hs-button { display: block; height: 50px; padding: 10px 32px 10px 5px; font-size: 1.6rem; font-weight: 500; line-height: 1.5; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyINCgkgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9Ii01IC0yIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01IC0yIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxkZWZzPg0KPC9kZWZzPg0KPHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iNSwwIDAsMCAxMC4wNjIsMTAuMDAyIDAsMjAgNSwyMCAxNC41LDEwLjAwMiAiLz4NCjwvc3ZnPg0K); background-position: 98% center; background-repeat: no-repeat; background-color: transparent; border: none; cursor: pointer; font-family: Noto Sans Japanese,YuGothic,'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', Osaka, sans-serif; width: 100%; } .site-content .container .form .actions:hover { background-color: #ffffff; border: 1px solid #af0000; color: #af0000; opacity: 1; } .site-content .container .form .actions:hover>.hs-button { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjIsIFNWRyBFeHBvcnQgUGx1Zy1JbiAgLS0+DQo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFsNCgk8IUVOVElUWSBuc19mbG93cyAiaHR0cDovL25zLmFkb2JlLmNvbS9GbG93cy8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSINCgkgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6YT0iaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZVNWR1ZpZXdlckV4dGVuc2lvbnMvMy4wLyINCgkgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9Ii01IC0yIDI0IDI0IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IC01IC0yIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxkZWZzPg0KPC9kZWZzPg0KPHBvbHlnb24gZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNFRDZDNjIiIHBvaW50cz0iNSwwIDAsMCAxMC4wNjIsMTAuMDAyIDAsMjAgNSwyMCAxNC41LDEwLjAwMiAiLz4NCjwvc3ZnPg0K0K); color: #af0000; } .site-content li.hs-form-booleancheckbox { margin: 0; } @media only screen and (max-width: 768px) { .hs-form fieldset { max-width: 100% !important; } fieldset.form-columns-2 .hs-form-field { width: 100% !important; } } .site-content .container .privacy { margin-top: 30px; } .site-content .container .privacy ._mark { margin-bottom: 20px; text-align: center; } /* ========================================================================== base ========================================================================== */ /* flex-display*/ /* flex-direction*/ /* flex-wrap*/ /* justify-content*/ /* align-items*/ /* align-content*/ /* flex-grow*/ /* flex-shrink*/ /* flex-basis*/ /* align-self*/ /* order */ /* transition*/ /* boxShadow*/ /* borderRadius*/ .cta-wrapper { padding: 30px 0; overflow: hidden; width: 100%; background-color: #746e6c; } .row-fluid [class*="span"]:first-child .cta-wrapper .container { max-width: 1080px; } .cta-wrapper .container>.span12 { float: none; } .cta-wrapper .slick-list { overflow: visible; position: relative; } @media only screen and (max-width: 1100px) { .cta-wrapper .slick-list { overflow: hidden; } } .cta-wrapper .slick-prev { left: 15px; } .cta-wrapper .slick-next { right: 15px; } @media only screen and (max-width: 1100px) { .cta-wrapper .container { max-width: 100%; padding: 0 10px; } } .cta-wrapper .cta-list{ width: 100%; } .cta-wrapper .cta-list .cta{ padding:0 15px; width: 50%; float: left; } .cta-wrapper .cta-list .cta .img { margin-bottom: 0; } /* お問い合わせCTA */ /* cta見出し */ .natural .cta_heading{ text-align: center; margin-top: 100px; margin-bottom: 5px; font-weight: 700; padding-top: 0; padding-bottom: 0; border: none; } @media screen and (max-width:1049px) { .natural .cta_heading{ font-size: 3.0rem; } } @media screen and (max-width: 767px) { .natural .cta_heading{ font-size: 2.5rem; margin-top: 0; padding-top: 80px; } } .natural .cta_heading_text{ text-align: center; padding: 0 24px; font-size: 1.6rem; margin-bottom: 0; } /* cta部分 */ @media screen and (max-width:1049px) { .row-fluid [class*="span"]:first-child .cta_natural{ padding: 0 50px; } } @media screen and (max-width: 1117px) { .row-fluid [class*="span"]:first-child .container .cta_natural { padding: 0 30px; } } @media screen and (max-width: 767px) { .row-fluid [class*="span"]:first-child .container .cta_natural { padding: 0; } } @media screen and (max-width:1049px) { .row-fluid [class*="span"]:first-child .cta__background .cta_container{ padding: 0; } } .cta__column{ width: 50%; background-color: #ffffff; } @media screen and (max-width:767px) { .cta__column { width: 100%; } } .cta__column:nth-child(2){ padding: 31px 0; } @media screen and (max-width:767px) { .cta__column:nth-child(2){ padding: 0 30px; } } .cta__padding-box{ padding-top: 27px; } @media screen and (max-width:640px) { .cta__padding-box .cta_container{ margin-bottom: 20px; } } @media screen and (max-width:767px) { .cta__columns { display: block; } } .cta-box01{ text-align: center; padding: 55px 0px; } @media screen and (max-width:1049px) { .cta-box01{ padding: 67.5px 0px 67.5px 35px; } } @media screen and (max-width:767px) { .cta-box01 { padding: 30px 0px; } } .natural.cta_natural .cta-box01 a:hover{ background-color: #ffffff; color: #af0000; transition: all .3s; text-decoration: none; } .natural .cta-box01 a:link{ position: relative; background-color: #af0000; border: 1px solid #af0000; color: #ffffff; padding: 19px 60px 19px 101px; text-align: center; transition: all .3s; font-size: 2.5rem; transition: all .3s; } @media screen and (max-width:1049px) { .natural .cta-box01 a:link{ font-size: 2rem; padding: 11.5px 33px 11.5px 65px; } } @media screen and (max-width:767px) { .row-fluid [class*="span"]:first-child .cta_natural{ padding: 0 20px; } } .natural .cta-box01 a:focus{ text-decoration: none; } /* 擬似要素 */ .natural.cta_natural .cta-box01 a::after{ content: ""; position: absolute; left: 64px; top: 1.7em; border-left: 2px solid #af0000; border-bottom: 2px solid #af0000; transform: rotate(-135deg); width: 6.5px; height: 6.5px; } @media screen and (max-width:1049px) { .natural.cta_natural .cta-box01 a::after{ right: initial; left: 34px; width: 5.5px; height: 5.5px; top: 1.5em; } } .natural.cta_natural .cta-box01 a::before{ content: ""; position: absolute; left: 57px; top: 1.3em; width: 25px; height: 25px; background-color:#ffffff; border: 1px solid #af0000; } @media screen and (max-width:1049px) { .natural.cta_natural .cta-box01 a::before { left: 28px; width: 20px; height: 20px; top: 1.1em; } } /* 右側の部分 */ .cta-box02{ text-align: left; padding: 0px 40px 0px 0px; border-left: solid 1px #cccccc; } @media screen and (max-width:1049px) { .cta-box02{ padding: 0; } } @media screen and (max-width:767px) { .cta-box02 { text-align: center; padding: 30px 0px; border-top: solid 1px #cccccc; border-left: none; } } .cta-box02 p{ text-align: left; font-size: 1.4rem; font-weight: 500; padding-top: 6px; line-height: 1.45; margin-bottom: 0!important; } @media screen and (max-width:767px) { .cta-box02 p{ padding-right: 0; text-align: center; padding-top: 10px; } } .cta__prefecture{ text-align: center; width: 60px; font-size: 1.4rem; display: inline-block; background-color: #f6f2ed; margin-right: 21px; } @media screen and (max-width: 1049px) and (min-width: 768px) { .cta__prefecture{ margin-right: 8px; } } @media screen and (max-width:767px) { .cta__prefecture{ margin-right: 16px; } } @media screen and (max-width:374px) { .cta__prefecture{ margin-right: 0; } } .natural.cta_natural .cta-box02 a{ position: relative; font-family: "Roboto", sans-serif; font-weight: 500; padding-left: 0; line-height: 1.37; letter-spacing: .05em; } @media screen and (min-width:1050px){ .natural.cta_natural .cta-box02 a{ pointer-events: none; } } @media screen and (max-width:767px) { .natural.cta_natural .cta-box02 a{ font-size: 2.3rem; padding-right: 16px; line-height: 30px; } } .natural.cta_natural .cta-box02 a:hover{ text-decoration: none; } @media screen and (min-width:768px) { .natural.cta_natural .cta-box02 a::after{ display: none; } } @media screen and (max-width:767px) { .natural.cta_natural .cta-box02 a::after{ left: initial; right: 0; top: 0.5em; } } .cta-box02__field{ max-width: 320px; margin: 0 auto; } @media screen and (max-width:1049px) { .cta-box02__field{ max-width: 295px; } } @media screen and (max-width:767px) { .cta-box02__field{ padding-left: 0px; } } .tel-cta{ padding-bottom: 15px; } @media screen and (max-width:767px) { .tel-cta{ padding-bottom: 20px; } } /* Slider */ .slick-slider { position: relative; display: block; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /* Slider */ /* Icons */ /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; margin-top: -25px; display: block; width: 40px; height: 40px; padding: 0; transform: none; cursor: pointer; color: #222222; border: 0; outline: 0; background-color: #39312e; z-index: 10; border-radius: 0; } .slick-next:after { display: none; } .slick-prev:after { display: none; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev { left: 0; } .slick-prev:after { content: ''; position: absolute; display: block; top: 50%; margin-top: -9px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(45deg); transform: rotate(45deg); width: 16px; height: 16px; z-index: 11; pointer-events: none; left: 14px; } .slick-next:after { content: ''; position: absolute; display: block; top: 50%; margin-top: -9px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); width: 16px; height: 16px; z-index: 11; pointer-events: none; right: 14px; } .slick-slider:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 15px; } .slick-next { right: 0; } .slick-slider:after { right: 15px; } /* Dots */ .slick-dots { position: absolute; bottom: -45px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 14px; height: 14px; margin: 0 10px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; -webkit-border-radius: 14px; -moz-border-radius: 14px; -ms-border-radius: 14px; border-radius: 14px; width: 14px; height: 14px; border: 0; padding: 0; cursor: pointer; color: transparent; outline: 0; background-color: #cccccc; } .slick-dots li button:hover, .slick-dots li button:focus, .slick-dots li.slick-active button { background-color: #af0000; } select.cSelect { z-index: 2; width: 100% !important; } .fm-select-value { display: block; text-decoration: none; background: #ffffff; text-align: left; padding: 10px; color: #222222; background-color: #ffffff; position: relative; z-index: 1; width: 100% !important; border: none; } .fm-select-value:after { content: ""; position: absolute; right: 10px; top: 50%; margin-top: -2.5px; border-left: 2px solid #ffffff; border-bottom: 2px solid #ffffff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); width: 5px; height: 5px; } .fm-select-list { position: absolute; top: 45px; left: 0; border: 1px solid #cccccc; width: 100%; background-color: #ffffff; z-index: 2; } .fm-select-list li>a{ padding: 10px; display: block; } .fm-select-list li+li{ border-top: 1px solid #cccccc; } .fm-select-list li.select-active { color: #af0000; } .fm-select-list li>a { text-decoration: none; color: #222222; } .fm-select-list li.select-active>a { color: #af0000; } /* ========================================================================== contact-area-cta ========================================================================== */ .site-flex.section.-brown .container.cta_contact_img_columns-two { padding-top: 100px; padding-bottom: 100px; } @media screen and (max-width: 640px) { .site-flex.section.-brown .container.cta_contact_img_columns-two { padding-top: 80px; padding-bottom: 80px; } } .site-flex.section.-brown .container.cta_contact_img_columns-two .heading04, .site-flex.section.-brown .container.cta_contact_img_columns-two .paragraph { color: #ffffff; } .site-flex.section.-brown .container.cta_contact_img_columns-two .hs-cta-wrapper { display: block; overflow: hidden; } .site-flex.section.-brown .container.cta_contact_img_columns-two .cta_button img { transition: .3s; } .site-flex.section.-brown .container.cta_contact_img_columns-two .cta_button:hover img { transform: scale(1.2); } .site-flex.section.-brown .container.cta_contact_img_columns-two .heading04:not(:first-child) { margin-top: 30px; }