@charset "utf-8"; /* Theme Name:SEEED Theme URI:https://tcd-theme.com/tcd105/ Description:"SEEED" is a website template ideal for promoting web services and applications. You can visually showcase the strengths of that service with numbers and charts, and build a service site that operates 24 hours a day like an effective LP. Author:TCD Author URI:https://tcd-theme.com/ Version:1.9.1 Text Domain:tcd-seeed */ /* ------------------------------------------------------------------------------------ web fonts　ウェブフォントファイルを変更した場合はv=1.0の数字を変更（キャッシュ対策） ------------------------------------------------------------------------------------ */ @font-face { font-family: 'design_plus'; font-weight: normal; font-style: normal; font-display:swap; src: url('fonts/design_plus.woff?v=1.1') format('woff'); } /* ---------------------------------------------------------------------- reset css ---------------------------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; word-wrap:break-word; word-break:break-word; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } html { -webkit-text-size-adjust:100%; } ul, ol { list-style:none; } blockquote , q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content: none; } a:focus { outline:none; } ins { text-decoration:none; } mark { font-style:italic; font-weight:bold; } del { text-decoration:line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; width:100%; } hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; } button, input, select, textarea { outline:0; -webkit-box-sizing:border-box; box-sizing:border-box; font-size:100%; } input, textarea { background-image: -webkit-linear-gradient(hsla(0,0%,100%,0), hsla(0,0%,100%,0)); -webkit-appearance: none; border-radius:0; /* Removing the inner shadow, rounded corners on iOS inputs */ } input[type="checkbox"]{ -webkit-appearance: checkbox; } input[type="radio"]{ -webkit-appearance: radio; } button { appearance: none; -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border:0; padding:0; } iframe { max-width:100%; } svg { display:block; } *:focus { outline:none; } h1, h2, h3, h4, h5, h6 { font-weight:600; } /* clearfix */ .clearfix::after { display:block; clear:both; content:""; } /* ---------------------------------------------------------------------- 基本設定 ---------------------------------------------------------------------- */ html { height:100%; position:relative; overflow-x:hidden; } body { min-height:100%; font-size:16px; line-height:1; width:100%; position:relative; overscroll-behavior-y:none; -webkit-font-smoothing:antialiased; } body.admin-bar { padding-top:32px; } a { color:#000; text-decoration:none; } .post_content a, .post_content a:hover, .widget_block a, .textwidget a, #no_post a, #page_404_header .desc a, #no_search_result a { color:var(--content_link_color); } @media(hover: hover) { .widget_block a:hover, .textwidget a:hover, #no_post a:hover { color:var(--content_link_color_light); } a:hover { color:var(--main_color); } } a, a:before, a:after, input { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } .clear { clear:both; } .hide { display:none; } .post_content { word-wrap: break-word; } a[href^="tel:"] { pointer-events:none; text-decoration:none !important; } .mobile_device a[href^="tel:"] { pointer-events:auto; } /* レイアウト */ #container { position:relative; margin-top:-80px; z-index:1; } body.single-service #container { overflow:hidden; } body.show_header_message:not(.hide_header_message):not(.error404):not(.search-no-results) #container { margin-top:-130px; } body.hide_page_header_bar #container { margin-top:0 !important; } body.single.no_header_image #container { padding-top:173px; } #main_content { width:1030px; margin:0 auto; padding:70px 0 150px; position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; } #main_col { width:calc(100% - 310px); } #side_col { width:250px; position:relative; display:flex; flex-direction:column; } body.show_sidebar_left #main_content { flex-direction:row-reverse; } /* ---------------------------------------------------------------------- 上付き文字、下付き文字 ---------------------------------------------------------------------- */ sup { vertical-align: super; font-size: smaller; } sub { vertical-align: sub; font-size: smaller; } /* ---------------------------------------------------------------------- 共通パーツ ---------------------------------------------------------------------- */ /* メインカラーを文字に適用 */ .main_color { color:var(--main_color) !important; } /* デザインボタン */ .design_button { width:300px; height:70px; border-radius:70px; line-height:1.5; padding:0 1.5em; text-align:center; position:relative; overflow:hidden; font-size:16px; z-index:1; color:var(--main_color); border:1px solid var(--main_color); background:transparent; text-decoration: none; display:inline-flex; justify-content:center; align-items:center; } .design_button:hover { color:#fff; text-decoration:none !important; background:var(--main_color); border-color:var(--main_color) !important; } /* デザイン見出し */ .design_header { text-align:center; margin-bottom:50px; margin-top:-10px; } .design_header .catch { text-align: center; line-height:1.6; margin:0; padding:0; } .design_header .desc p { font-size:18px; line-height:2.4; } .design_header .desc p.mobile { display:none; } .design_header .catch + .desc { margin-top:15px; } /* カテゴリーボタン */ .category_button { background:#000; color:#fff; padding:0 20px; font-size:14px; min-width:110px; height:40px; line-height:40px; text-align:center; display:table; } @media(hover: hover) { .category_button:hover { background:var(--main_color); color:#fff; } } /* タイプライターエフェクト */ .typewritter_animation .item { position:absolute; opacity:0; } .typewritter_animation .item.animate { position:relative; opacity:1; transition: opacity 0s ease 0s; } .typewritter_animation .item:after { animation: blink 0.7s steps(1) infinite; content:''; width:2px; height:100%; background:#fff; display:block; position:absolute; right:0; top:0; } .typewritter_animation .item.animate:after { animation: blink_end 0s ease forwards 0.1s; } @keyframes blink { 0% { opacity:1; } 50% { opacity:0; } } @keyframes blink_end { 0% { opacity:1; } 100% { opacity:0; } } /* プラン一覧 */ .design_plan_list_wrap { margin:0 0 70px 0; position:relative; } .design_plan_list_slider { } .design_plan_list { } .design_plan_list.two_item, .design_plan_list.one_item { justify-content:center; } .design_plan_list .list { width:calc(100% / 3); margin:0; z-index:1; position:relative; background:#fff; flex: 0 0 auto; } .design_plan_list .list.active:before { content:''; width:calc(100% + 2px); height:calc(100% + 2px); position:absolute; top:-1px; left:-1px; border:4px solid var(--main_color); z-index:5; pointer-events:none; } .design_plan_list .list.active { background:var(--main_color_light); z-index:2; } .design_plan_list .list.active + .list.active { margin-left:-3px; width:calc(100% / 3 + 2px); } .design_plan_list .col { border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:40px; } .design_plan_list .col:first-child { border-top:1px solid #ddd; } .design_plan_list .list:first-of-type .col { border-left:1px solid #ddd; } .design_plan_list .top .headline { text-align:center; font-size:20px; line-height:1; margin:-2px 0 23px 0; padding:0; font-weight:600; } .design_plan_list .top .price { text-align:center; margin:0; padding:0; line-height:1; font-weight:600; } .design_plan_list .top .price .num { font-family:'Arial'; font-size:50px; } .design_plan_list .top .price .unit { font-size:20px; margin:0 0 0 5px; } .design_plan_list .top .desc { margin:25px 0 0 0; padding:0; line-height:2; } .design_plan_list .top .button { height:70px; line-height:1.4; color:#fff; background:var(--main_color); display:table; border-radius:70px; margin:30px auto 0; text-decoration:none; padding:0 20px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } .design_plan_list .col:not(.top) { display:flex; flex-wrap:wrap; justify-content:space-between; padding:15px 40px; align-items: center;} .design_plan_list .col:not(.top) p { margin:0; line-height:1.9; } @media(hover: hover) { .design_plan_list .top .button:hover { background:var(--main_color_dark); } } body.show_sidebar .design_plan_list .list, body.single .design_plan_list .list { width:343px; } body.show_sidebar .design_plan_list .list.active + .list.active, body.single .design_plan_list .list.active + .list.active { width:345px; } .design_plan_list_wrap .plan_list_scrollbar { display:none; } .design_plan_list_wrap .swiper-scrollbar-drag { /*background:var(--main_color);*/ } body.show_sidebar .design_plan_list_wrap .plan_list_scrollbar, body.single .design_plan_list_wrap .plan_list_scrollbar { display:block; position:relative; margin:30px 0 0; width:100%; left:0; cursor:pointer; } /* swiperの矢印ナビ */ .swiper-nav-button { width:50px; height:50px; border:none; border-radius:100%; background:none; z-index:200; } .swiper-button-next { right:-60px !important; } .swiper-button-prev { left:-60px !important; } body.show_sidebar .design_plan_list_wrap .swiper-button-next, body.single .design_plan_list_wrap .swiper-button-next { display:none; } body.show_sidebar .design_plan_list_wrap .swiper-button-prev, body.single .design_plan_list_wrap .swiper-button-prev { display:none; } .swiper-button-next:after, .swiper-button-prev:after { display:none; } .swiper-button-next:before, .swiper-button-prev:before { font-family:'design_plus'; font-size:26px; top:1px; position:relative; color:#000; -webkit-font-smoothing: antialiased; transition: transform 0.25s ease; transform:scale(1); transform-origin:10px; } .swiper-button-prev:before { content:'\e90f'; left:0px; } .swiper-button-next:before { content:'\e910'; right:0px;} .swiper-button-disabled { opacity:0 !important; } @media(hover: hover) { .swiper-nav-button:hover:before { transform:scale(1.3); } } /* 数値データ */ .ac_data { height:auto; margin:50px 0; text-align:center; display:flex; flex-direction:column; justify-content:center; } .ac_data .headline { font-size:18px !important; font-weight:600; margin:0 0 10px 0 !important; padding:0 !important; line-height:1 !important; } .ac_data .num_area { margin:0 !important; line-height:1 !important; font-family:'Arial'; } .ac_data .num { font-size:60px; font-weight:600; } .ac_data .unit { font-size:22px; font-weight:600; } .ac_data .desc { font-size:16px; margin:0 !important; } /* ---------------------------------------------------------------------- トップページ ヘッダースライダー ---------------------------------------------------------------------- */ #header_slider_wrap { width:100%; height:auto; aspect-ratio:1450 / 850; display:flex; flex-wrap:wrap; position:relative; } /* スライダーエリア */ #header_slider { height:100%; width:100%; position:relative; overflow:hidden; } #header_slider .swiper-wrapper { height:100%; width:100%; position:relative; } #header_slider .item { width:100%; height:100%; position:relative; overflow:hidden; align-items: unset;} #header_slider .bg_image { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; display:block; margin:0; } #header_slider.animation_type_slide .bg_image { transform: translate3d(-80%, 0, 0); transition-property: none; transition-duration: inherit; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.05s; } #header_slider .bg_image img { position:absolute; top:0; left:0; width:100%; height:100%; display:block; margin:0; object-fit:cover; } /* キャッチコピーとボタン */ #header_slider_content { width:100%; padding:0 50px; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); z-index:1000; } #header_slider_content .catch { color:#fff; text-align:center; z-index:3; line-height:1.4; } #header_slider_wrap.catch_animation_type2 .catch { opacity:0; } #header_slider_wrap.catch_animation_type2.start_slide .catch { opacity:1; transition: opacity 1.0s ease 0.5s; } #header_slider_content .link_button { margin:25px auto 0; text-align:center; } #header_slider_content .link_button a { margin:0 auto; width:300px; height:70px; border-radius:70px; background:var(--main_color); color:#fff; font-size:16px; line-height:1.5; padding:0 1.5em; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } #header_slider_content .link_button { opacity:0; } #header_slider_wrap.start_slide .link_button { opacity:1; transition: opacity 1.0s ease 0.5s; } #header_slider_wrap.catch_animation_type2.start_slide .link_button { opacity:1; transition: opacity 1.0s ease 1.0s; } @media(hover: hover) { #header_slider_content .link_button a:hover { background:var(--main_color_dark); } } /* スライドアイテムのアニメーション */ #header_slider.animation_type_slide .item.first_item .item-inner { transition-property: none !important; } #header_slider.animation_type_slide .item { background-color: rgba(0,0,0,0); opacity: 1 !important; transition-property: background-color !important; } #header_slider.animation_type_slide .item.swiper-slide-active { background-color: rgba(1,1,1,0); } #header_slider .item .item-inner { height: 100%; overflow: hidden; } #header_slider.animation_type_slide .item .item-inner { transform: translate3d(100%, 0, 0); transition-property: none; transition-duration: inherit; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-delay: 0.05s; } #header_slider.animation_type_slide .item.p-effect-reverse .item-inner { transform: translate3d(-100%, 0%, 0); } #header_slider.animation_type_slide .item.p-effect-slidein { z-index: 2; } #header_slider.animation_type_slide .item.p-effect-slidein .item-inner, #header_slider.animation_type_slide_up .item.p-effect-slidein.p-effect-reverse .item-inner { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_slide .item.p-effect-slideout { z-index: 1; } #header_slider.animation_type_slide .item.p-effect-slideout .item-inner { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_slide .item.p-effect-slideout.p-effect-reverse .item-inner { transform: translate3d(0, 0, 0); transition-property: transform; } /* 背景画像のアニメーション（スライドタイプ） */ #header_slider.animation_type_slide .item.p-effect-slidein .bg_image { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_slide .item.p-effect-slideout .bg_image { transform: translate3d(-20%, 0, 0); transition-property: transform; } #header_slider.animation_type_slide .item.p-effect-reverse .bg_image { transform: translate3d(80%, 0, 0); } #header_slider.animation_type_slide .item.p-effect-slidein.p-effect-reverse .bg_image { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_slide .item.p-effect-slideout.p-effect-reverse .bg_image { transform: translate3d(20%, 0, 0); transition-property: transform; } /* 背景画像のアニメーション（フェードタイプ） */ #header_slider.animation_type_fade .item.p-effect-slidein .bg_image, #header_slider.animation_type_fade .item.p-effect-slidein.p-effect-reverse .bg_image { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_fade .item.p-effect-slideout .bg_image { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider.animation_type_fade .item.p-effect-reverse .bg_image { transform: translate3d(0, 0, 0); } #header_slider.animation_type_fade .item.p-effect-slideout.p-effect-reverse .bg_image { transform: translate3d(0, 0, 0); transition-property: transform; } #header_slider .item .content .catch, #header_slider .item .content .link_button { opacity:0; } #header_slider .item.first_item.p-effect-slidein .content .catch { opacity:1; transition: opacity 1.0s ease 1.0s; } #header_slider .item.first_item.p-effect-slidein .content .link_button { opacity:1; transition: opacity 1.0s ease 1.5s; } #header_slider .item.p-effect-slidein .content .catch, #header_slider .item.p-effect-slidein.p-effect-reverse .content .catch { opacity:1; transition: opacity 1.0s ease 1.5s; } #header_slider .item.p-effect-slidein .content .catch, #header_slider .item.p-effect-slidein.p-effect-reverse .content .catch { opacity:1; transition: opacity 1.0s ease 1.5s; } #header_slider .item.p-effect-slidein .content .link_button, #header_slider .item.p-effect-slidein.p-effect-reverse .content .link_button { opacity:1; transition: opacity 1.0s ease 2.0s; } #header_slider .item.p-effect-slideout .content .catch, #header_slider .item.p-effect-slideout.p-effect-reverse .content .catch { opacity:0; transition: opacity 1.0s ease; } #header_slider .item.p-effect-slideout .content .link_button, #header_slider .item.p-effect-slideout.p-effect-reverse .content .link_button { opacity:0; transition: opacity 1.0s ease; } /* 動画 */ #header_slider .bg_video { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; pointer-events: none; } #header_slider .bg_youtube { width:100%; height:100%; max-width: none; position:absolute; top:0; left:0; pointer-events: none; } #header_slider .overlay { width:100%; height:100%; position:absolute; top:0; left:0; z-index:5; } /* 実績 */ #index_achievements { color:#fff; height:226px; width:100%; border-top:1px solid rgba(255,255,255,0.3); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:absolute; bottom:0; left:0; z-index:10; text-align:center; } #header_slider_wrap.no_header_news #index_achievements { height:200px; } #index_achievements .content { position:relative; top:-18px; } #header_slider_wrap.no_header_news #index_achievements .content { top:0; } #index_achievements .headline { font-size:18px; margin:0 0 10px 0; line-height:1; } #index_achievements .num_area { line-height:1; font-family:'Arial'; } #index_achievements .num { font-size:60px; font-weight:600; } #index_achievements .unit { font-size:22px; font-weight:600; } #index_achievements .desc { font-size:16px; margin:12px 0 0 0 !important; line-height:1 !important; } #index_achievements .content { opacity:0; } #header_slider_wrap.start_slide #index_achievements .content { opacity:1; transition: opacity 1.0s ease 1.0s; } #header_slider_wrap.catch_animation_type2.start_slide #index_achievements .content { opacity:1; transition: opacity 1.0s ease 1.5s; } /* ニュースティッカー */ #news_ticker { background:#fff; width:650px; height:80px; border-radius:80px; box-shadow:0 0 10px 0 rgba(0,0,0,0.2); position:relative; top:-40px; margin-bottom:-40px; z-index:10; } #news_ticker:before { content:''; width:100%; height:30px; background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%); position:absolute; top:0; left:0; z-index:2; pointer-events:none; } #news_ticker:after { content:''; width:100%; height:30px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); position:absolute; bottom:0; left:0; z-index:2; pointer-events:none; } #news_ticker .post_list { } #news_ticker a { padding:0 40px; display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; width:100%;flex-direction: unset; } #news_ticker .date { font-size:14px; color:#999; width:110px; flex: 0 0 110px; display:block; position:relative; padding-left:20px; font-family: 'Arial';;} #news_ticker .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; position:absolute; left:0; margin-top:-1px; top:50%; transform: translateY(-50%); -webkit-font-smoothing: antialiased; } #news_ticker .title { transition: color 0.25s ease; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible; } body.hide_blog_date #news_ticker.post_type_post .date { display:none; } /* ---------------------------------------------------------------------- コンテンツビルダー ---------------------------------------------------------------------- */ #content_builder .design_header { width:800px; margin:-10px auto 55px; } #content_builder .link_button { text-align:center; margin-top:70px; } .cb_white_bg { padding:120px 0; } .cb_white_bg + .cb_white_bg { padding-top:0; } /* デザインカルーセル */ .cb_design_carousel { } .cb_image_slider_wrap { display:flex; flex-wrap:nowrap; overflow:hidden; } .cb_image_slider .item { width:310px; height:570px; position:relative; overflow:hidden; flex: 0 0 310px; margin:0 50px 0 0; } .cb_image_slider .image { width:100%; height:440px; border-radius:15px; position:absolute; top:0; left:0; overflow:hidden; } .cb_image_slider .item:nth-child(even) .image { top:auto; bottom:0; } .cb_image_slider img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } .cb_image_slider .title { position:absolute; top:475px; width:100%; text-align:center; font-size:18px; line-height:1.8; max-height:3.6em; overflow:hidden; visibility:visible; display:block; } .cb_image_slider .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .cb_image_slider .item:nth-child(even) .title { top:auto; bottom:475px; } .cb_image_slider { display:flex; flex-wrap:nowrap; transform: translate3d(0, 0, 0); } .cb_image_slider:first-child { animation: image_carousel_animation1 90s linear infinite; } .cb_image_slider:nth-child(2) { animation: image_carousel_animation2 90s -60s linear infinite; } .cb_image_slider:last-child { animation: image_carousel_animation3 90s -30s linear infinite; } @keyframes image_carousel_animation1 { 0% { transform: translate3d(200%, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } } @keyframes image_carousel_animation2 { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d(-200%, 0, 0); } } @keyframes image_carousel_animation3 { 0% { transform: translate3d(0%, 0, 0); } 100% { transform: translate3d(-300%, 0, 0); } } /* セールスポイント */ .cb_selling_point:first-of-type { margin-top:-81px; position:relative; } .cb_selling_point:first-of-type .cb_design_header { padding-top:150px; } #header_slider_wrap.no_header_news + #content_builder .cb_selling_point:first-of-type { margin-top:0px; } #header_slider_wrap.no_header_news + #content_builder .cb_selling_point:first-of-type .cb_design_header { padding-top:120px; } .sp_content_wrap { display:flex; flex-wrap:nowrap; overflow:hidden; width:100%; min-height:500px; position:relative; } .sp_content { position:relative; overflow:hidden; width:100%; flex: 0 0 auto; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s; transform: translate3d(0,0,0); } .sp_content_wrap.active .sp_content { transform: translate3d(-100%,0,0); } .sp_content_inner { width:1030px; min-height:500px; height:100%; padding:50px 0; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position:relative; z-index:3; } .sp_content:nth-child(2) .sp_content_inner .main_content, .sp_content:nth-child(2) .sp_content_inner .sub_content { /*display:none;*/ opacity:0; } .sp_content:nth-child(2) .sp_content_inner .main_content.active, .sp_content:nth-child(2) .sp_content_inner .sub_content.active { animation: display_animation 0.75s ease forwards 0s; } @keyframes display_animation { 0% { opacity:0; } 100% { opacity:1; } } .sp_content.position_type2 .sp_content_inner { flex-direction:row-reverse; } .sp_content.position_type3 .sp_content_inner { justify-content:center; } .sp_content .main_content { width:calc(50% - 30px); } .sp_content .main_content .point { font-weight:600; width:100px; height:100px; background:#000; border-radius:100%; color:#fff; font-family:'Arial';display:flex; flex-direction:column; justify-content:center; text-align:center; margin:0 0 35px 0; } .sp_content .main_content .point .label { font-size:16px; margin-top:10px; } .sp_content .main_content .point .num { font-size:24px; margin-top:7px; } .sp_content .main_content .catch { font-size:28px; line-height:1.6; margin:0 0 20px 0; padding:0; } .sp_content .main_content .desc { font-size:18px; line-height:2.4; } .sp_content .main_content .design_button { margin-top:30px; } .sp_content .main_content .design_button:hover { color:#fff !important; } .sp_content .main_content .catch + .design_button { margin-top:0; } .sp_content.layout_type1 .main_content .catch, .sp_content.layout_type1 .main_content .desc { color:#fff; } .sp_content.layout_type1 .main_content .design_button { border-color:#fff; color:#fff; } .sp_content .sub_content { width:calc(50% - 30px); } .sp_content .sub_content img { max-width:100%; height:auto; } .sp_content.position_type1 .sub_content { text-align:right; } .sp_content .chart { width:auto; display:inline-block; } .sp_content .tcd_chart { margin:auto; } .sp_content .bg_image { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:block; margin:0; } .sp_content .bg_image img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } .sp_content .bg_image.mobile { display:none; } .sp_content .overlay { position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; } .sp_content.layout_type1.position_type3 .main_content { text-align:center; } .sp_content.layout_type1.position_type3 .main_content .point { margin:0 auto 35px; } .sp_content .switch { position:absolute; width:50px; height:50px; top:50%; transform: translateY(-50%); right:40px; cursor:pointer; z-index:10; } .sp_content:nth-child(2) .switch { right:auto; left:40px; } .sp_content .switch:before { font-family:'design_plus'; font-size:33px; top:12px; position:relative; color:#000; transition: transform 0.3s ease; transform:scale(1); display:block; transform-origin:10px; -webkit-font-smoothing: antialiased; } .sp_content.layout_type1 .switch:before { color:#fff; } .sp_content .switch:before { content:'\e910'; left:12px; } .sp_content:nth-child(2) .switch:before { content:'\e90f'; left:12px; } .sp_content_wrap:not(.display_two_content) .switch { display:none; } .sp_content .switch.mobile { display:none; } @media(hover: hover) { .sp_content .switch:hover:before { transform:scale(1.2); } } /* サービスカテゴリー一覧 */ .cb_service_category { } /* 事例一覧 */ .cb_case_study_slider_wrap { position:relative; width:1030px; margin:0 auto; } .cb_case_study_slider { position:relative; border-bottom:1px solid #ddd; } #content_builder .case_study_list { } #content_builder .case_study_list .item { margin:0; border-bottom:none; } #content_builder .case_study_list .item:nth-child(2n) { border-right:none; } .cb_case_study_slider:before { content:''; display:block; width:1px; height:156px; position:absolute; top:0; left:0; background:#ddd; z-index:2; } .cb_case_study_slider:after { content:''; display:block; width:1px; height:156px; position:absolute; top:0; right:0; background:#ddd; z-index:2; } .cb_case_study_slider.show_date:before { height:180px; } .cb_case_study_slider.show_date:after { height:180px; } .cb_case_study_slider_wrap:before { content:''; display:block; width:1px; height:70px; position:absolute; bottom:0; left:0; background:#ddd; z-index:2; } .cb_case_study_slider_wrap:after { content:''; display:block; width:1px; height:70px; position:absolute; bottom:0; right:0; background:#ddd; z-index:2; } .cb_case_study_slider_wrap.one_item:before, .cb_case_study_slider_wrap.one_item:after { display:none; } .cb_case_study_slider_wrap.one_item .cb_case_study_slider:after, .cb_case_study_slider_wrap.one_item .cb_case_study_slider:before { display:none; } .cb_case_study_slider_wrap.one_item .cb_case_study_slider { border-bottom:none; } .cb_case_study_slider_wrap.one_item .item { border-bottom:1px solid #ddd !important; } .cb_case_study_list .swiper-pagination { position:relative; bottom:auto; margin-top:50px; } .cb_case_study_list .swiper-pagination span { background:#ddd; width:14px; height:14px; opacity:1; margin:0 6px !important; } .cb_case_study_list .swiper-pagination span.swiper-pagination-bullet-active { background:#000; pointer-events:none; } #content_builder .cb_case_study_list .link_button { margin-top:50px; } @media(hover: hover) { .cb_case_study_list .swiper-pagination span:hover { background:var(--main_color); } } /* ブログ一覧 */ .cb_blog_list_slider { overflow:visible; } .cb_blog_list .blog_list .item { transform:none; height:auto; display: block;} @media screen and (min-width:801px) { .cb_blog_list .blog_list { transform:none !important; } } /* お知らせ一覧 */ .cb_news_list_slider { overflow:visible; } .cb_news_list .news_list { width:1030px; margin:0 auto 1px !important; } .cb_news_list .news_list .item { transform:none; height:auto; } @media screen and (min-width:801px) { .cb_news_list .news_list { transform:none !important; } } /* フリースペース */ .cb_free_space { padding:120px 0; position:relative; } .cb_free_space:first-of-type { margin-top:-81px; padding-top:160px; } #header_slider_wrap.no_header_news + #content_builder .cb_free_space:first-of-type { margin-top:0px; padding-top:120px; } .cb_free_space .post_content { width:1030px; margin:0 auto; } .cb_free_space.wide_content .post_content { width:auto; padding:0; } /* 固定ページを表示する場合 */ #front_page_contents { margin:0 auto; padding:150px 0; } /* ---------------------------------------------------------------------- 固定ページ ---------------------------------------------------------------------- */ #page_contents { width:1030px; margin:0 auto; padding:110px 0 140px; } body.normal_page_width #page_contents { width:800px; } body.normal_page_width #bread_crumb ul { width:800px; } @media screen and (min-width:1201px) { #page_contents.no_page_header { padding:240px 0 140px; } #page_contents.no_page_header.no_page_header_bar { padding:110px 0 140px; } #page_contents.no_page_header .catch{ margin-bottom:100px; } } /* サービスの特徴 */ .short_width_content { padding:0 125px; } .short_width_content + .q_button_wrap { margin-top:105px; } .featured_chart_area { display:flex; flex-wrap:wrap; align-items:center; background:#f6f6f6; margin-bottom:55px; } .featured_chart_area .tcd_chart { width:50%; margin:0; } .featured_chart_area .image { width:50%; } .featured_chart_area .image img { display:block; } .featured_image_area { display:flex; flex-wrap:wrap; margin-bottom:55px; background:var(--main_color); } .featured_image_area .image { width:50%; position:relative; } .featured_image_area .image img { display:block; } .featured_image_area .desc { width:50%; display:flex; flex-direction:column; justify-content:center; color:#fff; padding:0 70px; } .featured_image_area .desc p { line-height:2; font-size:22px; font-weight:600; } /* LPページ */ #lp_page_header { width:100%; height:500px; position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:0 100px; } #lp_page_header .catch { color:#fff; text-align:center; z-index:3; line-height:1.6; } #lp_page_header .catch .mobile { display:none; } #lp_page_header .overlay { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:2; } #lp_page_header .bg_image { width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:1; display:block; margin:0; } #lp_page_header .bg_image img { position:absolute; top:0; left:0; width:100%; height:100%; display:block; margin:0; object-fit:cover; } /* LPページのフォーム */ .design_form { background:#f3f3f3; padding:100px 50px; margin:55px 0 55px 0; } .design_form:last-child { margin-bottom:0; } .design_form .content { width:450px; margin:0 auto; } .design_form .headline { font-size:26px; margin:0 0 35px 0; } .design_form .input_field { background:#fff; border:none; width:100%; max-width:100%; height:50px; padding:0 20px; margin:0; } .design_form .email { margin-bottom:40px; } .design_form .password { margin-bottom:40px; } .design_form .submit { text-align:center; position:relative; } .design_form .submit .button { width:300px; height:70px; line-height:70px; border:none; background:#000; color:#fff; font-size:16px; margin:0; cursor:pointer; transition: all 0.25s ease; } @media(hover: hover) { .design_form .submit .button:hover { background:var(--main_color); } } .design_form .receive_email { margin-bottom:32px; } .design_form .privacy_policy { margin-bottom:35px; } label.design_checkbox input { position:absolute; top:7px; } label.design_checkbox { cursor:pointer; display:flex; position:relative; line-height:2; text-align:left; } label.design_checkbox input:checked + .check::before { content: ""; display: block; position: absolute; transform:rotateZ(-135deg); transform-origin: 2px 2px; background: #000; top:11px; left:7px; width: 6px; height: 2px; } label.design_checkbox input:checked + .check::after { content: ""; display: block; position: absolute; transform:rotateZ(-45deg); transform-origin: 2px 2px; background: #000; top:12px; left:9px; width: 10px; height: 2px; } label.design_checkbox .check { position:relative; margin-right:8px; top:2px; left:0px; transition: border-color 0.25s ease; display: block; width: 22px; height: 22px; border:1px solid #ccc; background:#fff; } @media(hover: hover) { label.design_checkbox input:hover + .check { border-color:#999; } } label.design_checkbox .text { font-size:14px; } .design_form .wpcf7 { width:100%; margin:0 !important; border:none; background:none; } .design_form .wpcf7 form { margin:0 !important; } .design_form .wpcf7 input, .design_form .wpcf7 textarea { padding:5px 20px; border:none !important; line-height:inherit; } .design_form .wpcf7 .wpcf7-submit, .design_form .wpcf7 .wpcf7-previous { width:300px; height:70px; margin:30px auto 0; background-color:#000; font-size:16px; } @media(hover: hover) { .design_form .wpcf7 .wpcf7-submit:hover, .design_form .wpcf7 .wpcf7-previous:hover { background:var(--main_color); } } .design_form .checkbox_area { margin:0 0 20px 0; } .design_form .checkbox_area .wpcf7-list-item { margin:0; } .design_form .wpcf7-not-valid-tip { line-height:2; margin:10px 0 -20px 0 !important; display:block; font-size:14px; font-weight:600; } .design_form .wpcf7-spinner { position:absolute !important; top:15px; left:calc(50% - 35px); background:var(--main_color_dark); opacity:1; } .design_form .wpcf7 form .wpcf7-response-output{ margin:30px 140px 0; line-height:2; } .design_form .wpcf7 .submit p { position:relative; } /* デザイン見出し */ .design_header.featured_page { margin-bottom:105px; } /* プランの機能一覧 */ .design_list1 .s_table { margin:0 0 70px 0 !important; } .post_content .design_list1 table { table-layout:fixed !important; width:100% !important; } .design_list1 th:nth-child(1) { width:330px; } .design_list1 th:nth-child(2), .design_list1 th:nth-child(3), .design_list1 th:nth-child(4) { width:calc((100% - 330px) / 3); } .design_list1 td:nth-child(2), .design_list1 td:nth-child(3), .design_list1 td:nth-child(4) { text-align:center; } .design_list1 table { border:none !important; } .design_list1 th, .design_list1 td { border-color:rgba(255,255,255,0.5) !important; } .design_list1 th { background:#238c00 !important; color:#fff; font-weight:600 !important; } .design_list1.type_red th { background:#d93600 !important; } .design_list1.type_blue_greem th { background:#008c8c !important; } .design_list1 th:nth-child(1) { text-align:left; font-size:20px; } .design_list1 tr:nth-child(even) td { background:#f6f6f6 !important; } /* LPページ */ .lp_header_desc, .tcdce-body .lp_header_desc { text-align:center; margin-bottom:110px; font-size:18px; font-weight:600; } .lp_headline, .tcdce-body .lp_headline { text-align:center; font-size:36px !important; font-weight:600 !important; color:var(--main_color); margin:95px 0 45px 0 !important; } .lp_image, .tcdce-body .lp_image { margin-bottom:55px; text-align:center; } .lp_headline + .lp_image { margin-top:55px; } .tcd_chart + .lp_headline { margin-top:105px !important; } /* FAQ */ .ajax_post_list_wrap .faq_list.item { padding-bottom:30px; } .faq_list { } .faq_list.item { } .faq_list .question { cursor: pointer; } .faq_list .question:after { content:'\e90e'; font-family:'design_plus'; margin-left: auto; font-size:14px; -webkit-font-smoothing: antialiased; } .faq_list .question.active:after { content:'\e911'; } .faq_content .faq_list .question .title { font-size:24px; width:calc(100% - 100px); } .faq_list .desc_area { height:0; overflow:hidden; transition:height 0.2s cubic-bezier(0.54, 0.07, 0.38, 0.9); width: calc(100% + 140px); margin-left: -70px; } .faq_list .question + .desc_area > .desc { padding-bottom:30px; width: calc(100% - 140px); margin-left: 70px; } .ajax_post_list_wrap .faq_list.item:last-of-type .desc { padding-bottom:0; } .faq_list .question.active { color:var(--main_color); } @media(hover: hover) { .faq_list .question:hover { color:var(--main_color); } } .faq_list .question.active:after { } .faq_list .question.active + .desc_area > .desc { opacity:1; transition:opacity 1s ease; } @media (max-width: 800px) { .ajax_post_list_wrap .faq_list.item { padding-bottom:0; } .faq_list { } .faq_list .question { } .faq_list .question:after { } .faq_list .question.active:after { } .faq_content .faq_list .question .title { font-size:16px; } .faq_list .desc_area { width:calc(100% + 40px); margin-left:-20px; } .faq_list .question + .desc_area > .desc { padding-bottom: 25px; width:calc(100% - 40px); margin-left:20px; } .faq_list .desc { } } /* sc FAQ */ .sc_faq_list { width:100%; max-width:100%; margin:0 auto 35px; } .sc_faq_list .headline { font-size:24px; color:#7ea0c8; margin-bottom:45px; padding:0; text-align:center; } .sc_faq_list .item { border:1px solid #ddd; margin:0 0 -1px 0; position:relative; background:#fff; } .sc_faq_list .title { cursor: pointer; margin:0; font-weight:500; font-size:16px; line-height:1.8; padding:27px 40px 25px 30px; margin-bottom:0; position:relative; transition:color 0.4s ease; } .sc_faq_list .title span { display:block; margin:-0.4em 0; } .sc_faq_list .title:before { content:'\e90e'; font-family:'design_plus'; display:block; position:absolute; top:25px; right:30px; font-size:14px; -webkit-font-smoothing: antialiased; } .sc_faq_list .title.active:before { content:'\e911'; } .sc_faq_list .desc_area { height:0; overflow:hidden; transition:height 0.2s cubic-bezier(0.54, 0.07, 0.38, 0.9); } .sc_faq_list .desc { font-size:16px; line-height:2.6; padding:20px 30px; border-top:1px solid #ddd; background:#f8f8f8; transition:opacity 0.7s ease; opacity:0; } .sc_faq_list .desc span { display:block; } .sc_faq_list .title.active { color:var(--main_color); } @media(hover: hover) { .sc_faq_list .title:hover { color:var(--main_color); } } .sc_faq_list .title.active:before { height:0; } .sc_faq_list .title.active + .desc_area > .desc { opacity:1; transition:opacity 1s ease; } @media (max-width: 800px) { .sc_faq_list { } .sc_faq_list .title { font-size:14px; padding:20px 50px 18px 20px; } .sc_faq_list .title:before { top:calc(50% + 5px); transform: translateY(-50%); right:20px; } .sc_faq_list .title.active:before { top:calc(50% - 10px); } .sc_faq_list .desc { padding:20px; font-size:14px; line-height:2; } } /* ---------------------------------------------------------------------- 事例アーカイブページ ---------------------------------------------------------------------- */ #archive_case_study { position:relative; width:1030px; margin:0 auto; padding:120px 0 150px; } body.tax-case_study_category #archive_case_study { padding-bottom:120px; } #archive_case_study .case_study_list { display:flex; flex-wrap:wrap; } .case_study_list .item { display:block; width:50%; border:1px solid #ddd; border-right:none; margin:0 0 -1px 0; position:relative; background:#fff; } .case_study_list .item:nth-child(2n), .case_study_list .item:last-of-type { border-right:1px solid #ddd; } .case_study_list .item:nth-child(odd):last-of-type { width:calc(50% + 1px); } .case_study_list .animate_background { display:block; } .case_study_list .image_wrap { margin:0 -1px; width:calc(100% + 2px); height:auto; max-height:320px; aspect-ratio:515 / 320; position:relative; overflow:hidden; z-index:2; } .case_study_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } .case_study_list .category { position:absolute; top:156px; left:-1px; color:#fff; min-width:110px; height:40px; line-height:40px; display:inline-block; padding:0 25px; text-align:center; font-size:12px; z-index:2; } .case_study_list.show_date .item .category { top:180px; } .case_study_list .title_area { padding:0 50px; height:156px; display:flex; flex-direction:column; justify-content:center; } .case_study_list.show_date .item .title_area { height:180px; } .case_study_list .title { font-size:20px; line-height:1.8; max-height:3.6em; overflow:hidden; visibility:visible; display:block; } .case_study_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .case_study_list .meta { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:0 40px; height:70px; } .case_study_list .meta ul { display:flex; flex-wrap:wrap; justify-content:center;} .case_study_list .meta li { margin:3px 10px; line-height:1; color:#000; } .case_study_list .meta .job { color:var(--main_color); } .case_study_list .date { position:relative; color:#999; font-size:14px;display:block; margin:0 0 10px 0; font-family: 'Arial';} .case_study_list .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------------- 事例詳細ページ ---------------------------------------------------------------------- */ #single_case { width:800px; margin:0 auto; padding:120px 0 120px; } body.single-case_study #bread_crumb ul { width:800px; } #single_case_header { border:1px solid #ddd; display:flex; flex-wrap:nowrap; padding:15px; margin-bottom:42px; } #single_case_header .category { margin:0 20px -4px 0; } #single_case_header .category a { margin-bottom:4px; color:#fff; min-width:110px; height:40px; line-height:40px; display:inline-block; padding:0 25px; text-align:center; font-size:12px; } #single_case_header .meta { flex: 0 1 auto; display:flex; flex-wrap:wrap; align-items:center; line-height:1.4; } #single_case_header .job { color:var(--main_color); margin-right:20px; } #single_case_title_area { margin-bottom:60px; } #single_case_title_area .title { font-size:32px; line-height:1.5; font-family:var(--single_post_title_font_family); font-weight:600; } #single_case_title_area .image { width:100%; aspect-ratio:800 / 500; position:relative; overflow:hidden; margin-top:42px; } #single_case_title_area .image img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } #single_case_title_area .date { position:relative; color:#999; font-size:14px;display:block; margin:0 15px 20px 0; font-family: 'Arial';} #single_case_title_area .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } .case_study_catch { color:var(--main_color); font-size:28px !important; margin:50px 0 50px 0 !important; padding:0 !important; } .case_study_info_wrap { margin:60px 0; } .case_study_info_wrap:last-child { margin-top:105px; } .case_study_info { background:#f6f6f6; padding:60px 60px 50px; } .case_study_info dl { display:flex; flex-wrap:wrap; } .case_study_info dt { width:170px; margin:0; font-weight:500 !important; } .case_study_info dd { width:calc(100% - 170px); margin:0; } /* 導入事例 */ #related_case { margin:120px 0 0 0; position:relative; } #related_case .headline { line-height:1; font-size:30px; text-align:center; margin-bottom:70px; } #related_case .post_list { } #case_study_slider { position:relative; border-bottom:1px solid #ddd; overflow:hidden; } #related_case.one_item #case_study_slider { border-bottom:none; } #case_study_slider:before { content:''; display:block; width:1px; height:201px; background:#ddd; position:absolute; left:0; bottom:0; z-index:2; } #case_study_slider:after { content:''; display:block; width:1px; height:201px; background:#ddd; position:absolute; right:0; bottom:0; z-index:2; } #related_case.one_item #case_study_slider:after { display:none; } #related_case .post_list .item { display:block; width:50%; margin:0; position:relative; } #related_case.one_item .post_list .item { border-bottom:1px solid #ddd; } #related_case .post_list .image_link { display:block; } #related_case .post_list .image_wrap { margin:0; width:100%; height:auto; aspect-ratio:480 / 306; position:relative; overflow:hidden; z-index:2; } #related_case .post_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #related_case .post_list .category { position:absolute; top:0; left:0px; color:#fff; min-width:110px; height:40px; line-height:40px; display:inline-block; padding:0 25px; text-align:center; font-size:12px; z-index:2; } #related_case .post_list .title { font-size:18px; line-height:1.8; padding:0 40px; height:130px; border-right:1px solid #ddd; display:flex; flex-direction:column; justify-content:center; } #related_case .post_list .title a { max-height:3.6em; overflow:hidden; visibility:visible; display:block; } #related_case .post_list .title a span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #related_case .post_list .meta { border-top:1px solid #ddd; border-right:1px solid #ddd; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:0 40px; height:70px; } #related_case .post_list .meta ul { display:flex; flex-wrap:wrap; justify-content:center;} #related_case .post_list .meta li { margin:3px 10px; line-height:1; } #related_case .post_list .meta .job { color:var(--main_color); } #related_case .post_list .date { position:relative; color:#999; font-size:14px;display:block; margin:0 0 0px 0; font-weight:500; font-family: 'Arial';} #related_case .post_list .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } #related_case .swiper-pagination { position:relative; bottom:auto; margin-top:50px; } #related_case .swiper-pagination span { background:#ddd; width:14px; height:14px; opacity:1; margin:0 6px; } #related_case .swiper-pagination span.swiper-pagination-bullet-active { background:#000; pointer-events:none; } @media(hover: hover) { #related_case .swiper-pagination span:hover { background:var(--main_color); } } /* 事例カテゴリー一覧 */ #case_study_category_list_area { background:#f6f6f6; padding:120px 0; position:relative; overflow:hidden; } #case_study_category_list_slider_wrap { position:relative; width:1029px; margin:0 auto; z-index:3; } #case_study_category_list_slider_wrap:after { content:''; display:block; width:1px; height:calc(100% - 180px); background:#ddd; position:absolute; right:0; bottom:0; z-index:2; } #case_study_category_list .item { width:calc(100% / 3 + 1px); display:block; transition: all 0.25s ease; background:#fff; align-self:stretch; height:auto; border:1px solid #ddd; margin:0 -1px 0 0; } #case_study_category_list .catch_area { color:#fff; text-align:center; padding:0 35px; height:180px; display:flex; flex-direction:column; justify-content:center; margin:0 -1px; transition: background-color 0.25s ease; } #case_study_category_list .headline { font-size:30px; line-height:1.2; } #case_study_category_list .headline + .catch { margin-top:10px; line-height:1.6; font-weight:500; } #case_study_category_list .desc { color:#000; padding:30px 35px; line-height:2; } #case_study_category_list .desc_inner { max-height:6em; overflow:hidden; visibility:visible; } #case_study_category_list .desc_inner p { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } #case_study_category_list .desc_inner p br { display:none; } #case_study_category_list_slider_wrap .swiper-button-next { right:-60px; } #case_study_category_list_slider_wrap .swiper-button-prev { left:-60px; } #case_study_category_list_slider_wrap .swiper-nav-button { background:none; border:none; } #case_study_category_list_slider_wrap .swiper-button-next:before, #case_study_category_list_slider_wrap .swiper-button-prev:before { font-size:22px; } #case_study_category_list_slider_wrap.one_item #case_study_category_list { justify-content:center; } #case_study_category_list_slider_wrap.one_item:after { display:none; } #case_study_category_list_slider_wrap.two_item #case_study_category_list { justify-content:center; } #case_study_category_list_slider_wrap.two_item:after { display:none; } /* ---------------------------------------------------------------------- サービスアーカイブページ ---------------------------------------------------------------------- */ /* カテゴリー一覧 */ #service_category_list .desc { text-align:center; line-height:2.4; margin:0; font-size:18px; } #service_category_list .desc.mobile { display:none; } #service_category_list { background:#f6f6f6; padding:120px 0; } body.no_header_image #service_category_list { margin-top:120px; } #service_category_list.service_list_type3 { padding-bottom:150px; } #service_category_list .desc + #service_icon_list_type1 { margin-top:55px; } #service_category_list .desc + #service_icon_list_type2 { margin-top:55px; } /* アイコン記事一覧　タイプ１ */ #service_icon_list_type1 { width:1030px; margin:0 auto; display:flex; flex-wrap:wrap; } #service_icon_list_type1.short_size { justify-content:center; } #service_icon_list_type1 li { width:calc(20% + 1px); height:auto; margin:0 -1px -1px 0; aspect-ratio:1 /1; } #service_icon_list_type1 a { border:1px solid #ddd; background:#fff; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 30px; transition: all 0.25s ease; position:relative; z-index:1; } #service_icon_list_type1 li a:after { color:#fff; font-family:'design_plus'; content:'\e90e'; font-size:16px; display:block; width:16px; position:absolute; bottom:19px; left:50%; transform: translate(-50%, -10px); -webkit-font-smoothing: antialiased; transition: all 0.25s ease; } #service_icon_list_type1 li a:hover:after { transform: translate(-50%, 0); transition: all 0.25s ease 0.2s; } body.home #service_icon_list_type1 li a:after, body.single-service #service_icon_list_type1 li a:after, .service_list_type3 #service_icon_list_type1 li a:after { display:none; } #service_icon_list_type1 .catch { font-size:16px; line-height:1.8; font-weight:600; max-height:3.6em; overflow:hidden; visibility:visible; } #service_icon_list_type1 .catch span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #service_icon_list_type1 .icon { color:var(--main_color); font-family: 'Material Symbols Rounded'; font-weight: 100; font-style: normal; font-size: 55px; margin-bottom:10px; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } #service_icon_list_type1 .icon img { max-width:40px; height:auto; display:block; margin:7px 0 6px; } @media(hover: hover) { #service_icon_list_type1 li a:hover { color:var(--main_color); transform:scale(1.2); z-index:10; position:relative; box-shadow:0 0 10px 4px rgba(100,100,100,0.1); } #service_icon_list_type1 li a:hover:after { color:var(--main_color); } #service_icon_list_type1 a:hover { color:var(--main_color); } } /* アイコン記事一覧　タイプ２ */ #service_icon_list_type2 { width:1030px; margin:0 auto; display:flex; flex-wrap:wrap; } #service_icon_list_type2.short_size { justify-content:center; } #service_icon_list_type2 li { width:calc(100% / 7 + 1px); height:auto; aspect-ratio:1 /1; margin:0 -1px -1px 0; } #service_icon_list_type2 a { border:1px solid #ddd; background:#fff; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:0 20px; transition: all 0.3s ease; position:relative; z-index:1; } #service_icon_list_type2 li a:after { color:#fff; font-family:'design_plus'; content:'\e90e'; font-size:14px; display:block; width:16px; position:absolute; bottom:5px; left:50%; transform: translate(-50%, -10px); -webkit-font-smoothing: antialiased; transition: all 0.25s ease; } #service_icon_list_type2 li a:hover:after { transform: translate(-50%, 0); transition: all 0.25s ease 0.2s; } body.home #service_icon_list_type2 li a:after, body.single #service_icon_list_type2 li a:after, .service_list_type3 #service_icon_list_type2 li a:after { display:none; } #service_icon_list_type2 .title { font-size:14px; line-height:1.3; } #service_icon_list_type2 .icon { color:var(--main_color); font-family: 'Material Symbols Rounded'; font-weight: 100; font-style: normal; font-size: 50px; margin-bottom:10px; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } #service_icon_list_type2 .icon img { max-width:40px; height:auto; display:block; margin:7px 0 6px; } @media(hover: hover) { #service_icon_list_type2 a:hover { color:var(--main_color); } #service_icon_list_type2 li a:hover { color:var(--main_color); transform:scale(1.1); z-index:10; position:relative; box-shadow:0 0 10px 4px rgba(100,100,100,0.1); } #service_icon_list_type2 li a:hover:after { color:var(--main_color); } } /* 記事一覧 */ #archive_service { margin:0 auto; padding:120px 0 0; } #archive_service.type4 { padding-bottom:150px; } /* 記事一覧　タイプ１ */ #service_list_type1 .item { border-bottom:1px solid #ddd; padding-bottom:120px; margin-bottom:110px; } #service_list_type1 .item:last-of-type { border:none; margin-bottom:0; } body.no_icon_list #service_list_type1 .item:last-of-type { padding-bottom:0; } #service_list_type1 .title { line-height:1.5; text-align:center; margin:0 0 55px 0; } #service_list_type1 .title a { display:block; } #service_list_type1 .content { width:1030px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } #service_list_type1 .item:nth-child(odd) .content { flex-direction:row-reverse; } #service_list_type1 .image_link { width:calc(50% - 40px); height:auto; aspect-ratio:480 / 300; display:block; position:relative; z-index:1; overflow:hidden; border-radius:10px; } #service_list_type1 .image_wrap { width:100%; height:100%; position:relative; overflow:hidden; z-index:2; } #service_list_type1 .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #service_list_type1 .desc { font-size:18px; width:calc(50% - 40px); display:block; line-height:2.4; max-height:7.2em; overflow:hidden; visibility:visible; } #service_list_type1 .desc span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } #service_list_type1 .link_button { text-align:center; margin-top:70px; } /* 記事一覧　タイプ２ */ #service_list_type2 { width:1030px; margin:0 auto 120px; } #service_list_type2 .item { margin-bottom:100px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; } #service_list_type2 .item:last-of-type { margin:0; } body.home #service_list_type2 { margin-bottom:70px; } body.home #service_list_type2 .item { margin-bottom:70px; } body.no_icon_list #service_list_type2 .item:last-of-type { padding-bottom:0; } #service_list_type2 .title { line-height:1.5; margin:0 0 20px 0; } #service_list_type2 .title a { display:block; } #service_list_type2 .content { width:calc(50% - 35px); } #service_list_type2 .image_link { width:calc(50% - 35px); height:auto; aspect-ratio:480 / 300; display:block; position:relative; z-index:1; overflow:hidden; border-radius:10px; } #service_list_type2 .image_wrap { width:100%; height:100%; position:relative; overflow:hidden; z-index:2; } #service_list_type2 .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #service_list_type2 .desc { display:block; line-height:2.4; max-height:7.2em; overflow:hidden; visibility:visible; } #service_list_type2 .desc span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } #service_list_type2 .link { margin-top:30px; display:block; color:var(--main_color); font-weight:600; font-size:18px; } @media(hover: hover) { #service_list_type2 .link:hover { color:var(--main_color_dark); } } /* ---------------------------------------------------------------------- サービス詳細ページ ---------------------------------------------------------------------- */ #single_service { width:800px; margin:0 auto; padding:120px 0 120px; } body.no_icon_list #single_service { padding-bottom:110px; } body.single-service #bread_crumb ul { width:800px; } #single_service_title_area { margin-bottom:35px; } #single_service_title_area .title { font-size:32px; line-height:1.5; text-align:center; font-family:var(--single_post_title_font_family); font-weight:600; } #single_service_title_area .featured_image { } #single_service_title_area .featured_image { margin-top:40px; margin-bottom:40px; width:100%; height:auto; aspect-ratio:800 / 500; position:relative; overflow:hidden; border-radius:15px; } #single_service_title_area .featured_image img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } .service_headline, .tcdce-body .service_headline { color:var(--main_color); font-size:28px !important; margin:55px 0 !important; padding:0 !important; } .service_image_list { display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:55px; } .service_image_list .image { flex: 1 1 0%; margin:0 30px 0 0; } .service_image_list .image:last-of-type { margin:0; } /* 画像スライダー */ #service_image_carousel_wrap { overflow:visible; margin-top:40px; } #service_image_carousel { -webkit-user-select:none; user-select:none; } #service_image_carousel .item { width:100%; height:auto; aspect-ratio:800 / 500; position:relative; overflow:hidden; border-radius:15px; margin:0 50px 0 0; } #service_image_carousel .item:last-of-type { margin-right:0; } #service_image_carousel .item img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } #service_image_carousel_wrap .swiper-pagination { position:relative; bottom:auto; margin-top:50px; } #service_image_carousel_wrap .swiper-pagination span { background:#ddd; width:14px; height:14px; opacity:1; margin:0 6px; } #service_image_carousel_wrap .swiper-pagination span.swiper-pagination-bullet-active { background:#000; pointer-events:none; } @media(hover: hover) { #service_image_carousel_wrap .swiper-pagination span:hover { background:var(--main_color); } } /* カテゴリー一覧 */ #single_service_icon_list { background:#f6f6f6; padding:120px 0; } /* カルーセル */ #related_service { margin:-10px auto 120px; position:relative; width:800px; } #related_service .headline { line-height:1; font-size:30px; text-align:center; margin-bottom:70px; } #related_service .post_list { } #related_service_slider { position:relative; border-bottom:1px solid #ddd; overflow:hidden; } #related_service.one_item #related_service_slider { border-bottom:none; } #related_service_slider:before { content:''; display:block; width:1px; height:201px; background:#ddd; position:absolute; left:0; bottom:0; z-index:2; } #related_service_slider:after { content:''; display:block; width:1px; height:201px; background:#ddd; position:absolute; right:0; bottom:0; z-index:2; } #related_service.one_item #related_service_slider:after { display:none; } #related_service .post_list .item { display:block; width:50%; margin:0; position:relative; } #related_service.one_item .post_list .item { border-bottom:1px solid #ddd; } #related_service .post_list .image_link { display:block; } #related_service .post_list .image_wrap { margin:0; width:100%; height:auto; aspect-ratio:480 / 306; position:relative; overflow:hidden; z-index:2; } #related_service .post_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #related_service .post_list .title { font-size:18px; line-height:1.8; padding:0 40px; height:130px; border-right:1px solid #ddd; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } #related_service .post_list .title a { max-height:3.6em; overflow:hidden; visibility:visible; display:block; } #related_service .post_list .title a span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #related_service .swiper-pagination { position:relative; bottom:auto; margin-top:50px; } #related_service .swiper-pagination span { background:#aaa; width:14px; height:14px; opacity:1; } #related_service .swiper-pagination span.swiper-pagination-bullet-active { background:#000; pointer-events:none; } @media(hover: hover) { #related_service .swiper-pagination span:hover { background:var(--main_color); } } /* ---------------------------------------------------------------------- FAQ ---------------------------------------------------------------------- */ #archive_faq { position:relative; width:1030px; margin:0 auto; padding:120px 0 150px; } #faq_sort_button_wrap { position:relative; width:100%; height:70px; -webkit-user-select:none; user-select:none; } #faq_sort_button_wrap:after { content:''; display:block; height:70px; width:1px; background:#ddd; position:absolute; left:0; top:0; z-index:10; } #faq_sort_button_wrap:before { content:''; display:block; height:70px; width:1px; background:#ddd; position:absolute; right:0; top:0; z-index:10; } #faq_sort_button_wrap .swiper-nav-button { display:none; width:40px; height:40px; border:none; background:none; } #faq_sort_button_wrap .swiper-button-prev:before { left:-1px; } #faq_sort_button_wrap .swiper-button-next:before { right:-1px;} #faq_sort_button_wrap .swiper-button-next { right:10px; margin:0px; top:50%; transform: translateY(-50%); } #faq_sort_button_wrap .swiper-button-prev { left:10px; margin:0px; top:50%; transform: translateY(-50%); } #faq_sort_button { width:100%; position:relative; } #faq_sort_button a { height:70px; line-height:1.5; color:#000; background:#f6f6f6; padding:2px 30px 0; flex: 1 1 0%; text-align:center; display:block; border:1px solid #ddd; border-right:none; margin:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; } #faq_sort_button_wrap.small_size #faq_sort_button a { flex: 1 1 0%; } #faq_sort_button a:hover { color:var(--main_color); } #faq_sort_button a:last-of-type { border-right:1px solid #ddd; } #faq_sort_button a.active { color:var(--main_color); background:#fff; pointer-events:none; border-bottom:1px solid #fff; } .faq_content_inner { border:1px solid #ddd; border-top:none; padding:70px 70px 60px; } .faq_content { opacity:0; visibility:hidden; position:absolute; top:0; } .faq_content.active { opacity:1; visibility:visible; position:relative; transition: opacity 1.0s ease 0.2s; } .faq_content .item { border-top:1px solid #ddd; padding:60px 0; } .faq_content .item:first-of-type { border:none; padding-top:0; } .faq_content .item:last-of-type { padding-bottom:0; } .faq_content .question { color:var(--main_color); position:relative; line-height:1.6; margin-bottom:20px; display:flex; flex-wrap:wrap; align-items:center; font-weight:600; } .faq_content .question .icon { font-size:20px; margin:0 20px 0 0; background:var(--main_color); color:#fff; font-weight:500; font-family:Arial; width:40px; height:40px; line-height:40px; display:block; border-radius:100%; text-align:center; } .faq_content .question .title { font-size:24px; width:calc(100% - 60px); } #ajax_post_no_cat{ border-top:solid 1px #ddd; } /* AJAXロード */ .ajax_post_list_wrap { position:relative; display:none; } .ajax_post_list_wrap.active { display:block } .ajax_post_list_wrap .item { opacity:0; position:relative; } .ajax_post_list_wrap .item.animate { -webkit-animation: slideUp 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; animation: slideUp 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) forwards 0s; } .ajax_post_list_wrap .entry-more { text-align:center; padding:70px 0 0; } .ajax_post_list_wrap .entry-more span { margin:0 auto; cursor:pointer; } .ajax_post_list_wrap .entry-more.is-hide { display:none; } .ajax_post_list_wrap .entry-loading { text-align:center; width:100%; display:none; height:50px; line-height:50px; font-size:14px; margin-top:40px; font-weight:600; } .ajax_post_list_wrap .entry-loading.is-show { display: block; } /* ---------------------------------------------------------------------- お知らせ ---------------------------------------------------------------------- */ /* 記事一覧 */ #archive_news { position:relative; width:1030px; margin:0 auto; padding:120px 0 150px; } .news_list { display:flex; flex-wrap:wrap; position:relative; width:calc(100% + 1px); } .news_list .item { position:relative; width:50%; height:210px; margin:0 -1px -1px 0; display:flex; flex-wrap:wrap; align-items:center; border:1px solid #ddd; } .news_list .image_link { margin:-1px 0 0 -1px; display:block; width:210px; height:210px; position:relative; z-index:1; overflow:hidden; aspect-ratio:1 /1; } .news_list .image_wrap { width:100%; height:100%; position:relative; overflow:hidden; z-index:2; } .news_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } .news_list .content { width:calc(100% - 210px); padding:40px; } body.hide_news_image .news_list .content { width:auto; } .news_list .title { font-size:18px; line-height:1.8; } .news_list .title a { display:block; max-height:3.6em; overflow:hidden; visibility:visible; } .news_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .news_list .date { position:relative; color:#999; font-size:14px; margin:0 0 15px 0; display:block; font-family: 'Arial';} .news_list .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; margin:0 5px 0 0; position:relative; top:1.5px; -webkit-font-smoothing: antialiased; } /* お知らせ詳細 */ #single_news_header { margin-bottom:50px; position:relative; } #single_news_header .image { margin-top:40px; width:100%; position:relative; } #single_news_header .image img { width:100%; height:auto; display:block; margin:0; } #single_news_header .title { font-size:var(--single_post_title_font_size); font-family:var(--single_post_title_font_family); line-height:1.5; font-weight:600; } #single_news_header .meta { margin:0 0 17px 0; display:flex; flex-wrap:wrap; } #single_news_header .meta.top { margin:0 0 10px 0; } #single_news_header .date { position:relative; color:#999; font-size:14px;display:block; margin:0 15px 0 0; font-family: 'Arial';} #single_news_header .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } #single_news_header .update { position:relative; color:#999; font-size:14px; display:block; font-family: 'Arial';} #single_news_header .update:before { font-family:'design_plus'; content:'\e91f'; font-size:18px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------------- ページヘッダー ---------------------------------------------------------------------- */ #page_header { height:400px; position:relative; overflow:hidden; } body.single #page_header { height:300px; } #page_header .headline { position:absolute; left:0; bottom:0; width:100%; height:80px; line-height:85px; color:#fff; z-index:3; text-align:center; font-size:var(--headline_font_size); } #page_header .overlay { position:absolute; left:0; bottom:0; width:100%; height:100%; z-index:2; } #page_header .bg_image { position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:block; margin:0; } #page_header .bg_image img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; object-position:left top; } #archive_desc { text-align:center; padding:110px 0 0; margin-bottom:-10px; } #archive_desc p { line-height:2.4; font-size:18px; } #archive_desc p.mobile { display:none; } #archive_desc .desc.mobile { display:none; } body.no_header_image.open_header #header { border:none; } body.no_header_image #page_header { height:auto; margin-top:250px; margin-bottom:-5px; } body.page.no_header_image #page_header { margin-bottom:90px; } body.no_header_image #page_header .headline { bottom:auto; background:none !important; color:#000; height:auto; line-height:1; left:auto; bottom:auto; position:relative; } #page_header .desc { line-height:2.4; margin:26px auto 0; text-align:center; font-size:18px; max-width:1030px; } #page_header .desc.mobile { display:none; } /* ---------------------------------------------------------------------- ブログアーカイブページ ---------------------------------------------------------------------- */ #archive_blog { padding:120px 0 150px; } .category_sort_button_wrap { width:1030px; margin:115px auto -49px; position:relative; z-index:1; } .category_sort_button_slider { position:relative; width:auto; text-align:center; } .category_sort_button { -webkit-user-select:none; user-select:none; width:auto; position:relative; display:inline-flex !important; z-index:2; } .category_sort_button .item { height:60px; line-height:60px; order:2; margin-bottom:1px; flex:0 0 auto !important; width:fit-content; min-width:180px; font-size: 14px;} .category_sort_button .item.active_menu a { pointer-events:none; /*background:var(--main_color); border-color:var(--main_color);*/ background: #000; border-color: #000; color:#fff; } .category_sort_button a { display:block; height:100%; padding:0 15px; background:#fff; border:1px solid #ddd; border-left-color:transparent;width: 100%; } .category_sort_button .swiper-slide-active a { border-left-color:#ddd; transition:border-color 0 ease 1s; } @media(hover: hover) { .category_sort_button a:hover { color:#fff; background: #000; } } .category_sort_button_wrap .swiper-button-next:before, .category_sort_button_wrap .swiper-button-prev:before { color:#000; font-size:18px; transition: color 0.25s ease; } .category_sort_button_wrap .swiper-button-prev { left:-50px; right:auto; top:27px; } .category_sort_button_wrap .swiper-button-next { left:auto; right:-50px; top:27px; } @media(hover: hover) { .category_sort_button_wrap .swiper-button-next:hover:before, .category_sort_button_wrap .swiper-button-prev:hover:before { color:#aaa; transform:scale(1); } } @media(hover: hover) { .category_sort_button .swiper-nav-button:hover:before { transform:scale(1); } } /* 記事一覧 */ .blog_list { width:1030px; margin:0 auto; display:flex; flex-wrap:wrap; } body.home .blog_list { width:1030px; margin-bottom:1px !important; }/** プラグイン対策のためトップだけ二重に定義 **/ .blog_list .item { width:calc(100% / 3 + 1px); margin:0 -1px -1px 0; border:1px solid #ddd; border-top:none; position:relative; } .blog_list .image_link { display:block; width:calc(100% + 2px); margin:0 -1px; height:auto; position:relative; z-index:1; overflow:hidden; aspect-ratio:343 / 220; } .blog_list .image_wrap { width:100%; height:100%; position:relative; overflow:hidden; z-index:2; } .blog_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } .blog_list .category_button { position:absolute; transform: translate3d(40px,-100%,0); z-index:2; } .blog_list .content { padding:30px 40px; } .blog_list .title { font-size:18px; line-height:1.8; margin-bottom:30px; } .blog_list.no_date .title { margin-bottom:0; } .blog_list .title a { display:block; max-height:5.4em; overflow:hidden; visibility:visible; } .blog_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } body.hide_blog_date .blog_list .title { margin-bottom:0; } .blog_list .date { position:absolute; bottom:35px; color:#999; font-size:14px; margin:0; display:block; font-family: 'Arial';} .blog_list .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; margin:0 5px 0 0; position:relative; top:2px; -webkit-font-smoothing: antialiased; } #no_post { line-height:2.6; text-align:center; } /* 投稿者アーカイブ */ #author_archive_header { margin:200px auto -50px; padding:0 0 0 0; width:600px; } #author_archive_header .name_area { text-align:center; margin-bottom:23px; } #author_archive_header .name_area img { width:120px; height:120px; border-radius:100%; margin:0 0 20px 0; } #author_archive_header .name { font-size:22px; line-height:1.4; } #author_archive_header .sns_button_list { margin:25px 0 0 0; } #author_archive_header .desc { } #author_archive_header .desc p { line-height:2.4; } /* 検索結果 */ body.search-no-results #footer, body.search-no-results #footer_contact{ display:none; } body.search-no-results #header { border:1px solid #ddd; } #no_search_result { height:calc(100vh - 70px); height:calc(100dvh - 70px); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; position:relative; } #no_search_result .content { z-index:100; width:100%; } #no_search_result .headline { text-align:center; margin:0 0 40px 0; font-size:42px; } #no_search_result .desc { text-align:center; margin:0 auto 50px; line-height:2.6; width:800px; } @media(hover: hover) { #no_search_result .desc a:hover { text-decoration:underline; } } #no_search_result .overlay { width:100%; height:100%; position:absolute; z-index:2; } #no_search_result .bg_image { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:block; margin:0; } #no_search_result .bg_image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #no_search_result form { height:50px; width:400px; position:relative; margin:0 auto; } #no_search_result .input_area input { position:absolute; left:0px; width:100%; height:50px; border:none; background:#f3f3f3; z-index:1; padding:0 60px 0 25px; border-radius:50px; z-index:1; } #no_search_result .search_button input { position:absolute; right:0px; top:0px; border:none; background:none; width:50px; height:50px; z-index:2; cursor:pointer; } #no_search_result .search_button label { position:absolute; right:0px; top:0px; z-index:10; width:50px; height:50px; display:block; pointer-events:none; } #no_search_result .search_button label:before { display:block; font-family:'design_plus'; color:#000; font-size:14px; content:'\e94c'; top:19px; right:20px; position:absolute; transition: color 0.2s ease; -webkit-font-smoothing: antialiased; } @media(hover: hover) { #no_search_result .search_button:hover label:before { color:#999; } } #no_search_result.has_bg_image .content { color:#fff; } #no_search_result.has_bg_image .input_area input { background:#fff; } body.header_design_type2 #no_search_result { height:calc(100vh - 80px - 70px); height:calc(100dvh - 80px- 70px); } /* ページナビ */ .page_navi { margin:70px 0 0 0; z-index:10; position:relative; } .page_navi ul { margin:0; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; } .page_navi li { margin:0 4px; } .page_navi a, .page_navi .current, .page_navi .dots { border-radius:100%; font-family:"Arial"; background:#fff; border:1px solid #ddd; color:#000; font-size:14px; width:50px; height:50px; line-height:50px; display:inline-block; text-align:center; } @media(hover: hover) { .page_navi a:hover { background:var(--main_color); border-color:var(--main_color); color:#fff; } } .page_navi .dots { background:none; border:none; } .page_navi .current { color:#fff !important; background:#000; border-color:#000; } .page_navi .next, .page_navi .prev { position:relative; } .page_navi .next span, .page_navi .prev span { display:none; } .page_navi .next:before, .page_navi .prev:before { font-family:'design_plus'; font-size:12px; top:0; position:relative; -webkit-font-smoothing: antialiased; transition:none !important; } .page_navi .prev:before { content:'\e90f'; left:0px; } .page_navi .next:before { content:'\e910'; right:0px;} /* ---------------------------------------------------------------------- ブログ詳細ページ ---------------------------------------------------------------------- */ /* タイトルエリア */ #single_post_header { margin-bottom:40px; position:relative; } #single_post_header .image { position:relative; margin-bottom:-1px; } #single_post_header .image img { width:100%; height:auto; display:block; margin:0; } #single_post_header .category_button_list { max-width:calc(100% - 100px); padding:0; font-size:14px; min-width:110px; color:#fff; position:absolute; transform: translate3d(50px,-100%,0); margin-top:1px; display:flex; flex-wrap:nowrap; overflow:auto; scrollbar-width:thin; } #single_post_header .category_button_list a { flex: 0 0 auto; } @media(hover: hover) { #single_post_header .category_button_list a:hover { background:var(--main_color); } } #single_post_header .category_button_list a:last-of-type:after { display:none; } #single_post_header.no_image .category_button_list { position:relative; transform:translate3d(50px,0,0); } #single_post_header .title_area { border:1px solid #ddd; padding:45px 50px; } #single_post_header .title { font-size:var(--single_post_title_font_size); font-family:var(--single_post_title_font_family); font-weight:600; line-height:1.5; } #single_post_header .meta { margin:10px 0 0 0; display:flex; flex-wrap:wrap; } #single_post_header .meta.top { margin:0 0 10px 0; } #single_post_header .date { position:relative; color:#999; font-size:14px;display:block; margin:0 15px 0 0; font-family: 'Arial';} #single_post_header .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } #single_post_header .update { position:relative; color:#999; font-size:14px; display:block; font-family: 'Arial';} #single_post_header .update:before { font-family:'design_plus'; content:'\e91f'; font-size:18px; display:inline-block; margin:0 5px 0 0; top:1.5px; position:relative; -webkit-font-smoothing: antialiased; } /* 本文 */ @media(hover: hover) { .post_content a:hover { text-decoration:underline; } } /* SNSボタン */ #single_share_top { margin:50px 0 50px; padding:0; } #single_share_bottom { margin:60px 0 0; } /* コピーボタン */ .single_copy_title_url { text-align: center; } .single_copy_title_url_btn { font-size:14px; color:#000; background:#fff; border:3px solid #ccc; cursor:pointer; line-height:54px; min-width:300px; padding: 0 15px; -webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition-property:background-color, color; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:ease; transition-property:background-color, color; transition-duration:0.3s; transition-timing-function:ease; } @media(hover: hover) { .single_copy_title_url_btn:hover { color:rgba(0,0,0,0.5) !important; } } .single_copy_title_url_btn.copied { background:#ccc; color:#fff; pointer-events:none; } #single_copy_title_url_top { margin:0 0 40px 0; } #single_copy_title_url_btm { margin:50px 0 0; } /* ページ分割 */ #post_pagination { margin:0; padding:0; clear:both; font-size:0; text-align:center; } #post_pagination a, #post_pagination p { margin:0 4px; border-radius:100%; font-family:"Arial"; background:#fff; border:1px solid #ddd; color:#000; font-size:14px; width:50px; height:50px; line-height:50px; display:inline-block; text-align:center; text-decoration:none; } #post_pagination p { color:#fff !important; background:#000; border-color:#000; } @media(hover: hover) { #post_pagination a:hover { background:var(--main_color); border-color:var(--main_color); color:#fff; } } /* メタ情報 */ #post_tag_list { display:flex; flex-wrap:wrap; margin:50px 0 -5px; } #post_tag_list a { background:#f6f6f6; display:inline-block; height:35px; line-height:35px; padding:0 15px; margin:0 5px 5px 0; border-radius:4px; font-size:14px; } @media(hover: hover) { #post_tag_list a:hover { background:var(--main_color); color:#fff !important; } } /* プロフィール */ .author_profile { background:#fff; border:1px solid #ddd; margin:50px 0 0; position:relative; padding:35px 40px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } .author_profile .avatar_area { display:block; width:120px; height:120px; border-radius:100%; position:relative; } .author_profile .image_wrap { display:block; width:120px; height:120px; border-radius:100%; position:relative; overflow:hidden; z-index:2; } .author_profile .image_wrap img { display:block; width:100%; height:100% !important; z-index:2; object-fit:cover; position:absolute; top:0; left:0; } .author_profile .info { height:100%; width:calc(100% - 120px); position:relative; } .author_profile .info_inner { padding:0 0 0 40px; } .author_profile .name { font-size:18px; margin:0 0 5px 0; font-weight:600; line-height:1.4; } .author_profile .desc { line-height:2; margin:0; font-size:14px; max-height:4em; overflow:hidden; visibility:visible; } .author_profile .desc span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } @media(hover: hover) { .author_profile .name a:hover { color:rgba(0,0,0,0.5); } } .author_profile .sns_button_list { text-align:left; margin:10px 0 0 -10px; } /* ナビゲーション */ #next_prev_post { margin:50px 0 0 ; position:relative; display:flex; flex-wrap:wrap; } #next_prev_post .item { border:1px solid #ddd; height:120px; width:50%; position:relative; display:flex; flex-wrap:wrap; align-items:center; } #next_prev_post .item:nth-of-type(2) { margin-left:-1px; justify-content:flex-end; } #next_prev_post .item.next_post:nth-of-type(1) { margin-left:50%; justify-content:flex-end; } #next_prev_post .title { position:relative; padding:0 40px 0 70px; font-weight:500; margin-top:2px; font-size:16px; line-height:1.6; max-height:3.2em; overflow:hidden; visibility:visible; word-wrap:break-word; word-break:break-all; transition: color 0.2s ease; } #next_prev_post .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } #next_prev_post .nav { display:none; } #next_prev_post .next_post .title { padding:0 70px 0 40px; } #next_prev_post .title:after { z-index:10; position:absolute; margin-top:2px; left:30px; top:50%; transform: translateY(-50%); font-family:'design_plus'; color:#000; font-size:14px; font-weight:500; display:block; -webkit-font-smoothing: antialiased; transition: all 0.2s ease; } #next_prev_post .prev_post .title:after { content:'\e90f'; } #next_prev_post .next_post .title:after { content:'\e910'; left:auto; right:30px; } @media(hover: hover) { #next_prev_post a:hover .title { color:rgba(0,0,0,0.5); } #next_prev_post a:hover .title:after { opacity:0.5; } } /* 関連記事 */ #related_post { padding:50px 0 0; position:relative; } #related_post .headline { line-height:1; font-size:26px; text-align:center; margin:0 0 50px 0; } #related_post .post_list { } #related_post .related_post_carousel { position:relative; } #related_post .related_post_carousel:before { content:''; display:block; width:1px; height:calc(100% - 153px); background:#ddd; position:absolute; bottom:0; left:0; z-index:10; } #related_post .related_post_carousel:after { content:''; display:block; width:1px; height:calc(100% - 153px); background:#ddd; position:absolute; bottom:0; right:0; z-index:10; } #related_post .related_post_carousel.small_size:after { display:none; } body.hide_news_image #related_post .related_post_carousel:before, body.hide_news_image #related_post .related_post_carousel:after { height:100%; } #related_post .related_post_carousel { } #related_post .post_list .item { display:block; width:calc(100% / 3); border-right:1px solid #ddd; border-bottom:1px solid #ddd; margin:0; height:auto; } #related_post .post_list .image_wrap { margin:0; width:calc(100% + 1px); height:153px; /* aspect-ratio:480 / 306; */ position:relative; overflow:hidden; z-index:2; } #related_post .post_list .image_wrap img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } #related_post .post_list .content { padding:25px 30px; } #related_post .post_list .title { font-size:16px; line-height:1.8; margin-bottom:30px; display:block; max-height:5.4em; overflow:hidden; visibility:visible; } #related_post .post_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } body.hide_blog_date #related_post .post_list .title { margin-bottom:-2px; } #related_post .post_list .date { position:absolute; bottom:30px; color:#999; font-size:14px; margin:0; display:block; font-family: 'Arial';} #related_post .post_list .date:before { font-family:'design_plus'; content:'\e903'; font-size:17px; margin:0 5px 0 0; position:relative; top:2px; -webkit-font-smoothing: antialiased; } body.single-news #related_post .post_list .title { margin-bottom:-2px; } body.single-news #related_post .post_list .date { position:relative; bottom:auto; margin-bottom:15px; font-family: 'Arial';} body.single-news.hide_news_image #related_post .content { border-top:1px solid #ddd; } /* 広告 */ #single_banner_top { margin:0 auto 60px; } body.single-service #single_banner_top, body.single-case_study #single_banner_top { margin-top:50px; } #single_banner_bottom { margin:60px auto 0px; } #single_banner_shortcode { margin:15px auto 45px; } img.single_banner_image { max-width:100%; height:auto; display:block; margin:0 auto; } .single_banner img { max-width:100%; height:auto; } .single_banner a img { -webkit-transition: filter 0.3s ease; transition: filter 0.3s ease; } .single_banner{ line-height: 2.4; } @media(hover: hover) { .single_banner a:hover img { filter: brightness(80%); } } /* ---------------------------------------------------------------------- 　ページ上部　ヘッダー ---------------------------------------------------------------------- */ #header { z-index:2; position:sticky; top:50px; left:50px; width:calc(100% - 100px); height:80px; background:#fff; border-radius:10px; transition: width 0.25s ease; } body.open_header #header { box-shadow:0 0 10px 1px rgba(0,0,0,0.2); } body.no_header_image #header { box-shadow:0 0 10px 1px rgba(0,0,0,0.2); } body.header_design_type2 #header { position:relative; top:0; left:0; width:100%; border-radius:0; transition:none; } body.header_design_type2 #container { margin-top:0; } /* ロゴ */ #header_logo { height:100%; position:absolute; left:40px; top:0; z-index:3; } #header_logo picture { display:block; margin:0; } #header_logo img { display:block; transition: opacity 0.25s ease; max-height:60px; width:auto; } #header_logo img.mobile { display:none; } #header_logo a { height:100%; display:flex; flex-wrap:wrap; align-items:center; transition: all 0.25s ease; } @media(hover: hover) { #header_logo a:hover img { opacity:0.5; } } #header_logo a .logo_text { font-weight:500; line-height:1.2; color:#00; word-wrap:break-word; } #header_logo img.mobile { display:none; } body.hide_logo #header_logo { display:none !important; } /* ボタン */ #header_button { height:60px; line-height:60px; text-align:center; padding:0 25px; min-width:170px; position:absolute; right:10px; top:10px; z-index:3; background:var(--main_color); color:#fff; border-radius:10px; } @media(hover: hover) { #header_button:hover { background:var(--main_color_dark); } } /* グローバルメニュー */ #global_menu { height:80px; z-index:2; position:absolute; top:0; left:50%; transform: translateX(-50%); width:100%; } #global_menu > ul { position:relative; text-align:center; font-size:0; } #global_menu > ul > li { display:inline-block; position:relative; line-height:1; text-align:center; font-size:16px; } #global_menu > ul > li > a { color:#000; text-decoration:none; height:80px; line-height:80px; padding:0 20px; display:block; position:relative; overflow:hidden; } #global_menu > ul > li.active > a, #global_menu > ul > li.current-menu-item > a { color:var(--main_color); } #global_menu ul ul { width:250px; position:absolute; opacity:0; pointer-events:none; top:100px; left:50%; transform: translateX(-50%); margin:0; padding:25px 0 0 0; z-index:100; transition: top 0.2s ease, opacity 0.2s ease; } #global_menu ul li.active > ul { opacity:1; top:80px; pointer-events:auto; transition: top 0.4s ease, opacity 0.4s ease; } #global_menu ul ul ul { left: 100%; transform: translateX(0%); top:30px !important; margin:0; padding:0 0 0 10px; width:calc(100% + 10px); top:80px; transition: top 0.4s ease, opacity 0.4s ease; } #global_menu ul ul li.active > ul { top:0 !important; opacity:1; } #global_menu ul ul li { line-height:1.5; font-size:14px; padding:0; margin:0; text-align:left; position:relative; display:block; } #global_menu ul ul a { background:#000; color:#fff; display:block; position:relative; padding:15px 20px 13px; height:auto; line-height:1.6; margin:0; } #global_menu ul ul a:hover { text-decoration:none; color:#fff; background:var(--main_color); } #global_menu ul ul li.menu-item-has-children > a:before { font-family:'design_plus'; content:'\e910'; color:fff; display:block; position:absolute; right:9px; top:19px; font-size:12px; -webkit-font-smoothing: antialiased; } #global_menu ul ul li.menu-item-has-children > a:hover:before { color:#fff; } #global_menu > ul ul > li:first-of-type > a { border-radius:7px 7px 0 0; } #global_menu > ul ul > li:first-of-type > a:after { content:''; display:block; position:absolute; top:-14px; left:50%; transform: translateX(-50%); border-style: solid; border-width: 0 8px 14px 8px; border-color: transparent transparent #000 transparent; } #global_menu > ul ul > li:first-of-type > a:hover:after { border-color: transparent transparent var(--main_color) transparent; } #global_menu > ul ul ul > li:first-of-type > a:after { display:none; } #global_menu > ul ul > li:last-of-type > a { border-radius:0 0 7px 7px; } #global_menu > ul ul > li:only-of-type > a { border-radius:7px; } /* ドロワーメニュー */ #drawer_menu { display:none; } /* パンくずリンク */ #bread_crumb { height:70px; border-bottom:1px solid #ddd; } body.no_header_image #bread_crumb { border-bottom:none; margin-bottom:-30px; } #bread_crumb ul { width:1030px; height:70px; line-height:70px; margin:0 auto; overflow:hidden; white-space: nowrap; text-overflow: ellipsis; visibility:visible; } /* #bread_crumb ul { width:1030px; height:70px; line-height:70px; margin:0 auto; overflow:auto; overflow-y:hidden; scrollbar-width: thin; white-space: nowrap; } */ #bread_crumb li { display:inline; font-size:14px; margin:0 8px 0 0; padding:0 24px 0 0; position:relative; } #bread_crumb li:after { font-family:'design_plus'; content:'\e910'; font-size:11px; color:#000; display:block; height:13px; line-height:13px; position:absolute; right:0px; top:2px; -webkit-font-smoothing: antialiased; } #bread_crumb li:last-of-type:after { display:none; } #bread_crumb li:last-of-type { margin-left:5px; color:var(--main_color); } #bread_crumb, #bread_crumb li.last { } #bread_crumb li a { color:#000;display:inline-block; transition: opacity 0.2s ease-in-out; } @media(hover: hover) { #bread_crumb li a:hover { opacity:0.5; } } #bread_crumb li.category a:after { content:','; margin-right:5px; } #bread_crumb li.category a:last-of-type:after { display:none; } #bread_crumb li.home { padding-right:20px; } #bread_crumb li.home a { position:relative; width:16px; } #bread_crumb li.home a span { opacity:0; } #bread_crumb li.home a:before { font-family:'design_plus'; content:'\e90c'; font-size:12px; color:#000; display:inline-block; top:0px; position:relative; -webkit-font-smoothing: antialiased; } body.no_header_image.category.archive #page_header + #bread_crumb{ margin:0 auto; position:absolute; top:-80px; width:100%; } /* ヘッダーメッセージ */ #header_message { position:relative; z-index:2000; width:100%; margin-bottom:50px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; min-height:50px; text-align: center; font-size:14px; font-weight:600; padding:15px 20px; } body.page-template-page-tcd-lp.hide_page_header_bar #header_message { margin-bottom:0; } #header_message .label { display:block; color:inherit; line-height:1.4; padding:0 20px; } @media(hover: hover) { #header_message a.label:hover { text-decoration: underline; } } @media (max-width: 800px) { #header_message { min-height:40px; font-size:12px; } } body.header_design_type2 #header_message { margin-bottom:0; } /* ---------------------------------------------------------------------- メガメニュー ---------------------------------------------------------------------- */ .pc .megamenu_button + ul { display:none !important; } #global_menu > ul > li.megamenu_parent:after { opacity:0; content:''; display:block; position:absolute; bottom:-44px; left:50%; transform: translateX(-50%); border-style: solid; border-width: 0 8px 14px 8px; border-color: transparent transparent #000 transparent; transition: bottom 0.2s ease, opacity 0.2s ease; pointer-events:none; } #global_menu > ul > li.megamenu_parent.active_megamenu_button:after { bottom:-25px; opacity:1; transition: bottom 0.4s ease, opacity 0.4s ease; } .megamenu { width:800px; opacity:0; pointer-events:none; position:absolute; top:100px; left:50%; transform: translateX(-50%); z-index:2; transition: top 0.2s ease, opacity 0.2s ease; } .megamenu.active_mega_menu { opacity:1; pointer-events:initial; top:80px; transition: top 0.4s ease, opacity 0.4s ease; } /* メガメニューA　記事カルーセル */ .megamenu_a { padding-top:25px; position:absolute; } .megamenu_a:after { content:''; width:800px; height:168px; background:#000; border-radius:7px; position:absolute; left:0; top:25px; z-index:1; } .megamenu_post_carousel { width:700px; height:110px; position:relative; z-index:2 !important; top:29px; left:10px; } .megamenu_a .post_list { -webkit-user-select:none; user-select:none; } .megamenu_a .post_list .item { width:330px; height:110px; position:relative; z-index:50; } .megamenu_a .post_list .animate_background { display:block; position:relative; display:flex; flex-wrap:wrap; align-items:center; color:#fff; } .megamenu_a .post_list .animate_background:hover { color:#aaa; } .megamenu_a .post_list .image_wrap { width:173px !important; height:110px !important; position:relative; z-index:1; overflow:hidden; } .megamenu_a .post_list .image { width:100%; height:100%; position::absolute; top:0; left:0; object-fit:cover; transform:none; } .megamenu_a .post_list .title { font-size:16px; line-height:1.6; max-height:4.8em; overflow:hidden; visibility:visible; width:calc(100% - 173px); padding:0 20px; } .megamenu_a .post_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .megamenu_a .megamenu_post_carousel.no_image:before { content:''; position:absolute; top:0; left:-1px; background:#000; width:2px; height:100%; z-index:2; } .megamenu_a .megamenu_post_carousel.no_image .post_list .animate_background { height:110px; border-left:1px solid #444; } .megamenu_a .megamenu_post_carousel.no_image .post_list .item .title { width:auto; } .megamenu_a .swiper-nav-button { background:none; border:none; width:50px; height:50px; transition: all 0.25s ease; } .megamenu_a .swiper-nav-button:after { display:none !important; } .megamenu_a .swiper-button-next { right:4px !important; top:110px; } .megamenu_a .swiper-button-prev { left:4px !important; top:110px; } .megamenu_a .swiper-button-prev:before { content:'\e90f'; left:0px; font-family:'design_plus'; font-size:20px; top:1px; position:relative; color:#fff; transition: color 0.25s ease; -webkit-font-smoothing: antialiased; } .megamenu_a .swiper-button-next:before { content:'\e910'; right:0px; font-family:'design_plus'; font-size:20px; top:1px; position:relative; color:#fff; transition: color 0.25s ease; -webkit-font-smoothing: antialiased; } .megamenu_a .swiper-button-prev:hover:before { color:#aaa; transform:none; } .megamenu_a .swiper-button-next:hover:before { color:#aaa; transform:none; } /* ---------------------------------------------------------------------- フッター ---------------------------------------------------------------------- */ /* コンタクトエリア */ #footer_contact { position:relative; } #footer_button_area { display:flex; flex-wrap:wrap; background:#fff; width:1030px; min-height:180px; margin:0 auto; position:absolute; bottom:0; left:50%; transform: translateX(-50%); z-index:3; } #footer_contact.one_item #footer_button_area { width:515px; } #footer_button_area .item { flex: 1 1 0%; display:flex; flex-wrap:wrap; padding:40px; align-items: center;} #footer_button_area .item:last-of-type { border-left:1px solid #ddd; } #footer_button_area .item:only-of-type { border-left:none; } #footer_button_area .icon { width:100px; height:100px; background:var(--main_color); border-radius:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } #footer_button_area .icon span { color:#fff; font-family: 'Material Symbols Rounded'; font-weight: 100; font-style: normal; font-size: 42px; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } #footer_button_area .icon img { display:block; max-width:50px; height:auto; } #footer_button_area .content { width:calc(100% - 100px); display:flex; flex-direction:column; justify-content:center; } #footer_button_area .icon + .content { padding-left:40px; } #footer_button_area .title { font-size:20px; line-height:1.8; font-weight:600; } #footer_button_area .desc { line-height:2; } #footer_button_area .title + .desc { margin-top:0px; } #footer_contact .overlay { width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; } #footer_contact.no_background { height:180px; } #footer_contact.no_background #footer_button_area { border:1px solid #ddd; border-bottom:none; } #footer_contact.fixed_image { height:400px; } #footer_contact .bg_image { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:block; margin:0; } #footer_contact .bg_image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } /* フッターカルーセル */ #footer_image_carousel_wrap { display:flex; flex-wrap:nowrap; overflow:hidden; } .footer_image_carousel .item { width:363px; height:400px; position:relative; overflow:hidden; flex: 0 0 363px; } .footer_image_carousel .item img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } .footer_image_carousel { display:flex; flex-wrap:nowrap; transform: translate3d(0, 0, 0); } .footer_image_carousel:first-child { animation: image_carousel_animation1 90s linear infinite; } .footer_image_carousel:nth-child(2) { animation: image_carousel_animation2 90s -60s linear infinite; } .footer_image_carousel:last-child { animation: image_carousel_animation3 90s -30s linear infinite; } /* 動画 */ #footer_video { position:relative; overflow:hidden; z-index:1; height:400px; } #footer_video video { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; } /* ロゴエリア */ #footer_catch { text-align:center; line-height:2; background:var(--main_color); color:#fff; padding:17px 0; font-size:18px; font-weight:600; } #footer_catch p { width:1030px; margin:0 auto; } #footer_inner { text-align:center; padding:70px 0; width:1030px; margin:0 auto; } #footer_logo picture { display:block; margin:0; } #footer_logo img { display:block; transition: opacity 0.25s ease; margin:0 auto; max-width:100%; } #footer_logo img.mobile { display:none; } @media(hover: hover) { #footer_logo a:hover img { opacity:0.5; } } #footer_logo a .logo_text { font-weight:500; line-height:1.2; word-wrap:break-word; } #footer_logo img.mobile { display:none; } #footer_sns { margin-top:30px; } /* メニュー */ #footer_nav { border-top:1px solid #ddd; position:relative; } #footer_nav ul { -webkit-user-select:none; user-select:none; justify-content:center; } #footer_nav li { font-size:16px; flex: 0 0 auto !important; width:auto !important; margin-right:40px; } #footer_nav li:last-of-type { margin-right:0; } #footer_nav li a { height:70px; line-height:70px; display:block; } /* コピーライト */ #copyright { line-height:1.5; position:relative; font-size:14px; border-top:1px solid #ddd; text-align:center; position:sticky; top:calc(100vh - 70px); padding:24px 20px; } /* 上部へ戻る*/ #return_top { } #return_top a { border-radius:100%; background:var(--main_color); color:#fff !important; display:block; height:70px; width:70px; line-height:70px; text-decoration:none; z-index:100; position:relative; } @media(hover: hover) { #return_top a:hover { background:var(--main_color_dark); } } #return_top span { text-indent:100%; white-space:nowrap; overflow:hidden; display:block; } #return_top a:before { color:#fff; font-family:'design_plus'; content:'\e911'; font-size:16px; display:block; width:16px; position:absolute; top:1px; left:50%; transform: translateX(-50%); -webkit-font-smoothing: antialiased; } #return_top { position:fixed; right:20px; bottom:0px; z-index:999; transform: translate3d(0,100%,0); transition: all 0.35s; } #return_top.active { transform: translate3d(0,0,0); bottom:20px; } /* SNSボタン（全箇所共通） */ .sns_button_list { font-size:0; z-index:20; text-align:center; } .sns_button_list li { font-size:12px; display:inline-block; margin:0 7px; position:relative; } .sns_button_list li a { display:block; text-align:center; position:relative; overflow:hidden; width:18px; height:18px; } .sns_button_list li a span { display:none; } .sns_button_list li a:before { font-family:'design_plus'; font-size:16px; display:block; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); transition: opacity 0.3s ease; -webkit-font-smoothing: antialiased; } .sns_button_list.color_type1 li a:before { color:#000; } @media(hover: hover) { .sns_button_list li a:hover:before { opacity:0.5; } } .sns_button_list li.twitter a:before { content:'\e950'; font-size:15px; } .sns_button_list li.facebook a:before { content:'\e944'; font-size:18px; } .sns_button_list li.insta a:before { content:'\ea92'; font-size:15px; } .sns_button_list li.pinterest a:before { content:'\e905'; font-size:18px; } .sns_button_list li.youtube a { width:19px;} .sns_button_list li.youtube a:before { content:'\ea9d'; font-size:18px; } .sns_button_list li.tiktok a:before { content:'\e94d'; } .sns_button_list li.contact a:before { content:'\f0e0'; } .sns_button_list li.rss a:before { content:'\e90b'; font-size:14px; margin-left:1px; } .sns_button_list li.user_url a:before { content:'\e942'; margin-left:0.7px; } .sns_button_list.color_type2 li { margin:0 8px; } .sns_button_list.color_type2 li a { width:25px; height:25px; } .sns_button_list.color_type2 li a:before { font-size:22px; } .sns_button_list.color_type2 li.twitter a:before { color:#000; font-size:20px; } .sns_button_list.color_type2 li.facebook a:before { color:#1877f2; font-size:26px; } .sns_button_list.color_type2 li.insta a:before { color:#e4405f; } .sns_button_list.color_type2 li.pinterest a:before { color:#bd081c; font-size:24px; } .sns_button_list.color_type2 li.youtube a:before { color:#f00; } .sns_button_list.color_type2 li.tiktok a:before { color:#000; font-size:20px; } .sns_button_list.color_type2 li.contact a:before { color:#00729f; } .sns_button_list.color_type2 li.rss a:before { color:orange; font-size:19px; } .sns_button_list.color_type2 li.user_url a:before { color:#00729f; } /* フッターバー */ #dp-footer-bar { position:fixed; right:0px; bottom:0px; z-index:999; width:100%; } .open_menu #dp-footer-bar { display:none; } .dp-footer-bar-type1 #dp-footer-bar { opacity:0; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; } .dp-footer-bar-type1 #dp-footer-bar.active { opacity:1; } .dp-footer-bar-type2 #dp-footer-bar { -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); -webkit-transition: -webkit-transform 0.35s; transition: transform 0.35s; } .dp-footer-bar-type2 #dp-footer-bar.active { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } /* フッターバー　アイコン無しタイプ */ #dp-footer-bar { height:50px; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; } #dp-footer-bar a { height:50px; line-height:50px; display:block; text-align:center; font-size:12px; padding:0 20px; text-decoration:none !important; -webkit-flex: 1 1 0%; flex: 1 1 0%; } /* ---------------------------------------------------------------------- ウィジェット ---------------------------------------------------------------------- */ /* 基本設定 */ .widget_content { margin:0 0 50px 0; position:relative; font-size:14px; } .widget_content:last-of-type { margin-bottom:0; } .widget_content ul { margin:0; } .widget_content li { line-height:2; padding:2px 0; margin:0 0 10px 0; } .widget_content a { text-decoration:none; } .widget_content a:hover { } .widget_content img { height:auto; max-width:100%; } .widget_headline { font-weight:600; font-size:18px; padding:0; margin:0 0 12px 0; position:relative; line-height:1.6; color:var(--main_color); } .widget_headline a { color:var(--main_color); } /* おすすめ記事スライダー */ .post_slider_widget { position:relative; } .post_slider_widget .post_slider_wrap { border-bottom:1px solid #ddd; } .post_slider_wrap:before { content:''; display:block; width:1px; height:84px; background:#ddd; position:absolute; left:0; bottom:0; z-index:10; } .post_slider_wrap:after { content:''; display:block; width:1px; height:84px; background:#ddd; position:absolute; right:0; bottom:0; z-index:10; } .post_slider_widget .swiper-pagination { top:170px !important; bottom:auto !important; z-index:10; pointer-events:none; } .post_slider_widget .swiper-pagination span { background:#aaa; width:10px; height:10px; opacity:1; } .post_slider_widget .swiper-pagination span.swiper-pagination-bullet-active { background:#fff; pointer-events:none; } @media(hover: hover) { .post_slider_widget .swiper-pagination span:hover { background:var(--main_color); } } .post_slider_widget a { position:relative; display:block; background:#fff; } .post_slider_widget .image_wrap { display:block; width:100%; height:160px; position:relative; z-index:1; overflow:hidden; } .post_slider_widget .image { object-fit:cover; width:100%; height:100% !important; display:block; overflow:hidden; position:absolute; top:0; left:0; z-index:2; } .post_slider_widget .image img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transform:none !important; } .post_slider_widget .title { height:84px; display:flex; flex-direction:column; justify-content:center; border-left:1px solid #ddd; padding:0 20px; } .post_slider_widget .title h4 { padding:0; font-size:14px; line-height:1.8; max-height:3.6em; font-weight:500; word-break:break-all; overflow:hidden; } .post_slider_widget .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; } /* デザインされた記事一覧 */ .styled_post_list1_widget { } .styled_post_widget li { margin:0 0 20px 0; padding:0; } .styled_post_widget li:last-of-type { margin-bottom:0; } .styled_post_widget a { position:relative; display:flex; flex-wrap:wrap; align-items:center; } .styled_post_widget .image_wrap { display:block; width:100px; height:100px; position:relative; z-index:1; overflow:hidden; } .styled_post_widget .image { width:100%; height:100% !important; display:block; overflow:hidden; position:relative; z-index:2; } .styled_post_widget .image img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transform:none !important; } .styled_post_widget .title { width:calc(100% - 100px); position:relative; padding:0 0 0 20px; font-size:14px; line-height:1.8; max-height:5.4em; font-weight:500; word-break:break-all; overflow:hidden; } .styled_post_widget .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } /* タブ記事 */ .tab_post_list_widget { position:relative; } .widget_tab_post_list_button { position:relative; z-index:10; display:flex; flex-wrap:wrap; margin-bottom:20px; margin-top:-20px; } .widget_tab_post_list_button div { font-size:14px; height:60px; line-height:60px; flex: 1 1 0%; text-align:center; cursor:pointer; border-bottom:3px solid #ddd; color:#999; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible; display:block; position:relative; transition: all 0.25s ease; } .widget_tab_post_list_button div.active { pointer-events:none; border-color:#000; color:#000; } .widget_tab_post_list_button div:hover { color:#000; } .widget_tab_post_list { opacity:0; pointer-events:none; position:absolute; top:60px; left:0; width:100%; } .widget_tab_post_list.active { opacity:1; pointer-events:initial; position:relative; top:0; left:0px; width:auto; z-index:10; } .widget_tab_post_list li { margin:0 0 20px 0; padding:0; } .widget_tab_post_list li:last-of-type { margin-bottom:0; } .widget_tab_post_list a { padding:0; display:flex; flex-wrap:wrap; } .widget_tab_post_list .image_wrap { display:block; width:100px; height:100px; position:relative; z-index:1; overflow:hidden; } .widget_tab_post_list .image_wrap .image { object-fit:cover; width:100%; height:100%; position:absolute; top:0; left:0; } .widget_tab_post_list .title_area { width:calc(100% - 100px); height:100px; padding-left:20px; display:flex; flex-wrap:wrap; align-items:center; } .widget_tab_post_list .title { font-size:14px; line-height:1.6; max-height:4.8em; word-break:break-all; overflow:hidden; } .widget_tab_post_list .title span { display:-webkit-inline-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; } .widget_tab_post_list li.no_post { padding:20px 0 0 0; margin-bottom:-10px !important; font-size:14px; line-height:2; } .widget_tab_post_list.no_image { margin-top:-15px; } .widget_tab_post_list.no_image li { margin:0; } .widget_tab_post_list.no_image a { display:block; } .widget_tab_post_list.no_image .title_area { width:auto; display:block; height:auto; padding:20px 0; border-bottom:1px dotted #ccc; } .widget_tab_post_list.no_image li:last-of-type .title_area { border-bottom:0; padding-bottom:0; } /* バナー（デモサイト用） */ .side_banner a { display:block; width:100%; height:160px; position:relative; overflow:hidden; } .side_banner a img { object-fit:cover; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; } .side_banner a .title { position:absolute; bottom:0; left:0; z-index:3; color:#fff; padding:15px 25px; font-weight:600; } .side_banner a:after { display:block; content:''; width:100%; height:50%; position:absolute; left:0; bottom:0; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%); z-index:2; } /* 検索 */ .widget_search label { display:none; } #searchform { background:#fff; height:60px; border:1px solid #ddd; } #searchform #s { border:none; background:none; padding:0 20px; margin:0; width:calc(100% - 50px); height:60px; } #searchform #searchsubmit { border:none; background:none; width:50px; height:60px; z-index:200; position:relative; cursor:pointer; display:block; text-indent:-300px; overflow:hidden; } #searchform .submit_button { position:relative; width:50px; height:60px; float:right; top:1px; } #searchform .submit_button:before { text-indent:0; display:block; width:50px; height:60px; line-height:60px; text-align:center; cursor:pointer; z-index:1; position:absolute; font-family:'design_plus'; color:#333; font-size:16px; content:'\e94c'; right:2px; top:0px; font-weight:600; transition: color 0.2s ease; -webkit-font-smoothing: antialiased; } @media(hover: hover) { #searchform .submit_button:hover:before { color:rgba(0,0,0,0.5) !important; } } /* デフォルトのタグ一覧 */ .widget_tag_cloud .tagcloud { margin:0 0 -6px 0; padding:0; position:relative; display:-webkit-box; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; } .widget_tag_cloud .tagcloud a { margin:0 6px 6px 0; font-size:14px !important; display:block; background:#f6f6f6; padding:0px 20px; border-radius:4px; height:36px; line-height:36px; } @media(hover: hover) { .widget_tag_cloud .tagcloud a:hover { background:var(--main_color); color:#fff !important; } } /* デフォルトの最近の記事 */ .widget_recent_entries li { padding:20px 20px; margin:0 0 -1px 0; border:1px solid #ddd; display:flex; flex-direction:column; } .widget_recent_entries li a { display:block; font-size:14px; line-height:1.8; width:100%; order:2; } .widget_recent_entries li a br { display:none; } .widget_recent_entries .post-date { position:relative; color:#999; font-size:14px; margin:0 0 5px 0; display:block; width:100%; order:1; font-family: 'Arial';} .widget_recent_entries .post-date:before { font-family:'design_plus'; content:'\e903'; font-size:16px; margin:0 5px 0 0; position:relative; top:1.5px; -webkit-font-smoothing: antialiased; } /* デフォルトのカテゴリー */ .widget_categories .widget_headline { } .widget_categories ul:first-of-type { position:relative; border-bottom:1px solid #ddd; border-top:1px solid #ddd; } .widget_categories ul:first-of-type ul { border:none; } .widget_categories ul:first-of-type:after { content:''; display:block; height:1px; width:100%; background:#fff; position:absolute; bottom:0; left:0; z-index:2; } .widget_categories ul:first-of-type ul:after { display:none; } .widget_categories li { margin:0; padding:0; position:relative; } .widget_categories li a { display:block; background:#fff; border-bottom:1px solid #ddd; padding:0; overflow:hidden; position:relative; width:100%; height:60px; line-height:60px; } .widget_categories li li a { padding-left:calc(30px + 1em); } .widget_categories li li li a { padding-left:calc(30px + 2em); } .widget_categories li .title { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; visibility:visible; } .widget_categories li .post-count { background:#f2f2f2; width:40px; height:40px; line-height:40px; border-radius:100%; text-align:center; font-size:12px; position:absolute; right:0px; top:10px; pointer-events:none; } /* デフォルトのアーカイブ */ .widget_archive { } .widget_archive ul:first-of-type { position:relative; border-bottom:1px solid #ddd; border-top:1px solid #ddd; } .widget_archive ul:first-of-type ul { border:none; } .widget_archive ul:first-of-type:after { content:''; display:block; height:1px; width:100%; background:#fff; position:absolute; bottom:0; left:0; z-index:2; } .widget_archive ul:first-of-type ul:after { display:none; } .widget_archive li { margin:0; padding:0; position:relative; } .widget_archive li a { display:block; background:#fff; border:1px solid #ddd; border-top:none; padding:0 20px; overflow:hidden; position:relative; width:100%; height:60px; line-height:60px; } .widget_archive li li a { padding-left:calc(30px + 1em); } .widget_archive li li li a { padding-left:calc(30px + 2em); } .widget_archive li .post-count { background:#f2f2f2; width:40px; height:40px; line-height:40px; border-radius:100%; text-align:center; font-size:12px; position:absolute; right:10px; top:10px; } /* デフォルトの固定ページ */ .widget_pages { } .widget_pages ul:first-of-type { position:relative; border-bottom:1px solid #ddd; border-top:1px solid #ddd; } .widget_pages ul:first-of-type ul { border:none; } .widget_pages ul:first-of-type:after { content:''; display:block; height:1px; width:100%; background:#fff; position:absolute; bottom:0; left:0; z-index:2; } .widget_pages ul:first-of-type ul:after { display:none; } .widget_pages li { margin:0; padding:0; position:relative; } .widget_pages li a { display:block; background:#fff; border:1px solid #ddd; border-top:none; padding:0 20px; overflow:hidden; position:relative; width:100%; height:60px; line-height:60px; } .widget_pages li li a { padding-left:calc(30px + 1em); } .widget_pages li li li a { padding-left:calc(30px + 2em); } /* デフォルトのナビ　*/ .widget_nav_menu { } .widget_nav_menu ul:first-of-type { position:relative; border-bottom:1px solid #ddd; border-top:1px solid #ddd; } .widget_nav_menu ul:first-of-type ul { border:none; } .widget_nav_menu ul:first-of-type:after { content:''; display:block; height:1px; width:100%; background:#fff; position:absolute; bottom:0; left:0; z-index:2; } .widget_nav_menu ul:first-of-type ul:after { display:none; } .widget_nav_menu li { margin:0; padding:0; position:relative; } .widget_nav_menu li a { display:block; background:#fff; border:1px solid #ddd; border-top:none; padding:0 20px; overflow:hidden; position:relative; width:100%; height:60px; line-height:60px; } .widget_nav_menu li li a { padding-left:calc(30px + 1em); } .widget_nav_menu li li li a { padding-left:calc(30px + 2em); } /* デフォルトのコメントウィジェット */ .widget_recent_comments li { font-size:14px; line-height:1.8; border:1px solid #ddd; margin:0 0 -1px 0; padding:20px 20px; } .widget_recent_comments li:last-of-type { margin-bottom:0; } .widget_recent_comments li > a { display:block; } .widget_recent_comments .comment-author-link a { color:#999; } .widget_recent_comments li br { display:none; } /* デフォルトのブロック */ .widget_block { font-size:16px; line-height:1.6; } /* デフォルトのテキストウィジェット */ .widget_text .textwidget { font-size:16px; line-height:1.6; } /* デフォルトのメタウィジェット */ .widget_meta ul { margin-bottom:-8px; } /* デフォルトのアーカイブとカテゴリー　ドロップダウンメニュー */ .widget_archive form, .widget_categories form { position:relative; } .widget_archive select, .widget_categories select { border:1px solid #ddd; background:#fff; width:100%; height:60px; padding:0 20px; font-size:16px; cursor:pointer; -webkit-appearance:none; appearance:none; } .widget_archive .screen-reader-text, .widget_categories .screen-reader-text { display:block; clip:auto; clip-path:none; pointer-events:none; height:60px; width:50px; margin:0; left:calc(100% - 50px); text-indent:-100vw; } .widget_archive .screen-reader-text:before, .widget_categories .screen-reader-text:before { font-family:'design_plus'; content:'\e90e'; text-align:center; text-indent:0; display:block; font-size:14px; width:14px; height:14px; line-height:14px; position:absolute; right:20px; top:27px; -webkit-font-smoothing: antialiased; } body.page-template-page-about .widget_archive .screen-reader-text { left:calc(100% - 80px); } /* カレンダー */ #calendar_wrap { padding:0; margin:-6px 0 -20px; } #wp-calendar { margin:0 auto; width:100%; font-size:14px; border-collapse:collapse; table-layout:fixed;} #wp-calendar caption { padding:7px 0; font-size:16px; font-weight:600; } #wp-calendar thead th, #wp-calendar tfoot td { padding:12px 10px; line-height:2; } #wp-calendar thead th { font-weight:500; } #wp-calendar tbody th, #wp-calendar tbody td { padding:0; margin:0; line-height:1; text-align:center; } #wp-calendar tbody span, #wp-calendar tbody a { display:block; width:100%; height:auto; aspect-ratio:1 /1; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; } #wp-calendar tbody a { border-radius:100%; background:#f6f6f6; color:#000; width:calc(100% - 6px); margin-left:3px; } @media(hover: hover) { #wp-calendar tbody a:hover { color:#fff; background:var(--main_color); } } #wp-calendar tbody td[colspan] span { aspect-ratio:unset; } .wp-calendar-nav { font-size:14px; padding:20px 0; width:100%; } .wp-calendar-nav .wp-calendar-nav-prev { width:40%; float:left; } .wp-calendar-nav .wp-calendar-nav-next { width:40%; float:right; text-align:right; } /* テキストウィジェット */ .textwidget .post_content { font-size:14px; } .textwidget .post_content p { line-height:2; margin-bottom:1.5em; } .textwidget a:hover { text-decoration:underline; } /* デフォルトのギャラリー */ .widget_media_gallery .gallery-item { margin-top:0 !important; } /* RSS */ .widget_rss .widget_headline .rss-widget-feed { display:none; } .widget_rss li { border:1px solid #ddd; margin:0 0 -1px 0; padding:20px 30px 15px; font-size:14px; } .widget_rss ul li { padding:20px 20px; border:1px solid #ddd; margin-top:-1px; display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .widget_rss ul li:not(:first-child) { border-top:1px solid #ddd; } .widget_rss ul li .rss-date { -ms-flex-order:1; order:1; color:#999; font-size:13px; line-height:1; margin-right:10px; } .widget_rss ul li cite { -ms-flex-order:2; order:2; color:#999; font-size:13px; line-height:1; } .widget_rss ul li .rsswidget { -ms-flex-order:3; order:3; display:block; width:100%; margin:0; } .widget_rss ul li .rssSummary { -ms-flex-order:4; order:4; color:#999; font-size:13px; margin: -0.35em 0; } .widget_rss .rss-date { position:relative; font-family:Arial; } .widget_rss .rsswidget ~ .rss-date, .widget_rss .rsswidget ~ cite { margin-bottom:10px; } .widget_rss .rsswidget ~ .rssSummary { margin-top:calc(10px - 0.35em); } /* ---------------------------------------------------------------------- 404ページ ---------------------------------------------------------------------- */ body.error404 #footer, body.error404 #footer_contact { display:none; } body.error404 #header { border:1px solid #ddd; } #page_404_header { width:100%; height:100vh; height:calc(100vh - 70px); height:calc(100dvh - 70px);position:relative; } #page_404_header .content { position:absolute; z-index:3; text-align:center; width:100%; padding:0 50px; color:#fff; left:50%; top:50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #page_404_header.no_bg_image .content { color:#000; } #page_404_header .headline { font-size:42px; } #page_404_header .desc { line-height:2.6; margin:40px 0 0 0; } @media(hover: hover) { #page_404_header .desc a:hover { text-decoration:underline; color:inherit; } } #page_404_header .overlay { width:100%; height:100%; position:absolute; z-index:2; } #page_404_header .bg_image { width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; display:block; margin:0; } #page_404_header .bg_image img { width:100%; height:100%; position:absolute; top:0; left:0; object-fit:cover; } body.header_design_type2 #page_404_header { height:calc(100vh - 80px - 70px ); height:calc(100dvh - 80px- 70px); } /* ---------------------------------------------------------------------- コメント ---------------------------------------------------------------------- */ /* 基本設定 */ #comments { margin:50px 0 0 0; position:relative; } #comments .headline { line-height:1; font-size:26px; text-align:center; margin-bottom:50px; } /* コメント・トラックバックのタブ */ #comment_header { position:relative; margin:0 0 20px; } #comment_tab { margin:0; display:-webkit-box; display:-webkit-flex; display:flex; overflow:hidden; } #comment_tab li { text-align:center; margin:0; -webkit-flex: 1 1 0%; flex: 1 1 0%; } #comment_tab li a, #comment_tab li p { font-size:12px; padding:15px 15px; line-height:1.6; display:block; text-decoration:none; background:#f6f6f6; color:#000; } @media(hover: hover) { #comment_tab li a:hover { color:#fff !important; background:var(--main_color); } } #comment_tab li.active a { background:#000; } #comment_tab li.active a, #comment_header #comment_closed p { color:#fff; position:relative; } #comment_tab li.active a { pointer-events:none; } /* コメントの基本部分 */ .commentlist { list-style-type:none; margin:0; padding:0; } .comment { margin:0 0 20px; padding:20px 20px 0; background:#fff; border:1px solid #ddd; } #comments .post_content { margin:0; padding:5px 0 0 0; background:none; } /* コメントの情報部分 */ .comment-meta { position:relative; margin:0 0 10px 0; } .comment-meta-left { display:flex; flex-wrap:wrap; align-items:center; } #comments .avatar { margin:0 15px 0 0; width:50px; height:50px; border-radius:100%; } .comment-name-date { } a.admin-url { text-decoration:underline; } a.guest-url { text-decoration:underline; } .comment-name-date { margin:0; font-size:14px; } .comment-date { color:#888; margin:10px 0 0 0; } .comment-act { font-size:14px; position:absolute; top:5px; right:0px; padding:0; margin:0; } .comment-act li { display:inline; margin:0; } .comment-reply a, .comment-reply a:visited { border-right:1px solid #aaa; padding:0 10px 0 0; margin:0 6px 0 0; } .comment-edit a, .comment-edit a:visited { border-left:1px solid #aaa; padding:0 0 0 10px; margin:0 0 0 6px; } /* コメント本文 */ #comments .post_content p { margin:0 0 15px 0; line-height:1.8; } #comments .post_content blockquote span { margin:0 0 -1em 0; display:block; } /* メッセージ、警告文 */ .comment-note { display:block; font-size:11px; margin:0 0 1em 0; color:#33a8e5; border:1px solid #94ddd4; padding:10px 15px; background:#d6f4f0; } .comment_closed { border:1px solid #ccc; text-align:center; margin:0 35px 15px 0; padding:15px; background:#fefefe; } .no_comment { padding-bottom:15px; } .comment_message { margin:0 0 25px 0; } /* トラックバック */ .commentlist .ping-link { margin:0 0 25px 0; } .commentlist .ping-meta { margin:0 0 15px 0; } #trackback_url_area { margin:0 0 25px 0; } #trackback_url_area label { font-size:11px; display:block; margin:0 0 5px 0; } #trackback_url_area input { border:1px solid #ddd; padding:5px 10px; width:100%; } /* ページナビ */ #comment_pager { margin:0 0 10px; height:24px; } #comment_pager a, #comment_pager span { display:inline; float:left; margin:0 10px 0 0; } #comment_pager .current { text-decoration:underline; } /* コメントフォーム */ .comment_form_wrapper { margin:0 0 0px; padding:20px; border:1px solid #ddd; } .comment .comment_form_wrapper { margin:0 0 20px; } #cancel_comment_reply a { background:#eee; margin:0 0 1em 0; padding:15px; border-radius:50px; text-align:center; display:block; } @media(hover: hover) { #cancel_comment_reply a:hover { background:var(--main_color); color:#fff !important; } } #comment_user_login p { padding:10px 0; margin:0; line-height:1; font-size:14px; } #comment_user_login span { margin:0 0 0 40px; } #comment_login { margin:0; padding:3px 30px 10px 30px; } #comment_login p { margin:0; padding:12px 0 11px 36px; line-height:1; } #comment_login a { margin:0 0 0 20px; padding:0; } #guest_info { padding:0; width:100%; } #guest_info div { margin:0 0 12px 0; text-align:left; } #guest_info input { margin:0; padding:5px 10px; border:1px solid #ccc; width:100%; background:#fff; } #guest_info input:focus { border:1px solid var(--main_color); } #guest_info label { display:block; margin:0 0 10px 0; padding:0; font-size:12px; } #guest_info span { margin:0 10px 0 0; } #comment_textarea textarea { margin:15px 0 0; width:100%; height:150px; font-size:16px; line-height:1.8; overflow:auto; padding:10px; background:#fff; color:#000; border:1px solid #ccc; } #comment_textarea textarea:focus { border:1px solid var(--main_color); } #submit_comment_wrapper { text-align:center; } #submit_comment { color:#fff; background:#000; border:none; cursor:pointer; font-size:14px; width:200px; height:50px; margin:20px auto 0; display:block; border-radius:50px; transition: all 0.2s ease; } @media(hover: hover) { #submit_comment:hover { background:var(--main_color); color:#fff; } } #input_hidden_field { display:none; } /* パスワード保護 */ .password_protected { text-align:center; margin:0 38px 30px; padding:10px 20px; color:#fff; background:#3db4b2; border-radius:5px; } .password_protected p { font-size:12px; margin:0; line-height:1.6; } /* ---------------------------------------------------------------------- 　アニメーションの設定 ---------------------------------------------------------------------- */ /* 下から上へスライド */ @-webkit-keyframes slideUp { 0% { bottom:-30px; } 100% { opacity:1; bottom:0; } } @keyframes slideUp { 0% { bottom:-30px; } 100% { opacity:1; bottom:0; } } /* ズームアウト */ @-webkit-keyframes zoomOut { 0% { transform: scale(1.0); } 100% { transform: scale(1.3); } } @keyframes zoomOut { 0% { transform: scale(1.0); } 100% { transform: scale(1.3); } } /* ズームイン */ @-webkit-keyframes zoomIn { 0% { transform: scale(1.3); } 100% { transform: scale(1.0); } } @keyframes zoomIn { 0% { transform: scale(1.3); } 100% { transform: scale(1.0); } } /* フェードイン */ @-webkit-keyframes opacityAnimation { 0% { opacity:0; } 100% { opacity:1; } } @keyframes opacityAnimation { 0% { opacity:0; } 100% { opacity:1; } } /* フェードアウト */ @-webkit-keyframes opacityAnimation2 { 0% { opacity:1; } 100% { opacity:0; } } @keyframes opacityAnimation2 { 0% { opacity:1; } 100% { opacity:0; } } /* 右に移動 */ @-webkit-keyframes moveRight { 0% { opacity:0; right:30px; } 100% { opacity:1; right:0; } } @keyframes moveRight { 0% { opacity:0; right:30px; } 100% { opacity:1; right:0; } } /* 左に移動 */ @-webkit-keyframes moveLeft { 0% { opacity:0; left:30px; } 100% { opacity:1; left:0; } } @keyframes moveLeft { 0% { opacity:0; left:30px; } 100% { opacity:1; left:0; } } /* 下に移動 */ @-webkit-keyframes moveDown { 0% { opacity:0; top:-30px; } 100% { opacity:1; top:0; } } @keyframes moveDown { 0% { opacity:0; top:-30px; } 100% { opacity:1; top:0; } } /* 上に移動 */ @keyframes -webkit-moveUp { 0% { opacity:0; bottom:-30px; } 100% { opacity:1; bottom:0; } } @keyframes moveUp { 0% { opacity:0; bottom:-30px; } 100% { opacity:1; bottom:0; } } /* ポップアップ */ @keyframes -webkit-popUp { 0% { transform: scale(.1); opacity:0; } 100% { transform: none; opacity:1; } } @keyframes popUp { 0% { transform: scale(.1); opacity:0; } 100% { transform: none; opacity:1; } } /* ---------------------------------------------------------------------- WordPress プリセットスタイル ---------------------------------------------------------------------- */ /* パスワード保護 */ .c-pw { margin-top:50px; } .c-pw__box { font-size:16px; padding:40px; border:1px solid #ddd; background:#fff; } .c-pw__box-inner { width:100%; height:50px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .c-pw__box-desc { line-height:1.8!important; margin:-0.4em 0 2em!important; } .c-pw__box-input { display:block; flex:1; border:none; background:#eee; height:100%; padding: 0 20px; } .c-pw__btn--submit { display:block; min-width:150px; height:100%; padding:0 1em; background:#111; color:#fff!important; border:0; cursor:pointer; } .c-pw__btn--submit:hover { background:#333; } .c-pw__box-error { color:red; font-size:12px; } @media (max-width:800px) { .c-pw { margin-top:40px; } .c-pw__box { font-size:14px; padding:20px; } .c-pw__box-inner { height:40px; } .c-pw__box-desc { margin-bottom:1em!important; } .c-pw__box-input { width:calc(100% - 100px); padding:0 10px; } .c-pw__btn--submit { min-width:auto; width:100px; } } /* Cardlink style - カードリンクのスタイル */ .cardlink { margin: 2em 0 !important; } /* Google Mapの設定 */ .p-btn { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; min-width: 180px; height: 50px; padding: 0 15px; border-radius: 0; color: #fff; font-size: 14px; line-height: 50px; text-align: center; } @media screen and (max-width: 767px) { .p-btn { height: 45px; font-size: 12px; line-height: 45px; } } /* ブロックエディタ */ .wp-block-social-links a { color:#fff !important; } .has-small-font-size { font-size:.8125em !important; } .has-normal-font-size, .has-regular-font-size { font-size:1em !important; } .has-medium-font-size { font-size:1.25em !important; } .has-large-font-size { font-size:2.25em !important; } .has-huge-font-size, .has-larger-font-size { font-size:2.625em !important; } .has-text-align-left { text-align:left !important; } .has-text-align-right { text-align:right !important; } .wp-block-embed { margin:0 0 2em 0; } /* レスポンシブ説明文 */ .responsive_desc { margin-bottom:2em; } .responsive_desc .mobile { display:none; } @media (max-width: 800px) { .responsive_desc .pc { display:none; } .responsive_desc .mobile { display:block; } } /* グレー背景のボックス */ .gray_bg { background: #f3f3f3; padding:50px 50px; margin-bottom:50px; margin-top:50px; } .gray_bg .speech_balloon:last-child { margin-bottom:0 !important; } .gray_bg .sc .speech_balloon { margin-bottom:2.5em !important; } .gray_bg .sc:last-child .speech_balloon { margin-bottom:0 !important; } .gray_bg .qt_google_map:last-child { margin-bottom:0 !important; } .gray_bg .sc .qt_google_map { margin-bottom:35px !important; } .gray_bg .sc:last-child .qt_google_map { margin-bottom:0 !important; } @media screen and (max-width: 1200px){ .gray_bg { padding: 20px; } } @media screen and (max-width: 800px){ .gray_bg { margin-bottom:40px; margin-top:40px; } } /* 縦書き */ .vertical_text { writing-mode:vertical-rl; position:relative; left:50%; transform: translateX(-50%); margin:50px 0 !important; padding:0 !important; text-align:left !important; line-height:1.5 !important; width:auto!important; } @media (max-width: 800px) { .vertical_text { margin:40px 0 !important; } } /* タブコンテンツ */ .qt_tab_content_wrap { position:relative; margin-bottom:2em; } .qt_tab_content_header { display:flex; flex-wrap:wrap; } .qt_tab_content_header .item { cursor:pointer; flex: 1 1 0%; text-align:center; height:70px; line-height:70px; font-size:16px; border-bottom:3px solid #ddd; color:#999; transition: color 0.25s ease, border-color 0.25s ease; font-weight:600; } .qt_tab_content_header .item.active { pointer-events:none; border-color:#000; color:#000; } @media(hover: hover) { .qt_tab_content_header .item:hover { color:#000; } } .qt_tab_content_main { position:relative; background:#fafafa; } .qt_tab_content { opacity:0; visibility:hidden; position:absolute; top:0; padding:3em; } .qt_tab_content.active { opacity:1; visibility:visible; position:relative; transition: opacity 0.3s linear 0s; } .qt_tab_content img { display:block; margin:0 auto; } .qt_tab_content .desc { text-align:center; margin:10px 0 -10px; } @media (max-width: 800px) { p + .qt_tab_content_wrap { margin-top:-20px; } .qt_tab_content { padding:2em; } .qt_tab_content .desc { margin:10px 0 -5px; } } /* デザインテーブル */ .post_content .design_table { border:none !important; } .post_content .design_table th, .post_content .design_table td { border-color:rgba(255,255,255,0.5) !important; } .post_content .design_table tr:first-child td { background:#238c00; color:#fff; font-weight:600 !important; } .post_content .design_table.red_color tr:first-child td { background:#d93600; } .post_content .design_table.blue_color tr:first-child td { background:#008c8c; } .post_content .design_table tr:nth-child(even) td { background:#f6f6f6 !important; } @media screen and (max-width:1000px) { .post_content .design_table td { padding:10px 25px; font-size:14px; } } @media screen and (max-width:800px) { .post_content .design_table { width:580px !important; margin:0 auto; } } /** ブロックエディターのテーブルブロックの調整 **/ .wp-block-table.is-style-stripes td, .wp-block-table .has-background td{ background-color: transparent; } /* ---------------------------------------------------------------------- シェアボタン ---------------------------------------------------------------------- */ .share_button_list.top { } .share_button_list ul { display:flex; flex-wrap:wrap; margin:0 -3px -3px 0; } .share_button_list.large_size ul { margin:0 -5px -5px 0; } .share_button_list li { flex: 1 1 0%; margin:0 3px 3px 0; max-width:100px; } .share_button_list.large_size li { flex: 0 0 auto; width:calc(25% - 5px); margin:0 5px 5px 0; max-width:inherit; } .share_button_list a { display:block; text-align:center; position:relative; height:30px; background:#000; color:#fff; border-radius:3px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; line-height:32px; } .share_button_list.mono a { line-height:30px; background:#f2f2f2; color:#000; border:1px solid #ddd; } .share_button_list.large_size a { height:40px; line-height:42px; } .share_button_list.large_size.mono a { line-height:40px; } .share_button_list .label { font-size:12px; position:relative; font-family:Arial; } .share_button_list a:before { font-family:'design_plus'; display:block; color:#fff; margin-right:5px; position:relative; transition: color 0.25s ease; -webkit-font-smoothing: antialiased; } .share_button_list.mono a:before { color:#000; } .share_button_list .twitter_button a:before { content:'\e950'; font-size:12px; top:-1px; } .share_button_list .facebook_button a:before { content:'\e944'; font-size:18px; top:-1px; } .share_button_list .hatena_button a:before { content:'\e908'; font-size:14px; top:0px; } .share_button_list .pocket_button a:before { content:'\e90a'; font-size:16px; top:0px; } .share_button_list .rss_button a:before { content:'\e90b'; font-size:12px; top:-0.5px; } .share_button_list .feedly_button a:before { content:'\e907'; font-size:15px; top:-1px; } .share_button_list .pinterest_button a:before { content:'\e905'; font-size:16px; top:-0.5px; } .share_button_list.color .twitter_button a { background:#000; border-color:#000; } .share_button_list.color .facebook_button a { background:#35629a; border-color:#35629a; } .share_button_list.color .hatena_button a { background:#3c7dd1; border-color:#3c7dd1; } .share_button_list.color .pocket_button a { background:#ee4056; border-color:#ee4056; } .share_button_list.color .rss_button a { background:#ffb53c; border-color:#ffb53c; } .share_button_list.color .feedly_button a { background:#6cc655; border-color:#6cc655; } .share_button_list.color .pinterest_button a { background:#d4121c; border-color:#d4121c; } @media(hover: hover) { .share_button_list.color .twitter_button a:hover { background:#666; } .share_button_list.color .facebook_button a:hover { background:#1f3669; } .share_button_list.color .hatena_button a:hover { background:#0270ac; } .share_button_list.color .pocket_button a:hover { background:#c53648; } .share_button_list.color .rss_button a:hover { background:#e09900; } .share_button_list.color .feedly_button a:hover { background:#5ca449; } .share_button_list.color .pinterest_button a:hover { background:#a42f35; } .share_button_list.mono .twitter_button a:hover { background:#000; border-color:#000; } .share_button_list.mono .facebook_button a:hover { background:#35629a; border-color:#35629a; } .share_button_list.mono .hatena_button a:hover { background:#3c7dd1; border-color:#3c7dd1; } .share_button_list.mono .pocket_button a:hover { background:#ee4056; border-color:#ee4056; } .share_button_list.mono .rss_button a:hover { background:#ffb53c; border-color:#ffb53c; } .share_button_list.mono .feedly_button a:hover { background:#6cc655; border-color:#6cc655; } .share_button_list.mono .pinterest_button a:hover { background:#d4121c; border-color:#d4121c; } .share_button_list.mono a:hover { color:#fff; } .share_button_list.mono a:hover:before { color:#fff; } } @media screen and (max-width:800px) { .share_button_list .label { display:none; } .share_button_list.large_size .label { display:inline; } .share_button_list.large_size a { height:35px; line-height:37px; } .share_button_list.large_size.mono a { line-height:35px; } .share_button_list a:before { margin:0; } .share_button_list.large_size a:before { margin-right:5px; } .share_button_list .twitter_button a:before { top:0px; } .share_button_list .facebook_button a:before { top:-1px; } .share_button_list.large_size .facebook_button a:before { top:-1px; } .share_button_list .hatena_button a:before { top:0px;} .share_button_list .pocket_button a:before { top:0px; } .share_button_list .feedly_button a:before { top:-1.5px; } .share_button_list .rss_button a:before { top:-1px; } } @media screen and (max-width:500px) { .share_button_list li { max-width:inherit; } .share_button_list.large_size li { width:calc(50% - 5px); max-width:inherit; } } .share_button_list_default ul { display:flex; flex-wrap:wrap; margin:0 -3px -10px 0; } .share_button_list_default li { margin:0 3px 3px 0; } .share_button_list_default li.pocket_button { width:90px !important; } /* ---------------------------------------------------------------------- Contact form 7 ---------------------------------------------------------------------- */ .wpcf7 .wpcf7-submit, .wpcf7 .wpcf7-previous { -webkit-transition:all .3s; -webkit-box-sizing:border-box; box-sizing:border-box; display:block; position:relative; width:225px; height:48px; margin:30px auto 0; border:none !important; outline:none; background-color:#333333; color:#fff; font-size:14px; line-height:1.5; text-align:center; text-decoration:none; cursor:pointer; transition:all .3s; } .wpcf7 .wpcf7-previous + br { display: none; } @media(hover: hover) { .wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-previous:hover { background-color:#666666; } } .wpcf7 form .wpcf7-response-output { margin: 2em 0.5em 2em; padding:0; border: none; text-align:center; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { color:#dc3232; font-size: 1em; } /* ---------------------------------------------------------------------- チャート ---------------------------------------------------------------------- */ #chart_check { padding:200px 0 100px; } .tcd_chart { margin:60px 0; } .tcd_chart .chart_area { margin:0 auto; position:relative; } .tcd_chart .chart.doughnut .chart_area { width:290px !important; height:290px !important; max-width:100%; } .tcd_chart .chart.pie .chart_area { width:290px !important; height:290px !important; max-width:100%; } .tcd_chart .chart.bar .chart_area { width:100%; height:300px !important; left:-4px; margin-bottom:-7px; max-width:360px; } .tcd_chart .chart.horizontalBar .chart_area { width:100% !important; height:255px !important; max-width:500px; } .tcd_chart .chart.line .chart_area { width:100% !important; height:330px !important; max-width:480px; } .tcd_chart .chart_headline { text-align:center; width:100%; font-size:14px; position:relative; margin:-2px 0 28px 0; line-height:1.4; font-weight:600; } .tcd_chart .chart.doughnut .chart_headline { margin:0; position:absolute !important; top:50% !important; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tcd_chart .chart.horizontalBar .chart_headline { margin:-2px 0 11px 0; } .tcd_chart .chart_labels { text-align:center; margin:25px 0 0; } .tcd_chart .chart.horizontalBar .chart_labels { margin:10px 0 0; } .tcd_chart .chart_labels .item { display:inline-block; font-size:14px; line-height:14px; margin:5px 6px; } .tcd_chart .chart_labels .item .color { width:14px; height:14px; display:block; float:left; margin:0 4px 0 0; } .tcd_chart .data_table { max-width:500px; width:100%; margin:25px auto 0; overflow:auto; padding:0; } .tcd_chart .data_table table { font-size:11px; min-width:500px; border-collapse:collapse !important; } .tcd_chart .data_table th { font-weight:600; white-space:nowrap; padding:10px; line-height:1.6; text-align:center; vertical-align:middle; border:1px solid #ddd; background:#f2f2f2; } .tcd_chart .data_table td { padding:10px; line-height:1.6; text-align:center; vertical-align:middle; border:1px solid #ddd; border-top:none; } @media only screen and (max-width: 800px) { .tcd_chart { margin:35px 0; } .tcd_chart .chart.doughnut .chart_area { width:250px !important; height:250px !important; } .tcd_chart .chart.pie .chart_area { width:250px !important; height:250px !important; } .tcd_chart .chart.bar .chart_area { width:90% !important; height:300px !important; } .tcd_chart .chart.horizontalBar .chart_area { width:90% !important; height:300px !important; } .tcd_chart .chart.line .chart_area { width:90% !important; height:300px !important; } .tcd_chart .chart_headline { font-size:14px; margin:0 0 18px 0; } .tcd_chart .chart.horizontalBar .chart_headline { margin:-2px 0 0 0; } .tcd_chart .chart_labels { margin-top:18px; } .tcd_chart .chart.horizontalBar .chart_labels { margin-top:0px; } .tcd_chart .data_table { margin-top:15px; } } @media only screen and (max-width: 500px) { .tcd_chart .chart.horizontalBar .chart_area_wrap { overflow:auto; margin:0 -20px; padding:0 20px; position:relative; } .tcd_chart .chart.horizontalBar .chart_area { width:400px !important; overflow:visible; position:relative; } .tcd_chart .chart.horizontalBar .chart_area:after { content:''; position:absolute; top:0; left:100%; height:1px; width:20px; } .tcd_chart .data_table { margin:25px -20px 0 !important; padding:0 20px; max-width:inherit; width:auto; } .tcd_chart .data_table table { position:relative; overflow:visible; } .tcd_chart .data_table table:after { content:''; position:absolute; top:0; left:100%; height:1px; width:20px; } } /* ---------------------------------------------------------------------- 目次 ---------------------------------------------------------------------- */ /* 目次 */ #tcd_toc { background:#f6f6f6; border-radius:10px; padding:40px 40px 30px; margin-bottom:2em; } #single_copy_title_url_top + .post_content #tcd_toc:first-child, #single_share_top + .post_content #tcd_toc:first-child { margin-top:50px !important; } #tcd_toc .toc_title { display:block; font-size:18px; font-weight:600; line-height: 1; margin-bottom:30px; text-align:center;} #tcd_toc ul { list-style:none; margin:0px; padding:0; } #tcd_toc li { line-height:1.4; margin:0; padding:0; } #tcd_toc .toc_link { color:#000; font-size:14px; display:block; padding:10px 0; text-decoration:none; } #tcd_toc ul ul .toc_link { padding-left:1em; } #tcd_toc ul ul ul .toc_link { padding-left:2em; } #tcd_toc ul ul ul ul .toc_link { padding-left:3em; } #tcd_toc_modal, #tcd_toc_modal_overlay, #open_tcd_toc_modal { display:none; } /* サイドバーの目次 */ .tcd_toc_widget { order:1; background:#f6f6f6; padding:25px; border-radius:10px; margin-top:50px; position:sticky; top:180px; z-index:100; } body.header_design_type2 .tcd_toc_widget { top:50px; } .toc_widget_wrap { overflow:auto; max-height:calc(100vh - 210px); scrollbar-width:thin; } .toc_widget_wrap .toc_title { margin-bottom:20px; } .toc_widget_wrap .toc_title br { display:none; } .toc_widget_wrap .toc_title h3 { font-size:18px; line-height:1.6; margin:0 0 -5px 0; } .toc_widget_wrap .toc_wrap.parent { } .toc_widget_wrap .toc_item { line-height:1; padding:0px; margin:0; line-height:1.4; } .toc_widget_wrap .toc_link { font-size:14px; padding:10px 0; display:block; } .toc_widget_wrap ul ul .toc_link { padding-left:1em; } .toc_widget_wrap ul ul ul .toc_link { padding-left:2em; } .toc_widget_wrap ul ul ul ul .toc_link { padding-left:3em; } .toc_widget_wrap.break .toc_item { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex: 1 0 auto; } /* TCDCEから移設したもの */ /* ---------------------------------------------------------------------- Google Map ---------------------------------------------------------------------- */ .qt_google_map { width:100%; height:450px; background:#ddd; margin:0 0 35px 0 !important; } .qt_google_map .qt_googlemap_embed { width:100%; height:450px; } .qt_google_map .pb_googlemap_custom-overlay-inner { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: -100px; left: -60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 120px !important; height: 120px !important; border-radius: 50%; font-size: 16px; text-align: center; padding:0 15px; box-sizing:border-box; font-weight:600; } .qt_google_map .pb_googlemap_custom-overlay-inner::after { display: block; position: absolute; right: 0; bottom: -15px; left: 0; width: 0; height: 0; margin: auto; border-width: 16px 5px 0 5px; border-style: solid; content: ""; } @media screen and (max-width: 800px) { .qt_google_map { height:360px; } .qt_google_map .qt_googlemap_embed { height:360px; } .qt_google_map .pb_googlemap_custom-overlay-inner { transform:scale(0.8); left:-60px; top:-80px; } }