/* common */ .mceContentBody div.setting div.soratabi-banner { width: 200px; height: 200px; position: fixed; right: 1em; bottom: 3em; z-index: 9999; transition: 0.25s all; } .mceContentBody div.setting.kani-onsen div.soratabi-banner { bottom: calc(3em + 200px); } @media screen and (max-width:768px) { .mceContentBody div.setting div.soratabi-banner { width: 100px; height: 100px; } .mceContentBody div.setting.kani-onsen div.soratabi-banner { bottom: calc(3em + 100px); } } .mceContentBody div.setting div.soratabi-banner:hover { transform: scale(1.05); } .mceContentBody div.setting .nowrap { white-space: nowrap; } /* フィルムコミッション 修正 */ body.temp.fc .index_box::before { display: none; } body.temp.fc div#gmap { height: 400px !important; } /* /* --- 鳥取観光ニュース */ .mceContentBody table.news {} @media screen and (max-width:768px) { .mceContentBody table.news tr td { display: block; width: 100% !important; } } /* --- 鳥取砂丘ページ */ .mceContentBody div.setting.tottorisakyu div.inner { max-width: 1000px; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.tottorisakyu h4 { background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 2.4rem; font-weight: bold; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #323c46 !important; letter-spacing: 0.1rem; /* color: #533; */ border-bottom: none; } .mceContentBody div.setting.tottorisakyu h4.tl { text-align: left; } .mceContentBody div.setting.tottorisakyu h4 a { /* color: #533; */ color: #323c46; } .mceContentBody div.setting.tottorisakyu h4 a::before, .mceContentBody div.setting.tottorisakyu h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.tottorisakyu h4 a::after, .mceContentBody div.setting.tottorisakyu h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.tottorisakyu, .mceContentBody div.setting.tottorisakyu p, .mceContentBody div.setting.tottorisakyu td, .mceContentBody div.setting.tottorisakyu th { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } /* .mceContentBody div.setting.tottorisakyu, .mceContentBody div.setting.tottorisakyu p, .mceContentBody div.setting.tottorisakyu td { font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; } */ .mceContentBody div.setting.tottorisakyu h5 { /* color: #533; */ color: #323c46; border-top: none; margin-top: 0; margin-bottom: 0.5em; padding-top: 1.25rem; padding-bottom: 1.25rem; padding-left: 1rem; padding-right: 1rem; /* border-bottom: 2px solid #f0f0f0; */ border: 0.1rem solid #323c46; border-radius: 0; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; background: none; } .mceContentBody div.setting.tottorisakyu table.deco-tb th { vertical-align: middle; } .mceContentBody div.setting.tottorisakyu table.deco-tb th, .mceContentBody div.setting.tottorisakyu table.deco-tb td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: none; border-right: none; padding: 0.25rem 1rem; font-weight: normal; } .mceContentBody div.setting.tottorisakyu table.deco-tb th strong { font-weight: normal; } .mceContentBody div.setting.tottorisakyu div.deco-box div.title { line-height: 1; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: bold; font-size: 2.4em; /* margin-top: -1em; */ margin-top: 0; } /* -------- */ body.tottorisakyu div.flexslider { /* margin-bottom: 4rem !important; */; } .mceContentBody div.setting.tottorisakyu { background: #f8f8f8; } .mceContentBody div.setting.tottorisakyu div.inner { /* max-width: 100%; width: 100%; */ box-sizing: border-box; /* border-left: 0.1rem solid #ccc; */ background: #fff; padding-bottom: 4rem; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.125); } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article { /* max-width: 100rem; margin-left: auto; margin-right: auto; */ margin-bottom: 8rem; padding-bottom: 8rem; border-bottom: 0.1rem solid #ccc; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article:last-child { margin-bottom: 0; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article:nth-child(2n) { /* background: #f8f8f8; */; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article > div.clearfix { margin-bottom: 4rem; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article > div.clearfix div.title { margin-bottom: 4rem; } /* link-bar */ .mceContentBody div.setting.tottorisakyu div.link-bar, .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article div.link-bar { margin-bottom: 4rem; background: none; padding: 0; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article div.link-bar { margin-bottom: 2rem; background: none; padding: 0; } .mceContentBody div.setting.tottorisakyu div.link-bar.link-bar-top { margin-bottom: 8rem; padding-top: 4rem; padding-bottom: 4rem; /* border-bottom: 0.1rem solid #ccc; */ margin-bottom: 0; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article div.link-bar > div { margin-bottom: 2rem; } .mceContentBody div.setting.tottorisakyu div.link-bar a { color: #323c46; text-decoration: none; } .mceContentBody div.setting.tottorisakyu div.link-bar a span.thumbnail { opacity: 1; transition: 0.1s all; } .mceContentBody div.setting.tottorisakyu div.link-bar a span.thumbnail:hover { opacity: 0.8; } .mceContentBody div.setting.tottorisakyu div.link-bar a span.link-page { line-height: 1.25; display: block; padding-top: 0.5rem; padding-top: 0.5rem; } .mceContentBody div.setting.tottorisakyu a.link-more { width: 50%; padding: 10px; box-sizing: border-box; text-align: center; display: block; background: #323c46; color: #fff; border-radius: 1000rem; text-decoration: none; margin-left: auto; margin-right: auto; position: relative; } .mceContentBody div.setting.tottorisakyu a.link-more:before { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; right: 2rem; content: ""; border-top: 0.1rem solid #fff; border-right: 0.1rem solid #fff; transform: translateY(-50%) rotate(45deg); } .mceContentBody div.setting.tottorisakyu a.link-page { padding-left: 1.25rem; position: relative; display: block; text-decoration: none; } .mceContentBody div.setting.tottorisakyu a.link-page:before { width: 0.5rem; height: 0.5rem; position: absolute; top: 1.25rem; left: 0; content: ""; border-top: 0.125rem solid #2292d0; border-right: 0.125rem solid #2292d0; transform: rotate(45deg); } /* -------- */ .mceContentBody div.setting.tottorisakyu div.link-bar .w19 { width: 19.2%; } .mceContentBody div.setting.tottorisakyu .m_u160 { margin-bottom: 160px; } .mceContentBody div.setting.tottorisakyu .m_u80 { margin-bottom: 80px; } .mceContentBody div.setting.tottorisakyu br.responsive { display: none; } .mceContentBody div.setting.tottorisakyu ul.information-link { margin-bottom: 2em; } .mceContentBody div.setting.tottorisakyu ul.information-link li { float: left; width: 32%; margin-right: 2%; text-align: center; } .mceContentBody div.setting.tottorisakyu ul.information-link li.w100 { float: none; width: 100%; margin-right: 0; } .mceContentBody div.setting.tottorisakyu ul.information-link li:last-child { margin-right: 0; } .mceContentBody div.setting.tottorisakyu ul.information-link li::before { background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: inherit; width: 0; } .mceContentBody div.setting.tottorisakyu ul.information-link li a { display: block; padding: 1rem 0; text-decoration: none; background: #fff; color: #fb93bd; border: 0.2rem solid #fb93bd; border-radius: 1000rem; line-height: 1.5; } .mceContentBody div.setting.tottorisakyu ul.information-link li a:before { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; right: 2rem; content: ""; border-top: 0.1rem solid #fb93bd; border-right: 0.1rem solid #fb93bd; transform: translateY(-50%) rotate(45deg); } /* thumbnail */ .mceContentBody div.setting.tottorisakyu div.clearfix div span.thumbnail { overflow: hidden; display: block; } .mceContentBody div.setting.tottorisakyu a { position: relative; } .mceContentBody div.setting.tottorisakyu a img { transition: all 1s; display: block; } .mceContentBody div.setting.tottorisakyu a:hover img { /* transform: scale( 1.05, 1.05); filter: saturate(110%); */ opacity: 0.9; } /* */ .mceContentBody div.setting.tottorisakyu div.topics {} .mceContentBody div.setting.tottorisakyu div.topics ul li:before { background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: inherit; width: 0; } .mceContentBody div.setting.tottorisakyu div.topics ul { border-top: 1px dotted #ccc; } .mceContentBody div.setting.tottorisakyu div.topics ul li { border-bottom: 1px dotted #ccc; padding: 0.5em 0; display: block; } .mceContentBody div.setting.tottorisakyu div.topics ul li a {} .mceContentBody div.setting.tottorisakyu div.topics div.update { float: left; margin-right: 1em; } .mceContentBody div.setting.tottorisakyu div.topics div.title { overflow: hidden; } .mceContentBody div.setting.tottorisakyu span.number { background: #f57c00; border-radius: 1000rem; color: #fff; display: inline-block; height: 3rem; margin-left: 0.5rem; text-align: center; vertical-align: middle; width: 3rem; position: relative; border: 0.2rem solid #fff; box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25); } .mceContentBody div.setting.tottorisakyu span.number > span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } body.tottorisakyu { background: #fff; } body.tottorisakyu br.responsive { display: none; } body.tottorisakyu .mceContentBody { padding: 0; } body.tottorisakyu .mceContentBody div.setting { margin: 0; padding: 0; } body.tottorisakyu .mceContentBody div.deco-box { background: none; padding: 0; } body.tottorisakyu .mceContentBody { margin-bottom: 0; max-width: 100%; } body.tottorisakyu .mceContentBody .link::after, body.tottorisakyu .mceContentBody .linkButton::after { top: 0.25rem; transform: translateY(0); } body.tottorisakyu .mceContentBody .link::before, body.tottorisakyu .mceContentBody .linkButton a::before { top: 0.9rem; transform: translateX(-50%) translateY(0) rotate(45deg); } body.tottorisakyu div.footer { background: #323c46; } body.tottorisakyu div.footer a { color: #fff; text-decoration: none; } /* ------ */ @media screen and (max-width:768px) { /* addition */ .mceContentBody div.setting.tottorisakyu div.link-bar > div { margin-bottom: 2rem; } .mceContentBody div.setting.tottorisakyu div.link-bar.link-bar-top { margin-bottom: 4rem; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article div.link-bar { margin-bottom: 0; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article { margin-bottom: 8rem; } .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article > div.clearfix div.title, .mceContentBody div.setting.tottorisakyu div.tottorisakyu-article > div.clearfix div.description { margin-bottom: 2rem; } /* */ .mceContentBody div.setting.tottorisakyu a.link { /* margin: 0 1em; */ } .mceContentBody div.setting.tottorisakyu div.inner.convenient { padding: 0 1em; } body.tottorisakyu { width: 100%; min-width: inherit; /* overflow: hidden; */; } .mceContentBody div.setting.tottorisakyu h5 { /* padding-left: 1em !important; padding-right: 1em !important; */ padding: 0.25rem 1rem !important; } body.tottorisakyu p { /* padding-left: 1em !important; padding-right: 1em !important; */ padding: 0 !important; } body.tottorisakyu p.link { /* margin-left: 1em !important; margin-right: 1em !important; */ margin: 0 !important; } body.tottorisakyu br.responsive { display: block; } .mceContentBody div.setting.tottorisakyu div.inner { max-width: 1200px; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.tottorisakyu table.deco-tb { border: none; border-top: 1px solid #ccc; } .mceContentBody div.setting.tottorisakyu table.deco-tb th, .mceContentBody div.setting.tottorisakyu table.deco-tb td { padding: 0.2rem 1rem !important; box-sizing: border-box; display: block; } .mceContentBody div.setting.tottorisakyu table.deco-tb tr th, .mceContentBody div.setting.tottorisakyu table.deco-tb tr td { border: none !important; } .mceContentBody div.setting.tottorisakyu table.deco-tb tr { /* border-top: 1px solid #ccc; */ border-bottom: 1px solid #ccc; display: block; } .mceContentBody div.setting.tottorisakyu br.responsive { display: block; } .mceContentBody div.setting.tottorisakyu ul.information-link { padding: 0 1em; } .mceContentBody div.setting.tottorisakyu ul.information-link li { float: none; width: 100%; margin-right: 0; text-align: center; } .mceContentBody div.setting.tottorisakyu div.link-bar .w19.resp_w49 { width: 49%; } .mceContentBody div.setting.tottorisakyu div.deco-box div.title { margin-top: 0; } body.tottorisakyu div.description { padding: 0 1em; } .mceContentBody div.setting.tottorisakyu div.topics { padding: 0 1em; } .mceContentBody div.setting.tottorisakyu .resp_m_u160 { margin-bottom: inherit; } .mceContentBody div.setting.tottorisakyu .m_u80 { margin-bottom: inherit; } .mceContentBody div.setting.tottorisakyu .resp_m_u40 { margin-bottom: 40px; } .mceContentBody div.setting.tottorisakyu div.mainvisual { overflow: hidden; } body.tottorisakyu div.mainvisual img { width: 200% !important; max-width: none !important; transform: translate(-25%, 0px) !important; } body.tottorisakyu #ContsBox.mceContentBody div.setting .fl { float: left !important; } body.tottorisakyu #ContsBox.mceContentBody div.setting .fr { float: right !important; } body.tottorisakyu #ContsBox.mceContentBody div.setting .fr { float: right !important; } } .mceContentBody div.setting.tottorisakyu div.alert { padding-bottom: 4rem; } .mceContentBody div.setting.tottorisakyu div.alert a { padding-top: 4rem; padding-bottom: 4rem; display: block; position: relative; color: #ff100a; border-bottom: 0.1rem solid #ff100a; border-top: 0.1rem solid #ff100a; text-decoration: none; font-size: clamp(1.5rem, 1.8vw, 2rem); } .mceContentBody div.setting.tottorisakyu div.alert a:hover { text-decoration: underline; } .mceContentBody div.setting.tottorisakyu div.alert a:after { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; right: 2rem; content: ""; border-top: 0.1rem solid #ff100a; border-right: 0.1rem solid #ff100a; transform: translateY(-50%) rotate(45deg); } /* --- 2018 かに・温泉 */ /* --- reset */ .mceContentBody div.setting.kani-onsen div.inner { max-width: 1000px; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.kani-onsen h3 { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !important; margin-bottom: 4rem; font-size: 3rem; color: #533; /* border-bottom: 0.3rem double #323c46; */; } .mceContentBody div.setting.kani-onsen h4 { background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif !important; font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #533; white-space: nowrap; } .mceContentBody div.setting.kani-onsen h4.tl { text-align: left; } .mceContentBody div.setting.kani-onsen h4 a { color: #533; } .mceContentBody div.setting.kani-onsen h4 a::before, .mceContentBody div.setting.kani-onsen h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.kani-onsen h4 a::after, .mceContentBody div.setting.kani-onsen h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.kani-onsen, .mceContentBody div.setting.kani-onsen p, .mceContentBody div.setting.kani-onsen th, .mceContentBody div.setting.kani-onsen td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; } /* .mceContentBody div.setting.kani-onsen, .mceContentBody div.setting.kani-onsen p, .mceContentBody div.setting.kani-onsen td { font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; } */ .mceContentBody div.setting.kani-onsen h5 { color: #533; border-top: none; margin-top: 0; margin-bottom: 0.5em; padding: 0; border-bottom: 2px solid #f0f0f0; border-radius: 0; } .mceContentBody div.setting.kani-onsen .m_u100 { margin-bottom: 100px; } .mceContentBody div.setting.kani-onsen div.deco-box { border: 1px solid #ccc; /* padding: 1em 3em; */ padding: 1em; } .mceContentBody div.setting.kani-onsen .center { margin-left: auto; margin-right: auto; } /* */ /* reset */ .mceContentBody div.setting.kani-onsen ul.information-link li::before { background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: inherit; width: 0; } .mceContentBody div.setting.kani-onsen ul.information-link li a { display: block; padding: 1em 0; text-decoration: none; background: #533; color: #fff; font-size: 1.2rem; } .mceContentBody div.setting.kani-onsen div.copy { font-size: 1.4rem; } .mceContentBody div.setting.kani-onsen div.deco-box-line { border: 3px double #553333; padding: 3em 1em 1em; position: relative; margin-top: 5em; z-index: 2; background: #fff; } .mceContentBody div.setting.kani-onsen div.deco-box-line:before { width: 82px; height: 82px; background: #553333; border-radius: 1000px; display: block; position: absolute; top: -41px; /* */ left: 50%; content: ""; transform: translate(-50%, 0); z-index: -1; } .mceContentBody div.setting.kani-onsen div.deco-box-line div.icon-onsen { width: 80px; height: 80px; background: #fff; border-radius: 1000px; position: absolute; top: -40px; /* */ left: 50%; transform: translate(-50%, 0); text-align: center; z-index: 2; } .mceContentBody div.setting.kani-onsen div.deco-box-line div.icon-onsen img { width: 60%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen h3 { font-size: 1.6em; } .mceContentBody div.setting.kani-onsen h4 { font-size: 1.6em; } .mceContentBody div.setting.kani-onsen div.deco-box { border: 1px solid #ccc; padding: 1em 1em; } .mceContentBody div.setting.kani-onsen table.deco-tb.onsen td.th { padding-bottom: 0 !important; } } /* --- 温泉めぐり、かにめぐり とっとり冬の陣 2020 追加 */ /* - .animation */ /* -------- fadein */ @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* プレフィックス削除 */ /* ------ あとで css を移動する */ /* 1秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-1s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 1s normal forwards running fadein; } /* 2秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-2s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 2s normal forwards running fadein; } /* 3秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-3s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 3s normal forwards running fadein; } /* 4秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-4s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 4s normal forwards running fadein; } /* 5秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-5s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 5s normal forwards running fadein; } /* 8秒後にアニメーション開始 */ .mceContentBody div.setting.kani-onsen .fadeIn-8s { opacity: 0; /* 初期状態 */ animation: 1s ease-in-out 5s normal forwards running fadein; } /* -------- @end .animation */ .mceContentBody div.setting.kani-onsen div.yado-list {} .mceContentBody div.setting.kani-onsen div.yado-list ul li:before { display: none; } .mceContentBody div.setting.kani-onsen div.yado-list ul li { float: left; width: 32%; margin-right: 2%; text-align: center; margin-bottom: 1em; white-space: nowrap; } .mceContentBody div.setting.kani-onsen div.yado-list ul li:nth-child(3n) { margin-right: 0; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.yado-list ul li { float: left; width: 49%; margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.yado-list ul li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.yado-list ul li:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:480px) { .mceContentBody div.setting.kani-onsen div.yado-list ul li { float: left; width: 100%; margin-right: 0; } .mceContentBody div.setting.kani-onsen div.yado-list ul li:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.kani-onsen div.yado-list ul li:nth-child(2n) { margin-right: 0; } } .mceContentBody div.setting.kani-onsen div.yado-list ul li div.thumbnail { overflow: hidden; width: 100%; /* height: 250px; */; } .mceContentBody div.setting.kani-onsen div.yado-list ul li div.thumbnail span { display: block; width: 100%; /* padding-top: 159.25925%; */ padding-top: 100%; position: relative; background: #f0f0f0; } .mceContentBody div.setting.kani-onsen div.yado-list ul li div.thumbnail span img { /* max-height: 95%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; z-index: 0; } .mceContentBody div.setting.kani-onsen div.yado-list ul li div.thumbnail span img:nth-child(2) { opacity: 0; transition: 0.25s all; z-index: 1; } .mceContentBody div.setting.kani-onsen div.yado-list ul li div.thumbnail span:hover img:nth-child(2) { opacity: 1; } /* --- */ .mceContentBody div.setting.kani-onsen div.kani-list {} .mceContentBody div.setting.kani-onsen div.kani-list ul li:before { display: none; } .mceContentBody div.setting.kani-onsen div.kani-list ul li { float: left; width: 32%; margin-right: 2%; text-align: center; margin-bottom: 1em; position: relative; white-space: nowrap; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.label { position: absolute; bottom: 2em; right: 0.25em; width: 40px; height: 40px; background: #ccc; line-height: 40px; /* */ font-size: 1.4em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.label + div.label { right: calc(40px + 0.5em); } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.label.food { background: #cc3333; color: #fff; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.label.buy { background: #cc6600; color: #fff; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.label.free { width: 100px; bottom: 2em; background: #f52028; color: #fff; } .mceContentBody div.setting.kani-onsen div.kani-list ul li:nth-child(3n) { margin-right: 0; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.kani-list ul li { float: left; width: 49%; margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.kani-list ul li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.kani-list ul li:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:480px) { .mceContentBody div.setting.kani-onsen div.kani-list ul li { float: left; width: 100%; margin-right: 0; } .mceContentBody div.setting.kani-onsen div.kani-list ul li:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.kani-onsen div.kani-list ul li:nth-child(2n) { margin-right: 0; } } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.thumbnail { overflow: hidden; width: 100%; /* height: 250px; */; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.thumbnail span { display: block; width: 100%; /* padding-top: 159.25925%; */ padding-top: 100%; position: relative; background: #f0f0f0; } .mceContentBody div.setting.kani-onsen div.kani-list ul li div.thumbnail span img { /* max-height: 95%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; z-index: 0; } .mceContentBody div.setting.kani-onsen div.kani-list ul li a { display: block;} .mceContentBody div.setting.kani-onsen div.kani-list ul li a div.place { text-decoration: none; display: inline-block; background: #533; border-radius: 1000px; padding-left: 1em; padding-right: 1em; font-size: 14px; margin-top: 10px; } .mceContentBody div.setting.kani-onsen div.kani-list ul li a div.place { color: #fff; } .mceContentBody div.setting.kani-onsen div.kani-list ul li a:hover { color: #533; } /* --- */ .mceContentBody div.setting.kani-onsen div.ouchi-list {} .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:before { display: none; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li { float: left; width: 32.0%; margin-right: 2%; text-align: center; margin-bottom: 1em; white-space: nowrap; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:nth-child(3n) { margin-right: 0; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.ouchi-list ul li { float: left; width: 49%; margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:480px) { .mceContentBody div.setting.kani-onsen div.ouchi-list ul li { float: left; width: 100%; margin-right: 0; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li:nth-child(2n) { margin-right: 0; } } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li div.thumbnail { overflow: hidden; width: 100%; /* height: 250px; */; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li div.thumbnail span { display: block; width: 100%; /* padding-top: 159.25925%; */ padding-top: 100%; position: relative; background: #f0f0f0; } .mceContentBody div.setting.kani-onsen div.ouchi-list ul li div.thumbnail span img { /* max-height: 95%; */ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; z-index: 0; } .mceContentBody div.setting.kani-onsen div.kani-onsen-main-movie { position: relative; } .mceContentBody div.setting.kani-onsen div.kani-onsen-main-movie video { width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; margin-top: -30px; } .mceContentBody div.setting.kani-onsen div.kani-onsen-main-movie div.kani-onsen-main-movie-copy { position: absolute; top: calc(50% - 20px); /* */ left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 250px; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.kani-onsen-main-movie div.kani-onsen-main-movie-copy { max-width: 25vw; } } .mceContentBody div.setting.kani-onsen div.kani-onsen-main-movie div.kani-onsen-main-movie-bg { position: absolute; top: -30px; left: -20px; width: calc(100% + 40px); height: calc(100% + 20px); background: rgba(0, 0, 0, 0.25); } /* ------ */ .mceContentBody div.setting.kani-onsen div.fixed-banner { position: fixed; bottom: 3.25em; right: 2.5em; width: 150px; height: 150px; z-index: 1000; } .mceContentBody div.setting.kani-onsen div.fixed-banner img { width: 150px; height: 150px; transition: 0.25s all; } .mceContentBody div.setting.kani-onsen div.fixed-banner a:hover img { transform: scale(1.1); } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.fixed-banner { width: 100px; height: 100px; } .mceContentBody div.setting.kani-onsen div.fixed-banner img { width: 100px; height: 100px; transition: 0.25s all; } } /* ------ */ .mceContentBody div.setting.kani-onsen div.page-link { width: 100%; } .mceContentBody div.setting.kani-onsen div.page-link ul li { width: 23.5%; margin-right: 2%; float: left; text-align: center; white-space: nowrap; } .mceContentBody div.setting.kani-onsen div.page-link ul li:nth-child(4) { margin-right: 0; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.page-link ul li { width: 49.0%; margin-right: 2%; margin-bottom: 10px; align-content:; } .mceContentBody div.setting.kani-onsen div.page-link ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.kani-onsen div.page-link ul li:nth-child(4) { margin-right: 0; } } .mceContentBody div.setting.kani-onsen div.page-link ul li:before { display: none; } .mceContentBody div.setting.kani-onsen div.page-link ul li a { display: block; border: 1px solid #533; color: #533; padding: 2rem 0; text-decoration: none; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; transition: 0.25s all; } .mceContentBody div.setting.kani-onsen div.page-link ul li a:hover { background: #ccc06f; color: #533; } .mceContentBody div.setting.kani-onsen div.page-link ul li img { display: block; width: 60px; margin: 0 !important; margin-left: auto !important; margin-right: auto !important; } .mceContentBody div.setting.kani-onsen div.reccomend {} .mceContentBody div.setting.kani-onsen div.reccomend div.thumbnail { float: left; width: 39%; margin-right: 2%; } .mceContentBody div.setting.kani-onsen div.reccomend div.description { padding-left: 1em; padding-right: 1em; float: left; box-sizing: border-box; width: 59%; } @media screen and (max-width:768px) { .mceContentBody div.setting.kani-onsen div.reccomend div.thumbnail { float: none; width: 100%; margin-right: 0; } .mceContentBody div.setting.kani-onsen div.reccomend div.description { padding-left: 0; padding-right: 0; float: none; box-sizing: border-box; width: 100%; } } .mceContentBody div.setting.kani-onsen h4.headline-bg { position: relative; padding-top: 25px; padding-bottom: 25px; } .mceContentBody div.setting.kani-onsen h4.headline-bg div { position: absolute; top: 30%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 0; width: 200px; height: 100px; } .mceContentBody div.setting.kani-onsen h4.headline-bg span { z-index: 1; position: relative; color: #fff; text-shadow: 1px 1px 0 #fa151b, -1px 1px 0 #fa151b, 1px -1px 0 #fa151b, -1px -1px 0 #fa151b, 1px 0px 0 #fa151b, 0px 1px 0 #fa151b, -1px 0px 0 #fa151b, 0px -1px 0 #fa151b; /* 文字の影 */; } /* --- 令和 特集ページ */ div.setting {} div.setting {} div.setting br.default-break { display: block; } div.setting br.respoinsive-break { display: none; } div.setting br.default-block { display: block; } div.setting br.respoinsive-block { display: none; } div.setting br.default-block { display: block; } div.setting br.responsive-block { display: none; } div.setting br.default-inline-block { display: block; } div.setting br.responsive-inline-block { display: none; } @media screen and (max-width:768px) { div.setting br.default-break { display: none; } div.setting br.respoinsive-break { display: block; } div.setting br.default-block { display: none; } div.setting br.respoinsive-block { display: block; } div.setting br.default-block { display: none; } div.setting br.responsive-block { display: block; } div.setting br.default-inline-block { display: none; } div.setting br.responsive-inline-block { display: block; } } div.setting.reiwa, div.setting.reiwa p { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } div.setting.reiwa a { text-decoration: none; font-weight: bold; position: relative; } div.setting.reiwa a.block { display: block; } div.setting.reiwa a.block:after { width: 2em; height: 2em; position: absolute; top: 50%; right: 1em; content: ""; border-top: 1px solid #533; border-right: 1px solid #533; transform: translate(0, -50%) rotate(45deg); } div.setting.reiwa ul.column3 li { float: left; width: 32%; margin-right: 2%; margin-bottom: 40px !important; position: relative; } div.setting.reiwa ul.column3 li:nth-child(3n) { margin-right: 0; } @media screen and (max-width:768px) { div.setting.reiwa ul.column3 li { float: none; width: 100%; margin-right: 0; margin-bottom: 40px !important; position: relative; } div.setting.reiwa ul.column3 li:nth-child(3n) { margin-right: 0; } } div.setting.reiwa ul.column3 li div.number { position: absolute; top: 0; left: 0; width: 40px; height: 40px; } div.setting.reiwa ul.column3 li.east div.number { background: #a582aa; } div.setting.reiwa ul.column3 li.middle div.number { background: #ffacac; } div.setting.reiwa ul.column3 li.west div.number { background: #92b7cc; } div.setting.reiwa ul.column3 li div.number span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; } div.setting.reiwa ul.column3 li div.thumbnail { margin-bottom: 1em; } div.setting.reiwa ul.column3 li div.spot-name { font-size: 18px; line-height: 1.4; margin-bottom: 1em; font-weight: bold; } div.setting.reiwa ul.column3 li div.spot-name span { font-size: 10px; display: block; } div.setting.reiwa ul.column3 li div.spot-place { margin-bottom: 1em; color: #fff; font-size: 13px; text-align: center; } div.setting.reiwa ul.column3 li.east div.spot-place { background: #a582aa; } div.setting.reiwa ul.column3 li.middle div.spot-place { background: #ffacac; } div.setting.reiwa ul.column3 li.west div.spot-place { background: #92b7cc; } div.setting.reiwa ul.column3 li div.spot-description { margin-bottom: 1em; } /* */ div.setting.reiwa table { font-size: 13px; table-layout: fixed; border-collapse: collapse; border-top: 1px solid #ccc; } div.setting.reiwa table th { width: 20%; border-bottom: 1px solid #ccc; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } div.setting.reiwa table td { width: 80%; border-bottom: 1px solid #ccc; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } div.setting.reiwa h4 { background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #533; } div.setting.reiwa h4 a::before, div.setting.reiwa h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } div.setting.reiwa h4 a::after, div.setting.reiwa h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } div.setting.reiwa div.deco-box.orange { padding: 1em; box-sizing: border-box; border-top: 10px solid #ffacac; background: #f8f8f8; } div.setting.reiwa div.deco-box.pink { padding: 1em; box-sizing: border-box; border-top: 10px solid #f5a7d0; background: #f8f8f8; } div.setting.reiwa div.profile div.wrap { padding: 1em; border: 4px solid #f0f0f0; } div.setting.reiwa h5 { color: #533; } div.setting.reiwa div.profile h3 { line-height: 1; padding-top: 0.5em; position: relative; cursor: pointer; } div.setting.reiwa div.profile h3:after { width: 2em; height: 2em; position: absolute; top: 120%; left: 50%; content: ""; border-top: 1px solid #533; border-right: 1px solid #533; transform: translate(-50%, -50%) rotate(135deg); transition: 0.5s; } div.setting.reiwa div.profile h3:before { /* width: 100%; */ white-space: nowrap; position: absolute; font-size: 14px; top: 200%; left: 50%; content: "詳細はこちら"; transform: translateX(-50%) translateY(-50%); transition: 0.5s; } div.setting.reiwa div.profile div.accordion { max-height: 0; overflow: hidden; transition: 0.5s; } div.setting.reiwa div.profile h3.active + div.accordion { max-height: 10000px; } div.setting.reiwa div.profile h3.active:after { width: 2em; height: 2em; position: absolute; top: 0%; left: 50%; content: ""; border-top: 1px solid #533; border-right: 1px solid #533; transform: translate(-50%, -50%) rotate(-45deg); } div.setting.reiwa div.profile h3.active:before { opacity: 0; } /* --- とっとりの夏 2019 */ .mceContentBody div.layout.summer2016.summer2019, .mceContentBody div.layout.summer2016.summer2019 div.headline, .mceContentBody div.layout.summer2016.summer2019 p { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; } .mceContentBody div.layout.summer2016.summer2019 div.mainVisual { /* margin-top: -20px; margin-left: -20px; margin-right: -20px; */ width: calc(100% + 40px); } @media screen and (max-width:768px) { .mceContentBody div.layout.summer2016.summer2019 div.mainVisual { margin-top: 0; margin-left: 0; margin-right: 0; width: 100%; } } .mceContentBody div.layout.summer2016.summer2019 div.mainVisual img { width: 100%; } .mceContentBody div.layout.summer2016.summer2019 div.mainVisual + div.columnWrap div.spot { position: relative; /* overflow: visible; */ } .mceContentBody div.layout.summer2016.summer2019 div.mainVisual + div.columnWrap div.spot:before { position: absolute; content: ""; width: 97%; height: 94%; top: 3%; left: 1.5%; display: block; border: 3px solid #ffee00; border-radius: 5px; box-sizing: border-box; } .mceContentBody div.layout.summer2016.summer2019 div.mainVisual + div.columnWrap div.leftColumn div.seal, .mceContentBody div.layout.summer2016.summer2019 div.mainVisual + div.columnWrap div.rightColumn div.seal, .mceContentBody div.layout.summer2016.summer2019 div.mainVisual + div.columnWrap div.fl div.seal { left: -10px; position: absolute; top: -10px; z-index: 1000; } .mceContentBody div.layout.summer2016.summer2019 div.headline h6 { font-size: 80%; } .mceContentBody div.layout.summer2016.summer2019 div.columnWrap a.button.scroll::before { background: url("http://www.tottori-guide.jp/files/34577.png") no-repeat scroll 0 0 / 15px 30px; content: ""; } .mceContentBody div.layout.summer2016.summer2019 div.columnWrap a.button:hover::before { background: url("http://www.tottori-guide.jp/files/34577.png") no-repeat scroll 0 -15px / 15px 30px; content: ""; } /* --- とっとりふたたび体験キャンペーン */ .mceContentBody div.setting br.default { display: block; } .mceContentBody div.setting br.responsive { display: none; } @media screen and (max-width:768px) { .mceContentBody div.setting br.default { display: none; } .mceContentBody div.setting br.responsive { display: block; } } .mceContentBody div.setting div.again, .mceContentBody div.setting div.again table, .mceContentBody div.setting div.again table td, .mceContentBody div.setting div.again table th { color: #333; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } .mceContentBody div.setting div.again h4 { background: none; box-sizing: border-box; font-size: 1.8em; font-weight: bold; height: auto; margin-left: 0 !important; margin-right: 0 !important; margin: 0 0 1em !important; padding: 0 25px; position: relative; width: 100%; text-align: center; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; background: #ff1a3b; color: #fff; } .mceContentBody div.setting div.again h4 span { padding: 0 0.5em; margin } .mceContentBody div.setting div.again h4 a::before, .mceContentBody div.setting div.again h4::before { border: none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting div.again h4 a::after, .mceContentBody div.setting div.again h4::after { border: none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting div.again h4 a, .mceContentBody div.setting div.again h4 a { text-decoration: none; } .mceContentBody div.setting div.again div.deco-box { padding: 1em; border-radius: 5px; box-sizing: border-box; border: 2px solid #231814; background: #fcfaee; } .mceContentBody div.setting div.again div.deco-box-border { padding: 1em; border-radius: 5px; box-sizing: border-box; border: 4px solid #f0f0f0; } .mceContentBody div.setting div.again table.deco-tb th, .mceContentBody div.setting div.again table.deco-tb td { background: none; color: #333; border: none; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mceContentBody div.setting div.again div.thumbnail { overflow: hidden; border-radius: 20px; border: 5px solid #fcf8ee; } .mceContentBody div.setting div.again div.thumbnail img { display: block; } .mceContentBody div.setting div.again .btn { background: #fff; border: 2px solid #ff1a3b; color: #ff1a3b; padding: 0.25em; display: block; text-align: center; margin-bottom: 40px; text-decoration: none; font-size: 1.8rem; font-weight: bold; position: relative; } .mceContentBody div.setting div.again .btn::after { border-right: 2px solid #ff1a3b; border-top: 2px solid #ff1a3b; content: ""; display: block; height: 12px; right: 20px; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; } .mceContentBody div.setting div.again .btn:hover { background: #ff1a3b; color: #fff; } .mceContentBody div.setting div.again .btn:hover::after { border-right: 2px solid #fff; border-top: 2px solid #fff; } /* --- 秋の定番 紅葉を見に行こう♪ */ .mceContentBody div.setting div.odekake.odekake2019 a[href^="tel:"] { pointer-events: none; text-decoration: none; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.odekake.odekake2019 a[href^="tel:"] { pointer-events: auto; color: #533; text-decoration: underline; } .mceContentBody div.setting div.odekake.odekake2019 a[href^="tel:"]:hover { text-decoration: none; } } .mceContentBody div.setting div.odekake.odekake2019, .mceContentBody div.setting div.odekake.odekake2019 p, .mceContentBody div.setting div.odekake.odekake2019 td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; } .mceContentBody div.setting div.odekake.odekake2019 .link, .linkButton { /* reset */ margin-bottom: 0; } .mceContentBody div.setting div.odekake.odekake2019 div.main { /* margin-top: -30px; margin-left: -20px; margin-right: -20px; */; } .mceContentBody div.setting div.odekake.odekake2019 td { vertical-align: middle; } .mceContentBody div.setting div.odekake.odekake2019 .deco-tb { /* border-spacing: 0; border-top: 1px solid #dcc; margin: 0 0 20px; width: 100%; */ border-top: 0; } .mceContentBody div.setting div.odekake.odekake2019 .deco-tb td { /* border-bottom: 1px solid #bca374; border-top: 1px solid #bca374; padding: 6px; */ /* reset */ border: none; padding: 0; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mceContentBody div.setting div.odekake.odekake2019 .deco-tb td:first-child { background: #f8f8f8; } .mceContentBody div.setting div.odekake.odekake2019 span.koyo-number { margin-right: 1em; color: #fff; text-shadow: 2px 2px 0 #e9390d, -2px -2px 0 #e9390d, -2px 2px 0 #e9390d, 2px -2px 0 #e9390d, 0px 2px 0 #e9390d, 0-2px 0 #e9390d, -2px 0 0 #e9390d, 2px 0 0 #e9390d; } .mceContentBody div.setting div.odekake.odekake2019 span.koyo-number::after { left: -250%; } .mceContentBody div.setting div.odekake.odekake2019 span.koyo-number.digit::after { left: -100%; } .mceContentBody div.setting div.odekake.odekake2019 h3 { border-top: 4px solid #e63217; border-bottom: 4px solid #e63217; padding-top: 1em; padding-bottom: 1em; color: #ea5132; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: bold; margin-top: 1em; margin-bottom: 1em; position: relative; } .mceContentBody div.setting div.odekake.odekake2019 h3:before { position: absolute; content: ""; width: 100%; height: 2px; top: 4px; /* */ left: 0; background: #efae71; } .mceContentBody div.setting div.odekake.odekake2019 h3:after { position: absolute; content: ""; width: 100%; height: 2px; bottom: 4px; /* */ left: 0; background: #efae71; } .mceContentBody div.setting div.odekake.odekake2019 h4 { background: none; color: #533; border-bottom: 2px dashed #e63217; margin-bottom: 1em; } .mceContentBody div.setting div.odekake.odekake2019 h4:before, .mceContentBody div.setting div.odekake.odekake2019 h4:after { display: none; } .mceContentBody div.setting div.odekake.odekake2019 h5 { margin-bottom: 0.5em; padding-top: 0.75em; color: #e63217; } /* */ .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn {} .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li { float: left; width: 23.5%; margin-right: 2%; margin-bottom: 20px; padding: 0; white-space: nowrap; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li::before { display: none; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li a { display: inline; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li img { display: block; } @media screen and (max-width:768px) { .mceContentBody div.setting div.odekake.odekake2019 .deco-tb td { border-top: 1px solid #ccc !important; border-bottom: 1px solid #ccc !important; } .mceContentBody div.setting div.odekake.odekake2019 .deco-tb td:first-child { background: #f8f8f8; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li { width: 100%; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting div.odekake.odekake2019 div.small-autumn ul li:nth-child(2n) { margin-right: 0; } } /* --- 鳥取 イルミネーション & ゲレンデ ガイド 2019 */ .mceContentBody div.setting div.winter-event2019 { position: relative; /* overflow: hidden; */; } .mceContentBody div.setting div.winter-event2019:before { background: #d1a60d; width: 0.1em; height: 100%; position: absolute; left: -20px; top: 0; display: block; content: ""; z-index: 0; } .mceContentBody div.setting div.winter-event2019.ski:before { background: #b7b6b9; display: none; } .mceContentBody div.setting div.winter-event2019.ski:after { background: #b7b6b9; width: 0.1em; height: 100%; position: absolute; right: -20px; top: 0; display: block; content: ""; z-index: 0; display: none; } .mceContentBody div.setting div.winter-event2019 a[href^="tel:"] { pointer-events: none; text-decoration: none; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.winter-event2019 a[href^="tel:"] { pointer-events: auto; color: #533; text-decoration: underline; } .mceContentBody div.setting div.winter-event2019 a[href^="tel:"]:hover { text-decoration: none; } } .mceContentBody div.setting div.winter-event2019, .mceContentBody div.setting div.winter-event2019 p, .mceContentBody div.setting div.winter-event2019 td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif !important; color: #333; } .mceContentBody div.setting div.winter-event2019 h3, .mceContentBody div.setting div.winter-event2019 h6 { color: #333; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } .mceContentBody div.setting div.winter-event2019 h6 { line-height: 1.5; font-size: 1.4em; } .mceContentBody div.setting div.winter-event2019 div.illumination h3 { border-bottom: 1px solid #d1a60d; } .mceContentBody div.setting div.winter-event2019 div.skiarea h3 { border-bottom: 1px solid #b7b6b9; } .mceContentBody div.setting div.winter-event2019 div.winter-sports h3 { border-bottom: 1px solid #000; } .mceContentBody div.setting div.winter-event2019 .link, .linkButton { /* reset */ margin-bottom: 0; } .mceContentBody div.setting div.winter-event2019 img { border-radius: 10px; overflow: hidden; } .mceContentBody div.setting div.winter-event2019 div.thumbnail { position: relative; } .mceContentBody div.setting div.winter-event2019 div.illumination div.thumbnail:after { position: absolute; border: 1px solid #d1a60d; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; /* background: #fff; */ top: 5px; left: 5px; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.illumination div.thumbnail:before { position: absolute; border: 1px solid #d1a60d; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; /* background: #fff; */ top: -5px; left: -5px; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.skiarea div.thumbnail:after { position: absolute; border: 1px solid #b7b6b9; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; /* background: #fff; */ top: 5px; left: 5px; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.skiarea div.thumbnail:before { position: absolute; border: 1px solid #b7b6b9; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; /* background: #fff; */ top: -5px; left: -5px; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.winter-sports div.thumbnail:after { /* position: absolute; border: 1px solid #000; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; background: #fff; top: 5px; left: 5px; z-index: 1; */; } .mceContentBody div.setting div.winter-event2019 div.winter-sports div.thumbnail:before { /* position: absolute; border: 1px solid #000; border-radius: 10px; content: ""; width: 100%; height: 100%; display: block; background: #fff; top: -5px; left: -5px; z-index: 1; */; } .mceContentBody div.setting div.winter-event2019 div.winter-sports { /* background: #dceaef; */ position: relative; /* padding-top: 2em; padding-bottom: 1em; border-radius: 10px; overflow: hidden; */ /* border: 1px solid #ccc; */; } .mceContentBody div.setting div.winter-event2019 div.winter-sports:before { background: url(https://www.tottori-guide.jp/files/50659.png); background-size: 940px 460px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; content: ""; opacity: 0.75; } .mceContentBody div.setting div.winter-event2019 div.winter-sports > div { /* background: #dceaef; */ position: relative; z-index: 1; /* padding-top: 2em; padding-bottom: 1em; border-radius: 10px; overflow: hidden; */ /* border: 1px solid #ccc; */; } .mceContentBody div.setting div.winter-event2019 div.main { /* margin-top: -30px; margin-left: -20px; margin-right: -20px; */ position: relative; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.main img { border-radius: 0; } .mceContentBody div.setting div.winter-event2019 td { vertical-align: middle; } .mceContentBody div.setting div.winter-event2019 .deco-tb { /* border-spacing: 0; border-top: 1px solid #dcc; margin: 0 0 20px; width: 100%; */ border-top: 0; } .mceContentBody div.setting div.winter-event2019 .deco-tb td { /* border-bottom: 1px solid #bca374; border-top: 1px solid #bca374; padding: 6px; */ /* reset */ border: none; padding: 0; padding-left: 1em; padding-right: 1em; padding-top: 0.5em; padding-bottom: 0.5em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mceContentBody div.setting div.winter-event2019 .deco-tb td:first-child { background: #f8f8f8; } .mceContentBody div.setting div.winter-event2019 div.banner img { border-radius: 0; } .mceContentBody div.setting div.winter-event2019 div.recommend-bg { /* background: #dceaef; */ position: relative; padding-top: 0; padding-bottom: 0; border-radius: 10px; overflow: hidden; /* border: 1px solid #ccc; */; } .mceContentBody div.setting div.winter-event2019 div.recommend-bg:before { background: url(https://www.tottori-guide.jp/files/47108.png); background-size: 940px 460px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; content: ""; } .mceContentBody div.setting div.winter-event2019 div.recommend-bg div { position: relative; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.main.winter-event2020 { position: relative; } .mceContentBody div.setting div.winter-event2019 div.main.winter-event2020 div.winter-event2020-copy { width: 300px; height: 300px; width:32%; height:auto; aspect-ratio:1; display: block; top: 54.5%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; animation: 1s ease-in-out normal forwards running rotation; z-index:100; } .mceContentBody div.setting div.winter-event2019 div.main.winter-event2020 div.winter-event2020-copy img { width: 100%; height:100%; object-fit: cover; } @keyframes rotation { 0% { opacity: 0; transform: translateX(-50%) translateY(-50%) rotate(-20deg); } 100% { opacity: 1; transform: translateX(-50%) translateY(-50%) rotate(0); } } .mceContentBody div.setting div.winter-event2019 div.main.responsive { display: none; } @media screen and (max-width:768px) { .mceContentBody div.setting div.winter-event2019 div.main.default { display: none; } .mceContentBody div.setting div.winter-event2019 div.main.responsive { display: block; } .mceContentBody div.setting div.winter-event2019 .deco-tb td { border: 1px solid #ccc !important; padding: 0.25em 0.5em !important; } } .mceContentBody div.setting div.winter-event2019 div.winter-sports-article { padding: 1em; border: 1px solid #000; border-radius: 10px; box-sizing: border-box; background: #fff; margin-bottom: 20px; position: relative; } .mceContentBody div.setting div.winter-event2019 div.winter-sports-article div.place-label { background: #fff; border-radius: 1000px; position: absolute; top: -10px; right: -10px; width: 60px; height: 60px; white-space: nowrap; color: #333; line-height: 60px; text-align: center; font-weight: bold; border: 0.2rem solid #1a53a1; } .mceContentBody div.setting div.winter-event2019 div.winter-sports-article .deco-tb tr td:first-child { white-space: nowrap; } /* */ .mceContentBody div.setting div.winter-event2019 div.thumbnail { position: relative; } .mceContentBody div.setting div.winter-event2019 div.thumbnail div.area-name-label { position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; border: 0.2rem solid #d1a60d; border-radius: 1000rem; color: #333; z-index: 1000; background: #fff; font-weight: bold; } .mceContentBody div.setting div.winter-event2019 div.skiarea div.thumbnail div.area-name-label { position: absolute; top: 0; right: 0; width: 6rem; height: 6rem; border: 0.2rem solid #b7b8ba; border-radius: 1000rem; color: #333; z-index: 1000; background: #fff; font-weight: bold; } .mceContentBody div.setting div.winter-event2019 div.thumbnail div.area-name-label span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); white-space: nowrap; font-size: 1.4rem !important; } /* ------ ページリンク column-2 と column-3 */ /* ● column-3 イルミネーション情報・ゲレンデ情報・ウィンタースポーツ ● column-2 - シーズン後半 - ゲレンデ情報・ウィンタースポーツ */ .mceContentBody div.setting div.winter-event2019 div.page-link { margin-bottom: 40px; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li { float: left; margin-right: 2%; width: 32%; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(3) { margin-right: 0; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li { float: left; margin-right: 2%; width: 49%; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(2) { margin-right: 0; } .mceContentBody div.setting div.winter-event2019 div.page-link ul li::before { display: none; } .mceContentBody div.setting div.winter-event2019 div.page-link ul li a { border: 0.1rem solid #917f67; color: #917f67; display: block; font-size: 18px; font-weight: bold; padding: 1rem; position: relative; text-align: center; text-decoration: none; transition: all 0.25s ease 0s; background: #fff; z-index: 2; } .mceContentBody div.setting div.winter-event2019 div.page-link ul li a::before { border-bottom: 0.649519rem solid #917f67; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; bottom: -32.5px; content: ""; left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(180deg); z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.page-link ul li a::after { background: #917f67 none repeat scroll 0 0; bottom: -12.5px; content: ""; height: 2px; left: 50%; margin: auto; position: absolute; transform: translateX(-50%) translateY(0px) rotate(90deg); width: 20px; z-index: 1; } .mceContentBody div.setting div.winter-event2019 div.page-link ul li a img { max-width: 50%; display: block; margin-left: auto; margin-right: auto; } /* column が 2のとき */ .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(1) a { border: 0.1rem solid #b7b8ba !important; color: #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(1) a:before { border-bottom: 0.649519rem solid #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(1) a:after { background: #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(2) a { border: 0.1rem solid #333 !important; color: #333 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(2) a:before { border-bottom: 0.649519rem solid #333 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-2 ul li:nth-child(2) a:after { background: #333 !important; } /* column が 3のとき */ .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(1) a { border: 0.1rem solid #ddb028 !important; color: #ddb028 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(1) a:before { border-bottom: 0.649519rem solid #ddb028 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(1) a:after { background: #ddb028 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(2) a { border: 0.1rem solid #b7b8ba !important; color: #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(2) a:before { border-bottom: 0.649519rem solid #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(2) a:after { background: #b7b8ba !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(3) a { border: 0.1rem solid #333333 !important; color: #333333 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(3) a:before { border-bottom: 0.649519rem solid #333333 !important; } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li:nth-child(3) a:after { background: #333333 !important; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li { float: none; margin-bottom: 40px; margin-right: 0; width: 100%; } } .mceContentBody div.setting div.winter-event2019 div.page-link.column-3 ul li a:hover { opacity: 0.75; } /* --- 観光名刺 */ .mceContentBody div.meishi {} .mceContentBody div.meishi .LR_box .LR_box { box-sizing: border-box; display: inline-block; margin: 0; padding: 0 1% 1em; vertical-align: top; width: 24%; } .mceContentBody div.meishi .LR_box .new_box { box-sizing: border-box; display: inline-block; margin: 0; padding: 0 1% 1em; vertical-align: top; width: 49%; position: relative; } .mceContentBody div.meishi .LR_box .new_box img {} .mceContentBody div.meishi div.old-design { box-sizing: border-box; display: inline-block; margin: 0; padding: 0 1% 1em; vertical-align: top; width: 49%; position: relative; font-size: 0; background: #f0f0f0; border-radius: 5px; } .mceContentBody div.meishi div.old-design:before { position: absolute; width: 100%; top: -1.75em; content: "旧デザイン"; text-align: center; left: 0; z-index: 1; font-size: 16px; } .mceContentBody div.meishi .LR_box div.old-design .LR_box { box-sizing: border-box; display: inline-block; margin: 0; padding: 0.5em; vertical-align: top; width: 49%; font-size: 16px; } .mceContentBody div.meishi .LR_box .new_box div.new-label { background: #f66; width: 40px; height: 40px; top: -10px; left: -10px; position: absolute; color: #fff; line-height: 40px; font-size:10px; font-weight: bold; border-radius: 10000px; transform: rotate(-20deg); z-index:100;display: flex;align-items: center;justify-content: center; } .mceContentBody div.meishi div.soldout { position: relative; color: #f66; } .mceContentBody div.meishi div.soldout > div { overflow: hidden; } .mceContentBody div.meishi div.soldout > div > div { position: relative; } .mceContentBody div.meishi div.soldout > div > div::after { width: 150.0%; height: 2px; background: #f66; position: absolute; content: ""; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(-30deg); } @media only screen and (max-width: 768px) { .mceContentBody div.meishi .LR_box .LR_box { display: block; width: 100%; } .mceContentBody div.meishi .LR_box .new_box { display: block; width: 100%; } .mceContentBody div.meishi div.old-design { display: block; width: 100%; padding-top: 2rem; } .mceContentBody div.meishi div.old-design:before { top: -0.75em; } } /* --- フィルムコミッション */ body.fc .m_fc li { display: inline-block; letter-spacing: normal; margin: 0 1% 20px; text-align: center; vertical-align: top; width: 14.66%; white-space: nowrap; font-size: 0.9em; } /* --- 開運八社 修正 */ .mceContentBody div.setting div.kaiun8 div.kaiun-link-button { bottom: 1em; height: 150px; position: fixed; right: 4em; transition: all 0.25s ease 0s; width: 150px; z-index: 9999; } /* .mceContentBody div.setting div.kaiun8 div.kaiun-link-button { bottom: calc(0.5em + 150px); } */ @media screen and (max-width: 768px) { .mceContentBody div.setting div.kaiun8 div.kaiun-link-button { height: 100px; width: 100px; } .mceContentBody div.setting div.kaiun8 div.kaiun-link-button { bottom: calc(0); right: 0; } } .mceContentBody div.setting div.kaiun8 div.kaiun-link-button:hover { transform: scale(1.05); } .mceContentBody div.setting div.kaiun8 div.section div.kaiun-attention { border: 5px solid #ccc; padding: 1em; margin-bottom: 40px; } .mceContentBody div.setting div.kaiun8 div.section div.kaiun-attention div.headline { background: none; border-radius: 0; color: #e70012; font-size: 160%; font-weight: bold; margin-bottom: 0.5em; padding: 0; text-align: center; border-bottom: 2px solid #e70012; } .mceContentBody div.setting div.kaiun8 div.section div.kaiun-attention div.update { text-align: right; } /* --- とっとり知っとる? とっとりクイズ */ .mceContentBody div.setting div.tottori-quiz {} .mceContentBody div.setting div.tottori-quiz div.attention { border: 3px solid #ff0000; border-radius: 5px; padding: 1em; } .mceContentBody div.setting div.tottori-quiz div.attention div.headline { color: #ff0000; font-weight: bold; } .mceContentBody div.setting div.tottori-quiz .main { margin: 0 -20px 0; max-width: calc(100% + 40px); width: calc(100% + 40px); border-bottom: 5px solid #eee; } /* ひとまず けしておく */ .mceContentBody div.setting div.tottori-quiz div.quiz-article { display: none; } .mceContentBody div.setting div.tottori-quiz h3.quiz-category { display: none; } /* 最初の問題のみ */ .mceContentBody div.setting div.tottori-quiz h3.quiz-category.active { display: block; } .mceContentBody div.setting div.tottori-quiz div.quiz-article.active { display: block; } /* --- .question */ .mceContentBody div.setting div.tottori-quiz div.question { margin-bottom: 40px; } .mceContentBody div.setting div.tottori-quiz div.question div.number { font-size: 2.0em; font-weight: bold; line-height: 1; color: #f85984; text-align: center; margin-bottom: 0.5em; } .mceContentBody div.setting div.tottori-quiz div.question div.number span { font-size: 2.8em; font-weight: bold; letter-spacing: -1px; } .mceContentBody div.setting div.tottori-quiz div.question div.number span.denominator { font-size: 1.4em; font-weight: bold; letter-spacing: -1px; } .mceContentBody div.setting div.tottori-quiz div.question div.number span.denominator span.slash { font-size: 0.8em; font-weight: bold; letter-spacing: -1px; } .mceContentBody div.setting div.tottori-quiz div.question div.question-wrap { font-size: 1.4em; text-align: center; margin-bottom: 1em; } .mceContentBody div.setting div.tottori-quiz div.question div.photo-wrap { max-width: 60%; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer div.lead { text-align: center; margin-bottom: 1em; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul { /* reset */ margin: 0; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li:before { /* reset */ background: none; border-radius: none; content: ""; display: none; height: 0; margin: 0; vertical-align: middle; width: 0; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li { float: left; width: 32%; margin-right: 2%; position: relative; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li:nth-child(3) { margin-right: 0; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li a { display: block; text-align: center; padding: 1em; box-sizing: border-box; border: 3px solid #f85984; border-radius: 5px; text-decoration: none; z-index: 0; line-height: 1.25; color: #323c46; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li a span { font-size: 1.4em; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li a:hover { /* color: #f85984 !important; */ background: #fff1f5 !important; color: #533 !important; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li a:before { position: absolute; content: ""; width: 40px; height: 40px; background: #ffeb00; display: block; top: -1em; left: -10px; z-index: 10; border-radius: 1000px; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li a:after { position: absolute; content: "1"; width: 40px; height: 40px; color: #f85984; top: -0.75em; left: -10px; z-index: 10; font-size: 1.4em; font-weight: bold; line-height: 1.75; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li:nth-child(1) a:after { content: "1"; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li:nth-child(2) a:after { content: "2"; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li:nth-child(3) a:after { content: "3"; } /* 回答後 */ .mceContentBody div.setting div.tottori-quiz div.question div.select-answer.disabled { pointer-events: none; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer.disabled ul li a { border: 3px solid #ccc; background: #ccc; color: #eee; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer.disabled ul li.right a { border: 3px solid #f85984; background: #f85984; color: #fff !important; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer.disabled ul li a:before { display: none; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer.disabled ul li a:after { display: none; } /* --- .answer */ .mceContentBody div.setting div.tottori-quiz div.answer { border: 3px solid #ddd; border-radius: 5px; padding: 2em; margin-bottom: 40px; display: none; } .mceContentBody div.setting div.tottori-quiz div.answer.active { border: 3px solid #ddd; border-radius: 5px; padding: 2em; margin-bottom: 40px; display: block; } .mceContentBody div.setting div.tottori-quiz div.answer div.number { font-size: 2.0em; font-weight: bold; line-height: 1; color: #f85984; text-align: center; margin-bottom: 0.5em; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.symbol { display: inline-block; vertical-align: middle; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.symbol img { width: 60px; height: 60px; vertical-align: middle; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.yes-no { font-size: 2.0em; vertical-align: middle; } .mceContentBody div.setting div.tottori-quiz div.answer.yes div.number span.yes-no { color: #f85984; } .mceContentBody div.setting div.tottori-quiz div.answer.no div.number span.yes-no { color: #87b2df; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.answer-number { color: #333; vertical-align: middle; } .mceContentBody div.setting div.tottori-quiz div.answer div.photo-wrap { max-width: 60%; margin-left: auto; margin-right: auto; margin-bottom: 20px; } .mceContentBody div.setting div.tottori-quiz div.answer div.answer-text { margin-bottom: 1em; } .mceContentBody div.setting div.tottori-quiz div.answer div.link-btn a { background: #f85984; display: block; text-align: center; color: #fff; text-decoration: none; padding: 0.5em; font-weight: bold; box-shadow: 0 5px 0 rgba(248, 148, 175, 1); border-radius: 5px; } .mceContentBody div.setting div.tottori-quiz div.answer div.link-btn a:hover { opacity: 0.8; } /* 2026: tottori.css の .link-btn（枠線・inline-flex・背景・余白）が「次へ進む」の外側 div に効くのを無効に */ .mceContentBody div.setting div.tottori-quiz .link-btn { display: block; padding: 0; border: none; border-radius: 0; background: none; gap: 0; color: inherit; font-weight: inherit; transition: none; } .mceContentBody div.setting div.tottori-quiz .link-btn:hover { background: none; color: inherit; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.headline { box-sizing: border-box; display: inline-block; font-size: 2em; /* margin: 0 auto 0.5em; */ margin-bottom: 2em; margin-left: auto; margin-right: auto; padding: 0; position: relative; text-align: center; width: 100%; z-index: 10; font-weight: bold; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.right-count { text-align: center; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.right-count div.right { display: inline-block; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.right-count div.count { display: inline-block; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.right-count div.count span { font-size: 2.8em; font-weight: bold; letter-spacing: -1px; color: #f85984; } /* 正解率 */ .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate-wrap { text-align: center; margin-bottom: 20px; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate { display: inline-block; padding-left: 1em; padding-right: 1em; background: #f8f8f8; border: 1px solid #ccc; border-radius: 5px; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate div.right { display: inline-block; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate div.rate-number { display: inline-block; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate div.rate-number span { font-size: 2.8em; font-weight: bold; letter-spacing: -1px; color: #f85984; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.rate div.rate-number span.unit {} .mceContentBody div.setting div.tottori-quiz div.quiz-result table { border-top: 1px solid #ccc; border-collapse: collapse; /* width: 25%; */ margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.tottori-quiz div.quiz-result table th, .mceContentBody div.setting div.tottori-quiz div.quiz-result table td { border-bottom: 1px solid #ccc; } .mceContentBody div.setting div.tottori-quiz div.quiz-result table td img { width: 40px; height: 40px; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.tottori-quiz div.quiz-result div.entry-form table { border-top: 1px solid #ccc; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.entry-form table tr { display: block; padding-top: 0.5em; padding-top: 0.5em; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.entry-form table th, .mceContentBody div.setting div.tottori-quiz div.quiz-result div.entry-form table td { display: block; border: none; } .mceContentBody div.setting div.tottori-quiz div.quiz-result div.entry-form table input { padding: 0.75em; height: auto; } } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.tottori-quiz div.question div.question-wrap { font-size: 1.2em; text-align: left; } .mceContentBody div.setting div.tottori-quiz div.question div.photo-wrap { max-width: 100%; } .mceContentBody div.setting div.tottori-quiz div.question div.select-answer ul li { float: none; margin-right: 0; position: relative; width: 100%; margin-bottom: 20px; text-align: left; } .mceContentBody div.setting div.tottori-quiz div.answer { padding: 1em; } .mceContentBody div.setting div.tottori-quiz div.answer div.number { text-align: center; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.symbol img { height: 30px; width: 30px; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.yes-no { font-size: 1.2em; vertical-align: middle; /* text-align: left; */ text-align: center; /* padding: 2em 1em; */; } .mceContentBody div.setting div.tottori-quiz div.answer.active { padding: 1em 1em 2em; } .mceContentBody div.setting div.tottori-quiz div.answer div.number span.answer-number { display: block; padding-top: 0.5em; font-size: 0.7em; /* text-align: left; */ text-align: center; } .mceContentBody div.setting div.tottori-quiz div.answer div.photo-wrap { max-width: 100%; } .mceContentBody div.setting .resp_tl { text-align: left !important; } } /* --- */ /* --- ピクトグラム ダウンロード */ .mceContentBody table.download {} .mceContentBody table.download th { background: #f0f0f0; color: #333; } .mceContentBody table.download th, .mceContentBody table.download td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mceContentBody div.pict-list div.pict-wrap { padding: 1em; /* background: #f0f0f0; */ border: 0; /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */ float: left; width: 31%; margin-right: 3.5%; margin-bottom: 3rem; box-sizing: border-box; border-radius: 20px; } .mceContentBody div.pict-list div.pict-wrap:nth-child(3n) { margin-right: 0; } @media only screen and (max-width: 1000px) { .mceContentBody div.pict-list div.pict-wrap { float: left; width: 49%; margin-right: 2%; } .mceContentBody div.pict-list div.pict-wrap:nth-child(3n) { margin-right: 2%; } .mceContentBody div.pict-list div.pict-wrap:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 768px) { .mceContentBody div.pict-list div.pict-wrap { width: 100%; margin-right: 0; float: none; } } .mceContentBody div.pict-list div.pict-wrap img { border-radius: 20px; overflow: hidden; } /* ------ 夏は鳥取2020 */ .mceContentBody div.setting div.summer-season2020 .inline-block { display: inline-block; } .mceContentBody div.setting div.summer-season2020 a[href^="tel:"] { pointer-events: none; text-decoration: none; } .mceContentBody div.setting div.summer-season2020, .mceContentBody div.setting div.summer-season2020 table, .mceContentBody div.setting div.summer-season2020 table td, .mceContentBody div.setting div.summer-season2020 table th, .mceContentBody div.setting div.summer-season2020 p { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; color: #333; } .mceContentBody div.setting div.summer-season2020 div.main { /* margin-left: -20px; margin-right: -20px; margin-top: -30px; margin-top: -30px; */; } .mceContentBody div.setting div.summer-season2020 div.main img { width: 100%; display: block; } .mceContentBody div.setting div.summer-season2020 div.map { border-radius: 5px; overflow: hidden; max-width: 100%; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2020 div.map img { display: block; } /* アマビエ */ .mceContentBody div.setting div.summer-season2020 div.amabie-lead { text-align: center; margin-bottom: 40px; padding: 40px; border-radius: 10px; background: url(https://www.tottori-guide.jp/files/46064.png); } .mceContentBody div.setting div.summer-season2020 div.amabie-lead div.amabie-illust { max-width: 600px; margin-left: auto; margin-right: auto; } /* --------- */ .mceContentBody div.setting div.summer-season2020 div.link-contents { margin-top: 20px; margin-bottom: 20px; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:before { /* reset */ display: none; background: none; margin: 0; padding: 0; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li { /* reset */ background: none; margin: 0; padding: 0; display: block; width: 49%; margin-right: 2%; float: left; text-align: center; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a { text-decoration: none; background: #fdff00; display: block; padding: 1em; color: #333; font-weight: bold; font-size: 24px; box-sizing: border-box; border: 5px solid #fdff00; position: relative; transition: 0.125s all; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a:hover { background: #fff; border: 5px solid #fdff00; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:first-child a { color: #fe49aa; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:first-child a:hover { color: #fe49aa; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a:hover { color: #333; } .mceContentBody div.setting div.summer-season2020 .link, .mceContentBody div.setting div.summer-season2020 .linkButton { background: url("https://www.tottori-guide.jp/files/45930.png") no-repeat scroll left center / 16px auto; margin-bottom: 10px; padding-left: 20px; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a div.icon { max-width: 100px; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a span.en { display: block; font-size: 14px; text-align: center; color: #ccc; position: relative; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a span.ja { position: relative; display: inline-block; line-height: 1.5; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a span.ja > span { display: block; position: relative; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a span.ja > span:first-child:before { width: 2px; height: 1em; background: #fe49aa; display: block; position: absolute; content: ""; top: 0.3em; left: 0.5em; transform: rotate(-30deg); z-index: 1; transition: 0.125s all; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a span.ja > span:first-child:after { width: 2px; height: 1em; background: #fe49aa; display: block; position: absolute; content: ""; top: 0.3em; right: 0.5em; transform: rotate(30deg); z-index: 1; transition: 0.125s all; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:nth-child(2) a span.ja > span:first-child:before { background: #333; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li:nth-child(2) a span.ja > span:first-child:after { background: #333; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a:hover span.ja > span:first-child:before { /* transform: rotate(-40deg); */ top: -0.25em; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a:hover span.ja > span:first-child:after { /* transform: rotate(40deg); */ top: -0.25em; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a div.amabie { position: absolute; right: -5px; bottom: -50px; width: 150px; } /* --------- */ .mceContentBody div.setting div.summer-season2020 div.large-title { /* border: 5px solid #fdff00; */ padding: 1em; text-align: center; } .mceContentBody div.setting div.summer-season2020 div.kaisuiyoku div.large-title { background: url("https://www.tottori-guide.jp/files/46064.png"); } .mceContentBody div.setting div.summer-season2020 div.large-title div.large { font-size: 30px; font-weight: bold; } .mceContentBody div.setting div.summer-season2020 div.large-title + p { margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2020 div.large-title div.icon { max-width: 100px; margin-left: auto; margin-right: auto; } /* --------- */ .mceContentBody div.setting div.summer-season2020 div.zekkei div.article { background: #f0fbff; padding-left: 20px; padding-right: 20px; border-radius: 10px; } .mceContentBody div.setting div.summer-season2020 div.article { padding-top: 120px; padding-bottom: 80px; /* border-top: 1px solid #ccc; */ background: url(https://www.tottori-guide.jp/files/45929.png); background-size: 50px 45px; background-repeat: repeat-x; background-position: top; position: relative; z-index: 1; } .mceContentBody div.setting div.summer-season2020 div.zekkei div.article { padding-top: 40px; padding-bottom: 40px; } .mceContentBody div.setting div.summer-season2020 div.kaisuiyoku div.article:after { background: url(https://www.tottori-guide.jp/files/46060.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; right: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; } .mceContentBody div.setting div.summer-season2020 div.kaisuiyoku div.article:nth-child(even):after { background: url(https://www.tottori-guide.jp/files/46061.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; left: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; } .mceContentBody div.setting div.summer-season2020 div.article:last-child { border-bottom: 1px solid #ccc; } .mceContentBody div.setting div.summer-season2020 div.spot-number { /* background: #01a4dc; */ color: #6ec9ef; width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; border-radius: 1000px; /* box-sizing: border-box; */ border: 2px solid #6ec9ef; text-align: center; font-weight: bold; font-size: 20px; } .mceContentBody div.setting div.summer-season2020 div.kaisuiyoku div.spot-number { color: #fff; border: 2px solid #ff4aab; background: #ff4aab; } .mceContentBody div.setting div.summer-season2020 div.zekkei div.spot-number { color: #fff; border: 2px solid #333; background: #333; } .mceContentBody div.setting div.summer-season2020 div.spot-name { font-size: 30px; font-weight: bold; display: inline-block; vertical-align: middle; } .mceContentBody div.setting div.summer-season2020 div.article div.label { font-size: 18px; font-weight: bold; color: #6ec9ef; } .mceContentBody div.setting div.summer-season2020 div.article div.description { border: 3px solid #6ec9ef; padding: 1em; box-sizing: border-box; margin-bottom: 20px; border-radius: 5px; background: #fff; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo { position: relative; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo img { display: block; width: 100%; overflow: hidden; border-radius: 10px; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust.left { position: absolute; bottom: -40px; left: 0; z-index: 1; width: 40%; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust.right { position: absolute; bottom: -40px; right: 0; z-index: 1; width: 40%; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust.small { width: 30%; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust img { display: block; } .mceContentBody div.setting div.summer-season2020 div.article table { border-collapse: collapse; border-top: 1px solid #333; width: 100%; table-layout: fixed; margin-bottom: 20px; } .mceContentBody div.setting div.summer-season2020 div.article table th, .mceContentBody div.setting div.summer-season2020 div.article table td { border-bottom: 1px solid #333; padding-top: 0.75em; padding-bottom: 0.75em; color: #333; } .mceContentBody div.setting div.summer-season2020 div.article table th { /* width: 20%; */ text-align: left; } .mceContentBody div.setting div.summer-season2020 div.article div.voice { /* background: #fdff00; */ background: #fff; padding: 1em; text-align: center; border-radius: 10px; border: 3px solid #ccc; font-weight: bold; font-size: 18px; position: relative; width: 80%; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.left { float: right; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.right { float: left; } /* */ .mceContentBody div.setting div.summer-season2020 div.article div.voice.right:after { background: url(https://www.tottori-guide.jp/files/46062.png); background-size: 80px 80px; position: absolute; top: 50%; right: -100px; transform: translateY(-50%); width: 75px; height: 75px; content: ""; border-radius: 1000px; overflow: hidden; border: 3px solid #ccc; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.right:before { border-color: #ccc transparent transparent; border-style: solid; border-width: 24px 14px 14px; content: ""; display: block; position: absolute; top: 50%; right: -24px; transform: translateY(-50%) rotate(-110deg); z-index: -1; } /* */ .mceContentBody div.setting div.summer-season2020 div.article div.voice.left:after { background: url(https://www.tottori-guide.jp/files/46063.png); background-size: 80px 80px; position: absolute; top: 50%; left: -100px; transform: translateY(-50%); width: 75px; height: 75px; content: ""; border-radius: 1000px; overflow: hidden; border: 3px solid #ccc; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.left:before { border-color: #ccc transparent transparent; border-style: solid; border-width: 24px 14px 14px; content: ""; display: block; position: absolute; top: 50%; left: -24px; transform: translateY(-50%) rotate(110deg); z-index: -1; } /* */ .mceContentBody div.setting div.summer-season2020 div.article div.voice div.label-voice { font-weight: bold; font-size: 18px; } .mceContentBody div.setting div.summer-season2020 p.alert { border: 3px solid #ff0000; border-radius: 5px; padding: 1em; } .mceContentBody div.setting div.summer-season2020 div.scroller { position: fixed; z-index: 10000; /* top: -60px; */ /* */ right: 20px; bottom: 20px; display: block; width: 60px; height: 60px; } .mceContentBody div.setting div.summer-season2020 div.scroller div.button { position: absolute; top: 0; width: 60px; height: 60px; } .mceContentBody div.setting div.summer-season2020 div.scroller div.button a { position: relative; display: block; width: 60px; height: 60px; background: #ff4aab; } .mceContentBody div.setting div.summer-season2020 div.scroller div.button a:hover { opacity: 0.8; } .mceContentBody div.setting div.summer-season2020 div.scroller div.button a.scrollTop::before { position: absolute; top: 55%; left: 50%; display: block; width: 12px; height: 12px; content: ''; transform: translateX(-50%) translateY(-50%) rotate(-45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; } .mceContentBody div.setting div.summer-season2020 div.scroller div.button a.scrollTop::after { position: absolute; top: -2em; left: 50%; transform: translateX(-50%); white-space: nowrap; display: block; font-weight: bold; color: #ff4aab; content: 'MAPへ戻る'; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2020 div.link-contents ul li { float: none; margin: 0; margin-bottom: 0.5em; text-align: center; width: 100%; } .mceContentBody div.setting div.summer-season2020 div.link-contents ul li a { font-size: 18px; padding: 0.5em; } .mceContentBody div.setting div.summer-season2020 div.large-title div.large { font-size: 24px; } .mceContentBody div.setting div.summer-season2020 div.article div.label { text-align: center; } .mceContentBody div.setting div.summer-season2020 a[href^="tel:"] { pointer-events: auto; color: #333; text-decoration: underline; } .mceContentBody div.setting div.summer-season2020 a[href^="tel:"]:hover { text-decoration: none; color: #f66; } .mceContentBody div.setting div.summer-season2020 div.article table { table-layout: auto; } .mceContentBody div.setting div.summer-season2020 div.article table th { white-space: nowrap; width: auto; } .mceContentBody div.setting div.summer-season2020 div.spot-number { margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2020 div.spot-name { font-size: 24px; margin-bottom: 10px; text-align: center; display: block; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.left, .mceContentBody div.setting div.summer-season2020 div.article div.voice.right { float: none; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.left:after, .mceContentBody div.setting div.summer-season2020 div.article div.voice.right:after { background: url(https://www.tottori-guide.jp/files/46062.png); background-size: 80px 80px; position: relative; top: auto; right: auto; left: 50%; bottom: -18px; transform: translateX(-50%); transform: none; width: 80px; height: 80px; display: block; content: ""; border-radius: 0; overflow: hidden; border: none; } .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust.right, .mceContentBody div.setting div.summer-season2020 div.article div.spot-photo div.amabie-illust.left { bottom: -40px; } .mceContentBody div.setting div.summer-season2020 div.article div.voice.left:before, .mceContentBody div.setting div.summer-season2020 div.article div.voice.right:before { display: none; } } /* --------- 鳥取の梨シーズン到来! */ .mceContentBody div.setting.nashi.season2020 ul.column4 {} .mceContentBody div.setting.nashi.season2020 ul.column4 li { float: left; width: 18.4%; margin-right: 2%; } .mceContentBody div.setting.nashi.season2020 ul.column4 li:nth-child(5) { margin-right: 0; } .mceContentBody div.setting.nashi.season2020 ul.column4 li a { padding-left: 0; padding-right: 0; font-size: 14px; } .mceContentBody div.setting.nashi.season2020 ul.column4 li a:before, .mceContentBody div.setting.nashi.season2020 ul.column4 li a:after { display: none; } .mceContentBody div.setting.nashi ul.deco-list li::before { display: block; top: 1.5rem; } .mceContentBody div.setting.nashi ul.deco-list li { padding-left: 1.5rem; } @media only screen and (max-width: 768px) { .mceContentBody div.setting.nashi.season2020 .resp_m_u0 { margin-bottom: 0 !important; } .mceContentBody div.setting.nashi.season2020 ul.column4 li { float: left; width: 49.0%; margin-right: 2%; } .mceContentBody div.setting.nashi.season2020 ul.column4 li:nth-child(5) { margin-right: 0; } .mceContentBody div.setting.nashi.season2020 ul.column4 li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.nashi.season2020 ul.column4 li a { padding-left: 0; padding-right: 0; font-size: 14px; } } /* 千代むすび酒造「梨語り」 */ .mceContentBody div.setting.nashi.season2020 div.chiyomusubi { margin-top: -65px; } @media only screen and (max-width: 480px) { .mceContentBody div.setting.nashi.season2020 ul.column4 li { float: none; width: 100.0%; margin-right: 0; } /* 千代むすび酒造「梨語り」 */ .mceContentBody div.setting.nashi.season2020 div.chiyomusubi { margin-top: 0; } } .mceContentBody div.nashi div.subhead { margin-bottom: 0.25em; } @media only screen and (max-width: 768px) { .mceContentBody div.setting.nashi.season2020 div.nashi-table {} .mceContentBody div.setting.nashi.season2020 div.nashi-table { position: relative; overflow-x: scroll; -webkit-overflow-scrolling: touch; position: relative; } .mceContentBody div.setting.nashi.season2020 div.nashi-table:before { position: relative; content: "※スマートフォンの場合には、横にスクロールして閲覧してください"; display: block; width: 100%; line-height: 1.5; font-size: 1em; /* color: #fd3b3c; */ color: #777; border: 2px solid #ededed; margin-bottom: 1em; padding: 0.5em; box-sizing: border-box; background: #fafafa; } .mceContentBody div.setting.nashi.season2020 div.nashi-table table { table-layout: auto; white-space: nowrap; width: 500px !important; } .mceContentBody div.nashi.season2020 div.head { font-size: 1.8em; line-height: 1.25 !important; } .mceContentBody div.nashi.season2020 div.subhead { font-size: 1.2em; } } /* --------- template */ /* reset */ .mceContentBody div.setting.template { /* max-width: 600px; */ margin-left: auto; margin-right: auto; } .mceContentBody div.setting.template h4 { background: none; color: #533; } .mceContentBody div.setting.template h4 { background: none; } .mceContentBody div.setting.template h4 a::before, .mceContentBody div.setting.template h4::before { display: none; } .mceContentBody div.setting.template h4 a::after, .mceContentBody div.setting.template h4::after { display: none; } .mceContentBody div.setting.template img { display: block; margin-left: auto; margin-right: auto; position: relative; z-index: 1; margin-bottom: 1rem; width: 100%; height: auto; } /* --- 大山ページ */ .mceContentBody div.setting.daisen { background: #f8f8f8; } .mceContentBody div.setting.daisen div.inner { max-width: 100rem; width: 100%; box-sizing: border-box; border-left: 0.1rem solid #ccc; background: #fff; padding-bottom: 4rem; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.125); margin-left: auto; margin-right: auto; } /* .mceContentBody div.setting.daisen div.inner { max-width: 1000px; margin-left: auto; margin-right: auto; } */ .mceContentBody div.setting.daisen div.lead-description { padding-left: 0.5em; padding-right: 0.5em; } .mceContentBody div.setting.daisen video { max-width: 100%; } .mceContentBody div.setting.daisen h4 { /* background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #323c46; */ background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 2.4rem; font-weight: bold; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #323c46 !important; letter-spacing: 0.1rem; color: #533; border-bottom: none; } .mceContentBody div.setting.daisen h4.tl { text-align: left; } .mceContentBody div.setting.daisen h4 a { color: #533; } .mceContentBody div.setting.daisen h4 a::before, .mceContentBody div.setting.daisen h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.daisen h4 a::after, .mceContentBody div.setting.daisen h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.daisen, .mceContentBody div.setting.daisen p, .mceContentBody div.setting.daisen th, .mceContentBody div.setting.daisen td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } /* .mceContentBody div.setting.daisen, .mceContentBody div.setting.daisen p, .mceContentBody div.setting.daisen td { font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif; } */ .mceContentBody div.setting.daisen h5 { /* color: #533; border-top: none; margin-top: 0; margin-bottom: 0.5em; padding: 0; border-bottom: 2px solid #f0f0f0; border-radius: 0; */ color: #323c46; border-top: none; margin-top: 0; margin-bottom: 0.5em; padding-top: 1.25rem; padding-bottom: 1.25rem; padding-left: 1rem; padding-right: 1rem; border-bottom: 2px solid #f0f0f0; border: 0.1rem solid #323c46; border-radius: 0; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; background: none; } .mceContentBody div.setting.daisen h5 a { color: #323c46; text-decoration: none; padding-left: 2rem; position: relative; } .mceContentBody div.setting.daisen h5 a:before { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; left: 0; content: ""; border-top: 0.1rem solid #323c46; border-right: 0.1rem solid #323c46; transform: translateY(-50%) rotate(45deg); } /* .mceContentBody div.setting.daisen table.deco-tb td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .mceContentBody div.setting.daisen div.deco-box div.title { line-height: 1; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-weight: bold; font-size: 2.4em; margin-top: -1em; } */ .mceContentBody div.setting.daisen table.deco-tb th { vertical-align: middle; } .mceContentBody div.setting.daisen table.deco-tb th, .mceContentBody div.setting.daisen table.deco-tb td { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; border-left: none; border-right: none; padding: 0.25rem 1rem; font-weight: normal; } .mceContentBody div.setting.daisen table.deco-tb th strong { font-weight: normal; } /* */ .mceContentBody div.setting.daisen div.link-bar { background: none; padding: 1rem; } .mceContentBody div.setting.daisen div.link-bar a { text-decoration: none; color: #323c46; } .mceContentBody div.setting.daisen div.link-bar .w19 { width: 19.2%; } .mceContentBody div.setting.daisen div.link-bar span.thumbnail { padding-top: 100%; position: relative; border-radius: 1000px; box-sizing: border-box; } .mceContentBody div.setting.daisen div.link-bar span.thumbnail img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 200%; max-width: inherit; } .mceContentBody div.setting.daisen a.link-more { width: 50%; padding: 10px; box-sizing: border-box; text-align: center; display: block; background: #323c46; color: #fff; border-radius: 1000rem; text-decoration: none; margin-left: auto; margin-right: auto; position: relative; } .mceContentBody div.setting.daisen a.link-more:before { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; right: 2rem; content: ""; border-top: 0.1rem solid #fff; border-right: 0.1rem solid #fff; transform: translateY(-50%) rotate(45deg); } body.daisen .mceContentBody div.setting.daisen a.link-page { padding-left: 1.25rem; position: relative; display: block; text-decoration: none; } body.daisen .mceContentBody div.setting.daisen a.link-page:before { width: 0.5rem; height: 0.5rem; position: absolute; top: 1.25rem; left: 0; content: ""; border-top: 0.125rem solid #2292d0; border-right: 0.125rem solid #2292d0; transform: rotate(45deg); } /* daisen-top-thumbnail */ .mceContentBody div.setting.daisen div.daisen-top-thumbnail { margin-bottom: 0; } .mceContentBody div.setting.daisen div.daisen-top-thumbnail ul { list-style: none; margin-bottom: 0; } .mceContentBody div.setting.daisen div.daisen-top-thumbnail.column-3 ul li { width: 33.33%; float: left; } @media screen and (max-width:768px) { .mceContentBody div.setting.daisen div.daisen-top-thumbnail.column-3 ul li { width: 50.00%; float: left; } } .mceContentBody div.setting.daisen div.daisen-top-thumbnail.column-2 ul li { width: 50.00%; float: left; } .mceContentBody div.setting.daisen div.daisen-top-thumbnail ul li::before { /* reset */ background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: middle; width: 0; } .mceContentBody div.setting.daisen div.daisen-top-thumbnail img { display: block; width: 100%; transition: 0.2s all; } .mceContentBody div.setting.daisen div.daisen-top-thumbnail a:hover img { opacity: 0.75; } /* */ .mceContentBody div.setting.daisen div.scrollTop { bottom: 50px; display: block; position: fixed; right: 50px; z-index: 9999; white-space: nowrap; } .mceContentBody div.setting.daisen div.scrollTop a { display: block; height: 80px; width: 80px; text-decoration: none; background: #fff; border: 0.2rem solid #fb93bd; border-radius: 1000px; position: relative; transition: 0.2s all; } .mceContentBody div.setting.daisen div.scrollTop a:before { border-right: 2px solid #fb93bd; border-top: 2px solid #fb93bd; content: ""; display: block; height: 20px; width: 20px; top: 55%; left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg); } .mceContentBody div.setting.daisen div.scrollTop a:hover { opacity: 0.5; } /* */ .mceContentBody div.setting.daisen div.alert-box { border: 1px solid #ccc; /* padding: 1em 3em; */ padding: 1em; } .mceContentBody div.setting.daisen .m_u160 { margin-bottom: 160px; } .mceContentBody div.setting.daisen .m_u80 { margin-bottom: 80px; } .mceContentBody div.setting.daisen br.responsive { display: none; } .mceContentBody div.setting.daisen ul.information-link { margin-bottom: 2em; } .mceContentBody div.setting.daisen ul.information-link li { float: left; width: 32%; margin-right: 2%; text-align: center; } .mceContentBody div.setting.daisen ul.information-link li.w100 { float: none; width: 100%; margin-right: 0; } .mceContentBody div.setting.daisen ul.information-link li:last-child { margin-right: 0; } .mceContentBody div.setting.daisen ul.information-link li::before { background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: inherit; width: 0; } .mceContentBody div.setting.daisen ul.information-link li a { /* display: block; padding: 1em 0; text-decoration: none; background: #f66; color: #fff; */ display: block; padding: 1rem 0; text-decoration: none; background: #fff; color: #fb93bd; border: 0.2rem solid #fb93bd; border-radius: 1000rem; line-height: 1.5; } .mceContentBody div.setting.daisen ul.information-link li a::before { width: 0.75rem; height: 0.75rem; position: absolute; top: 50%; right: 2rem; content: ""; border-top: 0.1rem solid #fb93bd; border-right: 0.1rem solid #fb93bd; transform: translateY(-50%) rotate(45deg); } /* thumbnail */ .mceContentBody div.setting.daisen div.clearfix div span.thumbnail { overflow: hidden; display: block; } .mceContentBody div.setting.daisen a { position: relative; } .mceContentBody div.setting.daisen a img { transition: all 1s; display: block; } .mceContentBody div.setting.daisen a:hover img { /* transform: scale( 1.05, 1.05); filter: saturate(110%); */ opacity: 0.9; } /* */ .mceContentBody div.setting.daisen div.topics {} .mceContentBody div.setting.daisen div.topics ul li:before { background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: inherit; width: 0; } .mceContentBody div.setting.daisen div.topics ul { border-top: 1px dotted #ccc; } .mceContentBody div.setting.daisen div.topics ul li { border-bottom: 1px dotted #ccc; padding: 0.5em 0; display: block; } .mceContentBody div.setting.daisen div.topics ul li a {} .mceContentBody div.setting.daisen div.topics div.update { float: left; margin-right: 1em; } .mceContentBody div.setting.daisen div.topics div.title { overflow: hidden; } .mceContentBody div.setting.daisen span.number { background: #f57c00 none repeat scroll 0 0; border-radius: 100px; color: #fff; display: inline-block; height: 1.5em; margin-left: 0.5em; text-align: center; vertical-align: middle; width: 1.5em; } body.daisen { background: #fff; } body.daisen br.responsive { display: none; } body.daisen .mceContentBody { padding: 0; } body.daisen .mceContentBody div.setting { margin: 0; padding: 0; } body.daisen .mceContentBody div.setting.daisen > div.inner > div.mainvisual { /*width: calc(100vw - 40px); position: relative; left: 50%; transform: translateX(-50%);*/ } body.daisen .mceContentBody div.setting.daisen div.view-map { background: #f0f0f0; border-radius: 10px; overflow: hidden; } body.daisen .mceContentBody div.setting.daisen ul.view-list {} body.daisen .mceContentBody div.setting.daisen ul.view-list li { float: left; width: 23.5%; margin-right: 2%; font-size: 15px; white-space: nowrap; margin-bottom: 1em; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(4n) { margin-right: 0; } body.daisen .mceContentBody div.setting.daisen ul.view-list li::before { /* reset */ background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: middle; width: 0; } body.daisen .mceContentBody div.setting.daisen ul.view-list a { text-decoration: none; } body.daisen .mceContentBody div.setting.daisen ul.view-list a span.link-page { position: relative; } body.daisen .mceContentBody div.setting.daisen ul.view-list a span.link-page { padding-left: 1.25rem; position: relative; display: block; text-decoration: none; } body.daisen .mceContentBody div.setting.daisen ul.view-list a span.link-page:before { width: 0.5rem; height: 0.5rem; position: absolute; top: 1.25rem; left: 0; content: ""; border-top: 0.125rem solid #2292d0; border-right: 0.125rem solid #2292d0; transform: rotate(45deg); } /* fancybox */ body.daisen #fancybox-title-float-main { font-size: 16px; } body.daisen .mceContentBody div.deco-box { background: none; padding: 0; } body.daisen .mceContentBody { margin-bottom: 0; max-width: 100%; } body.daisen .mceContentBody .link::after, body.daisen .mceContentBody .linkButton::after { top: 0.25rem; transform: translateY(0); } body.daisen .mceContentBody .link::before, body.daisen .mceContentBody .linkButton a::before { top: 0.9rem; transform: translateX(-50%) translateY(0) rotate(45deg); } body.daisen div.footer { background: #323c46; } body.daisen div.footer { background: #323c46; } body.daisen div.footer a { color: #fff; text-decoration: none; } @media screen and (max-width:1000px) { body.daisen .mceContentBody div.setting.daisen > div.inner > div.mainvisual { width: 100%; left: 0; transform: none; } body.daisen .mceContentBody div.setting.daisen ul.view-list {} body.daisen .mceContentBody div.setting.daisen ul.view-list li { float: left; width: 32.0%; margin-right: 2%; font-size: 15px; white-space: normal; margin-bottom: 1em; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(4n) { margin-right: 2%; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(3n) { margin-right: 0; } } @media screen and (max-width:768px) { .mceContentBody div.setting.daisen a.link { /* margin: 0 1em; */ } .mceContentBody div.setting.daisen div.inner.convenient { padding: 0 1em; } body.daisen { width: 100%; min-width: inherit; /* overflow: hidden; */; } body.daisen .mceContentBody div.setting.daisen h5 { padding-left: 1em; padding-right: 1em; } body.daisen p { /* padding-left: 1em !important; padding-right: 1em !important; */; } body.daisen p.link { /* margin-left: 1em !important; margin-right: 1em !important; */; } body.daisen br.responsive { display: block; } .mceContentBody div.setting.daisen div.inner { max-width: 1200px; margin-left: auto; margin-right: auto; } /* .mceContentBody div.setting.daisen table.deco-tb { border-top: 1px solid #ccc; } .mceContentBody div.setting.daisen table.deco-tb td { padding: 0.2em 1em !important; box-sizing: border-box; display: block; } .mceContentBody div.setting.daisen table.deco-tb tr td { border: none !important; } .mceContentBody div.setting.daisen table.deco-tb tr { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; display: block; } */ .mceContentBody div.setting.daisen table.deco-tb { border: none; border-top: 1px solid #ccc; } .mceContentBody div.setting.daisen table.deco-tb th, .mceContentBody div.setting.daisen table.deco-tb td { padding: 0.2rem 1rem !important; box-sizing: border-box; display: block; } .mceContentBody div.setting.daisen table.deco-tb tr th, .mceContentBody div.setting.daisen table.deco-tb tr td { border: none !important; } .mceContentBody div.setting.daisen table.deco-tb tr { /* border-top: 1px solid #ccc; */ border-bottom: 1px solid #ccc; display: block; } .mceContentBody div.setting.daisen br.responsive { display: block; } .mceContentBody div.setting.daisen ul.information-link { padding: 0 1em; } .mceContentBody div.setting.daisen ul.information-link li { float: none; width: 100%; margin-right: 0; text-align: center; } .mceContentBody div.setting.daisen div.link-bar .w19.resp_w49 { width: 49%; } .mceContentBody div.setting.daisen div.deco-box div.title { margin-top: 0; } body.daisen div.description { padding: 0 1em; } .mceContentBody div.setting.daisen div.topics { padding: 0 1em; } .mceContentBody div.setting.daisen .resp_m_u160 { margin-bottom: inherit; } .mceContentBody div.setting.daisen .m_u80 { margin-bottom: inherit; } .mceContentBody div.setting.daisen .resp_m_u40 { margin-bottom: 40px; } .mceContentBody div.setting.daisen div.mainvisual { overflow: hidden; } body.daisen div.mainvisual img { width: 200% !important; max-width: none !important; transform: translate(-25%, 0px) !important; } body.daisen .mceContentBody div.setting.daisen ul.view-list {} body.daisen .mceContentBody div.setting.daisen ul.view-list li { float: left; width: 49.0%; margin-right: 2%; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(4n) { margin-right: 2%; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(3n) { margin-right: 2%; } body.daisen .mceContentBody div.setting.daisen ul.view-list li:nth-child(2n) { margin-right: 0; } body.daisen #ContsBox.mceContentBody div.setting .fl { float: left !important; } body.daisen #ContsBox.mceContentBody div.setting .fr { float: right !important; } body.daisen #ContsBox.mceContentBody div.setting .fr { float: right !important; } } /* ------ sns-campaign */ .mceContentBody div.setting div.sns-campaign, .mceContentBody div.setting div.sns-campaign p, .mceContentBody div.setting div.sns-campaign table td, .mceContentBody div.setting div.sns-campaign table th { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; color: #333; } .mceContentBody div.setting div.sns-campaign div.main { /* margin-top: -30px; margin-left: -20px; margin-right: -20px; */; } .mceContentBody div.setting div.sns-campaign div.recommended.first-part ul li { width: 49%; float: left; margin-right: 2%; } .mceContentBody div.setting div.sns-campaign div.recommended.second-part ul li { width: 32%; float: left; margin-right: 2%; } .mceContentBody div.setting div.sns-campaign div.recommended.first-part ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting div.sns-campaign div.recommended.second-part ul li:nth-child(3) { margin-right: 0; } /* トップページの部分を移設 */ .mceContentBody div.setting div.sns-campaign div.info_box { width: 100%; padding: 1rem; box-sizing: border-box; margin: 0; } .mceContentBody div.setting div.sns-campaign div.info_box .tab_content { overflow: visible; padding: 2rem; width: 100%; box-sizing: border-box; } .mceContentBody div.setting div.sns-campaign div.info_box .tab_content li ul li { overflow: visible; width: 100%; box-sizing: border-box; } /* ------ reset */ .mceContentBody div.setting div.sns-campaign ul.deco-list li::before, .mceContentBody div.setting div.sns-campaign ul.tab_content li::before { display: none; } /* */ .mceContentBody div.setting div.sns-campaign ul.deco-list li { position: relative; padding-left: 0.95rem; } .mceContentBody div.setting div.sns-campaign ul.deco-list li:before { position: absolute; content: ""; background: #333; width: 0.5rem; height: 0.5rem; top: 0.85rem; left: 0; border-radius: 1000px; display: block; } .mceContentBody div.setting div.sns-campaign div.recommended ul li { margin-bottom: 1.125rem; box-sizing: border-box; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); border-radius: 0.5rem; overflow: hidden; } .mceContentBody div.setting div.sns-campaign div.recommended ul li img { display: block; } .mceContentBody div.setting div.sns-campaign div.recommended ul li:before { /* reset */ display: none; } .mceContentBody div.setting div.sns-campaign h4 { background: none; box-sizing: border-box; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-size: 1.8em; font-weight: normal; height: auto; margin: 0 0 0.5em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #333; font-size: 1.6rem; } .mceContentBody div.setting div.sns-campaign h3 { margin-top: 4rem; color: #333; font-weight: normal; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ border-bottom: 1px solid #000; margin-bottom: 2rem; padding-bottom: 1rem; } .mceContentBody div.setting div.sns-campaign h4.tl { text-align: left; } .mceContentBody div.setting div.sns-campaign h4 a { color: #533; } .mceContentBody div.setting div.sns-campaign h4 a::before, .mceContentBody div.setting div.sns-campaign h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting div.sns-campaign h4 a::after, .mceContentBody div.setting div.sns-campaign h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting div.sns-campaign div.deco-box { background: #f8f8f8; padding: 1rem 2rem 2rem; box-sizing: border-box; border-radius: 0.25rem; } /* ------ ushi-campaign */ .mceContentBody div.setting div.ushi-campaign { /* background: url(https://www.tottori-guide.jp/files/47458.jpg); */ background-size: 250px 250px; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-bottom: -40px; padding-bottom: 40px; background: #000; color: #fff; position: relative; } .mceContentBody div.setting div.ushi-campaign:before { background: url(https://www.tottori-guide.jp/files/47550.png); background-size: 82px 245px; background-position: left; height: 100%; width: 82px; pointer-events: none; position: absolute; content: ""; top: 0; left: 0; z-index: 0; } .mceContentBody div.setting div.ushi-campaign:after { background: url(https://www.tottori-guide.jp/files/47550.png); background-size: 82px 245px; background-position: right; height: 100%; width: 82px; pointer-events: none; position: absolute; content: ""; top: 0; right: 0; z-index: 0; transform: rotate(180deg); } .mceContentBody div.setting div.ushi-campaign div.ushi-campaign-contents { position: relative; z-index: 1; } .mceContentBody div.setting div.ushi-campaign, .mceContentBody div.setting div.ushi-campaign p, .mceContentBody div.setting div.ushi-campaign table td, .mceContentBody div.setting div.ushi-campaign table th { font-family: 'M PLUS Rounded 1c', sans-serif; color: #fff; } .mceContentBody div.setting div.ushi-campaign a { color: #fff; } .mceContentBody div.setting div.ushi-campaign div.main { /* margin-top: -30px; margin-left: -20px; margin-right: -20px; margin-bottom: 40px; */; } /* video */ .mceContentBody div.setting div.ushi-campaign div.main { position: relative; } .mceContentBody div.setting div.ushi-campaign div.main-video { width: 100%; padding-top: 56.25%; position: relative; } .mceContentBody div.setting div.ushi-campaign div.main-video video { width: 100%; max-width: 100%; z-index: 0; } .mceContentBody div.setting div.ushi-campaign div.main-video-copy { position: absolute; top: 50%; left: 70%; /* */ transform: translateX(-50%) translateY(-50%); width: 650px; /* */ z-index: 1; } .mceContentBody div.setting div.ushi-campaign div.main-video-copy img { width: 100%; } .mceContentBody div.setting div.ushi-campaign div.main-video video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.setting div.ushi-campaign div.recommended.first-part ul li { width: 49%; float: left; margin-right: 2%; } .mceContentBody div.setting div.ushi-campaign div.recommended.second-part ul li { width: 32%; float: left; margin-right: 2%; } .mceContentBody div.setting div.ushi-campaign div.recommended.first-part ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting div.ushi-campaign div.recommended.second-part ul li:nth-child(3) { margin-right: 0; } /* ------ reset */ .mceContentBody div.setting div.ushi-campaign ul.deco-list li::before { display: none; } /* */ .mceContentBody div.setting div.ushi-campaign ul.deco-list li { position: relative; padding-left: 0.95rem; } .mceContentBody div.setting div.ushi-campaign ul.deco-list li:before { position: absolute; content: ""; background: #333; width: 0.5rem; height: 0.5rem; top: 0.85rem; left: 0; border-radius: 1000px; display: block; } .mceContentBody div.setting div.ushi-campaign div.recommended ul li { margin-bottom: 1.125rem; } .mceContentBody div.setting div.ushi-campaign div.recommended ul li:before { /* reset */ display: none; } .mceContentBody div.setting div.ushi-campaign h4 { background: none; box-sizing: border-box; font-family: 'M PLUS Rounded 1c', sans-serif; font-size: 2.0em; font-weight: bold; height: auto; margin: 0 0 1em !important; padding: 0; position: relative; text-align: center; width: 100%; color: #000; font-size: 1.6rem; } .mceContentBody div.setting div.ushi-campaign h3 { margin-top: 4rem; color: #fff; font-weight: normal; font-family: 'M PLUS Rounded 1c', sans-serif; /* border-bottom: 1px solid #000; */ margin-bottom: 2rem; /* padding-bottom: 1rem; */ background: #d80c18; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.75); font-size: 2.4em; font-weight: bold; } .mceContentBody div.setting div.ushi-campaign h3:before { content: ""; position: absolute; top: 2px; width: 100%; height: 2px; background: #e5c674; left: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); } .mceContentBody div.setting div.ushi-campaign h3:after { content: ""; position: absolute; bottom: 2px; width: 100%; height: 2px; background: #e5c674; left: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); } .mceContentBody div.setting div.ushi-campaign h3 img { max-width: 500px; padding-top: 0.25em; padding-bottom: 0.25em; } .mceContentBody div.setting div.ushi-campaign h4 { background: #e5c674; border-radius: 1000px; } .mceContentBody div.setting div.ushi-campaign h4.tl { text-align: left; } .mceContentBody div.setting div.ushi-campaign h4 a { color: #533; } .mceContentBody div.setting div.ushi-campaign h4 a::before, .mceContentBody div.setting div.ushi-campaign h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting div.ushi-campaign h4 a::after, .mceContentBody div.setting div.ushi-campaign h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting div.ushi-campaign h5 { background: none; border: none; box-shadow: none; box-sizing: border-box; color: #fff; font-size: 1.6em; font-weight: bold; margin: 0.5em 0 0; overflow: hidden; padding: 0.5em 0 0; border-bottom: 2px solid #fff; } .mceContentBody div.setting div.ushi-campaign h6 { color: #fff; } /* -------- thumbnail */ .mceContentBody div.setting div.ushi-campaign div.thumbnail { border-radius: 10px; /* */ overflow: hidden; margin-bottom: 20px; } .mceContentBody div.setting div.ushi-campaign div.thumbnail img { display: block; } /* */ .mceContentBody div.setting div.ushi-campaign p.lead { font-size: 1.6em; font-weight: bold; } .mceContentBody div.setting div.ushi-campaign .description { border: 3px dotted #ccc; /* background: #fbf3e1; */ padding: 1rem; border-radius: 1rem; } .mceContentBody div.setting div.ushi-campaign table.deco-tb { border: 1px solid #ccc; font-size: 14px; } .mceContentBody div.setting div.ushi-campaign table.deco-tb th { background: #f8f8f8; border-top: none; border-bottom: 1px solid #ccc; color: #333; padding: 0.125em 0.25em; } .mceContentBody div.setting div.ushi-campaign table.deco-tb td { background: #fff; border-top: none; border-bottom: 1px solid #ccc; color: #333; padding: 0.125em 0.25em; } /* */ .mceContentBody div.setting div.ushi-campaign div.time-schedule {} .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-day { font-size: 60px; text-align: center; color: #e5c674; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-day span { font-size: 30px; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article { color: #000; background: #fff; border-radius: 1rem; padding: 1rem; margin-bottom: 2rem; position: relative; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article:before { position: absolute; content: ""; left: 50%; bottom: -40px; transform: translateX(-50%); height: 50px; width: 5px; z-index: 10; background: #e5c674; border-radius: 5px; box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article:after { position: absolute; content: ""; left: 50%; bottom: -40px; transform: translateX(-50%) rotate(135deg); border-right: 5px solid #e5c674; border-top: 5px solid #e5c674; height: 25px; width: 25px; z-index: 10; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.arrow-none:before, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.arrow-none:after { display: none; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment { float: left; width: 32%; margin-right: 2%; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment table { border-top: 1px solid #ccc; width: 100%; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment table th, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment table td { color: #000; white-space: nowrap; border-bottom: 1px solid #ccc; font-size: 15px; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment table a { color: #d80c18; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment div.time-schedule-title { font-size: 24px; font-weight: bold; white-space: nowrap; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-time { text-align: right; position: relative; font-size: 18px; color: #555; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-time:after { border-bottom: 3px dotted #ccc; position: absolute; content: ""; bottom: 0.75em; z-index: 1; width: 100%; height: 2px; left: 0; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-time span { display: inline-block; background: #fff; position: relative; z-index: 2; padding-left: 1rem; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-number { position: absolute; content: ""; top: -20px; left: -20px; width: 60px; height: 60px; background: #d80c18; border-radius: 1000px; border: 4px solid #e5c674; z-index: 3; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-number span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 30px; color: #e5c674; font-weight: bold; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-image { width: 32%; margin-left: 2%; box-sizing: border-box; float: right; border-radius: 10px; overflow: hidden; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-image:last-child { margin-left: 0; } .mceContentBody div.setting div.ushi-campaign div.ushi-link-index { text-align: center; position: relative; } .mceContentBody div.setting div.ushi-campaign div.ushi-link-index:after { position: absolute; z-index: 0; content: ""; width: 100%; height: 2px; border-bottom: 3px dotted #e5c674; left: 0; bottom: 0.75em; } .mceContentBody div.setting div.ushi-campaign div.ushi-link-index span { background: #000; display: inline-block; color: #e5c674; position: relative; z-index: 1; padding-left: 1rem; padding-right: 1rem; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link { margin-bottom: 40px; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link li { width: 16.66%; float: left; text-align: center; padding: 0.25em; box-sizing: border-box; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link li a { text-decoration: none; color: #e5c674; display: block; background: #d80c18; border-radius: 1000px; white-space: nowrap; font-weight: bold; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link li:before { display: none; } /* - */ .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column { width: 66.66%; float: left; position: relative; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column { width: 66.66%; float: right; position: relative; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column:before { background: none; border-radius: 0; bottom: 0; box-shadow: 0; content: ""; height: 0; left: inherit; position: absolute; transform: none; width: 0; z-index: 0; /* */ background: url(https://www.tottori-guide.jp/files/47781.png) no-repeat; background-size: 150px 150px; top: 65%; right: -150px; width: 150px; height: 150px; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column:after { border-radius: 0; border-right: 0; border-top: 0; bottom: 0; box-shadow: 0; content: ""; height: 0; left: 0; position: absolute; transform: none; width: 0; z-index: 0; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column:before { background: none; border-radius: 0; bottom: 0; box-shadow: 0; content: ""; height: 0; left: inherit; position: absolute; transform: none; width: 0; z-index: 0; /* */ background: url(https://www.tottori-guide.jp/files/47781.png) no-repeat; background-size: 150px 150px; top: 65%; left: -150px; width: 150px; height: 150px; transform: scale(-1, 1); } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column:after { border-radius: 0; border-right: 0; border-top: 0; bottom: 0; box-shadow: 0; content: ""; height: 0; left: 0; position: absolute; transform: none; width: 0; z-index: 0; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column div.time-schedule-comment, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column div.time-schedule-comment { float: left; width: 49%; margin-right: 2%; white-space: normal; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column div.time-schedule-image, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column div.time-schedule-image { width: 49%; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column.arrow-none:before, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column.arrow-none:before { display: none; } @media screen and (max-width:768px) { .mceContentBody div.setting div.ushi-campaign div.main-video-copy { width: 50vw; } .mceContentBody div.setting div.ushi-campaign h3 { font-size: 1.8em; } .mceContentBody div.setting div.ushi-campaign h3 img { max-width: inherit !important; width: 100%; } .mceContentBody div.setting div.ushi-campaign h4 { font-size: 1.2em; } .mceContentBody div.setting div.ushi-campaign p.lead { font-size: 1.2em; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment { float: none; margin-right: auto; margin-left: auto; width: 100%; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-image { float: none; margin-left: auto; margin-right: auto; width: 100%; margin-bottom: 1rem; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-image:last-child { margin-bottom: 0; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article div.time-schedule-comment.nowrap { white-space: normal; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link li { width: 50.00%; } .mceContentBody div.setting div.ushi-campaign ul.ushi-link li a {} .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column { width: 100%; float: none; position: relative; box-sizing: border-box; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column:before, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column:before { background: none; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column:before, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column:before { background: #e5c674; border-radius: 5px; bottom: -40px; box-shadow: 0 0 0 rgba(0, 0, 0, 0.4); content: ""; height: 50px; left: 50%; position: absolute; transform: translateX(-50%); width: 5px; z-index: 10; top: inherit; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column:after, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column:after { position: absolute; content: ""; left: 50%; bottom: -40px; transform: translateX(-50%) rotate(135deg); border-right: 5px solid #e5c674; border-top: 5px solid #e5c674; height: 25px; width: 25px; z-index: 10; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column div.time-schedule-comment, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column div.time-schedule-comment { float: none; width: 100% !important; margin-right: 0; } .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fl-column div.time-schedule-image, .mceContentBody div.setting div.ushi-campaign div.time-schedule div.time-schedule-article.small-fr-column div.time-schedule-image { width: 100% !important; } } /* --------- お花見特集 */ /* reset */ .mceContentBody div.setting.cherry-blossom-viewing { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-top: -20px; /* background: #fbf2f2; */ background: #fff; max-width: calc(100% + 40px); } .mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 { padding: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.main { /* margin-top: -20px; margin-left: -20px; margin-right: -20px; */; } .mceContentBody div.setting.cherry-blossom-viewing div.lead { margin-top: 80px; margin-bottom: 80px; letter-spacing: 2px; line-height: 2; position: relative; } .mceContentBody div.setting.cherry-blossom-viewing div.lead div.lead-bg { width: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.setting.cherry-blossom-viewing h4 { /* */ background: none; box-sizing: border-box; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; margin-top: 20px !important; margin-bottom: 20px !important; padding: 0; position: relative; text-align: center; width: 100%; color: #533; font-weight: normal; } .mceContentBody div.setting.cherry-blossom-viewing h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.cherry-blossom-viewing h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.cherry-blossom-viewing h4::before { background: url(https://www.tottori-guide.jp/files/47822.png) !important; background-size: 200px 200px !important; background-repeat: none !important; width: 200px !important; height: 200px !important; content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; display: block !important; pointer-events: none !important; transform: translateX(-50%) translateY(-50%) !important; z-index: 0 !important; } .mceContentBody div.setting.cherry-blossom-viewing h4::after { position: absolute; bottom: -1em; width: 100%; height: 1px; background: #533; content: ""; left: 0; right: inherit; display: block; } .mceContentBody div.setting.cherry-blossom-viewing h4 span { position: relative; z-index: 2; } .mceContentBody div.setting.cherry-blossom-viewing p { position: relative; z-index: 2; } .mceContentBody div.setting.cherry-blossom-viewing, .mceContentBody div.setting.cherry-blossom-viewing p, .mceContentBody div.setting.cherry-blossom-viewing th, .mceContentBody div.setting.cherry-blossom-viewing td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.tobu, div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.tyubu, div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.seibu { width: 32%; } /* video */ div.mceContentBody div.setting.cherry-blossom-viewing div.main { position: relative; /* margin-bottom: 80px; */; } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video { width: 100%; padding-top: 56.25%; position: relative; } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video video, div.mceContentBody div.setting.cherry-blossom-viewing div.main-video iframe { width: 100%; max-width: 100%; z-index: 0; position: absolute; top: 0; height: 100%; } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video-copy { position: absolute; top: 50%; left: 50%; /* */ transform: translateX(-50%) translateY(-50%); width: 350px; /* */ z-index: 1; } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video-copy img { width: 100%; } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video video { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } /* --------- sakura-list */ .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; background: #fde4ed; background: linear-gradient(to bottom, #fff, #fde4ed 10%, #fbf2f2 90%, #fff); } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; background: #201878; background: linear-gradient(to bottom, #fff, #201878 10%, #201878 90%, #fff); } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.forecast { background: none; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot { margin-bottom: 80px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity { margin-bottom: 80px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura { margin-bottom: 80px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li::before { display: none; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li { float: left; margin-bottom: 40px; position: relative; /* text-align: center; */ white-space: nowrap; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); padding: 10px; box-sizing: border-box; border-radius: 0.25rem; background: #fff; transition: 0.25s all; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:hover { background: #fbe6e6; } /* .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a:hover {} */ .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label { background: #ccc none repeat scroll 0 0; top: -0.25em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.2em; height: 40px; line-height: 40px; position: absolute; right: 0.25em; width: 40px; text-align: center; z-index: 2000; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label + div.label { right: calc(50px + 0.125em); } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label.festival { background: #fbcdd0; color: #543333; /* transform: rotate( 45deg ); */; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label.festival:after { position: absolute; content: "お祭り"; font-size: 9px; top: -3.25em; right: 0; width: 100%; text-align: center; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label.lightup:after { position: absolute; content: "ライト\Aアップ"; white-space: pre; font-size: 9px; top: -2.25em; line-height: 1; right: 0; color: #201878; width: 100%; text-align: center; text-shadow: none; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label.lightup { background: #201878; color: #fdfd27; text-shadow: #fff 2px 0 10px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.label.festival { background: #fbcdd0; color: #543333; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.number { background: rgba(255, 255, 255, 0.95); top: 0.75em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.2em; height: 40px; line-height: 40px; position: absolute; left: 0.75em; width: 40px; text-align: center; z-index: 2000; border-radius: 0.25rem; border: 1px solid #fbcdd0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.number span { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); left: 50%; color: #fbcdd0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul { margin-bottom: -40px; display: flex; flex-wrap: wrap; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li { margin-right: 2%; width: 32%; margin-bottom: 60px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail { overflow: hidden; width: 100%; position: relative; /* overflow: visible; */ margin-bottom: 20px; border-radius: 0.25rem; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail:before { /* border: 1px solid #fbcdd0; content: ""; height: 100%; left: -4px; opacity: 0.5; pointer-events: none; position: absolute; top: -4px; width: 100%; z-index: 1000; */; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail:after { /* border: 1px solid #fbcdd0; content: ""; height: 100%; left: 4px; opacity: 0.5; pointer-events: none; position: absolute; top: 4px; width: 100%; z-index: 1000; */; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail span { background: #000; display: block; padding-top: 100.00%; position: relative; width: 100%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura ul li div.thumbnail span { padding-top: 75.00%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail span img { left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; z-index: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li div.thumbnail span img { /* opacity: 0.75; */; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li:hover div.thumbnail span img { /* opacity: 1; */ filter: brightness(110%); } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail.double { position: relative; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail.double img:nth-child(1) { z-index: 1; position: relative; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.thumbnail.double img:nth-child(2) { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1000; opacity: 0; transition: 0.25s all; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:hover div.thumbnail.double img:nth-child(2) { opacity: 1; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a { text-decoration: none; color: #323c46; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a:visited { color: #323c46; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a:hover { color: #533; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.name, .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.description { color: #533; padding-left: 10px; padding-right: 10px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li a .linkHP { display: inline; padding: 0; position:static; color: #4cbabf; } @media screen and (max-width: 768px) { /* .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.name { width: 40%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.description { width: 60%; } */ .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.name { width: 100%; padding-bottom: 0.5rem; margin-bottom: 0.5rem; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.description { width: 100%; } } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a div.name span { font-size: 10px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.description { font-size: 14px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.description table { border-top: 1px solid #fbcdd0; border-bottom: 1px solid #fbcdd0; width: 100%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.description table th { width: 40%; font-weight: normal; text-align: left; padding:0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li div.description table td { text-align: left; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li a:hover { text-decoration: none; } /* */ .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.forecast li, .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity li, .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura li { text-align: center; position: relative; width: 49%; margin-right: 2%; float: left; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.forecast li:nth-child(2n), .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity li:nth-child(2n), .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.forecast li:before { background: url(https://www.tottori-guide.jp/files/47822.png); background-size: 60px 60px; width: 60px; height: 60px; content: ""; position: absolute; left: 0; top: 50%; display: block; pointer-events: none; transform: translateY(-50%); z-index: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.forecast li a { position: relative; z-index: 1; display: block; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity ul li div.number { background: #64d5db; top: 0.75em; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 1.2em; height: 40px; line-height: 40px; position: absolute; left: 0.75em; width: 40px; text-align: center; z-index: 2000; border-radius: 0.25rem; border: 1px solid #fff; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity ul li div.number span { position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); left: 50%; color: #fff; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity ul li div.thumbnail { margin-bottom: 10px; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.activity ul li div.name { font-size: 18px; line-height: 1; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.yozakura ul li div.name { font-size: 18px; line-height: 1; margin-bottom: 0.5em; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot { width: 100%; background: url("https://www.tottori-guide.jp/files/47924.png") no-repeat; background-size: 440px 179px; background-position: center top; height: auto; margin: 0; margin-bottom: 2rem; padding-top: 150px; /* */; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot h5 { border-top: none; border-left: none; border-right: none; border-radius: 0; margin-bottom: 1.5rem; text-align: center; font-weight: normal; font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.seibu, .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tyubu, .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tobu { background: #fff; border-radius: 0.25rem; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); box-sizing: border-box; padding: 1rem; padding-top: 0; padding-bottom: 2rem; } /* */ .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.seibu h5, .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tyubu h5, .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tobu h5 { color: #533; border-bottom: 1px solid #533; text-align: left; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.seibu h5 span { color: #8aaf35; font-size: 14px; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tyubu h5 span { color: #fe6666; font-size: 14px; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot div.tobu h5 span { color: #51b5cb; font-size: 14px; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot p.link { font-size: 11px; /* */ line-height: 1.75; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #eee; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot p.link a span { font-size: 11px; /* */; } .mceContentBody div.setting.cherry-blossom-viewing div.mapSpot p.link a { font-size: 14px; /* */ line-height: 1.75; } .mceContentBody div.setting.cherry-blossom-viewing .link, .mceContentBody div.setting.cherry-blossom-viewing .linkButton { background: none; } @media screen and (max-width: 768px) { .mceContentBody div.setting.cherry-blossom-viewing { /*margin-left: -10px; margin-right: -10px;*/ } div.mceContentBody div.setting.cherry-blossom-viewing div.main-video-copy { width: 30vw; /* */ top: 85%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li { float: left; margin-right: 2%; width: 49%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li { float: left; margin-right: 2%; width: 49%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li:nth-child(2n) { margin-right: 0; } } @media screen and (max-width: 480px) { .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li { float: none !important; margin-right: 0 !important; width: 100% !important; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:nth-child(3n) { margin-right: 0 !important; } .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list ul li:nth-child(2n) { margin-right: 0 !important; } } @media screen and (max-width:768px) { .mceContentBody div.setting.cherry-blossom-viewing div.sakura-list.spot ul li div.thumbnail span img { opacity: 1; } div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.tobu, div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.tyubu, div.mceContentBody div.setting.cherry-blossom-viewing div.sakura2015 div.seibu { width: 100%; margin-bottom: 40px; } } /* ----- */ .shine { position: fixed; top: -15px; left: -15px; width: 30px; height: 30px; background: url(https://www.tottori-guide.jp/files/47822.png) 50% 50% no-repeat; background-size: contain; z-index: 2; animation: shine 4s ease-out 0s forwards; /* display: none; */ pointer-events: none; } @keyframes shine { 0% { transform: translateY(0) rotate(-5deg) scale(0.75); opacity: 0; } 5% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(50px) rotate(5deg) scale(1.5); opacity: 0; } } /* ----- コロナ対策施設特集 */ .mceContentBody div.setting.corona {} /* reset */ .mceContentBody div.setting.corona { margin-left: -20px; margin-right: -20px; padding-left: 40px; padding-right: 40px; margin-top: -20px; /* background: #fbf2f2; */ background: #fff; max-width: 100%; /* box-sizing: border-box; */ color: #333; } /* .mceContentBody div.setting.corona div.sakura2015 { padding: 0; } */ .mceContentBody div.setting.corona div.main { /* margin-top: -20px; margin-left: -40px; margin-right: -40px; */; } .mceContentBody div.setting.corona div.lead { margin-top: 80px; margin-bottom: 80px; letter-spacing: 2px; line-height: 2; position: relative; } .mceContentBody div.setting.corona div.lead div.lead-bg { width: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.setting.corona h4 { /* */ background: none; box-sizing: border-box; font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; margin-top: 20px !important; margin-bottom: 20px !important; padding: 0; position: relative; text-align: center; width: 100%; color: #fff; font-weight: normal; background: #f2879b; color: #fff; border: none; } .mceContentBody div.setting.corona h4.tottori { background: #f2879b; } .mceContentBody div.setting.corona h4.okayama { background: #45bec3; } .mceContentBody div.setting.corona h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.corona h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.corona h4::after { /* position: absolute; bottom: -1em; width: 100%; height: 1px; background: #533; content: ""; left: 0; right: inherit; display: block; */; } .mceContentBody div.setting.corona h4 span { position: relative; z-index: 2; } .mceContentBody div.setting.corona h4 div { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 14px; letter-spacing: 2px; line-height: 1; padding-bottom: 10px; } .mceContentBody div.setting.corona h5 { background: none; border-top: none; box-shadow: none; box-sizing: border-box; color: #533; font-size: 1.6em; font-weight: normal; margin: 2em 0 1em; overflow: hidden; padding: 0.5em 0 0; border-bottom: 2px solid #333; color: #333; font-weight: bold; } .mceContentBody div.setting.corona h5 span.spot { font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; font-size: 14px; letter-spacing: 2px; line-height: 1; } .mceContentBody div.setting.corona h5 span.spot span { font-size: 18px; } .mceContentBody div.setting.corona h5 span.okayama { color: #45bec3; } .mceContentBody div.setting.corona h5 span.tottori { color: #f2879b; } .mceContentBody div.setting.corona h6 { font-weight: bold; font-size: 20px; margin-bottom: 1em; color: #333; } .mceContentBody div.setting.corona p { position: relative; z-index: 2; } .mceContentBody div.setting.corona a { color: #036eb5; } .mceContentBody div.setting.corona, .mceContentBody div.setting.corona p, .mceContentBody div.setting.corona th, .mceContentBody div.setting.corona td { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; color: #333; } /* */ .mceContentBody div.setting.corona div.anchor-link {} .mceContentBody div.setting.corona div.anchor-link ul li { width: 23.5%; float: left; margin-right: 2%; position: relative; } .mceContentBody div.setting.corona div.anchor-link ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting.corona div.anchor-link ul li a { display: block; background: #fff; color: #f2879b; text-decoration: none; height: 70px; /* */ text-align: center; position: relative; width: 100%; border-radius: 0.25rem; border: 2px solid #f2879b; box-sizing: border-box; transition: 0.25s all; } .mceContentBody div.setting.corona div.anchor-link ul li a:hover { background: #f2879b; color: #fff; } .mceContentBody div.setting.corona div.anchor-link ul li a span { position: absolute; width: 100%; top: 50%; transform: translateX(-50%) translateY(-50%); line-height: 1.25; font-size: 15px; } .mceContentBody div.setting.corona div.anchor-link ul li a::before { background: #fff; content: ""; height: 1rem; left: 50%; position: absolute; bottom: 0; transform: translateX(-50%); width: 1px; z-index: 1000; opacity: 0; transition: 0.25s all; } .mceContentBody div.setting.corona div.anchor-link ul li a::after { background: #45bec3; border: 2px solid #fff; border-radius: 1000px; position: absolute; left: 50%; transform: translateX(-50%) translateY(0); content: ""; width: 30px; height: 30px; bottom: -5px; opacity: 0; transition: 0.25s all; } .mceContentBody div.setting.corona div.anchor-link ul li::after { border-right: 1px solid #fff; border-top: 1px solid #fff; content: ""; height: 0.5rem; left: 50%; position: absolute; /* top: 50%; */ bottom: 0; transform: translateX(-50%) rotate(135deg); width: 0.5rem; opacity: 0; transition: 0.25s all; } .mceContentBody div.setting.corona div.anchor-link ul li a:hover::before { /* background: #fff; */ opacity: 1; bottom: -0.8rem; } .mceContentBody div.setting.corona div.anchor-link ul li a:hover::after { /* background: #fff; */ opacity: 1; transform: translateX(-50%) translateY(50%); } .mceContentBody div.setting.corona div.anchor-link ul li:hover::after { /* border-right: 1px solid #fff; border-top: 1px solid #fff; */ bottom: -0.65rem; transform: translateX(-50%) translateY(0) rotate(135deg); opacity: 1; } /* @media screen and (max-width: 1000px) { .mceContentBody table.table02 th.resp_w100 { width: 100%; } } */ .mceContentBody div.setting.corona table.information-table { border-top: 1px solid #ccc; } .mceContentBody div.setting.corona table.information-table th { font-weight: normal; background: #f0f0f0; border-bottom: 1px solid #ccc; padding: 0.75rem 1rem; box-sizing: border-box; } .mceContentBody div.setting.corona table.information-table td { border-bottom: 1px solid #ccc; padding: 0.75rem 1rem; box-sizing: border-box; } .mceContentBody div.setting.corona div.figure { /* background: #e8e8e8; */ background: #f8f8f8; padding: 20px; box-sizing: border-box; margin-top: 40px; margin-bottom: 40px; } .mceContentBody div.setting.corona div.deco-box { padding: 1.5rem; border: 1px solid #000; } @media screen and (max-width: 768px) { .mceContentBody div.setting.corona { overflow: hidden; margin-left: -10px; margin-right: -10px; } .mceContentBody div.setting.corona div.main { margin-top: 0; margin-left: 0; margin-right: 0; } .mceContentBody div.setting.corona { padding-left: 20px; padding-right: 20px; } .mceContentBody div.setting.corona div.anchor-link ul li { float: left; margin-right: 2%; position: relative; width: 49.0%; } .mceContentBody div.setting.corona div.anchor-link ul li:nth-child(2n) { margin-right: 0; margin-bottom: 0.5rem; } .mceContentBody div.setting.corona div.anchor-link ul li a::before { display: none; } .mceContentBody div.setting.corona div.anchor-link ul li a::after { display: none; } .mceContentBody div.setting.corona div.anchor-link ul li::after { display: none; } .mceContentBody div.setting.corona table.information-table {} .mceContentBody div.setting.corona table.information-table th { display: block; } .mceContentBody div.setting.corona table.information-table td { display: block; } .mceContentBody div.setting.corona h5 { font-size: 1.4em; } } /* ----- キャンプ場 */ .mceContentBody div.setting.camp {} .mceContentBody div.setting.camp {} /* reset */ .mceContentBody div.camp { /*margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-top: -20px;*/ /* background: #fbf2f2; */ background: #fff; max-width: 100%; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ color: #000; } .mceContentBody div.camp a, .mceContentBody div.camp a:hover { color: #2292d0; } .mceContentBody div.camp a[href^="tel:"] { color: #000; text-decoration: none; pointer-events: none; } @media screen and (max-width: 768px) { .mceContentBody div.camp a[href^="tel:"] { color: #2292d0; text-decoration: underline; pointer-events: auto; } } .mceContentBody div.camp .link { background: none; margin-bottom: 0; padding-left: 0; text-align: center; } .mceContentBody p.link:has(a)::before, .mceContentBody div.link:has(a)::before { display: none !important; } .mceContentBody div.camp .link a { text-decoration: none; background: #e8eaeb; display: inline-block; border-radius: 1000px; padding: 0.75em 40px; position: relative; transition: all 0.3s ease 0s; color: #000; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.025); } .mceContentBody div.camp ul > li::before { background: #000; } .mceContentBody div.camp div.main { /* margin-top: -20px; margin-left: -20px; margin-right: -20px; */; } .mceContentBody div.camp div.lead { margin-top: 80px; margin-bottom: 80px; letter-spacing: 2px; line-height: 2; position: relative; } .mceContentBody div.camp div.lead div.lead-bg { width: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.camp h4 { /* */ background: none; box-sizing: border-box; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-size: 1.8em; font-weight: bold; height: auto; margin: 0 0 0.5em !important; margin-top: 20px !important; margin-bottom: 20px !important; padding: 0; position: relative; text-align: center; width: 100%; color: #000; font-weight: normal; } .mceContentBody div.camp h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.camp h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.camp h4::before { /* background: url(https://www.tottori-guide.jp/files/47822.png) !important; background-size: 200px 200px !important; background-repeat: none !important; width: 200px !important; height: 200px !important; content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; display: block !important; pointer-events: none !important; transform: translateX(-50%) translateY(-50%) !important; z-index: 0 !important; */; } .mceContentBody div.camp h4::after { /* position: absolute; bottom: -1em; width: 100%; height: 1px; background: #533; content: ""; left: 0; right: inherit; display: block; */; } .mceContentBody div.camp h4 span { position: relative; z-index: 2; } .mceContentBody div.camp p, .mceContentBody div.camp td, .mceContentBody div.camp th { position: relative; z-index: 2; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ color: #000; } .mceContentBody div.camp h5 { background: none; border-top: none; box-shadow: none; box-sizing: border-box; color: #000; font-size: 1.6em; font-weight: normal; margin: 0 0 0; overflow: hidden; padding: 0 0 0; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */; } /* */ .mceContentBody div.setting.camp div.article { /* background: #f0fbff; */ padding-left: 20px; padding-right: 20px; border-radius: 10px; } .mceContentBody div.setting.camp div.article { /* padding-top: 120px; padding-bottom: 80px; border-top: 1px solid #ccc; background: url(https://www.tottori-guide.jp/files/45929.png); background-size: 50px 45px; background-repeat: repeat-x; background-position: top; position: relative; z-index: 1; */; } .mceContentBody div.setting.camp div.article { padding-top: 40px; padding-bottom: 40px; } .mceContentBody div.setting.camp div.article:after { /* background: url(https://www.tottori-guide.jp/files/46060.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; right: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; */; } .mceContentBody div.setting.camp div.article:nth-child(even):after { /* background: url(https://www.tottori-guide.jp/files/46061.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; left: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; */; } .mceContentBody div.setting.camp div.article:last-child { border-bottom: 1px solid #ccc; } .mceContentBody div.setting.camp div.article > div.clearfix { padding-top: 20px; } .mceContentBody div.setting.camp div.camp-spot-number { /* background: #01a4dc; */ color: #6ec9ef; width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; border-radius: 1000px; /* box-sizing: border-box; */ border: 2px solid #6ec9ef; text-align: center; font-weight: bold; font-size: 20px; } .mceContentBody div.setting.camp div.camp-spot-number { color: #fff; border: 2px solid #ff4aab; background: #ff4aab; } .mceContentBody div.setting.camp div.camp-spot-number { color: #fff; border: 2px solid #000; background: #000; } .mceContentBody div.setting.camp div.camp-spot-name-wrap { position: relative; } .mceContentBody div.setting.camp div.camp-spot-name-wrap:before { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; border-top: 3px dotted #000; content: ""; } .mceContentBody div.setting.camp div.camp-spot-name-wrap > div { position: relative; z-index: 1000; background: #fff; display: inline-block; padding-right: 1em; } .mceContentBody div.setting.camp div.camp-spot-name { font-size: 30px; font-weight: normal; display: inline-block; vertical-align: middle; } .mceContentBody div.setting.camp div.camp-spot-name a { color: #000; text-decoration: none; } .mceContentBody div.setting.camp div.article div.label { font-size: 15px; letter-spacing: -3px; /* font-weight: bold; */ /* color: #6ec9ef; */ position: absolute; top: -10px; left: -10px; color: #000; background: #ffff00; width: 60px; height: 60px; /* border-radius: 1000px; */ border: 2.0px solid #fff; box-sizing: content-box; } .mceContentBody div.setting.camp div.article div.label + div.label { top: -10px; left: 80px; } .mceContentBody div.setting.camp div.article div.label.renewal { background: #ffff00; color: #000; border-radius: 0; transform: rotate(45deg); } .mceContentBody div.setting.camp div.article div.label.tebura { background: #2d5579; color: #fff; line-height: 1.5; text-align: center; letter-spacing: 0; } .mceContentBody div.setting.camp div.article div.label.rental { background: #94be38; color: #fff; line-height: 1.25; text-align: center; letter-spacing: 0; border-radius: 1000rem; } .mceContentBody div.setting.camp div.article div.label span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); white-space: nowrap; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; font-weight: bold; } .mceContentBody div.setting.camp div.article div.camp-spot-photo div.label img { width: 50px; max-width: 50px; position: relative; top: 2px; } .mceContentBody div.setting.camp div.article div.label.renewal span { transform: translateX(-50%) translateY(-50%) rotate(-45deg); /* top: 0; left: 0; */; } .mceContentBody div.setting.camp div.article div.description { /* border: 3px solid #6ec9ef; padding: 1em; box-sizing: border-box; margin-bottom: 20px; border-radius: 5px; background: #fff; */ margin-bottom: 20px; /* background: #f7ee13; */ /* padding: 1em; */ /* border: 1px solid #6c3806; */ color: #000; font-feature-settings: "palt"1; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .mceContentBody div.setting.camp div.article div.camp-spot-photo { position: relative; } .mceContentBody div.setting.camp div.article div.camp-spot-photo img { display: block; width: 100%; overflow: hidden; /* border-radius: 10px; */; } .mceContentBody div.setting.camp div.article div.camp-spot-photo .flex-direction-nav {position: absolute; top: calc(50% - 20px); width: 100%;} .mceContentBody div.setting.camp div.article div.camp-spot-photo .flex-direction-nav .flex-prev, .mceContentBody div.setting.camp div.article div.camp-spot-photo .flex-direction-nav .flex-next { background: #2d5579 !important; } .mceContentBody div.setting.camp div.article table { border-collapse: collapse; border-top: 1px solid #000; width: 100%; table-layout: fixed; margin-bottom: 20px; } .mceContentBody div.setting.camp div.article table { border-collapse: collapse; } .mceContentBody div.setting.camp div.article table th, .mceContentBody div.setting.camp div.article table td, .mceContentBody div.setting.camp div.article table.camp-area-tb th, .mceContentBody div.setting.camp div.article table.camp-area-tb td { border-bottom: 1px solid #000; padding-top: 0.75em; padding-bottom: 0.75em; padding-left: 1em; padding-right: 1em; color: #000; } .mceContentBody div.setting.camp div.article table th { background: #000; color: #fff; padding-left: 0.5em; padding-right: 0.5em; font-weight: normal; } .mceContentBody div.setting.camp table.camp-area-tb td.tdbg { background: none; border-bottom: 1px solid #000; } .mceContentBody div.setting.camp table.camp-area-tb td.tdbg { border-bottom: 1px solid #000; border-top: 1px solid #000; background: #000; } .mceContentBody div.setting.camp td.tdbg, .mceContentBody div.setting.camp td.tdbg p { color: #fff; } .mceContentBody div.setting.camp .camp-area-tb td { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 6px; } @media screen and (max-width:768px) { .mceContentBody div.camp { padding: 0; margin: 0; } .mceContentBody div.camp div.main { margin-top: -10px; margin-left: -10px; margin-right: -10px; } .mceContentBody div.setting.camp div.article { padding: 0; } .mceContentBody div.setting.camp div.camp-spot-name-wrap > div { display: block; padding-right: 0; width: 100%; text-align: center; } .mceContentBody div.setting.camp div.camp-spot-number { display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.camp div.camp-spot-name { font-size: 21px; white-space: nowrap; } .mceContentBody div.setting.camp div.responsive-type-outer table.camp-area-tb { width: 94rem !important; } /* .mceContentBody div.setting.camp table.camp-area-tb td.tdbg { white-space: nowrap; font-size: 12px; display: none; } .mceContentBody div.setting.camp .camp-area-tb tr:first-child { border-top: 0; } .mceContentBody div.setting.camp .camp-area-tb tr { border-top: 1px solid #ccc; display: block; margin-bottom: 40px; } .mceContentBody div.setting.camp .camp-area-tb { border-top: 0; } .mceContentBody div.setting.camp .camp-area-tb td { border: none; border-bottom: 1px solid #ccc !important; float: none; display: block; margin-bottom: 0; width: 100%; box-sizing: border-box; } .mceContentBody div.setting.camp .camp-area-tb td:before { content: attr(data-text)""; display: block; width: calc(100% + 12px); font-weight: normal; background: #f0f0f0; border: 1px solid #ccc; border-top: none; color: #000; border-left: none; border-right: none; padding: 0; box-sizing: border-box; margin: -6px; padding: 6px; margin-bottom: 0.5em; } */ .mceContentBody div.camp h4 { font-size: 21px; } } /* --- ＠end キャンプ場 */ /* ---- 2021 とっとりの夏 */ .mceContentBody div.setting div.summer-season2021 { color: #000; position: relative; } .mceContentBody div.setting div.summer-season2021:before, .mceContentBody div.setting div.summer-season2021:after {} .mceContentBody div.setting div.summer-season2021 a { color: #000; } .mceContentBody div.setting div.summer-season2021 div.note-link a { color: #fa6197; font-weight: bold; display: block; text-decoration: none; padding: 1rem 3rem; position: relative; border: 0.1rem solid #fa6197; border-radius: 0.25rem; transition: 0.25s all; white-space: nowrap; } .mceContentBody div.setting div.summer-season2021 div.note-link a::after, .mceContentBody div.setting div.summer-season2021 div.note-link a::after { border-right: 0.1rem solid #fa6197; border-top: 0.1rem solid #fa6197; content: ""; height: 0.4em; left: 1.5rem; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); width: 0.4em; } .mceContentBody div.setting div.summer-season2021 div.note-link a:hover { background: #fa6197; color: #fff; } .mceContentBody div.setting div.summer-season2021 div.note-link a:hover::after, .mceContentBody div.setting div.summer-season2021 div.note-link a:hover::after { border-right: 0.1rem solid #fff; border-top: 0.1rem solid #fff; } .mceContentBody div.setting div.summer-season2021 div.note-link a::after, .mceContentBody div.setting div.summer-season2021 div.note-link a[href$=".pdf"]::after { background: none; border-radius: 0; color: inherit; content: ""; display: block; font-size: inherit; font-weight: 0; margin: 0; padding: 0; text-decoration: none; vertical-align: middle; z-index: 100; } .mceContentBody div.setting div.summer-season2021 div.note-link a::after, .mceContentBody div.setting div.summer-season2021 div.note-link a::after { border-right: 0.1rem solid #fa6197; border-top: 0.1rem solid #fa6197; } /* .mceContentBody div.setting div.summer-season2021 div.link::after { display: none; } */ .mceContentBody div.setting div.summer-season2021 .inline-block { display: inline-block; } .mceContentBody div.setting div.summer-season2021 a[href^="tel:"] { pointer-events: none; text-decoration: none; } .mceContentBody div.setting div.summer-season2021, .mceContentBody div.setting div.summer-season2021 table, .mceContentBody div.setting div.summer-season2021 table td, .mceContentBody div.setting div.summer-season2021 table th, .mceContentBody div.setting div.summer-season2021 p { /* font-family: 'Kiwi Maru', serif; */ color: #000; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } /* .mceContentBody div.setting div.summer-season2021 { font-family: "Oswald",sans-serif; } */ .mceContentBody div.setting div.summer-season2021 div.main { /* margin-left: -20px; margin-right: -20px; */ /* margin-top: -30px; */ /* margin-top: -40px; */; } .mceContentBody div.setting div.summer-season2021 div.main > img { width: 100%; display: block; filter: brightness(110%); animation: 4s ease-in-out 2s normal forwards running fadein-main-bg; } .mceContentBody div.setting div.summer-season2021 div.main div.main-copy img { position: absolute; z-index: 1; top: 0; left: 0; opacity: 0; animation: 1s ease-in-out 2s normal forwards running fadein-copy; } /* フェードイン */ /* -------- fadein */ @keyframes fadein-copy { 0% { opacity: 0; transform: translateY(3rem); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadein-copy-trail { 0% { opacity: 0; transform: translateY(5rem); } 100% { opacity: 1; transform: translateY(2rem); } } @keyframes fadein-main-bg { 0% { filter: brightness(110%); } 100% { filter: brightness(100%); } } .mceContentBody div.setting div.summer-season2021 div.map { border-radius: 5px; overflow: hidden; max-width: 100%; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2021 div.map img { display: block; } .mceContentBody div.setting div.summer-season2021 div.otoku-banner { max-width: 60%; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2021 div.otoku-banner div.otoku { float: left; width: 70%; border: 4px solid #eee; box-sizing: border-box; } .mceContentBody div.setting div.summer-season2021 div.otoku-banner div.amabie { float: left; width: 30%; } .mceContentBody div.setting div.summer-season2021 div.otoku-banner div.amabie img { position: relative; top: -22.5px; } /* --------- */ .mceContentBody div.setting div.summer-season2021 .link, .mceContentBody div.setting div.summer-season2021 .linkButton { background: url("https://www.tottori-guide.jp/files/45930.png") no-repeat scroll left center / 16px auto; background: none; margin-bottom: 10px; padding-left: 20px; position: relative; } .mceContentBody div.setting div.summer-season2021 .link:after, .mceContentBody div.setting div.summer-season2021 .linkButton:after { border-right: 1px solid #333; border-top: 1px solid #333; content: ""; height: 0.4em; left: 0; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); width: 0.4em; background: none; border-radius: 0; } /* --------- */ .mceContentBody div.setting div.summer-season2021 div.large-title { /* border: 5px solid #fdff00; */ padding: 1em; text-align: center; } .mceContentBody div.setting div.summer-season2021 div.kaisuiyoku div.large-title { /* background: url("https://www.tottori-guide.jp/files/46064.png"); */; } .mceContentBody div.setting div.summer-season2021 div.large-title div.large { font-size: 30px; font-weight: bold; border-bottom: 3px dotted #019fe8; } .mceContentBody div.setting div.summer-season2021 div.large-title + p { margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021 div.large-title div.icon { max-width: 100px; margin-left: auto; margin-right: auto; } /* --------- */ .mceContentBody div.setting div.summer-season2021 div.article { /* padding-top: 120px; padding-bottom: 80px; */ /* border-top: 1px solid #ccc; */ /* background: url(https://www.tottori-guide.jp/files/45929.png); background-size: 50px 45px; background-repeat: repeat-x; background-position: top; position: relative; z-index: 1; */ margin-bottom: 40px; position: relative; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021 div.article { margin-bottom: 40px; } } .mceContentBody div.setting div.summer-season2021 div.spot-number { /* background: #01a4dc; */ color: #000; width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; /* box-sizing: border-box; */ border: 2px solid #6ec9ef; text-align: center; font-weight: bold; font-size: 20px; position: relative; top: -8px; } .mceContentBody div.setting div.summer-season2021 div.kaisuiyoku div.spot-number { /* color: #fff220; */ color: #fff; border: 2px solid #019fe8; background: #019fe8; font-family: "Oswald", sans-serif; border-radius: 1000px; } .mceContentBody div.setting div.summer-season2021 div.spot-name { font-size: 30px; font-weight: bold; display: inline-block; vertical-align: middle; margin-bottom: 1rem; } .mceContentBody div.setting div.summer-season2021 div.spot-name span { font-size: 18px; } .mceContentBody div.setting div.summer-season2021 div.article div.label { font-size: 18px; font-weight: bold; color: #019fe8; } .mceContentBody div.setting div.summer-season2021 div.article div.description { /* border: 3px solid #019fe8; */ padding: 1em; box-sizing: border-box; margin-bottom: 20px; background: #ddeff9; /* background: #ddf0f7; */; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo { position: relative; overflow: hidden; border-radius: 0.5rem; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo img { display: block; width: 100%; overflow: hidden; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo div.amabie-illust.left { position: absolute; bottom: -40px; left: 0; z-index: 1; width: 40%; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo div.amabie-illust.right { position: absolute; bottom: -40px; right: 0; z-index: 1; width: 40%; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo div.amabie-illust.small { width: 30%; } .mceContentBody div.setting div.summer-season2021 div.article div.spot-photo div.amabie-illust img { display: block; } .mceContentBody div.setting div.summer-season2021 div.article table { border-collapse: collapse; border-top: 1px solid #000; width: 100%; table-layout: fixed; margin-bottom: 20px; } .mceContentBody div.setting div.summer-season2021 div.article table th, .mceContentBody div.setting div.summer-season2021 div.article table td { border-bottom: 1px solid #000; padding-top: 0.75em; padding-bottom: 0.75em; color: #000; } .mceContentBody div.setting div.summer-season2021 div.article table th { /* width: 20%; */ text-align: left; } .mceContentBody div.setting div.summer-season2021 div.article div.voice { /* background: #fdff00; */ background: #fff; padding: 1em; text-align: center; border-radius: 10px; border: 3px solid #ccc; font-weight: bold; font-size: 18px; position: relative; width: 80%; } .mceContentBody div.setting div.summer-season2021 div.article div.voice.left { float: right; } .mceContentBody div.setting div.summer-season2021 div.article div.voice.right { float: left; } .mceContentBody div.setting div.summer-season2021 p.alert { border: 3px solid #ff0000; border-radius: 5px; padding: 1em; } .mceContentBody div.setting div.summer-season2021 div.scroller { position: fixed; z-index: 10000; /* top: -60px; */ /* */ right: 20px; bottom: 20px; display: block; width: 60px; height: 60px; } .mceContentBody div.setting div.summer-season2021 div.scroller div.button { position: absolute; top: 0; width: 60px; height: 60px; } .mceContentBody div.setting div.summer-season2021 div.scroller div.button a { position: relative; display: block; width: 60px; height: 60px; background: #ff4aab; } .mceContentBody div.setting div.summer-season2021 div.scroller div.button a:hover { opacity: 0.8; } .mceContentBody div.setting div.summer-season2021 div.scroller div.button a.scrollTop::before { position: absolute; top: 55%; left: 50%; display: block; width: 12px; height: 12px; content: ''; transform: translateX(-50%) translateY(-50%) rotate(-45deg); border-top: 1px solid #fff; border-right: 1px solid #fff; } .mceContentBody div.setting div.summer-season2021 div.scroller div.button a.scrollTop::after { position: absolute; top: -2em; left: 50%; transform: translateX(-50%); white-space: nowrap; display: block; font-weight: bold; color: #ff4aab; content: 'MAPへ戻る'; } .mceContentBody div.setting div.summer-season2021 div.activity-spot { margin-bottom: 80px; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li { float: left; width: 23.5%; margin-right: 2%; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li:before { display: none; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li:nth-child(4) { margin-right: 0; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li { text-align: center; line-height: 1.5; position: relative; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li a { position: relative; display: block; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li div.spot-number { background: #fa6197; border: none; border-radius: 2px; color: #fff; font-family: "Oswald", sans-serif; position: absolute; left: -10px; top: -10px; z-index: 1000; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li div.thumbnail { margin-bottom: 0.5rem; overflow: hidden; border-radius: 0.5rem; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li div.thumbnail img { transition: 0.25s all; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li:hover div.thumbnail img { transform: scale(1.05); opacity: 0.75; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li:hover a { color: #019fe8; } /* --------- */ @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li { float: left; margin-right: 2%; width: 49.0%; margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li:nth-child(2n) { margin-right: 0 !important; } } @media only screen and (max-width: 480px) { .mceContentBody div.setting div.summer-season2021 div.activity-spot ul li { float: none; margin-right: 0%; width: 100.0%; margin-bottom: 40px; } } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021 div.large-title div.large { font-size: 24px; } .mceContentBody div.setting div.summer-season2021 div.article div.label { text-align: center; } .mceContentBody div.setting div.summer-season2021 a[href^="tel:"] { pointer-events: auto; color: #333; text-decoration: underline; } .mceContentBody div.setting div.summer-season2021 a[href^="tel:"]:hover { text-decoration: none; color: #f66; } .mceContentBody div.setting div.summer-season2021 div.article table { table-layout: auto; } .mceContentBody div.setting div.summer-season2021 div.article table th { white-space: nowrap; width: auto; } .mceContentBody div.setting div.summer-season2021 div.spot-number { margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting div.summer-season2021 div.spot-name { font-size: 24px; margin-bottom: 10px; text-align: center; display: block; } .mceContentBody div.setting div.summer-season2021 .resp_m_o0 { margin-top: 0 !important; } .mceContentBody div.setting div.summer-season2021 table.resp_block { border: none !important; } .mceContentBody div.setting div.summer-season2021 table.resp_block thead { display: none; } .mceContentBody div.setting div.summer-season2021 table.resp_block td.data-text:before { content: attr(data-text)""; display: block; width: calc(100% + 1rem); font-weight: bold; background: #eee; border-left: none; border-right: none; box-sizing: border-box; padding: 0.5rem; /* margin-left: -0.5rem; margin-right: -0.5rem; */ margin-bottom: 0.5rem; } .mceContentBody div.setting div.summer-season2021 table.resp_block tr { margin-bottom: 2rem; display: block; border: 4px solid #eee; box-sizing: border-box; } .mceContentBody div.setting div.summer-season2021 table.resp_block td, .mceContentBody div.setting div.summer-season2021 table.resp_block th { display: block; width: 100%; box-sizing: border-box; position: relative; padding: 0 !important; padding: 0 0.5rem 0.5rem 0.5rem !important; border: none !important; } } /* -- season2022 */ .mceContentBody div.setting div.summer-season2021.season2022 div.activity-spot ul li { float: left; width: 32.0%; margin-right: 2%; } .mceContentBody div.setting div.summer-season2021.season2022 div.activity-spot ul li:nth-child(3n) { margin-right: 0; } .mceContentBody .season2022 h2 { border-top: none !important; } .tpl-prose.mceContentBody div.season2022 hr { border-top: none; } .mceContentBody div.setting .matsuri .list-display .update { white-space: normal; color:#333; position: relative; bottom:0; padding: 0.5rem 0;} @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021.season2022 div.activity-spot ul li { float: none; width: 100.0%; margin-right: 0; } .mceContentBody div.setting div.summer-season2021.season2022 div.activity-spot ul li:nth-child(30) { margin-right: 0; } } /* --------- */ .mceContentBody div.setting div.summer-season2021-trail { background: #fff5dd; margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-bottom: -10px; } .mceContentBody div.setting div.summer-season2021-trail div.main { margin-left: -20px; margin-right: -20px; /* margin-top: -30px; */ /* margin-top: -40px; */ position: relative; } .mceContentBody div.setting div.summer-season2021-trail div.main > img { width: 100%; display: block; filter: brightness(100%); } .mceContentBody div.setting div.summer-season2021-trail div.main div.main-copy {} .mceContentBody div.setting div.summer-season2021-trail div.main div.main-copy img { position: absolute; z-index: 1; top: 0; /* left: 50%; transform: translateX(-50%); */ opacity: 0; animation: 1s ease-in-out 2s normal forwards running fadein-copy-trail; /* max-width: 50%; */; } .mceContentBody div.setting div.summer-season2021-trail div.main-bottom-bg { margin-left: -20px; margin-right: -20px; margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021-trail div.main img { width: 100%; display: block; } /* reset */ .mceContentBody div.setting div.summer-season2021-trail, .mceContentBody div.setting div.summer-season2021-trail table, .mceContentBody div.setting div.summer-season2021-trail table td, .mceContentBody div.setting div.summer-season2021-trail table th, .mceContentBody div.setting div.summer-season2021-trail p { /* font-family: 'Kiwi Maru', serif; */ color: #000; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; } .mceContentBody div.setting div.summer-season2021-trail h3 { box-sizing: border-box; display: inline-block; font-size: 1.75em; margin-bottom: 1em; padding: 0; position: relative; text-align: left; width: 100%; z-index: 10; margin-top: 2em; /* color: #73b73b; */ text-align: center; border-bottom: 5px solid #73b73b; } .mceContentBody div.setting div.summer-season2021-trail h3 span { color: #73b73b; display: block; font-size: 100px; } .mceContentBody div.setting div.summer-season2021-trail h4 { /* */ background: none; box-sizing: border-box; font-weight: bold; height: auto; margin: 0 0 0.5em !important; margin-top: 20px !important; margin-bottom: 20px !important; padding: 0; position: relative; text-align: left; width: 100%; color: #000; font-size: 1.5em; } .mceContentBody div.setting div.summer-season2021-trail h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting div.summer-season2021-trail h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting div.summer-season2021-trail ul li:before { /* reset */ background: none; border-radius: 0; content: ""; display: none; height: 0; margin: 0; vertical-align: middle; width: 0; } /* ----- */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead { clear: both; overflow: hidden; margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021-trail div.kokoroe { text-align: center; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead p { /* float: left; width: 48%; margin-right: 4%; */; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead div.trail-course-map { /* float: left; width: 48%; position: relative; */; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead div.trail-course-map div { background: #fff; padding-top: 56.25%; position: relative; z-index: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead div.trail-course-map div img {} .mceContentBody div.setting div.summer-season2021-trail div.page-description { text-align: center; margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021-trail div.page-link { text-align: center; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul { clear: both; overflow: hidden; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li { float: left; width: 23.5%; margin-right: 2%; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a { display: block; position: relative; padding-top: 50%; background: #fff; color: #000; transition: 0.25s all; border: 0.3rem solid #75b739; font-weight: bold; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a:hover { opacity: 0.75; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a span { position: relative; top: 0; left: 0; transform: none; /* width: 100%; */ width: auto; box-sizing: border-box; background: #fff; white-space: nowrap; padding: 0; width: auto; line-height: 1.25; font-size: 2.0rem; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a > span { position: absolute; top: 45%; /* */ left: 50%; transform: translateX(-50%) translateY(-50%); /* width: 100%; */ width: auto; box-sizing: border-box; background: #fff; white-space: nowrap; padding: 1.0rem; width: 100%; line-height: 1.25; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a::before { border-right: 0.2rem solid #75b739; border-top: 0.2rem solid #75b739; content: ""; height: 0.6rem; position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%) rotate(135deg); transform: translateX(-50%) rotate(135deg); width: 0.6rem; z-index: 1000; } .mceContentBody div.setting div.summer-season2021-trail div.banner { /* max-width: 50%; margin-left: auto; margin-right: auto; */; } .mceContentBody div.setting div.summer-season2021-trail div.banner ul li { float: left; width: 32.0%; margin-right: 2%; } .mceContentBody div.setting div.summer-season2021-trail div.banner ul li:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting div.summer-season2021-trail div.banner ul li:before {} .mceContentBody div.setting div.summer-season2021-trail div.banner ul li a {} detail-information /* */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section {} .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail { overflow: hidden; clear: both; margin-bottom: 40px; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article { float: left; width: 23.5%; margin-right: 2%; font-size: 15px; /* */ box-sizing: border-box; padding-left: 0.25em; padding-right: 0.25em; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.headline { white-space: nowrap; font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 0.25em; margin-bottom: 0.25em; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.description { min-height: 85px; margin-bottom: 0.25em; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.detail-information table { border-top: 1px solid #ccc; border-collapse: collapse; width: 100%; font-size: 14px; /* */ background: #fff; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.detail-information table th, .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.detail-information table td { border-bottom: 1px solid #ccc; padding: 0.5rem; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.detail-information table th { background: #75b933; width: 45%; color: #fefffd; } /* おすすめ */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend { background: #fcffff; padding: 10px 20px; box-sizing: border-box; border: 1px dashed #73b73b; background: #fff; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.trail-map { padding: 40px; background: #fff; border: 1px dashed #73b73b; border-top: none; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend div.reccomend-headline { font-size: 1.5em; font-weight: bold; margin-top: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend div.reccomend-headline-point { font-size: 1.25em; display: inline-block; background: #6eb92b; border-radius: 1000px; padding-left: 40px; padding-right: 40px; color: #fbf04d; margin-bottom: 10px; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend div.reccomend-description { margin-bottom: 40px; text-align: left; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-link { background: #fff; padding: 20px 30px; box-sizing: border-box; border: 3px double #73b73b; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-link a { color: #000; position: relative; padding-left: 1.5em; width: calc(100% - 1.5em); left: 1.5em; margin-left: -1.5em; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-link a:before { background: #73b73b; position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: ""; border-radius: 1000px; height: 1em; width: 1em; } /* ----------.reccomend-article */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article { position: relative; margin-bottom: 75px; padding-bottom: 75px; border-bottom: 4px dotted #6eb92b; z-index: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:last-child { margin-bottom: 0; padding-bottom: 60px; border-bottom: none; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.text-wrap { float: left; width: 38%; margin-right: 4%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.reccomend-article-headline { font-size: 18px; font-weight: bold; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #000; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.spot-image { float: left; width: 58%; position: relative; z-index: -1; } /* いれこ */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(odd) div.text-wrap { float: right; width: 38%; margin-right: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(odd) div.spot-image { float: left; width: 58%; position: relative; z-index: -1; } /* */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.spot-image > div { padding-top: 75%; background: #f0f0f0; position: relative; z-index: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.spot-image span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 0; width: 100%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.spot-image span img { width: 100%; } /* --------- やじるし */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow:after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #000; border-radius: 1000px; height: 100px; width: 100px; z-index: 1; content: ""; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow > span { z-index: 2; color: #fff; position: relative; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow > span span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; bottom: -20px; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow div.arrow { position: absolute; top: 80px; left: 100px; transform: rotate(45deg); } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow div.arrow:before { border-bottom: 0.649519rem solid #000; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; content: ""; position: absolute; top: 60%; left: 0; transform: translateY(-35%) rotate(90deg); transition: all 0.125s ease 0s; z-index: 2; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow div.arrow:after { width: 100px; height: 2px; content: ""; background: #000; z-index: 2; position: absolute; left: -95px; top: 60%; } /* いれこ */ .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(odd) div.next-arrow div.arrow { transform: rotate(135deg); top: 80px; left: auto; right: 100px; } .mceContentBody div.setting div.summer-season2021-trail a.trail-link { background: #f9f045; padding: 1rem 2.5rem; color: #000; text-decoration: none; display: inline-block; position: relative; transition: 0.25s all; border: 0.1rem solid #f9f045; box-sizing: border-box; } .mceContentBody div.setting div.summer-season2021-trail a.trail-link:before { border-right: 0.1rem solid #000; border-top: 0.1rem solid #000; content: ""; height: 0.6rem; right: 1rem; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); width: 0.6rem; } .mceContentBody div.setting div.summer-season2021-trail a.trail-link:hover { background: #fff; color: #000; } .mceContentBody div.setting div.summer-season2021-trail a.trail-link:hover:before { border-right: 0.1rem solid #000; border-top: 0.1rem solid #000; } .mceContentBody div.setting div.summer-season2021-trail a[href^="tel:"] { pointer-events: none; text-decoration: none; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021-trail a[href^="tel:"] { pointer-events: auto; color: #533; text-decoration: underline; } .mceContentBody div.setting div.summer-season2021-trail a[href^="tel:"]:hover { text-decoration: none; } .mceContentBody div.setting div.summer-season2021-trail div.banner ul li { width: 48%; margin: 1%; } } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021-trail { overflow: hidden; /* margin-top: -20px; margin-bottom: -20px; */; } .mceContentBody div.setting div.summer-season2021-trail div.main { /* margin-top: -20px; */; } .mceContentBody div.setting div.summer-season2021-trail div.main div.main-copy img {} .mceContentBody div.setting div.summer-season2021-trail div.main-bottom-bg { position: relative; } .mceContentBody div.setting div.summer-season2021-trail div.main-bottom-bg img { position: absolute; top: 0; left: 0; } .mceContentBody div.setting div.summer-season2021-trail div.page-description { margin-bottom: 0; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li { margin-right: 2%; width: 49.0%; margin-bottom: 2rem; font-size: 14px; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article div.description { min-height: inherit; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail-article { float: none; margin-right: 0; width: 100.0%; box-sizing: border-box; margin-bottom: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead p { float: none; margin-right: 0; width: 100%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead div.trail-course-map { float: none; position: relative; width: 100%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.text-wrap, .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(2n+1) div.text-wrap { float: none; margin-right: 0; width: 100%; margin-bottom: 1rem; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.spot-image, .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(2n+1) div.spot-image { float: none; position: relative; width: 100%; z-index: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article div.next-arrow div.arrow { left: 30px; transform: rotate(90deg); } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:nth-child(2n+1) div.next-arrow div.arrow { left: auto; right: 20px; transform: rotate(90deg); } } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners {} .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.trail-image { float: left; width: 48%; margin-right: 4%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.trail-image img { width: 80%; margin-right: 0; margin-left: auto; display: block; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.manners { float: left; width: 48%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.manners strong { color: #6eb92b; font-size: 20px; border-bottom: 3px dotted #73b73b; display: block; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.manners ol { padding: 0; margin-left: 2rem; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend { padding: 10px; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-article:last-child { border-bottom: medium none; margin-bottom: 0; padding-bottom: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.trail-map { padding: 10px; } .mceContentBody div.setting div.summer-season2021-trail h3 { font-size: 1.25em; } .mceContentBody div.setting div.summer-season2021-trail h4 { font-size: 1.25em; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend div.reccomend-headline { font-size: 1.25em; margin-top: 20px; margin-bottom: 20px; text-align: center; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend-link { padding: 10px; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.reccomend div.reccomend-headline-point { font-size: 1.0em; padding-left: 10px; padding-right: 10px; text-align: center; display: block; } .mceContentBody div.setting div.summer-season2021-trail div.page-link ul li a::before { display: none; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.trail-image { float: none; width: 100%; margin-right: auto; margin-left: auto; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.trail-image img { width: 80%; margin-right: auto; margin-left: auto; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.kokoroe-manners div.manners { float: none; width: 100%; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section-lead { margin-bottom: 0; } .mceContentBody div.setting div.summer-season2021-trail div.trail-section div.course-detail { margin-bottom: 0; } } /* アコーディオンの実装 */ div.question-answer { margin: 10px 0 0; /* padding: 1em; */ background: none; font-size: 16px; position: relative; } div.question-answer div.question, div.question-answer div.answer { /* reset */ font-weight: normal; position: relative; margin: 0; padding: 0 0 0 0; list-style: none; background: none; } div.question-answer div.question { /* margin-bottom: 10px; */ /* padding: 1.5rem; */ color: #000; border: none; background: none; position: relative; padding-left: 4rem; padding-right: 5rem; } div.question-answer div.question:before { position: relative; z-index: 0; bottom: 0; left: 0; width: 0; height: 0; margin: 0; content: ''; border: none; background: none; } div.question-answer div.question span:before { /* position: absolute; content: "Q"; left: -0.5rem; top: -2.35rem; font-size: 2.2rem; font-weight: bold; color: #fff; color: #000; font-family: "Oswald", sans-serif; */; } div.question-answer div.question span:after { /* background: #e9ebec; background: #c8eced; width: 4rem; height: 4rem; position: absolute; content: ""; top: 0; left: -2rem; z-index: -1; transform: translateY(-50%); */; } div.question-answer div.question:after { /* position: absolute; z-index: 0; bottom: -9px; left: 50%; width: 0; height: 0; margin-left: -9px; content: ''; border-width: 9px 9px 0 9px; border-style: solid; border-color: #013891 transparent transparent transparent; */ display: none; } div.question-answer div.answer { /* padding: 2rem; color: #000; border: none; background: none; border-bottom: 3px dotted #fff; background: none; position: relative; padding-left: 4rem; background: #fff; margin-left: 2rem; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25); border: 0.1rem solid #ccc; margin-bottom: 4rem; */; } div.question-answer div.answer:before { position: relative; z-index: 0; bottom: 0; left: 0; width: 0; height: 0; margin: 0; content: ''; border: none; background: none; } div.question-answer div.answer span:before { /* position: absolute; content: "A"; left: 0rem; top: -2.25rem; font-size: 2.2rem; font-weight: bold; color: #fff; font-family: "Oswald", sans-serif; z-index: 1; */; } div.question-answer div.answer span:after { /* background: #000; width: 4rem; height: 4rem; position: absolute; content: ""; top: 0; left: -1.5rem; z-index: 0; transform: translateY(-50%); */; } /* */ div.question-answer-accordion { /* border-bottom: 1px solid #000; */ box-sizing: border-box; clear: both; cursor: pointer; font-weight: normal; margin-bottom: 20px; position: relative; background: #fff; z-index: 0; padding: 10px; border-radius: 1000px; /* box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25); */ border: 0.1rem solid #73b73b; transition: 0.25s all; max-width: 400px; margin-left: auto; margin-right: auto; text-align: center; } div.question-answer-accordion:hover { /* background: #f8f8f4 none repeat scroll 0 0; */ /* text-decoration: underline; */ /* background: #f8f8f4; */; } div.question-answer-accordion div.question-answer-accordion-label { /* font-size: 2.1rem; min-height: 40px; */; } div.question-answer-accordion div.question-answer-accordion-trigger { background: #73b73b; display: block; height: 2rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 2rem; border-radius: 100rem; } div.question-answer-accordion div.question-answer-accordion-trigger span { background: #fff; display: block; height: 2px; position: absolute; transition: all 0.5s ease 0s; width: 70%; } div.question-answer-accordion div.question-answer-accordion-trigger span:nth-child(1) { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-90deg); } div.question-answer-accordion div.question-answer-accordion-trigger span:nth-child(2) { display: block; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } div.question-answer-accordion.active div.question-answer-accordion-trigger span:nth-child(1) { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } div.question-answer-accordion.active div.question-answer-accordion-trigger span:nth-child(2) { display: none; } div.question-answer-accordion-wrap { border-top: medium none; box-sizing: border-box; margin-bottom: 0.5rem; } div.question-answer-accordion-wrap { max-height: 0; overflow: hidden; transition: all 0.1s ease 0s; } div.question-answer-accordion.active + div.question-answer-accordion-wrap { box-sizing: border-box; max-height: 10000px; padding-bottom: 1em; overflow: visible; } /* */ div.question-answer-accordion.circle { display: flex; align-items: center; justify-content: center; border-radius: 1000rem; width: 20rem !important; height: 20rem !important; padding: 0; position: absolute; right: 0; top: -15rem; z-index: 1000; } div.question-answer-accordion.circle:hover { background: #f0f0f0; } div.question-answer-accordion.circle div.question { padding: 0; /*position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);*/ } div.question-answer-accordion.circle div.question-title { font-size: 2.0rem; font-weight: bold; white-space: nowrap; line-height: 1.5; } div.question-answer-accordion.circle div.question-title div.note { font-size: 1.4rem; } div.question-answer-accordion.circle div.question-answer-accordion-trigger { /* position: absolute; left: 50%; top: auto; bottom: -1rem; transform: translateX(-50%) translateY(-50%); width: 3rem; height: 3rem; */ display: none; } @media only screen and (max-width: 768px) { div.question-answer-accordion.circle { position: relative; right: 0; top: 0; } } div.question-answer-accordion.circle div.question div.details { background: #6eb92b; border-radius: 1000rem; color: #fff; max-width: 80%; margin-left: auto; margin-right: auto; margin-top: 1rem; } /* ---------- trail */ .mceContentBody div.setting div.summer-season2021-trail div.recommended-information-list { background: #fff; padding: 2rem; } .mceContentBody div.setting div.summer-season2021-trail div.recommended-information ul li { position: relative; padding-left: 1.5rem; border-bottom: 0.3rem dotted #ccc; /* border-top: 0.3rem dotted #ccc; */ padding-bottom: 0.5rem; padding-top: 0.5rem; font-size: 1.8rem; } .mceContentBody div.setting div.summer-season2021-trail div.recommended-information ul li::before { background: #73b73b; border-radius: 1000rem; content: ""; height: 1rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 1rem; display: block; } /* ---------- 鳥取砂丘ロケーション紹介 */ div.location-guide-banner { width: 100%; } div.location-guide-banner a { width: 100%; display: block; } div.location-guide-banner a img { width: 100%; display: block; } /* ---------- 泊まって体験!コテージ特集 */ div.setting.cottage {} .mceContentBody div.setting.cottage { background: #fff; color: #000; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; margin-left: -20px; margin-right: -20px; margin-top: -20px; max-width: clac(100% + 40px); padding-left: 30px; padding-right: 30px; } @media screen and (max-width: 768px) { .mceContentBody div.setting.cottage { margin-top: -10px; margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; max-width:calc(100% + 20px); } } .mceContentBody div.cottage a, .mceContentBody div.cottage a:hover { color: #2292d0; } .mceContentBody div.cottage a[href^="tel:"] { color: #000; pointer-events: none; text-decoration: none; } .mceContentBody div.cottage h3 { box-sizing: border-box; display: inline-block; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; margin: 0 auto 0.5em; padding: 0; position: relative; text-align: center; width: 100%; z-index: 10; font-weight: bold; font-size: 1.8em; } .mceContentBody div.cottage h3 span { display: inline-block; position: relative; } .mceContentBody div.cottage h3 span:before { position: absolute; content: ""; top: 50%; left: -1em; transform: translateY(-50%) rotate(-30deg); width: 2px; height: 1em; background: #04251c; } .mceContentBody div.cottage h3 span:after { position: absolute; content: ""; top: 50%; right: -1em; transform: translateY(-50%) rotate(30deg); width: 2px; height: 1em; background: #04251c; } .mceContentBody div.setting.cottage h4 { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; box-sizing: border-box; color: #000; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; font-size: 1.8em; font-weight: bold; height: auto; margin: 20px 0; padding: 0; position: relative; text-align: center; width: 100%; } .mceContentBody div.setting.cottage h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.cottage h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.cottage h4::before {} .mceContentBody div.setting.cottage h4::after {} .mceContentBody div.setting.cottage h4 span { position: relative; z-index: 2; } @media screen and (max-width: 768px) { .mceContentBody div.cottage a[href^="tel:"] { color: #2292d0; pointer-events: auto; text-decoration: underline; } } .mceContentBody div.cottage .link { background: none; margin-bottom: 0; padding-left: 0; text-align: center; } .mceContentBody div.cottage .link a { background: #e8eaeb; border-radius: 1000px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.024); color: #000; display: inline-block; padding: 0.75em 40px; position: relative; text-decoration: none; transition: all 0.3s ease 0s; } .mceContentBody div.cottage ul > li::before { background: #000; } .mceContentBody div.cottage div.main { /* margin-left: -20px; margin-right: -20px; margin-top: -20px; */; } .mceContentBody div.cottage div.map-wrap { margin-left: -20px; margin-right: -20px; } .mceContentBody div.setting.cottage div.cottage-spot-number { border: 2px solid #6ec9ef; border-radius: 0.25rem; color: #6ec9ef; display: inline-block; font-size: 20px; font-weight: bold; height: 40px; line-height: 40px; text-align: center; vertical-align: middle; width: 40px; } .mceContentBody div.setting.cottage div.cottage-spot-number { background: #e9dd49; border: none; /* border: 2px solid #054137; */ color: #22463c; border-radius: 1000rem; font-weight: bold; } .mceContentBody div.setting.cottage div.cottage-spot-number div { position: absolute; top: 0; left: 0; transform: translateX(-25%) translateY(-25%); font-size: 14px; background: #fcf7f1; border-radius: 1000rem; height: 1.5rem; width: 1.5rem; line-height: 1.5rem; text-align: center; } .mceContentBody div.setting.cottage div.cottage-spot-name-wrap { position: relative; } .mceContentBody div.setting.cottage div.cottage-spot-name-wrap::before { border-top: 0.1rem solid #000; content: ""; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .mceContentBody div.setting.cottage div.cottage-spot-name-wrap > div { background: #fff; display: inline-block; padding-right: 1em; position: relative; z-index: 1000; } .mceContentBody div.setting.cottage div.cottage-spot-name { display: inline-block; font-size: 30px; font-weight: normal; vertical-align: middle; } .mceContentBody div.setting.cottage div.cottage-spot-name a { color: #000; text-decoration: none; font-weight: bold; } .mceContentBody div.setting.cottage div.article div.description { color: #000; font-feature-settings: "palt"; margin-bottom: 20px; } .mceContentBody div.setting.cottage div.article div.cottage-spot-photo { position: relative; } .mceContentBody div.setting.cottage div.article div.cottage-spot-photo img { /* border-radius: 10px; */ display: block; overflow: hidden; width: 100%; } .mceContentBody div.cottage p, .mceContentBody div.cottage td, .mceContentBody div.cottage th { color: #000; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; position: relative; z-index: 2; } .mceContentBody div.setting.cottage div.article table { border-collapse: collapse; border-top: 1px solid #e8ebec; margin-bottom: 20px; table-layout: fixed; width: 100%; /* */; } .mceContentBody div.setting.cottage div.article table { border-collapse: collapse; } .mceContentBody div.setting.cottage div.article table th, .mceContentBody div.setting.cottage div.article table td { border-bottom: 1px solid #e8ebec; color: #000; padding: 0.25em 1em; } .mceContentBody div.setting.cottage div.article table th { background: #e8ebec; color: #000; font-weight: normal; padding-left: 0.5em; padding-right: 0.5em; } @media screen and (max-width: 768px) { .mceContentBody div.cottage { padding: 0; } .mceContentBody div.cottage div.main { /* margin-left: -10px; margin-right: -10px; margin-top: -10px; */; } .mceContentBody div.cottage div.map-wrap { margin-left: -10px; margin-right: -10px; } .mceContentBody div.setting.cottage div.article { padding: 0; } .mceContentBody div.setting.cottage div.cottage-spot-name-wrap > div { display: block; padding-right: 0; text-align: left; width: 100%; white-space: nowrap; } .mceContentBody div.setting.cottage div.cottage-spot-number { display: inline-block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.cottage div.cottage-spot-name { font-size: 21px; } .mceContentBody div.cottage h4 { font-size: 21px; /* nowrap */; } .mceContentBody div.setting.cottage div.article table th, .mceContentBody div.setting.cottage div.article table td { display: block; width: 100% !important; box-sizing: border-box; } .mceContentBody div.cottage h3 { font-size: 2.1rem; } .mceContentBody div.cottage h4 { font-size: 2.1rem; } .mceContentBody div.setting.cottage h4 { font-size: 2.1rem; margin-bottom: 2rem; line-height: 1.5; } .mceContentBody div.cottage div.sightseeing-list ul li a div.name { font-size: 1.8rem; margin: 0.5rem 0; } } /* ------- */ .mceContentBody div.cottage div.sightseeing-list ul li { background: #fff; /* border-radius: 0.25rem; */ /* box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); */ box-sizing: border-box; float: left; margin-bottom: 40px; padding: 0; position: relative; transition: all 0.25s ease 0s; /* white-space: nowrap; */; } .mceContentBody div.cottage div.sightseeing-list ul li:hover { background: #f8f8f8; } .mceContentBody div.cottage div.sightseeing-list ul li div.spot-number { background: #c4e441; color: #22463c; /* border: 1px solid #000; */ border-radius: 1000rem; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; font-size: 1.2em; height: 40px; left: -0.35em; line-height: 40px; position: absolute; text-align: center; top: -0.35em; width: 40px; z-index:100; } .mceContentBody div.cottage div.sightseeing-list ul li div.spot-number span { color: #000; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); font-weight: bold; white-space: nowrap; } .mceContentBody div.cottage div.other-pick-up div.sightseeing-list ul li div.spot-number { background: #e9dd49; border: none; /* border: 2px solid #054137; */ color: #22463c; border-radius: 1000rem; } /* */ .mceContentBody div.cottage div.sightseeing-list ul li div.cottage-spot-number { background: #c4e441; color: #22463c; /* border: 1px solid #000; */ border-radius: 1000rem; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; font-size: 1.2em; height: 40px; left: -0.35em; line-height: 40px; position: absolute; text-align: center; top: -0.35em; width: 40px; z-index: 100; } .mceContentBody div.cottage div.sightseeing-list ul li div.cottage-spot-number span { color: #000; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); font-weight: bold; } .mceContentBody div.cottage div.other-pick-up div.sightseeing-list ul li div.cottage-spot-number { background: #e9dd49; border: none; /* border: 2px solid #054137; */ color: #22463c; border-radius: 1000rem; } .mceContentBody div.cottage div.sightseeing-list ul li div.cottage-spot-number div { position: absolute; top: 0; left: 0; transform: translateX(-25%) translateY(-25%); font-size: 14px; background: #fcf7f1; border-radius: 1000rem; height: 1.5rem; width: 1.5rem; line-height: 1.5rem; text-align: center; } .mceContentBody div.cottage div.sightseeing-list.spot > ul { /* margin-bottom: -40px; */; } .mceContentBody div.cottage div.sightseeing-list.spot > ul > li { margin-bottom: 60px; margin-right: 2%; width: 32%; } .mceContentBody div.cottage div.sightseeing-list.spot ul li:nth-child(3n) { margin-right: 0; } @media screen and (max-width: 768px) { .mceContentBody div.cottage div.sightseeing-list.spot > ul > li { margin-bottom: 40px; margin-right: 2%; width: 49%; } .mceContentBody div.cottage div.sightseeing-list.spot > ul > li:nth-child(3n) { margin-right: 2%; } .mceContentBody div.cottage div.sightseeing-list.spot > ul > li:nth-child(2n) { margin-right: 0; } } .mceContentBody div.cottage div.sightseeing-list ul li div.thumbnail { /* border-radius: 0.25rem; */ margin-bottom: 10px; overflow: hidden; position: relative; width: 100%; } .mceContentBody div.cottage div.sightseeing-list ul li div.thumbnail::before {} .mceContentBody div.cottage div.sightseeing-list ul li div.thumbnail::after {} .mceContentBody div.cottage div.sightseeing-list ul li div.thumbnail span { background: #f8f8f8; display: block; padding-top: 100%; position: relative; width: 100%; } .mceContentBody div.cottage div.sightseeing-list.yozakura ul li div.thumbnail span { padding-top: 75%; } .mceContentBody div.cottage div.sightseeing-list ul li div.thumbnail span img { left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); transition: all 0.2s ease 0s; z-index: 0; } .mceContentBody div.cottage div.sightseeing-list.spot ul li div.thumbnail span img {} .mceContentBody div.cottage div.sightseeing-list.spot ul li:hover div.thumbnail span img { filter: brightness(110%); } .mceContentBody div.cottage div.sightseeing-list ul li a { text-decoration: none; } .mceContentBody div.cottage div.sightseeing-list ul li a:hover { color: #000; } .mceContentBody div.cottage div.sightseeing-list ul li a div.name, .mceContentBody div.cottage div.sightseeing-list ul li a div.description { color: #000; padding-left: 10px; padding-right: 10px; } .mceContentBody div.cottage div.sightseeing-list ul li a div.name span { font-size: 10px; } .mceContentBody div.cottage div.sightseeing-list ul li div.description { font-size: 14px; } .mceContentBody div.cottage div.sightseeing-list ul li div.description table { border-bottom: 1px solid #000; border-top: 1px solid #000; width: 100%; } .mceContentBody div.cottage div.sightseeing-list ul li div.description table th { font-weight: normal; width: 40%; } /* */ .mceContentBody div.cottage div.sightseeing-list ul li div.description table th { display: block; width: 100%; box-sizing: border-box; } .mceContentBody div.cottage div.sightseeing-list ul li div.description table td { display: block; width: 100%; box-sizing: border-box; } .mceContentBody div.cottage div.sightseeing-list ul li a:hover { text-decoration: none; } @media screen and (max-width: 768px) { .mceContentBody div.cottage div.sightseeing-list ul li a div.name { font-size: 1.8rem; } .mceContentBody div.cottage div.sightseeing-list ul li a div.description { font-size: 1.4rem; } .mceContentBody div.cottage div.other-pick-up div.sightseeing-list.spot > ul > li { width: 100%; } } /* ------- */ /* モデルコース */ .mceContentBody div.cottage div.model-course { margin-bottom: 80px; padding-top: 20px; padding-bottom: 20px; border: 2px solid #a9d8ec; margin-top: 40px; border-radius: 0.25rem; } .mceContentBody div.cottage div.model-course h4 { color: #333; font-size: 2.6rem; width: auto; margin-top: 0; border-bottom: 2px solid #a9d8ec; } .mceContentBody div.cottage div.model-course h4 span { color: #a9d8ec; font-size: 5rem; } .mceContentBody div.cottage div.model-course ul li { width: 18%; margin-right: 1%; margin-left: 1%; float: left; margin-bottom: 1rem; /* border: 0.1rem solid #054137; */ box-sizing: border-box; position: relative; } .mceContentBody div.cottage div.model-course ul li:before { display: none; } .mceContentBody div.cottage div.model-course ul li > a { display: block; min-height: 6rem; border-radius: 1000rem; background: #a9d8ec; color: #054137; font-size: 13px; position: relative; } .mceContentBody div.cottage div.model-course ul li > span { display: block; min-height: 6rem; border-radius: none; background: #fff; color: #000; font-size: 1.3rem; position: relative; border: 2px solid #a9d8ec; box-sizing: border-box; border-radius: 0.25rem; } .mceContentBody div.cottage div.model-course ul li > a > span, .mceContentBody div.cottage div.model-course ul li > span > span { display: block; text-align: center; text-decoration: none; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 100; width: 100%; } .mceContentBody div.cottage div.model-course ul li:hover > a { /* background: #054137; */ opacity: 0.75; } .mceContentBody div.cottage div.model-course ul li:hover > a > span { /* color: #e8ebec; */ color: #000; } .mceContentBody div.cottage div.model-course ul li:after { background: none; border-right: 2px solid #a9d8ec; border-top: 2px solid #a9d8ec; content: ""; display: block; height: 10px; position: absolute; top: 50%; right: -1.75rem; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all 0.2s ease-in-out 0s; width: 10px; } .mceContentBody div.cottage div.model-course ul li:before { background: #a9d8ec; position: absolute; content: ""; width: 20px; height: 2px; right: -1.3rem; top: 50%; transform: translateY(-50%); z-index: 1000; display: block; border-radius: 0; } .mceContentBody div.cottage div.model-course ul li.arrow-none {} .mceContentBody div.cottage div.model-course ul li.arrow-none:before, .mceContentBody div.cottage div.model-course ul li.arrow-none:after { display: none !important; } .mceContentBody div.cottage div.model-course ul li div.comment { position: absolute; top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); white-space: nowrap; text-align: center; } .mceContentBody div.cottage div.model-course ul li div.comment span { display: inline-block; position: relative; color:; font-size: 1.2rem; } .mceContentBody div.cottage div.model-course ul li div.comment span::before { background: #a9d8ec none repeat scroll 0 0; content: ""; height: 1em; left: -1em; position: absolute; top: 50%; transform: translateY(-50%) rotate(-30deg); width: 2px; } .mceContentBody div.cottage div.model-course ul li div.comment span::after { background: #a9d8ec none repeat scroll 0 0; content: ""; height: 1em; position: absolute; right: -1em; top: 50%; transform: translateY(-50%) rotate(30deg); width: 2px; } @media screen and (max-width: 768px) { .mceContentBody div.cottage div.model-course ul li div.comment { position: relative; top: 0; left: 0; transform: none; white-space: nowrap; text-align: center; } .mceContentBody div.cottage div.model-course ul li { width: calc(90% - 20px); margin-right: auto; margin-left: auto; float: none; margin-bottom: 1rem; /* border: 0.1rem solid #054137; */ min-height: 4rem; box-sizing: border-box; border-radius: 1000rem; position: relative; /* background: #e8ebec; */ background: none; } .mceContentBody div.cottage div.model-course ul li:after { background: none; border-right: 2px solid #054137; border-top: 2px solid #054137; content: ""; display: block; height: 10px; position: absolute; top: inherit; right: inherit; left: 50%; bottom: -15px; transform: translateX(-50%) translateY(-50%) rotate(135deg); transition: all 0.2s ease-in-out 0s; width: 10px; } .mceContentBody div.cottage div.model-course ul li:before { background: #054137; position: absolute; content: ""; width: 20px; height: 2px; top: inherit; right: inherit; left: 50%; bottom: 0; transform: translateX(-50%) translateY(-50%) rotate(90deg); z-index: 1000; display: block; border-radius: 0; } .mceContentBody div.cottage ul.flex-direction-nav .flex-prev, .mceContentBody div.cottage ul.flex-direction-nav .flex-next { opacity: 0.5 !important; } .mceContentBody div.cottage div.model-course h4 span { font-size: 4rem; } .mceContentBody div.cottage div.model-course h4 { font-size: 2.1rem; line-height: 1.5; padding-bottom: 2rem; } } /* .flexslider addition */ .mceContentBody div.cottage div.flexslider ul > li { padding: 0 !important; margin-bottom: 0; /* border-radius: 0.25rem; */ /* overflow: hidden; */; } .mceContentBody div.cottage div.flexslider ul > li img { /* border-radius: 0.25rem; */ overflow: hidden; } .mceContentBody div.cottage div.flexslider ul > li::before { display: none; } .mceContentBody div.cottage ul.flex-direction-nav { margin: 0; width: 100%; } .mceContentBody div.cottage ul.flex-direction-nav { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); -webkoit-transform: translateY(-50%); z-index: 1000; } .mceContentBody div.cottage ul.flex-direction-nav li.flex-nav-prev { float: none !important; position: absolute !important; left: 0; z-index: 1000; } .mceContentBody div.cottage ul.flex-direction-nav li.flex-nav-next { float: none !important; position: absolute !important; right: 0; z-index: 1000; } .mceContentBody div.cottage div.scroller { bottom: 0; display: block; height: 80px; position: fixed; right: 0; width: 80px; z-index: 500; } .mceContentBody div.cottage div.scroller div.button { height: 80px; position: absolute; top: 0; width: 80px; } .mceContentBody div.cottage div.scroller div.button a { background: #a6d9ec; display: block; height: 80px; position: relative; transition: all 0.25s ease 0s; width: 80px; } .mceContentBody div.cottage div.scroller div.button a:hover { opacity: 1; } .mceContentBody div.cottage div.scroller div.button a::before { bottom: -10%; color: #04251e; content: "トップに戻る"; font-size: 12px; font-weight: bold; left: 50%; position: absolute; transform: translateX(-50%) translateY(-60%); white-space: nowrap; } .mceContentBody div.cottage div.scroller div.button a::after { border-right: 1px solid #04251e; border-top: 1px solid #04251e; content: ""; display: block; height: 20px; left: 50%; position: absolute; top: 60%; transform: translateX(-50%) translateY(-110%) rotate(-45deg); width: 20px; } /* .mceContentBody div.cottage ul.flex-direction-nav li.flex-nav-prev:before { display: block; } */ /* common - addition */ .mceContentBody div.setting .default-inline-block { display: inline-block; } .mceContentBody div.setting .responsive-inline-block { display: none; } .mceContentBody div.setting .default-block { display: block; } .mceContentBody div.setting .responsive-block { display: none; } /* --------- */ .mceContentBody div.setting div.odekake.odekake2019 img { border-radius: 5px; overflow: hidden; /* */; } .mceContentBody div.setting div.odekake.odekake2019, .mceContentBody div.setting div.odekake.odekake2019 p, .mceContentBody div.setting div.odekake.odekake2019 td {} .mceContentBody div.setting div.odekake.odekake2019.odekake2021 {} .mceContentBody div.setting div.odekake.odekake2019.odekake2021 h4 { width: 100%; margin: 0 !important; padding: 0; margin-bottom: 20px !important; } /* */ .mceContentBody div.setting div.odekake.odekake2019 h6 { overflow: inherit; } .mceContentBody div.setting table.deco-tb span.material-icons { display: inline-block; font-size: 16px; vertical-align: middle; position: relative; top: -2px; } .mceContentBody div.setting table.deco-tb span.pick-up-label { display: inline-block; font-size: 14px; vertical-align: middle; } /* --------- */ @media only screen and (max-width: 768px) { .mceContentBody div.setting .default-block { display: none; } .mceContentBody div.setting .responsive-block { display: block; } .mceContentBody div.setting .default-inline-block { display: none; } .mceContentBody div.setting .responsive-inline-block { display: inline-block; } /* --- 鳥取県の紅葉みどころマップ */ .mceContentBody div.setting div.odekake.odekake2019 .table01 td, .mceContentBody div.setting div.odekake.odekake2019 .table02 td, .mceContentBody div.setting div.odekake.odekake2019 .table01 td, .mceContentBody div.setting div.odekake.odekake2019 .table02 td, .mceContentBody div.setting div.odekake.odekake2019 .deco-tb td { border: medium none; box-sizing: border-box; display: table-cell; float: none; line-height: 1.5; margin-bottom: 0; overflow-wrap: break-word; padding: 5px 0.5% !important; width: auto; word-break: break-all; } .mceContentBody div.setting div.odekake.odekake2019 p { margin-bottom: 5px; font-size: 14px !important; } .mceContentBody div.setting div.odekake.odekake2019 h6 { font-size: 16px; white-space: nowrap; } .mceContentBody div.setting div.odekake.odekake2019.odekake2021 h4 { font-size: 16px; white-space: nowrap; } .mceContentBody div.setting div.odekake.odekake2019 h3 { font-size: 16px; white-space: nowrap; } .mceContentBody div.setting div.odekake.odekake2019 .deco-tb { table-layout: fixed; min-width: inherit; } } .mceContentBody div.setting div.odekake.odekake2019 table.deco-tb th { white-space: nowrap !important; } .mceContentBody div.setting div.odekake.odekake2019 table.deco-tb td { font-size: 15px; } .mceContentBody div.setting div.odekake.odekake2019 table.deco-tb td:first-child { white-space: nowrap !important; } .mceContentBody div.setting div.odekake.odekake2019 .alert { color: #f66; } .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav .flex-prev, .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav .flex-next { opacity: 0.5 !important; background: #e63217; border-radius: 1000rem; } /* --- .flexslider addition */ .mceContentBody div.setting div.odekake.odekake2019 div.flexslider ul > li { padding: 0 !important; margin-bottom: 0; /* border-radius: 0.25rem; */ /* overflow: hidden; */; } .mceContentBody div.setting div.odekake.odekake2019 div.flexslider ul > li img { /* border-radius: 0.25rem; */ overflow: hidden; } .mceContentBody div.setting div.odekake.odekake2019 div.flexslider ul > li::before { display: none; } .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav { margin: 0; width: 100%; } .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav { margin: 0; position: absolute; top: 50%; transform: translateY(-50%); -webkoit-transform: translateY(-50%); z-index: 1000; } .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav li.flex-nav-prev { float: none !important; position: absolute !important; left: 0; z-index: 1000; } .mceContentBody div.setting div.odekake.odekake2019 ul.flex-direction-nav li.flex-nav-next { float: none !important; position: absolute !important; right: 0; z-index: 1000; } /* */ .mceContentBody div.setting div.odekake.odekake2019 div.scroller { bottom: 0; display: block; height: 80px; position: fixed; right: 0; width: 80px; z-index: 500; } .mceContentBody div.setting div.odekake.odekake2019 div.scroller div.button { height: 80px; position: absolute; top: 0; width: 80px; } .mceContentBody div.setting div.odekake.odekake2019 div.scroller div.button a { background: #e63217; display: block; height: 80px; position: relative; transition: all 0.25s ease 0s; width: 80px; } .mceContentBody div.setting div.odekake.odekake2019 div.scroller div.button a:hover { opacity: 1; } .mceContentBody div.setting div.odekake.odekake2019 div.scroller div.button a::before { bottom: -10%; color: #fff; content: "トップに戻る"; font-size: 12px; font-weight: bold; left: 50%; position: absolute; transform: translateX(-50%) translateY(-60%); white-space: nowrap; } .mceContentBody div.setting div.odekake.odekake2019 div.scroller div.button a::after { border-right: 1px solid #fff; border-top: 1px solid #fff; content: ""; display: block; height: 20px; left: 50%; position: absolute; top: 60%; transform: translateX(-50%) translateY(-110%) rotate(-45deg); width: 20px; } .mceContentBody div.setting div.odekake.odekake2019 div.recommended-spot { border: 4px double #efae71; padding: 20px 40px; box-sizing: border-box; margin-bottom: 40px; } .mceContentBody div.setting div.odekake.odekake2019 div.recommended-spot h4 { font-size: 28px; text-align: center; padding: 0; padding-bottom: 10px; color: #ea5132; margin-top: 0; border-bottom: 4px double #efae71; } .mceContentBody div.setting div.odekake.odekake2019 div.recommended-spot h6 { font-size: 21px; } @media only screen and (max-width: 768px) { .mceContentBody div.setting div.odekake.odekake2019 div.recommended-spot { padding: 20px 0; border-left: none; border-right: none; } .mceContentBody div.setting div.odekake.odekake2019 div.recommended-spot h6 { font-size: 18px; } } /* 教育旅行ページ用 */ body.temp.edu2 .mceContentBody a.index_box div.term, body.temp.edu2 .mceContentBody a.index_box div.address { text-align: left; } body.temp.edu2 .mceContentBody a.index_box div.number { position: relative; text-align: left; } body.temp.edu2 .mceContentBody a.index_box div.number:before { background: rgba(0, 0, 0, 0) url("https://www.tottori-guide.jp/common/img/i_asobu.png") no-repeat scroll center center / 1.2em auto; display: inline-block; height: 1.2em; margin: -0.2em 0 0; vertical-align: middle; width: 1.2em; content: ""; } body.temp.edu2 .mceContentBody a.index_box div.number span { display: none; } /* フィルムコミッション - リニューアル用 */ .mceContentBody div.achievement-list {} .mceContentBody div.achievement-list {} .mceContentBody div.achievement-list div.thumbnail { float: left; margin-right: 2%; min-height: 18rem; width: 28%; } .mceContentBody div.achievement-list div.thumbnail span { height: 100%; overflow: hidden; padding-top: 0; } .mceContentBody div.achievement-list div.thumbnail span img { height: 100%; max-width: inherit; width: 100%; } .mceContentBody div.achievement-list div.details-information { box-sizing: border-box; float: left; max-width: calc(100% - 24rem); width: 70%; } .mceContentBody div.achievement-list div.details-information div.headline { border-bottom: 0.1rem solid #323c46; padding-bottom: 1rem; } /* - @スノーシュー・ウィンターアクティビティ特集 */ div.setting.winter-activities {} .mceContentBody div.setting.winter-activities { background: #f1f4f7; color: #000; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; margin-left: -20px; margin-right: -20px; margin-top: -10px; max-width:calc(100% + 40px); padding-left: 20px; padding-right: 20px; /* background: #00a0da; */; } .mceContentBody div.setting.winter-activities div.activities-link { position: relative; } .mceContentBody div.setting.winter-activities div.activities-link a { display: block; width: 150px; height: 150px; background: linear-gradient(rgb(251, 188, 245), rgb(190, 219, 235)); box-sizing: border-box; position: absolute; border-radius: 1000px; right: 0; top: -100px; text-align: center; color: #181d5f; font-weight: bold; text-decoration: none; } .mceContentBody div.setting.winter-activities div.activities-link a:before { border-right: 1px solid #181d5f; border-top: 1px solid #181d5f; content: ""; display: block; height: 20px; left: 50%; position: absolute; bottom: 0; transform: translateX(-50%) translateY(-110%) rotate(-225deg); width: 20px; } .mceContentBody div.setting.winter-activities div.activities-link a span { position: absolute; top: 40%; left: 50%; transform: translateX(-50%) translateY(-50%); line-height: 1.25; white-space: nowrap; } .mceContentBody div.setting.winter-activities:before { /* content: ""; height: calc(100% - 110px); width: 2px; display: block; position: absolute; top: 50px; left: 0; background: #ffb9f5; z-index: 0; */; } .mceContentBody div.setting.winter-activities:after { /* content: ""; height: calc(100% - 110px); width: 2px; display: block; position: absolute; top: 50px; right: 0; background: #ffb9f5; z-index: 0; */; } .mceContentBody div.setting.winter-activities hr { border-top: 1px solid #ccc; visibility: visible; } @media screen and (max-width: 768px) { .mceContentBody div.setting.winter-activities { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } } .mceContentBody div.winter-activities a, .mceContentBody div.winter-activities a:hover { color: #2292d0; } .mceContentBody div.winter-activities a[href^="tel:"] { color: #000; pointer-events: none; text-decoration: none; } .mceContentBody div.winter-activities h3 { box-sizing: border-box; display: inline-block; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; margin: 0 auto 0.5em; padding: 0; position: relative; text-align: center; width: 100%; z-index: 10; font-weight: bold; font-size: 1.8em; /* border-bottom: 1px solid #ffb9f5; */; } .mceContentBody div.winter-activities h3:after { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); content: ""; width: 80px; height: 80px; background: url(https://www.tottori-guide.jp/files/51272.png); background-size: 80px; z-index: 0; opacity: 1; } .mceContentBody div.winter-activities h3 span { display: inline-block; position: relative; color: #181d5f; z-index: 1; letter-spacing: 2px; } .mceContentBody div.setting.winter-activities h4 { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; box-sizing: border-box; color: #000; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; font-size: 1.8em; font-weight: bold; height: auto; margin: 20px 0; padding: 0; position: relative; text-align: center; width: 100%; } .mceContentBody div.setting.winter-activities h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.setting.winter-activities h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } .mceContentBody div.setting.winter-activities h4::before {} .mceContentBody div.setting.winter-activities h4::after {} .mceContentBody div.setting.winter-activities h4 span { position: relative; z-index: 2; } /* - */ .mceContentBody div.winter-activities div.section { /* background: #fff; padding: 10px; border-radius: 10px; */ border-bottom: 2px dashed #ddd; margin-bottom: 40px; padding-bottom: 20px; } .mceContentBody div.winter-activities div.section div.lead-text { font-size: 24px; color: #181d5f; border-bottom: 2px solid #ffb9f5; margin-bottom: 20px; padding-bottom: 10px; position: relative; } .mceContentBody div.winter-activities div.section div.lead-text:after { /* border-bottom: 10px solid #ffb9f5; border-left: 5px solid transparent; border-right: 5px solid transparent; content: ""; position: absolute; bottom: -6px; right: -2px; transform: rotate(90deg); z-index: 1; */; } .mceContentBody div.winter-activities table { border: 2px solid #ddd; width: 100%; border-collapse: separate; background: #fff; border-radius: 5px; overflow: hidden; } .mceContentBody div.winter-activities td, .mceContentBody div.winter-activities th { border-bottom: 2px solid #ddd; font-size: 14px; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } .mceContentBody div.winter-activities p, .mceContentBody div.winter-activities td, .mceContentBody div.winter-activities th { font-family: "Yu Gothic", YuGothic, 'Noto Sans JP', "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue"; position: relative; z-index: 2; font-weight: normal; color: #000; } .mceContentBody div.winter-activities th { /* background: #f8f8f8; */ background: #181d5f; color: #fff; border-bottom: 2px solid #ddd; white-space: nowrap; } .mceContentBody div.winter-activities table tr:last-child td, .mceContentBody div.winter-activities table tr:last-child th { border-bottom: none; } .mceContentBody div.setting.winter-activities div.deco-box img { background: #fff; } .mceContentBody div.setting.winter-activities ul.deco-list li { line-height: 1.5; } .mceContentBody div.setting.winter-activities div.deco-box { padding: 10px; box-sizing: border-box; background: #fff; mix-blend-mode: multiply; } .mceContentBody div.winter-activities div.article-list div.article div.heading { font-size: 20px; font-weight: bold; color: #181d5f; } .mceContentBody div.winter-activities div.article-list div.article div.thumbnail { margin-bottom: 15px; } .mceContentBody div.winter-activities div.article-list div.article div.lead { font-weight: bold; } .mceContentBody div.winter-activities div.scroller { bottom: 0; display: block; height: 80px; position: fixed; right: 0; width: 80px; z-index: 500; } .mceContentBody div.winter-activities div.scroller div.button { height: 80px; position: absolute; top: 0; width: 80px; } .mceContentBody div.winter-activities div.scroller div.button a { background: #ffb9f5; display: block; height: 80px; position: relative; transition: all 0.25s ease 0s; width: 80px; } .mceContentBody div.winter-activities div.scroller div.button a:hover { opacity: 1; } .mceContentBody div.winter-activities div.scroller div.button a::before { bottom: -10%; color: #181d5f; content: "トップに戻る"; font-size: 12px; font-weight: bold; left: 50%; position: absolute; transform: translateX(-50%) translateY(-60%); white-space: nowrap; } .mceContentBody div.winter-activities div.scroller div.button a::after { border-right: 1px solid #181d5f; border-top: 1px solid #181d5f; content: ""; display: block; height: 20px; left: 50%; position: absolute; top: 60%; transform: translateX(-50%) translateY(-110%) rotate(-45deg); width: 20px; } /* - */ @media screen and (max-width: 768px) { .mceContentBody div.winter-activities a[href^="tel:"] { color: #2292d0; pointer-events: auto; text-decoration: underline; } } .mceContentBody div.winter-activities .link { background: none; margin-bottom: 0; padding-left: 0; text-align: center; } .mceContentBody div.winter-activities .link a { background: #e8eaeb; border-radius: 1000px; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.024); color: #000; display: inline-block; padding: 0.75em 40px; position: relative; text-decoration: none; transition: all 0.3s ease 0s; } .mceContentBody div.winter-activities ul > li::before { background: #181d5f; } .mceContentBody div.winter-activities div.main { /* margin-left: -20px; margin-right: -20px; margin-top: -20px; */ margin-bottom: 40px; } .mceContentBody div.winter-activities div.article { width: 48%; float: left; margin-right: 4%; } .mceContentBody div.winter-activities div.article:nth-child(2n) { width: 48%; float: left; margin-right: 0; } .mceContentBody div.winter-activities div.recommended-link ul li { width: 23.5%; float: left; margin-right: 2%; } .mceContentBody div.winter-activities div.recommended-link ul li:nth-child(4) { margin-right: 0; } .mceContentBody div.winter-activities div.instagram-gallery ul { text-align: center; font-size: 0; display: flex; flex-flow:row wrap; justify-content: center; } .mceContentBody div.winter-activities div.instagram-gallery ul li { /*width: 220px; height: 220px;*/ display: inline-block; margin: 0 !important; padding: 5px; box-sizing: border-box; width:25%; height: auto; aspect-ratio:1; } .mceContentBody div.winter-activities div.instagram-gallery ul li a { display: block; position: relative; width: 100%; height: 100%; overflow: hidden; /*background: #000;*/ object-fit: cover; } .mceContentBody div.winter-activities div.instagram-gallery ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.winter-activities div.instagram-gallery ul li a img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 100%; width: auto; max-width: inherit; } .mceContentBody div.winter-activities div.instagram-gallery ul li:last-child { /* display: block; padding-left: 35px; width: 250px; box-sizing: border-box; */; } .mceContentBody div.winter-activities ul.utility-link { margin-bottom: 40px; } .mceContentBody div.winter-activities ul.utility-link li { display: block; width: 32%; margin-right: 2%; float: left; } .mceContentBody div.winter-activities ul.utility-link li:nth-child(3n) { margin-right: 0; } .mceContentBody div.winter-activities ul.utility-link li a { display: block; background: #fff; padding: 10px; box-sizing: border-box; text-align: center; border: 2px solid #ccc; } .mceContentBody div.winter-activities ul.utility-link li:before { display: none; } @media screen and (max-width: 768px) { .mceContentBody div.winter-activities { overflow: hidden; } .mceContentBody div.winter-activities div.main { /* margin: -10px -10px 40px; */ margin-bottom: 40px; } .mceContentBody div.setting.winter-activities div.activities-link a { border-radius: 0; box-sizing: border-box; color: #181d5f; display: block; font-weight: bold; height: auto; position: relative; right: 0; text-align: center; top: 0; width: 100%; transform: none; margin-bottom: 20px; padding-top: 10px; padding-bottom: 10px; border-radius: 5px; } .mceContentBody div.setting.winter-activities div.activities-link a::before { display: none; } .mceContentBody div.setting.winter-activities div.activities-link a span { position: relative; transform: none; left: 0; } .mceContentBody div.winter-activities h3 { font-size: 18px; } .mceContentBody div.winter-activities div.section div.lead-text { font-size: 18px; text-align: center; } .mceContentBody div.winter-activities div.section div.lead-text::after { display: none; } .mceContentBody div.winter-activities div.article, .mceContentBody div.winter-activities div.article:nth-child(2n) { float: none; margin-right: 0; width: 100%; margin-bottom: 40px !important; } .mceContentBody div.winter-activities ul.utility-link li { display: block; float: none; margin-right: 0; width: 100%; margin-bottom: 10px; } .mceContentBody div.winter-activities div.recommended-link ul li { float: left; margin-right: 2%; width: 49%; margin-bottom: 10px; } .mceContentBody div.winter-activities div.recommended-link ul li:nth-child(2n) { margin-right: 0; } .mceContentBody div.winter-activities div.instagram-gallery { margin-left: -10px; margin-right: -10px; /* padding-left: 10px; padding-right: 10px; */ /* width: calc(100vw + 20px); */ box-sizing: border-box; position: relative; left: 2px; } .mceContentBody div.winter-activities div.instagram-gallery ul { font-size: 0; width: calc(99.99vw - 19.9998px); width:96%; margin-left: auto; margin-right: auto; } .mceContentBody div.winter-activities div.instagram-gallery ul li { display: block; width: calc(33.33vw - 6.6666px); height: calc(33.33vw - 6.6666px); width:33.3%; height: auto; margin: 0 !important; padding:2px; /*float: left;*/ } .mceContentBody div.winter-activities div.instagram-gallery ul li:nth-child(2n), .mceContentBody div.winter-activities div.instagram-gallery ul li:nth-child(4n) { margin-right: 0; } .mceContentBody div.winter-activities div.instagram-gallery ul li:last-child { /* display: inline-block; margin: 0; padding-left: 0; width: calc(48vw - 20px); box-sizing: border-box; */; } .mceContentBody div.winter-activities h3:after { width: 40px; height: 40px; background-size: 40px; } } /* --- */ .mceContentBody div.setting.usagi-doshi { /* border: 0.2rem solid #ddd; */ overflow: hidden; border-radius: 0.5rem; /* background: #5cb6ec; */ /* font-family: 'Sawarabi Gothic', sans-serif; */ font-family: 'Noto Serif JP', serif; } .mceContentBody div.setting.usagi-doshi div.main { margin-left: -5rem; margin-right: -5rem; margin-top: -2rem; margin-bottom: 4rem; border-radius: 0.5rem; overflow: hidden; padding-left: 3rem; padding-right: 3rem; } /* 背景 */ .mceContentBody div.setting.usagi-doshi:after { /* background: url(https://www.tottori-guide.jp/files/53182.jpg); background-size: 16rem; */ background-image: linear-gradient(-45deg, #fff 25%, #f3f3f3 25%, #f3f3f3 50%, #fff 50%, #fff 75%, #f3f3f3 75%, #f3f3f3); background-size: 0.4rem 0.4rem; opacity: 0.75; /* */ width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%); content: ""; height: calc(100% + 5rem); display: block; z-index: -1; background:; } .mceContentBody div.setting.usagi-doshi:before { /* background: url(); background-size: 128rem 32rem; width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-50%); content: ""; height: calc(100% + 4rem); display: block; z-index: 1; opacity: 0.75; */; } .mceContentBody div.setting.usagi-doshi div.setting-usagi-doshi-inner { /* max-width: 96rem; */ max-width: 100vw; max-width: 120rem; overflow: hidden; background: #f3f3f3; margin-left: auto; margin-right: auto; position: relative; z-index: 2; padding-top: 2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; box-sizing: border-box; /* border-radius: 2rem; border: 0.10rem solid #4b5da3; */; } /* --- */ .mceContentBody div.setting.usagi-doshi div.main img { width: calc(100% + 2rem); } .mceContentBody div.setting.usagi-doshi div.lead { font-size: clamp(1.4rem, 1.8vw, 1.8rem); line-height: 2; letter-spacing: 0.25rem; margin-bottom: 4rem; color: #4b5da3; position: relative; } .mceContentBody div.setting.usagi-doshi div.lead div.lead-figure { /* position: absolute; width: 100%; z-index: 0; opacity: 0.125; */ max-width: 50rem; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.usagi-doshi div.lead div.lead-wrap { position: relative; z-index: 1; } .mceContentBody div.setting.usagi-doshi div.page-index { margin-bottom: 8rem; } .mceContentBody div.setting.usagi-doshi div.page-index ul { display: flex; flex-wrap: wrap; width: 100%; } .mceContentBody div.setting.usagi-doshi div.page-index ul li { width: 33.33%; padding: 1rem; box-sizing: border-box; } .mceContentBody div.setting.usagi-doshi div.page-index ul li a { display: block; position: relative; color: #4b5da3; text-decoration: none; border: 0.1rem solid #4b5da3; padding: 2rem; /* border-radius: 1000rem; */ background: #fff; transition: 0.25s all; text-align: center; font-size: 2.0rem; } .mceContentBody div.setting.usagi-doshi div.page-index ul li a:after { position: absolute; top: 50%; right: 2rem; display: block; width: 1rem; height: 1rem; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(45deg); border-top: 0.15rem solid #fdd5dd; border-right: 0.15rem solid #fdd5dd; } .mceContentBody div.setting.usagi-doshi div.page-index ul li a:hover { background: #fdd5dd !important; color: #4b5da3; } .mceContentBody div.setting.usagi-doshi div.page-index ul li a:hover:after { border-top: 0.15rem solid #fff; border-right: 0.15rem solid #fff; } /* --- */ .mceContentBody div.setting.usagi-doshi div.section { padding: 2rem; /* background: rgba(255,255,255,0.2); */ /* border-radius: 0.5rem; */ border-top: 0.5rem dotted #fdd5dd; border-bottom: 0.25rem solid #fdd5dd; border-radius: 100rem 100rem 0 0; border-bottom: 0; /* box-shadow: 0.3rem 0.3rem #9cd2f2; */; } .mceContentBody div.setting.usagi-doshi div.section.sightseeing { /* background: #f5dfec; */; } .mceContentBody div.setting.usagi-doshi div.section.miyage { /* background: url(https://www.tottori-guide.jp/files/55985.jpg); background-size: 20rem 20rem; */; } .mceContentBody div.setting.usagi-doshi div.section.miyage div.article-wrap { background: none; } .mceContentBody div.setting.usagi-doshi div.section.other { /* background: #f5dfec; */; } .mceContentBody div.setting.usagi-doshi div.section div.title { /* border-radius: 10rem 0 10rem 0; background: #f5dfec; */; } .mceContentBody div.setting.usagi-doshi h3.heading { text-align: center; position: relative; /* color: #f5949c; */ color: #4b5da3; /* font-family: 'Kosugi Maru', sans-serif; */ letter-spacing: 0.25rem; /* background: #f5dfec; */ /* writing-mode: vertical-rl; display: flex; align-items: center; */ /* text-shadow: 0.1rem 0.1rem 0 #ed6495, -0.1rem 0.1rem 0 #ed6495, 0.1rem -0.1rem 0 #ed6495, -0.1rem -0.1rem 0 #ed6495; */ /* border-bottom: 0.4rem dotted #4b5da3; padding-bottom: 2rem; */ font-family: 'Noto Serif JP', serif; font-size: 3.0rem; } .mceContentBody div.setting.usagi-doshi h3.heading.symbol { /* margin-top: 15rem; */; } .mceContentBody div.setting.usagi-doshi h3.heading.symbol:before { background: url(https://www.tottori-guide.jp/files/55983.png); background-size: 12rem 15rem; display: block; width: 12rem; height: 15rem; position: absolute; top: -9.5rem; left: 50%; transform: translateX(-50%); content: ""; z-index: 0; } .mceContentBody div.setting.usagi-doshi h3.heading.symbol span.symbol-inner { z-index: 1; position: relative; } .mceContentBody div.setting.usagi-doshi div.section div.title div.description { margin-bottom: 4rem; } /* */ .mceContentBody div.setting.usagi-doshi div.section div.article-wrap { display: flex; flex-wrap: wrap; /* background: #fff; */ padding-top: 4rem; /* padding-bottom: 4rem; */; } .mceContentBody div.setting.usagi-doshi div.section div.article { margin-bottom: 0; margin-bottom: 4rem; padding: 0; box-sizing: border-box; /* box-shadow: 0.125rem 0.125rem 2rem rgba(0, 0, 0, 0.25); */; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article { width: 22%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article { width: 30.6666%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail { position: relative; width: 100%; overflow: hidden; margin-bottom: 2.5rem; /* border-radius: 0.5rem; */ overflow: hidden; border: 0.25rem solid #fff; /* border-radius: 1.25rem 1.25rem 1.25rem 1.25rem; */ overflow: hidden; /* box-shadow: 0.5rem 0.5rem 0 rgba(251, 213, 221, 0.75); */; } .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail:after { position: relative; padding-top: 75%; content: ""; display: block; } .mceContentBody div.setting.usagi-doshi div.section.miyage div.article div.thumbnail:after { position: relative; padding-top: 100%; content: ""; display: block; } .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: auto; } /* flexslider の とき! */ .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail div.flexslider-wrap, .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider, .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport { height: 100% !important; width: 100%; position: absolute !important; } .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides { padding: 0 !important; margin: 0 !important; } .mceContentBody div.setting.usagi-doshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides li img { position: relative; top: inherit; left: inherit; transform: none; display: block; width: 100%; height: auto; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap {} .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.heading { margin-bottom: 2rem; position: relative; padding: 1rem 1.5rem; /* background: #fff; */ font-size: 1.8rem; text-align: center; line-height: 1.25; color: #4b5da3; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.heading:before { position: absolute; top: 0; left: 0; border: 0.3rem double #4b5da3; border-left: 0; border-top: 0; width: 100%; height: 100%; pointer-events: none; content: ""; /* border-radius: 10rem; */; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.heading:after { position: absolute; top: -0.2rem; left: -0.2rem; border: 0.3rem double #4b5da3; border-right: none; border-bottom: none; width: 100%; height: 100%; pointer-events: none; content: ""; /* border-radius: 10rem; */; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap p.description { /* reset */ padding: 0; margin: 0; font-size: 1.4rem; line-height: 1.5; margin-bottom: 4rem; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap p.description strong { background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap p.description strong:before { /* position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); z-index: -1; */; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap p.description strong.pink { color: #ef9ead; background: none; display: inline; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.deco-box { /* background: #fcfbf6; */ background: none; box-sizing: border-box; border: 0.1rem solid #4b5da3; position: relative; background: #fff; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.deco-box:before { content: "Pick Up!"; position: absolute; top: -2.0rem; left: -2rem; font-size: 1.2rem; color: #4b5da3; background: #efced4; padding-left: 1rem; padding-right: 1rem; /* border-radius: 1000rem; */ z-index: 1; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.deco-box:after { width: 1rem; height: 1rem; background: #efced4; content: ""; position: absolute; top: -0.5rem; left: 1.5rem; transform: translateX(-50%) rotate(45deg); z-index: 0; } /* --- */ .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap table.details-information { border-collapse: collapse; width: 100%; font-size: 1.3rem; border: 0.1rem solid #eee; border: none; background: #fff; /* font-family: 'Kosugi Maru', sans-serif; */; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap table.details-information th { border: 0.1rem solid #fff; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; white-space: nowrap; background: #4b5da3; color: #fff; font-family: 'Noto Serif JP', serif; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap table.details-information td { border: 0.1rem solid #4b5da3; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; word-break: break-all; font-family: 'Noto Serif JP', serif; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap table.details-information td a {} .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns { text-align: center; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns ul {} .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns ul li { padding-left: 0.5rem; padding-right: 0.5rem; display: inline-block; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns ul li a { background: #fff; color: #4b5da3; text-decoration: none; font-size: 1.4rem; display: block; border-radius: 1000rem; padding-left: 3rem; padding-right: 1rem; border: 0.1rem solid #4b5da3; font-size: 1.2rem; position: relative; transition: 0.25s all; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns ul li a:hover { background: #4b5da3; color: #fff; } .mceContentBody div.setting.usagi-doshi div.section div.article div.description-wrap div.utility-btns ul li a span { position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%); font-size: 1.8rem; } /* --- */ .mceContentBody div.setting.usagi-doshi div.link { text-decoration: none !important; } .mceContentBody div.setting.usagi-doshi div.link:before, .mceContentBody div.setting.usagi-doshi div.link:after { display: none; } .mceContentBody div.setting.usagi-doshi div.link a { color: #e86896; background: #fff; display: block; margin-left: auto; margin-right: auto; max-width: 50%; padding-left: 4rem; padding-right: 4rem; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 1000rem; text-decoration: none !important; /* border: 0.2rem solid #fa89fd; */ position: relative; transition: 0.25s all; } .mceContentBody div.setting.usagi-doshi div.link a::after { background: #e86896; border-radius: 1000rem; content: ""; height: 1.75rem; margin: auto; pointer-events: none; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.75rem; z-index: 1; border: 0.15rem solid #e86896; } .mceContentBody div.setting.usagi-doshi div.link a::before { border-right: 0.15rem solid #fff; border-top: 0.15rem solid #fff; content: ""; display: block; height: 0.5rem; right: 1.25rem; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 0.5rem; z-index: 2; } .mceContentBody div.setting.usagi-doshi div.link a:hover { color: #fff; background: #e86896; } .mceContentBody div.setting.usagi-doshi div.link a:hover::after { background: #fff; } .mceContentBody div.setting.usagi-doshi div.link a:hover::before { border-right: 0.15rem solid #e86896; border-top: 0.15rem solid #e86896; } /* -------- 因幡伯耆國開運神社巡り */ .mceContentBody div.setting.usagi-doshi div.section-extra { border-top: 0.3rem double #4b5da3; border-bottom: 0.3rem double #4b5da3; padding: 4rem; /* border: 0.1rem solid #4b5da3; */ /* border-radius: 5rem; */ margin-bottom: 4rem; /* background: #ffe7e5; */ margin-left: -4rem; margin-right: -4rem; width: calc(100% + 8rem); box-sizing: border-box; /* background: url(https://www.tottori-guide.jp/files/55984.jpg); background-size: 20rem 20rem; */; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo { margin-bottom: -2rem; display: flex; flex-wrap: wrap; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article { width: 18.4%; margin-right: 2%; margin-bottom: 2rem; /* border-radius: 1.25rem; */ /* overflow: hidden; */ position: relative; padding: 0; background: #fff; border: 0.4rem solid #fff; /* box-shadow: 0.5rem 0.5rem 0 rgba(251, 213, 221, 0.75); */; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article:nth-child(5n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article div.description { font-size: 1.4rem; line-height: 1.5; padding-top: 1rem; padding-bottom: 1.5rem; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article div.article-number { position: absolute; top: -1rem; left: -0.5rem; width: 3rem; height: 3rem; /* border-radius: 0.25rem; */ background: #efced4; z-index: 1000; content: ""; display: none; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article div.article-number > div { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; color: #4b5da3; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article img { /* border-radius: 1.25rem 1.25rem 0 0; */; } .mceContentBody div.setting.usagi-doshi hr { border-bottom: 0.3rem double #4b5da3; } /* --- */ @media screen and (max-width:768px) { .mceContentBody div.setting.usagi-doshi {} .mceContentBody div.setting.usagi-doshi div.setting-usagi-doshi-inner { padding: 0; } .mceContentBody div.setting.usagi-doshi div.main { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-radius: 0; overflow: hidden; padding-left: 0; padding-right: 0; } .mceContentBody div.setting.usagi-doshi div.page-index { padding-left: 1rem; padding-right: 1rem; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article:nth-child(4n) { margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article:nth-child(3n) { margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article { width: 48.0%; margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article:nth-child(5n) { margin-right: 4%; } .mceContentBody div.setting.usagi-doshi div.kaiun-photo > div.article:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:480px) { .mceContentBody div.setting.usagi-doshi div.page-index ul li { width: 100%; padding: 0 0 2rem; box-sizing: border-box; } .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article, .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article:nth-child(4n), .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-04-wrap div.article:nth-child(2n), .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article, .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article:nth-child(3n), .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-03-wrap div.article:nth-child(2n), .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article, .mceContentBody div.setting.usagi-doshi div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { width: 100%; margin-right: 0; } } /* --- word-rally */ .mceContentBody div.setting.word-rally { font-size: 1.8rem; } .mceContentBody div.setting.word-rally h4 { font-weight:; color: #de639f; border: 0.25rem solid #de639f; padding: 2rem; /* background: #f7e971; */; } .mceContentBody div.setting.word-rally h4 a { color: #de639f; text-decoration: underline; position: relative; display: block; } .mceContentBody div.setting.word-rally h4 a:hover { text-decoration: none; } /* .mceContentBody div.setting.word-rally h4 a:before { display: block !important; top: 50% !important; left: 0.6rem !important; transform: translateY(-50%) rotate(45deg) !important; } .mceContentBody div.setting.word-rally h4 a:after { display: block !important; top: 50% !important; transform: translateY(-50%) !important; } */ .mceContentBody div.setting.word-rally div.deco-box { background: #fae958; } @media screen and (max-width:768px) { } /* ------ page-index */ .mceContentBody div.setting.word-rally div.page-index { /* background: #f8f8f8; */ margin-top: 4rem; margin-bottom: 4rem; padding: 2rem; position: relative; border: 0.2rem solid #de639f; /* font-family: "Yu Gothic", YuGothic, sans-serif, 'Noto Sans JP', YakuHanJP, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; */; } .mceContentBody div.setting.word-rally div.page-index div.heading { color: #de639f; display: inline-block; font-weight: bold; left: 1.75rem; padding-left: 1rem; padding-right: 1rem; position: absolute; top: -1.5rem; background: #fff; } .mceContentBody div.setting.word-rally div.page-index ul { margin: 0; text-align: left; } .mceContentBody div.setting.word-rally div.page-index ul li { background: none; display: inline-block; padding-left: 1rem; padding-right: 1rem; } .mceContentBody div.setting.word-rally div.page-index ul li::before { display: none; } .mceContentBody div.setting.word-rally div.page-index ul li a { color: #000; font-size: 1.6rem; padding-left: 1.75rem; position: relative; text-decoration: none; } .mceContentBody div.setting.word-rally div.page-index ul li a::before { background: none; border-right: 1px solid #000; border-top: 1px solid #000; content: ""; display: block; height: 0.4rem; left: 0; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg); transition: all 0.2s ease-in-out 0s; width: 0.4rem; } .mceContentBody div.setting.word-rally div.page-index ul li a:hover { opacity: 0.5; } .mceContentBody div.setting.word-rally div.page-index ul li a:hover::before {} .mceContentBody div.setting.word-rally table.deco-tb { border: none; } .mceContentBody div.setting.word-rally table.deco-tb th { color: #323c46; } .mceContentBody div.setting.word-rally table.deco-tb th, .mceContentBody div.setting.word-rally table.deco-tb td { border-top: 0.1rem solid #bbb; border-bottom: 0.1rem solid #bbb; border-left: none; border-right: none; } .mceContentBody div.setting.word-rally div.entry-list { text-align: left; } .mceContentBody div.setting.word-rally div.entry-list li { padding-left: 3rem; position: relative; } .mceContentBody div.setting.word-rally div.entry-list ul li div.entry-list-number { position: absolute; top: 0.4rem; left: 0; width: 2rem; height: 2rem; } .mceContentBody div.setting.word-rally div.entry-list ul li div.entry-list-number:before { position: absolute; content: ""; /* background: #f6d749; */ border: 0.2rem solid #de639f; width: 2rem; height: 2rem; border-radius: 1000rem; top: 50%; left: 0; transform: translateY(-50%); } .mceContentBody div.setting.word-rally div.entry-list ul li div.entry-list-number span { position: absolute; content: ""; top: calc(50%); left: calc(50% + 0.2rem); transform: translateX(-50%) translateY(-50%); color: #de639f; } .mceContentBody div.setting.word-rally .link::after, div.setting.word-rally .linkButton::after { background: #de639f; border-radius: 0; top: 0.8rem; } .mceContentBody div.setting.word-rally .link::before, div.setting.word-rally .linkButton a::before { border-right: 0.125rem solid #fff; border-top: 0.125rem solid #fff; content: ""; display: block; height: 0.35rem; left: 0.75rem; position: absolute; top: 0.8rem; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 0.35rem; z-index: 2; } .mceContentBody div.setting.word-rally ul.spot-list span { font-size: 2rem !important; } @media only screen and (max-width: 768px) { .mceContentBody div.setting.word-rally div.page-index { padding: 2rem 1rem; } .mceContentBody div.setting.word-rally div.page-index ul li { display: block; } .mceContentBody div.setting.word-rally div.page-index ul li a { display: block; } .mceContentBody div.setting.word-rally div.page-index ul li a::before { top: 1.4rem; transform: rotate(45deg); } } /* --- */ .mceContentBody div.setting.tatsudoshi { /* border: 0.2rem solid #ddd; */ /* background: #5cb6ec; */ /* font-family: 'Sawarabi Gothic', sans-serif; border-left: 0.1rem solid #6a6a6a; border-right: 0.1rem solid #6a6a6a; overflow: hidden;*/ font-family: 'Noto Serif JP', serif; padding: 0; } .mceContentBody div.setting.tatsudoshi div.main { /*margin-left: -7rem; margin-right: -7rem; margin-top: -2rem; overflow: hidden; padding-left: 3rem; padding-right: 3rem; border-radius: 0.5rem;*/ margin-bottom: 4rem; } /* 背景 */ .mceContentBody div.setting.tatsudoshi:after { background-size: 16rem; /* background-image: linear-gradient(-45deg, #eadfb9 25%, #dabe8c 25%, #eadfb9 50%, #dabe8c 50%, #eadfb9 75%, #dabe8c 75%, #eadfb9); */ background: linear-gradient(#fff 10%, #e2fafd 20%, #e8fef9, #e4fcfc); background: #eff4f3; /* background-size: 0.4rem 0.4rem; */ opacity: 0.75; /* */ width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%); content: ""; height: calc(100% + 5rem); display: block; z-index: -1; background:; } .mceContentBody div.setting.tatsudoshi:before { /* background: url(); background-size: 128rem 32rem; width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-50%); content: ""; height: calc(100% + 4rem); display: block; z-index: 1; opacity: 0.75; */; } .mceContentBody div.setting.tatsudoshi div.setting-tatsudoshi-inner { /* max-width: 96rem; */ max-width: 100vw; max-width: 120rem; overflow: hidden; margin-left: auto; margin-right: auto; position: relative; z-index: 2; padding-top: 0; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; box-sizing: border-box; /* border-radius: 2rem; border: 0.10rem solid #040499; */; } /* --- */ .mceContentBody div.setting.tatsudoshi div.main img { width: calc(100% + 2rem); } .mceContentBody div.setting.tatsudoshi div.lead { font-size: clamp(1.4rem, 1.8vw, 1.8rem); line-height: 2; letter-spacing: 0.25rem; margin-bottom: 4rem; color: #040499; position: relative; } .mceContentBody div.setting.tatsudoshi div.lead div.lead-figure { /* position: absolute; width: 100%; z-index: 0; opacity: 0.125; */ max-width: 50rem; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.tatsudoshi div.lead div.lead-wrap { position: relative; z-index: 1; } .mceContentBody div.setting.tatsudoshi div.page-index { margin-bottom: 8rem; } .mceContentBody div.setting.tatsudoshi div.page-index ul { display: flex; flex-wrap: wrap; width: 100%; } .mceContentBody div.setting.tatsudoshi div.page-index ul li { width: 33.33%; padding: 1rem; box-sizing: border-box; } .mceContentBody div.setting.tatsudoshi div.page-index ul li a { display: block; position: relative; color: #040499; text-decoration: none; border: 0.1rem solid #040499; padding: 2rem; /* border-radius: 1000rem; */ background: #fff; transition: 0.25s all; text-align: center; font-size: 2.0rem; } .mceContentBody div.setting.tatsudoshi div.page-index ul li a:after { position: absolute; top: 50%; right: 2rem; display: block; width: 1rem; height: 1rem; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(45deg); border-top: 0.15rem solid #fdd5dd; border-right: 0.15rem solid #fdd5dd; } .mceContentBody div.setting.tatsudoshi div.page-index ul li a:hover { background: #fdd5dd !important; color: #040499; } .mceContentBody div.setting.tatsudoshi div.page-index ul li a:hover:after { border-top: 0.15rem solid #fff; border-right: 0.15rem solid #fff; } /* --- */ .mceContentBody div.setting.tatsudoshi div.section { padding: 2rem; /* background: rgba(255,255,255,0.2); */ /* border-radius: 0.5rem; */ /* border-top: 0.5rem dotted #fdd5dd; border-bottom: 0.25rem solid #fdd5dd; border-radius: 100rem 100rem 0 0; */ border-bottom: 0; /* box-shadow: 0.3rem 0.3rem #9cd2f2; */ margin-bottom: 0; } /* */ .mceContentBody div.setting.tatsudoshi div.section div.article-wrap { display: flex; flex-wrap: wrap; /* background: #fff; */ padding-top: 4rem; /* padding-bottom: 4rem; */; } .mceContentBody div.setting.tatsudoshi div.section div.article { margin-bottom: 0; margin-bottom: 12rem; padding: 0; box-sizing: border-box; /* box-shadow: 0.125rem 0.125rem 2rem rgba(0, 0, 0, 0.25); */ position: relative; display: flex; flex-wrap: wrap; width: 100%; } .mceContentBody div.setting.tatsudoshi div.section div.article:last-child { margin-bottom: 4rem; } .mceContentBody div.setting.tatsudoshi div.section div.article div.heading-wrap { width: 100%; padding-top: 2rem; padding-bottom: 2rem; border-top: 0.1rem solid #6a6a6a; border-bottom: 0.1rem solid #6a6a6a; margin-bottom: 2rem; text-align: center; position: relative; margin-bottom: 4rem; } .mceContentBody div.setting.tatsudoshi div.section div.article div.heading-wrap div.heading { font-size: 2.4rem; letter-spacing: 0.25rem; color: #6a6a6a; } .mceContentBody div.setting.tatsudoshi div.section div.article div.heading-wrap div.area-name { position: absolute; left: 50%; bottom: -2.5rem; transform: translateX(-50%) translateY(-50%); padding: 0.100rem 2rem; border: 0.1rem solid #eff4f3; border-radius: 1000rem; font-size: 1.2rem; background: #eff4f3; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail { width: 58%; margin-right: 4%; box-sizing: border-box; position: relative; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap { width: 38%; margin-right: 0; box-sizing: border-box; } /* */ .mceContentBody div.setting.tatsudoshi div.section div.article.wide { display: block; } .mceContentBody div.setting.tatsudoshi div.section div.article.wide div.thumbnail { display: block; width: 100%; margin-right: 0; margin-bottom: 1.5rem; } .mceContentBody div.setting.tatsudoshi div.section div.article.wide div.description-wrap { width: 100%; margin-right: 0; } /* flexslider の とき! */ .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail div.flexslider-wrap, .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider, .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport { height: 100% !important; width: 100%; position: absolute !important; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides { padding: 0 !important; margin: 0 !important; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides li img { position: relative; top: inherit; left: inherit; transform: none; display: block; width: 100%; height: auto; } .mceContentBody div.setting.tatsudoshi div.section div.article div.article-number { position: absolute; top: -2.75rem; left: 50%; transform: translateX(-50%); width: 4rem; height: 4rem; /* background: #040499; */ background: #6a6a6a; z-index: 10000; /* border-radius: 1000rem; */; } .mceContentBody div.setting.tatsudoshi div.section div.article div.article-number div.article-number-inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; font-size: 2rem; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail:after { position: relative; padding-top: 75%; content: ""; display: block; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; max-width: 100%; height: auto; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap {} .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.heading { margin-bottom: 2rem; position: relative; padding: 1rem 1.5rem; /* background: #fff; */ font-size: 1.8rem; text-align: center; line-height: 1.25; color: #040499; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.heading span { color: #888; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.heading:before { /* position: absolute; top: 0; left: 0; border: 0.3rem double #040499; border-left: 0; border-top: 0; width: 100%; height: 100%; pointer-events: none; content: ""; border-radius: 10rem; */; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.heading:after { position: absolute; top: -0.2rem; left: -0.2rem; border: 0.25rem solid #040499; /* border-right: none; border-bottom: none; */ width: 100%; height: 100%; pointer-events: none; content: ""; /* border-radius: 10rem; */; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap p.description { /* reset */ padding: 0; margin: 0; font-size: 1.6rem; line-height: 1.75; margin-bottom: 1.5rem; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap p.description strong { background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap p.description strong:before { /* position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); z-index: -1; */; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap p.description strong.pink { color: #ef9ead; background: none; display: inline; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.deco-box { /* background: #fcfbf6; */ background: none; box-sizing: border-box; border: 0.1rem solid #040499; position: relative; background: #fff; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.deco-box:before { content: "Pick Up!"; position: absolute; top: -2.0rem; left: -2rem; font-size: 1.2rem; color: #040499; background: #efced4; padding-left: 1rem; padding-right: 1rem; /* border-radius: 1000rem; */ z-index: 1; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.deco-box:after { width: 1rem; height: 1rem; background: #efced4; content: ""; position: absolute; top: -0.5rem; left: 1.5rem; transform: translateX(-50%) rotate(45deg); z-index: 0; } /* --- */ .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap table.details-information { border-collapse: collapse; width: 100%; font-size: 1.3rem; border: 0.1rem solid #eee; border: none; background: #fff; /* font-family: 'Kosugi Maru', sans-serif; */; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap table.details-information th { border: 0.1rem solid #6a6a6a; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; white-space: nowrap; background: #6a6a6a; color: #fff; font-family: 'Noto Serif JP', serif; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap table.details-information td { border: 0.1rem solid #6a6a6a; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; word-break: break-all; font-family: 'Noto Serif JP', serif; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap table.details-information td a { color: #040499; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns { text-align: center; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns ul {} .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns ul li { padding-left: 0.5rem; padding-right: 0.5rem; display: inline-block; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns ul li a { background: #fff; color: #040499; text-decoration: none; font-size: 1.4rem; display: block; border-radius: 1000rem; padding-left: 3rem; padding-right: 1rem; border: 0.1rem solid #040499; font-size: 1.2rem; position: relative; transition: 0.25s all; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns ul li a:hover { background: #040499; color: #fff; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap div.utility-btns ul li a span { position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%); font-size: 1.8rem; } /* --- */ .mceContentBody div.setting.tatsudoshi div.link { text-decoration: none !important; } .mceContentBody div.setting.tatsudoshi div.link:before, .mceContentBody div.setting.tatsudoshi div.link:after { display: none; } .mceContentBody div.setting.tatsudoshi div.link a { color: #e86896; background: #fff; display: block; margin-left: auto; margin-right: auto; max-width: 60%; padding-left: 4rem; padding-right: 4rem; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 1000rem; text-decoration: none !important; /* border: 0.2rem solid #fa89fd; */ position: relative; transition: 0.25s all; } .mceContentBody div.setting.tatsudoshi div.link a::after { background: #e86896; border-radius: 1000rem; content: ""; height: 1.75rem; margin: auto; pointer-events: none; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.75rem; z-index: 1; border: 0.15rem solid #e86896; } .mceContentBody div.setting.tatsudoshi div.link a::before { border-right: 0.15rem solid #fff; border-top: 0.15rem solid #fff; content: ""; display: block; height: 0.5rem; right: 1.25rem; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 0.5rem; z-index: 2; } .mceContentBody div.setting.tatsudoshi div.link a:hover { color: #fff; background: #e86896; } .mceContentBody div.setting.tatsudoshi div.link a:hover::after { background: #fff; } .mceContentBody div.setting.tatsudoshi div.link a:hover::before { border-right: 0.15rem solid #e86896; border-top: 0.15rem solid #e86896; } /* --- */ @media screen and (max-width:1100px) { /* .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article:nth-child(3n) { margin-right: 4%; } .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article:nth-child(2n) { margin-right: 0; } */ } @media screen and (max-width:768px) { } @media screen and (max-width:480px) { .mceContentBody div.setting.tatsudoshi div.page-index ul li { width: 100%; padding: 0 0 2rem; box-sizing: border-box; } .mceContentBody div.setting.tatsudoshi div.section div.article-wrap.column-04-wrap div.article, .mceContentBody div.setting.tatsudoshi div.section div.article-wrap.column-04-wrap div.article:nth-child(4n), .mceContentBody div.setting.tatsudoshi div.section div.article-wrap.column-04-wrap div.article:nth-child(2n), .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article, .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article:nth-child(3n), .mceContentBody div.setting.tatsudoshi div.section div.article-wrap div.article:nth-child(2n), .mceContentBody div.setting.tatsudoshi div.section div.article-wrap.column-02-wrap div.article, .mceContentBody div.setting.tatsudoshi div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { width: 100%; margin-right: 0; } } .mceContentBody div.setting.tatsudoshi div.banner ul { text-align: center; display: flex; } .mceContentBody div.setting.tatsudoshi div.banner ul li { width: 50%; } .mceContentBody div.setting.tatsudoshi div.banner ul.logo { max-width: 33.33vw; margin-left: auto; margin-right: auto; } @media screen and (max-width:768px) { .mceContentBody div.setting.tatsudoshi div.banner ul:nth-child(2) { display: block; } .mceContentBody div.setting.tatsudoshi div.banner ul:nth-child(2) li { width: 100%; margin-bottom: 4rem; } .mceContentBody div.setting.tatsudoshi div.banner ul.logo { max-width: 100.00%; } } .mceContentBody div.setting.tatsudoshi div.banner ul.logo li { width: 33.33%; } .mceContentBody div.setting.tatsudoshi div.banner ul li img { max-width: 100%; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.tatsudoshi div.banner ul.logo li img { max-width: 12rem; display: block; width: 100%; margin-left: auto !important; margin-right: auto !important; } .mceContentBody div.setting.tatsudoshi div.banner ul li a { max-width: 80%; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.tatsudoshi div.section.photo img { border-radius: 1rem; overflow: hidden; } .mceContentBody div.setting.tatsudoshi div.tel-web { display: flex; } .mceContentBody div.setting.tatsudoshi div.tel-web > div { width: 49%; margin-right: 2%; box-sizing: border-box; } .mceContentBody div.setting.tatsudoshi div.tel-web > div:nth-child(2) { margin-right: 0; } .mceContentBody div.setting.tatsudoshi div.tel-web > div span.material-icons { font-size: 1.6rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0.7rem; color: #fff; } .mceContentBody div.setting.tatsudoshi div.tel-web > div a { background: #eeecec; color: #6a6a6a; display: block; text-decoration: none; position: relative; text-align: center; border: 0.2rem solid #eeecec; box-sizing: border-box; transition: 0.25s all; min-height: 3rem; } .mceContentBody div.setting.tatsudoshi div.tel-web > div a:hover, .mceContentBody div.setting.tatsudoshi div.tel-web > div a[href^="tel:"]:hover { background: #ccc; border: 0.2rem solid #ccc; } .mceContentBody div.setting.tatsudoshi div.tel-web > div a:before { background: #6a6a6a; position: absolute; top: 50%; left: 0.4rem; transform: translateY(-50%); /* border-radius: 1000rem; */ content: ""; width: 2.2rem; height: 2.2rem; } .mceContentBody div.setting.tatsudoshi div.tel-web div.tel-web-label { padding-left: 1.5rem; white-space: nowrap; font-size: clamp(1.4rem, 1.6vw, 1.6rem); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.setting.tatsudoshi div.tel-web > div a[href^="tel:"] { text-decoration: none !important; color: #6a6a6a !important; } @media screen and (max-width:768px) { .mceContentBody div.setting.tatsudoshi div.section { padding: 0; } .mceContentBody div.setting.tatsudoshi div.tel-web { display: block; } .mceContentBody div.setting.tatsudoshi div.tel-web > div { width: 100%; margin-right: 0; margin-bottom: 0.5rem; } .mceContentBody div.setting.tatsudoshi div.tel-web > div:nth-child(2) { margin-bottom: 0; } .mceContentBody div.setting.tatsudoshi div.tel-web > div a[href^="tel:"] { text-decoration: none !important; color: #6a6a6a !important; } .mceContentBody div.setting.tatsudoshi div.section div.article div.thumbnail { width: 100%; margin-right: 0; margin-bottom: 2rem; } .mceContentBody div.setting.tatsudoshi div.section div.article div.description-wrap { width: 100%; } } /* --- */ .mceContentBody div.setting.super-hakuto { /* border: 0.2rem solid #ddd; */ overflow: hidden; border-radius: 0.5rem; /* background: #5cb6ec; */ /* font-family: 'Sawarabi Gothic', sans-serif; */ font-family: 'Kosugi Maru', sans-serif; } .mceContentBody div.setting.super-hakuto div.main { margin-left: -5rem; margin-right: -5rem; margin-top: -2rem; margin-bottom: 4rem; border-radius: 0.5rem; overflow: hidden; padding-left: 3rem; padding-right: 3rem; } /* 背景 */ .mceContentBody div.setting.super-hakuto:after { /* background: url(https://www.tottori-guide.jp/files/53182.jpg); background-size: 16rem; */ /* background-image: linear-gradient(-45deg, #fff 25%, #f3f3f3 25%, #f3f3f3 50%, #fff 50%, #fff 75%, #f3f3f3 75%, #f3f3f3); */ background: #fff; background-size: 0.4rem 0.4rem; opacity: 0.75; /* */ width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%); content: ""; height: calc(100% + 5rem); display: block; z-index: -1; background:; } .mceContentBody div.setting.super-hakuto:before { /* background: url(); background-size: 128rem 32rem; width: 100vw; position: absolute; left: 50%; top: 0; transform: translateX(-50%) translateY(-50%); content: ""; height: calc(100% + 4rem); display: block; z-index: 1; opacity: 0.75; */; } .mceContentBody div.setting.super-hakuto div.setting-super-hakuto-inner { /* max-width: 96rem; */ max-width: 100vw; max-width: 120rem; overflow: hidden; background: #fff; margin-left: auto; margin-right: auto; position: relative; z-index: 2; padding-top: 2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem; box-sizing: border-box; /* border-radius: 2rem; border: 0.10rem solid #040499; */; } /* --- */ .mceContentBody div.setting.super-hakuto div.main img { width: calc(100% + 2rem); } .mceContentBody div.setting.super-hakuto div.lead { font-size: clamp(1.4rem, 1.8vw, 1.8rem); line-height: 2; letter-spacing: 0.25rem; margin-bottom: 4rem; color: #040499; position: relative; } .mceContentBody div.setting.super-hakuto div.lead div.lead-figure { /* position: absolute; width: 100%; z-index: 0; opacity: 0.125; */ max-width: 50rem; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.super-hakuto div.lead div.lead-wrap { position: relative; z-index: 1; } .mceContentBody div.setting.super-hakuto div.page-index { margin-bottom: 8rem; } .mceContentBody div.setting.super-hakuto div.page-index ul { display: flex; flex-wrap: wrap; width: 100%; } .mceContentBody div.setting.super-hakuto div.page-index ul li { width: 33.33%; padding: 1rem; box-sizing: border-box; } .mceContentBody div.setting.super-hakuto div.page-index ul li a { display: block; position: relative; color: #040499; text-decoration: none; border: 0.1rem solid #040499; padding: 2rem; /* border-radius: 1000rem; */ background: #fff; transition: 0.25s all; text-align: center; font-size: 2.0rem; } .mceContentBody div.setting.super-hakuto div.page-index ul li a:after { position: absolute; top: 50%; right: 2rem; display: block; width: 1rem; height: 1rem; content: ''; transition: all .2s ease-in-out; transform: translateY(-50%) rotate(45deg); border-top: 0.15rem solid #fdd5dd; border-right: 0.15rem solid #fdd5dd; } .mceContentBody div.setting.super-hakuto div.page-index ul li a:hover { background: #fdd5dd !important; color: #040499; } .mceContentBody div.setting.super-hakuto div.page-index ul li a:hover:after { border-top: 0.15rem solid #fff; border-right: 0.15rem solid #fff; } /* --- */ .mceContentBody div.setting.super-hakuto div.section { padding: 2rem; /* background: rgba(255,255,255,0.2); */ /* border-radius: 0.5rem; */ /* border-top: 0.5rem dotted #fdd5dd; border-bottom: 0.25rem solid #fdd5dd; border-radius: 100rem 100rem 0 0; */ border-bottom: 0; /* box-shadow: 0.3rem 0.3rem #9cd2f2; */; } .mceContentBody div.setting.super-hakuto div.section.sightseeing { /* background: #f5dfec; */; } .mceContentBody div.setting.super-hakuto div.section.miyage { /* background: url(https://www.tottori-guide.jp/files/55985.jpg); background-size: 20rem 20rem; */; } .mceContentBody div.setting.super-hakuto div.section.miyage div.article-wrap { background: none; } .mceContentBody div.setting.super-hakuto div.section.other { /* background: #f5dfec; */; } .mceContentBody div.setting.super-hakuto div.section div.title { /* border-radius: 10rem 0 10rem 0; background: #f5dfec; */; } .mceContentBody div.setting.super-hakuto h3.heading { text-align: center; position: relative; /* color: #f5949c; */ color: #040499; /* font-family: 'Kosugi Maru', sans-serif; */ letter-spacing: 0.25rem; /* background: #f5dfec; */ /* writing-mode: vertical-rl; display: flex; align-items: center; */ /* text-shadow: 0.1rem 0.1rem 0 #ed6495, -0.1rem 0.1rem 0 #ed6495, 0.1rem -0.1rem 0 #ed6495, -0.1rem -0.1rem 0 #ed6495; */ /* border-bottom: 0.4rem dotted #040499; padding-bottom: 2rem; */ font-family: 'Kosugi Maru', sans-serif; font-size: 3.0rem; padding-bottom: 2rem; } .mceContentBody div.setting.super-hakuto h3.heading:before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 0.3rem; border-bottom: 1rem dotted #040499; } .mceContentBody div.setting.super-hakuto h3.heading:after { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 0.3rem; border-bottom: 1rem double #040499; } .mceContentBody div.setting.super-hakuto h3.heading.symbol { /* margin-top: 15rem; */; } .mceContentBody div.setting.super-hakuto h3.heading.symbol:before { background: url(https://www.tottori-guide.jp/files/55983.png); background-size: 12rem 15rem; display: block; width: 12rem; height: 15rem; position: absolute; top: -9.5rem; left: 50%; transform: translateX(-50%); content: ""; z-index: 0; } .mceContentBody div.setting.super-hakuto h3.heading.symbol span.symbol-inner { z-index: 1; position: relative; } .mceContentBody div.setting.super-hakuto h4 { border: none; text-align: center; font-family: 'Kosugi Maru', sans-serif; /* border-bottom: 0.5rem solid #f0f0f0; */; } .mceContentBody div.setting.super-hakuto div.section div.title div.description { margin-bottom: 4rem; } /* */ .mceContentBody div.setting.super-hakuto div.section div.article-wrap { display: flex; flex-wrap: wrap; /* background: #fff; */ padding-top: 4rem; /* padding-bottom: 4rem; */; } .mceContentBody div.setting.super-hakuto div.section div.article { margin-bottom: 0; margin-bottom: 6rem; padding: 0; box-sizing: border-box; /* box-shadow: 0.125rem 0.125rem 2rem rgba(0, 0, 0, 0.25); */ position: relative; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article { width: 22%; margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article:nth-child(4n) { margin-right: 0; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article { width: 30.0000%; margin-right: 5%; /* padding: 1rem; box-sizing: border-box; background: #f4f6fb; */; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article:nth-child(3n) { margin-right: 0; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-02-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { margin-right: 0; } .mceContentBody div.setting.super-hakuto div.section div.article div.article-number { position: absolute; top: -1rem; left: -1rem; width: 3rem; height: 3rem; /* background: #040499; */ background: #cd5040; z-index: 10000; border-radius: 1000rem; } .mceContentBody div.setting.super-hakuto div.section div.article div.article-number div.article-number-inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); color: #fff; font-size: 2rem; } .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail { position: relative; width: 100%; overflow: hidden; margin-bottom: 2.5rem; /* border-radius: 0.5rem; */ overflow: hidden; border: 0.25rem solid #fff; /* border-radius: 1.25rem 1.25rem 1.25rem 1.25rem; */ overflow: hidden; /* box-shadow: 0.5rem 0.5rem 0 rgba(251, 213, 221, 0.75); */; } .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail:after { position: relative; padding-top: 75%; content: ""; display: block; } .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); display: block; width: 100%; height: auto; } /* flexslider の とき! */ .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail div.flexslider-wrap, .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail div.flexslider-wrap div.flexslider, .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport { height: 100% !important; width: 100%; position: absolute !important; } .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides { padding: 0 !important; margin: 0 !important; } .mceContentBody div.setting.super-hakuto div.section div.article div.thumbnail div.flexslider-wrap div.flexslider .flex-viewport .slides li img { position: relative; top: inherit; left: inherit; transform: none; display: block; width: 100%; height: auto; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap {} .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.heading { margin-bottom: 2rem; position: relative; padding: 1rem 1.5rem; /* background: #fff; */ font-size: 1.8rem; text-align: center; line-height: 1.25; color: #040499; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.heading span { color: #888; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.heading:before { /* position: absolute; top: 0; left: 0; border: 0.3rem double #040499; border-left: 0; border-top: 0; width: 100%; height: 100%; pointer-events: none; content: ""; border-radius: 10rem; */; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.heading:after { position: absolute; top: -0.2rem; left: -0.2rem; border: 0.25rem solid #040499; /* border-right: none; border-bottom: none; */ width: 100%; height: 100%; pointer-events: none; content: ""; /* border-radius: 10rem; */; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap p.description { /* reset */ padding: 0; margin: 0; font-size: 1.4rem; line-height: 1.5; margin-bottom: 1.5rem; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap p.description strong { background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap p.description strong:before { /* position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(#f3f3f3 0%, #f3f3f3 50%, #fcf956 50%, #fcf956 100%); z-index: -1; */; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap p.description strong.pink { color: #ef9ead; background: none; display: inline; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.deco-box { /* background: #fcfbf6; */ background: none; box-sizing: border-box; border: 0.1rem solid #040499; position: relative; background: #fff; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.deco-box:before { content: "Pick Up!"; position: absolute; top: -2.0rem; left: -2rem; font-size: 1.2rem; color: #040499; background: #efced4; padding-left: 1rem; padding-right: 1rem; /* border-radius: 1000rem; */ z-index: 1; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.deco-box:after { width: 1rem; height: 1rem; background: #efced4; content: ""; position: absolute; top: -0.5rem; left: 1.5rem; transform: translateX(-50%) rotate(45deg); z-index: 0; } /* --- */ .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap table.details-information { border-collapse: collapse; width: 100%; font-size: 1.3rem; border: 0.1rem solid #eee; border: none; background: #fff; /* font-family: 'Kosugi Maru', sans-serif; */; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap table.details-information th { border: 0.1rem solid #fff; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; white-space: nowrap; background: #040499; color: #fff; font-family: 'Kosugi Maru', sans-serif; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap table.details-information td { border: 0.1rem solid #040499; border-left: 0; border-right: 0; padding: 0.25rem 0.5rem; font-weight: normal; word-break: break-all; font-family: 'Kosugi Maru', sans-serif; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap table.details-information td a { color: #040499; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns { text-align: center; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns ul {} .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns ul li { padding-left: 0.5rem; padding-right: 0.5rem; display: inline-block; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns ul li a { background: #fff; color: #040499; text-decoration: none; font-size: 1.4rem; display: block; border-radius: 1000rem; padding-left: 3rem; padding-right: 1rem; border: 0.1rem solid #040499; font-size: 1.2rem; position: relative; transition: 0.25s all; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns ul li a:hover { background: #040499; color: #fff; } .mceContentBody div.setting.super-hakuto div.section div.article div.description-wrap div.utility-btns ul li a span { position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%); font-size: 1.8rem; } /* --- */ .mceContentBody div.setting.super-hakuto div.link { text-decoration: none !important; } .mceContentBody div.setting.super-hakuto div.link:before, .mceContentBody div.setting.super-hakuto div.link:after { display: none; } .mceContentBody div.setting.super-hakuto div.link a { color: #e86896; background: #fff; display: block; margin-left: auto; margin-right: auto; max-width: 50%; padding-left: 4rem; padding-right: 4rem; text-align: center; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 1000rem; text-decoration: none !important; /* border: 0.2rem solid #fa89fd; */ position: relative; transition: 0.25s all; } .mceContentBody div.setting.super-hakuto div.link a::after { background: #e86896; border-radius: 1000rem; content: ""; height: 1.75rem; margin: auto; pointer-events: none; position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 1.75rem; z-index: 1; border: 0.15rem solid #e86896; } .mceContentBody div.setting.super-hakuto div.link a::before { border-right: 0.15rem solid #fff; border-top: 0.15rem solid #fff; content: ""; display: block; height: 0.5rem; right: 1.25rem; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 0.5rem; z-index: 2; } .mceContentBody div.setting.super-hakuto div.link a:hover { color: #fff; background: #e86896; } .mceContentBody div.setting.super-hakuto div.link a:hover::after { background: #fff; } .mceContentBody div.setting.super-hakuto div.link a:hover::before { border-right: 0.15rem solid #e86896; border-top: 0.15rem solid #e86896; } /* -------- 因幡伯耆國開運神社巡り */ .mceContentBody div.setting.super-hakuto div.section-extra { border-top: 0.3rem double #040499; border-bottom: 0.3rem double #040499; padding: 4rem; /* border: 0.1rem solid #040499; */ /* border-radius: 5rem; */ margin-bottom: 4rem; /* background: #ffe7e5; */ margin-left: -4rem; margin-right: -4rem; width: calc(100% + 8rem); box-sizing: border-box; /* background: url(https://www.tottori-guide.jp/files/55984.jpg); background-size: 20rem 20rem; */; } .mceContentBody div.setting.super-hakuto hr { border-bottom: 0.3rem double #040499; } /* --- */ @media screen and (max-width:1100px) { .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article:nth-child(3n) { margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:768px) { .mceContentBody div.setting.super-hakuto {} .mceContentBody div.setting.super-hakuto div.setting-super-hakuto-inner { padding: 0; } .mceContentBody div.setting.super-hakuto div.main { margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; border-radius: 0; overflow: hidden; padding-left: 0; padding-right: 0; } .mceContentBody div.setting.super-hakuto div.page-index { padding-left: 1rem; padding-right: 1rem; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article { width: 48%; margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article:nth-child(4n) { margin-right: 4%; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article:nth-child(2n) { margin-right: 0; } } @media screen and (max-width:480px) { .mceContentBody div.setting.super-hakuto div.page-index ul li { width: 100%; padding: 0 0 2rem; box-sizing: border-box; } .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article, .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article:nth-child(4n), .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-04-wrap div.article:nth-child(2n), .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article, .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article:nth-child(3n), .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-03-wrap div.article:nth-child(2n), .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-02-wrap div.article, .mceContentBody div.setting.super-hakuto div.section div.article-wrap.column-02-wrap div.article:nth-child(2n) { width: 100%; margin-right: 0; } } .mceContentBody div.setting.super-hakuto div.banner ul { text-align: center; display: flex; } .mceContentBody div.setting.super-hakuto div.banner ul li { width: 50%; } .mceContentBody div.setting.super-hakuto div.banner ul.logo { max-width: 33.33vw; margin-left: auto; margin-right: auto; } @media screen and (max-width:768px) { .mceContentBody div.setting.super-hakuto div.banner ul:nth-child(2) { display: block; } .mceContentBody div.setting.super-hakuto div.banner ul:nth-child(2) li { width: 100%; margin-bottom: 4rem; } .mceContentBody div.setting.super-hakuto div.banner ul.logo { max-width: 100.00%; } } .mceContentBody div.setting.super-hakuto div.banner ul.logo li { width: 33.33%; } .mceContentBody div.setting.super-hakuto div.banner ul li img { max-width: 100%; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.super-hakuto div.banner ul.logo li img { max-width: 12rem; display: block; width: 100%; margin-left: auto !important; margin-right: auto !important; } .mceContentBody div.setting.super-hakuto div.banner ul li a { max-width: 80%; display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.super-hakuto div.section.photo img { border-radius: 1rem; overflow: hidden; } .mceContentBody div.setting.super-hakuto div.tel-web { display: flex; } .mceContentBody div.setting.super-hakuto div.tel-web > div { width: 49%; margin-right: 2%; } .mceContentBody div.setting.super-hakuto div.tel-web > div:nth-child(2) { margin-right: 0; } .mceContentBody div.setting.super-hakuto div.tel-web > div span.material-icons { font-size: 1.6rem; position: absolute; top: 50%; transform: translateY(-50%); left: 0.7rem; color: #fff; } .mceContentBody div.setting.super-hakuto div.tel-web > div a { background: #d2eff7; color: #1967d2; display: block; border-radius: 1000rem; text-decoration: none; position: relative; text-align: center; border: 0.2rem solid #d2eff7; box-sizing: border-box; transition: 0.25s all; min-height: 3rem; } .mceContentBody div.setting.super-hakuto div.tel-web > div a:hover, .mceContentBody div.setting.super-hakuto div.tel-web > div a[href^="tel:"]:hover { background: #c3e7f4; border: 0.2rem solid #c3e7f4; } .mceContentBody div.setting.super-hakuto div.tel-web > div a:before { background: #1967d2; position: absolute; top: 50%; left: 0.4rem; transform: translateY(-50%); border-radius: 1000rem; content: ""; width: 2.2rem; height: 2.2rem; } .mceContentBody div.setting.super-hakuto div.tel-web div.tel-web-label { padding-left: 1.5rem; white-space: nowrap; font-size: clamp(1.4rem, 1.6vw, 1.6rem); position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.setting.super-hakuto div.tel-web > div a[href^="tel:"] { text-decoration: none !important; color: #1967d2 !important; } @media screen and (max-width:768px) { .mceContentBody div.setting.super-hakuto div.tel-web { display: block; } .mceContentBody div.setting.super-hakuto div.tel-web > div { width: 100%; margin-right: 0; margin-bottom: 0.5rem; } .mceContentBody div.setting.super-hakuto div.tel-web > div:nth-child(2) { margin-bottom: 0; } .mceContentBody div.setting.super-hakuto div.tel-web > div a[href^="tel:"] { text-decoration: none !important; color: #1967d2 !important; } } .doghotel { position: relative; z-index: 0; } body:has(.doghotel) { overflow-x: clip; } .spot-main, .mceContentBody div.setting { min-width: 0; max-width: 100%; } .doghotel::before { background: #e5e0d8; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + 4rem); content: ""; display: block; z-index: -1; box-shadow: 0 0 0 100vmax #e5e0d8; clip-path: inset(0 -100vmax); } /* ----- ペットと泊まれる宿 */ .ma { margin: 0 auto; } .mceContentBody div.setting.pet {} .mceContentBody div.setting.pet {} /* reset */ .mceContentBody div.pet { /* margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; margin-top: -20px; */ /* background: #fbf2f2; */ /*background: #fff;*/ max-width: 100%; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ color: #000; } .mceContentBody div.pet a, .mceContentBody div.pet a:hover { color: #540; } .mceContentBody div.pet a[href^="tel:"] { color: #540 !important; text-decoration: none; pointer-events: none; } @media screen and (max-width: 768px) { .mceContentBody div.pet a[href^="tel:"] { text-decoration: underline; pointer-events: auto; } } .mceContentBody div.pet .link { background: none; margin-bottom: 0; padding-left: 0; text-align: center; } /* .mceContentBody div.pet .link a { text-decoration: none; background: #e8eaeb; display: inline-block; border-radius: 1000px; padding: 0.75em 40px; position: relative; transition: all 0.3s ease 0s; color: #000; box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.025); } */ .mceContentBody div.pet ul > li::before { background: #000; } .mceContentBody div.pet div.main { /* margin-top: -20px; margin-left: -20px; margin-right: -20px; */; } .mceContentBody div.pet div.lead { margin-top: 80px; margin-bottom: 80px; letter-spacing: 2px; line-height: 2; position: relative; } .mceContentBody div.pet div.lead div.lead-bg { width: 100%; position: absolute; top: -10%; left: 50%; transform: translateX(-50%) translateY(-50%); } .mceContentBody div.pet h3 { display: flex; align-items: center; justify-content: center; position: relative; /*padding: 0 2.5em; width: auto;*/width:100%; padding:0; color: #4d4000; margin-bottom: 5rem; margin-top: 3rem; font-size: 35px; font-family: "Noto Serif JP", serif; } .mceContentBody div.pet h3::before, .mceContentBody div.pet h3::after, .mceContentBody div.pet h4::before, .mceContentBody div.pet h4::after { content: ''; /*display: inline-block; position: absolute; top: 50%; width: 50px;*/ height: 0.15rem; background-color: #4D4637; flex-grow: 1; } .mceContentBody div.pet h3::before { /*left: 0;*/ margin-right: 1.5rem; } .mceContentBody div.pet h3::after { /*right: 0;*/ margin-left: 1.5rem; } .mceContentBody div.pet h4 { display: flex; align-items: center; justify-content: center; background: none; box-sizing: border-box; font-size: 1.8em; font-family: "Noto Serif JP", serif; font-weight: 500; height: auto; margin: 0 0 0.5em !important; margin-top: 40px !important; margin-bottom: 40px !important; padding: 0; position: relative; text-align: center; width: 100%; /*color: #000; border-bottom: 0.2rem solid #4D4637;*/ } /*.mceContentBody div.pet h4::before { border: medium none; content: ""; left: 0; position: relative; top: inherit; } .mceContentBody div.pet h4::after { border: medium none; content: ""; position: relative; right: 0; top: inherit; } */.mceContentBody div.pet h4::before { margin-right: 1.5rem; opacity: 0.2; } .mceContentBody div.pet h4::after { margin-left: 1.5rem; opacity: 0.2; } .mceContentBody div.pet h4 span { position: relative; z-index: 2; } .mceContentBody div.pet p, .mceContentBody div.pet td, .mceContentBody div.pet th { position: relative; z-index: 2; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */ color: #000; } .mceContentBody div.pet h5 { background: none; border-top: none; box-shadow: none; box-sizing: border-box; color: #000; font-size: 1.6em; font-weight: normal; margin: 0 0 0; overflow: hidden; padding: 0 0 0; /* font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif; */; } /* */ .mceContentBody div.setting.pet div.article { background: #fff; padding-left: 20px; padding-right: 20px; border-radius: 10px; padding-top: 20px; padding-bottom: 20px; margin-bottom:20px; } .mceContentBody div.setting.pet div.article { /* padding-top: 120px; padding-bottom: 80px; border-top: 1px solid #ccc; background: url(https://www.tottori-guide.jp/files/45929.png); background-size: 50px 45px; background-repeat: repeat-x; background-position: top; position: relative; z-index: 1; */; } .mceContentBody div.setting.pet div.article {} .mceContentBody div.setting.pet div.article:after { /* background: url(https://www.tottori-guide.jp/files/46060.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; right: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; */; } .mceContentBody div.setting.pet div.article:nth-child(even):after { /* background: url(https://www.tottori-guide.jp/files/46061.png) no-repeat; background-size: 100px 100px; position: absolute; content: ""; top: 0; left: 50px; width: 100px; height: 100px; transform: translateY(0); pointer-events: none; */; } .mceContentBody div.setting.pet div.article:last-child { border-bottom: 1px solid #ccc; } .mceContentBody div.setting.pet div.article > div.clearfix { padding-top: 20px; } .mceContentBody div.setting.pet div.pet-spot-number { /* background: #01a4dc; */ color: #6ec9ef; width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: middle; border-radius: 1000px; /* box-sizing: border-box; */ border: 2px solid #6ec9ef; text-align: center; font-weight: bold; font-size: 20px; } .mceContentBody div.setting.pet div.pet-spot-number { color: #fff; border: 2px solid #ff4aab; background: #ff4aab; } .mceContentBody div.setting.pet div.pet-spot-number { color: #fff; border: 2px solid #4D4637; background: #4D4637; } .mceContentBody div.setting.pet div.pet-spot-name-wrap { position: relative; } .mceContentBody div.setting.pet div.pet-spot-name-wrap:before { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; border-top: 2px dotted #A1C4BB; content: ""; } .mceContentBody div.setting.pet div.pet-spot-name-wrap > div { position: relative; z-index: 1000; background: #fff; display: inline-block; padding-right: 1em; } .mceContentBody div.setting.pet div.pet-spot-name { font-size: 30px; font-weight: normal; display: inline-block; vertical-align: middle; } .mceContentBody div.setting.pet div.pet-spot-name a { color: #4D4637; text-decoration: none; font-family: "Noto Serif JP", serif; font-weight: 500; } .mceContentBody div.setting.pet div.article div.label { font-size: 15px; letter-spacing: -3px; /* font-weight: bold; */ /* color: #6ec9ef; */ position: absolute; top: -10px; left: -10px; color: #000; background: #ffff00; width: 60px; height: 60px; /* border-radius: 1000px; */ border: 2.0px solid #fff; box-sizing: content-box; } .mceContentBody div.setting.pet div.article div.label + div.label { top: -10px; left: 80px; } .mceContentBody div.setting.pet div.article div.label.renewal { background: #ffff00; color: #000; border-radius: 0; transform: rotate(45deg); } .mceContentBody div.setting.pet div.article div.label.tebura { background: #A1C4BB; color: #fff; line-height: 1.5; text-align: center; letter-spacing: 0; } .mceContentBody div.setting.pet div.article div.label.rental { background: #94be38; color: #fff; line-height: 1.25; text-align: center; letter-spacing: 0; border-radius: 1000rem; } .mceContentBody div.setting.pet div.article div.label span { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); white-space: nowrap; font-family: "游ゴシック Medium", YuGothic, YuGothicM, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; font-weight: bold; } .mceContentBody div.setting.pet div.article div.pet-spot-photo div.label img { width: 50px; max-width: 50px; position: relative; top: 2px; } .mceContentBody div.setting.pet div.article div.label.renewal span { transform: translateX(-50%) translateY(-50%) rotate(-45deg); /* top: 0; left: 0; */; } .mceContentBody div.setting.pet div.article div.description { /* border: 3px solid #6ec9ef; padding: 1em; box-sizing: border-box; margin-bottom: 20px; border-radius: 5px; background: #fff; */ margin-bottom: 20px; /* background: #f7ee13; */ /* padding: 1em; */ /* border: 1px solid #6c3806; */ color: #000; font-feature-settings: "palt"1; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } .mceContentBody div.setting.pet div.article div.pet-spot-photo { position: relative; } .mceContentBody div.setting.pet div.article div.pet-spot-photo img { display: block; width: 100%; overflow: hidden; /* border-radius: 10px; */; } .mceContentBody div.setting.pet div.article div.pet-spot-photo .flex-direction-nav {position: absolute; top: calc(50% - 15px); width: 100%;} .mceContentBody div.setting.pet div.article div.pet-spot-photo .flex-direction-nav .flex-prev, .mceContentBody div.setting.pet div.article div.pet-spot-photo .flex-direction-nav .flex-next { background: #BBA987!important; } .mceContentBody div.setting.pet div.article table { border-collapse: collapse; border-top: 1px solid #4D4637; width: 100%; table-layout: fixed; margin-bottom: 20px; } .mceContentBody div.setting.pet div.article table { border-collapse: collapse; } .mceContentBody div.setting.pet div.article table th, .mceContentBody div.setting.pet div.article table td, .mceContentBody div.setting.pet div.article table.pet-area-tb th, .mceContentBody div.setting.pet div.article table.pet-area-tb td { border-bottom: 1px solid #4D4637; padding-top: 0.75em; padding-bottom: 0.75em; padding-left: 1em; padding-right: 1em; color: #000; } .mceContentBody div.setting.pet div.article table th { background: #BBA987; color: #000; padding-left: 0.5em; padding-right: 0.5em; font-weight: normal; } .mceContentBody div.setting.pet table.pet-area-tb td.tdbg { background: none; border-bottom: 1px solid #000; } .mceContentBody div.setting.pet table.pet-area-tb td.tdbg { border-bottom: 1px solid #000; border-top: 1px solid #000; background: #BBA987; } .mceContentBody div.setting.pet td.tdbg, .mceContentBody div.setting.pet td.tdbg p { color: #fff; } .mceContentBody div.setting.pet .pet-area-tb td { border-bottom: 1px solid #ccc; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; padding: 6px; } @media screen and (max-width:768px) { .mceContentBody div.pet { padding: 0; margin: 0; } .mceContentBody div.pet div.main { margin-top: -10px; margin-left: -10px; margin-right: -10px; } .mceContentBody div.setting.pet div.article { padding: 10px; } .mceContentBody div.setting.pet div.pet-spot-name-wrap > div { display: block; padding-right: 0; width: 100%; text-align: center; } .mceContentBody div.setting.pet div.pet-spot-number { display: block; margin-left: auto; margin-right: auto; } .mceContentBody div.setting.pet div.pet-spot-name { font-size: 21px; /*white-space: nowrap; */ } .mceContentBody div.setting.pet div.responsive-type-outer table.pet-area-tb { width: 94rem !important; } .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next { opacity: 1 !important; top: 50%!important; } .mceContentBody div.pet { margin: 0 0 -20px!important; padding: 5px!important; } .mceContentBody div.pet h3 { /*padding: 0 2em;*/ font-size: 30px; margin: 2rem 0; } /* .mceContentBody div.setting.pet table.pet-area-tb td.tdbg { white-space: nowrap; font-size: 12px; display: none; } .mceContentBody div.setting.pet .pet-area-tb tr:first-child { border-top: 0; } .mceContentBody div.setting.pet .pet-area-tb tr { border-top: 1px solid #ccc; display: block; margin-bottom: 40px; } .mceContentBody div.setting.pet .pet-area-tb { border-top: 0; } .mceContentBody div.setting.pet .pet-area-tb td { border: none; border-bottom: 1px solid #ccc !important; float: none; display: block; margin-bottom: 0; width: 100%; box-sizing: border-box; } .mceContentBody div.setting.pet .pet-area-tb td:before { content: attr(data-text)""; display: block; width: calc(100% + 12px); font-weight: normal; background: #f0f0f0; border: 1px solid #ccc; border-top: none; color: #000; border-left: none; border-right: none; padding: 0; box-sizing: border-box; margin: -6px; padding: 6px; margin-bottom: 0.5em; } */ .mceContentBody div.pet h4 { font-size: 21px; } } .mceContentBody div.setting.pet .flex-direction-nav .flex-next,.mceContentBody div.setting.pet .flex-direction-nav .flex-prev { border-radius: 5rem; width: 30px; height: 30px; } .mceContentBody div.setting.pet span.smallpet,.mceContentBody div.setting.pet span.mediumpet,.mceContentBody div.setting.pet span.largepet { display: inline-block; color: #fff; font-size: 1.4rem; font-weight: bold; padding: 0.1rem 0.25rem; vertical-align: middle; position: relative; margin: -0.1rem 0.25rem 0.25rem 0; border-radius: 0.25rem; line-height: 1.5; } .mceContentBody div.setting.pet span.smallpet { background: #f7931e; } .mceContentBody div.setting.pet span.mediumpet { background: #cb6f00; } .mceContentBody div.setting.pet span.largepet { background: #540400; } .original-button { display: flex; align-items: center; justify-content: center; line-height: 1.2; text-decoration: none!important; color: #ffffff!important; font-size: 18px; border-radius: 1px; height: 60px; position: relative; transition: 0.3s; background-color: #4d4637ff; margin-bottom: 8px; font-family: "Noto Serif JP", serif; } .original-button::before, .original-button::after { content: ""; display: block; position: absolute; top: 50%; right: 18px; transform-origin: 100% 50%; height: 1px; width: 11px; background-color: #FFFFFF; border-radius: 2px; will-change: transform; transition: .3s; } .original-button::before { transform: translateY(-50%) rotate(30deg); } .original-button::after { transform: translateY(-50%) rotate(-30deg); } .original-button:hover::before { transform: translate(5px, -50%) rotate(30deg); } .original-button:hover::after { transform: translate(5px, -50%) rotate(-30deg); } /* -------------------------------------------------------- fine-contents */ div.fine-contents { max-width: 100rem; margin-left: auto; margin-right: auto; padding: 4rem 0; /*margin-top: 4rem;*/ box-sizing: border-box; border-top: 0.5rem dotted #fff99b; border-bottom: 0.5rem dotted #fff99b; } div.fine-contents div.fine-contents-heading { font-size: 3rem; text-align: center; font-weight: bold; color: #323c46; letter-spacing: 0.25rem; } div.fine-contents div.fine-contents-heading span { display: inline-block; position: relative; z-index: 1; } div.fine-contents div.fine-contents-heading span::before { position: absolute; bottom: 1rem; left: 0; height: 1.5rem; width: 100%; background: #fff99b; content: ""; z-index: -1; } div.fine-contents div.fine-contents-sub-heading { font-size: 2.4rem; text-align: center; font-weight: bold; margin-top: 2rem; margin-bottom: 2rem; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #4cbabf; border: 0.2rem solid #4cbabf; } div.fine-contents-key-visual { max-width: 60rem; margin-right: auto; margin-left: auto; margin-bottom: 4rem; margin-top: 4rem; } div.fine-contents div.fine-contents-articles-wrap { display: flex; flex-wrap: nowrap; } div.fine-contents div.fine-contents-article { width: 31.00%; margin-right: 3.5rem; box-sizing: border-box; border: 0.2rem solid #f1f4f7; border-radius: 1rem; padding: 2rem; position: relative; padding-bottom: 8rem; padding-top: 2rem; } div.fine-contents div.fine-contents-article:nth-child(1):before { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); border-radius: 1rem; } div.fine-contents div.fine-contents-article:nth-child(2):before { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); border-radius: 1rem; } div.fine-contents div.fine-contents-article:nth-child(3):before { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); border-radius: 1rem; } div.fine-contents div.fine-contents-article div.fine-contents-article-link { position: absolute; bottom: 2rem; left: 0; width: 100%; } div.fine-contents div.fine-contents-article div.fine-contents-article-link a { color: #ff90bd; display: block; padding: 1rem 2rem; box-sizing: border-box; text-align: center; font-weight: bold; border: 0.2rem solid #ff90bd; border-radius: 1000rem; width: calc(100% - 3rem); margin-left: auto; margin-right: auto; } div.fine-contents div.fine-contents-article div.fine-contents-article-link a:before { border-right: 0.15rem solid #ff90bd; border-top: 0.15rem solid #ff90bd; content: ""; display: block; height: 0.5rem; right: 2rem; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); transition: all 0.2s ease-in-out 0s; width: 0.5rem; } div.fine-contents div.fine-contents-article div.fine-contents-article-link a:hover { color: #fff; background: #ff90bd; } div.fine-contents div.fine-contents-article div.fine-contents-article-link a:hover:before { border-right: 0.15rem solid #fff; border-top: 0.15rem solid #fff; } div.fine-contents div.fine-contents-article:nth-child(3) { margin-right: 0; } div.fine-contents div.fine-contents-article div.fine-contents-article-thumbnail { margin-bottom: 1.5rem; } div.fine-contents div.fine-contents-article div.fine-contents-article-thumbnail img { border-radius: 0.75rem; overflow: hidden; } div.fine-contents div.campaign-article { clear: both; overflow: hidden; border-top: 0.3rem dotted #ccc; padding-top: 2rem; padding-bottom: 2rem; } div.fine-contents div.campaign-article div.campaign-article-title { font-size: 2.1rem; margin-bottom: 1rem; font-weight: bold; border-bottom: 0.2rem solid #4cbabf; } div.fine-contents div.campaign-article div.campaign-article-thumbnail { width: 28%; float: right; margin-left: 4%; } div.fine-contents div.campaign-article div.campaign-article-details { width: 68%; float: left; } @media only screen and (max-width: 768px) { div.fine-contents { padding:1rem; } div.fine-contents div.fine-contents-articles-wrap { display: flex; flex-wrap: wrap; } div.fine-contents div.fine-contents-article { width: 100.00%; margin-right: 0; margin-bottom: 2rem; } div.fine-contents div.fine-contents-article > div { display: flex; flex-wrap: nowrap; } div.fine-contents div.fine-contents-article > div > div { width: 45%; margin-right: 5%; } div.fine-contents div.fine-contents-article > div > div:nth-child(2) { width: 50%; margin-right: 0; } } @media only screen and (max-width: 480px) { div.fine-contents div.fine-contents-article > div { flex-wrap: wrap; } div.fine-contents div.fine-contents-article > div > div { width: 100%; margin-right: 0; } div.fine-contents div.fine-contents-article > div > div:nth-child(2) { width: 100%; } div.fine-contents div.campaign-article div.campaign-article-thumbnail { width: 100%; float: none; margin-left: 0; margin-bottom: 2rem; } div.fine-contents div.campaign-article div.campaign-article-details { width: 100%; float: none; } }