@charset "utf-8"; /*--------------------------------------*/ /*初期設定 /*--------------------------------------*/ @color_main: #55360C;//メインカラー @color_effect: #55360C;//差し色 @color_effect2: #55360C;//差し色2 @color_bg: #f8f7f1;//薄め背景色 @color_gray: #f5f5f5;//グレー @color_border: #ccc;//ボーダーカラー @color_h4_border: #dfdfdf;//h4ボーダーボトムカラー /*--------------------------------------*/ /*要変更 /*--------------------------------------*/ .dlt_h3{ text-align: left; clear: both; margin-bottom: 50px; border-bottom: 1px solid #eee; color: #080808; font-size: 160%; } .dlt_h4{ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; } .dlt_free{ overflow: hidden; margin-bottom: 15px; text-align: left; clear: both; } .dlt_free, .dlt_free *{ font-size: 13px !important; line-height: 160% !important; /*font-family: "メイリオ", "Meiryo", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif;*/ } .dlt_freetitle{ text-align: left; clear: both; margin-bottom: 10px; font-weight: bold; color: #fff; padding: 5px 10px; background: @color_effect2; } a{ color: #444; /*text-decoration: none;*/ } a:hover{ color: #f09300; text-decoration: none; } .mb5{ margin-bottom: 5px !important; } .mb10{ margin-bottom: 10px !important; } .mb20{ margin-bottom: 20px !important; } .mb30{ margin-bottom: 30px !important; } .mb40{ margin-bottom: 40px !important; } .mb60{ margin-bottom: 60px !important; } a.fade0, a.fade8{ -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } a.fade0:hover{ filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; } a.fade8:hover{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } /*--------------------------------------*/ /*base /*--------------------------------------*/ .pc_none{ display: none !important; } .mysns *{ vertical-align: bottom !important; } *{ margin: 0; padding: 0; } html, body{ /* height: 100%; */ } body{ /* line-break: strict; font-size: 78%; line-height: 160%; text-align: center; font-family: "メイリオ", "Meiryo", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif; */ word-break: break-all; word-wrap: break-word; } img{ vertical-align: top; background: url(/wp-content/themes/cmn/images/spacer.gif); } img, a img{ border: 0; } a{ outline: 0; } .mb10{ margin-bottom: 10px; } .mb15{ margin-bottom: 15px; } .mb20{ margin-bottom: 20px; } .mb30{ margin-bottom: 30px; } .mb40{ margin-bottom: 40px; } .mb60{ margin-bottom: 60px; } .dlt_category_txt{ text-align: left; margin-bottom: 20px; } /*--------------------------------------*/ /*pager /*--------------------------------------*/ #dlt_pager{ clear: both; overflow: hidden; padding-top: 20px; margin-bottom: 30px; width: 100%; display: flex; } #dlt_pager .dlt_pagerprev{ width: 33%; text-align: left; } #dlt_pager .dlt_pagertop{ width: 33%; text-align: center; } #dlt_pager .dlt_pagernext{ width: 33%; text-align: right; } #dlt_pager .dlt_pagernext a, #dlt_pager .dlt_pagerprev a{ display: inline-block; width: 80px; width: 70%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } #dlt_pager .pagination{ display: block; overflow: hidden; text-align: center; line-height: 100%; width: 100%; } #dlt_pager .pagination span{ display: inline-block; margin: 0 2px; } #dlt_pager .pagination a{ display: block; padding: 9px; background: @color_gray; border: 1px solid @color_border; text-decoration: none; } #dlt_pager .pagination .current{ border: 1px solid @color_border; } #dlt_pager .pagination .current a{ padding: 8px; background: #fff; border: 1px solid @color_border; } /*--------------------------------------*/ /*side(デフォルト) /*--------------------------------------*/ /* #dlt_archives, #dlt_categories{ border: 1px solid @color_border; width: auto; margin-bottom: 10px; background: @color_gray; text-align: left; border-top-left-radius: 5px; border-top-right-radius: 5px; overflow: hidden; } #dlt_archives p, #dlt_categories p{ margin: 0; font-weight: bold; padding: 7px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); color: #fff; border: 1px solid darken(@color_effect2, 10%); box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset; border-top-left-radius: 5px; border-top-right-radius: 5px; background: @color_effect2; Old browsers background: -moz-linear-gradient(top, lighten(@color_effect2, 10%) 0%, @color_effect2 100%); FF3.6+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,lighten(@color_effect2, 10%)), color-stop(100%,@color_effect2)); Chrome,Safari4+ background: -webkit-linear-gradient(top, lighten(@color_effect2, 10%) 0%,@color_effect2 100%); Chrome10+,Safari5.1+ background: -o-linear-gradient(top, lighten(@color_effect2, 10%) 0%,@color_effect2 100%); Opera 11.10+ background: -ms-linear-gradient(top, lighten(@color_effect2, 10%) 0%,@color_effect2 100%); IE10+ background: linear-gradient(to bottom, lighten(@color_effect2, 10%) 0%,@color_effect2 100%); W3C filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='lighten(@color_effect2, 10%)', endColorstr='@color_effect2',GradientType=0 ); IE6-9 } #dlt_archives ul, #dlt_categories ul{ display: block; border: 1px solid @color_border; margin: 3px; background: #fff; border-radius: 3px; } #dlt_archives ul li, #dlt_categories ul li{ display: block; border-top: 1px dotted @color_border; } #dlt_archives ul li:first-child, #dlt_categories ul li:first-child{ border-top: none !important; } #dlt_archives ul li a, #dlt_categories ul li a{ display: block; padding: 7px 10px; border-top: 1px solid #fff; margin: 0; } #dlt_archives ul li a:hover, #dlt_categories ul li a:hover{ background: @color_bg; } */ /*--------------------------------------*/ /*side(レイアウトパターン1~3) /*--------------------------------------*/ #dlt_sidebar { display: inline-block; padding: 20px 0px; width: 25%; float: right; font-size: 90%; #dlt_archives, #dlt_categories{ width: auto; margin-bottom: 10px; text-align: left; overflow: hidden; font-size: 90%; p { margin: 0; padding: 7px; color: 1px solid @color_main; border-bottom: 1px solid @color_border; } ul{ display: block; background: #fff; li{ display: block; border-top: 1px dotted @color_border; a { display: block; padding: 7px 10px; border-top: 1px solid #fff; margin: 0; } } li:first-child{ border-top: none !important; } li:last-child{ border-bottom: 1px dotted @color_border; } } } } #dlt_sidebar2 { display: inline-block; padding: 20px 0px; width: 25%; float: right; font-size: 90%; #dlt_archives, #dlt_categories{ width: auto; margin-bottom: 10px; background: @color_gray; text-align: left; overflow: hidden; font-size: 90%; p { margin: 0; font-weight: bold; padding: 7px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); color: #fff; border: 1px solid darken(@color_effect2, 10%); background: @color_effect2; /* Old browsers */ } ul{ display: block; border-right: 1px solid @color_border; border-left: 1px solid @color_border; border-bottom: 1px solid @color_border; background: #fff; li{ display: block; border-top: 1px dotted @color_border; a { display: block; padding: 7px 10px; border-top: 1px solid #fff; margin: 0; } a:hover{ background: @color_bg; } } li:first-child{ border-top: none !important; } } } } #dlt_sidebar3 { display: inline-block; padding: 20px 0px; width: 25%; float: right; font-size: 90%; #dlt_archives, #dlt_categories{ width: auto; margin-bottom: 20px; text-align: left; overflow: hidden; font-size: 90%; p { margin: 0; padding: 7px; background-color: @color_effect2; color: #fff; } ul{ display: block; background: #fff; list-style-type: disc !important; li{ display: list-item; list-style-type: disc !important; list-style-position: inside; a { display: block; padding: 7px 10px; border-top: 1px solid #fff; margin: 0; } } li:first-child{ border-top: none !important; } } } } /*--------------------------------------*/ /*slider /*--------------------------------------*/ #top_slider { width: 100%; } .dlt_slider_wrapper { width: 900px; /*要調整*/ margin: 20px auto; } #dlt_slider { list-style-type: none; li { display: flex; justify-content: center; align-items: center; height: 400px; /*要調整*/ img { width: auto; height: auto; max-width: 900px; /*要調整*/ max-height: 400px; /*要調整*/ } } } .bx-wrapper .bx-pager.bx-default-pager a {background: lighten(@color_effect2, 10%) !important;} /*下部ページャーの色味*/ .bx-wrapper .bx-pager.bx-default-pager a.active {background: darken(@color_effect2, 10%) !important;} /*--------------------------------------*/ /*post /*--------------------------------------*/ em{ font-style: italic; font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif; } .dlt_entry_content img, .dlt_entry_content2 img{ max-width: 100%; height: auto; } .dlt_entry_content p, .dlt_entry_content2 p{ margin: 0; } .dlt_entry_footer{ clear: both; background: @color_bg; padding: 5px; text-align: right; } .dlt_entry_content strong, .dlt_entry_content2 strong{ color: inherit; } .dlt_entry_content em, .dlt_entry_content2 em{ color: inherit; font-style: italic; } .dlt_entry_content ul li, .dlt_entry_content2 ul li{ list-style: disc; margin-left: 25px; } .dlt_entry_content ol li, .dlt_entry_content2 ol li{ list-style: decimal; margin-left: 25px; } .dlt_entry_content blockquote, .dlt_entry_content2 blockquote{ background-color: @color_bg; padding: 15px 40px; margin: 15px 0; position: relative; display: block; overflow: hidden; } .dlt_entry_content blockquote:before, .dlt_entry_content2 blockquote:before{ content: "“"; font-size: 600%; line-height: 1em; color: @color_border; position: absolute; left: 5px; top: 5px; } .dlt_entry_content blockquote:after, .dlt_entry_content2 blockquote:after{ content: "”"; font-size: 600%; line-height: 0em; color: @color_border; position: absolute; right: 5px; bottom: 0; } .dlt_entry_content hr, .dlt_entry_content2 hr{ size: 0; color: transparent; border-bottom: 1px dotted @color_border; clear: both; margin: 10px 0; display: block; width: 100%; } .alignleft{ float: left; margin: 0 15px 15px 0; } .aligncenter{ float: none; display: block; margin: 0 auto 15px; clear: both; } .alignright{ float: right; margin: 0 0 15px 15px; } .single .dlt_entry{ margin-bottom: 40px; } /*--------------------------------------*/ /*投稿一覧レイアウト dlt_layout1 /*--------------------------------------*/ .dlt_lay_post{ width: 100%; overflow: hidden; } .dlt_lay_post .dlt_entry{ clear: both; overflow: hidden; width: auto; word-wrap: break-word; margin-bottom: 40px; text-align: left; } .archive .dlt_lay_post .dlt_entry a{ display: inline; overflow: hidden; text-decoration: none; } .dlt_lay_post .dlt_simg{ display: none; } .dlt_lay_post .dlt_entry_header{ overflow: hidden; border-bottom: 1px dotted @color_border; margin-bottom: 7px; } .dlt_lay_post .dlt_entry_header div{ font-size: 80%; padding: 1px 0 0 7px; border-left: 3px solid @color_effect; } .dlt_lay_post .dlt_entry_header h4{ font-size: 110%; display: block; border-left: 3px solid @color_effect; padding: 0 0 1px 7px; margin-bottom: 5px; } .dlt_lay_post .dlt_entry_content{ overflow: hidden; width: 100%; margin-bottom: 40px; } /*--------------------------------------*/ /*投稿一覧レイアウト dlt_layout2 /*--------------------------------------*/ .dlt_lay_post2{ width: 100%; overflow: hidden; margin-bottom: 40px; } .dlt_lay_post2 .dlt_entry{ clear: both; overflow: hidden; word-wrap: break-word; text-align: left; width: auto; } .dlt_lay_post2 .dlt_entry a{ display: block; overflow: hidden; text-decoration: none; } .dlt_lay_post2 .dlt_simg{ display: none; } .dlt_lay_post2 .dlt_entry_header{ display: table; border-bottom: 1px dotted @color_border; width: 100%; } .dlt_lay_post2 .dlt_entry_header div{ display: table-cell; vertical-align: middle; width: 100px; font-size: 90%; padding: 10px 0; } .dlt_lay_post2 .dlt_entry_header h4{ vertical-align: middle; display: table-cell; padding: 10px 0 10px 17px; position: relative; } .dlt_lay_post2 .dlt_entry_header h4:after{ position: absolute; top: 50%; left: 3px; display: block; content: ''; width: 5px; height: 5px; margin-top: -4px; border-top: 2px solid @color_effect; border-right: 2px solid @color_effect; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .dlt_lay_post2 .dlt_entry_content{ display: none; } /*--------------------------------------*/ /*投稿一覧レイアウト dlt_layout3 /*--------------------------------------*/ .dlt_lay_post3{ width: 100%; overflow: hidden; margin-bottom: 40px; } .dlt_lay_post3 .dlt_entry{ overflow: hidden; word-wrap: break-word; text-align: center; width: 25%; float: left; } .dlt_lay_post3 .dlt_entry a{ display: block; overflow: hidden; padding: 10px; border-bottom: 1px solid @color_border; border-right: 1px solid @color_border; text-decoration: none; } .dlt_lay_post3 .dlt_entry:nth-of-type(-n+4) a{ border-top: 1px solid @color_border; } .dlt_lay_post3 .dlt_entry:nth-of-type(4n+1) a{ border-left: 1px solid @color_border; } .dlt_lay_post3 .dlt_simg{ display: table; width: 100%; overflow: hidden; } .dlt_lay_post3 .dlt_simg span{ display: table-cell; vertical-align: middle; overflow: hidden; } .dlt_lay_post3 .dlt_simg img{ display: block; margin: 0 auto; max-height: 160px;/*画像の幅をpxで指定 要変更*/ } .dlt_lay_post3 .dlt_entry_header{ display: none; } .dlt_lay_post3 .dlt_entry_content{ display: none; } .dlt_lay_post3 a:hover .dlt_simg img{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } /*--------------------------------------*/ /*投稿一覧レイアウト dlt_layout4 /*--------------------------------------*/ .dlt_lay_post4{ width: 100%; overflow: hidden; margin-bottom: 40px; } .dlt_lay_post4 .dlt_entry{ overflow: hidden; word-wrap: break-word; text-align: center; width: 25%; float: left; } .dlt_lay_post4 .dlt_entry a{ display: block; overflow: hidden; padding: 10px; border-bottom: 1px solid @color_border; border-right: 1px solid @color_border; text-decoration: none; } .dlt_lay_post4 .dlt_entry:nth-of-type(-n+4) a{ border-top: 1px solid @color_border; } .dlt_lay_post4 .dlt_entry:nth-of-type(4n+1) a{ border-left: 1px solid @color_border; } .dlt_lay_post4 .dlt_simg{ display: table; width: 100%; overflow: hidden; } .dlt_lay_post4 .dlt_simg span{ display: table-cell; vertical-align: middle; overflow: hidden; } .dlt_lay_post4 .dlt_simg img{ display: block; margin: 0 auto; max-height: 160px;/*画像の幅をpxで指定 要変更*/ } .dlt_lay_post4 .dlt_entry_header div{ font-size: 90%; padding-top: 5px; } .dlt_lay_post4 .dlt_entry_content{ display: none; } .dlt_lay_post4 a:hover{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } /*--------------------------------------*/ /*投稿一覧レイアウト dlt_layout5 /*--------------------------------------*/ .dlt_lay_post5{ text-align: left; margin-top: 30px; } .dlt_lay_post5 .dlt_entry{ clear: both; overflow: hidden; padding-bottom: 15px; border-bottom: 1px dotted @color_border; margin-bottom: 15px; } .dlt_lay_post5 .dlt_entry_header, .dlt_lay_post5 .dlt_entry_content{ margin-left: 190px; margin-top: 0 !important; } .dlt_lay_post5 .dlt_simg{ display: table; width: 150px; height: 180px; background: #fff; padding: 8px; border: 1px solid @color_border; overflow: hidden; float: left; } .dlt_lay_post5 .dlt_simg span{ display: table-cell; width: 150px; height: 180px; vertical-align: middle; } .dlt_lay_post5 .dlt_simg img{ display: block; max-width: 150px; max-height: 180px; width: auto; height: auto; margin: 0 auto; } /*--------------------------------------*/ /*ギャラリーレイアウト (共通) /*--------------------------------------*/ .dlt_archive_gallery:after { display: block; content: ''; clear: both; } /*--------------------------------------*/ /*ギャラリーレイアウト1 (1列) /*--------------------------------------*/ .dlt_lay_gallery1 { width: 100%; overflow: hidden; .dlt_entry { position: relative; margin: 0 0 30px; h4 { margin: 0 0 15px; padding: 0 0 5px; font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; } a:hover { opacity: 0.7; } .dlt_lay_gallery_inner { &:after { display: block; content: ''; clear: both; } } .dlt_lay_gallery_img { float: left; display: inline-block; width: 40%; text-align: center; border: 1px solid #ccc; box-sizing: border-box; transition: .5s; img { max-width: 100%; max-height: 270px; } &:hover { opacity: 0.7; } } .dlt_entry_header { position: relative; float: right; padding: 0 0 40px 10px; width: 60%; text-align: left; box-sizing: border-box; .dlt_lay_gallery3_com { margin: 0 0 20px; font-size: 90%; word-wrap: break-word; } } a.dlt_more_button { position: absolute; bottom: 0; right: 10px; padding: 5px 15px; color: #fff; font-size: 90%; background: @color_effect2; } } .dlt_entry:after { display: block; content: ''; clear: both; } } /*--------------------------------------*/ /*ギャラリーレイアウト2 (2列) /*--------------------------------------*/ .dlt_lay_gallery2 { .dlt_entry:nth-child(2n + 1) { margin-right: 10px; } .dlt_entry { display: inline-block; margin-bottom: 10px; width: calc(~"(100% - 20px) / 2"); height: 300px; box-sizing: border-box; text-align: center; word-wrap: break-word; overflow: hidden; .dlt_lay_gallery_img { position: relative; display: block; height: 100%; transition: .5s; span { display: inline-block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } &:hover { opacity: 0.7; } } } } /*--------------------------------------*/ /*ギャラリーレイアウト3 (3列) /*--------------------------------------*/ .dlt_lay_gallery3 { .dlt_entry:nth-child(3n + 2) { margin-left: 10px; margin-right: 10px; } .dlt_entry { display: inline-block; float: left; margin-bottom: 10px; width: calc(~"(100% - 20px) / 3"); height: 250px; text-align: center; word-wrap: break-word; overflow: hidden; box-sizing: border-box; .dlt_lay_gallery_img { position: relative; display: block; margin: 0 0 10px; height: 200px; transition: .5s; span { display: inline-block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } &:hover { opacity: 0.7; } } } } /*--------------------------------------*/ /*ギャラリーレイアウト4(4列) /*--------------------------------------*/ .dlt_lay_gallery4 { .dlt_entry{ position: relative; float: left; margin: 10px; width: 200px; height: 200px; text-align: center; word-wrap: break-word; overflow: hidden; } .dlt_entry a { display: block; overflow: hidden; font-weight: normal; text-decoration: none; .dlt_entry_header { height: 0; transition: height 0.3s ease-out 0.1s; h4 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } &:hover .dlt_entry_header {height: 25px;} } .dlt_lay_gallery_img{ max-width: 200px; width: 200px; height: 200px; overflow: hidden; background: #000; text-align: center; display: table-cell; vertical-align: middle; box-sizing: border-box; } .dlt_lay_gallery_img img { max-width: 100%; max-height: 100%; height: auto; } .dlt_entry_header { position: absolute; bottom: 0; width: 100%; color: #444; background: rgba(255, 255, 255, 0.5); } a .dlt_lay_gallery_img img { transition: opacity 0.3s ease-out 0.1s; } a:hover .dlt_lay_gallery_img img { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } } /*--------------------------------------*/ /*ギャラリーレイアウト5(5列・画像のみ・シングルページ未使用) /*--------------------------------------*/ .dlt_lay_gallery5 { .dlt_lay_gallery_single { .dlt_td1 { float: none; width: 100%; .dlt_thumimg { width: 100%; display: flex; flex-flow: row wrap; div { margin: 0 1% 10px 0 ; padding: 2px; width: 200px; height: 200px; background: #fff; border: 1px solid #ccc; box-sizing: border-box; &:nth-child(5n) {margin-right: 0;} a {transition: .7s} a:hover {opacity: 0.5;} } } } } } .dlt_lay_gallery_single >.dlt_inner { position: relative; .dlt_pagelink { position: absolute; bottom: 0; right: 0; border-radius: 3px; padding: 2px 4px; background: @color_bg; border: 1px solid @color_border; } } /*--------------------------------------*/ /*ギャラリーレイアウト(1列・詳細レイアウト・シングルページ未使用) /*--------------------------------------*/ .dlt_lay_gallery6 { .dlt_lay_gallery_single { margin-top: 20px; .dlt_lay_gallery_table { width: 100%; } .dlt_entry_header { border-left: 10px solid @color_effect2; border-bottom: 1px solid darken(@color_effect2, 10%); font-size: 120%; padding-left: 10px; margin-bottom: 15px; } } .dlt_td2 .inner {word-wrap: break-word;} } .dlt_lay_gallery_table { border-spacing: 0; border-collapse: collapse; th,td { border: 1px solid darken(@color_effect2, 10%); width: 50%; text-align: center; vertical-align: middle; box-sizing: border-box; padding: 10px; } th { background: @color_effect2; letter-spacing: 1px; color: #fff; } } /*--------------------------------------*/ /* 商品ギャラリーレイアウト /*--------------------------------------*/ .dlt_product { .dlt_entry:nth-child(3n + 2) { margin-left: 10px; margin-right: 10px; } .dlt_entry { display: inline-block; float: left; margin-bottom: 10px; width: calc(~"(100% - 20px) / 3"); height: 300px; text-align: center; word-wrap: break-word; overflow: hidden; box-sizing: border-box; .dlt_lay_gallery_img { position: relative; display: block; margin: 0 0 10px; height: 200px; span { display: inline-block; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; } } .dlt_more_button { bottom: 0; right: 10px; padding: 5px 15px; color: #fff; font-size: 90%; background: #212121; margin-top: 5px; display: inline-block; transition: .5s; &:hover { opacity: 0.7; } } } } /*-------ギャラリー シングル-------*/ .dlt_lay_gallery_single { width: 100%; overflow: hidden; } .dlt_lay_gallery_single .dlt_entry_header h4{ padding: 10px 0; border-bottom: 1px dotted @color_border; margin-bottom: 10px; font-size: 120%; text-align: left; } .dlt_lay_gallery_single .dlt_mainimg{ width: 300px !important;/*任意*/ height: 300px !important;/*任意*/ display: table !important; table-layout: fixed; margin: 0 0 10px !important; background: #EFEFEF; } .dlt_lay_gallery_single .dlt_singleimg{/*画像が1枚の時*/ height: auto !important; } .dlt_lay_gallery_single .dlt_mainimg a{ display: table-cell !important; width: 100%; height: 100%; vertical-align: middle; text-align: center; } .dlt_lay_gallery_single .dlt_singleimg a{/*画像が1枚の時*/ height: auto !important; vertical-align: top !important; } .dlt_lay_gallery_single .dlt_mainimg a img{ display: block; width: auto !important; height: auto !important; margin: 0 auto !important; max-width: 100% !important; max-height: 300px !important;/*任意 pxで指定*/ } .dlt_lay_gallery_single .dlt_thumimg{ overflow: hidden; margin-bottom: 15px; width: 300px;/*上記.dlt_mainimgのwidth値*/ } .dlt_lay_gallery_single .dlt_thumimg div{ width: 93px;/*上記.dlt_thumimgのwidth値 - (サムネイル列数-1)×marginRight*/ height: 93px; display: block; float: left; margin: 0 10px 10px 0; } .dlt_lay_gallery_single .dlt_thumimg div:nth-of-type(3n){/*サムネイル列数*/ margin-right: 0; } .dlt_lay_gallery_single .dlt_thumimg div.off{ display: none !important; } .dlt_lay_gallery_single .dlt_thumimg div a{ display: block; width: 100%; height: 100%; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover !important; } .dlt_lay_gallery_single .dlt_thumimg div img{ display: block; display: none; } .dlt_lay_gallery_single .dlt_thumimg div a span{ display: none; } .dlt_lay_gallery_single .dlt_thumimg hr{ display: none !important; } .dlt_lay_gallery_single .dlt_entry_content{ text-align: left; margin-bottom: 40px; clear: both; } .dlt_lay_gallery_single .dlt_caption{ clear: both; height: 2em; } .dlt_lay_gallery_single .dlt_fig dl{ display: table; width: 100%; } .dlt_lay_gallery_single .dlt_fig dt{ display: table-cell; border-bottom: none; vertical-align: middle; width: 90px; } .dlt_lay_gallery_single .dlt_fig dt:after{ margin-top: -3px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .dlt_lay_gallery_single .dlt_fig dd{ display: table-cell; vertical-align: middle; margin-top: 0 !important; } .dlt_lay_gallery_single .dlt_lay_gallery .dlt_entry { margin-bottom: 0; } .dlt_lay_gallery_table > .dlt_inner:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .dlt_lay_gallery_table > .dlt_inner { zoom: 1 !important; } .dlt_lay_gallery_single .dlt_td1 { display: block; float: left; } .dlt_lay_gallery_single .dlt_td2 { display: block; float: right; width: calc(~"100% - 320px"); .com1 { margin-bottom: 30px; .inner {word-wrap: break-word;} } } .dlt_lay_gallery_single .dlt_td2.fulltable { float: none; width: 100%; } .dlt_lay_gallery_table {width: 100%;} /*-------ギャラリー シングル 2-------*/ .dlt_lay_gallery_single2 { .dlt_entry_header { border-bottom: 1px solid @color_main; border-left: 10px solid @color_main; font-size: 120%; padding-left: 10px; margin-bottom: 15px; } .dlt_inner, .dlt_td1, .dlt_td2 { display: block !important; float: none !important; clear: both !important; width: 100% !important; margin-bottom: 0; word-wrap: break-word; } .dlt_td1 { .dlt_mainimg { margin-bottom: 20px; background: #fff; border: 1px solid @color_border; /*確認用*/ box-sizing: border-box; /*確認用*/ text-align: center; height: 400px; /*任意調整*/ overflow: hidden; img { } } .dlt_thumimg { overflow: hidden; div { display: block; float: left; margin-right: 20px; width: 85px; /*任意調整*/ height: 85px; /*任意調整*/ &:nth-child(8n) {margin-right: 0;} /*8列の場合*/ &.off {display: none !important;} a { display: block; width: 100%; height: 100%; overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover !important; } img { display: block; display: none; } } } } .dlt_td2 { margin: 20px 0; .com1 { margin: 20px 0; } } .dlt_lay_gallery_table {margin: auto;} } /*-------Before After 機能 ギャラリー シングル-------*/ .dlt_lay_gallery_single3 { width: 100%; overflow: hidden; .dlt_inner, .dlt_td1, .dlt_td2 { display: block !important; float: none !important; clear: both !important; width: 100% !important; margin-bottom: 0; } .dlt_mainimg {display: none;} .dlt_thumimg { overflow: hidden; margin-bottom: 15px; } .dlt_thumimg div{ width: 50%; height: 230px;/*任意*/ display: table; table-layout: fixed; } .dlt_thumimg div.off {display: none !important;} .dlt_thumimg div:nth-of-type(odd) { float: left; } .dlt_thumimg div:nth-of-type(even) { float: right; position: relative; } .dlt_thumimg div:nth-of-type(even):after { position: absolute; top: 45%; left: -19px;/*任意*/ display: block; content: ''; width: 20px; height: 20px; margin-top: -10px; border-top: 5px solid @color_effect2; border-right: 5px solid @color_effect2; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .dlt_thumimg div a { display: table-cell !important; vertical-align: middle; width: 100%; height: 100%; text-align: center; background: #fff; background: none !important; } .dlt_thumimg div img { display: block; max-width: 75% !important; max-height: 200px !important;/*任意 pxで指定*/ width: auto !important; height: auto !important; margin: 0 auto !important; } .dlt_thumimg div span {display: none;} .dlt_thumimg hr:nth-of-type(even) { display: block; width: 100%; height: 0; size: 0; border: none; border-bottom: none;/*適宜*/ clear: both; } .dlt_thumimg hr:nth-of-type(odd) {display: none !important;} .dlt_entry_content{ text-align: left; margin-bottom: 40px; clear: both; } #before{ float: left; display: block; width: 50%; background: #ddd; text-align: center; } #after{ float: right; display: block; width: 50%; background: #ccc; text-align: center; } .dlt_caption{ clear: both; height: 2em; } .dlt_td2 { margin: 20px 0; .com1 { margin: 20px 0; .inner { width: 100%; word-wrap: break-word; } } } .dlt_lay_gallery_table {margin: auto;} } /*-------Before After 機能 ギャラリー シングル 2-------*/ .dlt_lay_gallery_single4 { width: 100%; overflow: hidden; h3 { margin: 20px 0; border-bottom: 1px solid @color_main; border-left: 10px solid @color_main; font-size: 120%; padding: 0 0 0 10px; background: none; color: #444; } .dlt_inner, .dlt_td1, .dlt_td2 { display: block !important; float: none !important; clear: both !important; width: 100% !important; margin-bottom: 0; } .dlt_mainimg {display: none;} .dlt_thumimg { overflow: hidden; margin-bottom: 15px; } .dlt_thumimg div{ height: 290px;/*任意*/ } .dlt_thumimg div.off {display: none !important;} .dlt_thumimg div:nth-of-type(even) { position: relative; border-bottom: 1px dashed @color_border; margin-bottom: 50px; } .dlt_thumimg div:nth-of-type(even):after { position: absolute; top: -20%;/*任意*/ left: 48.5%;/*任意*/ display: block; content: ''; width: 20px; height: 20px; margin-top: -10px; border-top: 5px solid @color_effect2; border-right: 5px solid @color_effect2; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .dlt_thumimg div:last-child { margin-bottom: 0; } .dlt_thumimg div a { vertical-align: middle; width: 100%; height: 100%; text-align: center; background: #fff; background: none !important; } .dlt_thumimg div img { display: block; max-width: 75% !important; max-height: 200px !important;/*任意 pxで指定*/ width: auto !important; height: auto !important; margin: 0 auto !important; } .dlt_thumimg div span {display: none;} .dlt_thumimg hr:nth-of-type(even) { display: block; width: 100%; height: 0; size: 0; border: none; border-bottom: none;/*適宜*/ clear: both; } .dlt_thumimg hr:nth-of-type(odd) {display: none !important;} .dlt_entry_content{ text-align: left; margin-bottom: 40px; clear: both; } #before{ float: left; display: block; width: 50%; background: #ddd; text-align: center; } #after{ float: right; display: block; width: 50%; background: #ccc; text-align: center; } .dlt_caption{ clear: both; height: 2em; } .dlt_td2 { margin: 20px 0; .com1 { margin: 20px 0; .inner { width: 100%; word-wrap: break-word; } } } .dlt_lay_gallery_table {margin: auto;} } /*-------Slider ギャラリー シングル-------*/ .dlt_lay_gallery_single5 { margin-bottom: 20px; h3 { margin: 20px 0; border-bottom: 1px solid @color_main; border-left: 10px solid @color_main; font-size: 120%; padding-left: 10px; } .bx-wrapper { border: 1px solid #ccc; box-sizing: border-box; #dlt_slider { li { display: flex; justify-content: center; align-items: center; height: 400px; /*適宜*/ img { margin: auto; } } } } .dlt_td2 { display: block; .com1 { margin: 20px 0; word-wrap: break-word; } .dlt_lay_gallery_table {margin: auto;} } } /*--------------------------------------*/ /*メニューレイアウト /*--------------------------------------*/ .dlt_lay_menu1{ text-align: left; overflow: hidden; clear: both; } .dlt_lay_menu1 .dlt_entry{ margin-bottom: 20px; } .dlt_lay_menu1 .dlt_entry:last-child{ margin-bottom: 40px; } .dlt_lay_menu1 .menu_img{ margin-bottom: 5px; float: left; width: 35%; } .dlt_lay_menu1 .menu_img img{ max-width: 100%; max-height: 150px;/*任意*/ width: auto !important; height: auto !important; display: block; margin: 0 auto; } .dlt_lay_menu1 .dlt_entry dl{ margin: 0; display: block; width: 100%; } .dlt_menu_title{/*商品名*/ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; } .dlt_lay_menu1 .dlt_contents{ width: 100%; display: flex; } .dlt_lay_menu1 .dlt_menu_cap{/*商品説明*/ font-size: 90%; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } .dlt_lay_menu1 .dlt_entry dd{ display: block; margin: 0; vertical-align: middle; width: auto; } .dlt_lay_menu1 .dlt_entry dt{ margin: 0; display: block; vertical-align: middle; margin-bottom: 10px; } .dlt_lay_menu1 .dlt_entry dt ul{ margin: 0; display: table; width: 100%; border-bottom: 1px dashed #6d6057; } .dlt_lay_menu1 .dlt_entry dt li{ padding: 8px 0; display: table-cell; } .dlt_lay_menu1 li.dlt_menu_price{/*商品価格*/ text-align: right; word-break: keep-all; } dd.dlt_menu_bunrui div:nth-child(n+2){ } /*--------------------------------------*/ /*メニューレイアウト2(カラムレイアウト) /*--------------------------------------*/ .dlt_lay_menu2 .dlt_entry{ margin-bottom: 30px; float: left; width: 47.7%;/*任意*/ margin-left: 1.15%; margin-right: 1.15%; } .dlt_lay_menu2 .menu_img{ width: 100%; height: auto; background: #fff; margin-bottom: 25px; } .dlt_lay_menu2 .menu_img img{ display: block; width: auto; height: auto; max-width: 100%; max-height: 200px;/*任意*/ margin: 0 auto 5px; } .dlt_lay_menu2 .dlt_menu_title{/*商品名*/ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; } .dlt_lay_menu2 .dlt_menu_cap { padding: 0 0 10px; margin: 0 0 10px; font-size: 90%; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } .dlt_lay_menu2 dt ul{ display: table !important; margin-bottom: 0 !important; padding-bottom: 0 !important; width: 100%; border-bottom: 1px dashed #6d6057; line-height: 40px; } .dlt_lay_menu2 dt ul:nth-last-of-type(1){ margin-bottom: 10px !important; } .dlt_lay_menu2 dt li{ display: table-cell !important; float: none !important; width: auto !important; margin: 0 !important; } .dlt_lay_menu2 .dlt_menu_price{ text-align: right; } .dlt_lay_menu2 .dlt_separate { display: block; } .dlt_lay_menu2 .dlt_separate:after { display: block; content: ''; clear: both; } /*--------------------------------------*/ /*メニューレイアウト3(テーブルレイアウト) /*--------------------------------------*/ .dlt_lay_menu3 .dlt_entry{ margin-bottom: 30px; } .dlt_lay_menu3 .dlt_entry dl{ display: table; border-top: 1px solid @color_border; border-left: 1px solid @color_border; border-right: 1px solid @color_border; width: 100%; } .dlt_lay_menu3 .menu_img{ width: 100%; height: auto; background: #fff; margin-bottom: 25px; } .dlt_lay_menu3 .menu_img img{ display: block; width: auto; height: auto; max-width: 100%; max-height: 500px;/*任意*/ } .dlt_lay_menu3 .dlt_entry dl:last-of-type{ border-bottom: 1px solid @color_border; margin-bottom: 10px; } .dlt_lay_menu3 .dlt_entry dt{ display: table-cell; border-right: 1px solid @color_border; padding: 8px; width: 150px;/*任意*/ background: @color_bg; } .dlt_lay_menu3 .dlt_entry dd{ display: table-cell; padding: 8px; text-align: right; } .dlt_lay_menu3 .dlt_menu_cap { font-size: 90%; opacity: 0.7; } /*--------------------------------------*/ /*スタッフレイアウト1(画像のみレイアウト) /*--------------------------------------*/ .dlt_lay_staff1 { .dlt_entry{ position: relative; float: left; margin: 20px; width: 280px; height: 280px; text-align: center; word-wrap: break-word; overflow: hidden; } .dlt_entry a { display: block; overflow: hidden; font-weight: normal; text-decoration: none; .dlt_entry_header { height: 0; transition: height 0.3s ease-out 0.1s; h4 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .dlt_staff_yomi{ font-size: 80%; } } &:hover .dlt_entry_header {height: 40px;} } .dlt_lay_staff_img{ max-width: 280px; width: 280px; height: 280px; overflow: hidden; background: #000; text-align: center; display: table-cell; vertical-align: middle; box-sizing: border-box; } .dlt_lay_staff_img img { max-width: 100%; max-height: 100%; height: auto; width: auto !important; } .dlt_entry_header { position: absolute; bottom: 0; width: 100%; color: #444; background: rgba(255, 255, 255, 0.5); } a .dlt_lay_staff_img img { transition: opacity 0.3s ease-out 0.1s; } a:hover .dlt_lay_staff_img img { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } } /*--------------------------------------*/ /*スタッフレイアウト2(シングル無し) /*--------------------------------------*/ .dlt_lay_staff2{ .dlt_entry{ margin-bottom: 30px; overflow: hidden; } .dlt_entry_header{ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; .dlt_staff_title{ display: inline; } .dlt_staff_yomi{ display: inline; } .dlt_staff_job{ display: inline; font-size: 80%; } } .dlt_lay_staff_content{ overflow: hidden; width: 100%; } .dlt_lay_staff_img{ float: left; width: 35%; img { max-width: 96%; max-height: 300px; width: auto !important; height: auto !important; display: block; margin: 0 auto; } } .dlt_staff_infofree{ float: right; width: 63%; margin-bottom: 15px; img { display:block; max-width:100%; height:auto; } } .dlt_fig{ float: right; width: 63%; border-left: 1px solid @color_border; border-right: 1px solid @color_border; dl{ display: table; width: 100%; } dt{ display: table-cell; border-bottom: none; border-right: 1px solid @color_border; width: 25%; vertical-align: middle; } dd{ display: table-cell; } } } /*--------------------------------------*/ /*スタッフレイアウト3(シングル無し(2列レイアウト)) /*--------------------------------------*/ .dlt_lay_staff3 { .dlt_entry{ margin-bottom: 30px; float: left; width: 47.7%;/*任意*/ margin-left: 1.15%; margin-right: 1.15%; } .dlt_entry_header{ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; .dlt_staff_title{ display: inline; } .dlt_staff_yomi{ display: inline; } .dlt_staff_job{ display: block; font-size: 80%; } } .dlt_lay_staff_img{ width: 100%; height: auto; background: #fff; margin-bottom: 10px; } .dlt_lay_staff_img img{ display: block; width: auto; height: auto; max-width: 100%; max-height: 200px;/*任意*/ margin: 0 auto; } .dlt_staff_infofree{ margin-bottom: 10px; img { display:block; max-width:100%; height:auto; } } .dlt_separate { display: block; } .dlt_separate:after { display: block; content: ''; clear: both; } .dlt_fig{ border-left: 1px solid @color_border; border-right: 1px solid @color_border; } } /*-------スタッフ シングル-------*/ .dlt_lay_staff_single{ .dlt_entry{ margin-bottom: 30px; overflow: hidden; } .dlt_entry_header{ font-weight: bold; font-size: 140%; width: 100%; height: auto; border-bottom: 4px solid @color_h4_border; margin-bottom: 15px; padding-bottom: 5px; .dlt_staff_title{ display: inline; } .dlt_staff_yomi{ display: inline; } .dlt_staff_job{ display: inline; font-size: 80%; } } .dlt_lay_staff_content{ overflow: hidden; width: 100%; } .dlt_lay_staff_img{ float: left; width: 35%; img { max-width: 96%; max-height: 300px; width: auto !important; height: auto !important; display: block; margin: 0 auto; } } .dlt_staff_infofree{ float: right; width: 63%; margin-bottom: 15px; img { display:block; max-width:100%; height:auto; } } .dlt_fig{ float: right; width: 63%; border-left: 1px solid @color_border; border-right: 1px solid @color_border; dl{ display: table; width: 100%; } dt{ display: table-cell; border-bottom: none; border-right: 1px solid @color_border; width: 25%; vertical-align: middle; } dd{ display: table-cell; } } } /*-------紐づけ レイアウト-------*/ .dlt_lay_list{ .dlt_entry{ position: relative; float: left; margin: 20px; width: 155px; height: 155px; text-align: center; word-wrap: break-word; overflow: hidden; } .dlt_entry a { display: block; overflow: hidden; font-weight: normal; text-decoration: none; .dlt_entry_header { height: 0; transition: height 0.3s ease-out 0.1s; h4 { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } } &:hover .dlt_entry_header {height: 25px;} } .dlt_list_img{ max-width: 155px; width: 155px; height: 155px; overflow: hidden; background: #000; text-align: center; display: table-cell; vertical-align: middle; box-sizing: border-box; } .dlt_list_img img { max-width: 100%; max-height: 100%; height: auto; width: auto !important; } .dlt_entry_header { position: absolute; bottom: 0; width: 100%; color: #444; background: rgba(255, 255, 255, 0.5); } a .dlt_list_img img { transition: opacity 0.3s ease-out 0.1s; } a:hover .dlt_list_img img { filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } } /*--------------------------------------*/ /*お客様の声レイアウト /*--------------------------------------*/ .dlt_lay_voice .dlt_entry{ clear: both; overflow: hidden; width: auto; word-wrap: break-word; margin-bottom: 40px; text-align: left; } .dlt_lay_voice .dlt_entry_header{ overflow: hidden; border-bottom: 1px dotted @color_border; margin-bottom: 7px; } .dlt_lay_voice .dlt_entry_header h4{ font-size: 110%; display: block; border-left: 3px solid @color_effect; padding: 0 0 1px 7px; margin-bottom: 5px; } .dlt_lay_voice .dlt_entry_content{ overflow: hidden; width: 100%; margin-bottom: 40px; } /*--------------------------------------*/ /*Q&Aレイアウト /*--------------------------------------*/ .dlt_lay_questions{ margin-bottom: 40px; text-align: left; } .dlt_lay_questions ul{ display: block; } .dlt_lay_questions li{ display: block; border-bottom: 1px dotted @color_border; } .dlt_lay_questions li a{ display: block; padding: 5px 0 5px 18px; position: relative; } .dlt_lay_questions li a:after{ position: absolute; top: 50%; left: 3px; display: block; content: ''; width: 5px; height: 5px; margin-top: -4px; border-top: 2px solid @color_effect; border-right: 2px solid @color_effect; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .dlt_lay_qa .dlt_entry{ clear: both; overflow: hidden; width: auto; word-wrap: break-word; margin-bottom: 20px; text-align: left; } .dlt_lay_qa .dlt_entry_header{ overflow: hidden; border-bottom: 1px dotted @color_border; margin-bottom: 7px; } .dlt_lay_qa .dlt_entry_header h4{ font-size: 110%; display: block; border-left: 3px solid @color_effect; padding: 0 0 1px 7px; margin-bottom: 5px; } .dlt_lay_qa .dlt_entry_content{ overflow: hidden; width: 100%; } .dlt_lay_qa .dlt_qa1{ overflow: hidden; width: auto; margin-bottom: 15px; } .dlt_lay_qa .dlt_qa2{ overflow: hidden; width: auto; background: @color_bg; border: 1px solid @color_border; border-radius: 3px; padding: 7px; } /*--------------------------------------*/ /*クーポンレイアウト /*--------------------------------------*/ .dlt_lay_coupon .dlt_entry{ width: auto; border: 1px solid @color_border; padding: 1px; margin-bottom: 20px; clear: both; } .dlt_lay_coupon .dlt_inner{ display: table; width: 100%; margin-bottom: 0; } .dlt_lay_coupon .dlt_td1{ display: table-cell; text-align: center; width: 30px; vertical-align: middle; padding: 0; background: @color_effect2; color: #fff; } .dlt_lay_coupon .dlt_td1 span{ display: block; } .dlt_lay_coupon .dlt_td2{ display: table-cell; vertical-align: middle; padding: 15px 15px; } .dlt_lay_coupon .dlt_entry_header{ display: table; margin-bottom: 10px; width: 100%; border-bottom: 1px dotted @color_border; padding-bottom: 10px; } .dlt_lay_coupon .dlt_entry_header h4, .dlt_lay_coupon .dlt_entry_header p{ display: table-cell; } .dlt_lay_coupon .dlt_entry_header p{ text-align: right; } .dlt_lay_coupon .dlt_entry_header .dlt_not{ text-decoration: line-through; } .dlt_lay_coupon .dlt_entry_header .dlt_price{ color: @color_effect; } .dlt_lay_coupon .dlt_td2 .dlt_txt{ } .dlt_lay_coupon .dlt_td2 dl.dlt_txt{ display: block; } .dlt_lay_coupon .dlt_td2 dl.dlt_txt dt, .dlt_lay_coupon .dlt_td2 dl.dlt_txt dd{ display: inline; } .dlt_lay_coupon .dlt_td2 dl.dlt_txt dt{ color: @color_effect; } .dlt_lay_coupon .dlt_td2 dl.dlt_txt dd{ padding-right: 10px; } /*--------------------------------------*/ /*店舗レイアウト /*--------------------------------------*/ .dlt_lay_shop{ margin-bottom: 40px; overflow: hidden; } .dlt_lay_shop .dlt_entry{ width: 50%; max-width: 600px; float: left; text-align: center; } .dlt_lay_shop .dlt_entry a{ display: block; padding: 10px 15px; text-decoration: none !important; } .dlt_lay_shop .dlt_entry a:hover{ filter:alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } .dlt_lay_shop .dlt_simg{ width: 100%; height: 100px; overflow: hidden; margin: 0 auto 5px; } .dlt_lay_shop .dlt_simg img{ display: block; } .dlt_lay_shop .dlt_entry_content{ text-align: left; position: relative; } .dlt_lay_shop .dlt_entry_content h4{ margin-bottom: 5px !important; padding: 5px 0; border-bottom: 1px dotted @color_border; font-size: 120%; font-weight: bold; padding-right: 90px; } .dlt_lay_shop .dlt_entry_content ul{ display: table; width: 100%; } .dlt_lay_shop .dlt_entry_content li{ display: table-cell; } .dlt_lay_shop .dlt_entry_content li:first-child{ min-width: 70px; width: 20%; } .dlt_lay_shop .dlt_entry_content .dlt_btn{ position: absolute; top: 1px; right: 0; } #gmap{ clear: both; width: 100%; margin-bottom: 30px; } #smap{ } .dlt_lay_shop .dlt_entry_content ul li{ list-style: none; margin-left: 0; } /*--------------------------------------*/ /*ムービーレイアウト /*--------------------------------------*/ /*--1列--*/ .dlt_lay_movie_1 .dlt_entry{ margin-bottom: 40px; } .dlt_lay_movie_1 .dlt_entry_content{ width: 100%; } .dlt_lay_movie_1 .dlt_movie{ margin-bottom: 10px; } .dlt_lay_movie_1 .dlt_entry_content iframe{ display: block; width: 100%; height: auto; } .dlt_lay_movie_1 hr{ display: none; } /*--2列--*/ .dlt_lay_movie_2{ overflow: hidden; } .dlt_lay_movie_2 .dlt_entry{ width: 48%; float: left; margin: 0 1% 40px 1%; } .dlt_lay_movie_2 .dlt_entry_content{ width: 100%; } /* .dlt_lay_movie_2 .dlt_movie{ margin-bottom: 10px; } */ .dlt_lay_movie_2 .dlt_entry_content iframe{ display: block; width: 100%; height: auto; } .dlt_lay_movie_2 hr{ display: none; } .dlt_lay_movie_2 hr:nth-of-type(2n){ display: block; clear: both; width: 100%; height: 0; size: 0; border: none; background: none; } /*--3列--*/ .dlt_lay_movie_3{ overflow: hidden; } .dlt_lay_movie_3 .dlt_entry{ width: 31.3%; float: left; margin: 0 1% 40px 1%; } .dlt_lay_movie_3 .dlt_entry_content{ width: 100%; } /* .dlt_lay_movie_3 .dlt_movie{ margin-bottom: 10px; } */ .dlt_lay_movie_3 .dlt_entry_content iframe{ display: block; width: 100%; height: auto; } .dlt_lay_movie_3 hr{ display: none; } .dlt_lay_movie_3 hr:nth-of-type(3n){ display: block; clear: both; width: 100%; height: 0; size: 0; border: none; background: none; } /*--4列--*/ .dlt_lay_movie_4{ overflow: hidden; } .dlt_lay_movie_4 .dlt_entry{ width: 23%; float: left; margin: 0 1% 40px 1%; } .dlt_lay_movie_4 .dlt_entry_content{ width: 100%; } /* .dlt_lay_movie_4 .dlt_movie{ margin-bottom: 10px; } */ .dlt_lay_movie_4 .dlt_entry_content iframe{ display: block; width: 100%; height: auto; } .dlt_lay_movie_4 hr{ display: none; } .dlt_lay_movie_4 hr:nth-of-type(4n){ display: block; clear: both; width: 100%; height: 0; size: 0; border: none; background: none; } /*--------------------------------------*/ /*リンクレイアウト /*--------------------------------------*/ .dlt_lay_link{ text-align: left; margin-bottom: 40px; overflow: hidden; clear: both; } .dlt_lay_link .dlt_entry{ } .dlt_lay_link .dlt_entry:nth-child(odd){ } .dlt_lay_link .dlt_entry:last-child{ margin-bottom: 20px; } .dlt_lay_link .dlt_entry_header h4{ font-size: 110%; display: block; border-left: 3px solid @color_effect; padding: 0 0 1px 7px; margin-bottom: 5px; } .dlt_lay_link .dlt_entry dl{ margin: 0; display: table; width: 100%; table-layout: fixed; } .dlt_lay_link .dlt_entry dt{ display: table-cell; margin: 0; vertical-align: middle; padding: 8px; width: 150px;/*任意*/ padding: 10px 10px 10px 0; } .dlt_lay_link .dlt_entry dt img{ display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; vertical-align: middle; } .dlt_lay_link .dlt_entry dd{ text-align: left; margin: 0; display: table-cell; vertical-align: middle; padding: 10px 0; } /*--------------------------------------*/ /*投稿関連付け(ヘアカタ-スタッフ) /*--------------------------------------*/ .dlt_haircata_to_staff dd{ display: block !important; border-bottom: 1px dotted @color_border; } .dlt_haircata_to_staff dd:last-child{ border-bottom: none; } .dlt_haircata_to_staff dd a{ display: block; } .dlt_haircata_to_staff dd a:hover img{ font-size: 90%; filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; } .dlt_haircata_to_staff dd>div{ display: table; } .dlt_haircata_to_staff dd div div{ display: table-cell; vertical-align: middle; width: 80px; } .dlt_haircata_to_staff dd h5{ display: table-cell; vertical-align: middle; padding-left: 10px; font-size: 100%; font-weight: normal; } .dlt_haircata_to_staff dd div div img{ display: block; width: 80px; height: auto; } /*--------------------------------------*/ /*タクソノミーナビ /*--------------------------------------*/ #dlt_snav{ display: table; margin-bottom: 20px; width: 100%; } #dlt_snav ul{ display: table-row; width: 100%; } #dlt_snav li{ display: table-cell; vertical-align: middle; text-align: center; padding-bottom: 8px; width: auto; } #dlt_snav li a{ display: block; border-right: 1px solid @color_border; } #dlt_snav li:nth-child(5n+1) a{ border-left: 1px solid @color_border; } /*--------------------------------------*/ /* /*--------------------------------------*/ .dlt_inner{ width: 100%; display: table; margin-bottom: 30px; text-align: left; } .dlt_td1{ display: table-cell; padding-right: 20px; vertical-align: top; } .dlt_td2{ display: table-cell; vertical-align: top; } /*--------------------------------------*/ .dlt_fig{ border-top: 1px solid @color_border; } .dlt_fig dl{ display: block; border-bottom: 1px solid @color_border; margin: 0; text-align: left; } .dlt_fig dt{ display: block; border-bottom: 1px dotted @color_border; background: @color_bg; padding: 7px 7px 7px 22px; margin: 0; position:relative; } .dlt_fig dt:after{ position: absolute; top: 50%; left: 7px; display: block; content: ''; width: 5px; height: 5px; margin-top: -5px; border-top: 1px solid @color_effect; border-right: 1px solid @color_effect; -webkit-transform: rotate(135deg); transform: rotate(135deg); } .dlt_fig dd{ display: block; padding: 7px; margin: 0; } /*--------------------------------------*/ .dlt_tag{ display: table; overflow: hidden; width: 100%; font-size: 100%; } .dlt_tag li{ display: table-cell; vertical-align: middle; text-align: center; background: #dfdfdf; border-right: 1px solid #fff; color: #fff; line-height: 120%; padding: 2px 0 2px; line-height: 150%; letter-spacing: 1px; font-size: 90%; } .dlt_tag li.dlt_ac{ background: @color_effect2; } .dlt_tag4{ margin-bottom: 1px; } .dlt_tag4 li{ width: 25%; } .dlt_tag3 li{ width: 33.3%; } .dlt_tag li:first-child{ width: auto; } .dlt_tag li:empty{ background: none; } .dlt_tag4 img{ margin: 0 auto 3px; width: 30px; display: block; } /*--------------------------------------*/ .dlt_shade{ position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; z-index: 1000; background: rgba(0,0,0,0.6); } .dlt_shade .dlt_popimg{ display: table-cell; vertical-align: middle; text-align: center; } .dlt_shade .dlt_popimg img{ box-shadow: 0 0 10px rgba(0,0,0,0.6); z-index: 1000; position: absolute; } .dlt_shade span{ position: absolute; z-index: 1000; } .dlt_shade span.dlt_close{ display: table; height: 34px; width: 34px; top: 50%; left: 50%; border-radius: 20px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.6); } .dlt_shade span.dlt_close a{ line-height: 0; display: table-cell; vertical-align: middle; background: @color_effect; color: #fff; text-decoration: none !important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); font-size: 20px; text-align: center; } .dlt_shade span.dlt_close a:hover{ text-shadow: -1px 1px 0 rgba(0,0,0,0.3); filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; } .dlt_shade span.dlt_bprev, .dlt_shade span.dlt_bnext{ display: block; height: 90px; width: 90px; top: 50%; margin: -25px 0 0 0 !important; text-indent: -10000px; outline:none; line-height:1px; font-size:1px; background: rgba(0,0,0,0.3); } .dlt_shade span.dlt_bprev{ left: 0 !important; } .dlt_shade span.dlt_bnext{ left: auto !important; right: 0 !important; } .dlt_shade span.dlt_bprev a, .dlt_shade span.dlt_bnext a{ display: block; height: 100%; width: 100%; position: relative; } .dlt_shade span.dlt_bprev a:after, .dlt_shade span.dlt_bnext a:after{ position: absolute; top: 50%; left: 0; display: block; content: ''; width: 40px; height: 40px; margin-top: -22px; border-top: 5px solid @color_effect; border-right: 5px solid @color_effect; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .dlt_shade span.dlt_bprev a:after{ -webkit-transform: rotate(225deg); transform: rotate(225deg); margin-left: 30px; } .dlt_shade span.dlt_bnext a:after{ margin-left: 10px; } .dlt_shade span.dlt_bprev a:hover:after, .dlt_shade span.dlt_bnext a:hover:after{ filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; } #dlt_imgloader{ top: 50%; left: 50%; margin: -10px 0 0 -10px; position: absolute !important; width: 20px; height: 20px; border-radius: 50%; border: 5px solid #fff; border-right-color: transparent !important; animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; } @-webkit-keyframes spin{ 0% { transform: rotate(0deg); opacity: 0.2; } /*0%の時は20%の透明度*/ 50% { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50%の透明度*/ 100% { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20%の透明度に戻る*/ } @-moz-keyframes spin{ 0% { transform: rotate(0deg); opacity: 0.2; } /*0%の時は20%の透明度*/ 50% { transform: rotate(180deg); opacity: 0.5; } /*50%の時は50%の透明度*/ 100% { transform: rotate(360deg); opacity: 0.2; } /*100%の時に20%の透明度に戻る*/ } .dlt_poptxt{ position: absolute; top: 50%; left: 50%; min-width: 300px; color: rgba(255,255,255,0.8); z-index: 1000; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } .dlt_poptxt p{ letter-spacing: 0.5px; font-size: 11.5px; margin: 0 !important; padding: 0 0 10px !important; line-height: 150% !important; } .dlt_poptxt p.dlt_poptitle{ font-weight: bold; padding: 10px 0 5px !important; } /*--------------------------------------*/ .dlt_btn{ display: inline-block; border: 1px solid darken(@color_effect2, 50%); background: @color_effect2; color: #fff; border-radius: 3px; text-shadow: -1px -1px 0px rgba(0,0,0,0.3); } .dlt_btn a, .dlt_btn span{ font-size: 85%; line-height: 110%; letter-spacing: 2px; display: block; width: auto; cursor: pointer; padding: 4px 10px; border-radius: 3px; border-top: 1px solid rgba(255,255,255,0.5); } .dlt_btn a:hover, a:hover .dlt_btn span{ background: lighten(@color_effect2, 10%); } .dlt_btn a:active, a:active .dlt_btn span{ background: darken(@color_effect2, 10%); } /*--------------------------------------*/ /*問い合わせフォーム /*--------------------------------------*/ // フォームレイアウト調整 .sk_form_table { width: 100%; text-align: left; display: table; border-collapse: collapse; margin:20px auto; } .sk_form_table_dl { display: table-row; } .sk_form_table_dt { display: table-cell; vertical-align: middle; width: 150px !important; padding: 7px; background: @color_bg; border: 1px solid @color_border; } .sk_form_table_dd { border: 1px solid @color_border; width: 450px !important; display: table-cell; vertical-align: middle; padding: 7px; } .sk_form_table_dt span { color: #dd0000; } .sk_form_table_free { text-align: center; padding: 20px; font-size: 24px; font-weight: bold; } .sk_form_table .sk_form_must img { max-width: 40px; max-height: 20px; width: auto; height: auto; } /* ボタン 1(シンプル) */ input[type=submit] { width: 33%; padding: 0 3px; margin: 0 5px; cursor: pointer; color: #333; font-weight: normal; text-align: center; font-size: 100% !important; } #sk_form_submit input{ width: 150px; padding: 7px; cursor: pointer; color: #fff; text-align: center; display: block; margin: 0 auto; font-size: 130%; background: @color_effect2; outline: none; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .2s; transition-duration: .2s; } #sk_form_submit input:hover, #sk_form_submit input:focus{ background: lighten(@color_effect2, 10%); } #sk_form_submit input:active{ background: darken(@color_effect2, 10%); box-shadow: inset 0 2px 3px rgba(0,0,0,.3),0 1px 0 #fff; } /* ボタン 2(ボーダー) input[type=submit] { width: 33%; padding: 0 3px; margin: 0 5px; cursor: pointer; color: #333; font-weight: normal; text-align: center; font-size: 100% !important; } #sk_form_submit input{ width: 150px; padding: 7px; cursor: pointer; color: @color_effect2; text-align: center; display: block; margin: 0 auto; font-size: 130%; border: 2px solid @color_effect2; outline: none; -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; } #sk_form_submit input:hover, #sk_form_submit input:focus{ border: 2px solid lighten(@color_effect2, 20%); color: lighten(@color_effect2, 20%); } #sk_form_submit input:active{ border: 2px solid darken(@color_effect2, 10%); color: darken(@color_effect2, 10%); box-shadow: inset 0 2px 3px rgba(0,0,0,.3),0 1px 0 #fff; text-shadow: 0 1px 0 rgba(255,255,255,.4); } */ /* ボタン 3(グレー) input[type=submit] { border-radius: 5px; border: #a9a9a9 1px solid; -moz-box-shadow: inset 0 0 5px rgba(0,0,0,0.2), 0 0 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0,0,0,0.3); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0,0,0,0.3); width: 33%; padding: 0 3px; margin: 0 5px; cursor: pointer; color: #333; font-weight: normal; background: #f5f5f5; text-shadow: 1px 1px 0px #fff; text-align: center; font-size: 100% !important; } #sk_form_submit input{ width: 150px; padding: 7px; cursor: pointer; color: #333; text-align: center; display: block; margin: 0 auto; font-size: 130%; border: 1px solid #989898; box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset; border-radius: 1px; outline: none; background-image: -moz-linear-gradient( 90deg, rgb(222,222,222) 0%, rgb(246,246,246) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(222,222,222) 0%, rgb(246,246,246) 100%); background-image: -ms-linear-gradient( 90deg, rgb(222,222,222) 0%, rgb(246,246,246) 100%); } #sk_form_submit input:hover, #sk_form_submit input:focus{ border: 1px solid #6e6e6e; } #sk_form_submit input:active{ background-image: -moz-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(224,223,224) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(224,223,224) 100%); background-image: -ms-linear-gradient( 90deg, rgb(245,245,245) 0%, rgb(224,223,224) 100%); } */ #sk_form_submit input::-moz-focus-inner{ border: 0; } /*--------------------------------------*/ #sk_form_front { text-align: left; } #sk_form_alert_content { border: none !important; padding: 0 !important; margin-bottom: 15px; } #sk_form_admin_tel { display: inline; padding-right: 15px; } #sk_form_admin_tel_time { display: inline; } #sk_form_submit { text-align: center; margin-bottom:20px; } #sk_form_submit input { margin: 0 auto; } .sk_form_table input { padding: 5px; } #sk_form_privacy_content{ max-height: 200px !important; overflow: auto; border: 1px solid @color_border; padding: 10px !important; margin-bottom: 15px; } #sk_form_admin_tel{ display: inline; padding-right: 15px; } #sk_form_admin_tel_time{ display: inline; } .sk_form_table input{ padding: 5px; } #sk_form_alert_title{ margin-bottom: 10px; padding-bottom: 5px; } .sk_form_table_dd p.form_option_area{ margin: 5px 0 0 !important; padding: 0 !important; } .sk_form_table_dd p.form_option_area:empty{ display: none !important; } .error_message{ color: #d00; } form input, form textarea{ display:; background: #fff; border: 1px solid @color_border; padding: 5px; font-size: 13px; color: #333; font-family: "メイリオ", "Meiryo", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif; } form textarea{ width: 90%; } form select{ background: #fff; padding: 0 5px; border: 1px solid @color_border; font-family: "メイリオ", "Meiryo", "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS P Gothic", Verdana,Arial, Helvetica, sans-serif; } form select option{ padding: 1px 5px; border: none; } form input[type=radio], form input[type=checkbox]{ display: inline-block; } form input[type=radio] + label, form input[type=checkbox] + label{ position: relative; display: inline-block; font-size: 14px; line-height: 30px; cursor: pointer; } form input[type=file]{ border: none; } form input[name^="tel_"]{ width: 20% !important; } @media (min-width: 1px){ form input[type=radio], form input[type=checkbox]{ display: none; margin: 0; } form input[type=radio] + label, form input[type=checkbox] + label{ padding: 0 0 0 24px; } form input[type=radio] + label::before, form input[type=checkbox] + label::before{ content: ""; position: absolute; top: 50%; left: 0; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 18px; height: 18px; margin-top: -9px; background: #FFF; } form input[type=radio] + label::before{ border: 2px solid @color_border; border-radius: 30px; } form input[type=checkbox] + label::before{ border: 2px solid @color_border; } form input[type=radio]:checked + label::after, form input[type=checkbox]:checked + label::after{ content: ""; position: absolute; top: 50%; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } form input[type=radio]:checked + label:after{ left: 5px; width: 8px; height: 8px; margin-top: -4px; background: @color_effect; border-radius: 8px; } form input[type=checkbox]:checked + label:after{ left: 3px; display: block; content: ''; width: 12px; height: 8px; margin-top: -5px; border-top: 3px solid @color_effect; border-right: 3px solid @color_effect; -webkit-transform: rotate(120deg); transform: rotate(120deg); } } .zip{ display: block; margin-bottom: 5px; } .gallery { padding-top: 0 !important; } dl.gallery-item{ margin: 0 !important; padding: 0 !important; } .gallery-columns-1 dl.gallery-item{ width: 100% !important; } .gallery-columns-2 dl.gallery-item{ width: 50% !important; } .gallery-columns-3 dl.gallery-item{ width: 33.3% !important; } .gallery-columns-4 dl.gallery-item{ width: 25% !important; } .gallery-columns-5 dl.gallery-item{ width: 20% !important; } .gallery-columns-6 dl.gallery-item{ width: 16.6% !important; } .gallery-columns-7 dl.gallery-item{ width: 14.2% !important; } .gallery-columns-8 dl.gallery-item{ width: 12.5% !important; } .gallery-columns-9 dl.gallery-item{ width: 11.1% !important; } dl.gallery-item dt{ display: block !important; width: auto !important; margin-bottom: 10px; padding: 0 3% !important; } dl.gallery-item dt a{ display: block !important; padding: 0 !important; overflow: hidden !important; margin-left: auto !important; margin-right: auto !important; width: auto !important; border: none !important; background: none !important; } dl.gallery-item dt a:hover{ } dl.gallery-item dt a img{ border: none !important; width: auto !important; max-width: 100% !important; height: auto !important; padding: 0; margin: 0 auto; } /* ここ以下、サイトによって調整必須 */ /* wrap and sidebar */ #dlt_content { display: inline-block; width: 100%; } .dlt_container { margin: 0 auto; width: 1100px; } .dlt_container:after { display: block; content: ''; clear: both; } #dlt_main { display: inline-block; padding: 20px 0px; width: 70%; float: left; } /* global Sample */ #global { width: 100%; display: table; border-collapse: collapse; margin: 10px 0px; } #global li { display: table-cell; padding: 2px 8px; text-align: center; border: 1px solid #CCC; } #global li a { width: 100%; display: inline-block; } /**************初期設定*************/ body#top{ font-family:"メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif } #top em { font-family:"メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif } #top .dlt_free { padding-top: 15px !important; padding-bottom: 20px !important; } #top .dlt_freetitle { padding: 5px 10px !important; margin-bottom: 10px !important; } #top .dlt_free div p { padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important; } #top .pc_no { display:none !important; } #top #dlt_sidebar2 { display: block; padding: 0px; width: 100%; float: none; font-size: 100%; } #top .sk_form_table_dt span { background-color: #C00; padding: 4px 5px; font-size: 10px; color: #FFF; float: right; margin: 0px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #CCC; } /********サイド埋め込み**********/ #dlt_sidebar2 .dlt_lay_post2 .dlt_entry_header { display: table; border-bottom: none; } #dlt_sidebar2 .dlt_lay_post2 .dlt_entry_header div { display: table-cell; vertical-align: middle; width: 100px; font-size: 90%; padding: 0; } #dlt_sidebar2 .dlt_lay_post2 .dlt_entry_header h4 { vertical-align: middle; display: table-cell; padding: 0; position: relative; } #dlt_sidebar2 .dlt_lay_post2 .dlt_entry_header h4:after { display:none; } #dlt_sidebar2 .dlt_lay_post2 .dlt_entry { margin-bottom:0; } #dlt_sidebar2 ul.side-nav li { background-position:left center; margin-top: 5px; margin-bottom: 5px; padding-top:6px; box-sizing:border-box; } /*******各ページ********/ .page-kokorozashi-create .staff_img { float: left; width: 174px; } .page-kokorozashi-create .staff_img img { float: none; width: auto; display:block; max-width:100%; height:auto; margin:0 auto; } /*******独自********/ .page-consul-service01 .sk_form_table_dt { display: table-cell; vertical-align: middle; width: 200px !important; padding: 7px; background:none; border: none; } .page-consul-service01 .sk_form_table_dd { border: none; width: 450px !important; display: table-cell; vertical-align: middle; padding: 7px; } /*******合宿********/ .page-consul-service02 .sk_form_table_dt { display: table-cell; vertical-align: middle; width: 200px !important; padding: 7px; background:none; border: none; } .page-consul-service02 .sk_form_table_dd { border: none; width: 450px !important; display: table-cell; vertical-align: middle; padding: 7px; } /*******お問い合わせ********/ #top.page-contact #dlt_sidebar2 { display:none; } #top.page-contact .main { width: 100%; float: none; margin-left: 0; padding-bottom: 20px; } .page-contact .sk_form_table_dt { display: table-cell; vertical-align: middle; width: 200px !important; padding: 7px; background:none; border: none; border-top: solid 1px #CCC; border-bottom: solid 1px #CCC; } .page-contact .sk_form_table_dd { border: none; border-top: solid 1px #CCC; border-bottom: solid 1px #CCC; width: 450px !important; display: table-cell; vertical-align: middle; padding: 7px; } .page-contact .sk_form_table_dl:nth-child(even) > .sk_form_table_dd ,.page-contact .sk_form_table_dl:nth-child(even) > .sk_form_table_dt { background-color: #F6F7F9; } /*******CD********/ .page-cd01 .sk_form_table_dt { display: table-cell; vertical-align: middle; width: 200px !important; padding: 7px; background:none; border: none; } .page-cd01 .sk_form_table_dd { border: none; width: 450px !important; display: table-cell; vertical-align: middle; padding: 7px; } body.page-id-2552 .main{ margin: 0 auto; float: none } .w100p10{ box-sizing: border-box; }