@charset "utf-8"; /* CSS Document */ /* ==================================================================================================== 十勝Z団 ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #tkzd2020 * { -webkit-box-sizing:border-box; box-sizing:border-box; } #tkzd2020 #wrap { padding-top:110px; } #tkzd2020.home #wrap { padding:0;} #tkzd2020 h3.title.page_top { width:auto; display:inline-block; background:#eee; } #tkzd2020 .pg_nav a { height:60px; } #tkzd2020 .ttl_s { font-size:18px; line-height:32px; color:#333; } /* ==================================================================================================== ヘッタ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #tkzd2020 header { width:174px; top:0px; right:auto; margin:0; z-index:200; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } #tkzd2020 header h1 a { width:114px; height:70px; padding:15px; left:0; display:inline-block; } #tkzd2020 header h1 a img { width:114px; height:40px; } #tkzd2020 header h2 a { position:absolute; top:4px; left:24px; width:55px; display:none; } #tkzd2020 header h2 a img { width:100%; height:auto; -webkit-filter:grayscale(100%); filter:grayscale(100%); } #tkzd2020 header h2 a:hover img { -webkit-filter:grayscale(0%); filter:grayscale(0%); } #tkzd2020 #check_01 { position:absolute; top:370px; width:70px; height:70px; } /* HOME／ヘッター */ #tkzd2020.home header h1 a { display:none; } #tkzd2020.home header h2, #tkzd2020.home header h2 a { display:block; } /* ナビ */ #tkzd2020_nav { position:fixed; top:0; left:0; z-index:100; width:100%; height:70px; margin:0 auto; display:block; background:rgba(255,255,255,0); } #tkzd2020_nav nav { position:absolute; top:0; right:170px; width:auto; margin:0; z-index:2; display:flex; flex-direction:row; justify-content:right; } #tkzd2020_nav nav a { position:relative; height:70px; margin-left:1px; padding:0 16px; font-size:14px; font-weight:bold; text-align:center; line-height:70px; color:#111 !important; overflow:hidden; } #tkzd2020_nav nav a strong { color:rgba(0,0,0,0.0); position:absolute; top:-10px; left:0; z-index:2; width:100%; font-size:108%; text-align:center; display:block; font-weight:normal; font-style:italic; font-family:'Fjalla One', sans-serif; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } #tkzd2020_nav nav a:hover strong { color:#111111; top:0; } #tkzd2020_nav nav a span { color:#111111; -webkit-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } #tkzd2020_nav nav a:hover span { color:rgba(0,0,0,0.0); } #tkzd2020_nav nav a:before { position:absolute; content:""; bottom:0px; right:0; left:0; z-index:4; width:0px; height:3px; margin:0 auto; background:#084893; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #tkzd2020_nav .bg { position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background:rgba(255,255,255,0.96); border-bottom:1px solid rgba(0,0,0,0.05); -webkit-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out; } /* ホーム設定・ヘッターナビ */ #tkzd2020.home #tkzd2020_nav .bg { background:rgba(255,255,255,0.95); border:none; } /* SNSボタン */ #tkzd2020 #sns #sns_btn { position:fixed; top:14px; right:20px; z-index:200; width:40px; height:40px; padding:8px; margin:auto 0; border:2px solid #ddd; background:#333333; display:block; cursor:pointer; -webkit-border-radius:32px; border-radius:32px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #tkzd2020 #sns #sns_btn img { width:22px; height:22px; } #tkzd2020 #sns #sns_btn:hover { background:#084893; } #tkzd2020 #sns #sns_btn span { color:rgba(0,0,0,0); position:absolute; top:52px; left:50%; z-index:2; width:80px; height:0; margin:0 0 0 -50px; padding:0 10px; font-size:13px; line-height:17px; font-weight:bold; background:#4b4b4b; -webkit-border-radius:2px; border-radius:2px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; pointer-events:none; text-align:justify; text-justify:inter-ideograph; } #tkzd2020 #sns #sns_btn:hover span { color:#fff; height:100px; padding:10px; } #tkzd2020 #sns #sns_btn span:before { content:""; position:absolute; top:0px; left:0; right:0; margin:0 auto; width:0; display:block; border-style:solid; border-width:0px 6px 6px 6px; border-color:transparent transparent rgba(0,0,0,0) transparent; z-index:2; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #tkzd2020 #sns #sns_btn:hover span:before { top:-6px; border-color:transparent transparent #4b4b4b transparent; } #tkzd2020 #sns.on #sns_btn span { top:144px; } #tkzd2020 #sns #sns_box { position:fixed; top:20px; right:20px; z-index:199; width:40px; height:1px; padding:0px; margin:auto 0; background:rgba(17,17,17,0); display:block; cursor:pointer; overflow:hidden; -webkit-border-radius:32px; border-radius:32px; -webkit-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out; } #tkzd2020 #sns #sns_box a { width:26px; height:26px; margin:5px auto; display:block; } #tkzd2020 #sns img { width:26px; height:26px; } #tkzd2020 #sns.on #sns_btn { background:#4b4b4b; border-color:#4b4b4b; -webkit-border-radius:32px 32px 0 0; border-radius:32px 32px 0 0; } #tkzd2020 #sns.on #sns_box { top:14px; height:130px; padding:42px 0 6px 0; background:rgba(17,17,17,1); -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.15); box-shadow:0 1px 2px rgba(0,0,0,0.15); } /* 資料検索 */ #tkzd2020 .pd_menu.search { position:fixed; top:14px; right:70px; z-index:300; margin:0; } #tkzd2020 .pd_menu.search .toggle_btn { width:78px; height:40px; background:#fff; border:2px solid #ddd; cursor:pointer; -webkit-border-radius:40px; border-radius:40px; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; } #tkzd2020 .pd_menu.search .toggle_btn:before { display:none; } #tkzd2020 .pd_menu.search .toggle_btn:after { opacity:1.0; filter:alpha(opacity=100); content:""; position:absolute; top:2px; right:2px; width:36px; height:36px; background: url(../../img/common/bk/search_file.svg) no-repeat center center #fff; -webkit-background-size:20px; background-size:20px; -webkit-border-radius:50%; border-radius:50%; -webkit-transition:all 0.2s ease; transition:all 0.2s ease; } #tkzd2020 .pd_menu.search .toggle_btn.on:after { opacity:0.0; filter:alpha(opacity=0); } #tkzd2020 .pd_menu.search .toggle_btn strong { position:absolute; top:0; left:15px; z-index:2; width:80%; height:42px; font-size:13px; line-height:40px; font-weight:bold; color:#999; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; } #tkzd2020 .pd_menu.search .toggle_btn strong:nth-child(2) { color:#4b4b4b; } #tkzd2020 .pd_menu.search .toggle_btn:hover { width:246px; } #tkzd2020 .pd_menu.search .toggle_btn.on { background-color:#4b4b4b; width:246px; border-color:#4b4b4b; -webkit-border-radius:0; border-radius:0; } #tkzd2020 .pd_menu.search .toggle_btn.on strong { color:#fff !important; } #tkzd2020 .pd_menu.search .toggle_btn.on:before { display:block; } #tkzd2020 .pd_menu.search .toggle_btn strong:nth-child(2), #tkzd2020 .pd_menu.search .toggle_btn:hover strong:nth-child(1), #tkzd2020 .pd_menu.search .toggle_btn.on strong:nth-child(1) { display:none; } #tkzd2020 .pd_menu.search .toggle_btn:hover strong:nth-child(2), #tkzd2020 .pd_menu.search .toggle_btn.on:hover strong:nth-child(2){ color:#4b4b4b; } #tkzd2020 .pd_menu.search .toggle_btn:hover strong:nth-child(2), #tkzd2020 .pd_menu.search .toggle_btn.on strong:nth-child(2), #tkzd2020 .pd_menu.search .toggle_btn strong:nth-child(1) { display:block; } #tkzd2020 .pd_menu.search .toggle_box { top:41px; border-color:#4b4b4b; } #tkzd2020 .pd_menu.search .toggle_box .inner { padding:15px 10px 15px 15px; box-sizing: border-box; } #tkzd2020 .pd_menu.search .toggle_box .inner .title { display:none;} #tkzd2020 .pd_menu.search .toggle_box .freeword { width:100%; height:40px; margin:0 auto; } #tkzd2020 .pd_menu.search .toggle_box .btns, #tkzd2020 .pd_menu.search .toggle_box .btns a.btn { width:100%; float:none; margin:0; } /* ==================================================================================================== ホーム／メインビジュアル ---------------------------------------------------------------------------------------------------- */ /* タイトル */ #tkzd2020_title { position:absolute; left:0; z-index:2; width:36%; height:auto; padding:0 0 10px 0; } #tkzd2020_title h1 { margin:0 auto 10px auto; } #tkzd2020_title h1 img { width:60%; height:auto; margin:0 auto; display:block; } #tkzd2020_title h2 { font-size:10.5px; line-height:30px; letter-spacing:0.25em; text-align:center; font-weight:bold; line-height:1.6em; color:#4b4b4b; } /* スラウドアニメーション */ #tkzd2020_top .slick-slide .hgroup, #tkzd2020_top .slick-slide .cat, #tkzd2020_top .slick-slide .count { left:15%; opacity:0.0; filter:alpha(opacity=0); transition:1.5s 0.9s ease; } #tkzd2020_top .slick-active .hgroup, #tkzd2020_top .slick-active .cat, #tkzd2020_top .slick-active .count { left:5% !important; opacity:1.0; filter:alpha(opacity=100); } /* メインビジュアル */ #tkzd2020_top { position:relative; margin:70px auto; } #tkzd2020_top:before { content: ""; display:block; width:100%; height:0; padding-bottom:40%; } #tkzd2020_top .slider { position:absolute; top:0; left:0; width:100%; height:100%; margin:0 auto; } #tkzd2020_top .slider.atls article { width:100%; margin:0 auto; padding:0; background:none; border:none; } #tkzd2020_top .slider.atls article .thumb { width:64%; margin:0 0 0 36%; box-sizing:border-box; border-top:1px solid #eee; border-bottom:1px solid #eee; border-right:none; } #tkzd2020_top .slider.atls article .cat { width:40%; top:auto; left:15%; width:45%; margin:0; padding:0; border-radius:0; } #tkzd2020_top .slider.atls article .cat a { font-size:20px; font-weight:bold; letter-spacing:0.05em; background:#ccc; color:#fff; font-family:Arial, Helvetica, sans-serif; padding:0; border-radius:0; } #tkzd2020_top .slider.atls article .cat a:before, #tkzd2020_top .slider.atls article .cat a:after { display:none; } #tkzd2020_top .slider.atls article .hgroup { position:absolute; left:15%; bottom:20px; z-index:2; width:45%; margin:33px 0 0 0; background:rgba(250,250,250,0.94) !important; } #tkzd2020_top .slider.atls article .hgroup h1 { position:relative; width:calc(100% - 40px); height:auto; color:#333; text-align:left; margin:45px 20px 10px 20px; } #tkzd2020_top .slider.atls article .hgroup h2 { position:relative; width:calc(100% - 46px); height:auto; color:#666; text-align:left; margin:0 23px; white-space:normal; text-align:justify; text-justify:inter-ideograph; } #tkzd2020_top .slider.atls article .count { bottom:40px; z-index:4; width:calc(100% - 44px); text-align:left; margin-left:22px; } #tkzd2020_top .slider.atls article .count time { color:#333; background-image:url(../../img/common/bk/time.svg); } #tkzd2020_top .slider.atls article .count .view { color:#333; background-image:url(../../img/common/bk/view.svg); } #tkzd2020_top .slider.atls article .count time, #tkzd2020_top .slider.atls article .count .view { opacity:0.7; filter:alpha(opacity=70); } @media screen and (min-width:1401px){ #tkzd2020_title { bottom:330px; } #tkzd2020_title h1 img { width:70%; } #tkzd2020_top .slider.atls article .cat { bottom:260px; } #tkzd2020_top .slider.atls article .hgroup { height:260px; } #tkzd2020_top .slider.atls article .hgroup h1 { font-size:35px; line-height:45px; max-height:90px; } #tkzd2020_top .slider.atls article .hgroup h2 { font-size:15px; line-height:25px; max-height:75px; } } @media screen and (max-width:1400px){ #tkzd2020_title { bottom:320px; } #tkzd2020_top .slider.atls article .cat { bottom:260px; } #tkzd2020_top .slider.atls article .hgroup { height:260px; } #tkzd2020_top .slider.atls article .hgroup h1 { font-size:30px; line-height:40px; max-height:80px; } #tkzd2020_top .slider.atls article .hgroup h2 { font-size:15px; line-height:25px; max-height:75px; } } @media screen and (max-width:1200px){ #tkzd2020_title { bottom:260px; } #tkzd2020_top .slider.atls article .cat { bottom:210px; } #tkzd2020_top .slider.atls article .hgroup { height:220px; } #tkzd2020_top .slider.atls article .hgroup h1 { font-size:26px; line-height:32px; max-height:64px; } #tkzd2020_top .slider.atls article .hgroup h2 { font-size:13px; line-height:20px; max-height:40px; } } @media screen and (max-width:1100px){ #tkzd2020_title { bottom:220px; } #tkzd2020_top .slider.atls article .cat { bottom:170px; } #tkzd2020_top .slider.atls article .hgroup { height:180px; } #tkzd2020_top .slider.atls article .hgroup h1 { font-size:26px; line-height:32px; max-height:64px; } #tkzd2020_top .slider.atls article .hgroup h2 { display:none; } } /* スライダー：パーツ */ #tkzd2020 .slick-prev, #tkzd2020 .slick-next { width:40px; height:62px; -webkit-border-radius:0; border-radius:0; } #tkzd2020 .slick-prev { background:url(../../img/common/wt/prev_tkzd.svg) no-repeat center center rgba(0,0,0,0.5); -webkit-background-size:20px; background-size:20px; } #tkzd2020 .slick-next { background:url(../../img/common/wt/next_tkzd.svg) no-repeat center center rgba(0,0,0,0.5); -webkit-background-size:20px; background-size:20px; } #tkzd2020 .slick-prev:before, #tkzd2020 .slick-next:before { display:none; } #tkzd2020 .slick-dots { text-align:center; } #tkzd2020 .slick-dots li { margin: 10px 5px 10px 5px; } #tkzd2020 .slick-dots li button:before { border:2px solid rgba(200,200,200,1); } #tkzd2020 .slick-dots li.slick-active button:before { background:rgba(200,200,200,1); border:2px solid rgba(200,200,200,1); } /* ==================================================================================================== ホーム／注目タグ ---------------------------------------------------------------------------------------------------- */ /* 注目タグ */ #tkzd2020_key { margin-bottom:40px; } #tkzd2020_key ul { display:flex; flex-wrap:wrap; padding:5px 0;border-top:1px solid #eee; border-bottom:1px solid #eee; } #tkzd2020_key ul li { position:relative; width:auto; } #tkzd2020_key ul li a { display:block; width:auto; height:34px; margin:3px; padding:0 50px 0 15px; background:#333; color:#fff; text-align:center; font-size:14px; line-height:34px; font-weight:bold; overflow:hidden; white-space:nowrap; -webkit-border-radius:3px; border-radius:3px; } #tkzd2020_key ul li a span { position:absolute; top:3px; right:3px; width:34px; height:34px; background:#191919; font-size:11px; line-height:34px; text-align:center; font-weight:normal; color:#eee; font-family: 'Fjalla One', sans-serif; -webkit-border-radius:0 3px 3px 0; border-radius:0 3px 3px 0; } #tkzd2020_key ul li a:hover { background:#111; } /* ==================================================================================================== パーツ ---------------------------------------------------------------------------------------------------- */ /* ボタン */ .btn.tkzd { background:#fff; border:2px solid #333; color:#333; width:200px; font-size:14px; letter-spacing:0.2em; line-height:12px; text-align:center; padding:10px 0; } .btn.tkzd:before { width:30px; background:url(../../img/common/bk/next.svg) no-repeat center center rgba(0,0,0,0); -webkit-background-size:14px; background-size:14px; } .btn.tkzd:after { display:none; } .btn.tkzd:hover { background:#333; color:#fff; } .btn.tkzd:hover:before { background-image:url(../../img/common/wt/next.svg); } /* ==================================================================================================== 記事リスト ---------------------------------------------------------------------------------------------------- */ /* 記事リスト */ #tkzd2020_atls .atls article { width:47%; margin:1.5%; padding:0 0 50px 0; } #tkzd2020_atls .atls article .thumb { width:70%; border-bottom:1px solid #eee; border-top:1px solid #eee; } #tkzd2020_atls .atls article .hgroup { position:absolute; top:30px; left:auto; right:0; z-index:2; width:45%; height:calc(100% - 50px); background-color:rgba(250,250,250,0.94) !important; } #tkzd2020_atls .atls article .hgroup h1 { width:calc(100% - 30px); margin:30px auto 0px auto; padding:0; color:#333; font-size:22px; line-height:30px; max-height:90px; font-weight: bold; overflow:hidden; text-align:justify; text-justify:inter-ideograph; } #tkzd2020_atls .atls article .hgroup h2 { width:calc(100% - 30px); margin:10px auto 0px auto; padding:0; color:#666; font-size:15px; line-height:25px; max-height:75px; font-weight:normal; overflow:hidden; white-space:normal; text-overflow:ellipsis; text-align:left; text-align:justify; text-justify:inter-ideograph; } #tkzd2020_atls .atls article .count { z-index:10; bottom:35px; left:auto; right:15px; width:calc(45% - 30px); text-align:left; } #tkzd2020_atls .atls article .cat { top:30px; left:auto; right:0; width:45%; margin:0; padding:0; } #tkzd2020_atls .atls article .cat a { font-size:15px; line-height:20px; letter-spacing:0.05em; font-weight:bold; background:#ccc; color:#fff; font-family:Arial, Helvetica, sans-serif; padding:0; border-radius:0; } #tkzd2020_atls .atls article .cat a:before, #tkzd2020_atls .atls article .cat a:after { display:none; } @media screen and (max-width:1400px){ #tkzd2020_atls .atls article .hgroup h1 { font-size:18px; line-height:25px; max-height:75px; } #tkzd2020_atls .atls article .hgroup h2 { font-size:13px; line-height:20px; max-height:40px; } } @media screen and (max-width:1200px){ #tkzd2020_atls .atls article .hgroup h1 { font-size:16px; line-height:22px; max-height:66px; } #tkzd2020_atls .atls article .hgroup h2 { font-size:13px; line-height:20px; max-height:40px; } } @media screen and (max-width:1000px){ #tkzd2020_atls .atls article .hgroup h2 { display:none; } } /* ==================================================================================================== カラム設定 ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #tkzd2020 #box_om { background:#fff; padding:40px 0 100px 0; } #tkzd2020 #box_om h3.title { width:100%; font-size:28px; text-align:center; letter-spacing:0.2em; background:none; margin-bottom:30px; border-bottom:2px solid #333; border-left:none; } /* バナー */ #tkzd2020 #box_om #box_bn { background:#f8f8f8; } #tkzd2020 #box_om #box_bn:before { content: ""; display:block; width:100%; height:0; padding-bottom:52.5%; } #tkzd2020 #box_om #box_bn .slider { position:absolute; top:0; left:0; width:100%; height:100%; margin:0 auto; padding:0; } #tkzd2020 #box_om #box_bn .slider a { margin:0; border:none; display:flex; } #tkzd2020 #box_om #box_bn .slider a img { width:63%; height:auto; border:8px solid #e0e0e0; } #tkzd2020 #box_om #box_bn .slider a h1 { width:37%; padding:7.5%; display:flex; justify-content:center; align-items:center; } #tkzd2020 #box_om #box_bn .slider a h1 span { font-size:16px; line-height:30px; max-height:240px; overflow:hidden; color:#333; text-align:justify; text-justify:inter-ideograph; } @media screen and (max-width:1200px){ #tkzd2020 #box_om #box_bn .slider a { display:block; } #tkzd2020 #box_om #box_bn .slider a img { width:100%; } #tkzd2020 #box_om #box_bn .slider a h1 { width:100%; padding:25px; } #tkzd2020 #box_om #box_bn .slider a h1 span { max-height:120px; } #tkzd2020 #box_om #box_bn:before { padding-bottom:calc(100% + 75px); } } /* 左カラム */ #tkzd2020 #box_om .flex .col_left { position:relative; width:calc(100% - 370px); } #tkzd2020 #box_om .flex .col_left .atls article { width:47%; } /* 右カラム */ #tkzd2020 #box_om .flex .col_right { width:320px; margin-left:60px; position:relative; } #tkzd2020 #box_om .flex .col_right .atls_list article:last-child { border-bottom:none; } #tkzd2020 #box_om .flex .col_right .btn { width:100%; margin:-25px auto 20px auto; } #tkzd2020 #box_om .col_right .pd_menu { position:relative; } #tkzd2020 #box_om .col_right .pd_menu .toggle_btn { width:100%; height:45px; box-sizing:border-box; } #tkzd2020 #box_om .col_right .pd_menu .toggle_box { width:100%; position:relative; top:-1px; box-sizing:border-box; } /* ==================================================================================================== ランキング ---------------------------------------------------------------------------------------------------- */ /* リスト */ #tkzd2020 #box_om .atls_list article { border-bottom:none; height:80px; } #tkzd2020 #box_om .atls_list article .count time { top: 7px; } #tkzd2020 #box_om .atls_list article .cat { top: 12px; } #tkzd2020 #box_om .atls_list article a h1 { height:70px; padding:30px 0 0 0; font-size:14px; color:#333; } #tkzd2020 #box_om .atls_list article img { margin:10px 15px 10px 0px; } #tkzd2020 #box_om .atls_list.ranking { margin:-10px 0 40px 0; } /* リスト */ #tkzd2020 .atls.ranking article:before { content:"0"; position:absolute; top: 1px; left:0; right:auto; z-index:2; display:block; width:40px; height:40px; line-height:40px; font-size:20px; font-family:'Fjalla One', sans-serif; text-align:center; color:#fff; background:#333; } #tkzd2020 .atls_list.ranking article:before { content:"0"; position:absolute; top:10px; left:0; right:auto; z-index:2; display:block; width:22px; height:22px; line-height:20px; font-size:12px; font-family:'Fjalla One', sans-serif; text-align:center; color:#fff; background:#333; } #tkzd2020 .atls.ranking article:nth-child(1):before, #tkzd2020 .atls_list.ranking article:nth-child(1):before { content:"1"; } #tkzd2020 .atls.ranking article:nth-child(2):before, #tkzd2020 .atls_list.ranking article:nth-child(2):before { content:"2"; } #tkzd2020 .atls.ranking article:nth-child(3):before, #tkzd2020 .atls_list.ranking article:nth-child(3):before { content:"3"; } #tkzd2020 .atls.ranking article:nth-child(4):before, #tkzd2020 .atls_list.ranking article:nth-child(4):before { content:"4"; } #tkzd2020 .atls.ranking article:nth-child(5):before, #tkzd2020 .atls_list.ranking article:nth-child(5):before { content:"5"; } #tkzd2020 .atls.ranking article:nth-child(6):before { content:"6"; } #tkzd2020 .atls.ranking article:nth-child(7):before { content:"7"; } #tkzd2020 .atls.ranking article:nth-child(8):before { content:"8"; } #tkzd2020 .atls.ranking article:nth-child(9):before { content:"9"; } #tkzd2020 .atls.ranking article:nth-child(10):before { content:"10"; } /* ==================================================================================================== フッタ ---------------------------------------------------------------------------------------------------- */ /* 基本設定 */ #tkzd2020 footer { display:flex; -webkit-justify-content:space-between; justify-content:space-between; padding: 1px 0 50px 0; background:#333; } #tkzd2020 footer .sns { position:relative; float:left; width:300px; height:40px; margin:25px; text-align:left; } #tkzd2020 footer .sns h1 { float:left; font-size:34px; line-height:40px; font-weight:normal; font-style:normal; letter-spacing:0.05em; text-align:left; margin:0 30px 0 0; display:inline; font-family:'Fjalla One', sans-serif; } #tkzd2020 footer .sns a { background:rgba(0,0,0,0.8); float:left; width:40px; height:40px; margin-right:10px; padding:8px; display:block; border-radius:50%; } #tkzd2020 footer .sns a:hover { background:rgba(0,0,0,1.0);} #tkzd2020 footer .sns img { width:24px; height:24px; } #tkzd2020 footer .btns { width:440px; margin:25px; } #tkzd2020 footer .btns img { width:440px; height:40px; } #tkzd2020 footer .btns .btn { background-color:#4b4b4b; } #tkzd2020 footer #page-top a { background-color:#4b4b4b; } #tkzd2020 footer #page-top a:hover { background-color:#222; } /* ==================================================================================================== 記事詳細 ---------------------------------------------------------------------------------------------------- */ #tkzd_pghd { position:relative; } #tkzd_pghd .container { max-width:900px; } #tkzd_pghd h1 { position:absolute; top:0; right:-25px; left:auto; margin:0 auto; z-index:2; display:inline; font-size:16px; line-height:30px; padding:15px 25px; background:#fff; } #tkzd_pghd h1 a { text-decoration:underline; } /* 記事ヘッタ */ #tkzd2020 #atl_hd { position:relative; height:480px; background:url(#) no-repeat center center #000; -webkit-background-size:cover; background-size:cover; } #tkzd2020 #atl_hd:before { content:""; position:absolute; bottom:0; left:0; z-index:2; width:100%; height:250px; background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,0.6)),to(rgba(0,0,0,0))); background:linear-gradient(bottom 45deg,rgba(0,0,0,0.6),rgba(0,0,0,0)); } #tkzd2020 #atl_hd h1 { position: absolute; bottom:100px; left:0; z-index:6; width:calc(100% - 64px); font-size:40px; line-height:1.3em; display:inline-block; background:#fff; color:#111; padding:10px 10px 10px 32px; } #tkzd2020 #atl_hd .list_tag { position: absolute; bottom: 50px; left:32px; z-index:6; height:36px; overflow:hidden; } #tkzd2020 #atl_hd .count { color:#fff !important; position: absolute; bottom: 20px; left:30px; z-index:6; } #tkzd2020 #atl_hd .count .view { background-image:url(../../img/common/wt/view.svg); } #tkzd2020 #atl_hd .count time { background-image:url(../../img/common/wt/time.svg); } /* 記事本文 */ #tkzd2020 .atl_txt { font-size:17px; line-height:1.8em; font-weight:500; color:#333;} /* ==================================================================================================== モバイル対応 ---------------------------------------------------------------------------------------------------- */ /* 760px以下 */ @media screen and (max-width:760px){ /* 基本設定 */ #tkzd2020 #wrap { padding-top:0; overflow:hidden; } #tkzd2020.home #wrap { padding-top:0px; } /* ヘッタ */ #tkzd2020 header h1, #tkzd2020.home header h1 a { display:block !important; } #tkzd2020 header h2, #tkzd2020.home header h2 a { display:none !important; } #tkzd2020_nav { width:100%; height:50px; overflow:auto; } #tkzd2020_nav nav { width:450px; display:flex; justify-content:center; margin:0 auto; } #tkzd2020_nav nav a { height:50px; line-height:50px; paddding:0 10px; } #tkzd2020 header, #tkzd2020_nav, #tkzd2020_nav nav, #tkzd2020_nav nav a { position:relative; top:auto; left:auto; right:auto; } #tkzd2020 #sns #sns_btn, #tkzd2020 #sns #sns_box, #tkzd2020 .pd_menu.search { position:absolute; } /* メインビジュアル */ #tkzd2020_top { margin:0 auto 60px auto; } #tkzd2020_top:before, #tkzd2020_top #tkzd2020_title { display:none; } #tkzd2020_top .slider { position:relative; height:auto; } #tkzd2020_top .slider.atls article .cat { bottom:160px; width:90%; } #tkzd2020_top .slider.atls article .thumb { position:relative; width:100%; margin:0; background:none; border-bottom:none; } #tkzd2020_top .slider.atls article .hgroup { position:relative; bottom:auto; width:90%; height:160px; margin:0; padding:1px 0; } #tkzd2020_top .slider.atls article .hgroup h1 { font-size:18px; line-height:24px; max-height:72px; margin:10px 15px 10px 15px; } #tkzd2020_top .slider.atls article .hgroup h2 { display:block; width:100%; margin:0 auto 25px auto; padding:0 15px; } #tkzd2020_top .slider.atls article .count { bottom:10px; } /* 記事リスト */ #tkzd2020_atls .atls article { width:100%; margin:0; } #tkzd2020_atls .atls article .hgroup h2 { display:block; } /* 記事ヘッタ */ #tkzd_pghd h1 { right:-20px; font-size:12px; line-height:24px; padding:8px 15px; background:#fff; } #tkzd2020 #atl_hd { height:280px; margin:25px 0 130px 0; } #tkzd2020 #atl_hd:before { display:none; } #tkzd2020 #atl_hd h1 { bottom: -40px; left:-5%; width:95%; font-size:20px; line-height:1.4; text-align:left; padding:12px 15px 10px 5%; border-top:1px solid rgba(0,0,0,0.1); } #tkzd2020 #atl_hd .list_tag { bottom: -80px; left:0px; } #tkzd2020 #atl_hd .count { bottom:-110px; left:0px; color:#111 !important; z-index:6; } #tkzd2020 #atl_hd .count .view { font-size:14px; background-image:url(../../img/common/bk/view.svg); } #tkzd2020 #atl_hd .count time { font-size:14px; background-image:url(../../img/common/bk/time.svg); } /* 左カラム */ #tkzd2020 #box_om { padding:0; } #tkzd2020 #box_om h3.title { font-size:20px; } #tkzd2020 #box_om .container.flex { display:block; } #tkzd2020 #box_om .container.flex .col_left { float:none; width:100%; margin:35px auto; } #tkzd2020 #box_om .container.flex .col_right { float:none; width:100%; margin:35px auto; } #tkzd2020 #box_om .flex .col_left, #tkzd2020 #box_om .flex .col_left .atls article, #tkzd2020 #box_om .flex .col_right { width:100%; margin-left:0; } #tkzd2020 #box_om #box_bn .slider { position:relative; } #tkzd2020 #box_om #box_bn:before { display:none; } /* フッタ */ #tkzd2020 footer { display:block; } #tkzd2020 footer .btns { width:100%; margin:0; padding:15px; } #tkzd2020 footer .btns .btn { font-size:80%; } #tkzd2020 footer #page-top { margin-bottom:-65px; } } @media screen and (max-width:480px){ #tkzd2020_atls .atls article .hgroup h2 { display:none; } }