@charset "UTF-8"; /* Theme Name:FAMOUS Theme URI:https://tcd-theme.com/tcd064 Description:「FAMOUS」は、クリエイターやアーティスト個人のポートフォリオを公開するWordPressテーマです。ABOUT、WORKS、VOICE、テーマに実装されたすべてのページを有効活用し、あなたとあなたの作品をより引き立たせるために活用してください。 Author:TCD Author URI:https://tcd-theme.com/ Version:1.5 Text Domain: tcd-w */ /** * Reset */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, 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%; font-weight: normal; vertical-align: baseline; } section { display: block; } audio, canvas, video { display: inline-block; max-width: 100%; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-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 #ddd; margin: 1em 0; padding: 0; } button, input, select, textarea { outline: 0; font-size: 100%; } input, textarea { -webkit-appearance: none; border-radius: 0; } input[type="checkbox"] { -webkit-appearance: checkbox; } input[type="radio"] { -webkit-appearance: radio; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } img { -ms-interpolation-mode: bicubic; } /* clearfix */ .clearfix:after { content: "."; display: block; clear: both; height: 0; font-size: 0.1em; line-height: 0; visibility: hidden; overflow: hidden; } .clearfix { display: inline-block; } /* exlude MacIE5 \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* end MacIE5 */ /** * Base */ body { background: #fff; color: #000; font-size: 14px; line-height: 1; min-width: 320px; overflow-x: hidden; position:relative; -webkit-font-smoothing: antialiased; } a { color: #000; text-decoration: none; } b, strong { font-weight: 700; } big { font-size: larger; } small { font-size: 80%; } sub { vertical-align: sub; font-size: smaller; } sup { vertical-align: super; font-size: smaller; } i, cite, em, var, address, dfn { font-style: italic; } tt, code, kbd, samp { font-family: monospace; } u, ins { text-decoration: underline; } img { vertical-align: bottom; } a, input, button, .p-button, .p-article__title, .p-category-item, .p-index-archive__item-category, .p-index-about__image-label { -webkit-transition-property: background-color, border-color, color, opacity; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; -moz-transition-property: background-color, border-color, color, opacity; -moz-transition-duration: 0.2s; -moz-transition-timing-function: ease; -ms-transition-property: background-color, border-color, color, opacity; -ms-transition-duration: 0.2s; -ms-transition-timing-function: ease; transition-property: background-color, border-color, color, opacity; transition-duration: 0.2s; transition-timing-function: ease; } /** * web fonts ウェブフォントファイルを変更した場合はv=1.0の数字を変更(キャッシュ対策) */ @font-face { font-family: "design_plus"; src: url("fonts/design_plus.eot?v=1.0"); src: url("fonts/design_plus.eot?v=1.0#iefix") format("embedded-opentype"), url("fonts/design_plus.woff?v=1.0") format("woff"), url("fonts/design_plus.ttf?v=1.0") format("truetype"), url("fonts/design_plus.svg?v=1.0#design_plus") format("svg"); font-weight: normal; font-style: normal; } /** * keyframes */ /* loading-anime */ @-webkit-keyframes loading-anime { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-anime { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* headerSlideDown */ @-webkit-keyframes headerSlideDown { 0% { top: -70px; } 100% { top: 0; } } @keyframes headerSlideDown { 0% { top: -70px; } 100% { top: 0; } } @-webkit-keyframes headerSlideDown2 { 0% { top: -38px; } 100% { top: 32px; } } @keyframes headerSlideDown2 { 0% { top: -38px; } 100% { top: 32px; } } @-webkit-keyframes headerSlideDown3 { 0% { top: -24px; } 100% { top: 46px; } } @keyframes headerSlideDown3 { 0% { top: -24px; } 100% { top: 46px; } } /** * Layout */ /* Header */ .l-header { display: block; position: relative; width: 100%; z-index: 999; } .l-header__bar { background: rgba(255, 255, 255, 0.8); position: relative; width: 100%; z-index: 998; } @media (min-width: 992px) { body.l-header__fix .is-header-fixed .l-header__bar { width: 100%; position: fixed; top: 0; left: 0; -webkit-animation: headerSlideDown 0.5s ease; animation: headerSlideDown 0.5s ease; } } @media only screen and (max-width: 991px) { body.l-header__fix--mobile .is-header-fixed .l-header__bar { width: 100%; position: fixed; top: 0; left: 0; -webkit-animation: headerSlideDown 0.5s ease; animation: headerSlideDown 0.5s ease; } } /* Footer */ .l-footer { display: block; } /* Inner */ .l-inner { margin-left: auto; margin-right: auto; position: relative; width: 88.8888%; max-width: 1180px; } /* main */ .l-main { display: block; } /* columns */ .l-2columns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .l-2columns .l-primary { width: 830px; width: -webkit-calc(100% - 350px); width: -moz-calc(100% - 350px); width: calc(100% - 350px); } .l-secondary { width: 300px; } .l-sidebar--type1 .l-2columns .l-primary { -webkit-order: 1; -ms-order: 1; order: 1; } @media only screen and (max-width: 991px) { .l-2columns { display: block; } .l-2columns .l-primary { width: 100%; } .l-secondary { margin-top: 30px; width: 100%; } } /* adminbar */ @media only screen and (min-width: 783px) { body.admin-bar { padding-top: 32px; } body.admin-bar.l-header__fix .is-header-fixed .l-header__bar, body.admin-bar.l-header__fix--mobile .is-header-fixed .l-header__bar--mobile { top: 32px; -webkit-animation: headerSlideDown2 0.5s ease; animation: headerSlideDown2 0.5s ease; } } @media only screen and (max-width: 782px) { body.admin-bar { padding-top: 46px; } body.admin-bar.l-header__fix .is-header-fixed .l-header__bar, body.admin-bar.l-header__fix--mobile .is-header-fixed .l-header__bar--mobile { top: 46px; -webkit-animation: headerSlideDown3 0.5s ease; animation: headerSlideDown3 0.5s ease; } } @media only screen and (max-width: 600px) { body.admin-bar.l-header__fix .is-header-fixed .l-header__bar, body.admin-bar.l-header__fix--mobile .is-header-fixed .l-header__bar--mobile { top: 0; -webkit-animation: headerSlideDown 0.5s ease; animation: headerSlideDown 0.5s ease; } } /** * Component */ /* Load */ @-webkit-keyframes loading-circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loading-circle { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loading-square-base { 0% { bottom: 10px; opacity: 0; } 5%, 50% { bottom: 0; opacity: 1; } 55%, 100% { bottom: -10px; opacity: 0; } } @keyframes loading-square-base { 0% { bottom: 10px; opacity: 0; } 5%, 50% { bottom: 0; opacity: 1; } 55%, 100% { bottom: -10px; opacity: 0; } } @-webkit-keyframes loading-dots-fadein { 100% { opacity: 1; } } @keyframes loading-dots-fadein { 100% { opacity: 1; } } @-webkit-keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); transform: translate(1em); opacity: 1; } } @keyframes loading-dots-first-dot { 100% { -webkit-transform: translate(1em); transform: translate(1em); opacity: 1; } } @-webkit-keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); transform: translate(1em); } } @keyframes loading-dots-middle-dots { 100% { -webkit-transform: translate(1em); transform: translate(1em); } } @-webkit-keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); transform: translate(2em); opacity: 0; } } @keyframes loading-dots-last-dot { 100% { -webkit-transform: translate(2em); transform: translate(2em); opacity: 0; } } #site-wrap { display: none; } #site_loader_overlay { background: #fff; opacity: 1; position: fixed; bottom: 0; left: 0; right:0; top: 0; width: 100%; height: 100%; z-index: 99999; } /* type1 */ .c-load--type1 { width: 48px; height: 48px; font-size: 10px; text-indent: -9999em; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; -webkit-animation: loading-circle 1.1s infinite linear; animation: loading-circle 1.1s infinite linear; } /* type2 */ .c-load--type2 { width: 44px; height: 44px; position: fixed; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } .c-load--type2::before { position: absolute; bottom: 0; left: 0; display: block; width: 12px; height: 12px; content: ''; animation: loading-square-loader 5.4s linear forwards infinite; } .c-load--type2::after { position: absolute; bottom: 10px; left: 0; display: block; width: 12px; height: 12px; opacity: 0; content: ''; animation: loading-square-base 5.4s linear forwards infinite; } /* type3 */ .c-load--type3 { width: 100%; min-width: 160px; font-size: 16px; text-align: center; position: fixed; top: 50%; left: 0; opacity: 0; -webkit-animation: loading-dots-fadein .5s linear forwards; animation: loading-dots-fadein .5s linear forwards; } .c-load--type3 i { width: .5em; height: .5em; display: inline-block; vertical-align: middle; background: #999; border-radius: 50%; margin: 0 .25em; -webkit-animation: loading-dots-middle-dots .5s linear infinite; animation: loading-dots-middle-dots .5s linear infinite; } .c-load--type3 i:first-child { -webkit-animation: loading-dots-first-dot .5s infinite; animation: loading-dots-first-dot .5s linear infinite; opacity: 0; -webkit-transform: translate(-1em); transform: translate(-1em); } .c-load--type3 i:last-child { -webkit-animation: loading-dots-last-dot .5s linear infinite; animation: loading-dots-last-dot .5s linear infinite; } @media only screen and (max-width: 767px) { .c-load--type1 { width: 30px; height: 30px; } .c-load--type2::before { width: 8px; height: 8px; } .c-load--type2::after { width: 8px; height: 8px; } #site_loader_animation i { width: 0.25em; height: 0.25em; margin: 0 0.125em; } } /* menu button */ .c-menu-button { display: none; position: absolute; top: 0; right: 0; text-align: center; } .c-menu-button::before { content: "\f0c9"; font-family: "design_plus"; font-size: 18px; } @media only screen and (max-width: 1199px) { .c-menu-button { display: block; } } .c-search-button { display: block; text-align: center; } .c-search-button::before { content: "\e915"; font-family: "design_plus"; font-size: 18px; } /* breadcrumb */ .c-breadcrumb__item { display: inline; } .c-breadcrumb__item--home a::before { content: "\e90c"; font-family: "design_plus"; } .c-breadcrumb__item--home span { display: none; } /* コメント */ .c-comment { font-size: 12px; margin-bottom: 50px; margin-top: 50px; } .c-comment__tab { margin-bottom: 25px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-comment__tab-item { text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex: 1; } .c-comment__tab-item.is-active a, .c-comment__tab-item.is-active p { background: #333; border-color: #333; color: #fff; position: relative; } .c-comment__tab-item.is-active a:after, .c-comment__tab-item.is-active p:after { border-color: #333 transparent transparent transparent; border-style: solid; border-width: 6px; margin: auto; position: absolute; right: 0; bottom: -12px; left: 0; content: ''; width: 0; height: 0; } .c-comment__tab-item a, .c-comment__tab-item p { border: 1px solid #ddd; color: #333; display: block; font-size: 11px; line-height: 180%; padding: 15px; text-decoration: none; width: 100%; } .c-comment__tab-item a:hover { background: #333; border-color: #333; color: #fff; } .c-comment__tab-item + .c-comment__tab-item a:hover { border-left-color: #ddd; } @media (max-width: 992px) { .c-comment { margin-bottom: 30px; margin-top: 30px; } } @media only screen and (max-width: 767px) { .c-comment__item-act { margin-top: 10px; padding-left: 0; position: static; } .c-comment__tab-item a, .c-comment__tab-item p { padding: 9px 10px; } .c-comment__tab-item.is-active a, .c-comment__tab-item.is-active p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; } } /* コメントの基本部分 */ .c-comment__list-item { border: 1px solid #ddd; color: #777; margin-bottom: 15px; padding: 15px 20px 0; } /* コメント本文 */ .c-comment__item-body p { line-height: 2.4; margin-bottom: 15px; } /* コメントの情報部分 */ .c-comment__item-header { margin-bottom: 10px; position: relative; } .c-comment__item-avatar { float: left; margin-right: 10px; width: 40px; height: 40px; } .c-comment__item-author { display: block; margin-bottom: 10px; padding-top: 3px; } .c-comment__item-author a { text-decoration: underline; } .c-comment__item-date { color: #757676; display: block; font-size: 11px; } .c-comment__item-act { font-size: 11px; margin-top: 5px; padding-left: 10px; position: absolute; top: 0; right: 0; } .c-comment__item-act > li { display: inline; border-right: 1px solid #aaa; margin-right: 6px; padding-right: 10px; } .c-comment__item-act > li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } /* ページナビ */ .c-comment__pager { margin-bottom: 10px; } .c-comment__pager a, .c-comment__pager span { display: inline; float: left; margin-right: 10px; } .c-comment__pager span { text-decoration: underline; } /* メッセージ、警告文 */ .c-comment__item-note { background: #d6f4f0; border: 1px solid #94ddd4; color: #33a8e5; display: block; font-size: 11px; margin-bottom: 1em; padding: 10px 15px; } /* トラックバック */ .c-comment__trackback-url { background: #fafafa; font-size: 11px; padding: 10px; } .trackback_time { font-size: 11px; color: #757676; margin: 0 0 7px 0px; } .trackback_title { margin: 2px 0 8px 0; margin: 0 0 10px 0px; line-height: 1.6; } /* コメントフォーム */ .c-comment__form-wrapper { border: 1px solid #ddd; padding: 15px; } .c-comment__cancel { color: #666; font-size: 11px; margin-bottom: 1em; } .c-comment__cancel a { color: #666; } .c-comment__cancel a:before { content: "\e910"; font-family: "design_plus"; display: inline-block; } .c-comment__form-login { color: #666; font-size: 11px; } .c-comment__form-login a { color: #666; } .c-comment__input { margin-bottom: 12px; text-align: left; } .c-comment__input input { border: 1px solid #ddd; color: #777; padding: 5px; width: 100%; } .c-comment__input textarea { border: 1px solid #ddd; color: #777; padding: 5px; font-size: 11px; line-height: 1.5; overflow: auto; margin-top: 15px; width: 100%; height: 150px; } .c-comment__label-text { color: #666; display: block; font-size: 11px; margin-bottom: 5px; } .c-comment__form-submit { background: #333; border: none; color: #fff; cursor: pointer; display: block; font-size: 14px; margin: 15px auto 0; width: 200px; height: 50px; -webkit-transition: background-color 200ms ease-in-out; -moz-transition: background-color 200ms ease-in-out; -ms-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; } .c-comment__form-submit:hover { background: #000; } .c-comment__form-hidden { display: none; } /* パスワード保護 */ .c-comment__password-protected { background: #000; border-radius: 5px; color: #fff; padding: 10px 20px; text-align: center; } .c-comment__password-protected p { font-size: 12px; line-height: 1.6; } /* meta box */ .c-meta-box { font-size: 12px; padding: 22px 20px 17px; } .c-meta-box__item { border-right: 1px solid #ddd; float: left; margin-bottom: 5px; margin-right: 12px; padding-left: 20px; padding-right: 12px; position: relative; } .c-meta-box__item:last-child { border-right: none; margin-right: 0; padding-right: 0; } .c-meta-box__item::before { color: #aaa; font-family: "design_plus"; position: absolute; left: 0; } .c-meta-box__item--author::before { content: "\e90d"; } .c-meta-box__item--category::before { content: "\e92f"; } .c-meta-box__item--tag::before { content: "\e935"; } .c-meta-box__item--comment::before { content: "\e916"; } @media only screen and (max-width: 767px) { .c-meta-box { background: none; margin-bottom: 10px; padding: 0; } .c-meta-box__item { border-right: 0; float: none; margin-bottom: 16px; } .c-meta-box__item:last-child { margin-bottom: 0; } } /* entry nav */ .c-entry-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .c-entry-nav__item { border: 1px solid #ddd; font-size: 14px; line-height: 2; position: relative; width: 50%; height: 108px; flex: 1 0 auto; } .c-entry-nav__item a { background: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 100%; padding: 0 14%; } .c-entry-nav__item--empty { border: none; } .c-entry-nav__item a:hover { color: #666; } .c-entry-nav__item a span { display: block; max-height: 100%; overflow: hidden; } .c-entry-nav__item--prev + .c-entry-nav__item--next { border-left: none; } .c-entry-nav__item--prev a { padding-left: 16%; } .c-entry-nav__item--next a { padding-right: 16%; } .c-entry-nav__item--prev a::before, .c-entry-nav__item--next a::after { content: ''; display: block; font-family: "design_plus"; line-height: 1; margin: auto; position: absolute; top: 0; bottom: 0; width: 1em; height: 1em; } .c-entry-nav__item--prev a::before { content: "\e90f"; left: 7%; } .c-entry-nav__item--next a::after { content: "\e910"; right: 7%; } @media only screen and (max-width: 991px) { .c-entry-nav { border-top: none; } .c-entry-nav__item { font-size: 12px; text-align: center; width: 50%; height: 52px; } .c-entry-nav__item--prev { border: 1px solid #ddd; } .c-entry-nav__item--next { border: 1px solid #ddd; } .c-entry-nav__item--prev + .c-entry-nav__item--next { border-left: none; } .c-entry-nav__item a { display: block; line-height: 50px; padding: 0; width: 100%; height: 50px; } .c-entry-nav__item a span { display: none; } .c-entry-nav__item--prev a::after { content: attr(data-prev); } .c-entry-nav__item--next a::before { content: attr(data-next); } .c-entry-nav__item--prev a::before { color: #ccc; left: 18px; } .c-entry-nav__item--next a::after { color: #ccc; right: 18px; } } /* pw */ .c-pw { margin-bottom: 40px; } .c-pw__desc { line-height: 2.5; } .c-pw__desc p { line-height: 2.5; margin-bottom: 16px; } .c-pw__btn { color: #fff; display: inline-block; padding: 13px 20px; font-size: 14px; text-align: center; line-height: 1; background: #999; } .c-pw__btn:hover { background: #333; color: #fff; } .c-pw__btn--register { background: #999; color: #fff !important; display: inline-block; font-size: 14px; height: 50px; line-height: 50px; min-width: 200px; padding: 0 25px; position: relative; min-width: 160px; margin-bottom: 32px; } .c-pw__btn--register::after { content: '\e910'; font-family: 'design_plus'; position: relative; right: -4px; } .c-pw__btn--submit { min-width: 100px; border: 0; cursor: pointer; } .c-pw .c-pw__btn:hover { text-decoration: none; } .c-pw__box { border: 1px solid #ddd; background: #f7f7f7; padding: 25px 36px; } .c-pw__box .c-pw__box-desc { line-height: 1.2; margin-bottom: 20px; } .c-pw__box-inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .c-pw__box-label { margin-right: 14px; } .c-pw__box-input { border: 1px solid #ddd; box-shadow: none; height: 40px; width: 250px; margin-right: 14px; flex: 1; padding: 0 10px; } @media only screen and (max-width: 767px) { .c-pw { margin-bottom: 30px; } .c-pw__box { padding: 20px; text-align: center; } .c-pw__box-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .c-pw__box-label { display: block; margin-bottom: 1em; margin-right: 0; font-size: 12px; } .c-pw__box-input { display: block; width: 100%; margin-bottom: 1em; margin-right: 0; } } /* Share */ .c-share__icn { font-family: "design_plus" !important; font-style: normal; font-variant: normal; font-weight: normal; line-height: 1; speak: none; text-transform: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .c-share__icn--facebook::before { content: "\e902"; } .c-share__icn--facebook2::before { content: "\e903"; } .c-share__icn--feedly::before { content: "\e907"; } .c-share__icn--google-plus::before { content: "\e900"; } .c-share__icn--google-plus2::before { content: "\e901"; } .c-share__icn--hatebu::before { content: "\e908"; } .c-share__icn--line::before { content: "\e909"; } .c-share__icn--pinterest::before { content: "\e905"; } .c-share__icn--pocket::before { content: "\e90a"; } .c-share__icn--rss::before { content: "\e90b"; } .c-share__icn--rss2::before { content: "\e906"; } .c-share__icn--twitter::before { content: "\e904"; } .c-share--sm { line-height: 25px; min-width: 27px; } .c-share--sm .c-share__btn { margin-bottom: 5px; margin-right: 5px; } .c-share--sm a { padding: 1px 5px 0; } .c-share--sm .c-share__icn { font-size: 1.3em; position: relative; top: 3px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1); } .c-share--sm .c-share__title { line-height: 20px; margin: 0 3px 0 2px; } .c-share--lg .c-share__btn { margin-right: 1%; margin-bottom: 2px; width: 24%; } @media only screen and (max-width: 767px) { .c-share--lg .c-share__btn { margin-right: 3%; margin-bottom: 3%; width: 47%; } } .c-share--lg .c-share__btn:nth-child(4n) { margin-right: 0; } .c-share--lg .c-share__btn a { padding: 10px 2px; } .c-share--lg .c-share__icn { font-size: 140%; position: relative; top: 3px; } .c-share--lg .c-share__title { margin: 0 3px 0 4px; } .c-share--color a { color: #fff; } .c-share--color a:hover { color: #fff; -webkit-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); } .c-share--color .c-share__btn--twitter a { background-color: #55acee; } .c-share--color .c-share__btn--twitter a:hover { background-color: #468ec5; } .c-share--color .c-share__btn--facebook a { background-color: #35629a; } .c-share--color .c-share__btn--facebook a:hover { background-color: #1f3669; } .c-share--color .c-share__btn--google-plus a { background-color: #dd4b39; } .c-share--color .c-share__btn--google-plus a:hover { background-color: #b94031; } .c-share--color .c-share__btn--hatebu a { background-color: #3c7dd1; } .c-share--color .c-share__btn--hatebu a:hover { background-color: #0270ac; } .c-share--color .c-share__btn--pocket a { background-color: #ee4056; } .c-share--color .c-share__btn--pocket a:hover { background-color: #c53648; } .c-share--color .c-share__btn--rss a { background-color: #ffb53c; } .c-share--color .c-share__btn--rss a:hover { background-color: #e09900; } .c-share--color .c-share__btn--feedly a { background-color: #6cc655; } .c-share--color .c-share__btn--feedly a:hover { background-color: #5ca449; } .c-share--color .c-share__btn--pinterest a { background-color: #d4121c; } .c-share--color .c-share__btn--pinterest a:hover { background-color: #a42f35; } .c-share--mono a { background: #fafafa; border: 1px solid rgba(0, 0, 0, 0.1); color: #222; } .c-share--mono a:hover { border-color: rgba(255, 255, 255, 0.1); color: #fff; } .c-share--mono .c-share__btn--twitter a:hover { background-color: #55acee; } .c-share--mono .c-share__btn--facebook a:hover { background-color: #35629a; } .c-share--mono .c-share__btn--google-plus a:hover { background-color: #dd4b39; } .c-share--mono .c-share__btn--hatebu a:hover { background-color: #3c7dd1; } .c-share--mono .c-share__btn--pocket a:hover { background-color: #ee4056; } .c-share--mono .c-share__btn--rss a:hover { background-color: #ff8c00; } .c-share--mono .c-share__btn--feedly a:hover { background-color: #6cc655; } .c-share--mono .c-share__btn--pinterest a:hover { background-color: #d4121c; } .c-share__btn { float: left; font-size: 12px; text-align: center; } .c-share__btn a { border-radius: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); display: block; } @media only screen and (max-width: 991px) { .c-share__btn { margin-bottom: 5px; } } @media only screen and (max-width: 767px) { .c-share--sm .c-share__icn { left: 1px; } .c-share--sm .c-share__title { display: none; } } .c-share--official .c-share__btn { line-height: 1; margin-right: 5px; } .c-share--official .c-share__btn--twitter { width: 89px; } .c-share--official .c-share__btn--facebook:hover { text-decoration: none; } .c-share--official .c-share__btn--google-plus { width: 58px; } .c-share--official .c-share__btn--pocket { width: 88px; } /** * Project */ .l-main { background: #f4f4f4; padding-bottom: 150px; } @media only screen and (max-width: 991px) { .l-main { background: transparent; padding-bottom: 40px; } } /* header */ @media (min-width: 1200px) { body.l-header--type2 .l-header.is-header-fixed { height: 80px; } body.l-header--type3 .l-header { display: none; } body.l-header--type3 .l-header.is-header-fixed { display: block; } body.l-header--type4 .l-header { display: none; } } @media only screen and (max-width: 1199px) { body.l-header--type2--mobile .l-header.is-header-fixed { height: 61px; } body.l-header--type3--mobile .l-header { display: none; } body.l-header--type3--mobile .l-header.is-header-fixed { display: block; } body.l-header--type4--mobile .l-header { display: none; } } /* header bar */ .p-header__bar { position: relative; } .p-header__bar__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 80px; position: relative; } @media only screen and (max-width: 1199px) { .p-header__bar__inner { height: 60px; min-height: 60px; position: static; } } /* header logo */ .p-header__logo { flex: 0 0 auto; } .p-header__logo img { display: block; max-width: 100%; height: auto; } .p-header__logo--text { font-size: 30px; line-height: 1.2; } .p-header__logo--mobile { display: none; } @media only screen and (max-width: 1199px) { .p-header__logo { display: none; } .p-header__logo--mobile { display: block; } .p-header__logo--text { font-size: 24px; } } /* menu button */ @media only screen and (max-width: 1199px) { .p-menu-button { line-height: 60px; height: 60px; width: 60px; } } /* global nav */ @media (min-width: 1200px) { .p-global-nav__container { margin-left: 30px; } .p-global-nav { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; } .p-global-nav a { display: block; } .p-global-nav li { position: relative; } .p-global-nav > li > a { display: block; font-size: 14px; font-weight: 400; height: 80px; line-height: 80px; overflow: hidden; text-align: center; padding: 0 25px; } .p-global-nav > li:hover, .p-global-nav > li.current-menu-item, .p-global-nav > li.is-active { z-index: 2; } .p-global-nav > li:hover > a, .p-global-nav > li.current-menu-item > a, .p-global-nav > li.is-active > a { color: #ee3c00; } .p-global-nav > .menu-item-has-children > .sub-menu { top: 100%; left: -1px; } .p-global-nav .menu-item-has-children:hover > .sub-menu { opacity: 1; visibility: visible; z-index: 1; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .p-global-nav .sub-menu { background: #000; line-height: 1.31; visibility: hidden; opacity: 0; position: absolute; top: 0; left: 100%; z-index: 1; -webkit-transform: translate3d(0, -5px, 0); -moz-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; } .p-global-nav .sub-menu a { min-height: 50px; padding: 15.5px 20px; width: 210px; } .p-global-nav .sub-menu .current-menu-item > a { background: #000; color: #fff; } .p-global-nav .sub-menu a:hover { background: #ee3c00; color: #fff; } .p-global-nav .sub-menu .menu-item-has-children > a { position: relative; } .p-global-nav .sub-menu .menu-item-has-children > a::after { content: "\e910"; font-family: "design_plus"; position: absolute; right: 16px; transition: none; } } @media (max-width: 1199px) { .p-global-nav { display: none; width: 100%; max-height: calc(100vh - 61px); overflow: auto; text-align: left; position: absolute; top: 60px; left: 0; z-index: 1000; } .p-global-nav a { display: block; line-height: 1.4; min-height: 1.4em; padding: 13px 41px 13px 22px; width: 100%; position: relative; } .p-global-nav .menu-item-has-children > a > span::before { content: '\e90e'; font-family: "design_plus"; line-height: 24px; display: block; margin: auto; position: absolute; top: 0; right: 17px; bottom: 0; text-align: center; width: 24px; height: 24px; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; } .p-global-nav .menu-item-has-children > a > span.is-active::before { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .p-global-nav .sub-menu { background: transparent !important; display: none; } .p-global-nav .sub-menu li a { padding-left: 36px; } .p-global-nav .sub-menu .sub-menu li a { padding-left: 50px; } .p-global-nav .sub-menu .sub-menu .sub-menu li a { padding-left: 64px; } .p-global-nav .sub-menu .sub-menu .sub-menu .sub-menu li a { padding-left: 78px; } } /* page header */ .p-page-header { margin-bottom: 6px; padding: 47px 0 45px; } .p-page-header .p-page-header__inner { opacity: 0; text-align: center; } .p-page-header__title { color: #000; font-size: 46px; line-height: 1.2; margin: 0; } .p-page-header__desc { font-size: 16px; line-height: 2.2; } .p-page-header__title + .p-page-header__desc { margin-top: -9px; } .p-page-header__image { background-position: center center; background-size: cover; position: relative; margin-bottom: 50px; } .p-page-header__image .p-page-header__overlay { background: rgba(0, 0, 0, 0.5); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 600px; width: 100%; } .p-page-header__image .p-page-header__inner { opacity: 0; padding: 30px 0; text-align: center; } .p-page-header__image .p-page-header__title { color: #fff; } .p-page-header__image .p-page-header__desc { color: #fff; } .p-page-header__image .p-page-header__title + .p-page-header__desc { margin: 0; } .p-page-header.is-active .p-page-header__inner, .p-page-header__image.is-active .p-page-header__inner { opacity: 1; -webkit-transition: opacity 1s ease 1s; -moz-transition: opacity 1s ease 1s; -ms-transition: opacity 1s ease 1s; transition: opacity 1s ease 1s; } _:-ms-input-placeholder, :root .p-page-header__image .p-page-header__overlay { /* ie hack for align-items: center; */ height: 0; } @media only screen and (max-width: 991px) { .p-page-header { background: #f4f4f4; margin-bottom: 30px; padding: 9px 0; } body.l-header--type1--mobile .p-page-header, body.l-header--type2--mobile .p-page-header { border-top: 1px solid #ddd; } .p-page-header .p-page-header__title { font-size: 30px; line-height: 1.5; } .p-page-header .p-page-header__desc { font-size: 14px; line-height: 1.8; } .p-page-header__image { margin-bottom: 30px; } .p-page-header__title + .p-page-header__desc { margin-top: -9px; margin-bottom: 6px; } .p-page-header__image .p-page-header__overlay { min-height: 320px; } } @media only screen and (max-width: 767px) { .p-page-header__image .p-page-header__overlay { min-height: 200px; } } @media only print { .p-page-header__inner { opacity: 1 !important; } } /* breadcrumb */ .p-breadcrumb { margin-bottom: 30px; margin-top: -6px; } .p-page-header__image + .p-breadcrumb { margin-top: 0; } .p-breadcrumb__inner { font-size: 12px; line-height: 2; } .p-breadcrumb__item { padding-right: 0; } .p-breadcrumb__item + .p-breadcrumb__item::before { content: "\e910"; display: inline-block; font-family: "design_plus"; font-size: 10px; margin-left: 2px; margin-right: 2px; } @media only screen and (max-width: 991px) { .p-breadcrumb { background: #fff; margin-bottom: 0; margin-top: -30px; } .p-page-header__image + .p-breadcrumb { margin-top: -30px; } .p-breadcrumb__inner { font-size: 10px; line-height: 50px; height: 50px; overflow: hidden; padding: 0; text-overflow: ellipsis; white-space: nowrap; } } /* footer info */ .p-footer-info { background: #f4f4f4; padding: 0 0 50px; text-align: center; } .p-footer-info .p-social-nav { line-height: 2; margin-top: 20px; } .p-footer-info__desc { line-height: 2; margin-top: 14px; } .p-footer-info.has-bg-image { background-position: center center; background-repeat: no-repeat; background-size: cover; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 400px; padding: 0; position: relative; } .p-footer-info.has-bg-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 1; } .p-footer-info.has-bg-image .p-footer-info__inner { padding: 30px 0; position: relative; z-index: 2; } _:-ms-input-placeholder, :root .p-footer-info.has-bg-image { /* ie hack for align-items: center; */ height: 0; } @media only screen and (max-width: 991px) { .p-footer-info { background-color: transparent; padding: 0 0 36px; } .p-footer-info .p-social-nav, .p-footer-info__desc { margin-top: 5px; } .p-footer-info.has-bg-image { min-height: 300px; } } /* footer logo */ .p-footer__logo img { display: inline-block; max-width: 100%; height: auto; } .p-footer__logo--text { font-size: 30px; line-height: 1.2; } .p-footer__logo--mobile { display: none; } @media only screen and (max-width: 991px) { .p-footer__logo { display: none; } .p-footer__logo--mobile { display: block; } .p-footer__logo--text { font-size: 24px; } } /* footer nav */ .p-footer-nav { padding: 19.5px 0; text-align: center; } .p-footer-nav li { display: inline-block; } .p-footer-nav li::after { content: '|'; line-height: 1; } .p-footer-nav li:last-child::after { content: ''; } .p-footer-nav li a { display: inline-block; font-size: 14px; line-height: 1.8; padding: 0 10px; } .p-footer-nav li a:hover { color: #666; } @media only screen and (max-width: 991px) { .p-footer-nav { margin-top: -20px; padding: 0 0 21px; } .p-footer-info.has-bg-image + .p-footer-nav__container .p-footer-nav { margin-top: 0; padding-top: 21px; } .p-footer-nav li { display: block; } .p-footer-nav li a { line-height: 2.5; padding: 0; } .p-footer-nav li::after { content: ''; } } /* copyright */ .p-copyright { background: #000; color: #fff; font-size: 12px; line-height: 1.5; text-align: center; } .p-copyright__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 59px; overflow: hidden; } .p-copyright__inner p { max-height: 100%; width: 100%; } @media only screen and (max-width: 991px) { .p-copyright__inner { height: 50px; } } /* pagetop */ .p-pagetop { display: none; position: fixed; bottom: 0; right: 0; z-index: 90; } .p-pagetop a { background: #ee3c00; color: #fff !important; display: block; height: 59px; line-height: 59px; text-align: center; width: 59px; } .p-pagetop a::after { content: "\e911"; font-family: "design_plus"; font-size: 14px; margin: auto; top: 0; right: 0; bottom: 0; left: 0; } @media only screen and (max-width: 991px) { .p-pagetop a { height: 50px; line-height: 50px; width: 50px; } } @media only print { .p-pagetop { display: none !important; } } /* article title */ .p-article__title { color: #000; word-break: break-all; } /* float category */ .p-float-category { position: absolute; top: 0; left: 0; z-index: 3; } .p-category-item { background: #ee3c00; color: #fff; display: inline-block; font-size: 12px; line-height: 1.8; margin: 0; min-width: 140px; max-width: 100%; padding: 9.5px 8px; text-align: center; } .p-category-item:hover { background: #000; } @media only screen and (max-width: 991px) { .p-category-item { min-width: 110px; } } /* article date */ .p-article__date { color: #000; font-family: Arial, sans-serif; } .p-article__date-day { display: block; font-size: 50px; line-height: 1; margin-bottom: 1px; } .p-article__date-month, .p-article__date-year { display: block; font-size: 14px; line-height: 1.4; } .p-article__date-month { text-transform: uppercase; } @media only screen and (max-width: 991px) { .p-article__date-day { font-size: 32px; margin-bottom: 2px; } .p-article__date-month, .p-article__date-year { font-size: 12px; line-height: 1.4; } } /* article meta */ .p-article__meta { color: #999; font-size: 12px; line-height: 1.8; } .p-article__meta > * { display: inline-block; margin-right: 5px; } .p-article__meta > *::after { content: "|"; display: inline-block; margin-left: 5px; } .p-article__meta > *:last-child { margin-right: 0; } .p-article__meta > *:last-child::after { content: ''; margin-left: 0; } /* ad */ .p-ad { margin-bottom: 20px; margin-top: 50px; text-align: center; } .p-ad__item { display: inline-block; margin-bottom: 30px; } .p-ad__item + .p-ad__item { margin-left: 35px; } .p-ad img { max-width: none; width: auto; } @media only screen and (max-width: 767px) { .p-ad__item { display: block; margin-bottom: 20px; } .p-ad__item + .p-ad__item { margin-left: 0; } } /* author */ .p-author { margin-bottom: 48px; padding-bottom: 48px; position: relative; } .p-author::after { border-bottom: 1px solid #ddd; content:''; display: block; position: absolute; bottom: 0; left: 0; right: 0; } .p-author__box { background: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 40px 4.8192%; } .p-author__thumbnail { border-radius: 50%; display: block; flex: 0 0 110px; height: 110px; margin-right: 30px; overflow: hidden; width: 110px; /* old webkit bug fix */ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .p-author__thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; } .p-author__info {} .p-author__title { font-size: 16px; font-weight: 600; line-height: 1.8; } .p-author__desc { clear: both; color: #666; line-height: 2; margin-top: 10px; } .p-author__desc p + p { margin-top: 1em; } .p-author__info .p-social-nav { margin-top: 16px; } .p-author__info .p-social-nav__item{ font-size: 14px; } .p-author__link { float: right; padding-top: 4px; } .p-author__link::after { content: "\e910"; font-family: "design_plus"; padding-left: 5px; } @media only screen and (max-width: 991px) { .p-author { margin-bottom: 28px; padding-bottom: 28px; } .p-author::after { left: -992px; right: -992px; } .p-author__box { display: block; padding: 0; } .p-author__thumbnail { margin: 0 auto 18px; } } /* headline */ .p-headline { border-left: 4px solid #ee3c00; color: #000; font-size: 16px; font-weight: 600; line-height: 1.2; margin-bottom: 20px; padding: 10.5px 0 10.5px 18px; } .p-headline .p-headline__link { float: right; font-size: 14px; font-weight: normal; } .p-headline .p-headline__link::after { content: "\e910"; display: inline-block; font-family: "design_plus"; font-size: 12px; margin-left: 6px; } @media only screen and (max-width: 991px) { .p-headline { margin-bottom: 15px; } .p-headline .p-headline__link { padding-top: 3px; } } /* button */ .p-button { background: #ee3c00; border: none; color: #fff !important; cursor: pointer; display: inline-block; height: 60px; line-height: 60px; min-width: 250px; overflow: hidden; padding: 0 20px; text-align: center; } .p-button:hover { background: #000; } .p-button span { display: block; } .p-button span::after { content: "\e910"; display: inline-block; font-family: "design_plus"; margin-left: 6px; margin-right: -6px; } @media only screen and (max-width: 991px) { .p-button { height: 45px; line-height: 45px; min-width: 200px; } } /* page-links */ .p-page-links { font-size: 14px; margin-top: 30px; } .p-page-links a, .p-page-links > span { background: #fff; color: #000 !important; display: inline-block; line-height: 40px; text-align: center; margin-top: 3px; min-width: 40px; height: 40px; } .p-page-links > span, .p-page-links a:hover { background: #ee3c00; color: #fff !important; } @media only screen and (max-width: 991px) { .p-page-links { margin-top: 20px; } .p-page-links a, .p-page-links > span { background: #f4f4f4; } } /* pager */ .p-pager { margin-top: 47px; } .p-pager__item { display: inline-block; font-size: 14px; vertical-align: top; } .p-pager__item a, .p-pager__item span { background: #fff; color: #000; display: inline-block; height: 40px; line-height: 40px; margin-top: 3px; min-width: 40px; text-align: center; } .p-pager__item .current, .p-pager__item a:hover { background: #ee3c00; color: #fff; } .p-pager__item .prev, .p-pager__item .next { font-family: "design_plus"; font-size: 12px; } .p-pager.show_date { margin-left: 96px; } @media only screen and (max-width: 991px) { .p-pager { margin-top: 27px; } .p-pager.show_date { margin-left: 0; } } /* social nav */ .p-social-nav__item { display: inline-block; font-size: 16px; margin-right: 16px; } .p-social-nav__item:last-child { margin-right: 0; } .p-social-nav__item a::before { font-family: "design_plus"; } .p-social-nav__item--facebook a::before { content: "\e902"; } .p-social-nav__item--googleplus a::before { content: "\e900"; } .p-social-nav__item--twitter a::before { content: "\e904"; } .p-social-nav__item--instagram a::before { content: "\ea92"; } .p-social-nav__item--pinterest a::before { content: "\e905"; } .p-social-nav__item--youtube a::before { content: "\ea9e"; } .p-social-nav__item--contact a::before { content: "\f003"; } .p-social-nav__item--url a::before { content: "\e88a"; font-size: 120%; margin-bottm: -2px; } .p-social-nav__item--rss a::before { content: "\e90b"; } /* hover effect */ .p-hover-effect__image { -webkit-transition: background 0.5s ease-in; -moz-transition: background 0.5s ease-in; -ms-transition: background 0.5s ease-in; transition: background 0.5s ease-in; overflow: hidden; } .p-hover-effect--type1:hover .p-hover-effect__image, .p-hover-effect--type2:hover .p-hover-effect__image, .p-hover-effect--type3:hover .p-hover-effect__image { -webkit-transition-duration: 0.25s; -webkit-transition-timing-function: ease-out; -moz-transition-duration: 0.25s; -moz-transition-timing-function: ease-out; -ms-transition-duration: 0.25s; -ms-transition-timing-function: ease-out; transition-duration: 0.25s; transition-timing-function: ease-out; } .p-hover-effect--type1 img { -webkit-transform: scale(1); -webkit-transition-property: -webkit-transform, transform, opacity; -webkit-transition-duration: 0.75s; -moz-transform: scale(1); -moz-transition-property: -moz-transform, transform, opacity; -moz-transition-duration: 0.75s; -ms-transform: scale(1); -ms-transition-property: -ms-transform, transform, opacity; -ms-transition-duration: 0.75s; transform: scale(1); transition-property: transform, opacity; transition-duration: 0.75s; vertical-align: middle; } .p-hover-effect--type1 .p-hover-effect__image { -webkit-transition-duration: 0.75s; -moz-transition-duration: 0.75s; -ms-transition-duration: 0.75s; transition-duration: 0.75s; } .p-hover-effect--type2 img { -webkit-transform: scale(1.2); -webkit-transition-property: margin, opacity; -webkit-transition-duration: 0.5s; -moz-transform: scale(1.2); -moz-transition-property: margin, opacity; -moz-transition-duration: 0.5s; -ms-transform: scale(1.2); -ms-transition-property: margin, opacity; -ms-transition-duration: 0.5s; transform: scale(1.2); transition-property: margin, opacity; transition-duration: 0.5s; } .p-hover-effect--type3 img { -webkit-transition-property: opacity; -webkit-transition-duration: 0.5s; -moz-transition-property: opacity; -moz-transition-duration: 0.5s; -ms-transition-property: opacity; -ms-transition-duration: 0.5s; transition-property: opacity; transition-duration: 0.5s; } .p-hover-effect--type3:hover img { opacity: 0.5; } /* blog archive */ .p-blog-archive {} .p-blog-archive__item { margin-bottom: 48px; padding-bottom: 40px; position: relative; } .p-blog-archive__item::after { border-bottom: 1px solid #ddd; content:''; display: block; position: absolute; bottom: 0; left: 0; right: 0; } .p-blog-archive__item:last-child { margin-bottom: 0; } .p-blog-archive__item a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .p-blog-archive__item-date { flex: 0 0 auto; margin-right: 42px; text-align: center; } .p-blog-archive__item__inner { flex: 1 1 auto; } .p-blog-archive__item-thumbnail { margin-bottom: 26px; overflow: hidden; padding-top: 69.4822%; position: relative; width: 100%; } .p-blog-archive__item-thumbnail img { display:block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-blog-archive__item-title { font-size: 30px; font-weight: 500; line-height: 1.4; } .p-blog-archive__item-excerpt { color: #000; font-size: 14px; line-height: 2.4; margin-top: 14px; } @media only screen and (max-width: 991px) { .p-blog-archive__item { margin-bottom: 28px; padding-bottom: 22px; } .p-blog-archive__item::after { left: -992px; right: -992px; } .p-blog-archive__item-date { margin-right: 20px; } .p-blog-archive__item-thumbnail { margin-bottom: 15px; } .p-blog-archive__item-title { font-size: 18px; line-height: 1.6; } .p-blog-archive__item-excerpt { line-height: 2; margin-top: 8px; } } /* entry */ .p-entry > :last-child { margin-bottom: 0; } .p-entry__thumbnail { margin: 0 0 40px 0; position: relative; } .p-entry__thumbnail img { display: block; width: 100%; height: auto; } .p-entry__category { margin-bottom: 40px; } .p-entry__date_title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .p-entry__date { flex: 0 0 auto; margin-right: 45px; text-align: center; } .p-entry__title { flex: 1 1 auto; font-size: 30px; font-weight: 500; line-height: 1.6; } .p-entry__inner { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; margin: 36px 0 50px; padding: 32px 0 50px; } .p-entry__share { margin-bottom: -5px; } .p-entry__body { color: #000; line-height: 2.2; } .p-entry__share + .p-entry__body, .p-entry__body + .p-entry__share { margin-top: 40px; } .p-entry__body > :last-child { margin-bottom: 0; } .p-entry .p-author__box { margin-bottom: 40px; margin-top: 30px; } .p-entry__meta { background: #fff; margin-top: 40px; } .p-entry__nav { margin: 40px 0; } .p-entry__ad { margin-bottom: -30px; margin-top: 50px; } .p-entry__body .p-entry__ad img { max-width: none; width: auto; } .p-entry__next-page { margin-top: 30px; text-align: center; } .p-entry__next-page__link { padding: 0 25px; position: relative; } .p-entry__next-page__link::after { content: '\e910'; font-family: 'design_plus'; position: absolute; right: 11px; } .p-entry__next-page__numbers { display: block; font-size: 16px; text-align: center; } .p-entry__related { margin-bottom: 40px; margin-top: 50px; } .p-entry__related-items { border-left: 1px solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: 1px; } .p-entry__related-items::after { content: ''; } .p-entry__related-item { border-right: 1px solid #ddd; background: #fff; width: 33.3333%; position: relative; } .p-entry__related-item:nth-last-child(-n+3) { border-bottom: 1px solid #ddd; } .p-entry__related-item__thumbnail { margin-left: -1px; margin-right: -1px; overflow: hidden; padding-top: 68.84%; position: relative; } .p-entry__related-item__thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-entry__related-item__title { font-size: 14px; line-height: 1.8; padding: 25px 20px 25px 24px; } @media only screen and (max-width: 991px) { .p-entry__category { margin-bottom: 20px; } .p-entry__thumbnail { margin: 0 -6.253% 20px; } .p-page-header + .l-inner .p-entry__thumbnail { margin-top: -30px; } .p-entry__date { margin-right: 22px; } .p-entry__title { font-size: 18px; } .p-entry__inner { border-bottom: none; margin: 20px 0 32px; padding: 22px 0 0; } .p-entry__body { line-height: 2; } .p-entry__share + .p-entry__body, .p-entry__body + .p-entry__share { margin-top: 20px; } .p-entry .p-author__box { background: #f4f4f4; margin-bottom: 30px; margin-top: 30px; padding: 30px 25px; } .p-entry__meta { background: transparent; margin-bottom: 4px; margin-top: 30px; } .p-entry__nav { margin-bottom: 30px; margin-top: 20px; } .p-entry__ad { margin-bottom: 30px; margin-top: 30px; } .p-entry__related { margin-bottom: 30px; margin-top: 30px; } .p-entry__related-items { margin-top: 0; } .p-entry__related-item { width: 50%; } .p-entry__related-item__title { padding: 10.5px 16px; } .p-entry__related-item:nth-last-child(3) { border-bottom: none; } } /* page */ .p-entry-page__inner { background: #fff; padding: 80px 70px; } .p-entry-page.l-primary .p-entry-page__inner { padding: 80px 50px; } @media (min-width: 992px) { .p-entry-page__inner .p-entry__thumbnail { margin-left: -70px; margin-right: -70px; margin-top: -80px; } .p-entry-page.l-primary .p-entry-page__inner .p-entry__thumbnail { margin-left: -50px; margin-right: -50px; margin-top: -80px; } } @media only screen and (max-width: 991px) { .p-entry-page__inner, .p-entry-page.l-primary .p-entry-page__inner { padding: 0; } .p-entry-page__inner .p-entry__thumbnail { margin-bottom: 30px; } } /* page builder */ .pb_font_family_type2 { font-weight: 600; } .pb_font_family_type3 { font-weight: 500; } /* information */ .p-archive-information { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-archive-information__item { margin-top: 22px; width: 49.15%; width: -webkit-calc(50% - 11px); width: -moz-calc(50% - 11px); width: calc(50% - 11px); } .p-archive-information__item:nth-child(-n+2) { margin-top: 0; } .p-archive-information__item a { background: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; height: 190px; } .p-archive-information__item-info { flex: 1 1 auto; padding: 10px 40px; } .p-archive-information__item-title { font-size: 16px; line-height: 1.7; } .p-archive-information__item-meta { margin-top: 3px; } .p-archive-information__item-thumbnail { flex: 0 0 auto; overflow: hidden; height: 100%; position: relative; width: 47.41%; } .p-archive-information__item-thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-pager-information { margin-top: 45px; } .p-entry__recent-information { margin-top: 50px; } .p-entry__recent-information__list { border-top: 1px solid #ddd; } .p-entry__recent-information__item { border: 1px solid #ddd; border-top: none; } .p-entry__recent-information__item a { background: #fff; display: block; padding: 20px 40px; } .p-entry__recent-information__item-title { font-size: 16px; line-height: 1.7; } .p-entry__recent-information__item-meta { margin-top: 2px; } @media only screen and (max-width: 991px) { .p-archive-information__item { margin-top: 14px; width: 46.875%; width: -webkit-calc(50% - 9px); width: -moz-calc(50% - 9px); width: calc(50% - 9px); } .p-archive-information__item a { display: block; height: auto; } .p-archive-information__item-thumbnail { margin-bottom: 6px; height: auto; padding-top: 68%; width: 100%; } .p-archive-information__item-info { padding: 0; } .p-archive-information__item-title { font-size: 14px; } .p-archive-information__item-meta { margin-top: 1px; } .p-pager-information { margin-top: 22px; } .p-entry__recent-information { margin-top: 30px; } .p-entry__recent-information__item a { padding: 14px 22px; } .p-entry__recent-information__item-title { font-size: 14px; } } /* works gallery */ .p-works-gallery {} .p-works-gallery__item { overflow: hidden; height: 295px; position: relative; width: 295px; } .p-works-gallery__item a { display: block; height: 100%; width: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 998;} .p-works-gallery__item--video a:after, .p-works-gallery__item--youtube a:after{content: '\e939'; color: #fff; font-family: 'design_plus'; font-size: 48px; line-height: 1; margin: -0.5em 0 0 -0.5em; position: absolute; left: 50%; top: 50%; z-index: 999;} .p-works-gallery__item.is-active a { opacity: 1; } .p-works-gallery__thumbnail { height: 100%; overflow: hidden; width: 100%; } .p-works-gallery__thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-works-gallery__caption { background: #000; color: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 16px; line-height: 1.8; min-height: 60px; overflow: hidden; padding: 16px 22px; word-break: break-all; position: absolute; left: 0; right: 0; top: 100%; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 999;} /*.p-works-gallery__item--video::after, .p-works-gallery__item--youtube::after { content: '\e939'; color: #fff; font-family: 'design_plus'; font-size: 48px; line-height: 1; margin: -0.5em 0 0 -0.5em; position: absolute; left: 50%; top: 50%; z-index: 999;}*/ @media (min-width: 992px) { .p-entry-works__gallery .p-works-gallery__item { width: 50%; } } @media only screen and (max-width: 991px) { .p-works-gallery { margin: 0 -6.253%; } .p-works-gallery__item { width: 50%; } } @media only screen and (max-width: 768px) { .p-works-gallery__item--video::after, .p-works-gallery__item--youtube::after { font-size: 30px; } } @media only print { .p-works-gallery__item a { opacity: 1 !important; } } /* works gallery modal */ .p-gallery-modal { display: none; position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 99999; -webkit-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; } .p-gallery-modal.is-active { display: -webkit-box !important; display: -webkit-flex; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .p-gallery-modal__overlay { background: rgba(0, 0, 0, 0.5); position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 1; } .p-gallery-modal__inner { margin: 0 60px 60px; max-height: 80%; max-height: 80vh; max-height: calc(100vh - 60px); max-width: 80%; max-width: calc(100% - 120px); overflow: visible; position: relative; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .p-gallery-modal__contents { max-height: 100%; max-height: 80vh; overflow: hidden; max-width: 100%; min-width: 300px; } .p-gallery-modal__item { overflow: hidden; } .p-gallery-modal__item--image { pointer-events: none; } .p-gallery-modal__item--image img { height: auto; max-height: 100%; max-height: 80vh; max-width: 100%; width: auto; } .p-gallery-modal__item--video, .p-gallery-modal__item--youtube { max-width: 100%; padding-top: 56.25%; position: relative; width: 1180px; } .p-gallery-modal__item--video .p-gallery-modal__item__inner, .p-gallery-modal__item--youtube .p-gallery-modal__item__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .p-gallery-modal__item--video video, .p-gallery-modal__item--youtube iframe { height: 100%; width: 100%; } .p-gallery-modal__item--embed iframe { max-height: 80vh; max-width: 100%; } .p-gallery-modal__close, .p-gallery-modal__prev, .p-gallery-modal__next { background: transparent; border: none; cursor: pointer; font-family: 'design_plus'; height: 60px; line-height: 60px; padding: 0; text-align: center; width: 60px; } .p-gallery-modal__prev, .p-gallery-modal__next { color: #fff; font-size: 24px; margin-top: -30px; position: absolute; top: 50%; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .p-gallery-modal__prev { left: -60px; } .p-gallery-modal__next { right: -60px; } .p-gallery-modal__contents-bottom { background: #fff; display: -webkit-box !important; display: -webkit-flex; display: -ms-flexbox !important; display: flex !important; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 60px; position: absolute; left: 0; right: 0; top: 100%; } .p-gallery-modal__title { flex: 0 2 auto; color: #000; font-size: 16px; font-weight: 600; line-height: 1.4; padding: 8px 0 8px 30px; word-break: break-all; } .p-gallery-modal__desc { flex: 1 3 auto; color: #666; font-size: 15px; line-height: 1.4; padding: 8px 0 8px 30px; word-break: break-all; } .p-gallery-modal__title:empty + .p-gallery-modal__desc { padding-left: 0; } .p-gallery-modal__close { font-size: 20px; flex: 0 0 auto; margin-left: auto; } @media only screen and (min-width: 783px) { body.admin-bar .p-gallery-modal { top: 32px; } } @media only screen and (max-width: 782px) { body.admin-bar .p-gallery-modal { top: 46px; } } @media only screen and (max-width: 767px) { .p-gallery-modal__inner { margin: 0 40px 40px; max-height: calc(100% - 80px); max-width: calc(100% - 80px); } .p-gallery-modal__prev, .p-gallery-modal__next { height: 40px; line-height: 40px; margin-top: -20px; width: 40px; } .p-gallery-modal__prev { left: -40px; } .p-gallery-modal__next { right: -40px; } .p-gallery-modal__contents { min-width: 200px; } .p-gallery-modal__contents-bottom { min-height: 45px; } .p-gallery-modal__title { font-size: 14px; padding-left: 16px; } .p-gallery-modal__desc { font-size: 12px; padding-left: 16px; } .p-gallery-modal__close { height: 45px; line-height: 45px; width: 45px; } } /* works archive */ .p-archive-works { background: #fff; } .p-archive-works__desc { font-size: 14px; line-height: 2.6; padding: 90px 30px; text-align: center; } .p-works-gallery__filter { padding: 50px 30px; text-align: center; } .p-works-gallery__filter-item { display: inline-block; vertical-align: middle; } .p-works-gallery__filter-item span { border-radius: 20px; cursor: pointer; display: inline-block; font-size: 16px; line-height: 1.7; min-width: 80px; padding: 6.5px 24px; text-align: center; } .p-works-gallery__filter-item:hover span { color: #666; } .p-works-gallery__filter-item.is-active span { background: #ee3c00; color: #fff !important; } .p-archive-works__desc + .p-works-gallery__filter { margin-top: -56px; } @media only screen and (max-width: 991px) { .p-archive-works { background: transparent; } .p-page-header + .p-archive-works { margin-top: -30px; } .p-breadcrumb + .p-archive-works { margin-top: -22px; } .p-archive-works__desc { line-height: 2; padding: 22px 0; } .p-works-gallery__filter { padding: 22px 0; text-align: center; } .p-works-gallery__filter-item { display: block; margin-bottom: 8px; } .p-works-gallery__filter-item:last-child { margin-bottom: 0; } .p-works-gallery__filter-item span { min-width: 65px; padding: 3px 20px; } .p-archive-works__desc + .p-works-gallery__filter { margin-top: 0; padding-top: 0; } body.post-type-archive-works .p-footer-info.has-bg-image { margin-top: -40px; } } /* works single */ .p-entry-works { background: #fff; } .p-entry-works__title { font-size: 40px; line-height: 1.2; margin-bottom: 28px; } .p-entry-works__body { line-height: 2.6; } .p-entry-works__contents .p-entry-works__notes { margin-top: 80px; } .p-entry-works__contents .p-entry-works__notes dt { font-size: 16px; margin: 11px 0 0; } .p-entry-works__contents .p-entry-works__notes dt p { font-weight: 600; } .p-entry-works__contents .p-entry-works__notes dd { font-size: 14px; margin: 0; } .p-entry-works__contents .p-entry-works__notes dt + dd { margin-top: -4px; } .p-entry-works__contents .p-entry-works__notes p { margin-bottom: 1em; } .p-entry-works__contents .p-entry-works__notes p:last-child { margin-bottom: 0; } .p-entry-works__contents .p-entry__share { margin-top: 28px; } .p-entry-works__contents .p-social-nav { margin-top: 42px; } .p-entry-works__pager .p-pager__item a { background: #ccc; color: #fff; font-family: 'design_plus'; font-size: 16px; height: 50px; line-height: 50px; margin-top: 0; width: 50px; } .p-entry-works__pager .p-pager__item a:hover { background: #000; color: #fff; } .p-entry-works__pager .p-pager__item--index a { font-size: 26px; } @media (min-width: 992px) { .p-entry-works { background: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .p-entry-works__gallery { flex: 0 0 50%; width: 50%; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .p-entry-works__contents { flex: 1 1 auto; position: relative; } .p-entry-works__contents__inner { padding: 85px 11.8644% 100px; } .p-entry-works__pager { margin-top: 0; position: absolute; bottom: 0; left: 11.8644%; } } @media only screen and (max-width: 991px) { .p-entry-works__gallery { margin-bottom: 20px; } .p-entry-works__title { font-size: 34px; margin-bottom: 2px; } .p-entry-works__contents .p-entry-works__notes { margin-top: 32px; } .p-entry-works__contents .p-entry__share { margin-top: 20px; } .p-entry-works__contents .p-social-nav { margin-top: 40px; } .p-entry-works__contents .p-entry-works__body ~ .p-entry__share { margin-top: 40px; } .p-entry-works__pager .p-pager__item a { height: 45px; line-height: 45px; width: 45px; } .p-entry-works__pager { margin-top: 48px; text-align: center; } } /* voice */ .p-archive-voice__item { background: #fff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; min-height: 210px; margin-bottom: 20px; padding: 30px 50px; } .p-archive-voice__item:last-child { margin-bottom: 0; } .p-archive-voice__item-thumbnail { border-radius: 50%; flex: 0 0 auto; height: 150px; margin-right: 30px; overflow: hidden; width: 150px; } .p-archive-voice__item-thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; } .p-archive-voice__item-title { flex: 0 0 auto; font-size: 16px; font-weight: 600; line-height: 1.8; width: 23.14%; } .p-archive-voice__item-desc { flex: 1 1 auto; line-height: 2.2; margin-left: 30px; } .p-pager-voice { margin-top: 45px; } @media only screen and (max-width: 991px) { .p-archive-voice { margin-top: -30px; } .p-archive-voice__item { display: block; min-height: auto; margin-bottom: 0; padding: 30px 0 22px; position: relative; } .p-archive-voice__item::after { border-bottom: 1px solid #ddd; content:''; display: block; position: absolute; bottom: 0; left: -992px; right: -992px; } .p-archive-voice__item-thumbnail { margin: 0 auto 16px; } .p-archive-voice__item-title { text-align: center; width: 100%; } .p-archive-voice__item-desc { line-height: 2; margin-left: 0; margin-top: 15px; } .p-pager-voice { margin-top: 22px; } } /* modal cta */ .p-modal-cta { background: rgba(0, 0, 0, 0.6); display: none; position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 99999; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; } .p-modal-cta.is-active { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .p-modal-cta__contents { background: #fff; margin: 60px; max-height: 80%; max-height: 80vh; max-width: 80%; min-width: 300px; overflow: auto; padding: 50px; } .p-modal-cta__image-anchor { display: block; } .p-modal-cta__image { display: block; margin: -40px; } .p-modal-cta__image img { display: block; height: auto; width: 100%; } .p-modal-cta__catch { line-height: 1.58; margin: 0; } .p-modal-cta__desc { margin: 0 0 -0.6em; } .p-modal-cta__button { margin: 0; text-align: center; } .p-modal-cta__image-anchor + *, .p-modal-cta__image + * { margin-top: 82px; } .p-modal-cta__catch + * { margin-top: 5px; } * + .p-modal-cta__button { margin-top: 18px; } .p-modal-cta--type2 .p-modal-cta__contents, .p-modal-cta--type3 .p-modal-cta__contents { background: transparent; padding: 0 !important; } .p-modal-cta__contents--video, .p-modal-cta__contents--youtube { overflow: visible; width: 1040px; } .p-modal-cta__contents--video video { height: auto; max-height: 80vh; width: 100%; } .p-modal-cta__contents--youtube__inner { padding-top: 56.25%; position: relative; } .p-modal-cta__contents--youtube__inner iframe { height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .p-modal-cta__close { background: transparent; border: none; color: #fff; cursor: pointer; font-size: 30px; font-family: 'design_plus'; line-height: 60px; padding: 0; text-align: center; width: 60px; position: fixed; right: 0; top: 0; } @media only screen and (max-width: 991px) { .p-modal-cta__contents { margin: 60px 22px 22px; max-height: calc(100vh - 82px); max-width: calc(100% - 44px); min-width: 200px; } } @media only screen and (max-width: 768px) { .p-modal-cta__contents { padding: 30px; } .p-modal-cta__image { margin: -20px; } .p-modal-cta__image-anchor + *, .p-modal-cta__image + * { margin-top: 40px; } .p-modal-cta__desc { margin: 0 0 -0.5em; } } @media only screen and (min-width: 782px) { body.admin-bar .p-modal-cta { top: 32px; } body.admin-bar .p-modal-cta__close { top: 32px; } } @media only screen and (max-width: 782px) { body.admin-bar .p-modal-cta { top: 0; } body.admin-bar .p-modal-cta__close { top: 46px; } } /* front page */ body.home .l-main { background: transparent; } body.home .p-footer-info--no-bg { padding-top: 50px; } @media only screen and (max-width: 991px) { body.home .l-main { padding-bottom: 0; } body.home .p-footer-info--no-bg { padding-top: 36px; } } /* index header content */ .p-header-content__image { display: block; } .p-header-content__image img { display: block; height: auto; width: 100%; } .p-header-content, .p-header-content--mobile, .p-header-content__overlay { display: block; height: 100%; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .p-header-content__overlay { z-index: 2; } .p-header-content, .p-header-content--mobile { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; pointer-events: none; text-align: center; user-select: none; z-index: 3; } .p-header-content__inner { max-height: 100%; } .p-header-content__logo { margin-bottom: 21px; } .p-header-content__logo img { display: inline-block !important; height: auto; max-width: 100%; } .p-header-content__catch { color: #fff; font-size: 65px; line-height: 1.5; margin-bottom: -6px; } .p-header-content__desc { color: #fff; font-size: 28px; line-height: 1.5; } .p-header-content__button { margin-top: 21px; pointer-events: auto; } .p-header-content > :first-child { margin-top: 0; } .p-header-content > :last-child { margin-bottom: 0; } .p-header-content__catch--type1, .p-header-content__desc--type1 { text-align: left; } .p-header-content__catch--type2, .p-header-content__desc--type2 { text-align: center; } .p-header-content__catch--type3, .p-header-content__desc--type3 { text-align: right; } .p-header-content__catch-vertical { text-align: left !important; white-space: nowrap; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; } .p-header-content__catch-vertical.p-header-content__catch--type1 { margin-right: auto; } .p-header-content__catch-vertical.p-header-content__catch--type2 { margin-left: auto; margin-right: auto; } .p-header-content__catch-vertical.p-header-content__catch--type3 { margin-left: auto; } @media (min-width: 768px) { .has-mobile-content .p-header-content--mobile { display: none; } .p-header-content__mobile-arrow { display: none; } } @media only screen and (max-width: 767px) { .p-header-content__logo { margin-bottom: 12px; } .p-header-content__catch { font-size: 35px; margin-bottom: -3px; } .p-header-content__desc { font-size: 28px; } .p-header-content__button { margin-top: 8px; } .has-mobile-content .p-header-content { display: none; } .p-header-content--mobile { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .p-header-content--mobile .p-header-content__logo {} .p-header-content--mobile .p-header-content__catch { color: #fff; line-height: 1.2; } .p-header-content__mobile-arrow { cursor: pointer; text-align: center; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; } .p-header-content__mobile-arrow::before { content: '\e90e'; color: #fff; display: inline-block; font-family: "design_plus"; font-size: 20px; line-height: 60px; } } /* index header video */ .p-index-video { padding-top: 56.25%; overflow: hidden; position: relative; } .p-header-content__video { display: block; height: 100%; width: 100%; position: absolute; left: 0; top: 0; } .p-header-content__video-video { object-fit: cover; } .p-header-content__video-youtube { opacity: 0; } @media only screen and (max-width: 767px) { .p-index-video { padding: 0; height: 100vh; } } /* index slider */ .p-index-slider { position: relative; } .p-index-slider__item { overflow: hidden; position: relative; } .p-index-slider__item:nth-child(n+2) { display: none; } .slick-initialized .p-index-slider__item:nth-child(n+2) { display: block; } @media only screen and (max-width: 767px) { .p-index-slider { height: 100vh; } .p-header-content__image > img { display: block; height: 100vh; width: 100%; object-fit: cover; } } /* index slider slice effect */ .p-header-content__image { display: block; position: relative; } .p-header-content__image > img { /*opacity: 0;*/ } .p-header-content__image-slice { position: absolute; bottom: 0; left: 0; right: 0; top: 0; } .p-header-content__image-slice--1, .p-header-content__image-slice--2, .p-header-content__image-slice--3, .p-header-content__image-slice--4, .p-header-content__image-slice--5, .p-header-content__image-slice--6, .p-header-content__image-slice--7, .p-header-content__image-slice--8 { height: 100%; overflow: hidden; width: 12.5%; position: absolute; bottom: 0; top: 0; } .p-header-content__image-slice--1 { left: 0; right: 87.5%; } .p-header-content__image-slice--2 { left: 12.5%; right: 75%; } .p-header-content__image-slice--3 { left: 25%; right: 62.5%; } .p-header-content__image-slice--4 { left: 37.5%; right: 50%; } .p-header-content__image-slice--5 { left: 50%; right: 37.5%; } .p-header-content__image-slice--6 { left: 62.5%; right: 25%; } .p-header-content__image-slice--7 { left: 75%; right: 12.5%; } .p-header-content__image-slice--8 { left: 87.5%; right: 0; } .p-header-content__image-slice--1 div, .p-header-content__image-slice--2 div, .p-header-content__image-slice--3 div, .p-header-content__image-slice--4 div, .p-header-content__image-slice--5 div, .p-header-content__image-slice--6 div, .p-header-content__image-slice--7 div, .p-header-content__image-slice--8 div { height: 100%; overflow: hidden; position: relative; width: 100%; -webkit-transition-property: left, top, -webkit-transform, transform; -webkit-transition-duration: 0.6s; -webkit-transition-timing-function: ease-in-out; -moz-transition-property: left, top, -moz-transform, transform; -moz-transition-duration: 0.6s; -moz-transition-timing-function: ease-in-out; -ms-transition-property: left, top, -ms-transform, transform; -ms-transition-duration: 0.6s; -ms-transition-timing-function: ease-in-out; transition-property: left, top, transform; transition-duration: 0.6s; transition-timing-function: ease-in-out; } .p-header-content__image-slice--1 img, .p-header-content__image-slice--2 img, .p-header-content__image-slice--3 img, .p-header-content__image-slice--4 img, .p-header-content__image-slice--5 img, .p-header-content__image-slice--6 img, .p-header-content__image-slice--7 img, .p-header-content__image-slice--8 img { display: block; height: 100%; width: auto; position: absolute; bottom: 0; top: 0; } .p-header-content__image-slice--1 img { left: 0; } .p-header-content__image-slice--2 img { left: -100%; } .p-header-content__image-slice--3 img { left: -200%; } .p-header-content__image-slice--4 img { left: -300%; } .p-header-content__image-slice--5 img { left: -400%; } .p-header-content__image-slice--6 img { left: -500%; } .p-header-content__image-slice--7 img { left: -600%; } .p-header-content__image-slice--8 img { left: -700%; } .p-index-slider--type1 .p-index-slider__item.slick-active, .p-index-slider--type1 .p-index-slider__item.slick-last-active, .p-index-slider--type2 .p-index-slider__item.slick-active, .p-index-slider--type2 .p-index-slider__item.slick-last-active { opacity: 1 !important; -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; transition: none !important; } .p-index-slider--type1 .p-header-content__image > img, .p-index-slider--type2 .p-header-content__image > img { opacity: 0; } .p-index-slider--type1 .p-index-slider__item.is-active .p-header-content__image > img, .p-index-slider--type2 .p-index-slider__item.is-active .p-header-content__image > img { opacity: 1; } .p-index-slider--type1 .p-header-content__image-slice--1 div, .p-index-slider--type1 .p-header-content__image-slice--3 div, .p-index-slider--type1 .p-header-content__image-slice--5 div, .p-index-slider--type1 .p-header-content__image-slice--7 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--2 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--4 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--6 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--8 div { left: -100%; } .p-index-slider--type1 .p-header-content__image-slice--2 div, .p-index-slider--type1 .p-header-content__image-slice--4 div, .p-index-slider--type1 .p-header-content__image-slice--6 div, .p-index-slider--type1 .p-header-content__image-slice--8 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--1 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--3 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--5 div, .p-index-slider--type1 .p-index-slider__item.slick-last-active .p-header-content__image-slice--7 div { left: 100%; } .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--1 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--2 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--3 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--4 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--5 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--6 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--7 div, .p-index-slider--type1 .p-index-slider__item.slick-active .p-header-content__image-slice--8 div { left: 0; } .p-index-slider--type2 .p-header-content__image-slice--1 div, .p-index-slider--type2 .p-header-content__image-slice--3 div, .p-index-slider--type2 .p-header-content__image-slice--5 div, .p-index-slider--type2 .p-header-content__image-slice--7 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--2 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--4 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--6 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--8 div { top: 100%; } .p-index-slider--type2 .p-header-content__image-slice--2 div, .p-index-slider--type2 .p-header-content__image-slice--4 div, .p-index-slider--type2 .p-header-content__image-slice--6 div, .p-index-slider--type2 .p-header-content__image-slice--8 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--1 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--3 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--5 div, .p-index-slider--type2 .p-index-slider__item.slick-last-active .p-header-content__image-slice--7 div { top: -100%; } .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--1 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--2 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--3 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--4 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--5 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--6 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--7 div, .p-index-slider--type2 .p-index-slider__item.slick-active .p-header-content__image-slice--8 div { bottom: 0; top: 0; } .p-index-slider--type3 .p-index-slider__item { -webkit-transition-timing-function: ease-in-out !important; -moz-transition-timing-function: ease-in-out !important; -ms-transition-timing-function: ease-in-out !important; transition-timing-function: ease-in-out !important; } .p-index-slider--type3 .p-header-content__image-slice div { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } .p-index-slider--type3 .p-index-slider__item.slick-active .p-header-content__image-slice div { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* index header content transition */ .p-index-slider .p-header-content__inner > * { opacity: 0; -webkit-transition: opacity 0.3s ease; -moz-transition: opacity 0.3s ease; -ms-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } .p-index-slider__item.is-active .p-header-content__inner > * { opacity: 1; -webkit-transition-duration: 0.75s; -moz-transition-duration: 0.75s; -ms-transition-duration: 0.75s; transition-duration: 0.75s; } .p-index-slider__item.is-active .p-header-content__inner > *:nth-child(1) { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1s; } .p-index-slider__item.is-active .p-header-content__inner > *:nth-child(2) { -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s; } .p-index-slider__item.is-active .p-header-content__inner > *:nth-child(3) { -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; transition-delay: 3s; } .p-index-slider__item.is-active .p-header-content__inner > *:nth-child(4) { -webkit-transition-delay: 4s; -moz-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s; } .p-index-slider.is-active .p-header-content--mobile .p-header-content__inner > * { opacity: 1; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s; } .p-index-video .p-header-content__inner > * { opacity: 0; -webkit-transition: opacity 0.75s ease; -moz-transition: opacity 0.75s ease; -ms-transition: opacity 0.75s ease; transition: opacity 0.75s ease; } .p-index-video.is-active .p-header-content__inner > *:nth-child(1) { opacity: 1; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; transition-delay: 2s; } .p-index-video.is-active .p-header-content__inner > *:nth-child(2) { opacity: 1; -webkit-transition-delay: 4s; -moz-transition-delay: 4s; -ms-transition-delay: 4s; transition-delay: 4s; } .p-index-video.is-active .p-header-content__inner > *:nth-child(3) { opacity: 1; -webkit-transition-delay: 6s; -moz-transition-delay: 6s; -ms-transition-delay: 6s; transition-delay: 6s; } .p-index-video.is-active .p-header-content__inner > *:nth-child(4) { opacity: 1; -webkit-transition-delay: 8s; -moz-transition-delay: 8s; -ms-transition-delay: 8s; transition-delay: 8s; } /* contents builder */ .p-cb__item { margin-bottom: 100px; position: relative; } .p-cb__item:first-child, .p-index-slider + .p-cb__item, .p-index-video + .p-cb__item { padding-top: 100px; } .p-cb__item:last-child { margin-bottom: 0; } .p-cb__item.has-bg { background-position: center center; background-size: cover; padding-bottom: 100px; padding-top: 100px; } .p-cb__item.has-bg-image { background-position: center center; background-repeat: no-repeat; background-size: cover; } .p-cb__item.has-bg-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; top: 0; z-index: 0; } .p-cb__item.has-bg + .p-cb__item.has-bg { margin-top: -100px; } .p-cb__item.has-bg .p-cb__item-inner { position: relative; z-index: 1; } .p-cb__item-inner > :last-child { margin-bottom: 0; } .p-cb__item-headline { font-size: 42px; font-weight: 500; line-height: 1.5; margin-bottom: 34px; margin-top: -0.25em; opacity: 0; text-align: center; } .p-cb__item.is-active .p-cb__item-headline { opacity: 1; -webkit-transition: opacity 1s ease 0.5s; -moz-transition: opacity 1s ease 0.5s; -ms-transition: opacity 1s ease 0.5s; transition: opacity 1s ease 0.5s; } .p-cb__item-desc { line-height: 2.6; margin-bottom: 38px; text-align: center; } .p-cb__item-desc p { margin-bottom: 1em; } .p-cb__item-desc p:last-child { margin-bottom: 0; } .p-cb__item-headline + .p-cb__item-desc { margin-top: -26px; } .p-cb__item.has-bg .p-cb__item-headline { margin-top: -4px; } .p-cb__item-button__wrapper { margin-top: 50px; text-align: center; } @media only screen and (max-width: 991px) { .p-cb__item { margin-bottom: 40px; } .p-cb__item:first-child, .p-index-slider + .p-cb__item, .p-index-video + .p-cb__item { padding-top: 40px; } .p-cb__item:last-child { padding-bottom: 40px; } .p-cb__item.has-bg { padding-bottom: 40px; padding-top: 40px; } .p-cb__item.has-bg + .p-cb__item.has-bg { margin-top: -40px; } .p-cb__item-headline { font-size: 30px; margin-bottom: 18px; } .p-cb__item-desc { line-height: 2; margin-bottom: 20px; text-align: left; } .p-cb__item-headline + .p-cb__item-desc { margin-top: -16px; } .p-cb__item-button__wrapper { margin-top: 28px; } } @media only print { .p-cb__item-headline { opacity: 1 !important; } } /* contents builder blog/information */ .p-index-archive { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .p-cb__item-headline + .p-index-archive.has-date-top, .p-cb__item-desc + .p-index-archive.has-date-top { margin-top: -8px; } .p-index-archive__item { margin: 0 2.2666% 26px 0; width: 23.30%; } .p-index-archive__item-thumbnail { overflow: hidden; padding-top: 69.09%; position: relative; width: 100%; } .p-index-archive__item-thumbnail img { display:block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-index-archive__item-info { padding-top: 15px; } .p-index-archive__item-title { font-size: 16px; line-height: 1.7; } .p-index-archive__item-meta { margin-top: 4px; } .p-index-archive.has-date-top .p-index-archive__item { margin-bottom: 31px; margin-top: 105px; position: relative; } .p-index-archive.has-date-top .p-index-archive__item-date { display: block; text-align: center; position: absolute; left: 0; right: 0; top: -105px; } .p-cb__item.has-bg .p-index-archive__item a { background: #fff; display: block; height: 100%; } .p-cb__item.has-bg .p-index-archive__item-info { padding: 23px 24px 26px; } @media (min-width: 992px) { .p-index-archive__item:nth-child(4n) { margin-right: 0; } .p-index-archive__item:nth-last-child(-n+4) { margin-bottom: 0 !important; } .p-index-archive + .p-cb__item-button__wrapper { margin-top: 44px; } .p-cb__item.has-bg .p-cb__item-button__wrapper { margin-top: 50px; } } @media only screen and (max-width: 991px) { .p-cb__item-headline + .p-index-archive.has-date-top, .p-cb__item-desc + .p-index-archive.has-date-top { margin-top: -6px; } .p-index-archive__item { margin: 0 6.25% 14px 0; width: 46.875%; } .p-index-archive__item:nth-child(2n) { margin-right: 0; } .p-index-archive__item:nth-last-child(-n+2) { margin-bottom: 0 !important; } .p-index-archive__item-info { padding-top: 6px; } .p-index-archive__item-title { font-size: 14px; } .p-index-archive__item-meta { margin-top: 2px; } .p-index-archive.has-date-top .p-index-archive__item { margin-bottom: 10px; margin-top: 76px; position: relative; } .p-index-archive.has-date-top .p-index-archive__item-date { top: -76px; } .p-index-archive.has-date-top .p-index-archive__item-info { padding-top: 10px !important; } .p-index-archive.has-date-top .p-index-archive__item-meta { margin-top: 4px; } .p-cb__item.has-bg .p-index-archive__item a { background: transparent; } .p-cb__item.has-bg .p-index-archive__item-info { padding: 6px 0 0; } .p-index-archive + .p-cb__item-button__wrapper { margin-top: 16px; } } /* contents builder carousel */ .p-index-carousel { margin: 0 -30px; overflow: visible !important; } .p-index-carousel__item { float: left; padding: 0 30px; width: 333px; } .p-index-carousel__item-thumbnail { border-radius: 50%; height: 150px; margin: 0 auto 24px; overflow: hidden; width: 150px; } .p-index-carousel__item-thumbnail img { display: block; height: 100%; width: 100%; object-fit: cover; } .p-index-carousel__item-title { font-size: 16px; font-weight: 600; line-height: 1.8; text-align: center; } .p-index-carousel__item-desc { margin-top: 20px; } .p-index-carousel .slick-list { clip-path: inset(0 30px 0 30px); } .p-index-carousel .slick-prev { left: -36px; } .p-index-carousel .slick-next { right: -36px; } .p-index-carousel.has-thumbnail .slick-arrow { top: 154px; } @media (min-width: 992px) { .p-cb__item--voice_carousel .p-cb__item-button__wrapper { margin-top: 41px; } } @media only screen and (max-width: 991px) { .p-index-carousel { margin: 0 -6.25%; } .p-index-carousel__item { padding: 0; } .p-index-carousel__item-thumbnail { margin-bottom: 22px; } .p-index-carousel__item-title, .p-index-carousel__item-desc { padding: 0 5.5556%; } .p-index-carousel__item-desc { margin-top: 16px; } .p-index-carousel .slick-list { clip-path: inset(0 0 0 0); } .p-index-carousel .slick-prev { left: -5px; } .p-index-carousel .slick-next { right: -5px; } .p-index-carousel.has-thumbnail .slick-arrow { top: 75px; } } /* contents builder works */ .p-cb__item--works .p-works-gallery__filter { margin-top: -4px; padding-top: 0; } /* contents builder about */ .p-index-about__images { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 40px; } .p-index-about__image { display: block; margin: 0 25px; width: 300px; } .p-index-about__image__inner { border-radius: 50%; overflow: hidden; padding-top: 100%; position: relative; width: 100%; /* safari bug fix */ -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .p-index-about__image__inner img { display: block; height: 100%; width: 100%; object-fit: cover; position: absolute; left: 0; top: 0; } .p-index-about__image-label { color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; opacity: 0; font-size: 30px; height: 100%; line-height: 1.5; text-align: center; width: 100%; position: absolute; left: 0; top: 0; z-index: 2; } a:hover .p-index-about__image-label { opacity: 1; } .p-cb__item--about .p-cb__item-desc2 { margin-bottom: 0; } .p-cb__item--about .p-cb__item-button__wrapper { margin-top: 40px; } @media only screen and (max-width: 991px) { .p-index-about__image { width: 200px; } .p-index-about__image + .p-index-about__image { margin-left: 40px; } .p-index-about__image-label { font-size: 20px; } } @media only screen and (max-width: 768px) { .p-index-about__images { display: block; margin-bottom: 22px; } .p-index-about__image, .p-index-about__image + .p-index-about__image { margin: 0 auto 26px; } .p-index-about__image:last-child { margin-bottom: 0; } .p-cb__item--about .p-cb__item-button__wrapper { margin-top: 22px; } } /* contents builder pr */ .p-cb__item--pr .p-cb__item-inner { background: #f4f4f4; padding: 70px 100px; } .p-index-pr__image { display: block; margin: -70px -100px 43px; } .p-index-pr__image img { display: block; height: auto; width: 100%; } .p-cb__item--pr .p-cb__item-headline { margin-bottom: 28px; } .p-cb__item--pr .p-cb__item-desc { margin-bottom: 39px; } .p-index-pr__map { display: block; height: 480px; margin-bottom: 40px; max-height: 80vh; position: relative; width: 100%; } .p-index-pr__map-custom-marker-inner { border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 18px; height: 80px !important; text-align: center; width: 80px !important; position: absolute; top: -94px; left: -40px; } .p-index-pr__map-custom-marker-inner::after { border-color: #000000 transparent transparent transparent; border-style: solid; border-width: 16px 5px 0 5px; content: ''; display: block; height: 0; margin: auto; width: 0; position: absolute; right: 0; bottom: -15px; left: 0; } .p-index-pr__map-link { margin-top: 50px; margin-bottom: 40px; text-align: center; } .p-index-pr__map-link a { background: #000; color: #fff; display: inline-block; height: 60px; line-height: 60px; min-width: 250px; padding: 0 15px; text-align: center; text-decoration: none !important; } .p-index-pr__map-link a::before { content: "\e927"; display: inline; font-family: "design_plus"; margin-right: 7px; } .p-index-pr__map-desc { line-height: 2.6; text-align: center; } .p-cb__item--pr .p-cb__item-button__wrapper { margin-top: 38px; } @media only screen and (max-width: 991px) { .p-cb__item--pr { background: #f4f4f4; padding-top: 0 !important; padding-bottom: 40px; } .p-cb__item--pr .p-cb__item-inner { background: transparent; padding: 0; } .p-cb__item--pr { padding-bottom: 40px; } .p-cb__item--pr + .p-cb__item--pr { margin-top: -40px; } .p-index-pr__image { margin: 0 -6.25% 20px; } .p-cb__item--pr .p-cb__item-headline { margin-bottom: 18px; } .p-cb__item--pr .p-cb__item-desc { margin-bottom: 22px; } .p-cb__item--pr .p-cb__item-headline + .p-cb__item-desc { margin-top: -14px; } .p-index-pr__map { margin-bottom: 24px; } .p-index-pr__map-link { margin-top: 30px; margin-bottom: 24px; } .p-index-pr__map-link a { font-size: 12px; height: 45px; line-height: 45px; min-width: 200px; } .p-index-pr__map-desc { line-height: 2; } .p-cb__item--pr .p-cb__item-button__wrapper { margin-top: 22px; } } @media screen and (max-width: 500px) { .p-index-pr__map { height: 200px; } } /* widget */ .p-widget { font-size: 14px; line-height: 1.7; } .p-widget-sidebar { margin-bottom: 50px; } .p-widget-sidebar:last-child { margin-bottom: 0; } @media only screen and (max-width: 991px) { .p-widget-sidebar { margin-bottom: 28px; } } /* widget title */ .p-widget__title { border-left: 4px solid #ee3c00; font-size: 16px; font-weight: 500; line-height: 1.7; margin-bottom: 20px; padding: 6.5px 0 6.5px 17px; position: relative; } @media only screen and (max-width: 991px) { .p-widget__title { margin-bottom: 18px; } } /* default widget */ .p-widget p { margin-bottom: 0.4em; } .p-widget ul { margin-bottom: -12px; } .p-widget li { margin-bottom: 12px; } .p-widget ul ul { margin-bottom: 12px; margin-top: 12px; padding-left: 0.75em; } .p-widget img { display: block; height: auto; max-width: 100%; } .p-widget .screen-reader-text { display: none; } .p-widget .calendar_wrap { text-align: center; } .p-widget .calendar_wrap caption { margin-bottom: 20px; } .p-widget .calendar_wrap tbody { line-height: 1.8; margin-bottom: 20px; } .p-widget .calendar_wrap tfoot { line-height: 1.8; } .p-widget .searchform { position: relative; } .p-widget .searchform #s { background: #fff; border: 1px solid #ddd; border-right: none; border-radius: 0; height: 45px; line-height: 45px; padding: 0 15px; width: -webkit-calc(100% - 45px); width: calc(100% - 45px); } .p-widget .searchform #searchsubmit { background: #fff; border: 1px solid #ddd; border-left: none; border-radius: 0; color: #000; cursor: pointer; font-family: "design_plus"; font-size: 16px; height: 45px; padding: 0; width: 45px; position: absolute; top: 0; right: 0; z-index: 2; } @media only screen and (max-width: 991px) { .p-widget .searchform #s { height: 40px; line-height: 40px; width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } .p-widget .searchform #searchsubmit { height: 40px; width: 40px; } } /* widget ad */ .tcdw_ad_widget img { margin: 0 auto; } /* widget categories */ .p-widget-categories { border: 1px solid #ddd; background: #fff; border-top: none; margin: 0 !important; padding: 0; } .p-widget-categories li { border-top: 1px solid #ddd; margin: 0 !important; } .p-widget-categories li a { display: block; font-weight: normal; padding: 12.5px 22px; text-decoration: none; } .p-widget-categories li a:hover { background: #eee; color: #000; } .p-widget-categories .has-children { position: relative; } .p-widget-categories .has-children > a { padding-right: 32px; } .p-widget-categories .has-children .toggle-children { cursor: pointer; display:block; line-height: 48px; padding-right: 15px; position: absolute; top: 0; right: 0; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; } .p-widget-categories .has-children .toggle-children::before { content: '\e90e'; font-family: "design_plus"; font-size: 14px; opacity: 0.7; } .p-widget-categories .has-children.is-active > .toggle-children { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .p-widget-categories .children { margin: 0 !important; padding: 0 !important; } .p-widget-categories .children a { padding-left: 34px; } .p-widget-categories .children .children a { padding-left: 46px; } .p-widget-categories .children .children .children { padding-left: 58px; } /* widget dropdown */ .p-dropdown__title { border: 1px solid #ddd; background: #fff; line-height: 50px; height: 50px; padding: 0 22px; position: relative; } .p-dropdown__title::after { content: "\e90e"; font-family: "design_plus"; position: absolute; right: 17px; -webkit-transition: -webkit-transform 0.5s ease; -moz-transition: -moz-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; } .p-dropdown__title:hover { cursor: pointer; } .p-dropdown__title.is-active::after { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); transform: rotateX(180deg); } .p-dropdown__list { background: #fff; display: none; } .p-dropdown__list li { border: 1px solid #ddd; border-top: 0; margin: 0 !important; } .p-dropdown__list li a { display: block; padding: 11.5px 22px; } .p-dropdown__list li a:hover { background: #f7f7f7; color: #000; } /* widget list */ .p-widget-list { border-top: 1px solid #ddd; background: #fff; margin: 0 !important; } .p-widget-list__item { border: 1px solid #ddd; border-top: none; margin: 0 !important; padding: 0; position: relative; } .p-widget-list__item > a { display: block; padding: 9px 11px; } .p-widget-list__item-thumbnail { float: left; padding-top: 120px; width: 120px; overflow: hidden; position: relative; } .p-widget-list__item-thumbnail img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; } .p-widget-list__item-info { padding-left: 136px; min-height: 120px; } .p-widget-list__item-title { font-size: 14px; line-height: 1.7; } .p-widget-list__item-meta { color: #999; font-size: 12px; margin: 2px 0 -0.35em 0 !important; padding: 0 !important; } .p-widget-list__item-date { display: inline-block; margin-right: 5px; } .p-widget-list__item-category { display: inline-block; } .p-widget-list__item.no_post { padding: 15px; } /* widget tab */ .styled_post_list_tabs { border-left: 1px solid #ddd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; margin: 0 0 -1px 0 !important; padding: 0; position: relative; } .styled_post_list_tabs li { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 1.2; margin: 0 !important; padding: 0; width: 50%; word-break: break-all; } .styled_post_list_tabs li label { cursor: pointer; display: block; height: 100%; margin: 0; padding: 18.5px 6px; text-align: center; } .styled_post_list_tab-content { display: none; } .styled_post_list_tab_widget .tab-radio { display: none; } .styled_post_list_tab_widget .tab-radio--1:checked ~ .styled_post_list_tabs .tab-label--1, .styled_post_list_tab_widget .tab-radio--2:checked ~ .styled_post_list_tabs .tab-label--2 { background:#fff; border-bottom-color:#fff; } .styled_post_list_tab_widget .tab-radio--1:checked ~ .styled_post_list_tab-content--1, .styled_post_list_tab_widget .tab-radio--2:checked ~ .styled_post_list_tab-content--2 { display: block; } @media only screen and (max-width: 991px) { .styled_post_list_tabs li { background: #f7f7f7; } } /* widget slider */ .p-widget-slider { margin: 0 !important; } .p-widget-slider__item { margin: 0 !important; overflow: hidden; padding: 0; position: relative; } .p-widget-slider__item:nth-child(n+2) { display: none; } .slick-initialized .p-widget-slider__item:nth-child(n+2) { display: block; } .p-widget-slider__item > a { display: block; } .p-widget-slider__item-thumbnail { padding-top: 69%; width: 100%; overflow: hidden; position: relative; } .p-widget-slider__item-thumbnail img { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; object-fit: cover; } .p-widget-slider__item-title { background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#000000', GradientType=0); color: #fff; font-size: 14px; line-height: 1.7; padding: 32px 22px 14px; width: 100%; position: absolute; bottom: 0; left: 0; } .p-widget-slider .slick-arrow { color: #fff; cursor: pointer; font-size: 14px; font-weight: 400; height: 40px; line-height: 40px; margin-top: -20px; width: 40px; } .p-widget-slider .slick-prev { left: 0; } .p-widget-slider .slick-next { right: 0; } /* widget search */ .p-widget-search { position: relative; } .p-widget-search .p-widget-search__input { background: #fff; border: 1px solid #ddd; border-right: none; border-radius: 0; height: 45px; line-height: 45px; padding: 0 15px; width: -webkit-calc(100% - 45px); width: calc(100% - 45px); } .p-widget-search .p-widget-search__submit { background: #fff; border: 1px solid #ddd; border-left: none; border-radius: 0; color: #000; cursor: pointer; font-family: "design_plus"; font-size: 16px; height: 45px; padding: 0; width: 45px; position: absolute; top: 0; right: 0; } @media only screen and (max-width: 991px) { .p-widget-search .p-widget-search__input { height: 40px; line-height: 40px; width: -webkit-calc(100% - 40px); width: calc(100% - 40px); } .p-widget-search .p-widget-search__submit { height: 40px; width: 40px; } } /** * wordpress preset style */ /* alignment */ .p-entry__body .alignright { float: right; } .p-entry__body .alignleft { float: left; } .p-entry__body .aligncenter { display: table; margin-left: auto; margin-right: auto; margin-bottom: 7px; } .p-entry__body blockquote.alignleft, .p-entry__body img.alignleft { margin: 7px 24px 7px 0; } .p-entry__body .wp-caption.alignleft { margin: 7px 14px 7px 0; } .p-entry__body blockquote.alignright, .p-entry__body img.alignright { margin: 7px 0 7px 24px; } .p-entry__body .wp-caption.alignright { margin: 7px 0 7px 14px; } .p-entry__body blockquote.aligncenter, .p-entry__body img.aligncenter, .p-entry__body .wp-caption.aligncenter { margin-top: 7px; margin-bottom: 7px; } /* text and headline */ /* 2020.11.13 modify border&iframe */ .p-entry__body p { margin-bottom: 2em; } .p-entry__body h1, .p-entry__body h2, .p-entry__body h3, .p-entry__body h4, .p-entry__body h5, .p-entry__body h6 { clear: both; line-height: 1.4; margin-bottom: 24.2px; } .p-entry__body h1 { font-size: 150%; } .p-entry__body h2 { font-size: 140%;background-color:rgba(225,190,180,50);border-bottom: solid 0.0001vw orange;border-left: solid 0vw red;text-align: center;} .p-entry__body h3 { font-size: 130%; background-color:rgba(177,225,177,50);border-bottom: solid 0.0001vw  lightblue;border-left: solid 0vw blue;text-align: center;} .p-entry__body h4 { font-size: 120%;background-color:rgba(177,177,225,50); border-bottom: solid 0.0001vw  lightgreen;border-left: solid 0vw green;text-align: center;} .p-entry__body h5 { font-size: 110%;background-color:rgba(197,177,180,55); border-bottom: solid 0.0001vw gray;border-left: solid 0vw darkgray;text-align: center;} .p-entry__body h6 { font-size: 100%; } iframe{width:100%;} /* image */ .p-entry__body img[class*="align"], .p-entry__body img[class*="wp-image-"], .p-entry__body img[class*="attachment-"], .p-entry__body .size-full, .p-entry__body .size-large, .p-entry__body .wp-post-image, .p-entry__body img { max-width: 100%; height: auto; } /* list */ .p-entry__body li, .p-entry__body dt, .p-entry__body dd {} .p-entry__body ul, .p-entry__body ol, .p-entry__body dl { margin-bottom: 24px; } .p-entry__body ol { list-style: decimal outside none; margin-left: 1.5em; } .p-entry__body ul { list-style: circle outside none; margin-left: 1.3em; } .p-entry__body li > ul, .p-entry__body li > ol { margin-bottom: 0; } .p-entry__body dt { font-weight: bold; } .p-entry__body dd { margin-bottom: 1em; } /* table */ .p-entry__body table { margin: 0 0 24px 0; } .p-entry__body td, .p-entry__body th { border: 1px solid #ddd; padding: 10px 15px; line-height: 2; background: #fff; vertical-align: middle; } .p-entry__body th { background: #f7f7f7; font-weight: normal; } /* table style */ .table_no_border th, .table_no_border td { border: none; padding-left: 0; } .table_border_horizontal th, .table_border_horizontal td { border-left: none; border-right: none; padding-left: 0; } /* block quote */ .p-entry__body blockquote { margin: 0 0 25px 0; padding: 27px 30px 0; border: 1px solid #ddd; box-shadow: 0px 4px 0px 0px #f2f2f2; position: relative; } .p-entry__body blockquote:before { content: '"'; font-style: italic; font-size: 30px; font-weight: normal; line-height: 40px; width: 30px; height: 30px; position: absolute; top: 5px; left: 10px; color: #5cbcd7; } .p-entry__body blockquote:after { content: '"'; font-style: italic; font-size: 30px; font-weight: normal; text-align: left; line-height: 60px; width: 30px; height: 30px; position: absolute; bottom: 7px; right: -2px; color: #5cbcd7; } .p-entry__body blockquote cite { border-top: 1px dotted #aaa; display: block; padding: 20px 0 0 0; font-style: italic; text-align: right; font-size: 90%; } /* captions */ .p-entry__body .wp-caption { margin-bottom: 24px; background: #fff; border: 1px solid #ddd; padding: 5px; max-width: 100%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .p-entry__body .wp-caption-text { text-align: center; font-size: 12px; font-style: italic; line-height: 1.5; margin: 9px auto; } .p-entry__body .wp-caption img[class*="wp-image-"] { display: block; margin: 0 auto; } /* gallery */ .gallery { margin-bottom: 20px; } .gallery a img { border: 0 !important; } .gallery-item { float: left; margin: 0 4px 4px 0; overflow: hidden; position: relative; } .gallery-columns-1 .gallery-item { max-width: 100%; } .gallery-columns-2 .gallery-item { max-width: 48%; max-width: -webkit-calc(50% - 4px); max-width: calc(50% - 4px); } .gallery-columns-3 .gallery-item { max-width: 32%; max-width: -webkit-calc(33.3% - 4px); max-width: calc(33.3% - 4px); } .gallery-columns-4 .gallery-item { max-width: 23%; max-width: -webkit-calc(25% - 4px); max-width: calc(25% - 4px); } .gallery-columns-5 .gallery-item { max-width: 19%; max-width: -webkit-calc(20% - 4px); max-width: calc(20% - 4px); } .gallery-columns-6 .gallery-item { max-width: 15%; max-width: -webkit-calc(16.7% - 4px); max-width: calc(16.7% - 4px); } .gallery-columns-7 .gallery-item { max-width: 13%; max-width: -webkit-calc(14.28% - 4px); max-width: calc(14.28% - 4px); } .gallery-columns-8 .gallery-item { max-width: 11%; max-width: -webkit-calc(12.5% - 4px); max-width: calc(12.5% - 4px); } .gallery-columns-9 .gallery-item { max-width: 9%; max-width: -webkit-calc(11.1% - 4px); max-width: calc(11.1% - 4px); } .gallery-columns-10 .gallery-item { max-width: 7%; max-width: -webkit-calc(9.4% - 0px); max-width: calc(9.4% - 0px); } .gallery-columns-1 .gallery-item:nth-of-type(1n), .gallery-columns-2 .gallery-item:nth-of-type(2n), .gallery-columns-3 .gallery-item:nth-of-type(3n), .gallery-columns-4 .gallery-item:nth-of-type(4n), .gallery-columns-5 .gallery-item:nth-of-type(5n), .gallery-columns-6 .gallery-item:nth-of-type(6n), .gallery-columns-7 .gallery-item:nth-of-type(7n), .gallery-columns-8 .gallery-item:nth-of-type(8n), .gallery-columns-9 .gallery-item:nth-of-type(9n), .gallery-columns-10 .gallery-item:nth-of-type(10n) { margin-right: 0; } .gallery-caption { background-color: rgba(0, 0, 0, 0.7); color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; } .gallery-caption:before { content: ''; height: 100%; min-height: 49px; position: absolute; top: 0; left: 0; width: 100%; } .gallery-item:hover .gallery-caption { opacity: 1; } .gallery-columns-7 .gallery-caption, .gallery-columns-8 .gallery-caption, .gallery-columns-9 .gallery-caption, .gallery-columns-10 .gallery-caption { display: none; } /* etc */ .p-entry__body .wp-smiley { border: 0; margin-bottom: 0; margin-top: 0; padding: 0; } .p-entry__body address { margin: 0 0 24px 0; line-height: 2.2; } .p-entry__body pre { border-left: 5px solid #7fc120; font-size: 12px; margin: 0 0 27px 0; line-height: 25px; background: url(img/pre.gif) repeat left top; padding: 0 17px; overflow: auto; } .p-entry__body .mejs-container { margin: 12px 0 25px; } /** * Utility */ /* clearfix */ .u-clearfix::after { clear: both; content: " "; display: table; } /* float */ .u-left { float: left; } .u-right { float: right; } .u-center { float: none; margin-left: auto; margin-right: auto; text-align: center; } /* hidden */ .u-hidden { display: none; } .u-visible-sm, .u-visible-xs { display: none; } @media only screen and (max-width: 991px) { .u-hidden-sm { display: none; } .u-visible-sm { display: block; } } @media only screen and (max-width: 767px) { .u-hidden-xs { display: none; } .u-visible-xs { display: block; } } /* overflow */ .u-overflow-hidden { overflow: hidden; } /* slick */ .slick-slider { overflow: hidden; } .slick-loading .slick-list { background: #fff url('img/ajax-loader.gif') center center no-repeat; } .slick-arrow { background: transparent; border: none; color: #000; cursor: pointer; font-family: 'design_plus'; font-size: 20px; font-weight: 700; height: 60px; line-height: 60px; margin-top: -30px; overflow: hidden; padding: 0; text-align: center; width: 60px; position: absolute; top: 50%; z-index: 2; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .slick-prev { left: -70px; } .slick-next { right: -70px; } .slick-slider .slick-arrow:hover { color: #ee3c00; } .slick-dots { display: block; list-style: none; margin: 0; padding: 0; text-align: center; position: absolute; bottom: 25px; left: 0; right: 0; z-index: 2; } .slick-dots li { display: inline-block; margin: 0 5px; width: 12px; height: 12px; } .slick-dots li button { background: #fff; border: none; border-radius: 50%; color: transparent; cursor: pointer; opacity: 1; overflow: hidden; padding: 0; width: 12px; height: 12px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .slick-dots li.slick-active button, .slick-dots li:hover button { background-color: #ee3c00; } /* Column layout - カラムレイアウト */ .post_row { margin-right: -25px; margin-left: -25px; line-height: 2.4; } .post_row:before, .post_row:after { display: table; content: " "; } .post_row:after { clear: both; } .post_col, .post_col-2, .post_col-3 { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; width: 100%; min-height: 1px; margin-bottom: 2em; padding-right: 25px; padding-left: 25px; float: left; } @media screen and (min-width: 768px) { .post_col-2 { width: 50%; } .post_col-3 { width: 33.33333%; } } @media screen and (min-width: 1024px) { .post_col-2 { width: 50%; } .post_col-3 { width: 33.33333%; } } /* headline - 見出しのスタイル */ .style2a, .style2b, .style3a, .style3b, .style4a, .style4b, .style5a, .style5b, .style6 { font-weight: 500; line-height: 1.6; } /* h2 */ .style2a { margin: 65px 0 30px !important; padding: 0 0 .9em; border-bottom: 3px solid #000; font-size: 26px !important; } .style2b { margin: 65px 0 30px !important; padding: .48em 1em .47em; background: #000; color: #fff; font-size: 26px !important; } /* h3 */ .style3a { margin: 65px 0 30px !important; padding: 1.2em .15em; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 22px !important; } .style3b { margin: 65px 0 30px !important; padding: 1.1em 1.4em 1.15em; border: 1px solid #ddd; border-top: 3px solid #000; background: #fafafa; font-size: 22px !important; } /* h4 */ .style4a { margin: 65px 0 30px !important; padding: .4em 0 .4em 1.2em; border-left: 3px solid #000; font-size: 20px !important; font-weight: 500; } .style4b { -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; margin: 65px 0 30px !important; padding: .8em 1.5em .8em; border-left: #000 3px solid; font-size: 20px !important; } .style4b:after { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 2px); border: 1px solid #ddd; border-left: none; content: ''; } /* h5 */ .style5a { margin: 65px 0 30px !important; padding: .85em 1.5em .8em; border: 1px solid #ddd; background: #fafafa; font-size: 18px !important; } .style5b { margin: 65px 0 30px !important; padding: .85em 1.5em .8em; background: #000; color: #fff; font-size: 18px !important; } /* h6 */ .style6 { position: relative; margin: 65px 0 30px !important; padding: 0 .8em 0 1.3em; color: #000; font-size: 16px !important; font-weight: 700; } .style6:before { position: absolute; top: .35em; left: 0; width: 12px; height: 12px; background: #000; content: ""; } .balloon { display: block; z-index: 0; position: relative; width: auto; min-width: 115px; margin: 50px 0 22px; padding: .5em 18px .5em; clear: both; border-bottom: 0; background: #222; color: #fff; font-size: 20px; font-weight: 400; text-align: left; } .balloon:after { display: block; position: absolute; bottom: -10px; left: 30px; width: 0px; height: 0px; margin-left: -10px; border-width: 10px 10px 0 10px; border-style: solid; border-color: #222 transparent transparent transparent; content: ""; } @media screen and (max-width: 767px) { .style2a { margin: 30px 0 20px !important; padding: 0 0 .6em; font-size: 20px !important; } .style2b { margin: 30px 0 20px !important; padding: .42em .7em .41em; background: #000; color: #fff; font-size: 20px !important; } /* h2 */ .style3a { margin: 30px 0 20px !important; padding: .6em .15em; font-size: 18px !important; } .style3b { margin: 30px 0 20px !important; padding: .5em .5em .45em .6em; font-size: 18px !important; } .style4a { margin: 30px 0 20px !important; padding: .4em 0 .4em .8em; border-left: 2px solid #000; font-size: 16px !important; } .style4b { margin: 30px 0 20px !important; padding: .8em 1em .75em; border-left: #000 2px solid; font-size: 16px !important; } .style5a { margin: 30px 0 20px !important; padding: .8em 1em .75em; font-size: 15px !important; } .style5b { margin: 30px 0 20px !important; padding: .8em 1em .75em; font-size: 15px !important; } } /* flame - 囲み枠 */ .well { margin-bottom: 30px; padding: 1.1em 2em; border: 1px solid #ddd; border-radius: 6px; background-color: #fafafa; } .well2 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px solid #ddd; } .well3 { margin-bottom: 30px; padding: 1.1em 2em; border: 1px dashed #ddd; background: #fafafa; } .wl_red { border-color: #ebccd1; background-color: #f2dede; color: #a94442; } .wl_yellow { border-color: #faebcc; background-color: #fcf8e3; color: #8a6d3b; } .wl_blue { border-color: #bce8f1; background-color: #d9edf7; color: #31708f; } .wl_green { border-color: #d6e9c6; background-color: #dff0d8; color: #3c763d; } @media screen and (max-width: 767px) { .well, .well2, .well3 { padding: .9em .8em .9em 1em; } } /* button - CSSボタンのスタイル */ .q_button { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; min-width: 200px; max-width: 90%; margin: 0; padding: .6em 1.3em .5em; background-color: #535353; color: #fff !important; font-size: 100%; font-weight: 400; text-align: center; text-decoration: none; vertical-align: middle; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .q_button:hover, .q_button:focus { background-color: #7d7d7d; color: #fff; text-decoration: none; } /* Button option */ .rounded { border-radius: 6px; } .pill { border-radius: 50px; } .sz_full { display: block; font-size: 110%; max-width: 100%; min-width: 100px; padding: 1em 1.5em .9em; } .sz_l { font-size: 110%; max-width: 90%; min-width: 350px; padding: .8em 1.5em .7em; } @media screen and (max-width: 767px) { .sz_l { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; } } .sz_s { min-width: 100px; max-width: 90%; font-size: 85%; padding: .4em 1em .3em; } .bt_red { background: #c01f0e; color: #fff; } .bt_red:hover, .bt_red:focus { background-color: #d33929; color: #fff; } .bt_yellow { background: #f1c40f; color: #fff; } .bt_yellow:hover, .bt_yellow:focus { background-color: #f9d441; color: #fff; } .bt_blue { background: #2980b9; color: #fff; } .bt_blue:hover, .bt_blue:focus { background-color: #3a91c9; color: #fff; } .bt_green { background: #27ae60; color: #fff; } .bt_green:hover, .bt_green:focus { background-color: #39c574; color: #fff; } /* Youtube responsive - Youtube動画のレスポンシブ表示 */ .ytube { position: relative; height: 0; margin-top: 20px; margin-bottom: 20px; padding-bottom: 56.25%; padding-top: 30px; overflow: hidden; } .ytube iframe { position: absolute; top: 0; right: 0; width: 100% !important; height: 100% !important; } /* Table responsive - テーブルのレスポンシブ表示 */ .rps_table { line-height: 2.0; } @media only screen and (max-width: 567px) { .rps_table tr { display: block; margin-bottom: 1.5em; } .rps_table th, .rps_table td { display: list-item; list-style-type: none; } .rps_table td { border-top: none; } } /* Cardlink style - カードリンクのスタイル */ .cardlink { word-wrap: break-word; max-width: 100%; margin: 10px 0; padding: 20px; border: 1px solid #ddd; background: #fafafa; } .cardlink_thumbnail { margin-right: 25px; float: left; } .cardlink_thumbnail img { width: 130px; height: 130px; -o-object-fit: cover; object-fit: cover; } /* for IE11 */ @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .cardlink_thumbnail img { height: auto; } } .cardlink_content { line-height: 1.6; } .cardlink_timestamp { display: inline; margin: 0; padding: 0; color: #222; font-size: 12px; line-height: 1; vertical-align: top; } .cardlink_title { margin: -3px 0 5px; font-size: 16px; } .cardlink_title a { color: #000; font-weight: bold; text-decoration: none; } .cardlink_title a:hover { text-decoration: underline; } .cardlink_excerpt { overflow: hidden; color: #000; font-size: 14px; line-height: 1.9; } .cardlink_footer { clear: both; } .clear { clear: both; } @media screen and (max-width: 767px) { .cardlink_timestamp { display: none; } } @media screen and (max-width: 567px) { .cardlink { padding: 15px 11px 12px 13px; } .cardlink_thumbnail { margin-right: 12px; margin-bottom: 10px; float: left; } .cardlink_thumbnail img { width: 100px; height: 100px; } .cardlink_title { margin-top: -5px; font-size: 14px; } .cardlink_excerpt { clear: both; } } /* Contactform - お問い合わせフォーム */ .wpcf7 { width: 100%; margin: 0 0 2.5em !important; padding: 0; border: 1px solid #ddd; background: #fafafa; font-size: 14px; } .wpcf7 form { margin: 1.5em 1.5em 0; } .wpcf7 p { margin-bottom: 1em; font-size: 16px; } .wpcf7 input, .wpcf7 textarea { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 8px; border: 1px solid #ccc; line-height: 1.2; } .wpcf7 select, .wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { width: auto; max-width: 97%; padding: 8px; border: 1px solid #ccc; } .wpcf7 select, .wpcf7 .wpcf7-list-item-label { font-size: 14px; line-height: 1.2; } .wpcf7 .wpcf7-list-item { display: block; } .wpcf7 textarea { height: 300px; } .wpcf7 input:focus, .wpcf7 textarea:focus { border: 1px solid #bbb; outline: none; } .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-submit:before, .wpcf7 .wpcf7-submit:after { -webkit-box-sizing: border-box; box-sizing: border-box; } .wpcf7 .wpcf7-submit:hover, .wpcf7 .wpcf7-previous:hover { background-color:#666666; } .wpcf7 .wpcf7-submit .wpcf7-not-valid { background: pink; } .wpcf7 .wpcf7-submit .wpcf7-response-output { -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: 10px 0 0; padding: 8px 35px 8px 14px; border-radius: 4px; } .wpcf7 .wpcf7-submit .wpcf7-validation-errors { border: 1px solid #EED3D7; background-color: #F2DEDE; color: #B94A48; } .wpcf7 .wpcf7-submit .wpcf7-mail-sent-ok { border: 1px solid #BCE8F1; background-color: #D9EDF7; color: #3A87AD; } .wpcf7 .wpcf7-previous + br { display: none; } .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; } /* font-size - フォントサイズ */ .text70 { font-size: 70%; } .text80 { font-size: 80%; } .text90 { font-size: 90%; } .text100 { font-size: 100%; } .text110 { font-size: 110%; } .text120 { font-size: 120%; } .text130 { font-size: 130%; } .text140 { font-size: 140%; } .text150 { font-size: 150%; } .text160 { font-size: 160%; } .text170 { font-size: 170%; } .text180 { font-size: 180%; } .text190 { font-size: 190%; } .text200 { font-size: 200%; } .text210 { font-size: 210%; } .text220 { font-size: 220%; } /* 太字 */ .b { font-weight: 700; } /* 下線 */ .u { text-decoration: underline; } /* 打ち消し線 */ .del { text-decoration: line-through; } /* font-color - フォントカラー */ .red { color: red; } .blue { color: #2ca9e1; } .green { color: #82ae46; } .orange { color: #ff7d00; } .yellow { color: #fff000; } .pink { color: #ff0084; } .gray { color: #999999; } /* background-color - 背景色 */ .bg-blue { background-color: #4ab0f5; padding: 2px; } .bg-red { background-color: red; padding: 2px; } .bg-yellow { background-color: #ff0; padding: 2px; } /* text-align - 配置 */ .align1 { text-align: center !important; } .align2 { text-align: right !important; } .align3 { text-align: left !important; } /* float - 回り込み */ .r-flo { float: right; margin: 10px; } .l-flo { float: left; margin: 10px; } /* 回り込みの解除 */ .f-clear { clear: both; } /* hover - 画像リンクマウスオーバー時の不透明度 */ a img.fade { background: none !important; outline: none; -webkit-transition: all .3s; transition: all .3s; } a:hover img.fade { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; background: none !important; } /* text-style - テキストスタイル */ .att { padding-left: 1em; text-indent: -1em; } .att_box { margin: 2em 0 2.5em; padding: 1em 1.2em; line-height: 2.0; border: 1px dotted #ddd; background: #fcfcfc; box-shadow: 0px 4px 0px 0px #f7f7f7; } /* margin - 要素の外側の余白 */ .m0 { margin: 0!important; } .mt0 { margin-top: 0!important; } .mr0 { margin-right: 0!important; } .mb0 { margin-bottom: 0!important; } .ml0 { margin-left: 0!important; } .m5 { margin: 5px !important; } .mt5 { margin-top: 5px !important; } .mr5 { margin-right: 5px !important; } .mb5 { margin-bottom: 5px !important; } .ml5 { margin-left: 5px !important; } .m10 { margin: 10px !important; } .mt10 { margin-top: 10px !important; } .mr10 { margin-right: 10px !important; } .mb10 { margin-bottom: 10px !important; } .ml10 { margin-left: 10px !important; } .m15 { margin: 15px !important; } .mt15 { margin-top: 15px !important; } .mr15 { margin-right: 15px !important; } .mb15 { margin-bottom: 15px !important; } .ml15 { margin-left: 15px !important; } .m20 { margin: 20px !important; } .mt20 { margin-top: 20px !important; } .mr20 { margin-right: 20px !important; } .mb20 { margin-bottom: 20px !important; } .ml20 { margin-left: 20px !important; } .m25 { margin: 25px !important; } .mt25 { margin-top: 25px !important; } .mr25 { margin-right: 25px !important; } .mb25 { margin-bottom: 25px !important; } .ml25 { margin-left: 25px !important; } .m30 { margin: 30px !important; } .mt30 { margin-top: 30px !important; } .mr30 { margin-right: 30px !important; } .mb30 { margin-bottom: 30px !important; } .ml30 { margin-left: 30px !important; } .m35 { margin: 35px !important; } .mt35 { margin-top: 35px !important; } .mr35 { margin-right: 35px !important; } .mb35 { margin-bottom: 35px !important; } .ml35 { margin-left: 35px !important; } .m40 { margin: 40px !important; } .mt40 { margin-top: 40px !important; } .mr40 { margin-right: 40px !important; } .mb40 { margin-bottom: 40px !important; } .ml40 { margin-left: 40px !important; } .m45 { margin: 45px !important; } .mt45 { margin-top: 45px !important; } .mr45 { margin-right: 45px !important; } .mb45 { margin-bottom: 45px !important; } .ml45 { margin-left: 45px !important; } .m50 { margin: 50px !important; } .mt50 { margin-top: 50px !important; } .mr50 { margin-right: 50px !important; } .mb50 { margin-bottom: 50px !important; } .ml50 { margin-left: 50px !important; } .m55 { margin: 55px !important; } .mt55 { margin-top: 55px !important; } .mr55 { margin-right: 55px !important; } .mb55 { margin-bottom: 55px !important; } .ml55 { margin-left: 55px !important; } .m60 { margin: 60px !important; } .mt60 { margin-top: 60px !important; } .mr60 { margin-right: 60px !important; } .mb60 { margin-bottom: 60px !important; } .ml60 { margin-left: 60px !important; } .m65 { margin: 65px !important; } .mt65 { margin-top: 65px !important; } .mr65 { margin-right: 65px !important; } .mb65 { margin-bottom: 65px !important; } .ml65 { margin-left: 65px !important; } .m70 { margin: 70px !important; } .mt70 { margin-top: 70px !important; } .mr70 { margin-right: 70px !important; } .mb70 { margin-bottom: 70px !important; } .ml70 { margin-left: 70px !important; } .m75 { margin: 75px !important; } .mt75 { margin-top: 75px !important; } .mr75 { margin-right: 75px !important; } .mb75 { margin-bottom: 75px !important; } .ml75 { margin-left: 75px !important; } .m80 { margin: 80px !important; } .mt80 { margin-top: 80px !important; } .mr80 { margin-right: 80px !important; } .mb80 { margin-bottom: 80px !important; } .ml80 { margin-left: 80px !important; } /* padding - 要素の内側の余白 */ .p0 { padding: 0!important; } .pt0 { padding-top: 0!important; } .pr0 { padding-right: 0!important; } .pb0 { padding-bottom: 0!important; } .pl0 { padding-left: 0!important; } .p5 { padding: 5px !important; } .pt5 { padding-top: 5px !important; } .pr5 { padding-right: 5px !important; } .pb5 { padding-bottom: 5px !important; } .pl5 { padding-left: 5px !important; } .p10 { padding: 10px !important; } .pt10 { padding-top: 10px !important; } .pr10 { padding-right: 10px !important; } .pb10 { padding-bottom: 10px !important; } .pl10 { padding-left: 10px !important; } .p15 { padding: 15px !important; } .pt15 { padding-top: 15px !important; } .pr15 { padding-right: 15px !important; } .pb15 { padding-bottom: 15px !important; } .pl15 { padding-left: 15px !important; } .p20 { padding: 20px !important; } .pt20 { padding-top: 20px !important; } .pr20 { padding-right: 20px !important; } .pb20 { padding-bottom: 20px !important; } .pl20 { padding-left: 20px !important; } .p25 { padding: 25px !important; } .pt25 { padding-top: 25px !important; } .pr25 { padding-right: 25px !important; } .pb25 { padding-bottom: 25px !important; } .pl25 { padding-left: 25px !important; } .p30 { padding: 30px !important; } .pt30 { padding-top: 30px !important; } .pr30 { padding-right: 30px !important; } .pb30 { padding-bottom: 30px !important; } .pl30 { padding-left: 30px !important; } .p35 { padding: 35px !important; } .pt35 { padding-top: 35px !important; } .pr35 { padding-right: 35px !important; } .pb35 { padding-bottom: 35px !important; } .pl35 { padding-left: 35px !important; } .p40 { padding: 40px !important; } .pt40 { padding-top: 40px !important; } .pr40 { padding-right: 40px !important; } .pb40 { padding-bottom: 40px !important; } .pl40 { padding-left: 40px !important; } .p45 { padding: 45px !important; } .pt45 { padding-top: 45px !important; } .pr45 { padding-right: 45px !important; } .pb45 { padding-bottom: 45px !important; } .pl45 { padding-left: 45px !important; } .p50 { padding: 50px !important; } .pt50 { padding-top: 50px !important; } .pr50 { padding-right: 50px !important; } .pb50 { padding-bottom: 50px !important; } .pl50 { padding-left: 50px !important; } .p55 { padding: 55px !important; } .pt55 { padding-top: 55px !important; } .pr55 { padding-right: 55px !important; } .pb55 { padding-bottom: 55px !important; } .pl55 { padding-left: 55px !important; } .p60 { padding: 60px !important; } .pt60 { padding-top: 60px !important; } .pr60 { padding-right: 60px !important; } .pb60 { padding-bottom: 60px !important; } .pl60 { padding-left: 60px !important; } .p65 { padding: 65px !important; } .pt65 { padding-top: 65px !important; } .pr65 { padding-right: 65px !important; } .pb65 { padding-bottom: 65px !important; } .pl65 { padding-left: 65px !important; } .p70 { padding: 70px !important; } .pt70 { padding-top: 70px !important; } .pr70 { padding-right: 70px !important; } .pb70 { padding-bottom: 70px !important; } .pl70 { padding-left: 70px !important; } .p75 { padding: 75px !important; } .pt75 { padding-top: 75px !important; } .pr75 { padding-right: 75px !important; } .pb75 { padding-bottom: 75px !important; } .pl75 { padding-left: 75px !important; } .p80 { padding: 80px !important; } .pt80 { padding-top: 80px !important; } .pr80 { padding-right: 80px !important; } .pb80 { padding-bottom: 80px !important; } .pl80 { padding-left: 80px !important; }