@charset "utf-8";
/* CSS Document */
@import "css/reset.css";
/*----*****---- << Table of Contents >> ----*****----*/
/*
1. General
01. Fonts
02. Headings
03. Transition
04. Text Elements
05. Forms
06. Images
07. Widget's
2. Layout
01. Container
02. Header
03. Menu
04. Main
01. Slider
02. Counting Numbers
03. Service
04. Icons Boxes
05. Testimonial
06. Blog
07. Appointment
08. News Letter
09. Contact
10. Portfolio
11. About
12. Timeline
13. Menu Card
14. Tooltip
15. Go To Top
16. Style Picker
06. Footer
*/
/*----*****---- << 1. General >> ----*****----*/
html { scroll-behavior: smooth;}
body { font-weight: normal; font-size: 14px; color: #000000; margin:0; background: #fff; line-height: normal; }
*{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
/*----*****---- << 01. Fonts >> ----*****----*/
body, textarea, .dt-sc-counter-number p { font-weight: 300; }
/*----*****---- << 02. Headings >> ----*****----*/
h1, h2, h3, h4, h5, h6 { font-weight:500; line-height:normal; margin-bottom: 20px; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { }
h1{ font-size:50px; }
h2{ font-size:40px; }
h2{ font-size:40px; }
h3{ font-size:25px; }
h4{ font-size:20px; }
h5{ font-size:16px; }
h6{ font-size:14px; }
.sp_br{ display: none;}
h5.breadcrumb-title { color: #2b2d2d; font-family: 'intro_regular'; font-size: 90px; font-weight: bold; position: absolute; right: 0; text-transform: uppercase; top: -44px; }
.dt-lighter { font-weight: lighter; }
/* *** Animate *** */
.animate { opacity: 0; }
.animated { opacity: 1; animation-fill-mode: both !important; }
/*----*****---- << 04. Text Elements >> ----*****----*/
a{ text-decoration:none; color: #000; }
a:hover { }
a img{ border:none; }
strong{ font-weight: bold; }
em{ font-style: italic; }
address { display:block; margin:10px 0px 20px; }
abbr { border-bottom:1px dotted #3d3d3d; cursor:help; }
ins { background:#FFF9C0; }
sub, sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; }
sub { bottom: -3px; }
sup { bottom: -3px; }
p { line-height: 30px; margin-bottom:10px; font-size:18px; color: #999999; }
p label { display: inline-block; margin-bottom: 5px; }
ul, ol, pre, code{ margin-bottom:0px; }
ul{ list-style-type:none; list-style-position:inside; }
ul li { padding-bottom:0px; }
ul li ul { list-style-type:disc; padding-left:20px; margin:10px 0px 0px; }
ul ul ul { margin-bottom:0px; list-style-type:circle; }
ol{ list-style-type:decimal; list-style-position:outside; padding-left:20px; padding-top:10px; }
ol li { padding-bottom:10px; }
ol li ol { margin-bottom:0px; list-style-type:lower-alpha; }
ol ol ol { margin-bottom:0px; list-style-type:lower-roman; }
pre, code{ border-left:3px solid #f8cc6e; background-color:#e6e2d6; display:block; padding:10px; font-size:11px; font-family: monospace; width:96.5%; overflow:auto; }
.hr-separator { border-bottom:1px solid #353737; clear:both; }
.hr-separator.type2 { border-bottom: 1px solid #e8e8e8; }
/* due to IE
margin bugs I had to made classed and apply them to div to achieve the effect of a
*/
.hr-border { border-bottom: 1px solid #ebeef0; }
.rounded-corner { border-radius: 5px; }
.fullwidth-section { clear: both; float: left; margin: 0; padding: 0; width: 100%; }
.fullwidth-bg { background-color: rgba(0, 0, 0, 0.5); float: left; width: 100%; }
.fullwidth-bg1 { background-color: #282828; }
.parallax-spacing { display: inline-block; padding: 296px 0 220px 0; width: 100%; }
.dt-sc-parallax-section { background-attachment:fixed; background-color: #000000; background-repeat:no-repeat; }
.dt-sc-parallax-section {
background-image: url("images/main_visual.png");
background-size: 100% auto;
position: relative;
height:100%;
}
.dt-sc-parallax-section::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.02);
background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
background-size: 4px 4px;
background-position: 0 0, 2px 2px;
}
/*----*****---- << 05. Forms >> ----*****----*/
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="range"], input[type="date"], textarea, input.text, input[type="search"] { background: transparent; color: #707070; padding: 13px; display:block; font-size:13px; margin:0px 0 23px; width:100%; box-sizing:border-box; position:relative; border: 1px solid #cccccc; font-style: italic; }
p label.error { color: #f00; position: absolute; right: 5px; top: -28px; z-index: 999; }
p span.icons.fa { cursor: pointer; height: 43px; line-height: 42px; position: absolute; right: 0; text-align: center; top: 0; width: 45px; }
#footer input[type="email"] { border: 1px solid #666666; }
textarea { height:160px; overflow:auto; resize: none; }
#respond textarea { height:180px; }
select{ background:#fff; border:1px solid #e5e5d8; padding:10px; margin:10px 0 10px; display:block; width:100%; }
select option { background:#353737; padding: 3px 10px; }
select { height:40px; color: #feecda; border:1px solid #494542; width:100%; margin:0px 0px 30px; padding:0 10px; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.selection-box { position:relative; clear:both; }
.selection-box:before, .selection-box:after { content:""; pointer-events: none; position:absolute; }
.selection-box:before { z-index:1; right:13px; top:3px; bottom:0px; height:0px; margin:auto; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid; }
.selection-box:after { width:40px; height:38px; right:0px; top:0px; border: 1px solid #585350; background-color: #353737; }
.selection-box select { background: #353737; }
input[type="submit"], button, input[type="button"], input[type="reset"] { font-size:16px; font-weight: 100; line-height:normal; display:inline-block; margin: 0px; cursor:pointer; outline:none; position:relative; z-index:1; color:#fff; position:relative; min-width: 80px; min-height: 40px; text-transform:capitalize; -webkit-appearance: none; padding: 0; border: 1px solid #000; float: right; right: 25px; top: 0; }
.contact-form .form-row input[type="submit"] { top: -20px; }
.subscribe-frm .dt-sc-button { background-color: transparent; border: medium none; color: #666666; font-family: fontawesome; font-size: 22px; min-height: 43px; min-width: 50px; position: absolute; right: 0; top: 0; visibility: visible; background-image: url(images/icon-envelope.png); background-position: center center; background-repeat: no-repeat; }
#ajax_contactform_msg, #ajax_subscribe_msg .error-msg { float: left; text-align: center; width: 100%; margin: 20px 0 0 0;}
#ajax_contactform_msg .dt-sc-success-box, #ajax_contactform_msg .dt-sc-error-box { width: 50%;}
#ajax_subscribe_msg .dt-sc-success-box, #ajax_subscribe_msg .dt-sc-error-box { padding: 5px 5px 5px 70px; margin-bottom: 15px; }
#ajax_subscribe_msg .dt-sc-success-box i.fa, #ajax_subscribe_msg .dt-sc-error-box i.fa { left: 10px; }
/*----*****---- << 06. Images >> ----*****----*/
img { height: auto; max-width: 100%; }
.ie8 img { width:auto; }
img.desktop-img { display: inherit; }
/*----*****---- << 2. Layout >> ----*****----*/
/*----*****---- << 01. Container >> ----*****----*/
.container { width:1170px; margin:0 auto; position:relative; clear:both; }
.wrapper { clear:both; width:100%; margin:0px; padding:0px; float:left; }
.boxed .wrapper { width:1260px; margin:0 auto; float:none; }
.inner-wrapper { margin:0px; width:100%; float:left; padding:0px; background:#fff; }
/*----*****---- << 02. Header >> ----*****----*/
#header { backface-visibility: hidden; display: block; margin: 0; position: relative; width: 100%; z-index: 99999; }
#logo { background: #000000; margin: 0; padding: 15px 0 10px; text-align: center; width: 100%; z-index: 9; clear: both; display: inline-block; }
.logo-mark{padding: 14px 0;} /*----*****---- << 追記 >> ----*****----*/
.boxed #header, .boxed .is-sticky #header { width: 1260px; margin: 0 auto; }
.boxed #header.type5 { width: 1260px; }
.top-bar { background-color: #000000; clear: both; float: left; line-height: 45px; padding: 11px 0; position: relative; width: 100%;}
.top-bar p { font-size: 22px; float: left; font-family: Gabriola; margin: 0; color: #fff; }
.top-bar .top-right { float: right; font-size: 18px; margin-top: 4px; padding: 46px 0 0 0; color: #999; }/*----*****---- << 追記 >> ----*****----*/
.top-bar .top-right ul { float: left; line-height: 20px; margin: 0; padding: 0; }
.top-bar .top-right ul li a { color: #999; }
.top-bar .top-right ul li { display: inline-block; margin-right: 50px; padding: 0; }
.top-bar .top-right ul li span.fa { color: #969696; position: relative; top: 1px; font-size: 16px; padding-right: 5px; }
.top-bar .top-right ul li:last-child { margin-right: 0; }
.is-sticky #header { width: 100%; z-index: 9999999; }
.is-sticky #logo { position: absolute; top: -90px; }
.is-sticky #main-menu ul { display: inline-block; float: right; }
.sticky-logo { left: 0; position: absolute; display: none; }
.is-sticky .sticky-logo { display: block; margin-top: 0px; }
.is-sticky #header.type4 .sticky-logo { right: 0; text-align: center; display: inline-block; }
.is-sticky #header.type4 a.sticky-logo img { margin: 7px 0; width: 15%; }
.is-sticky .type2 .sticky-logo { margin-top: 20px; }
.is-sticky .type2 #menu-container { box-shadow: none; }
.is-sticky #menu-container { background: rgba(40, 40, 40, 1); display: inline-block; width: 100%; position: relative; }
/*.sticky-wrapper { min-height: 185px !important; background: #282828; }*/
/*@media screen and (-webkit-min-device-pixel-ratio:0) { .sticky-wrapper { min-height: 184px !important; } } */
.is-sticky #main-menu > ul > li > a { padding: 20px 0; }
.is-sticky #main-menu > ul > li a::before, .is-sticky #main-menu > ul > li a::after { margin: auto; position: absolute; top: 20px !important; width: 0; border: none; }
.is-sticky .type2 #main-menu > ul > li.current_page_item > a::before, .is-sticky .type5 #main-menu > ul > li.current_page_item > a::before { content: "["; left: -12px; right: auto; border: none !important; }
.is-sticky .type2 #main-menu > ul > li.current_page_item > a::after, .is-sticky .type5 #main-menu > ul > li.current_page_item > a::after { content: "]"; right: -8px; left: auto; }
.is-sticky #main-menu ul li.menu-item-simple-parent ul { top: 56px; }
.is-sticky #main-menu ul li.menu-item-simple-parent ul ul { top: -3px; }
.sticky-wrapper { clear: both; }
.is-sticky .type2 #menu-container::after { background: #282828; bottom: -25px; content: ""; height: 50px; left: 0; position: absolute; transform: skewY(-1.2deg); -moz-transform: skewY(-1.2deg); -ms-transform: skewY(-1.2deg); -o-transform: skewY(-1.2deg); -webkit-transform: skewY(-1.2deg); width: 100%; z-index: -1; }
.is-sticky .type3 .sticky-logo img { margin-top: 10px; width: 70%; }
.is-sticky .type3 .sticky-logo { text-align: left; }
#header.type3 ul.menu li a i.fa, #header.type4 ul.menu li a i.fa { margin-right: 5px; }
.is-sticky #header.type3 #main-menu ul li, .is-sticky #header.type4 #main-menu ul li { margin: 0; float: left; }
.is-sticky #header.type3 #main-menu ul li a, .is-sticky #header.type4 #main-menu ul li a { padding: 20px; }
.is-sticky #header.type3 #main-menu > ul > li.current_page_item > a::before, .is-sticky #header.type4 #main-menu > ul > li.current_page_item > a::before { border: none !important; }
.is-sticky #header.type3 #main-menu ul li.menu-item-simple-parent ul li a, .is-sticky #header.type4 #main-menu ul li.menu-item-simple-parent ul li a { padding: 10px 15px !important; }
.is-sticky #header.type3 #main-menu ul li a, .is-sticky #header.type4 #main-menu ul li a { border-left: 1px solid rgba(255, 255, 255, 0.2); }
.is-sticky #header.type3 #main-menu ul li:last-child a, .is-sticky #header.type4 #main-menu ul li:last-child a { border-right: 1px solid rgba(255, 255, 255, 0.2); }
.is-sticky #header.type3 #main-menu ul li.current_page_item a, .is-sticky #header.type4 #main-menu ul li.current_page_item a { box-shadow: 0 -1px 0 inset; }
.is-sticky #header.type3 #main-menu ul li.current_page_item li a, .is-sticky #header.type4 #main-menu ul li.current_page_item li a { box-shadow: none; }
.is-sticky #header.type3 #main-menu ul li ul li a, .is-sticky #header.type4 #main-menu ul li ul li a { border-right: none !important; }
#header.type4 ul.alignleft, #header.type4 ul.alignright { display: inline-block; float: none; }
.is-sticky #header.type4 ul.alignleft { float: left; }
.is-sticky #header.type4 ul.alignright { float: right; }
#header.type5 #logo { background: transparent; float: left; text-align: initial; width: auto; padding: 0; margin: 15px 0; }
#header.type5 ul.menu { float: right; visibility: hidden; padding: 26px 0; }
#header.type5 { box-shadow: 0 0 3px #fff; line-height: 0; position: fixed; width: 100%; }
.is-sticky #header.type5 ul.menu { visibility: visible; padding: 0; }
.is-sticky #header.type5 #main-menu ul li:nth-child(1) { animation: 0.3s ease-in 300ms lightSpeedIn; -moz-animation: 0.3s ease-in 300ms lightSpeedIn; -ms-animation: 0.3s ease-in 300ms lightSpeedIn; -o-animation: 0.3s ease-in 300ms lightSpeedIn; -webkit-animation: 0.3s ease-in 300ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(2) { animation: 0.3s ease-in 600ms lightSpeedIn; -moz-animation: 0.3s ease-in 600ms lightSpeedIn; -ms-animation: 0.3s ease-in 600ms lightSpeedIn; -o-animation: 0.3s ease-in 600ms lightSpeedIn; -webkit-animation: 0.3s ease-in 600ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(3) { animation: 0.3s ease-in 900ms lightSpeedIn; -moz-animation: 0.3s ease-in 900ms lightSpeedIn; -ms-animation: 0.3s ease-in 900ms lightSpeedIn; -o-animation: 0.3s ease-in 900ms lightSpeedIn; -webkit-animation: 0.3s ease-in 900ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(4) { animation: 0.3s ease-in 1200ms lightSpeedIn; -moz-animation: 0.3s ease-in 1200ms lightSpeedIn; -ms-animation: 0.3s ease-in 1200ms lightSpeedIn; -o-animation: 0.3s ease-in 1200ms lightSpeedIn; -webkit-animation: 0.3s ease-in 1200ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(5) { animation: 0.3s ease-in 1500ms lightSpeedIn; -moz-animation: 0.3s ease-in 1500ms lightSpeedIn; -ms-animation: 0.3s ease-in 1500ms lightSpeedIn; -o-animation: 0.3s ease-in 1500ms lightSpeedIn; -webkit-animation: 0.3s ease-in 1500ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(6) { animation: 0.3s ease-in 1800ms lightSpeedIn; -moz-animation: 0.3s ease-in 1800ms lightSpeedIn; -ms-animation: 0.3s ease-in 1800ms lightSpeedIn; -o-animation: 0.3s ease-in 1800ms lightSpeedIn; -webkit-animation: 0.3s ease-in 1800ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li:nth-child(7) { animation: 0.3s ease-in 2100ms lightSpeedIn; -moz-animation: 0.3s ease-in 2100ms lightSpeedIn; -ms-animation: 0.3s ease-in 2100ms lightSpeedIn; -o-animation: 0.3s ease-in 2100ms lightSpeedIn; -webkit-animation: 0.3s ease-in 2100ms lightSpeedIn; }
.is-sticky #header.type5 #main-menu ul li ul li { animation: none !important; -moz-animation: none !important; -ms-animation: none !important; -o-animation: none !important; -webkit-animation: none !important; }
#header.type5 .sticky-logo img { padding: 7px 0; width: 80%; }
#header.type5 #main-menu > ul > li.current_page_item > a::before { display: none; }
.is-sticky #header.type5 #main-menu > ul > li.current_page_item > a::before { display: block; }
.type5 .sticky-wrapper { height: auto !important; }
.is-sticky #header.type5 { line-height: normal; }
#header.type5 #menu-container { position: relative; z-index: 1; background: rgba(0, 0, 0, 0.8); }
.is-sticky .type5 #menu-container:after { background: rgba(40, 40, 40, 0.9); content: ""; height: 100%; position: absolute; left: 0; top: 0; width: 100%; z-index: -1; }
.is-sticky .type5 #menu-container:after { width: 0; }
.is-sticky .lines { top: 15px; }
.lines { line-height: 22px; position: absolute; right: -20px; top: 27px; width: 32px; }
.lines:before { background: #fff; content: ""; height: 2px; position: absolute; right: 0; top: 2px; width: 30px; }
.lines span { display: inline-block; position: relative; }
.lines span::before, .lines span::after { background: #fff; content: ""; position: absolute; right: -16px; width: 30px; height: 2px; }
.lines span::before { top: -5px; }
.lines span::after { bottom: -5px; }
.is-sticky .lines > span::before, .is-sticky .lines > span::after, .is-sticky .lines > span, .is-sticky .lines::before { width: 0; }
.lines:hover { cursor: pointer; }
/*----*****---- << 03. Menu >> ----*****----*/
#menu-container { background: #282828; display: inline-block; width: 100%; }
#main-menu { text-align:center; margin:0px; padding:0px; width: 100%; }
#main-menu ul { margin:0px auto; padding:0px; position:relative; }
#main-menu > ul > li { display:inline-block; padding:0; position:relative; margin: 0 25px; }
#main-menu > ul > li > a { font-size:14px; font-weight:600; text-transform:uppercase; display:block; padding: 14px 0; color:#fff; position:relative; }
#main-menu > ul > li.current_page_item > a:before { border-left: 6px solid transparent; border-top: 6px solid #000; border-right: 6px solid transparent; top: 0; content: ""; left: 0; position: absolute; right: 0; width: 0; margin: auto; }
#main-menu > ul > li.current_page_item > a:after { top: 0; content: ""; left: 0; position: absolute; right: 0; width: 0; margin: auto; }
#main-menu ul li.menu-item-simple-parent ul, #main-menu ul li.menu-item-simple-parent ul li ul, #main-menu ul li.menu-item-simple-parent ul li:hover ul ul, #main-menu ul li.menu-item-simple-parent ul li ul li ul { display:none; }
#main-menu ul li.menu-item-simple-parent ul { background-color:#282828; border-bottom: 3px solid; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); float: left; left: 0; position: absolute; top: 43px; width: 195px; z-index: 9999; text-align:left; }
#main-menu ul li.menu-item-simple-parent ul li { display:inline; position:relative; width:100%; border-bottom: 1px solid #000; float:left; }
#main-menu ul li.menu-item-simple-parent ul li:last-child { border-bottom:none; }
#main-menu ul li.menu-item-simple-parent ul li a { display: block; font-size: 12px; padding: 10px 15px; position: relative; color:#fff; text-transform:uppercase; font-weight:normal; font-weight: 600; }
#main-menu ul li.menu-item-simple-parent ul > li > ul > li:hover > ul { display:block; -webkit-animation: 0.3s ease-in fadeIn; -moz-animation: 0.3s ease-in fadeIn; animation: 0.3s ease-in fadeIn; }
#main-menu > ul > li.menu-item-simple-parent:hover > ul, #main-menu > ul > li.menu-item-simple-parent > ul > li:hover > ul { display:block; -webkit-animation: 0.3s ease-in fadeInUpSmall; -moz-animation: 0.3s ease-in 0s fadeInUpSmalll; animation: 0.3s ease-in 0s fadeInUpSmall; }
#main-menu ul li.menu-item-simple-parent ul li ul { left:195px; top:-5px; border-top:0px; border-bottom:3px solid; padding-top:5px; border-top:3px solid; }
#main-menu ul li a.dt-menu-expand { display:none; }
.dt-menu-expand { cursor: pointer; display: none !important; font-size: 16px !important; font-weight: bold; height: 40px; line-height: 40px !important; padding: 0 !important; position: absolute !important; right: 0; text-align: center; top: 0; width: 40px; }
.dt-menu-toggle { color: #fff; cursor: pointer; display: none; font-size: 16px; font-weight: bold; padding: 10px 15px; text-transform: uppercase; box-shadow: 0 0 1px #fff inset; text-align: left; }
.dt-menu-toggle-icon:before, .dt-menu-toggle-icon:after { background-color:#fff; content: ""; height: 2px; left: 0; position: absolute; top: -5px; width: 20px; }
.dt-menu-toggle-icon:after { top:5px; }
.dt-menu-toggle-icon { background-color: #fff; display: inline-block; float: right; height: 2px; margin-top: 10px; position: relative; text-align: left; width: 20px; }
/*----*****---- << Pushy Menu >> ----*****----*/
.collapse { display: none; }
.nav-roundslide { bottom: 20px; height: 100px; position: absolute; width: 100%; }
.nav-roundslide a { background: rgba(0, 0, 0, 0.4); border-radius: 50%; height: 100px; transition: width 0.3s ease 0s, background-color 0.3s ease 0s; width: 100px; bottom: 0; cursor: pointer; display: block; outline: medium none; position: absolute; text-align: left; z-index: 1000; }
.nav-roundslide.collapse { position: fixed; top: 0; width: 200px; z-index:9999999; }
.nav-roundslide.collapse a { bottom: 0; display: block; left: 47px; outline: medium none; text-align: left; top: 20px; z-index: 1000; border:2px solid #fff; }
.nav-roundslide.collapse a.menu-btn h3 { display:inline-block; float:none; text-align:center; width:100px; line-height:100px; color:#fff; }
.nav-roundslide.collapse a.menu-btn h3 i { font-size: 24px; margin: 0 2px; }
.rt-menu-wrapper { margin-top:300px;}
#rt-menu-wrapper, #rt-menu-wrapper ul, #rt-menu-wrapper li, #rt-menu-wrapper a { margin: 0; padding: 0; border: 0; list-style: none; font-weight: normal; text-decoration: none; line-height: 1; font-size: 14px; position: relative; }
#rt-menu-wrapper a { line-height: 1.3; }
#rt-menu-wrapper > ul > li > a { padding-right: 40px; font-size: 25px; font-weight: bold; display: block; color: #fff; border-bottom: 1px solid #000; text-transform: uppercase; }
#rt-menu-wrapper > ul > li > a > span { padding: 15px 10px; display: block; font-size: 13px; border-right: 1px solid #000; }
#rt-menu-wrapper span.cnt { position: absolute; top: 15px; right: 15px; padding: 0; margin: 0; background: none; border: none; }
/* Sub menu */
#rt-menu-wrapper ul ul { display: none; }
#rt-menu-wrapper ul ul li { border: 1px solid #e0e0e0; border-top: 0; }
#rt-menu-wrapper ul ul a { padding: 10px; display: block; color: #000; font-size: 13px; }
#rt-menu-wrapper ul ul a:hover { color: #fff; }
#rt-menu-wrapper ul ul li.odd { background: #f4f4f4; }
#rt-menu-wrapper ul ul li.even { background: #fff; }
.banner h2 { color: #fff; font-family: 'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic','MS Sans Serif','Arial Unicode MS','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Kaiti TC',sans-serif; font-weight: 100; margin-bottom: 0; font-size: 44px; }
.banner h2 strong { font-size: 68px; }
.banner p { font-size: 25px; }
.banner.type3 .caption { display: block; }
.banner.type3 .caption h1 { margin: 0; padding: 50px 0 30px 0; }
.banner.type3 .caption h1 p{ color: #fff; font-size: 60px; font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',sans-serif; letter-spacing: 3px; margin-bottom: 50px; text-align: center;}
p.h1_e{ ;font-size: 25px; color: #fff; letter-spacing: 2px; text-align: center;}
.banner.type3 .caption
.banner .dt-sc-view-btn > a { top: 10px; padding: 10px 18px 12px; border-radius: 3px;}
.banner.type4 h1.caption-heading, .banner.type4 .caption h3 { color: #fff; }
.banner.type4 .caption h3 span { font-weight: 100; }
#scrolldown { bottom: -10%; left: 0; position: absolute; text-align: center; width: 100%; z-index: 8; }
#scrolldown a { line-height:40px; color: #fff; }
#scrolldown a .fa { font-size:36px; }
#scrolldown a:hover { color:#d1d1d1; }
#scrolldown .animate { animation-iteration-count: infinite; }
.caption { clear: both; display: inline-block; }
#demo1 { position: inherit !important; font-size: 30px; }
.sub-text h3, .sub-text h5 { color: #fff; font-weight: 100; text-transform: uppercase; }
.caption-words { display: inline-block; position: relative; text-align: left; width: 188px !important; }
.caption-words b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; }
.caption-words b.is-visible { position: relative; }
.no-js .caption-words b { opacity: 0; }
.no-js .caption-words b.is-visible { opacity: 1; }
.caption-heading.rotate-2 .caption-words { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; }
.caption-heading.rotate-2 i, .caption-heading.rotate-2 em { display: inline-block; -webkit-backface-visibility: hidden; backface-visibility: hidden; font-style: normal !important; font-weight: 100; }
.caption-heading.rotate-2 b { opacity: 0; }
.caption-heading.rotate-2 i { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-20px) rotateX(90deg); -moz-transform: translateZ(-20px) rotateX(90deg); -ms-transform: translateZ(-20px) rotateX(90deg); -o-transform: translateZ(-20px) rotateX(90deg); transform: translateZ(-20px) rotateX(90deg); opacity: 0; }
.is-visible .caption-heading.rotate-2 i { opacity: 1; }
.caption-heading.rotate-2 i.in { -webkit-animation: cd-rotate-2-in 0.4s forwards; -moz-animation: cd-rotate-2-in 0.4s forwards; animation: cd-rotate-2-in 0.4s forwards; }
.caption-heading.rotate-2 i.out { -webkit-animation: cd-rotate-2-out 0.4s forwards; -moz-animation: cd-rotate-2-out 0.4s forwards; animation: cd-rotate-2-out 0.4s forwards; }
.caption-heading.rotate-2 em { -webkit-transform: translateZ(20px); -moz-transform: translateZ(20px); -ms-transform: translateZ(20px); -o-transform: translateZ(20px); transform: translateZ(20px); }
.no-csstransitions .caption-heading.rotate-2 i { -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 0; }
.no-csstransitions .caption-heading.rotate-2 i em { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.no-csstransitions .caption-heading.rotate-2 .is-visible i { opacity: 1; }
@-webkit-keyframes cd-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
}
}
@-moz-keyframes cd-rotate-2-in {
0% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(0deg);
}
}
@keyframes cd-rotate-2-in {
0% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(90deg);
-moz-transform: translateZ(-20px) rotateX(90deg);
-ms-transform: translateZ(-20px) rotateX(90deg);
-o-transform: translateZ(-20px) rotateX(90deg);
transform: translateZ(-20px) rotateX(90deg);
}
60% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(-10deg);
-moz-transform: translateZ(-20px) rotateX(-10deg);
-ms-transform: translateZ(-20px) rotateX(-10deg);
-o-transform: translateZ(-20px) rotateX(-10deg);
transform: translateZ(-20px) rotateX(-10deg);
}
100% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0deg);
-moz-transform: translateZ(-20px) rotateX(0deg);
-ms-transform: translateZ(-20px) rotateX(0deg);
-o-transform: translateZ(-20px) rotateX(0deg);
transform: translateZ(-20px) rotateX(0deg);
}
}
@-webkit-keyframes cd-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
}
}
@-moz-keyframes cd-rotate-2-out {
0% {
opacity: 1;
-moz-transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-moz-transform: translateZ(-20px) rotateX(-90deg);
}
}
@keyframes cd-rotate-2-out {
0% {
opacity: 1;
-webkit-transform: translateZ(-20px) rotateX(0);
-moz-transform: translateZ(-20px) rotateX(0);
-ms-transform: translateZ(-20px) rotateX(0);
-o-transform: translateZ(-20px) rotateX(0);
transform: translateZ(-20px) rotateX(0);
}
60% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-100deg);
-moz-transform: translateZ(-20px) rotateX(-100deg);
-ms-transform: translateZ(-20px) rotateX(-100deg);
-o-transform: translateZ(-20px) rotateX(-100deg);
transform: translateZ(-20px) rotateX(-100deg);
}
100% {
opacity: 0;
-webkit-transform: translateZ(-20px) rotateX(-90deg);
-moz-transform: translateZ(-20px) rotateX(-90deg);
-ms-transform: translateZ(-20px) rotateX(-90deg);
-o-transform: translateZ(-20px) rotateX(-90deg);
transform: translateZ(-20px) rotateX(-90deg);
}
}
h4.big.sub-title { font-size: 40px; }
h4.medium.sub-title { font-size: 24px; color: #fff; }
.banner-home { line-height: 0; position: relative; }
.banner-details { background: rgba(0, 0, 0, 0.3); right: 15px; left: 15px; position: absolute; top: 15px; bottom: 15px; padding: 30px; }
.dt-sc-tabs-frame-content.type2 { position: relative; line-height: 0; }
.dt-sc-tabs-container.type3 ul.dt-sc-tabs-frame li { background: #fff; border: medium none; font-style: normal; margin: 0; min-width: auto; padding: 20px 15px; }
.dt-sc-tabs-container.type3 ul.dt-sc-tabs-frame li::after { background: #000; bottom: 1px; content: ""; height: 3px; left: 0; position: absolute; width: 100%; z-index: 9; }
.dt-sc-tabs-container.type3 ul.dt-sc-tabs-frame::after { background: #eeeeee; bottom: 0; content: ""; height: 2px; left: 0; position: absolute; width: 100%; }
.dt-sc-tabs-container.type3 ul.dt-sc-tabs-frame li.current::before { display: none; }
.dt-sc-tabs-frame-content.type2 img.rotate { transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); }
.dt-sc-details { padding: 55px 40px; text-align: center; color: #fff; }
.dt-sc-details h2 { margin: 0; font-weight: 100; }
.dt-sc-details ul li { padding: 8px 0; position: relative; font-size: 16px; }
.dt-sc-details ul li::after { background: rgba(0, 0, 0, .2); bottom: 0; content: ""; height: 1px; left: 0; margin: auto; position: absolute; right: 0; width: 20%; }
.dt-sc-details.green { background: rgba(44, 176, 55, 0.5); }
.dt-sc-details.red { background: rgba(193, 27, 23, 0.5); }
.dt-sc-details.blue { background: rgba(31, 139, 202, 0.5); }
.dt-sc-content img { display: block; }
.dt-sc-details h4 { margin: 5px 0 20px; font-weight: 100; letter-spacing: 10px; }
.dt-sc-details ul li:last-child::after { display: none; }
.dt-sc-client-wrapper .dt-sc-client-carousel .column { text-align: center; }
.dt-sc-client-wrapper .dt-sc-client-carousel-wrapper { padding: 40px 0; }
.dt-sc-client-wrapper .first::after { background: #fff; bottom: 0; content: ""; height: 50px; margin: auto; position: absolute; right: -20px; top: 0; width: 1px; }
.dt-sc-service.type2 figure { border: none; }
.dt-sc-service.type2 .gallery-details { background: rgba(0, 0, 0, 0.6); color: #fff; padding: 20px; box-shadow: -1px 0 1px 0 #000; }
.opening-time-info { background: rgba(0, 0, 0, 0.4); bottom: 45px; padding: 20px 0; position: relative; margin-top: -20px; }
ul.time-info li { display: inline-block; margin: 0 20px; color: #fff; font-weight: normal; }
ul.time-info li:first-child { margin-left: 0; font-size: 18px; }
ul.time-info li:last-child { margin-right: 0; }
ul.time-info li span { font-weight: 100; }
ul.time-info li i { font-size: 22px; padding-right: 15px; vertical-align: middle; }
.opening-time-info a.appointment-btn { top: -45px; padding: 17px 28px; min-height: 65px; }
/*----*****---- << 04. Main >> ----*****----*/
/*----*****---- << 01. Slider >> ----*****----*/
#slider { float: left; clear: both; width: 100%; margin: 0px; padding: 0px; position: relative; }
/*----*****---- << 05. Footer >> ----*****----*/
#footer { background: #000; clear: both; }
#footer h4.widgettitle { clear: both; text-transform: capitalize; width: 100%; margin-bottom: 15px; color: #cccccc; font-weight: 100; }
#footer .copyright { background: #000; border-top: 1px solid #414141; padding: 30px 0; }
#footer .copyright p { font-family: 'Raleway', sans-serif; font-size: 13px; margin: 0; color: #666666; }
#footer .copyright p a { color: #666666; }
.widget.widget_tweetbox a { color: #cccccc; }
.widget_text p.dt-sc-clr.num { font-size: 18px; font-style: normal; }
.widget_text p { font-size: 14px; color: #707070; }
.widget_text a.dt-sc-clr { font-style: normal; }
.widget.widget_text .textwidget ul li { position: relative; padding-bottom: 10px; }
.widget.widget_text .textwidget ul li a, .widget.widget_tweetbox { color: #707070; }
.footer-widgets-wrapper { display: inline-block; width: 100%; }
.subscribe-frm { position: relative; }
.subscribe-frm i.fa { line-height: 42px; position: absolute; right: 10px; top: 0; font-size: 22px; color: #666666; }
.widget.searchwidget .subscribe-frm i.fa { color: #cccccc; font-size: 22px; }
.widget.searchwidget form p, .widget.searchwidget form p input { margin-bottom: 0; }
ul.tweet_list li.tweet { padding-left: 30px; position: relative; line-height: 22px; }
ul.tweet_list li.tweet::before { content: "\f099"; font-family: fontawesome; left: 0; position: absolute; top: 0; font-size: 18px; }
ul.footer-icons li { display: inline-block; margin: 0 5px; }
ul.footer-icons li:first-child { margin-left: 0; }
ul.footer-icons li a { border: 1px solid #707070; border-radius: 50%; color: #707070; font-size: 18px; height: 40px; line-height: 40px; text-align: center; width: 40px; position: relative; overflow: hidden; z-index: 1; }
ul.footer-icons li a:after { content: ""; height: 100%; position: absolute; right: -100%; top: -130%; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); width: 200%; z-index: -1; border-radius: 50%; }
ul.footer-icons li a:hover::after { height: 300%; }
ul.footer-icons li a:hover { color: #fff !important; border-color: #fff; }
::i-block-chrome, ul.footer-icons li a:hover { border-radius: 0; }
/*----*****---- << custom >> ----*****----*/
h4.about{
text-align: center;
font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',sans-serif;
font-size: 40px;
font-weight: 300;
position: relative;
margin-bottom: 1em;
}
h4.about:before {
content: '';
position: absolute;
bottom: -15px;
display: inline-block;
width: 60px;
height: 5px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: black;
border-radius: 2px;
}
p.abut-text {
font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',sans-serif;
line-height: 30px;
margin-bottom: 100px;
margin-top: 100px;
font-size: 24px;
color: #444;
text-align: center;
line-height: 2;
}
div.parallax-spacing-{
background: #000;
}
div.menu_contener{
background-image: url("images/menu_img.png");
background-size: 66%;
background-position: left 50%;
background-repeat: no-repeat;
height: 900px;
padding-top: 15%;
}
div.menu_contener h3{
font-size: 40px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: #000;
color: #fff;
padding: 20px 0px 20px 128px;
margin-left: 50%;
}
div.menu_list ul li{
font-size: 24px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-weight: 300;
line-height: 2.5;
}
div.menu_list {
margin-left: 68%;
color: #fff;
width: 100%;
}
.googlemap-bw iframe {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
margin: 0px;
padding: 0px;
vertical-align: bottom;
}
.footer-widgets-wrapper{
padding-top: 30px;
}
/*----*****---- << btn>> ----*****----*/
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
.btn,
a.btn,
button.btn {
font-size: 18px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: normal;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 37px 0px;
width: 342px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn--,
a.btn-- {
color: #000;font-weight: bold;
background: linear-gradient(319deg, rgba(149,119,29,1) 16%, rgba(163,137,58,1) 26%, rgba(255,255,255,1) 47%, rgba(255,255,254,1) 48%, rgba(252,251,248,1) 56%, rgba(163,137,59,1) 76%, rgba(149,119,29,1) 85%, rgba(149,119,29,1) 85%);
margin-right: 27px;
}
.btn--:hover,
a.btn--:hover {
color: #fff;
background: #000;
box-shadow:0px 0px 10px #666;
transition : 0.5s;
}
.btn-,
a.btn- {
color: #fff;font-weight: bold;
background: #000;
}
.btn-:hover,
a.btn-:hover {
color: #ccc;
background: #444;
box-shadow:0px 0px 10px #666;
transition : 0.2s;
}
.btn-wrapper{
text-align: center;
margin-top: 140px;
}
#toTop{
display: none;
}
/*----*****---- << recruit>> ----*****----*/
div.recruit{
background-image: url("images/recruit_img.png");
background-size: 66%;
background-position: left 50%;
background-repeat: no-repeat;
height: 900px;
padding-top: 15%;
}
div.recruit h3{
font-size: 40px;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: #000;
color: #fff;
padding: 20px 0px 20px 128px;
margin-left: 50%;
letter-spacing: 10px;
}
p.recruit_text {
font-family :'Yu Mincho Regular', 'Yu Mincho','YuMincho Medium',sans-serif;
margin-bottom: 80px;
margin-top: 100px;
font-size: 24px;
color: #444;
text-align: center;
line-height: 2;
}
.hr-invisible{
padding-bottom: 100px;
}
div.parallax-spacing--{
background: #000;
}
/*----*****---- << animation>> ----*****----*/
.bg {
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 1em,
rgba(248, 187, 208, 0.4) 0,
rgba(248, 187, 208, 0.1) 2em,
rgba(248, 187, 208, 0.3) 0,
rgba(248, 187, 208, 0.2) 4em,
rgba(244, 143, 177, 0.6) 0,
rgba(244, 143, 177, 0.2) 2em
),
repeating-linear-gradient(
45deg,
transparent,
transparent 1em,
rgba(248, 187, 208, 0.4) 0,
rgba(248, 187, 208, 0.1) 2em,
rgba(248, 187, 208, 0.3) 0,
rgba(248, 187, 208, 0.2) 4em,
rgba(244, 143, 177, 0.4) 0,
rgba(244, 143, 177, 0.1) 2em
);
background-blend-mode: multiply;
}
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1000;
}
.recruit_wrap dl{
margin-bottom: 25px;
border-bottom: 1px dotted #555;
width: 50%;
}
.recruit_wrap dl dt{
font-size: 18px;
margin-bottom: 10px;
}