@charset "UTF-8"; /*-------------------------------------------------- style.less @author endesign factory @ver 02.1 @history 2017-04-14 v2.0のCSSを集約・整理、less化 2017-06-17 v2.1のCSSを集約・整理、FontAwesomeの実装 --------------------------------------------------*/ /*================================================== $ loader ==================================================*/ #loader { width: 100px; height: 100px; display: none; position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px; z-index: 99999; text-align: center; img { width: 100%; } } @media screen and ( max-width: @break-max-width ) { #loader { width: 50px; height: 50px; margin-top: -25px; margin-left: -25px; } } #fade { width: 100%; height: 100%; display: none; background-color: #EFEFEF; position: absolute; top: 0px; left: 0px; z-index: 99998; } /*================================================== $fonts ==================================================*/ @import url('https://fonts.googleapis.com/earlyaccess/notosansjapanese.css'); @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700'); .font_designed { font-family: 'Roboto Condensed', sans-serif !important; } /*================================================== $settings ==================================================*/ @import url(./settings.less); /*================================================== *** ==================================================*/ /* モバイル用設定 */ @media screen and ( max-width: @break-max-width ) { } /*================================================== $heading ==================================================*/ .catchphrase { margin-bottom: 50px; font-size: 3.2rem; line-height: 1.3em; text-align: center; } .heading01, h2.title { padding: 0 0 10px 0; margin-bottom: 30px; font-size: 2.8rem; line-height: 1.3em; color: @main-color; font-weight: bold; border-bottom: 3px solid @main-color; background: none; border-top: none; } .heading02 { margin-bottom: 30px; padding: 10px 0 10px 15px; font-size: 2.0rem; border-left: 5px solid @main-color; font-weight: bold; line-height: 1.3em; color: @main-color; } .heading03 { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 1.3em; color: @main-color; } .heading04 { margin-bottom: 15px; font-size: 1.6rem; line-height: 1.3em; font-weight: bold; } .heading05 { margin-bottom: 10px; font-size: 1.4rem; line-height: 1.2em; font-weight: bold; } /*################################################## # # %BASIC STRUCTURE # 基本構造 # ##################################################*/ /*================================================== $body ==================================================*/ body { font-family: 'Noto Sans Japanese', serif; color: @text-color; width: 100%; font-size: 1.4rem; word-wrap: break-word; background-color: @body-color; a, a:link, a:visited { color: @link-color; text-decoration: @link-decoration; outline: none; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; } a:hover, a:active { color: @link-hover-color; } } .container { width: 100%; overflow: hidden; } /*================================================== $header ==================================================*/ .header_wrap, .header_wrap.bg_normal { width: 100%; background: @header-bg-color; border-bottom: 1px solid rgba(255,255,255,0.2); } .fixed_header .header_wrap, .fixed_header .header_wrap.bg_normal { width: 100%; position: fixed; top: 0; z-index: 1000; } /*================================================== $gnav ==================================================*/ .gnav_wrap { position: relative; width: 100%; box-shadow:0 2px 2px rgba(0,0,0,0.2); z-index: 1000; } .fixed_header .gnav_wrap { position: fixed; top: 80px; z-index: 1000; } .gnav { margin: 0 auto; width: @cont-width; } /*================================================== $contents ==================================================*/ /*sidebarありの場合*/ .contents { margin: 0 auto 50px auto; padding: 0; width: @cont-width; } .contents.max_width_contents { width: 100%; } /* main_area */ .main_area { float: left; width: 73%; } /* side_area */ .side_area { float: right; width: 23%; position: relative; } /*max_contentsの場合*/ .max_contents_container { .main_area { width: 100%; } .contents { margin: 0 auto; } } /*================================================== $footer ==================================================*/ /* normal footer */ .footer_wrap { width: 100%; background: @footer-bg-color; .footer { clear: both; position: relative; padding: 50px 15px; margin: 0 auto; width: @cont-width; position: relative; color: @footer-text-color; } .footer a { color: @footer-text-color; text-decoration: none; } } /* simple footer */ .footer_wrap.simple_footer { text-align: center; } @media screen and ( max-width: @break-max-width ) { /*================================================== $sp_basic_structure ==================================================*/ .container { width: 100%; min-width: 100%; } .contents { margin: 0 auto; width: 100%; min-width: 100%; } .max_contents_container .contents { margin: 0 auto; padding: 0 0 30px 0; } /*================================================== $sp_gnav ==================================================*/ .gnav_wrap, .gnav_header_in { display: none; } /*================================================== $sp_contents ==================================================*/ /* main_area */ .main_area { float: none; width: 100%; } /* side_area */ .side_area { display: none; } /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ } /*################################################## # # %BUTTON # ボタン # ##################################################*/ a.button, input.button { display: inline-block; margin: 0 2px; padding: .9em 2.5em .95em; background: @button-bgcolor; color: @button-color !important; text-decoration: none !important; line-height: 1.4em; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; i.fa-chevron-right { margin: 0 0 0 20px; } } input.button { border: none; cursor: pointer; } a.button:hover, input.button:hover { background: @button-hover-bgcolor !important; } a.button.btn_small { display: inline-block; margin: 0 2px; padding: .6em 1.2em .6em; background: @button-bgcolor; color: @button-color !important; text-decoration: none !important; font-size: 12px; } a.submit_back, a.button.bc_white, input.button.bc_white { background: @button-pale-bgcolor; border: 1px solid @button-pale-border-color !important; color: @button-pale-color !important; } a.submit_back:hover, a.button.bc_white:hover, input.button.bc_white:hover { background: @button-pale-hover-bgcolor !important; border: 1px solid @button-pale-border-color !important; color: @button-pale-hover-color !important; } @media screen and ( max-width: @break-max-width ) { a.button, input.button { display: block; width: 80%; box-sizing: border-box; text-align: center; margin: 0 auto; } a.button.btn_tel { padding: .4em 0 .4em; background: @main-color; font-size: 2.4rem; font-weight: bold; color: @button-color !important; border: none !important; } } /*################################################## # # %HEADER # ヘッダー # ##################################################*/ .header { position: relative; height: 80px; .header_logo { position: absolute; top: 20px; left: 20px; .header_logo img { height: 30px; } } .header_contact { position: absolute; top: 17px; right: 20px; a.button { background: @header-btn-bgcolor !important; color: @header-btn-color !important; background-size: 20px !important; i { font-size: 120%; } } a.button:hover { background: @header-btn-hover-bgcolor !important; background-size: 20px !important; color: @header-btn-hover-color !important; } } .header_tel { position: absolute; top: 16px; right: 220px; color: @header-text-color; } .tel_num { margin-bottom: 2px; font-size: 3.2rem; letter-spacing: 2px } .header_opentime { font-size: 1.2rem; text-align: right; } } /* menu_btn */ .menu_btn { display: none; } @media screen and ( max-width: @break-max-width ) { .header { height: 60px; .header_logo { top: 15px; left: 20px; img { height: 30px; } } .header_contact { display: none; } .header_tel { display: none; } } /* menu_btn */ .menu_btn { display: block; position: absolute; top: 10px; right: 10px; i:before { display: block; padding: 10px; font-size: 20px; border: none; color: #fff; } } .menu_btn img { height: 40px; } } /*################################################## # # %GNAV # グローバルナビゲーション # ##################################################*/ /*================================================== $pc_gnav(alone) ==================================================*/ .gnav { li a { -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; } } /* gn_flex */ .gnav_wrap { background: @gn-bgcolor; } .gnav { border-left: 1px solid @sub-color; ul { display: flex; display: -webkit-flex; li { flex: 1; -webkit-flex: 1; width: auto; } li a { display: block; padding-top: 23px; height: 42px; text-align: center; text-decoration: none !important; font-size: 1.6rem; font-weight: bold; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; border-right: 1px solid @sub-color; color: @gn-text-color !important; } li a:hover { background: @gn-hover-bgcolor; color: @gn-hover-color; } li a.current { background: @gn-active-bgcolor; color: @gn-active-color; } } } /*================================================== $pc_gnav(header-in) ==================================================*/ .gnav_header_in { position: absolute; top: 23px; right: 230px; li { float: left; margin-left: 20px; } li a { display: block; padding: 10px; text-decoration: none !important; color: #fff; font-size: 1.4rem; letter-spacing: 2px; } li a:hover { color: @accent-color; } li a.current { border-bottom: 1px solid @accent-color; } } .header-nav { position: absolute; top: 25px; right: 20px; a { display: block; float: left; padding: 10px 20px 10px 10px; margin-left: 15px; background: #fff; color: @main-color; text-decoration: none !important; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; line-height: 1.0em; letter-spacing: 0; &:hover { background: @accent-color; } } @media screen and ( max-width: @break-max-width ) { display: none; } } /*================================================== $submenu ==================================================*/ .submenu_wrap { position: relative; z-index: 999; /* IE7 */ .submenu { flex-flow: column nowrap; display: block; position: absolute; top: 50px; left: 10px; z-index: 20; padding: 0; width: 200px; box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); li { float: none; display: block; padding: 0; width: auto !important; } li:last-child { border-bottom: none; } li a { display: block; width: auto !important; height: auto; margin: 0; padding: 10px !important; border-left: none; text-decoration: none; text-align: left; font-size: 1.6rem; font-weight: normal; border: none; } } } /*================================================== $global_acordion_navi ==================================================*/ #global_acordion_navi { display: none; } @media screen and ( max-width: @break-max-width ) { #global_acordion_navi { display: block; position: fixed; top: 60px; padding: 0 20px; width: 100%; height: 100%; overflow: auto; display: none; z-index: 1000 !important; box-sizing: border-box; border-left: 1px solid @deep-color; border-right: 1px solid @deep-color; background-color: rgba(255, 255, 255, 0.95); h3 { margin: 20px 0; text-align: center; font-size: 2.0rem; color: @main-color; } ul { margin-bottom: 10px; border-left: 1px solid @deep-color; border-right: 1px solid @deep-color; border-top: 1px solid @deep-color; li { margin-bottom: 0; padding: 0; border-bottom: 1px solid @deep-color; } li a { color: @text-color !important; display: block; font-weight: bold; padding: 10px 15px; font-size: 1.5rem; font-size: 15px; text-align: left; text-decoration: none; text-shadow: none; position: relative; } li a:after { position: absolute; top: 8px; right: 15px; content: "\f138"; font-family: FontAwesome; font-size: 20px; color: @deep-color; } } } .gan_contact { margin-bottom: 10px; a.button span { display: inline-block; padding: 5px 0 5px 30px; background: url(../_images/_common/icons/icon_mail_02.png) left center no-repeat; font-size: 1.8rem; background-size: 24px; } } .gan_tel { a.button { display: block; padding: 7px 0; font-size: 2.2rem; margin: 0 auto; } } } /*################################################## # # %TITLE # タイトル # ##################################################*/ .gn_type_header_in .title_wrap { margin-top: 80px; /* HEADER内GNの場合 */ } .title_wrap { margin: 0 0 70px 0; background: @main-color; background-size: cover; .title { position: relative; margin: 0 auto; width: 1000px; height: 200px; .page_title { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); text-align: center; color: #fff; .page_shoulder { color: #fff; } } } } .page_title { margin-bottom: 50px; .page_shoulder { margin-bottom: 5px; font-size: 3.0rem; color: @main-color; } h1 { font-weight: bold; } } .page_title.reverse_col { color: #fff; .page_shoulder { color: #fff; } } @media screen and ( max-width: @break-max-width ) { .page_title { margin-bottom: 20px; .page_shoulder { font-size: 2.4rem; } h1 { font-size: 1.2rem; } } } .catch { margin: 0 auto; width: @cont-width; } @media screen and ( max-width: @break-max-width ) { .title_wrap, .gn_type_header_in .title_wrap { margin: 0 0 30px 0; } .title_wrap .title { height: 100px; width: 100%; } .catch { padding: 0 15px; margin: 0 auto; width: 100%; .catchphrase { margin-bottom: 20px; } } } /*################################################## # # %SIDE_AREA # サイドエリア # ##################################################*/ .side_contents { margin-bottom: 20px; } .heading_side { margin-bottom: 15px; padding: 15px; font-size: 1.6rem; font-weight: bold; color: #fff; background: @main-color; } /* sidenav */ .sidenav { margin-bottom: 20px; li { a { display: block; padding: 15px 10px 15px 30px; font-size: 1.2rem; text-decoration: none !important; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; background: url(../_images/_common/icons/icon_arrow_01.png) left 15px center no-repeat; border-bottom: 1px solid @deep-color; color: @text-color !important; } a.current { background: @accent-color url(../_images/_common/icons/icon_arrow_02.png) left 15px center no-repeat; color: #fff !important; } a:hover { background: @light-color url(../_images/_common/icons/icon_arrow_01.png) left 15px center no-repeat; } a.current:hover { background: @deep-color url(../_images/_common/icons/icon_arrow_02.png) left 15px center no-repeat; } } .child { li { a { padding: 10px 10px 10px 35px; background: url(../_images/_common/icons/icon_bar_01.png) left 20px center no-repeat; border-bottom: 1px dotted @deep-color; } a.current { background: @accent-color url(../_images/_common/icons/icon_bar_01.png) left 20px center no-repeat; color: #fff !important; } a:hover { background: @light-color url(../_images/_common/icons/icon_bar_01.png) left 20px center no-repeat; } a.current:hover { background: @deep-color url(../_images/_common/icons/icon_bar_02.png) left 20px center no-repeat; color: #fff !important } } li:last-child a { border-bottom: 1px solid @deep-color; } } } /* side_news */ .side_news { border: 1px solid @main-color; li { a { background: url(../_images/_common/icons/icon_bar_01.png) 0px 7px no-repeat; } } } /* side_banner */ .side_banner { p { margin-bottom: 10px; .side_banner p img { width: 100%; } } } /* side_news_area */ .side_news_area { .heading_side { margin-bottom: 0; } .side_news { padding: 15px; li { margin-bottom: 15px; a { margin-bottom: 5px; display: block; padding-left: 20px; font-size: 1.2rem; line-height: 1.4em; } span.date { display: block; text-align: right; color: #888; font-size: 1.1rem; } } } } /*################################################## # # %FOOTER # フッター # ##################################################*/ /*================================================== $footer_profile ==================================================*/ .footer_profile { h2 { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; } address { margin-bottom: 15px; line-height: 1.5em; } .footer_tel { margin-bottom: 10px; font-size: 1.6rem; font-weight: bold; i.fa.fa-fax { margin-left: 20px; } } .footer_opentime { font-size: 1.2rem; } .footer_tel_sp { display: none; } } /*================================================== $footer_sitenav ==================================================*/ .footer_sitenav { position: absolute; top: 50px; right: 15px; line-height: 1.8em; ul { float: left; margin-left: 40px; li { a { color: @footer-text-color !important; text-decoration: none !important; } } li:before { content: ''; width: 5px; height: 2px; display: inline-block; border-radius: 100%; background: #fff; position: relative; left: -10px; top: -5px; } } } /*================================================== $copyright ==================================================*/ .copyright_wrap { clear: both; width: 100%; background: @copyright-bgcolor; .copyright { padding: 20px 0; margin: 0 auto; width: @cont-width; p { text-align: center; font-size: 1.1rem; color: @copyright-text-color; } } } /*================================================== $pagetop ==================================================*/ .pagetop { position: fixed; bottom: 20px; right: 0; z-index: 1000; a { display: block; padding: 15px; background: @main-color; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border: 2px solid #fff; i { margin: 0; font-size: 15px; color: #fff; } } } @media screen and ( max-width: @break-max-width ) { /*================================================== $sp_footer ==================================================*/ .footer_wrap { min-width: 100%; .footer { position: inherit; padding: 30px; width: 100%; text-align: center; box-sizing: border-box; .footer_profile { margin-bottom: 30px; } .footer_tel { display: none; i.fa.fa-fax { margin-left: 0; } } .footer_tel_sp { display: block; margin-bottom: 15px; font-weight: bold; } /*footer_sitenav*/ .footer_sitenav { position: inherit; top: 0; left: 0; ul { float: none; margin: 0; li:before { display: none; } li a { display: block; padding: 10px; text-align: left; font-size: 1.4rem; font-weight: bold; background: #fff; color: @main-color !important; border: 1px solid @main-color; border-bottom: none; position: relative; } li a:after { position: absolute; right: 15px; content: "\f138"; font-family: FontAwesome; font-size: 20px; color: @deep-color; } li.fn_first a { border-top-left-radius: 6px; border-top-right-radius: 6px; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; } li.fn_last a { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; border-bottom: 1px solid @main-color; } } } } } .footer_wrap.simple_footer .footer_profile { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } /*================================================== $copyright ==================================================*/ .copyright_wrap { min-width: 100%; .copyright { width: 100%; } } } /*################################################## # # %UTILITIES # ユーティリティ # ##################################################*/ /*================================================== $text ==================================================*/ .texts p, p.text, .texts ul, .texts ol, ul.text, ol.text { margin: 0 0 10px; padding: 0; font-size: 100%; line-height: 1.8em; border: none; } .texts ul, ul.text { padding-left: 10px; } .texts ul li, ul.text li { margin: 0; line-height: 1.5em; } .texts ul li:before, ul.text li:before { content: ''; width: 3px; height: 3px; display: inline-block; border-radius: 100%; background: @main-color; position: relative; left: -10px; top: -5px; } .texts ol li, ol.text li { margin: 0 0 0 20px; padding: 0 0 0; list-style: decimal outside; line-height: 1.5em; } .texts p em, p.texts em { color: @accent-color; font-weight: bold; } .caution { color: @accent-color; } .caption { font-size: 12px; font-size: 1.2rem; line-height: 1.3em; } .texts p a, p.text a { word-break: break-all; word-wrap: break-word; } .mbcut { margin-bottom: 0 !important; } .mrcut { margin-right: 0 !important; } article .date { margin-bottom: 20px; } article .date { i.fa { font-size: 1.6rem; } i, time { vertical-align: middle; } } article .texts img { margin-bottom: 30px; height: auto; max-width: 100%; box-sizing: border-box; } article h1 { margin-bottom: 15px; font-size: 3.2rem; font-weight: bold; line-height: 1.5em; color: @main-color; } article h2 { margin-bottom: 15px; font-size: 2.4rem; font-weight: bold; line-height: 1.5em; color: @main-color; } article h3 { margin-bottom: 15px; font-size: 1.8rem; font-weight: bold; line-height: 1.5em; color: @main-color; } article h4 { margin-bottom: 15px; font-size: 1.6rem; font-weight: bold; line-height: 1.5em; } article h5 { margin-bottom: 15px; font-size: 1.4rem; font-weight: bold; line-height: 1.5em; } article h6 { margin-bottom: 15px; font-size: 1.3rem; font-weight: bold; line-height: 1.5em; } article strong { font-weight: bold; } article .texts p em, article .texts em { font-style: italic; color: @accent-color !important; } article blockquote { padding: 15px; background: @light-color; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .date { font-size: 12px; font-size: 1.2rem; } .font_mincho { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif; } .texts img { margin-bottom: 5px; } .pic, .fig { margin-bottom: 5px; } .pic, .btn { overflow: hidden; } .pic img, .btn img { width: 100%; vertical-align: bottom; -webkit-transition: all 0.8s ease; -moz-transition: all 0.8s ease; -o-transition: all 0.8s ease; } .pic a:hover img, .btn a:hover img { opacity: 0.75; filter: alpha(opacity=75); } .pic.scale a:hover img, .btn.scale a:hover img { opacity: 0.75; filter: alpha(opacity=75); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .fig img { max-width: 100%; } a.ref { display: inline-block; text-decoration: none !important; font-weight: bold; font-size: 1.4rem; } a.ref:before { content: "\f152"; font-family: FontAwesome; margin-right: 10px; color: @main-color; } a.ref:hover { text-decoration: underline !important; } .tel a { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; text-decoration: none !important; line-height: inherit !important; text-align: inherit !important; letter-spacing: inherit !important; color: inherit !important; } .supple { font-size: 1.2rem !important; } .center { text-align: center; } .text_right { text-align: right; } .flex { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } /* text icon */ .tx_icon { margin-right: 10px; padding: 5px 15px; background: @accent-color; color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; font-size: 1.2rem; } /*================================================== $box ==================================================*/ .page_section { margin-bottom: 80px; } .box { clear: both; margin-bottom: 50px; } .part { clear: both; margin-bottom: 15px; } .cover { padding: 20px; border: 1px solid @deep-color; background: @cover-bg-color; } .list_inner { padding: 10px; border: 1px solid @deep-color; background: #fff; } i.fa { margin-right: 10px; } /*================================================== $pic, shape ==================================================*/ .pic { margin-bottom: 5px; } .pic img { width: 100%; } .frame01 { padding: 4px; border: 1px solid @deep-color; background: @light-color; } .btn a:hover img { filter:alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } .hover { opacity: 0.75; filter: alpha(opacity=75); } /* radius */ .radius { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } /* shadow */ .text_shadow { text-shadow: 1px 1px 1px rgba(0,0,0, 0.2); } .box_shadow { box-shadow: 1px 1px 1px rgba(0,0,0, 0.2); } /*================================================== $table ==================================================*/ table { width: 100%; margin-bottom: 12px; } table th { font-weight: bold; white-space: nowrap; text-align: left; background: @light-color; } table th, table td { padding: 12px; line-height: 1.4em; } table.table01 { background: @cover-bg-color; } table.table01 th, table.table01 td { border: 1px solid @deep-color; } table.table02 { border-top: 2px solid @deep-color; } table.table02 th, table.table02 td { background: none; border-bottom: 1px solid @deep-color; } /*================================================== $floatbox ==================================================*/ .clm2 li.list_cont, .clm3 li.list_cont, .clm4 li.list_cont, .clm5 li.list_cont { float: left; } .clm2 li.list_cont { margin: 0 2% 2% 0; width: 49%; } .clm3 li.list_cont { margin: 0 2% 2% 0; width: 32%; } .clm4 li.list_cont { margin: 0 1% 1% 0; width: 24.25%; } .clm5 li.list_cont { margin: 0 1% 1% 0; width: 19.2%; } .image_texts .image_cont { float: left; margin-right: 3%; width: 30%; } .image_texts .texts_cont { float: right; width: 66%; } .texts_image .image_cont { float: right; margin-left: 3%; width: 30%; } .texts_image .texts_cont { float: left; width: 66%; } .left_right .left_cont { float: left; width: 49%; } .left_right .right_cont { float: right; width: 49%; } /* icon_kome */ .icon_kome::before { content: '※'; display: block; float: left; margin-left: -1.5em; width: 1em; text-align: center; } .icon_kome { display: block; padding-left: 1.5em !important; } /*================================================== $contents_set ==================================================*/ /* split_box */ .split_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-wrap: nowrap; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; .split_inner { padding: 5%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; width: 50%; box-sizing: border-box; } .split_inner.split_image { background-position: 50% 50%; background-size: cover; } .split_inner.split_text { background: #fff; } .split_inner .text_cont { } } @media screen and ( max-width: @break-max-width ) { .split_box { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; .split_inner { width: 100%; } .split_inner.split_image { height: 200px; } } .split_box.txt_img { -ms-flex-flow: wrap-reverse; -webkit-flex-flow: wrap-reverse; flex-flow: wrap-reverse; } } /* arrow_box */ .arrow_content { padding: 20px; } /* arrow_top */ .arrow_top { position: relative; background: #fff; border: 1px solid #ddd; } .arrow_top:after, .arrow_top:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_top:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; } .arrow_top:before { border-color: rgba(221, 221, 221, 0); border-bottom-color: #ddd; border-width: 11px; margin-left: -11px; } /* arrow_left */ .arrow_left { position: relative; background: #fff; border: 1px solid #ddd; } .arrow_left:after, .arrow_left:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_left:after { border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 10px; margin-top: -10px; } .arrow_left:before { border-color: rgba(221, 221, 221, 0); border-right-color: #ddd; border-width: 11px; margin-top: -11px; } /* arrow_right */ .arrow_right { position: relative; background: #fff; border: 1px solid #ddd; } .arrow_right:after, .arrow_right:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_right:after { border-color: rgba(255, 255, 255, 0); border-left-color: #fff; border-width: 10px; margin-top: -10px; } .arrow_right:before { border-color: rgba(221, 221, 221, 0); border-left-color: #ddd; border-width: 11px; margin-top: -11px; } /* arrow_bottom */ .arrow_bottom { position: relative; background: #fff; border: 1px solid #ddd; } .arrow_bottom:after, .arrow_bottom:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_bottom:after { border-color: rgba(255, 255, 255, 0); border-top-color: #fff; border-width: 10px; margin-left: -10px; } .arrow_bottom:before { border-color: rgba(221, 221, 221, 0); border-top-color: #ddd; border-width: 11px; margin-left: -11px; } /* flow_box */ .flow_box .image_texts { margin-bottom: 30px; } .flow_box .image_cont { padding-bottom: 30px; position: relative; } .flow_box .image_cont:before { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; display: block; width: 20px; height: 20px; content:'\f0d7'; font-family: FontAwesome; font-size: 20px; color:@main-color; } .flow_box .last .image_cont { padding-bottom: 0; background: none; } .flow_box .last .image_cont:before { content:''; } .flow_box .heading03 { padding-bottom: 10px; border-bottom: 1px solid @deep-color; } .flow_box .heading03 .step { margin-right: 15px; font-size: 1.6rem; font-weight: bold; } .flow_box .heading03 .step em { margin-left: 5px; font-size: 2.4rem; font-weight: bold; } /* faq_block */ .faq_block { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid @deep-color; } .faq_heading { margin-bottom: 20px; color: @main-color; font-size: 1.8rem; i { font-size: 3.2rem; vertical-align: middle; } span { vertical-align: middle; font-weight: bold; } } .faq_block p { min-height: 50px; } /* map_container */ .map_container { iframe { width: 100%; height: 550px; } .gm-style-iw { overflow: hidden ! important; } .gm-style-iw div { overflow: hidden ! important; } .gm-style-iw h4 { font-weight: bold; margin-bottom: 5px; } .gm-style-iw p { font-size: 1.1rem; white-space: nowrap; } } @media screen and ( max-width: @break-max-width ) { .map_container iframe { height: 300px; } } .addr_text { margin-bottom: 15px; line-height: 1.4em; } .access_heading { margin-bottom: 15px; font-weight: bold; font-size: 1.6rem; } .icon_train { i { font-size: 2.4rem; color: @main-color; } } .icon_car { background-size: 30px; i { font-size: 2.4rem; color: @main-color; } } /* sp_gallery */ .sp_gallery .owl-theme .owl-dots { text-align: center; } .sp_gallery .owl-theme .owl-dots .owl-dot { display: inline-block; zoom: 1; *display: inline; } /* gallery dots navi active color */ .sp_gallery .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #869791; } /* gallery dots navi normal color */ .sp_gallery .owl-theme .owl-dots .owl-dot span { width: 10px; height: 10px; margin: 5px 7px; background: #d6d6d6; display: block; -webkit-backface-visibility: visible; -webkit-transition: opacity 200ms ease; -moz-transition: opacity 200ms ease; -ms-transition: opacity 200ms ease; -o-transition: opacity 200ms ease; transition: opacity 200ms ease; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* archive */ .archive_list li { margin: 0 0 20px; padding: 0 0 20px 0; border-bottom: 1px solid @deep-color; .pic { float: left; height: 150px; width: 20%; background-size: cover; background-position: 50% 50%; } .archive_list_cont { float: right; width: 78% } .archive_list_title { font-size: 1.6rem; margin-bottom: 10px; line-height: 1.5em; } .archive_list_title a { font-weight: bold; } p.date { margin: 0 0 10px 0; font-size: 12px; font-size: 1.2rem; line-height: 1.3em; } } /*archive_list2*/ .archive_list2 { ul { padding: 30px 30px 20px 30px; background: rgba(255,255,255,0.9); li { margin-bottom: 10px; padding-bottom: 20px; border-bottom: 1px solid @deep-color; .tx_icon { margin: 0 0 0 10px; } .archive_list_title a { padding: 20px; display: block; background: #fff; line-height: 1.3em; } } } } /*archive_list3*/ .archive_list3 { li { background: #fafafa; } .pic, .archive_list_cont { float: left; @media screen and ( max-width: @break-max-width ) { float: none; } } .pic { width: 40%; height: 180px; background-size: cover; background-position: 50% 50%; margin-bottom: 0; @media screen and ( max-width: @break-max-width ) { width: 100%; } } .archive_list_cont { width: 60%; @media screen and ( max-width: @break-max-width ) { width: 100%; } .date { padding: 10px 15px; background: @light-color; font-size: 1.2rem; } .archive_texts { padding: 0 10px 0 15px; @media screen and ( max-width: @break-max-width ) { padding: 0 15px 15px 15px; } .archive_list_title a { display: block; margin-bottom: 5px; font-size: 1.6rem; font-weight: bold; text-decoration: none; line-height: 1.4em; } p { margin-bottom: 5px; font-size: 1.3rem; line-height: 1.4em; } .right { display: block; } } } } @media screen and ( max-width: @break-max-width ) { .archive_list li { .pic { float: none; width: 100%; height: 200px; } .archive_list_cont { float: none; width: 100%; } .tx_icon { display: inline-block; margin-bottom: 10px; } .date { text-align: right; } } } .archive_list li .news_title { margin: 0; padding: 0 10px 0 80px; line-height: 1.3em; } .archive_list li p.link_pdf { } .article_info { margin-bottom: 30px; text-align: right; } /* weblog_archive_area */ .weblog_archive_area { margin-bottom: 50px; } .weblog_archive_area .heading03 a { font-weight: bold; text-decoration: none !important } /* weblog_aside */ .weblog_aside { padding: 20px; border-top: 1px solid #666; border-bottom: 1px solid #666; } .weblog_aside h4 { float: left; margin-right: 20px; font-weight: bold; line-height: 1.7em; } .weblog_aside li { display: inline-block; margin-right: 10px; } .weblog_aside li a { display: block; padding: 10px 15px; color: #333 !important; text-decoration: none !important; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border: 1px solid #ddd; } .weblog_aside li a:hover { background: #ddd; } /* ajax_more_load */ .ajax_more_load { /* main_contents width - 150 / 2 */ margin-left: 265px; } /* error */ .error_box p { text-align: center; } /*================================================== $pagenav ==================================================*/ .pagenav { text-align: center; } .pagenav a { display: inline-block; padding: 10px 15px; margin: 0 5px; color: #333 !important; text-decoration: none !important; border: 1px solid #ddd; } .pagenav a.current { display: inline-block; padding: 10px 15px; margin: 0 5px; background: #ddd; color: #fff !important; text-decoration: none !important; border: 1px solid #ddd; } .wp-pagenavi { text-align: center; } .wp-pagenavi .pages { margin-right: 15px; border: none; } .wp-pagenavi .extend { border: none; } .wp-pagenavi .page, .wp-pagenavi a { display: inline-block; padding: 10px 15px; margin: 0 5px; color: #555 !important; text-decoration: none !important; border: 1px solid #ddd; } .wp-pagenavi .current { display: inline-block; padding: 10px 15px; margin: 0 5px; background-color: @main-color !important; color: #fff; text-decoration: none !important; border: 1px solid @main-color; } /*================================================== $js ==================================================*/ /* tab_menu*/ .tab_menu { overflow: hidden; display: -webkit-box; display: box; text-align: center; } .tab_menu li { background: #ccc; padding: 10px 0; -webkit-box-flex: 1; box-flex: 1; width: 100%; border-left: 1px solid #fff; } .tab_menu li:hover { cursor: pointer; } .tab_menu li.select { background: #eee; } .tab_content_wrap { .tab_content { background: #eee; padding: 20px; } } .tab_content_wrap .tab_content.hide { display: none; } /* ac_menu */ .ac_menu .ac_content { display: none; } .ac_menu .ac_toggle { padding: 5px 0 15px 0; cursor: pointer; border-bottom: 1px dashed @deep-color; position: relative; } .ac_menu .ac_toggle:after { content: "\f055"; font-family: FontAwesome; position: absolute; right: 0; font-size: 30px; color: @main-color; } .ac_menu .ac_toggle.open:after { content: "\f056"; font-family: FontAwesome; position: absolute; right: 0; font-size: 30px; color: @main-color; } /* fade */ .fade { top: 100px; opacity: 0; position: relative; } @media screen and ( max-width: @tb-width ) { .fade { top: 0; opacity: 100; position: inherit; } } /* slick_slider */ .slick-initialized .slick-slide { padding: 5px; } /*左右の矢印の色を変える*/ .slick-prev:before, .slick-next:before { color: @main-color !important; } /*左右の矢印の位置を変える*/ .slick-next { right: 20px; z-index: 99; } .slick-prev { left: 15px; z-index: 100; } /*スライド数のドットの色を変える*/ .slick-dots li.slick-active button:before, .slick-dots li button:before { color: @main-color !important; } .thumb_item_nav li img { width: 100%; height: auto; } .thumb_item_nav li:hover { cursor: pointer; } .thumb_item_nav li:hover img { opacity: 0.75; filter: alpha(opacity=75); } /* simply scroll */ .loop_slide { .slide_wrapper { width: 100%; overflow: hidden; } .simply-scroll-container { position: relative; } .simply-scroll-clip { position: relative; overflow: hidden; } .simply-scroll-list { overflow: hidden; margin: 0; padding: 0; } .simply-scroll-list li { float: left; /* Horizontal scroll only */ padding: 0; margin: 0 20px 0 0; width: 300px; height: 250px; overflow: hidden; } .simply-scroll-list li img { display: block; border: 1px solid #eee; } } /* color_box */ .color_box li { position: relative; } .color_box li .scope_ico { width: 20px; height: 20px; position: absolute; bottom: 15px; right: 15px; i { font-size: 16px; color: #fff; } } @media screen and ( max-width: @break-max-width ) { /*================================================== $heading ==================================================*/ .catchphrase { margin-bottom: 40px; font-size: 2.4rem; line-height: 1.3em; } /*================================================== $sp_box ==================================================*/ .box { margin-bottom: 30px; padding: 0 15px; box-sizing: border-box; } .part { margin-bottom: 20px; } /*================================================== $sp_floatbox ==================================================*/ .clm2 li.list_cont.mbcut, .clm3 li.list_cont.mbcut, .clm4 li.list_cont.mbcut, .clm5 li.list_cont.mbcut { margin-bottom: 15px !important; } .clm2 li.list_cont, .clm3 li.list_cont, .clm4 li.list_cont, .clm5 li.list_cont { float: none; } .clm2 ul, .clm3 ul, .clm4 ul, .clm5 ul { margin: 0; } .clm2 li.list_cont, .clm3 li.list_cont, .clm4 li.list_cont, .clm5 li.list_cont { margin-bottom: 15px !important; width: 100% !important; } .image_texts .image_cont, .texts_image .image_cont, .image_texts .texts_cont, .texts_image .texts_cont { margin: 0 0 15px 0; float: none; width: 100%; } .left_right .left_cont, .left_right .right_cont { margin: 0 0 15px 0; width: 100%; } /*================================================== $sp_table ==================================================*/ table th, table td { display: block; } table.table01 th, table.table01 td { border-left: none !important; border-right: none !important; } table.table01 td { margin-bottom: 10px !important; border-top: none !important; border-bottom: none !important; } table.matrix_table { width: 100%; th, td { display: table-cell; border: 1px solid @deep-color !important; } } .table_scroll{ overflow: auto; white-space: nowrap; } .table_scroll::-webkit-scrollbar{ height: 5px; } .table_scroll::-webkit-scrollbar-track{ background: #F1F1F1; } .table_scroll::-webkit-scrollbar-thumb { background: #BCBCBC; } /*================================================== $sp_contents_set ==================================================*/ .weblog_aside { padding: 20px; } .weblog_aside h4 { margin-bottom: 10px; float: none; } .weblog_aside li { display: block; margin: 0 0 10px 0; } /* fade */ .fade { right: 0; opacity: 100; position: relative; } .slick-prev:before, .slick-next:before { display: none; } /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ } /*================================================== $form ==================================================*/ form input { margin: 0; color: #555; } form input.input_text { margin: 2px 0; padding: 10px; height: 16px; border: 1px solid #DDD; line-height: 1.5em; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; -moz-box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; } form textarea.textarea { margin: 2px 0; padding: 10px; border: 1px solid #DDD; line-height: 1.5em; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -webkit-box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; -moz-box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; box-shadow:1px 1px 1px 0 rgba(200,200,200,0.2) inset; } form .multiline textarea.textarea { height: 200px; } form input.input_text:hover, form textarea.textarea:hover, form input.input_text:focus, form textarea.textarea:focus { background-color: #FAFAFA; border: 1px solid #C5C5C5; } form input.input_text[disabled], form input.input_text[disabled]:hover { background-color: #EEE; border: 1px solid #DDD; } form select { margin: 1px 0; padding: 0 10px; height: 36px; border: 1px solid #DDD; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } form select option { padding: 5px; } form input.input_check { margin: 14px 0; } form label.check_label { display: inline-block; margin: 15px 25px 0 5px; vertical-align: top; cursor: pointer; } form input.size_l, form textarea.size_l { width: 90%; } form input.size_m { width: 150px; } form input.size_s { width: 80px; } form input.size_ss { width: 40px; } .form_scroll_cont { margin: 10px 0 5px; padding: 10px; border: 2px solid #EEE; background-color: #FAFAFA; width: 400px; height: 80px; overflow-y: scroll; } .form_scroll_cont h4, .form_scroll_cont p { font-size: 11px; font-size: 1.1rem; line-height: 1.2em; } /* validate */ form label.error { display: block; margin-top: 5px; font-size: 12px; font-size: 1.2rem; color: #F22333; } form span.must { margin-left: 10px; font-size: 12px; font-size: 1.2rem; color: #CC0000; } /* form_set(display_table) */ #confirm_form .form_input_set p { line-height: 1.5em; } .form_submit_set { padding-top: 20px; text-align: center; } .form_input_set .form_fieldset { display: table; width: 100%; table-layout: fixed; *overflow:auto; } .form_input_set .form_legend { display: table-cell; margin-bottom: 1px; padding: 20px 10px; width: 25%; vertical-align: top; *clear:left; *float:left; } #confirm_form .form_input_set .form_cont { padding: 20px 10px; } .form_input_set .form_cont { display: table-cell; padding: 6px; vertical-align: top; *float:left; } .form_caption { padding-top: 5px; color: #888; } /* form_set01 */ .form_set01 { } .form_set01 .form_input_set { border-bottom: 1px solid #DDD; } .form_set01 .form_legend { border-top: 1px solid #DDD; border-bottom: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; background: #FCFCFC; } .form_set01 .form_cont { border-top: 1px solid #DDD; border-bottom: none; border-left: none; border-right: 1px solid #DDD; } /* form_set02 */ .form_set02 { } .form_set02 .form_input_set { border-top: 2px solid #CCC; } .form_set02 .form_legend { border-top: none; border-bottom: 1px solid #DDD; border-left: none; border-right: none; font-weight: bold; } .form_set02 .form_cont { border-top: none; border-bottom: 1px solid #DDD; border-left: none; border-right: none; } /* checkbox_text */ .checkboxtext_left { float: left; width: 200px; } .checkboxtext_right { float: left; width: 200px; } @media screen and ( max-width: @break-max-width ) { /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ @ [ モバイル用設定 ] @ @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ /*================================================== $sp_form ==================================================*/ .form_input_set .form_fieldset { display: block; } .form_set02 .form_legend { padding-bottom: 5px; display: block; width: 100%; box-sizing: border-box; border-bottom: none; } .form_set02 .form_cont { display: block; width: 100%; box-sizing: border-box; } form input.input_text { height: 40px; } form input.size_l, form textarea.size_l { width: 100%; box-sizing: border-box; } form input.size_m, form textarea.size_m { height: 20px; } /*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*/ } /*================================================== [ utility ] $clearfix ==================================================*/ .clearfix:after, .part:after, .gnav ul:after, .contents:after, .footer_sitenav:after, .footer:after, .footer_wrap:after, .clm2 ul:after, .clm3 ul:after, .clm4 ul:after, .clm5 ul:after, .left_right:after, .image_texts:after, .texts_image:after, .archive_list li:after, .weblog_aside:after, .tab_menu:after { content:" "; display:block; clear:both; } /*================================================== $overwrite ==================================================*/ @import url(./style_overwrite.less);