@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップPVボタン
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.video_btn {
    position: relative;
}

.video_btn p{
    position: absolute;
    top: -305px;
    right: 20px;
    background: #fff;
    padding: 0px 12px 12px;
    text-align: center;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
メインカラム
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.normal_post.one_column #main_area,body.archive.one_column #main_area {
    width: 1200px;
}

.single-works.one_column #main_area,.single-voice.one_column #main_area {
    width: 900px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
画像ロールオーバー時のフェード効果
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
a img {
    /* CSSアニメーションで画像を透過させた際に1pxズレるバグを解消するおまじない */
    -webkit-transition: opacity 0.25s linear;
    -ms-transition: opacity 0.25s linear;
    -moz-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー(インフォメーション)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.home #header_frame > .inner {
    display: none;
    padding-bottom:0;
}

#header_frame > .inner {
    padding-bottom:0;
    position:relative;
}

#header_frame > .inner .left{
	width:100%;
}

#header_frame > .inner .logo{
    width: 83px;
    margin:0 auto;
}

#header_frame .right{
    position:absolute;
    right:0;
    top:calc(50% - .5em)
}

#header_frame .right .cmn_sns a {
    color: #151515;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
サービスカテ・タグ一覧開閉（よくある質問改造)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body[class*="archive-voice"] dl.works_search{
	width:980px;
	margin:0 auto;
}

dl.works_search > dt {
	display:none;
}

dl.works_search > dd {
	display:block!important;
	background-color:#efefef;
	padding: 15px 50px;
}

.cmn_works_cat_wrap td ul a {
	background-color:#fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
トップページ　＞　プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#promo_frame {
    /*---（画面高さ - ヘッダー - グロナビ - 一言）jsが効かない時用---*/
    height: calc(100vh - 88px);
    /*---可変対応（タブレット含める）---*/
    height: calc((var(--my_vh) * 100) - 88px);
    /*---ノート用（ノートPC高さ - ヘッダー - グロナビ - 一言）---*/
    min-height: calc(648px - 88px);
    /*---タブレット縦用（画像原寸高さ）---*/
    max-height: 820px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
ヘッダー　＞　グローバルナビの固定（JS連携）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#header_fixed_zone {
    background-color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段／親のスタイル）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#h_navi_main ul:not(.sub-menu) {
	padding:20px 0;
}

[id="header_fixed_zone"].fix_target #h_navi_main ul:not(.sub-menu) {
	padding:10px 0;
}

body.home #h_navi_main ul:not(.sub-menu) > li.home {
	display:none;
}

#h_navi_main ul:not(.sub-menu) > li.store{
	flex-grow:0;
}

#h_navi_main ul:not(.sub-menu) > li > a {
    padding: 12px 10px;
    color: inherit;
    /* font-family: "CENTURY"; */
    font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "my_mincho", serif;
    font-size: 15px;
    letter-spacing:.075em;
}

#h_navi_main ul:not(.sub-menu) > li.store > a {
    color:#b68500;
    box-shadow: 0 0 0 1px #e0cb81 inset;
    min-width:200px;
    padding: 10px 25px 10px 10px;
    min-height: 48px;
    transition:.2s;
}

#h_navi_main ul:not(.sub-menu) > li > a::before {
    content: "";
    display: block;
    width: 20%;
    height: 0;
    background: #918787;
    position: absolute;
    left: 40%;
    bottom: 0;
    opacity: 0;
    transition: .3s;
}

#h_navi_main ul:not(.sub-menu) > li.store > a::before {
    display:none;
}

#h_navi_main ul:not(.sub-menu) > li.store > a::after {
    content: '\f08e';
    font-family: "icomoon";
    font-size: 1em;
    line-height:1;
    position:absolute;
    top:50%;
    right: 10px;
    margin-top:-.5em;
}

body.home [id="header_fixed_zone"]:not(.fix_exe) #h_navi_main ul:not(.sub-menu) > li > a::before {
    bottom: 0;
}

#h_navi_main ul:not(.sub-menu) > li[class*='current'] > a,
#h_navi_main ul:not(.sub-menu) > li > a:hover {
    background-color: #fff;
}

body[class*="store"] #h_navi_main ul:not(.sub-menu) > li.store > a,
#h_navi_main ul:not(.sub-menu) > li.store > a:hover {
    box-shadow: 0 0 0 3px #e0cb81 inset;
}

#h_navi_main ul:not(.sub-menu) > li[class*='current'] > a::before,
body[class*="works"] #h_navi_main ul:not(.sub-menu) > li.works > a::before,
body[class*="voice"] #h_navi_main ul:not(.sub-menu) > li.voice > a::before,
#h_navi_main ul:not(.sub-menu) > li > a:hover::before {
    height: 3px;
    opacity: 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
グローバルナビ（下段／子のスタイル）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.home [id="header_fixed_zone"]:not(.fix_target) #h_navi_main ul.sub-menu{
	display:none!important;
}

#h_navi_main ul.sub-menu {
    background-color: rgba(182, 175, 152, .9);
}

#h_navi_main ul.sub-menu:before {
    border-bottom-color: rgba(182, 175, 152, .9);
}

#h_navi_main ul.sub-menu a {
	font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "my_mincho", serif;
	font-weight: 500;
	font-size: 16px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
固定ページ　＞　ローカルナビ(2019-10-31追加tky)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
ul.child_navi {
    border-radius: 0;
	font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "my_mincho", serif;
	font-weight: 500;
	padding:0 110px;
    border-bottom:1px solid #363636;
}

/* サービスページのみメニュー多い為調整 */
body[class*="page-service"] ul.child_navi {
    padding:0 20px;
}

ul.child_navi li {
    flex-grow: 1;
}

ul.child_navi a {
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    border:1px solid #d2d2d2;
    border-bottom:0;
    min-height: 60px;
}

body[class*="page-service"] ul.child_navi a {
    font-size: 13px;
}

ul.child_navi li:not(:last-child) {
    border-right: 2px solid #fff;
}

ul.child_navi a:hover,
ul.child_navi li.current_page_item a,
body.page-color-garden ul.child_navi a[href*="color"],
body.page-lucent ul.child_navi a[href*="lucent"],
ul.child_navi li.current_page_parent a {
    background-color: #363636;
    border-color:#363636;
    color: #fff;
    text-decoration: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
フッター(ナビ)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
div#f_navi_wrap {
	font-family: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "my_mincho", serif;
	font-weight: 500;
	background:#393939;

	padding: 80px 0 30px;
	position:relative;
}

div#f_navi_wrap a{
	color:#fff;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) {
    padding-left: 120px;
    display:block;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li:not(.home){
    margin-bottom: 30px;
    min-width: 110px;
    float:left;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li.store {
    position: absolute;
    right: 0;
	bottom:0;
	margin:0;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li > a {
	font-family: "CENTURY";
	font-size: 16px;
	font-weight: normal;
	letter-spacing: .075em;
	display: block;
	margin-bottom: 20px;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li.store a {
    border:1px solid;
    display:inline-block;
    padding: 12px 15px;
	margin-bottom: 0;
}

div#f_navi_wrap .navi_a ul:not(.sub-menu) > li.store a:hover {
	background-color:rgba(255,255,255,.2);
}

#f_navi_sub {
    margin-top: 0;
}

div#f_navi_wrap ul.sub-menu {
    margin-left: .5em;
}

div#f_navi_wrap ul.sub-menu li {
	margin-top: 12px;
}

div#f_navi_other ul li:not(:last-child){
	border-color:#fff;
}

div#f_navi_wrap ul.sub-menu li a {
    font-size: 13px;
}

div#f_navi_other > * {
	border-color: #515151;
	margin-top: 30px;
}