@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
/* COMPASS
* ----------------------------------------------- */
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;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
/* BASE
* ----------------------------------------------- */
/* MEDIA QUERIES
* ----------------------------------------------- */
/* ADDITIONAL RESET
* ----------------------------------------------- */
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body * {
max-height: 99999em;
}
body img {
height: auto;
max-height: none;
}
input,
label,
select,
button,
textarea {
margin: 0;
border: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
white-space: normal;
background: none;
font: inherit;
line-height: 1;
}
input:focus,
button:focus,
select:focus {
outline: 0;
}
/* Make webkit render the search input like a normal text field */
input[type=search] {
-webkit-appearance: textfield;
}
/* Turn off the recent search for webkit. It adds about 15px padding on the left */
::-webkit-search-decoration {
display: none;
}
/* Turn off scroll bars in IE unless needed */
textarea {
overflow: auto;
white-space: pre-line;
}
/* PRINTING
* ----------------------------------------------- */
@media print {
body {
-webkit-print-color-adjust: exact;
}
html,
body {
margin: 0;
}
@page {
margin: 0;
}
@page :left {
margin: 0;
}
@page :right {
margin: 0;
}
@page :first {
margin-top: 0;
}
}
/* GENERAL
* ----------------------------------------------- */
body {
color: #000;
font-family: "游ゴシック", source-han-serif-japanese, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", Meiryo, Verdana, sans-serif;
font-size: 14px;
font-weight: 400;
font-style: normal;
line-height: 1.4;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
letter-spacing: 0.03em;
}
/* FONT
* ----------------------------------------------- */
.ft-serif {
font-family: "ten-mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Times New Roman", "游明朝", YuMincho, "メイリオ", Meiryo, Georgia, serif;
}
.ft-anton {
font-family: anton, sans-serif;
font-weight: 400;
font-style: normal;
}
.ft-yu-go {
font-family: "游ゴシック", source-han-serif-japanese, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", Meiryo, Verdana, sans-serif;
font-weight: 400;
font-style: normal;
}
.ft-gothic {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
}
.ft-gothic-n {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
}
.ft-gothic-b {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 900;
font-style: normal;
}
.ft-YuGo {
font-family: "游ゴシック", source-han-serif-japanese, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", YuGothic, "Yu Gothic", "メイリオ", Meiryo, Verdana, sans-serif;
}
.fts14 {
font-size: 14px;
}
/* //Bahnschrift:フォントの定義 */
@font-face {
font-family: 'Bahnschrift';
src: url("../font/bahnschrift.woff2") format("woff2");
src: url("../font/bahnschrift.woff") format("woff");
src: url("../font/bahnschrift.ttf") format("ttf");
}
.ft-bahns {
font-family: Bahnschrift;
font-weight: 400;
letter-spacing: 0.01em;
}
/* DejaRip Regular */
.ft-dejarip {
font-family: dejarip, sans-serif;
font-weight: 400;
font-style: normal;
}
.ft-dejaripSB {
font-family: dejarip, sans-serif;
font-weight: 500;
font-style: normal;
}
.ft-dejaripB {
font-family: dejarip, sans-serif;
font-weight: 700;
font-style: normal;
}
/* Montserrat */
.ft-mont {
font-family: "montserrat", sans-serif;
font-weight: 400; /*600,700*/
letter-spacing: 0.05em;
}
/* AdobeFontの読み込み遅延対策 */
/*
.wf-loading {
opacity: 0;
}
*/
/* HELPERS
* ----------------------------------------------- */
a {
color: #000;
text-decoration: none;
word-break: break-all;
}
.hidden {
display: none;
}
.invisible {
visibility: hidden;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-justify {
text-align: justify;
}
.text-nowrap {
white-space: nowrap;
}
.text-lowercase {
text-transform: lowercase;
}
.text-uppercase {
text-transform: uppercase;
}
.text-capitalize {
text-transform: capitalize;
}
.container {
min-width: 1200px;
}
.wrapper {
width: 1180px;
margin-left: auto;
margin-right: auto;
}
.flexbox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.flexbox.sms .txtBox {
width: 68%;
}
.flexbox.sms .imgBox {
width: 28%;
}
.flexbox.sms .imgBox img {
width: 100%;
}
.flexbox.clinic {
display: flex;
justify-content: flex-start;
}
.flexbox.graphBox img {
width: 94%;
}
.flexbox.original {
flex-wrap: wrap;
}
.flexbox.allmedia {
flex-wrap: wrap;
}
.flexbox.allmedia::after {
content: '';
display: block;
width: 30%;
}
@media only screen and (max-width: 767px) {
.flexbox.graphBox img {
width: 100%;
}
.flexbox.graphBox li {
margin-bottom: 20px;
}
.flexbox.sms {
margin-bottom: 80px;
}
.flexbox.sms .txtBox {
width: 100%;
margin-bottom: 20px;
}
.flexbox.sms .imgBox {
width: 100%;
}
}
/* RESPONSIVE
* ----------------------------------------------- */
@media print, (min-width: 768px) {
.sm {
display: none !important;
}
.trans {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
-moz-transition: opacity 0.26s ease;
-o-transition: opacity 0.26s ease;
-webkit-transition: opacity 0.26s ease;
transition: opacity 0.26s ease;
}
.trans:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8;
}
body {
position: static !important;
top: auto !important;
}
}
@media only screen and (max-width: 767px) {
.md {
display: none !important;
}
body {
width: 100%;
font-size: 14px;
}
.container {
width: auto;
min-width: 320px;
}
.wrapper {
max-width: 100%;
/* width: auto;*/
margin: 0;
padding-left: 30px !important;
padding-right: 30px !important;
}
}
/* PARTS
* ----------------------------------------------- */
/* COMMON HEADER
* ----------------------------------------------- */
header {
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
display: flex;
justify-content: space-between;
padding: 0 30px;
}
header .header-inner {
padding-top: 22px;
}
header .list-nav .btn.cntct {
background: #333;
margin-left: 25px;
margin-right: 8px;
}
header .list-nav .btn.cntct:hover {
background: #1974b9;
transition: 0.6s;
}
header .list-nav .btn {
display: inline-block;
position: relative;
background: #fde202;
padding: 15px 0;
width: 140px;
border-radius: 50px;
margin-top: 19px;
padding-left: 22px;
}
header .list-nav .btn:hover {
background: #1974b9;
color: #fff;
transition: 0.6s;
}
header .list-nav .btn .txt {
color: #000;
font-size: 13px;
font-weight: bold;
}
header .list-nav .btn.cntct .txt {
color: #fff;
}
header .list-nav .btn .txt::after {
content: '';
background: url(../img/common/ico_head-media.png);
position: absolute;
top: 16px;
right: 17px;
width: 14px;
height: 15px;
}
header .list-nav .btn.cntct .txt::after {
content: '';
background: url(../img/common/ico_head-contact.png);
position: absolute;
top: 19px;
right: 20px;
width: 14px;
height: 10px;
}
header .list-nav li img {
width: 25%;
}
header.header-fixed {
z-index: 9000;
position: fixed;
width: 100%;
min-width: 1180px;
margin-left: 0;
}
header.header-fixed.visible {
top: 0;
visibility: inherit;
background: #fff;
}
header.header-fixed.visible .header-tag {
display: none;
}
header.header-fixed.visible .list-nav {
}
header .nav-inner {
display: none;
}
@media only screen and (max-width: 767px) {
header {
box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.18);
-webkit-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.18);
-moz-box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.18);
padding: 0 0 0 20px;
}
}
@media print, (min-width: 768px) {
header {
width: 100%;
background: #fff;
position: relative;
z-index: 9000;
border-bottom: solid 1px #ddd;
height: 90px;
}
.header-wrap {
width: 15%;
}
.navigation {
width: 85%;
}
.navigation.posts-navigation {
width: 100%;
}
header .header-tag {
font-size: 12px;
margin-bottom: 15px;
}
header .header-logo {
width: 180px;
padding: 0;
}
header .header-logo a {
display: block;
}
header .header-tel {
font-size: 28px;
color: #0b68b7;
}
header .header-tel span {
font-size: 16px;
}
header .ico-inst {
margin: 0 20px;
}
header .list-contact {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
align-items: center;
}
header .list-contact .link {
color: #fff;
display: block;
width: 170px;
font-size: 15px;
text-align: center;
padding: 10px 5px;
}
header .list-contact .link img.ico_mail {
margin-right: 10px;
margin-top: -4px;
}
header .list-contact .link-contact {
border: 1px solid #fff;
color: #fff;
padding: 0;
}
header .list-contact .link-mail {
background-color: #000;
}
/* nav変更：220604 */
header .list-nav .navBox {
width: 100%;
}
header .navbar-wrapper {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
header .navBox .tel {
text-align: right;
font-size: 11px;
font-weight: bold;
padding-top: 15px;
letter-spacing: 0.03em;
}
header .navBox .telnumber {
font-size: 22px;
letter-spacing: 0;
}
header .navBox .time {
margin: 8px 8px 0 0;
}
header .navBox .tel ul {
display: flex;
justify-content: flex-end;
}
/* ↑nav変更：220604↑ */
header .list-nav {
font-family: ten-mincho-text, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "Yu Gothic", "メイリオ", Meiryo, Verdana, sans-serif;
margin: auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
header .list-nav > li {
position: relative;
}
header .list-nav a,
header .list-nav .link-nav {
font-size: 14px;
font-weight: bold;
cursor: pointer;
color: #000;
letter-spacing: 0;
}
header .nav-item.dropdown a.nav-link::after {
display: inline-block;
content: '';
background: url(../img/common/head_nav-arrow.png);
position: absolute;
top: 7px;
right: -15px;
width: 9px;
height: 7px;
}
header .list-nav .link-nav.noarrow::after {
content: none;
}
header .list-nav .link-nav:hover {
color: #0b68b7;
transition: 1.0s;
}
header .list-nav .link-nav {
position: relative;
display: block;
padding: 10px 0 30px;
}
header .list-nav .border-bottom {
display: inline-block;
position: relative;
}
header .list-nav .border-bottom:after {
position: absolute;
content: "";
width: 100%;
height: 4px;
background-color: #0b68b7;
left: 0;
bottom: -8px;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
header .list-nav li.current .border-bottom:after,
header .list-nav li.active .border-bottom:after {
-moz-transform: scaleX(1);
-ms-transform: scaleX(1);
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
header .list-nav .last .link-nav {
padding-right: 0;
}
header .list-nav .nav-inner {
position: absolute;
z-index: 100;
font-weight: normal;
top: 110px;
width: 280px;
}
header .list-nav .link-inner {
color: #fff;
-moz-transition: all 0.26s ease;
-o-transition: all 0.26s ease;
-webkit-transition: all 0.26s ease;
transition: all 0.26s ease;
display: block;
font-size: 13px;
background: rgba(0, 0, 0, 0.8);
padding: 11px 20px 11px;
}
header .list-nav .link-inner:hover {
color: #fdfa01;
}
header .list-nav .link-inner + .link-inner {
border-top: 1px solid #a0a0a0;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
header .list-contact .link {
padding-top: 12px;
padding-bottom: 6px;
}
header .list-contact .link img {
margin-top: -2px;
}
}
@media only screen and (max-width: 767px) {
header {
position: relative;
z-index: 9900;
}
header .header-wrap {
width: 100%;
}
header.header-fixed {
min-width: 100%;
}
header .header-inner {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
padding: 0;
position: relative;
z-index: 9999;
}
header .header-inner .header-tag {
display: none;
}
header .header-logo {
width: 150px;
padding-top: 22px;
}
header .header-logo img {
width: 100%;
}
header .wrap-menu {
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
header .wrap-menu > a {
padding: 5px;
}
header .wrap-menu a img {
/* display: block;
height: 34px;*/
width: 50%;
}
header .wrap-menu a.btn-menu img {
height: 6px;
width: auto;
margin: 0 auto;
}
header .wrap-menu .btn {
background: #fde202;
padding: 15px 17px;
}
header .wrap-menu .btn.contact {
display: none;
/* background: #333;
padding: 15px 12px;*/
}
header .wrap-menu .btn .txt {
color: #000;
font-size: 11px;
font-weight: bold;
padding-bottom: 8px;
}
header .wrap-menu .btn.contact .txt {
color: #fff;
}
header .wrap-menu .btn .icon {
text-align: center;
}
header .btn-menu {
position: relative;
width: 70px;
/* height: 50px;*/
font-size: 10px;
color: #000;
text-align: center;
padding-top: 5px;
letter-spacing: 0.1em;
margin-top: 8%;
}
header .btn-menu .menu-inner {
position: relative;
width: 26px;
height: 17px;
margin: 8px auto 0;
}
header .btn-menu .menu-inner span {
display: block;
height: 2px;
background: #000;
position: absolute;
width: 100%;
left: 0;
transition: 0.5s ease-in-out;
}
header .btn-menu .menu-inner span:nth-child(1) {
top: 0;
}
header .btn-menu .menu-inner span:nth-child(2) {
top: 7px;
}
header .btn-menu .menu-inner span:nth-child(3) {
top: 14px;
}
header.is-down .btn-menu .menu-inner span:nth-child(1) {
top: 8px;
transform: rotate(135deg);
}
header.is-down .btn-menu .menu-inner span:nth-child(2) {
width: 0;
left: 50%;
}
header.is-down .btn-menu .menu-inner span:nth-child(3) {
top: 8px;
transform: rotate(-135deg);
}
header .list-nav li {
margin-left: 0;
}
header .navigation {
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
position: fixed;
z-index: 9800;
top: 0;
bottom: 0;
right: -100vw;
padding: 50px 0 0;
width: 100%;
}
header .navigation .navigation-inner {
position: absolute;
z-index: 9800;
overflow-y: auto;
top: 80px;
bottom: 0;
right: 0;
width: 100%;
background: rgba(0, 0, 0, 0.8);
}
header .navigation .link-nav {
display: block;
color: #fff;
font-size: 13px;
background: url(../img/common/icn_arrow_07.png) right 16px center no-repeat;
background-size: 8px auto;
padding: 14px 20px 13px;
border-bottom: 1px solid #a0a0a0;
font-weight: bold;
}
header .navigation .link-nav.link-drop {
background-image: url(../img/common/icn_plus_wh.png);
background-size: 12px auto;
}
header .navigation .link-nav span.mail,
header .navigation .link-nav span.inst {
position: relative;
}
header .navigation .link-nav span.mail::after {
background: url(../img/common/sp/ico_mail.png) left 0 center no-repeat;
background-size: 18px auto;
content: "";
display: block;
position: absolute;
width: 18px;
height: 11px;
right: -25px;
top: 5px;
}
header .navigation .link-nav span.inst::after {
background: url(../img/common/sp/ico_instagram_wt.png) left 0 center no-repeat;
background-size: 18px auto;
content: "";
display: block;
position: absolute;
width: 18px;
height: 18px;
right: -25px;
top: 2px;
}
header .navigation .active .link-nav.link-drop {
background-image: url(../img/common/icn_minus_wh.png);
background-size: 12px auto;
}
header .navigation .link-inner {
color: #eee;
display: block;
font-size: 12px;
padding: 13px 36px 12px;
border-bottom: 1px solid #a0a0a0;
background: url(../img/common/icn_arrow_07.png) right 16px center no-repeat;
background-size: 8px auto;
}
}
/* 画像がスライドする動きの制御
* ----------------------------------------------- */
.img-wrap {
opacity: 0;
}
.img-animation {
animation: img-opacity 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
overflow: hidden;
position: relative;
}
.img-animation::before {
animation: img-animation 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
background: #fff;
content: '';
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
@keyframes img-opacity {
100% {
opacity: 1;
}
}
@keyframes img-animation {
100% {
transform: translateX(100%);
}
}
/* Contact
* ----------------------------------------------- */
footer .section-footer-contact {
background: linear-gradient(220deg,#0186af,#00418b);
padding: 100px 0;
}
footer .section-footer-contact .wrapper {
width: 1180px;
}
footer .section-footer-contact .wrap-title .subtitle {
margin-bottom: 40px;
}
footer .section-footer-contact .block-footer-contact {
display: flex;
justify-content: space-between;
}
footer .section-footer-contact .block-footer-contact .block-footer-txt {
background: #fff;
color: #000;
width: 360px;
padding: 40px;
border-radius: 15px;
transition: 0.4s;
}
footer .section-footer-contact .block-footer-contact .block-footer-txt:hover {
opacity: 0.9;
transition: 0.4s;
}
footer .section-footer-contact .block-footer-contact .ttl {
color: #666;
font-size: 12px;
font-weight: bold;
letter-spacing: 0.07em;
padding-bottom: 10px;
}
footer .section-footer-contact .block-footer-contact .ttls {
font-size: 18px;
padding-bottom: 15px;
font-weight: bold;
}
footer .section-footer-contact .block-footer-contact .block-footer-link .ttl {
display: inline-block;
font-size: 13px;
font-weight: bold;
color: #00418b;
border-bottom: solid 1px #000;
padding: 0 22px 13px 0;
}
footer .section-footer-contact .block-footer-contact .block-footer-link .ttl::after {
content: url(../img/common/foot-arrow.png);
position: absolute;
top: -3px;
}
footer .section-footer-contact .block-footer-contact .subttl {
position: relative;
font-size: 13px;
line-height: 1.6;
}
footer .section-footer-contact .block-footer-link {
display: flex;
justify-content: space-between;
position: relative;
margin-top: 30px;
width: 100%;
}
footer .section-footer-contact .block-footer-link .img {
width: 17%;
}
footer .section-footer-contact .block-footer-link .img.dl {
position: absolute;
top: -7px;
right: 0;
width: 16%;
}
footer .section-footer-contact .block-footer-link .img.rec {
position: absolute;
top: -5px;
right: 0;
width: 16%;
}
footer .section-footer-contact .block-footer-link .foot-link {
position: relative;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
border-bottom: solid 1px #000;
padding-bottom: 12px;
transition: 0.4s;
}
footer .section-footer-contact .block-footer-link .foot-link:hover {
color: #01589b;
transition: 0.4s;
}
@media only screen and (max-width: 767px) {
footer .section-footer-contact {
padding: 80px 0 70px;
}
footer .section-footer-contact .wrapper {
width: 100%;
}
footer .section-footer-contact .wrapper .wrap-title .subtitle {
margin-bottom: 30px;
}
footer .section-footer-contact .wrapper .block-footer-contact {
flex-wrap: wrap;
}
footer .section-footer-contact .wrapper .block-footer-contact a {
width: 100%;
}
footer .section-footer-contact .wrapper .block-footer-contact ul {
width: 100%;
height: auto;
margin-bottom: 20px;
padding: 0;
}
footer .section-footer-contact .wrapper .block-footer-contact .ttls {
padding-bottom: 20px;
}
footer .section-footer-contact .wrapper .block-footer-contact .subttl::after {
content: none;
}
footer .section-footer-contact .block-footer-contact .block-footer-txt {
width: 100%;
padding: 40px;
border-radius: 10px;
margin-bottom: 30px;
}
}
/* COMMON FOOTER
* ----------------------------------------------- */
@media print, (min-width: 768px) {
footer {
background-color: #000;
/*margin-top: 140px;*/
}
footer .btn-page-top {
position: fixed;
width: 67px;
height: 67px;
right: 20px;
bottom: 12px;
z-index: 99;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
footer .btn-page-top.visible {
bottom: -200px;
}
footer .btn-mediasearch {
position: fixed;
width: 260px;
height: 70px;
right: 100px;
bottom: 10px;
z-index: 99;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
footer .btn-mediasearch.visible {
bottom: -200px;
}
footer .common-footer-wrapper {
background: #000;
font-family: source-han-sans-japanese, sans-serif;
letter-spacing: 0.05em;
max-width: 1180px;
margin: 0 auto;
}
footer .block-sitemap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: #000;
width: 100%;
margin: auto;
padding: 80px 0 0;
}
footer .block-sitemap .footer-about {
width: 25%;
font-size: 28px;
color: #fff;
border-right: solid 1px #a6a7a7;
height: 100%;
}
footer .block-sitemap .footer-about a {
color: #fff;
}
footer .block-sitemap .footer-about dl {
margin-top: 20px;
line-height: 1.8;
}
footer .block-sitemap .footer-about dl dt {
font-size: 18px;
}
footer .block-sitemap .footer-about dl dd {
font-size: 14px;
}
footer .block-sitemap .footer-about .footer-logo img {
width: 200px;
margin: 0 auto;
}
footer .block-sitemap .footer-about .footer-logo {
margin-bottom: 20px;
}
footer .block-sitemap .footer-about .footer-company {
}
footer .block-sitemap .footer-about .footer-company .ttl {
font-size: 16px;
}
footer .block-sitemap .footer-about .footer-company .tel {
font-size: 29px;
font-weight: bold;
margin: 5px 0 10px;
}
footer .block-sitemap .footer-about .footer-company .txt {
font-size: 15px;
}
footer .block-sitemap .footer-about address p.add {
font-size: 13px;
line-height: 1.8;
margin-top: 40px;
}
footer .block-sitemap .footer-about address p.mail {
position: relative;
font-size: 12px;
margin-top: 10px;
padding-left: 21px;
}
footer .block-sitemap .footer-about address p.mail::before {
position: absolute;
content: '';
background: url(../img/common/ico_foot_add_mail.png) no-repeat;
top: 4px;
left: 0;
width: 16px;
height: 12px;
}
footer .block-sitemap .box-sitemap {
color: #fff;
width: 70%;
margin: 0 0 110px;
}
footer .block-sitemap .box-sitemap table.sitemap {
border: none;
padding: 0;
}
footer .block-sitemap .box-sitemap table.sitemap,tr,th,td {
border: none;
text-align: left;
vertical-align: top;
}
footer .block-sitemap .box-sitemap table.sitemap tr {
display: table;
border-collapse: separate;
border-spacing: 0 10px;
}
footer .block-sitemap .box-sitemap table.sitemap .ttl {
font-size: 16px;
width: 100px;
}
footer .block-sitemap .box-sitemap table.sitemap .line {
border-top: solid 1px #fff;
width: 60px;
margin-top: 21px;
display: block;
}
footer .block-sitemap .box-sitemap table.sitemap .line.bk {
border-top: solid 1px #000;
}
footer .block-sitemap .box-sitemap table.sitemap .item {
font-size: 14px;
font-weight: bold;
width: 200px;
padding-left: 25px;
}
footer .block-sitemap .box-sitemap table.sitemap .list {
font-size: 13px;
line-height: 1.8;
width: 830px;
}
footer .block-sitemap .box-sitemap table.sitemap .list.corporate {
padding-left: 30px;
}
footer .block-sitemap .box-sitemap table.sitemap .list a {
color: #fff;
}
footer .block-sitemap .box-sitemap table.sitemap .list a:hover {
color: #fcf901;
}
footer .block-sitemap .box-sitemap table.sitemap .list a::after {
content: ' ｜ ';
}
footer .block-sitemap .box-sitemap table.sitemap .list a::after:last-child {
content: none;
}
footer .block-sitemap .box-sitemap p + p {
margin-top: 2px;
}
footer .block-sitemap .footer-col {
margin-left: 40px;
}
footer .block-sitemap .col-first {}
footer .block-sitemap .col-second {}
footer .block-sitemap .col-third {}
footer .block-sitemap .col-fourth {}
footer .block-sitemap .col-fifth {}
footer .block-sitemap .col-sixth {}
footer .block-sitemap .col-seventh {}
footer .block-sitemap .col-eighth {}
footer .block-sitemap .link-site {
font-weight: bold;
display: inline-block;
color: #fff;
margin-bottom: 15px;
padding-left: 22px;
letter-spacing: 0.1em;
}
footer .block-sitemap .list-site {
display: block !important;
padding: 0 0 0 30px;
}
footer .block-sitemap .list-site a {
display: inline-block;
font-size: 12px;
color: #fff;
margin-bottom: 14px;
line-height: 1.2;
}
footer .block-sitemap .box-contact {
display: flex;
flex-wrap: wrap;
margin-bottom: 50px;
}
footer .block-sitemap .box-contact .box-cntct,
footer .block-sitemap .box-contact .box-media {
font-size: 15px;
font-weight: bold;
letter-spacing: 0.05em;
text-align: center;
}
footer .block-sitemap .box-contact .box-cntct {
margin-right: 30px;
}
footer .block-sitemap .box-contact .btn-cntct {
position: relative;
display: block;
background: #0099b0;
color: #fff;
border-radius: 6px;
padding: 33px 33px 33px 55px;
width: 340px;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-cntct::before {
position: absolute;
content: '';
background: url(../img/common/foot-ico-contact.png) no-repeat;
top: 42%;
left: 20.5%;
width: 20px;
height: 15px;
}
footer .block-sitemap .box-contact .btn-cntct:hover {
opacity: 0.8;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media {
position: relative;
display: block;
background: linear-gradient(220deg,#0099c8,#0056b6);
color: #fff;
border-radius: 6px;
padding: 33px 33px 33px 50px;
width: 340px;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media:hover {
opacity: 0.8;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media::before {
position: absolute;
content: '';
background: url(../img/common/foot-ico-media.png) no-repeat;
top: 39%;
left: 24.5%;
width: 18px;
height: 20px;
}
footer .block-sitemap .sitemapBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
footer .block-sitemap .sitemapBox .box {
width: 25%;
letter-spacing: 0.05em;
}
footer .block-sitemap .sitemapBox .box .ttl {
display: inline-block;
font-size: 15px;
font-weight: bold;
color: #fff;
margin-bottom: 30px;
}
footer .block-sitemap .sitemapBox .box .ttl.txt {
margin-bottom: 18px;
}
footer .block-sitemap .sitemapBox .box .sub {
display: inline-block;
font-size: 12px;
color: #ccc;
margin-bottom: 13px;
}
footer .block-copy {
font-size: 12px;
color: #fff;
border-top: solid 1px #666;
letter-spacing: 0.06em;
padding: 30px 0 40px;
}
}
footer .block-add {
color: #fff;
margin: 20px 0 50px;
}
footer .block-add a:link,
footer .block-add a:visited,
footer .block-add a:hover,
footer .block-add a:active {
color: #fff;
}
footer .block-add p.ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 15px;
}
footer .block-add .addBox {
display: flex;
flex-wrap: wrap;
font-size: 14px;
line-height: 1.8;
}
footer .block-add .addBox .add {
margin-right: 60px;
}
footer .block-add .addBox .tel .ico-tel::before {
content: url(../img/common/ico_foot_add_tel.png);
padding-right: 8px;
}
footer .block-add .addBox .tel .ico-mail::before {
content: url(../img/common/ico_foot_add_mail.png);
padding-right: 8px;
}
@media only screen and (max-width: 767px) {
footer .block-add {
padding: 0 2%;
}
footer .block-add .addBox .add {
margin: 0 0 10px 0;
}
footer .block-sitemap {
padding: 60px 30px;
}
footer .block-sitemap .box-contact {
display: flex;
flex-wrap: wrap;
margin: 30px 0 40px;
}
footer .block-sitemap .box-contact .box-cntct,
footer .block-sitemap .box-contact .box-media {
font-size: 15px;
font-weight: bold;
letter-spacing: 0.05em;
text-align: center;
}
footer .block-sitemap .box-contact .box-cntct {
margin-right: 0
}
footer .block-sitemap .box-contact .btn-cntct {
position: relative;
display: block;
background: #0099b0;
color: #fff;
border-radius: 6px;
padding: 25px 33px 25px 55px;
margin-bottom: 20px;
width: 100%;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-cntct::before {
position: absolute;
content: '';
background: url(../img/common/foot-ico-contact.png) no-repeat;
top: 41%;
left: 20.5%;
width: 20px;
height: 15px;
}
footer .block-sitemap .box-contact .btn-cntct:hover {
opacity: 0.8;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media {
position: relative;
display: block;
background: linear-gradient(220deg,#0099c8,#0056b6);
color: #fff;
border-radius: 6px;
padding: 25px 33px 25px 50px;
width: 100%;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media:hover {
opacity: 0.8;
transition: 0.4s;
}
footer .block-sitemap .box-contact .btn-media::before {
position: absolute;
content: '';
background: url(../img/common/foot-ico-media.png) no-repeat;
top: 39%;
left: 24.5%;
width: 19px;
height: 20px;
}
footer .block-sitemap .sitemapBox .box {
width: 100%;
}
footer .block-sitemap .footer-col {
margin-left: 0;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
footer .block-sitemap .link-site {
background-position: left top;
}
}
@media only screen and (max-width: 767px) {
footer .btn-mediasearch {
position: fixed;
right: 85px;
bottom: 10px;
z-index: 99;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
footer .btn-mediasearch img {
height: 60px;
}
footer .btn-mediasearch.visible {
bottom: -200px;
}
footer .btn-page-top {
position: fixed;
width: 60px;
right: 15px;
bottom: 10px;
z-index: 9999;
}
footer .btn-page-top.visible {
bottom: -200px;
}
footer .block-sitemap {
background: #000;
padding: 40px;
}
footer .block-sitemap .footer-about {
width: 100%;
font-size: 28px;
color: #fff;
border-right: none;
height: 100%;
}
footer .block-sitemap .footer-about a {
color: #fff;
}
footer .block-sitemap .footer-about dl {
margin-top: 20px;
line-height: 1.8;
}
footer .block-sitemap .footer-about dl dt {
font-size: 18px;
}
footer .block-sitemap .footer-about dl dd {
font-size: 14px;
}
footer .block-sitemap .footer-about .footer-logo img {
width: 200px;
margin: 0 auto;
}
footer .block-sitemap .footer-about .footer-logo {
width: 200px;
margin-bottom: 20px;
}
footer .block-sitemap .footer-about .footer-company {
}
footer .block-sitemap .footer-about .footer-company .ttl {
font-size: 16px;
}
footer .block-sitemap .footer-about .footer-company .tel {
font-size: 29px;
font-weight: bold;
margin: 5px 0 2px;
}
footer .block-sitemap .footer-about .footer-company .txt {
font-size: 15px;
}
footer .block-sitemap .footer-about address p.add {
font-size: 14px;
line-height: 1.6;
margin-top: 20px;
}
footer .block-sitemap .footer-about address p.mail {
position: relative;
font-size: 14px;
margin-top: 10px;
padding-left: 21px;
}
footer .block-sitemap .footer-about address p.mail::before {
position: absolute;
content: '';
background: url(../img/common/ico_foot_add_mail.png) no-repeat;
top: 4px;
left: 0;
width: 16px;
height: 12px;
}
footer .block-sitemap .footer-about .company-data {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between !important;
}
footer .block-sitemap .footer-about .company-data dl {
padding: 0 !important;
}
footer .block-sitemap .footer-about .company-data dl dt {
font-size: 16px;
}
footer .block-sitemap .footer-about .company-data dl dd {
font-size: 13px;
line-height: 1.6;
}
footer .block-sitemap .box-sitemap {
border-top: 1px solid #999;
width: 100%;
margin-top: 30px;
padding-top: 5px;
}
footer .block-sitemap .box-sitemap p + p {
margin-top: 2px;
}
footer .block-sitemap .link-site {
position: relative;
font-weight: bold;
display: block;
color: #fff;
padding: 12px 30px 12px 16px;
border-bottom: 1px solid #fff;
letter-spacing: 0.1em;
font-size: 14px;
}
footer .block-sitemap .link-site:after {
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
-webkit-transition: all 0.35s ease-out;
transition: all 0.35s ease-out;
content: "";
position: absolute;
width: 14px;
height: 14px;
background: url(../img/common/icn_arrow_07.png) 0 0 no-repeat;
background-size: 8px auto;
right: 15px;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
footer .block-sitemap .link-site.link-drop:after {
background-image: url(../img/common/icn_plus_wh.png);
background-size: 14px auto;
right: 20px;
}
footer .block-sitemap .link-site .mail,
footer .block-sitemap .link-site .inst {
position: relative;
}
footer .block-sitemap .link-site .mail::after {
background: url(../img/common/sp/ico_mail.png) left 0 center no-repeat;
background-size: 16px auto;
content: "";
display: block;
position: absolute;
width: 16px;
height: 11px;
right: -25px;
top: 3px;
}
footer .block-sitemap .link-site .inst::after {
background: url(../img/common/sp/ico_instagram_wt.png) left 0 center no-repeat;
background-size: 18px auto;
content: "";
display: block;
position: absolute;
width: 18px;
height: 18px;
right: -25px;
top: 2px;
}
footer .block-sitemap .active .link-site.link-drop:after {
background-image: url(../img/common/icn_minus_wh.png);
background-size: 14px auto;
right: 20px;
}
footer .block-sitemap .list-site {
padding: 0;
}
footer .block-sitemap .list-site a {
display: block;
font-size: 12px;
border-bottom: 1px solid #fff;
color: #fff;
line-height: 1.2;
background: #333 url(../img/common/icn_arrow_07.png) right 20px center no-repeat;
background-size: 8px auto;
padding: 15px 20px;
}
footer .block-copy {
background: #000;
font-size: 12px;
border-top: solid 1px #666;
padding: 20px 0 90px;
color: #fff;
letter-spacing: 0.06em;
}
footer .block-sitemap .box-contact {
display: block;
}
footer .block-sitemap .box-contact .btn-cntct::before {
background: url(../img/common/foot-ico-contact.png) no-repeat;
left: 17.5%;
}
footer .block-sitemap .box-contact .btn-media {
width: 100%;
}
footer .block-sitemap .box-contact .btn-media::before {
left: 21.5%;
}
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
}
.slick-track:before, .slick-track:after {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide:active, .slick-slide:focus {
outline: none;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
.slick-arrow,
.slick-dots button {
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -1000px;
overflow: hidden;
padding: 0;
border: none;
background-color: transparent;
outline: none;
display: block;
cursor: pointer;
}
/* COMMON ANIMATION */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes fade-in-up {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fade-in-up {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fade-in-up {
-webkit-animation-name: fade-in-up;
animation-name: fade-in-up;
}
@-webkit-keyframes fade-in-down {
0% {
opacity: 0;
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fade-in-down {
0% {
opacity: 0;
-webkit-transform: translateY(-50px);
-ms-transform: translateY(-50px);
transform: translateY(-50px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fade-in-down {
-webkit-animation-name: fade-in-down;
animation-name: fade-in-down;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in {
-webkit-animation-name: fade-in;
animation-name: fade-in;
}
@-webkit-keyframes fade-in-left {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fade-in-left {
from {
opacity: 0;
-webkit-transform: translate3d(-50px, 0, 0);
transform: translate3d(-50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fade-in-left {
-webkit-animation-name: fade-in-left;
animation-name: fade-in-left;
}
@-webkit-keyframes fade-in-right {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fade-in-right {
from {
opacity: 0;
-webkit-transform: translate3d(50px, 0, 0);
transform: translate3d(50px, 0, 0);
}
to {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fade-in-right {
-webkit-animation-name: fade-in-right;
animation-name: fade-in-right;
}
img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.img {
width: 100%;
height: auto;
}
.img-max {
max-width: 100%;
height: auto;
}
.block-four {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.table-base {
width: 100%;
}
.table-base th, .table-base td {
border-bottom: 1px solid #5088bd;
}
.table-base th {
vertical-align: top;
font-weight: bold;
}
.table-info {
width: 100%;
border-top: 1px solid #bbb;
}
.table-info th, .table-info td {
border-bottom: 1px solid #bbb;
padding: 22px 40px 19px;
}
.table-info th {
background-color: #f5f4f4;
font-weight: bold;
}
.table-desc {
width: 100%;
}
.table-desc th, .table-desc td {
border-bottom: 1px solid #bbb;
padding: 17px 40px 14px;
vertical-align: top;
}
.table-desc th {
background-color: #f5f4f4;
font-weight: bold;
}
.table-desc tr.line-head td {
font-weight: bold;
background-color: #333;
color: #fff;
}
.table-desc tr.line-head td + td {
border-left: 1px solid #fff;
}
.table-desc tr:not(.line-head) th:first-child,
.table-desc tr:not(.line-head) td:first-child {
border-left: 1px solid #bbb;
}
.table-desc tr:not(.line-head) th:last-child,
.table-desc tr:not(.line-head) td:last-child {
border-right: 1px solid #bbb;
}
.table-detail {
width: 100%;
border-top: 1px solid #8c8c8c;
}
.table-detail th, .table-detail td {
border-bottom: 1px solid #8c8c8c;
padding: 22px 0 20px;
vertical-align: top;
}
.table-detail th {
font-weight: bold;
}
.table-detail td {
font-weight: normal;
}
.flex {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media print, (min-width: 768px) {
.block-three {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.block-three .item {
width: 340px;
margin-right: 30px;
}
.block-three .item:nth-child(3n) {
margin-right: 0;
}
.block-four {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.block-four .item {
width: 255px;
margin-right: 20px;
margin-bottom: 30px;
}
.block-four .item:nth-child(4n) {
margin-right: 0;
}
.flex-md {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.table-base th, .table-base td {
padding: 23px 0 20px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.table-info th, .table-info td {
padding-top: 26px;
}
}
@media only screen and (max-width: 767px) {
.block-four .item {
width: 48%;
margin-right: 4%;
margin-bottom: 14px;
}
.block-four .item:nth-child(2n) {
margin-right: 0;
}
.table-base {
font-size: 10px;
}
.table-base th, .table-base td {
padding: 12px 0 10px;
}
.wrap-table {
overflow-x: scroll;
}
.table-info {
font-size: 11px;
}
.table-info th, .table-info td {
padding: 8px 12px 7px;
}
.table-desc {
font-size: 11px;
}
.table-desc th, .table-desc td {
padding: 8px 12px 7px;
}
.table-detail th, .table-detail td {
padding-top: 12px;
padding-bottom: 10px;
}
}
/* COMMON BREADCRUM
* ----------------------------------------------- */
.breadcrumb li {
display: inline;
}
.breadcrumb span.arrow {
display: inline-block;
vertical-align: middle;
}
@media print, (min-width: 768px) {
.breadcrumb {
margin-top: 20px;
}
.breadcrumb.works {
margin: 15px 0;
}
.breadcrumb.company {
margin: 15px 0;
}
.breadcrumb ul {
text-align: right;
}
.breadcrumb li {
font-size: 12px;
padding: 5px 12px 5px 0;
}
.breadcrumb span.arrow {
margin-top: -2px;
margin-right: 14px;
}
.breadcrumb span.arrow.mgRdel {
margin-right: 0;
}
}
@media only screen and (max-width: 767px) {
.breadcrumb {
margin: 20px 0;
width: 100%;
}
.breadcrumb ul {
text-align: right;
}
.breadcrumb li {
font-size: 12px;
padding: 0 4px 0 0;
}
.breadcrumb span.arrow {
margin-top: -4px;
margin-right: 8px;
}
}
/* COMMON TITLE
* ----------------------------------------------- */
.wrap-title {
text-align: center;
}
.wrap-title .border {
width: 110px;
border-bottom: solid 1px #000;
padding-top: 20px;
margin-bottom: 50px;
}
.wrap-title .border.s-ttl {
padding-top: 60px;
margin-bottom: 30px;
}
.wrap-title .sec-title {
font-style: normal;
position: relative;
color: #000;
font-size: 56px;
margin-bottom: 20px;
letter-spacing: 0.01em;
text-align: left;
}
.wrap-title .sec-title span {
display: block;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.05em;
margin: 10px 0 40px;
}
.wrap-title .subtitle {
font-size: 15px;
text-align: left;
line-height: 2;
}
.contact-title {
text-align: center;
font-size: 40px;
}
.wrap-block {
padding: 10px 0 30px;
font-weight: bold;
}
.wrap-block .block-title {
font-size: 40px;
margin-bottom: 6px;
}
.wrap-block.wt {
color: #fff;
}
.feature-title {
font-weight: bold;
color: #0a6db3;
font-size: 24px;
}
.type-title {
position: relative;
font-size: 32px;
font-weight: bold;
padding-bottom: 14px;
border-bottom: 4px solid #000;
text-align: left;
}
.spec-title {
font-weight: bold;
font-size: 24px;
padding-left: 22px;
background: url(../img/common/icn_arrow_09.png) left 10px no-repeat;
}
.detail-title {
font-size: 36px;
}
.rich-title {
font-size: 28px;
}
.main-title {
text-align: center;
font-size: 28px;
padding-bottom: 12px;
border-bottom: 4px solid #fff;
}
.list-title {
font-weight: bold;
background-color: #f3f3f3;
font-size: 18px;
padding: 18px 30px 16px;
}
.recruit-title {
font-weight: bold;
background-color: #eee;
font-size: 18px;
padding: 22px 30px 18px;
}
.recruit-title .arrow {
font-size: 10px;
display: inline-block;
vertical-align: middle;
}
@media print, (min-width: 768px) {
.wrap-led {
position: relative;
}
.wrap-led .btn-line {
position: absolute;
right: 0;
top: -10px;
width: 240px;
padding: 6px 15px 6px 30px;
background-position: right 20px center;
}
.wrap-led .btn-line span {
padding: 4px 35px 0 35px;
letter-spacing: -0.01em;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.wrap-led .btn-line span {
padding-top: 8px;
}
.recruit-title {
padding-top: 24px;
padding-bottom: 16px;
}
}
@media only screen and (max-width: 767px) {
.wrap-title {
padding-bottom: 0;
}
.wrap-title .sec-title {
font-size: 50px;
letter-spacing: 0.01em;
}
.wrap-title .subtitle {
margin: 10px 0 30px;
}
.wrap-title .sec-title .wrap-small {
padding: 0 10px;
}
.product-title {
background-position: left 3px;
background-size: 9px auto;
padding-left: 14px;
}
.wrap-block {
padding: 10px 0 24px;
}
.wrap-block .block-title {
font-size: 28px;
margin-bottom: 5px;
}
.wrap-block.second .block-title {
font-size: 20px;
}
.wrap-block.third .block-subtitle {
font-size: 10px;
}
.feature-title {
font-size: 16px;
}
.type-title {
font-size: 16px;
padding-bottom: 8px;
border-bottom-width: 2px;
}
.spec-title {
font-size: 14px;
padding-left: 15px;
background-size: 6px auto;
background-position: left 5px;
}
.detail-title {
font-size: 18px;
}
.rich-title {
font-size: 15px;
}
.main-title {
font-size: 15px;
padding-bottom: 6px;
border-bottom-width: 2px;
}
.list-title {
font-size: 16px;
padding: 10px 30px 8px;
}
.recruit-title {
font-size: 12px;
padding: 12px 20px 10px;
}
.contact-title {
font-size: 18px;
}
}
/* COMMON BUTTON
* ----------------------------------------------- */
/* Basic */
.link-more {
width: 330px;
height: 80px;
border: solid 1px #000;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
background: #000;
}
.link-more a {
/* display: block; //入れるとボタン内画像が消える*/
font-size: 26px;
font-weight: 400;
font-style: normal;
color: #fff;
text-decoration: none;
line-height: 3;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.link-more a::after {
content: '⇀';
padding-left: 15px;
}
.link-more.original {
width: 400px;
}
.link-more.original a {
font-size: 18px;
font-weight: 800;
line-height: 4.2;
}
.btn-effect {
width: 330px;
height: 80px;
left: -330px;
background: #fff;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.btn-effect.original {
width: 400px;
height: 80px;
left: -400px;
}
.link-more:hover .btn-effect {
left: 0;
}
.link-more:hover a {
color: #000;
}
.link-more:hover a::after {
content: '⇀';
padding-left: 15px;
}
/* Media */
.btn-mediapdf {
display: block;
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #044191;
border: solid 3px #044191;
padding: 20px;
width: 420px;
height: 90px;
}
.btn-mediapdf.other {
width: 380px;
}
.btn-mediapdf:before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-mediapdf:hover::before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing_hover.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-mediapdf:hover {
background: #fff;
color: #044191;
transition: 0.5s;
}
.btn-mediapdf:after {
content: '⇀';
margin-left: 40px;
}
.btn-mediapdf:hover::after {
content: '⇀';
color: #044191;
margin-left: 40px;
}
.btn-mediapdf.web:before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_guitar.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
margin-top: 5px;
}
.btn-mediapdf.web:hover::before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_guitar_hover.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
margin-top: 5px;
}
@media only screen and (max-width: 767px) {
.btn-mediapdf {
width: 100%;
font-size: 16px;
}
.btn-mediapdf:before {
width: 40px;
height: 44px;
margin-right: 15px;
}
.btn-mediapdf:hover::before {
width: 40px;
height: 44px;
margin-right: 15px;
}
}
/* Media */
.btn-mediapdf {
display: block;
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #044191;
border: solid 3px #044191;
padding: 20px;
width: 420px;
height: 90px;
}
.btn-mediapdf:before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-mediapdf:hover::before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing_hover.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-mediapdf:hover {
background: #fff;
color: #044191;
transition: 0.5s;
}
.btn-mediapdf:after {
content: '⇀';
margin-left: 40px;
}
.btn-mediapdf:hover::after {
content: '⇀';
color: #044191;
margin-left: 40px;
}
.btn-mediapdf.web:before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_guitar.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
margin-top: 5px;
}
.btn-mediapdf.web:hover::before {
content: '';
display: inline-block;
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_guitar_hover.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
margin-top: 5px;
}
@media only screen and (max-width: 767px) {
.btn-mediapdf {
width: 100%;
font-size: 16px;
}
.btn-mediapdf:before {
width: 40px;
height: 44px;
margin-right: 15px;
}
.btn-mediapdf:hover::before {
width: 40px;
height: 44px;
margin-right: 15px;
}
}
/* Media-btn-download */
.btn-mediapdf.download {
font-size: 16px;
height: 80px;
padding: 25px;
width: 100%;
}
.btn-mediapdf.download:before {
width: 26px;
height: 22px;
background: url(../img/common/ico_btn_download.png) no-repeat;
margin-right: 20px;
}
.btn-mediapdf.download:hover::before {
width: 26px;
height: 22px;
background: url(../img/common/ico_btn_download_hover.png) no-repeat;
margin-right: 20px;
}
@media only screen and (max-width: 767px) {
.btn-mediapdf.download {
width: 100%;
}
.btn-mediapdf.download:before {
margin-right: 15px;
}
.btn-mediapdf.download:hover::before {
margin-right: 15px;
}
}
/* Btn-Contact */
.btn-contactL {
display: block;
color: #000;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #fff;
border: solid 3px #000;
border-radius: 6px;
padding: 20px;
width: 580px;
height: 100px;
}
.btn-contactL:before {
content: '';
display: inline-block;
width: 8px;
height: 14px;
background: url(../img/common/arrow_right_bk.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-contactL:hover::before {
content: '';
display: inline-block;
width: 8px;
height: 14px;
background: url(../img/common/arrow_right_yl.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-right: 30px;
}
.btn-contactL:hover {
background: #000;
color: #fdfa00;
transition: 0.5s;
}
.btn-contactL:after {
content: '';
display: inline-block;
width: 70px;
height: 45px;
background: url(../img/common/ico_btn_contact.png) no-repeat;
background-size: contain;
vertical-align: middle;
margin-left: 30px;
margin-top: 10px;
}
.btn-contactL:hover::after {
content: '';
display: inline-block;
width: 70px;
height: 45px;
background: url(../img/common/ico_btn_contact_hover.png) no-repeat;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
margin-left: 30px;
margin-top: 10px;
}
@media only screen and (max-width: 767px) {
.btn-contactL {
width: 100%;
font-size: 15px;
}
.btn-contactL:before {
margin-right: 10px;
}
.btn-contactL:hover::before {
margin-right: 10px;
}
.btn-contactL:after {
width: 50px;
margin-left: 20px;
}
.btn-contactL:hover::after {
width: 50px;
margin-left: 20px;
}
}
/* Media */
.link-more.media {
width: 420px;
height: 90px;
border: solid 3px #044191;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
background: #044191;
}
.link-more.media a {
font-size: 18px;
font-weight: bold;
font-style: normal;
color: #fff;
text-decoration: none;
line-height: 5;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.link-more.media a::before {
position:absolute;
top: -17px;
left: -70px;
content:"";
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing.png) no-repeat;
background-size: contain;
}
.link-more.media:hover a::before {
position:absolute;
top: -17px;
left: -70px;
content:"";
width: 44px;
height: 46px;
background: url(../img/common/ico_btn_dancing_hover.png) no-repeat;
background-size: contain;
}
.link-more.media a::after {
content: '⇀';
}
.btn-effect.media {
width: 420px;
height: 90px;
left: -420px;
background: #fff;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.link-more.media:hover a::after {
content: '⇀';
}
.link-more.media:hover .btn-effect {
left: 0;
}
.link-more.media:hover a {
color: #044191;
}
/* Originalmedia */
.link-more.origin {
display: block;
color: #000;
font-size: 16px;
font-weight: bold;
text-align: center;
border: solid 3px #000;
background: #fff;
width: 280px;
height: 60px;
line-height: 3.5;
}
.link-more.origin::after {
content: '⇀';
padding-left: 15px;
}
.link-more.origin:hover {
background: #000;
color: #fdfa01;
transition: 0.5s;
}
.link-more.origin:hover::after {
content: '⇀';
padding-left: 15px;
color: #fdfa01;
}
.link-more.back-page a::after {
content: none;
}
.backBtn {
margin-top: -100px;
margin-bottom: 140px;
}
/* Works-btn */
.more-btn.works {
display: flex;
justify-content: space-between;
}
.more-btn.works-new {
display: flex;
justify-content: flex-start;
}
.link-more.back-worklist,
.link-more.btn-contact,
.link-more.back-page {
width: 430px;
height: 75px;
border: solid 3px #000;
text-align: center;
cursor: pointer;
position: relative;
box-sizing: border-box;
overflow: hidden;
background: #fff;
border-radius: 5px;
}
.more-btn.works-new .link-more.back-worklist {
margin-right: 20px;
}
.link-more.back-worklist a,
.link-more.btn-contact a,
.link-more.back-page a {
font-size: 15px;
font-weight: bold;
font-style: normal;
color: #000;
text-decoration: none;
line-height: 4.6;
transition: all .5s ease;
z-index: 2;
position: relative;
}
.link-more.back-worklist a::before {
content: '↼';
position:absolute;
left: -60px;
display: inline-block;
}
.link-more.back-page a::before {
content: '↼';
position:absolute;
top: -30px;
left: -20px;
display: inline-block;
}
.link-more.btn-contact a::before {
position:absolute;
top: 4px;
left: -40px;
content:"";
display: inline-block;
width: 8px;
height: 14px;
background: url(../img/common/arrow_right_bk.png) no-repeat;
background-size: contain;
}
.link-more.btn-contact:hover a::before {
position:absolute;
top: 3px;
left: -40px;
content:"";
display: inline-block;
width: 8px;
height: 14px;
background: url(../img/common/arrow_right_yl.png) no-repeat;
background-size: contain;
}
.link-more.back-worklist a::after {
position:absolute;
top: -17px;
left: 150px;
content:"";
display: inline-block;
width: 31px;
height: 47px;
background: url(../img/common/ico_list_off.png) no-repeat;
background-size: contain;
}
.link-more.btn-contact a::after {
position:absolute;
top: -5px;
left: 280px;
content:"";
display: inline-block;
width: 31px;
height: 47px;
background: url(../img/common/ico_contact_off.png) no-repeat;
background-size: contain;
}
.btn-effect.back-worklist,
.btn-effect.btn-contact,
.btn-effect.back-page {
width: 430px;
height: 75px;
left: -430px;
background: #000;
position: absolute;
transition: all .5s ease;
z-index: 1;
}
.link-more.back-worklist:hover,
.link-more.btn-contact:hover,
.link-more.back-page:hover {
background: #000;
}
.link-more.back-worklist:hover .btn-effect,
.link-more.btn-contact:hover .btn-effect,
.link-more.back-page:hover .btn-effect {
left: 0;
}
.link-more.back-worklist:hover a,
.link-more.btn-contact:hover a,
.link-more.back-page:hover a {
color: #fdfa00;
}
.link-more.back-worklist:hover a::after {
position:absolute;
top: -17px;
left: 150px;
content:"";
display: inline-block;
width: 31px;
height: 47px;
background: url(../img/common/ico_list_on.png) no-repeat;
background-size: contain;
}
.link-more.btn-contact:hover a::after {
position:absolute;
top: -9px;
left: 280px;
content:"";
display: inline-block;
width: 31px;
height: 47px;
background: url(../img/common/ico_contact_on.png) no-repeat;
background-size: contain;
}
.link-more.back-worklist:hover a::before {
content: '↼';
position: absolute;
left: -60px;
}
@media only screen and (max-width: 767px) {
.link-more {
max-width: 100%;
height: 80px;
}
.link-more.origin {
max-width: 100%;
}
.link-more a {
font-size: 26px;
}
.link-more a::after {
content: '⇀';
padding-left: 15px;
}
.btn-effect {
max-width: 100%;
height: 80px;
left: -100%;
}
.section-top-about .link-more {
width: 100%;
height: 80px;
}
.section-top-about .link-more a {
font-size: 26px;
}
.section-top-about .link-more a::after {
content: '⇀';
padding-left: 15px;
}
.section-top-about .btn-effect {
width: 100%;
height: 80px;
left: -100%;
}
/* Media */
.link-more.media {
max-width: 100%;
height: 90px;
}
.link-more.media a {
font-size: 16px;
line-height: 5.5;
}
.link-more.media a::before {
top: -13px;
left: -55px;
width: 36px;
}
.link-more.media a::after {
padding-left: 20px;
}
.btn-effect.media {
max-width: 100%;
height: 90px;
left: -100%;
}
.link-more.media:hover a::after {
padding-left: 30px;
}
.link-more.media:hover a::before {
top: -13px;
left: -55px;
width: 36px;
}
/* Works-btn */
.more-btn.works {
max-width: 100%;
}
.more-btn.works {
flex-wrap: wrap;
}
.link-more.back-worklist,
.link-more.btn-contact {
width: 100%;
height: 100%;
margin-bottom: 20px;
}
.link-more.btn-contact a {
font-size: 13px;
}
.link-more.back-worklist a::before {
content: '↼';
position:absolute;
left: -60px;
}
.link-more.btn-contact a::before {
top: 3px;
left: -20px;
}
.link-more.btn-contact:hover a::before {
top: 3px;
left: -20px;
}
.link-more.back-worklist a::after {
top: -17px;
left: 150px;
}
.link-more.btn-contact a::after {
top: -7px;
left: 240px;
}
.btn-effect.back-worklist,
.btn-effect.btn-contact {
width: 100%;
height: 100%;
}
.link-more.back-worklist:hover a::after {
top: -17px;
left: 150px;
}
.link-more.btn-contact:hover a::after {
top: -7px;
left: 240px;
}
.link-more.back-worklist:hover a::before {
left: -60px;
}
}
/* MediaSearch btn */
.more-btn.mediasearch {
display: flex;
}
.more-btn.mediasearch .link-more.btn-contact {
margin-right: 20px;
}
.more-btn.mediasearch .link-more.btn-contact a::after {
left: 240px;
}
@media only screen and (max-width: 767px) {
.more-btn.mediasearch {
flex-wrap: wrap;
}
.more-btn.mediasearch .link-more.btn-contact {
margin-right: 0;
}
.more-btn.mediasearch .link-more.btn-contact a::after {
left: 190px;
}
}
.link-back {
display: block;
font-weight: bold;
text-align: center;
padding: 14px 15px 10px;
background: #fff url(../img/common/icn_arrow_back.png) left 20px center no-repeat;
background-size: 15px auto;
width: 300px;
border: 3px solid #000;
letter-spacing: 0.2em;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
margin-top: 50px;
}
.btn-line {
display: block;
font-weight: bold;
text-align: center;
padding: 10px 15px 10px;
background: #fff url(../img/common/icn_arrow_01.png) right 30px center no-repeat;
background-size: 15px auto;
border: 3px solid #000;
letter-spacing: 0.2em;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
margin-bottom: 50px;
}
.btn-line span {
display: inline-block;
padding: 4px 42px 0 42px;
line-height: 27px;
background: url(../img/common/icn_pdf.png) left center no-repeat;
}
.btn-list {
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
display: block;
font-weight: bold;
text-align: center;
background-color: #fff;
border: 2px solid #fff;
color: #000;
font-size: 20px;
padding: 26px 5px 24px;
width: 520px;
margin: 0 auto;
}
.btn-list span {
display: inline-block;
padding: 0 35px;
background: url(../img/common/icn_arrow_10.png) left center no-repeat;
}
.link-common {
display: block;
color: #fff;
font-weight: bold;
text-align: center;
margin: 0 auto;
background: #333 url(../img/common/icn_arrow_11.png) right 40px center no-repeat;
}
@media print, (min-width: 768px) {
.wrap-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.wrap-right {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.btn-line:hover {
background-color: #000;
background-image: url(../img/common/icn_arrow_08.png);
color: #fff;
}
.link-back:hover {
background-color: #000;
background-image: url(../img/common/icn_arrow_back_wt.png);
color: #fff;
}
.link-base:hover {
text-decoration: underline;
}
.link-common {
width: 460px;
font-size: 18px;
padding: 35px 5px 30px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.btn-line span {
padding-top: 8px;
}
.btn-list span {
padding-top: 10px;
}
}
@media only screen and (max-width: 767px) {
.wrap-center,
.wrap-right {
padding: 0 6px;
}
.btn-list {
font-size: 14px;
padding: 14px 5px 14px;
width: 100%;
}
.btn-list span {
display: inline-block;
padding: 2px 24px 0;
background-size: 8px auto;
background-position: left 5px;
}
.link-common {
width: 100%;
max-width: 420px;
font-size: 16px;
padding: 18px 5px 16px;
background-position: right 20px center;
background-size: 8px auto;
}
}
/* COMMON TEXT
* ----------------------------------------------- */
.bold {
font-weight: bold;
}
.mark {
color: #d70000;
}
.noto {
font-family: "Noto Sans JP", sans-serif;
}
@media print, (min-width: 768px) {
.base-text {
font-size: 15px;
line-height: 2;
}
.info-text {
font-size: 13px;
line-height: 1.85;
}
.company-text {
letter-spacing: 0.09em;
line-height: 2.15;
text-align: center;
font-feature-settings: 'palt';
}
.company-text p + p {
margin-top: 30px;
}
.know-text {
line-height: 2;
}
}
@media only screen and (max-width: 767px) {
.base-text {
font-size: 11px;
line-height: 2.1;
}
.info-text {
font-size: 10px;
line-height: 1.78;
}
.company-text {
font-size: 18px !important;
line-height: 1.6 !important;
margin: 20px 0;
/* margin-bottom: 40px !important;*/
}
.company-text p + p {
margin-top: 20px;
}
.know-text {
font-size: 12px;
line-height: 1.67;
}
}
/* COMMON GRID
* ----------------------------------------------- */
img {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
.img {
width: 100%;
height: auto;
}
.img-max {
max-width: 100%;
height: auto;
}
.block-four {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.table-base {
width: 100%;
}
.table-base th, .table-base td {
border-bottom: 1px solid #5088bd;
}
.table-base th {
vertical-align: top;
font-weight: bold;
}
.table-info {
width: 100%;
border-top: 1px solid #bbb;
}
.table-info th, .table-info td {
border-bottom: 1px solid #bbb;
padding: 22px 40px 19px;
}
.table-info th {
background-color: #f5f4f4;
font-weight: bold;
}
.table-desc {
width: 100%;
}
.table-desc th, .table-desc td {
border-bottom: 1px solid #bbb;
padding: 17px 40px 14px;
vertical-align: top;
}
.table-desc th {
background-color: #f5f4f4;
font-weight: bold;
}
.table-desc tr.line-head td {
font-weight: bold;
background-color: #333;
color: #fff;
}
.table-desc tr.line-head td + td {
border-left: 1px solid #fff;
}
.table-desc tr:not(.line-head) th:first-child,
.table-desc tr:not(.line-head) td:first-child {
border-left: 1px solid #bbb;
}
.table-desc tr:not(.line-head) th:last-child,
.table-desc tr:not(.line-head) td:last-child {
border-right: 1px solid #bbb;
}
.table-detail {
width: 100%;
border-top: 1px solid #bbb;
}
.table-detail th,
.table-detail td {
border-bottom: 1px solid #bbb;
padding: 20px 40px;
vertical-align: middle;
font-size: 15px;
}
.table-detail th {
font-weight: 700;
}
.flex {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media print, (min-width: 768px) {
.block-three {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.block-three .item {
width: 340px;
margin-right: 30px;
}
.block-three .item:nth-child(3n) {
margin-right: 0;
}
.block-four {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.block-four .item {
width: 255px;
margin-right: 20px;
margin-bottom: 30px;
}
.block-four .item:nth-child(4n) {
margin-right: 0;
}
.flex-md {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.table-base th, .table-base td {
padding: 23px 0 20px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.table-info th, .table-info td {
padding-top: 26px;
}
}
@media only screen and (max-width: 767px) {
.block-four .item {
width: 48%;
margin-right: 4%;
margin-bottom: 14px;
}
.block-four .item:nth-child(2n) {
margin-right: 0;
}
.table-base {
font-size: 10px;
}
.table-base th, .table-base td {
padding: 12px 0 10px;
}
.wrap-table {
overflow-x: scroll;
}
.table-info {
font-size: 11px;
}
.table-info th, .table-info td {
padding: 8px 12px 7px;
}
.table-desc {
font-size: 11px;
}
.table-desc th, .table-desc td {
padding: 8px 12px 7px;
}
.table-detail th, .table-detail td {
padding-top: 12px;
padding-bottom: 10px;
}
}
/* PAGES
* ----------------------------------------------- */
/* PAGE TOP
* ----------------------------------------------- */
/* section top keyvisual
* ----------------------------------------------- */
.section-top-keyvisual {
position: relative;
background: url("../img/top/top-main-bg.jpg") no-repeat;
background-size: cover;
width: 100%;
overflow:hidden;
object-fit: cover;
padding: 70px 0 90px;
}
.section-top-keyvisual .main-wrapper {
width: 1180px;
margin: 0 auto;
}
.section-top-keyvisual .main-wrapper .col1,
.section-top-keyvisual .main-wrapper .col2,
.section-top-keyvisual .main-wrapper .col3 {
display: flex;
align-items: end;
}
.section-top-keyvisual .main-wrapper .col1 {
animation: AnimationTitle 6s ease infinite;
background: linear-gradient(to right, #01a2d4, #64d1f2, #001125);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.section-top-keyvisual .main-wrapper .col2 {
animation: AnimationTitle 8s ease infinite;
background: linear-gradient(to right, #001125, #64d1f2, #01a2d4);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.section-top-keyvisual .main-wrapper .col3 {
animation: AnimationTitle 7s ease infinite;
background: linear-gradient(to right, #01a2d4, #64d1f2, #001125);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
@keyframes AnimationTitle {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
.section-top-keyvisual .main-wrapper .col1 .txt,
.section-top-keyvisual .main-wrapper .col2 .txt,
.section-top-keyvisual .main-wrapper .col3 .txt {
font-size: 120px;
letter-spacing: -0.055em;
}
.section-top-keyvisual .main-wrapper .col1 .img {
width: 300px;
margin-left: 40px;
}
.section-top-keyvisual .main-wrapper .col1 .img,
.section-top-keyvisual .main-wrapper .col3 .img {
animation: floating-y 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-10%);
}
100% {
transform: translateY(10%);
}
}
.section-top-keyvisual .main-wrapper .col2 .img {
animation: floating-x 2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-x {
0% {
transform: translateX(-10%);
}
100% {
transform: translatexX(10%);
}
}
.section-top-keyvisual .main-wrapper .col3 .img{
animation: floating-y 1.2s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
0% {
transform: translateY(-8%);
}
100% {
transform: translateY(8%);
}
}
.section-top-keyvisual .main-wrapper .col2 {
display: flex;
justify-content: flex-end;
margin-top: 35px;
}
.section-top-keyvisual .main-wrapper .col2 .img {
width: 220px;
margin-right: 40px;
}
.section-top-keyvisual .main-wrapper .col3 {
display: flex;
margin-top: 35px;
}
.section-top-keyvisual .main-wrapper .col3 .img {
width: 220px;
margin-left: 40px;
}
@media only screen and (max-width: 767px) {
.section-top-keyvisual {
background: url("../img/top/top-main-bg-sp.jpg") no-repeat;
background-size: cover;
height: 84vh;
width: 100%;
padding: 40px 0 0;
}
.section-top-keyvisual .main-wrapper {
width: 90%;
}
.section-top-keyvisual .main-wrapper .col1 .txt,
.section-top-keyvisual .main-wrapper .col2 .txt,
.section-top-keyvisual .main-wrapper .col3 .txt {
font-size: 3.5em;
}
.section-top-keyvisual .main-wrapper .col1 .img {
position: absolute;
top: 22%;
right: 7%;
width: 36%;
}
.section-top-keyvisual .main-wrapper .col2 .img {
position: absolute;
top: 27%;
left: 20%;
width: 26%;
}
.section-top-keyvisual .main-wrapper .col3 .img {
position: absolute;
top: 69%;
right: 14%;
width: 35%;
}
.section-top-keyvisual .main-wrapper .col2 {
margin-top: 38%;
}
.section-top-keyvisual .main-wrapper .col3 {
margin-top: 0;
}
}
/* section top strength
* ----------------------------------------------- */
.section-top-strength {
margin: 0 auto;
background: #f2f2f2;
padding-bottom: 200px;
}
.section-top-strength .block-services .box-services {
overflow: hidden;
cursor: pointer;
}
.section-top-strength .block-services .box-services img {
width: 100%;
height: 100%;
transform: scale(1);
transition: .3s ease-in-out;
opacity: 1;
}
.section-top-strength .block-services .box-services:hover img {
transform: scale(1.3);
opacity: .5;
}
.section-top-strength .block-services .box-services .ttl {
position: absolute;
top: 230px;
background: rgba(0,37,91,0.8);
padding: 20px 30px 25px;
}
.section-top-strength .block-services .box-services .ttl.right {
top: 230px;
right: -20px;
}
.section-top-strength .block-services .box-services .left {
margin-left: 20px;
}
.section-top-strength .block-services .box-services .right {
margin-right: 20px;
}
.section-top-strength .block-services .box-services .sizeL {
width: 625px;
}
.section-top-strength .block-services .box-services .sizeS {
width: 500px;
}
.section-top-strength .block-services {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto 32px;
}
.section-top-strength .block-services .box-services {
position: relative;
letter-spacing: 0.1em;
margin-bottom: 30px;
}
.section-top-strength .block-services .box-services .services-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
}
.section-top-strength .block-services .box-services .services-subttl {
font-size: 14px;
color: #faf230;
letter-spacing: 0.05em;
padding-top: 4px;
}
.section-top-strength .wrap-center {
margin-bottom: 100px;
}
@media only screen and (max-width: 767px) {
.section-top-strength {
padding-bottom: 120px;
}
.section-top-strength::before {
right: 150%;
transform: skewX(-17deg);
width: 100%;
}
.section-top-strength .block-services {
padding: 0 40px;
}
.section-top-strength .block-services.notp {
padding: 0;
}
.section-top-strength .block-services .box-services {
width: auto;
height: auto;
margin-bottom: 50px;
}
.section-top-strength .block-services .services-title {
font-size: 15px;
color: #000;
line-height: 1.3;
margin-top: 10px;
letter-spacing: 0.075em;
}
.section-top-strength .wrap-center {
margin-bottom: 100px;
}
.section-top-strength .block-services .box-services:hover img {
transform: none;
}
.section-top-strength .block-services .box-services .ttl {
position: absolute;
top: 50%;
background: rgba(0,37,91,0.8);
padding: 10px 20px 20px;
}
.section-top-strength .block-services .box-services .ttl.right {
top: 50%;
right: 0;
}
.section-top-strength .block-services .box-services .ttl.rightsm {
top: 50%;
right: 0;
}
.section-top-strength .block-services .box-services .sizeL {
width: 90%;
float: right;
}
.section-top-strength .block-services .box-services .sizeS {
width: 90%;
}
.section-top-strength .block-services .box-services .left {
margin-left: 20px;
}
.section-top-strength .block-services .box-services .rightsm {
margin-right: 0;
float: right;
}
.section-top-strength .block-services .box-services .services-title {
font-size: 20px;
}
.section-top-strength .block-services .box-services .services-subttl {
font-size: 12px;
}
}
/* section top about:moto
* ----------------------------------------------- */
.section-top-about {
margin: 0 auto;
background: #fff;
z-index: 0;
padding: 100px 0 120px;
}
.section-top-about .wrapper {
display: flex;
justify-content: space-between;
width: 1180px;
}
.section-top-about .block-about {
display: flex;
padding-top: 50px;
width: 1180px;
margin: 0 auto;
}
.section-top-about .block-about .right {
margin-top: 50px;
}
.section-top-about .block-about .imgBox {
position: relative;
}
.section-top-about .block-about .imgBox .wt{
color: #fff;
}
.section-top-about .block-about .imgBox .ttl {
position: absolute;
top: 158px;
left: 40px;
font-size: 40px;
letter-spacing: 0.02em;
}
.section-top-about .block-about .imgBox .txt {
position: absolute;
top: 220px;
left: 40px;
font-size: 13px;
font-weight: bold;
}
.section-top-about .block-about .imgBox .ttl.sec {
top: 205px;
}
.section-top-about .block-about .imgBox .txt.sec {
top: 267px;
}
.section-top-about .block-about .imgBox .txt::after {
content: '▶';
padding-left: 10px;
font-size: 10px;
position: absolute;
top: 2.5px;
}
.section-top-about .block-about .imgBox img:hover {
opacity: 1;
-webkit-animation: flash 3s;
animation: flash 3s;
}
@-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
@media only screen and (max-width: 767px) {
.section-top-about {
padding-bottom: 40px;
}
.section-top-about .wrapper {
width: 100%;
flex-wrap: wrap;
}
.section-top-about .block-about {
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
display: block;
padding: 50px 30px 0;
}
.section-top-about .block-about .right {
margin-top: 0;
}
.section-top-about .block-about .imgBox {
margin-bottom: 50px;
}
.section-top-about .block-about .imgBox .ttl {
position: absolute;
top: 50%;
}
.section-top-about .block-about .imgBox .txt {
position: absolute;
top: 74%;
}
.section-top-about .block-about .imgBox .ttl.sec {
top: 50%;
}
.section-top-about .block-about .imgBox .txt.sec {
top: 74%;
}
}
/* section top blog
* ----------------------------------------------- */
.section-top-blog {
margin: 0 auto;
background: #fff;
z-index: 0;
padding-bottom: 80px;
}
.section-top-blog .wrapper {
width: 1180px;
}
.section-top-blog .block-top-blog {
display: flex;
max-width: 1180px;
margin: auto;
}
.section-top-blog .block-top-blog .blogBox {
margin-top: 50px;
}
.section-top-blog .block-top-blog .blogBox {
display: flex;
}
.section-top-blog .block-top-blog .blogBox ul {
width: 270px;
margin-left: 33px;
}
.section-top-blog .block-top-blog .blogBox ul:first-child {
margin-left: 0;
}
.section-top-blog .block-top-blog .blogBox ul li.box {
box-shadow: 0 0 15px #ccc;
}
.section-top-blog .block-top-blog .blogBox .category img {
width: 271px;
height: 180px;
object-fit: cover;
object-position: 50% 0%;
font-family: 'object-fit: cover;';
border: solid 1px #ccc;
}
.section-top-blog .block-top-blog .link-more {
margin: 0 auto;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta {
display: block;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta .text {
line-height: 1.6;
height: 100px;
padding: 15px 0;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta .date {
color: #000;
font-weight: bold;
padding: 15px 0;
position: relative;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta .date::after {
content: url(../img/common/icn_arrow_news.png);
position: absolute;
top: 12px;
right: 0;
}
.section-top-blog .block-top-blog .more-btn {
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.section-top-blog {
margin-top: 40px;
padding-bottom: 100px;
}
.section-top-blog .wrapper {
width: 100%;
}
.section-top-blog .block-top-blog {
flex-wrap: wrap;
margin: 0;
}
.section-top-blog .block-top-blog .blogBox {
margin: 0;
margin-bottom: 0;
flex-wrap: wrap;
}
.section-top-blog .block-top-blog .blogBox ul {
width: 100%;
margin-left: 0;
}
.section-top-blog .block-top-blog .blogBox ul li {
width: 100%;
padding-bottom: 0;
margin-bottom: 50px;
}
.section-top-blog .block-top-blog .blogBox ul li:last-child {
margin-bottom: 0;
}
.section-top-blog .block-top-blog .blogBox ul li img {
width: 100%;
height: auto;
}
.section-top-blog .block-top-blog .blogBox .category img {
width: 590px;
height: 60vw;
}
.section-top-blog .block-top-blog .link-more {
margin: 0 auto;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta {
display: block;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta .text {
line-height: 1.6;
height: 80px;
padding: 0;
margin-bottom: 50px;
}
.section-top-blog .block-top-blog .blogBox .top-post-meta .date::after {
content: '';
display: inline-block;
width: 17px;
height: 5px;
background-image: url(../img/common/icn_arrow_news.png);
background-size: contain;
vertical-align: middle;
top: 20px;
}
}
/* section top common
* ----------------------------------------------- */
.section-top-common {
background: url(../img/top/top_services_back.png) repeat 0 0;
padding: 80px 0 !important;
}
.section-top-common .block-common {
max-width: 1180px;
margin: auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
}
.section-top-common .block-common.top-services {
background: url("../img/top/ico_top_serivices.png") no-repeat bottom right;
}
.section-top-common .block-common.top-trivia {
background: url("../img/top/ico_top_trivia.png") no-repeat bottom right;
}
.section-top-common .block-common .img-top-common {
max-width: 540px;
margin-right: 40px;
}
.section-top-common .block-common .box-common {
width: calc(100% - 540px);
}
.section-top-common .block-common .box-common p {
font-size: 16px;
line-height: 2;
}
.section-top-common .block-common .box-common .link-more {
margin-top: 40px;
float: left;
}
@media only screen and (max-width: 767px) {
.section-top-common {
margin-top: 80px;
}
.section-top-common .block-common {
max-width: 100%;
padding: 0 40px 100px;
display: block;
background-size: 20% !important;
background-position: bottom 20px right 15px !important;
}
.section-top-common .block-common .img-top-common {
max-width: 100%;
margin-right: 0;
}
.section-top-common .block-common .box-common {
width: auto;
}
.section-top-common .block-common .box-common p {
font-size: 14px;
line-height: 1.6;
margin-top: 10px;
}
.section-top-common .block-common .box-common .link-more {
margin-top: 20px;
float: none;
}
}
/* section top contents
* ----------------------------------------------- */
.section-top-contents {
margin-top: 200px;
}
.section-top-contents .block-top-contents {
margin: auto;
}
.section-top-contents .block-top-contents ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.section-top-contents .block-top-contents ul li {
width: 50%;
height: auto;
position: relative;
}
.section-top-contents .block-top-contents ul li a {
display: block;
transition: all .5s ease-in-out;
}
.section-top-contents .block-top-contents ul li a:hover {
opacity: 0.8;
}
.section-top-contents .block-top-contents ul li .img-top-contents img {
display: block;
width: 100%;
height: auto;
}
.section-top-contents .block-top-contents ul li .box-top-contents {
position: absolute;
top: 95px;
left: 90px;
color: #fff;
}
.section-top-contents .block-top-contents ul li .box-top-contents h3 {
font-size: 18px;
padding-bottom: 10px;
line-height: 1;
border-bottom: 1px solid #fff;
}
.section-top-contents .block-top-contents ul li .box-top-contents p {
font-size: 18px;
font-weight: 400;
font-style: normal;
line-height: 1;
margin-top: 15px;
}
@media only screen and (max-width: 767px) {
.section-top-contents {
margin-top: 80px;
}
.section-top-contents .block-top-contents ul {
display: block;
}
.section-top-contents .block-top-contents ul li {
width: auto;
height: auto;
}
.section-top-contents .block-top-contents ul li .box-top-contents {
top: 50px;
left: 30px;
}
.section-top-contents .block-top-contents ul li .box-top-contents h3 {
font-size: 16px;
}
.section-top-contents .block-top-contents ul li .box-top-contents p {
font-size: 14px;
margin-top: 10px;
}
}
/* section top faq
* ----------------------------------------------- */
.section-top-faq {
margin-top: 100px;
}
.section-top-faq .block-top-faq {
max-width: 1180px;
margin: auto;
}
.section-top-faq ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 40px;
}
.section-top-faq ul li {
width: 540px;
height: 80px;
margin-bottom: 20px;
transition: all .5s ease-in-out;
}
.section-top-faq ul li:nth-child(even) {
transform: translateY(20px);
}
@media only screen and (max-width: 767px) {
.section-top-faq {
margin-top: 60px;
}
.section-top-faq .block-top-faq {
max-width: 100%;
margin: 0 40px;
}
.section-top-faq ul {
display: block;
margin-bottom: 40px;
}
.section-top-faq ul li {
width: auto;
height: auto;
}
.section-top-faq ul li:nth-child(odd) {
margin-right: 15px;
}
.section-top-faq ul li:nth-child(even) {
transform: none;
margin-left: 15px;
}
}
/* section page keyvisual
* ----------------------------------------------- */
.section-page-keyvisual {
max-width: 100%;
}
.section-page-keyvisual .keyvisual-wrapper.faq {
background-image: url("../img/faq/img_keyvisual_faq.jpg");
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box {
color: #000;
margin-top: 70px;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box h2 {
font-size: 60px;
line-height: 1;
font-feature-settings: 'palt';
letter-spacing: 0.02em;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box h2.ft-small {
font-size: 50px;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box h2 span {
font-size: 20px;
display: block;
margin-top: 20px;
letter-spacing: 0.03em;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box p {
font-size: 28px;
font-weight: bold;
line-height: 1.4;
margin-top: 30px;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box p.lower {
font-size: 24px;
line-height: 1.4;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box {
background: #f4f4f4;
padding: 60px 0;
margin-top: 90px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .key-img-box-wrapper {
width: 1180px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox {
width: 500px;
margin-right: 50px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .imgBox {
width: 625px;
height: 380px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
margin-top: -130px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3 {
display: inline-block;
color: #fff;
font-size: 28px;
line-height: 1.8;
font-weight: bold;
margin-bottom: 40px;
width: 500px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3 strong {
background: linear-gradient(transparent 1%, #1eaa9b 1%);
padding: 5px 10px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3.bl strong {
background: linear-gradient(transparent 1%, #187db7 1%);
padding: 5px 10px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3.lb strong {
background: linear-gradient(transparent 1%, #0dbbe7 1%);
padding: 5px 10px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3.or strong {
background: linear-gradient(transparent 1%, #fecc03 1%);
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox p {
font-size: 15px;
line-height: 2;
}
/* Pharmacy Works: detail */
.section-page-keyvisual .keyvisual-wrapper.works-ph,
.section-page-keyvisual .keyvisual-wrapper.company {
position: relative;
}
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top,
.section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
height: 6rem;
text-align: center;
color: #fff;
}
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top h2, .section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top h2 {
font-size: 50px;
}
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top .subttl,
.section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top .subttl {
font-size: 16px;
font-weight: bold;
margin-top: 5px;
}
.section-page-keyvisual .keyvisual-wrapper.works {
background: #252525;
color: #fff;
padding: 60px 0;
}
.section-page-keyvisual .keyvisual-wrapper.works h2 {
font-size: 36px;
}
.section-page-keyvisual .keyvisual-wrapper.works .ttl {
font-size: 22px;
font-weight: bold;
}
.section-page-keyvisual .keyvisual-wrapper.works .ttl .slash {
padding: 0 10px;
font-weight: bold;
}
.section-page-keyvisual .keyvisual-wrapper.works .ttl.fts18 {
font-size: 18px;
line-height: 1.4;
margin-top: 10px;
}
@media only screen and (max-width: 767px) {
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top,
.section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top {
height: 5rem;
}
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top h2, .section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top h2 {
font-size: 36px;
}
.section-page-keyvisual .keyvisual-wrapper.works-ph .key-text-box.works-top .subttl,
.section-page-keyvisual .keyvisual-wrapper.company .key-text-box.works-top .subttl {
font-size: 14px;
}
.section-page-keyvisual .keyvisual-wrapper.works .ttl {
font-size: 18px;
font-weight: bold;
display: block;
line-height: 2;
}
}
/* section page MENU
* ----------------------------------------------- */
.section-page-menu {
margin: 60px 0 100px;
padding: 40px 0;
position: relative;
}
.section-page-menu .key-txt-box {
position: absolute;
top: 0;
right: 0;
background: #333;
padding: 25px 60px;
width: 78%;
}
.section-page-menu .key-txt-box ul {
display: flex;
flex-wrap: wrap;
width: 100%;
line-height: 2;
}
.section-page-menu .key-txt-box li {
margin-right: 70px;
}
.section-page-menu .key-txt-box li a {
color: #fff;
font-size: 15px;
font-weight: bold;
}
.section-page-menu .key-txt-box ul li::after {
content: url(../img/common/icn_arrow_menu.png);
padding-left: 10px;
}
/* section page PHARMACY
* ----------------------------------------------- */
.about-pharmacy {
margin-bottom: 100px;
width: 1180px;
}
.about-pharmacy.allmedia {
margin-bottom: 50px;
}
.about-pharmacy p {
font-size: 15px;
line-height: 1.8;
}
.about-pharmacy h4 {
font-size: 34px;
font-weight: bold;
border-bottom: solid 5px #000;
padding-bottom: 12px;
letter-spacing: 0;
}
.about-pharmacy h5 {
font-size: 30px;
font-weight: bold;
letter-spacing: 0;
margin-bottom: 30px;
padding: 0em 0.5em;
color: #142c4b;
background: transparent;
border-left: solid 7px #142c4b;
}
.about-pharmacy h5.fts24 {
font-size: 24px;
}
.about-pharmacy h6 {
font-size: 26px;
font-weight: bold;
margin-bottom: 40px;
padding-bottom: 10px;
border-bottom: solid 5px;
}
.about-pharmacy h6.ttl-fts30 {
font-size: 30px;
border-bottom: none;
}
.about-pharmacy h6.subttl {
font-size: 26px;
font-weight: bold;
margin-bottom: 5px;
border: none;
}
.about-pharmacy h6.subttl span {
font-size: 15px;
display: inline-block;
padding-left: 20px;
}
.about-pharmacy .graph-ttl {
font-size: 18px;
font-weight: bold;
}
.about-pharmacy .ttl_example {
font-size: 17px;
font-weight: bold;
padding-left: 2em;
text-indent: -2.1em;
margin-bottom: 15px;
line-height: 1.6;
}
.about-pharmacy .ttl_example::before {
content: '例）';
}
.about-pharmacy .pointBox {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.about-pharmacy .pointBox .box {
position: relative;
}
.about-pharmacy .pointBox .box.original {
width: 30.8%;
}
.about-pharmacy .pointBox .box .txt {
position: absolute;
top: 117px;
left: 0;
right: 0;
text-align: center;
font-size: 22px;
font-weight: bold;
line-height: 1.5;
}
.about-pharmacy .pointBox .box .txt.original {
position: static;
text-align: left;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0;
margin-top: 15px;
}
.about-pharmacy .pointBox .box .txt.studio {
top: 120px;
font-size: 17px;
text-align: left;
line-height: 1.6;
padding: 0 30px;
}
.about-pharmacy .studioBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px 0 80px;
width: 100%;
}
.about-pharmacy .studioBox::before {
content: '';
display: block;
width: 23%;
order:1;
}
.about-pharmacy .studioBox::after {
content: '';
display: block;
width: 23%;
}
.about-pharmacy .studioBox ul {
margin-bottom: 40px;
width: 23%;
}
.about-pharmacy .studioBox.airport::before {
content: '';
display: block;
width: 30%;
}
.about-pharmacy .studioBox.airport ul {
margin-bottom: 40px;
width: 30%;
}
.about-pharmacy .studioBox.col3::after {
content: '';
display: block;
width: 31%;
}
.about-pharmacy .studioBox.col3 ul {
width: 31%;
}
.about-pharmacy .studioBox.col2 {
display: flex;
justify-content: flex-start;
}
.about-pharmacy .studioBox.col2 ul {
width: 40%;
margin-right: 40px;
}
.about-pharmacy .studioBox.col2 img {
margin-bottom: 15px;
}
.about-pharmacy .studioBox img {
width: 100%;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
}
.about-pharmacy .studioBox .ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.about-pharmacy .studioBox .address {
font-size: 14px;
line-height: 1.6;
margin: 20px 0 10px;
}
.about-pharmacy .studioBox .visitors {
font-size: 13px;
font-weight: bold;
}
.about-pharmacy .studioBox .visitors::before {
content: '▶';
padding-right: 5px;
}
.about-pharmacy .plist {
list-style-type: square;
margin: 20px 0 40px;
padding-left: 15px;
font-size: 15px;
line-height: 1.8;
}
.about-pharmacy .plist.unline {
border-bottom: dotted 1px #bbb;
padding-bottom: 40px;
margin-bottom: 40px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy {
width: 100%;
}
.about-pharmacy h5 {
font-size: 28px;
}
.about-pharmacy .pointBox {
flex-wrap: wrap;
width: 100%;
}
.about-pharmacy .pointBox .box {
margin-bottom: 20px;
}
.about-pharmacy .pointBox .box .txt {
top: 32.5%;
left: 9%;
font-size: 1.1em;
line-height: 1.4;
text-align: left;
}
.about-pharmacy .pointBox .box .txt.studio {
top: 36%;
left: 0;
font-size: 0.9em;
line-height: 1.6;
}
.about-pharmacy .studioBox {
flex-wrap: wrap;
}
.about-pharmacy .studioBox li {
width: 100%;
margin-bottom: 40px;
}
.about-pharmacy .studioBox img {
width: 100%;
}
.about-pharmacy .studioBox.col2 ul {
width: 100%;
margin-right: 0;
}
.about-pharmacy .studioBox.col2 li {
margin-bottom: 0;
}
.about-pharmacy .studioBox.col3::after {
content: '';
display: block;
width: 100%;
}
.about-pharmacy .studioBox.col3 ul {
width: 100%;
}
.about-pharmacy h6.ttl-fts30 {
font-size: 28px;
border-bottom: none;
line-height: 1.3;
letter-spacing: 0.05em;
margin-bottom: 20px;
}
.about-pharmacy h6.subttl span {
font-size: 15px;
display: block;
padding-left: 0;
padding-top: 5px;
}
.about-pharmacy .pointBox .box.original {
width: 100%;
}
}
.about-pharmacy .targetBox {
display: flex;
flex-wrap: wrap;
margin-top: 30px;
}
.about-pharmacy .targetBox ul {
margin-right: 45px;
margin-bottom: 30px;
width: 200px;
}
.about-pharmacy .targetBox ul:last-child {
margin-right: 0;
}
.about-pharmacy .targetBox li img {
margin-bottom: 20px;
}
.about-pharmacy .targetBox li {
font-weight: bold;
text-align: left;
}
.about-pharmacy .targetBox li.txt::before {
content: '▶';
padding-right: 5px;
font-size: 10px;
}
.about-pharmacy .targetBox li.txt {
padding-left: 10px;
text-indent: -1em;
line-height: 1.5;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .targetBox {
justify-content: space-between;
margin-top: 30px;
}
.about-pharmacy .targetBox ul {
margin-right: 0;
margin-bottom: 40px;
width: 47%;
}
}
.about-pharmacy .store-listBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 30px;
}
.about-pharmacy .store-listBox::after {
content:"";
display: block;
width: 48.7%;
}
.about-pharmacy .store-listBox .box {
border-top: solid 4px #044191;
width: 270px;
padding-top: 15px;
margin-bottom: 50px;
}
.about-pharmacy .store-listBox .box img {
padding: 15px 0;
}
.about-pharmacy .store-listBox .box .ttl {
font-size: 16px;
font-weight: bold;
}
.about-pharmacy .store-listBox .box .target {
font-size: 14px;
font-weight: bold;
background: #ebeff2;
padding: 8px 15px;
border-radius: 4px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .store-listBox .box {
width: 100%;
margin-bottom: 80px;
}
}
.service-menuBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
width: 100%;
}
.service-menuBox.col2::after {
content: '';
display: block;
width: 48.7%;
}
.service-menuBox .box {
position: relative;
width: 23%;
height: auto;
background: #044191;
margin-bottom: 25px;
}
.service-menuBox::before {
content: '';
display: block;
width: 23%;
order:1;
}
.service-menuBox::after {
content: '';
display: block;
width: 23%;
}
.service-menuBox.mediasearch.two::after {
content: '';
display: block;
width: 59.2%;
}
.service-menuBox.mediasearch.three::after {
content: '';
display: block;
width: 39.2%;
}
.service-menuBox.mediasearch.four::after {
content: '';
display: block;
width: 19%;
}
.service-menuBox.mediasearch .box {
width: 19%;
margin-bottom: 15px;
}
.service-menuBox.mediasearch .box.empty {
width: 19%;
background: #fff;
}
.service-menuBox .box .ico {
position: absolute;
top: 45px;
left: 0;
right: 0;
margin: 0 auto;
}
.service-menuBox .box .ico.poco {
color: #fff;
font-size: 26px;
font-weight: bold;
text-align: center;
}
.service-menuBox .box .txt {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
}
.service-menuBox .box .txt.col2 {
bottom: 29px;
font-size: 15px;
line-height: 1.4;
}
.service-menuBox.mediasearch {
margin-bottom: 100px;
}
.service-menuBox.mediasearch .ico {
top: 28px;
}
.service-menuBox.mediasearch .box .txt {
bottom: 25px;
}
.service-menuBox.mediasearch .box .txt.fts {
bottom: 15px;
font-size: 14px;
line-height: 1.3;
}
.service-menuBox .box img {
opacity: 1;
transition: .3s;
}
.service-menuBox .box img:hover {
opacity: 0.2;
}
.about-pharmacy .graph img {
width: 900px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .graph img {
width: 100%;
}
.service-menuBox .box {
width: 100%;
margin-right: 0;
}
.service-menuBox .box .ico {
top: 30%;
}
.service-menuBox .box .txt {
top: 64%;
font-size: 18px;
}
.service-menuBox.mediasearch .box {
width: 48%;
}
.service-menuBox.mediasearch .box .ico {
top: 12%;
}
.service-menuBox.mediasearch .box .txt {
font-size: 13px;
letter-spacing: 0;
}
.service-menuBox.mediasearch .box .txt.fts {
font-size: 12px;
line-height: 1.2;
}
}
.about-pharmacy .exampleBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
}
.about-pharmacy .exampleBox::after {
content:"";
display: block;
width: 200px;
}
.about-pharmacy .exampleBox ul {
width: 200px;
position: relative;
margin-bottom: 30px;
}
.about-pharmacy .exampleBox ul:last-child {
margin-right: 0;
}
.about-pharmacy .exampleBox ul li.circle {
background: #1c6ba8;
width: 100%;
padding: 50%;
border-radius: 50%;
margin-bottom: 20px;
}
.about-pharmacy .exampleBox ul li img {
width: 77px;
position: absolute;
top: 50%;
left: 0;
margin: -4em 4.5em 0;
}
.about-pharmacy .exampleBox ul.drug li img {
width: 77px;
position: absolute;
top: 46%;
left: 0;
margin: -4em 4.5em 0;
}
.about-pharmacy .exampleBox ul li {
font-weight: bold;
text-align: center;
line-height: 1.4;
}
.about-pharmacy .exampleBox ul li.txt::before {
content: '▶';
padding-right: 5px;
font-size: 10px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .exampleBox {
justify-content: space-between;
width: 100%;
}
.about-pharmacy .exampleBox ul {
margin-right: 0;
margin-bottom: 40px;
width: 48%;
}
.about-pharmacy .exampleBox ul li img {
margin: -5em 3.5em 0;
width: 5.5em;
top: 56%;
left: -1%;
}
.about-pharmacy .exampleBox ul.drug li img {
margin: -3.5em 3.8em 0;
width: 4.5em;
top: 45%;
}
.about-pharmacy .exampleBox ul:last-child {
margin-right: 0;
}
.about-pharmacy .exampleBox ul li.circle {
width: 100%;
height: 0;
padding: 50%;
}
}
.about-pharmacy .flowBox {
width: 1180px;
margin-top: 50px;
}
.about-pharmacy .flowBox .box {
padding: 15px 40px;
position: relative;
margin-bottom: 10px;
}
.about-pharmacy .flowBox .box.kh {
border: solid 1px #a79a47;
}
.about-pharmacy .flowBox .box.kh::after {
display: block;
position: absolute;
top: 0;
left: 0;
border-right: 30px solid transparent;
border-top: 30px solid #a79a47;
content: "";
}
.about-pharmacy .flowBox .box.bl {
border: solid 1px #044191;
}
.about-pharmacy .flowBox .box.bl::after {
display: block;
position: absolute;
top: 0;
left: 0;
border-right: 30px solid transparent;
border-top: 30px solid #044191;
content: "";
}
.about-pharmacy .flowBox .box table td, th {
vertical-align: middle;
}
.about-pharmacy .flowBox .box table th.num {
font-size: 40px;
width: 70px;
letter-spacing: 0.03em;
padding-right: 35px;
}
.about-pharmacy .flowBox .box table th.num.kh {
color: #a79a47;
border-right: solid 1px #a79a47;
}
.about-pharmacy .flowBox .box table th.num.bl {
color: #044191;
border-right: solid 1px #044191;
}
.about-pharmacy .flowBox .box.begin table th.num {
color: #fff;
border-right: solid 1px #fff;
}
.about-pharmacy .flowBox .box table th.txt {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
padding: 0 35px;
width: 900px;
}
.about-pharmacy .flowBox .box table th.txt .free {
background: #044191;
color: #fff;
font-size: 16px;
text-align: center;
width: 70px;
padding: 8px 12px;
margin-left: 20px;
}
.about-pharmacy .flowBox .box table th.day {
font-size: 24px;
font-weight: bold;
text-align: right;
width: 240px;
position:relative;
}
.about-pharmacy .flowBox .box table th.day span {
font-size: 46px;
font-family: anton, sans-serif;
font-weight: 400;
font-style: normal;
}
.about-pharmacy .flowBox .box table th.day span.remark {
font-size: 15px;
font-family: "游ゴシック", sans-serif;
font-weight: bold;
}
.about-pharmacy .flowBox .box table th.day.hard::before {
position: absolute;
left: 0;
content: '';
display: inline-block;
width: 76px;
height: 63px;
background: url(../img/common/flow-ico.png) no-repeat;
background-size: contain;
}
.about-pharmacy .flowBox .box.begin {
border: solid 1px #044191;
background: #044191;
color: #fff;
}
.about-pharmacy .flowBox .box.begin::after {
display: block;
position: absolute;
top: 0;
left: 0;
border-right: 30px solid transparent;
border-top: 30px solid #fff;
content: "";
}
.about-pharmacy .note-flow {
font-weight: bold;
margin-top: 15px;
margin-bottom: 20px;
}
.about-pharmacy .note-flow img {
width: 55px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .flowBox {
width: 100%;
}
.about-pharmacy .flowBox .box {
padding: 20px;
}
.about-pharmacy .flowBox .box.kh::after {
border-right: 30px solid transparent;
border-top: 30px solid #a79a47;
}
.about-pharmacy .flowBox .box.bl::after {
border-right: 30px solid transparent;
border-top: 30px solid #044191;
}
.about-pharmacy .flowBox .box table th.num {
font-size: 40px;
padding-right: 20px;
}
.about-pharmacy .flowBox .box table th.txt {
font-size: 16px;
padding: 0 7px 10px 20px;
width: 100%;
display: block;
}
.about-pharmacy .flowBox .box table th.txt .free {
font-size: 14px;
padding: 5px 10px;
margin-left: 0;
margin-top: 10px;
display: block;
}
.about-pharmacy .flowBox .box table th.day {
font-size: 24px;
font-weight: bold;
text-align: right;
padding-right: 12px;
display: block;
}
.about-pharmacy .flowBox .box table th.day span {
font-size: 40px;
}
.about-pharmacy .flowBox .box table th.day.hard::before {
top: 10px;
left: 20px;
width: 2.6em;
}
.about-pharmacy .flowBox .box.begin::after {
display: block;
}
.about-pharmacy .note-flow {
font-size: 11px;
line-height: 1.4;
margin-top: 15px;
}
.about-pharmacy .note-flow img {
width: 3em;
}
}
.about-pharmacy .adpointBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 40px;
}
.about-pharmacy .adpointBox .box {
display: flex;
justify-content: space-between;
background: #ebeff2;
padding: 30px;
width: 575px;
display: table;
margin-bottom: 30px;
}
.about-pharmacy .adpointBox .box li.check {
width: 80px;
display: table-cell;
vertical-align: middle;
}
.about-pharmacy .adpointBox .box li.check img {
width: 50px;
height: 50px;
}
.about-pharmacy .adpointBox .box li.txt {
font-size: 16px;
line-height: 1.6;
width: 430px;
}
.about-pharmacy .adpointBox .box li.txt span {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
@media only screen and (max-width: 767px) {
.about-pharmacy .adpointBox .box {
padding: 7%;
width: 100%;
}
.about-pharmacy .adpointBox .box li.check {
width: 15%;
padding-right: 5%;
}
.about-pharmacy .adpointBox .box li.check img {
width: 100%;
height: auto;
}
.about-pharmacy .adpointBox .box li.txt {
font-size: 15px;
width: 100%;
}
.about-pharmacy .adpointBox .box li.txt span {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
}
.about-pharmacy .newsBox {
display: flex;
justify-content: space-between;
}
.about-pharmacy .newsBox .ttl {
width: 230px;
}
.about-pharmacy .newsBox .box table {
width: 950px;
}
.about-pharmacy .newsBox .box table tr {
display: block;
padding-bottom: 15px;
}
.about-pharmacy .newsBox .box table th.date {
color: #0353bc;
font-weight: bold;
width: 110px;
}
.about-pharmacy .newsBox .box table th.icon {
border: solid 1px #000;
font-size: 13px;
font-weight: bold;
text-align: center;
padding: 6px;
width: 100px;
margin-left: 40px;
}
.about-pharmacy .newsBox .box table th.txt {
font-weight: bold;
padding-left: 30px;
}
.about-pharmacy .newsBox .box table th a:hover {
text-decoration: underline;
}
.about-pharmacy .newsBox .box table td.txt-detail {
display: block;
padding-left: 240px;
font-weight: normal;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .newsBox .box table td.txt-detail {
padding-left: 0;
}
.about-pharmacy .newsBox {
flex-wrap: wrap;
}
.about-pharmacy .newsBox .ttl {
width: 100%;
}
.about-pharmacy .newsBox .box {
width: 100%;
}
.about-pharmacy .newsBox .box table {
width: 100%;
}
.about-pharmacy .newsBox .box table tr {
display: block;
padding: 20px 0;
border-bottom: dotted 1px #999;
}
.about-pharmacy .newsBox .box table th.date {
width: 110px;
}
.about-pharmacy .newsBox .box table th.icon {
font-size: 13px;
padding: 6px 20px;
width: 96px;
}
.about-pharmacy .newsBox .box table th.txt {
display: block;
padding-left: 0;
padding-top: 15px;
width: 100%;
}
}
.about-poco .imgBox.about img {
width: 440px;
}
.about-poco .imgBox.prof img {
width: 680px;
margin-top: 40px;
}
.about-poco p.prof-ttl {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.about-poco p.prof-ttl::before {
content: '▸';
}
@media only screen and (max-width: 767px) {
.about-poco .imgBox.about img {
width: 100%;
margin-bottom: 40px;
}
.about-poco .imgBox.prof img {
width: 100%;
}
}
.databox {
width: 1180px;
padding: 0 40px;
}
.databox th {
border-top: solid 1px #bbb;
border-bottom: solid 1px #bbb;
word-break: break-all;
}
.databox th.ttl {
background: #eef1f3;
font-weight: bold;
width: 220px;
padding: 15px 0 15px 20px;
}
.databox th.ttl.main {
color: #fff;
background: #333;
font-weight: bold;
}
.databox th.ttl.wid13 {
width: 13%;
}
.databox.nursing th.ttl.wid20 {
width: 20%;
}
.databox.nursing th.ttl {
padding: 10px 0 10px 20px;
}
.databox th.total {
background: #fce991;
font-size: 15px;
font-weight: bold;
width: 220px;
padding: 10px 0 10px 30px;
}
.databox th.txt {
width: 960px;
padding: 10px 0 10px 20px;
}
.databox .note {
display: block;
font-size: 13px;
line-height: 1.6;
padding-top: 3px;
}
.databox .strong {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
.about-pharmacy .note {
margin-top: 15px;
font-size: 14px;
}
.databox.wid60 {
width: 60%;
padding: 0 40px;
}
.databox.wid80 {
width: 80%;
}
.databox.wid60 th.ttl,
.databox.wid80 th.ttl {
width: 15%;
padding: 10px 0 10px 30px;
}
.databox.wid60.technical-sc-field th.ttl {
padding: 10px 10px 10px 20px;
}
.databox.technicalsc th.ttl {
width: 10%;
}
.databox.technicalsc th.txt {
border-bottom: dotted 1px #888;
border-top: none;
padding: 2px 0 2px 30px !important;
}
.databox.technicalsc tr.solid {
border-bottom: solid 1px #bbb;
}
.databox.wid60 th.ttl.wt,
.databox.wid80 th.ttl.wt {
padding: 5px 0 5px 30px;
}
.databox.wid60 th.txt,
.databox.wid80 th.txt {
width: 15%;
padding: 5px 0 5px 30px;
line-height: 1.4;
}
.databox.wid40 {
width: 40%;
padding: 0 40px;
margin-right: 40px;
}
.databox.wid40 th.ttl {
width: 15%;
padding: 10px 0 10px 30px;
}
.databox.wid40 th.txt {
width: 15%;
padding: 5px 0 5px 30px;
}
.databox.wid680 {
width: 680px;
}
.databox.wid680.poco {
margin-left: 50px;
}
.databox.wid680 th.ttl {
width: 25%;
padding: 15px 0 15px 35px;
}
.databox.wid680 th.txt {
width: 75%;
padding: 15px 0 15px 35px;
}
.databox.wid440 {
width: 440px;
text-align: center;
}
.databox.wid440 th.ttl {
width: 50%;
padding: 15px 0 15px 35px;
}
.databox.wid440 th.txt {
width: 50%;
padding: 15px 0 15px 35px;
}
.databox .ttl.col1 {
width: 13%;
padding: 15px 0 15px 20px;
}
.databox .ttl.centre {
text-align: center;
}
.databox.nursing .txt {
padding: 5px 0 5px 20px;
}
.databox tr.total {
color: #fff;
background: #444;
font-weight: bold;
}
.databox tr.total .ttl,
.databox tr.total .txt {
background: #444;
font-weight: bold;
}
.table-scroll {
overflow: scroll;
}
.table-scroll p.table-ttl {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.table-scroll p.table-ttl::before {
content: '▸';
padding-right: 5px;
}
@media only screen and (max-width: 767px) {
.databox.nursing {
width: 1180px;
}
.databox.technicalsc {
width: 680px !important;
}
.databox.wid680,
.databox.wid480,
.databox.wid440 {
width: 100%;
}
.databox.wid680 th.ttl,
.databox.wid480 th.ttl,
.databox.wid440 th.ttl {
width: 30%;
padding: 15px;
}
.databox.wid680 th.txt,
.databox.wid480 th.txt,
.databox.wid440 th.txt {
width: 70%;
padding: 15px;
}
.databox.wid60 th.ttl,
.databox.wid80 th.ttl {
padding: 15px 0 15px 15px;
}
.databox.wid60 th.ttl.wt,
.databox.wid80 th.ttl.wt {
padding: 5px 0 5px 15px;
}
.databox.wid60 th.txt,
.databox.wid80 th.txt {
padding: 5px 0 5px 15px;
font-size: 13px;
}
.databox.technicalsc th.txt {
font-size: 13px;
}
.databox.nursing th.ttl.wid20 {
width: 9%;
}
}
.databox.equality {
table-layout: fixed;
}
.databox.equality th {
line-height: 1.4;
}
.databox.equality th.ttl {
width: 0;
padding: 20px 0 20px 30px;
}
.databox.equality th.ttl.wt {
background: #fff;
padding: 8px 0 8px 30px;
}
.databox.equality th.txt {
padding: 8px 0 8px 30px;
}
.databox.equality tr.total th.txt {
font-weight: bold;
}
.databox.equality .link::after {
content: url(../img/common/ico_link-window.png);
padding-left: 2px;
}
.databox2 {
width: 500px;
padding: 20px 0;
font-size: 18px;
}
.databox2 th.ttl {
width: 40%;
padding: 25px 0 25px 40px;
}
.databox2 th.txt {
width: 60%;
padding: 25px 0 25px 40px;
}
.databox2 th, td {
font-weight: bold;
padding: 10px 0;
}
.ftc-bl {
color: #1974b9;
}
.databox2 tr {
border-bottom: dotted 1px;
padding-top: 15px;
}
.databox2 td {
font-size: 30px;
}
.databox2 td span {
font-size: 20px;
}
@media only screen and (max-width: 767px) {
.databox2 {
width: 100%;
font-size: 16px;
}
.databox2 th {
width: 40%;
}
.databox2 td {
width: 60%;
}
.databox2 td {
font-size: 24px;
}
.databox2 td span {
font-size: 16px;
display: block;
line-height: 1.2;
}
.databox {
width: 100%;
padding: 0 0 0 5%;
}
.databox th.ttl {
width: 30%;
padding: 5% 0 5% 5%;
}
.databox th.txt {
width: 70%;
padding: 5% 0 5% 5%;
}
.databox.wid60,
.databox.wid80 {
width: 100%;
padding: 0 40px;
}
.databox.wid40 {
width: 100%;
margin-right: 0;
}
.databox.wid40.sec {
margin-top: 80px;
}
.databox.equality th {
padding: 2% 2% 2% 0;
font-size: 13px;
}
.databox.equality th.ttl {
padding: 5% 2% 5% 0;
}
.databox.equality th.ttl.wt {
padding: 5% 0;
}
.databox.equality th.txt {
padding: 2% 0;
}
.databox.nursing th.ttl {
width: 12%;
}
.databox.nursing th.txt {
width: 8%;
}
}
.fee-table {
width: 500px;
}
.fee-table th {
width: 33.333333%;
border: none;
}
.fee-table .fee-ttl {
font-weight: bold;
}
/* section page PHARMACY -services
* ----------------------------------------------- */
.about-pharmacy .checkBox {
border-top: dashed 1px #bbb;
padding-bottom: 25px;
}
.about-pharmacy .checkBox ul {
border-bottom: dashed 1px #bbb;
padding-bottom: 25px;
}
.about-pharmacy .checkBox ul.ttl {
padding-bottom: 10px;
}
.about-pharmacy .checkBox li.ttl {
font-size: 18px;
font-weight: bold;
padding: 25px 0 15px 0;
position:relative;
line-height: 1.6em;
padding-left: 2.3em;
}
.about-pharmacy .checkBox li.ttl::before {
position: absolute;
left: 0;
content:"";
display:inline-block;
width: 1.5em;
height: 1.5em;
background: url(../img/common/ico_check.png) no-repeat;
background-size: contain;
}
.about-pharmacy .checkBox li.txt {
margin-left: 3.6%;
margin-top: -5px;
line-height: 1.8;
}
.about-pharmacy .clientBox ul {
display: flex;
font-weight: bold;
}
.about-pharmacy .clientBox .box li.img {
width: 80px;
float: left;
margin-right: 30px;
}
.about-pharmacy .clientBox .box li.img img {
width: 100%;
}
.about-pharmacy .clientBox .box li.balloon {
position: relative;
margin-bottom: 30px;
padding: 30px;
width: 50%;
color: #555;
font-size: 16px;
background: #eef1f3;
border-radius: 10px;
}
.about-pharmacy .clientBox .box li.balloon::before {
content: "";
position: absolute;
top: 30px;
left: -30px;
border: 10px solid transparent;
border-right: 30px solid #eef1f3;
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
@media only screen and (max-width: 767px) {
.about-pharmacy .clientBox .box li.balloon {
width: 100%;
font-size: 15px;
}
}
.about-pharmacy .osusumeBox {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.about-pharmacy .osusumeBox .box {
display: flex;
justify-content: space-between;
background: #f3f4f5;
padding: 30px 25px;
width: 375px;
display: table;
margin-bottom: 25px;
margin-right: 27px;
}
.about-pharmacy .osusumeBox .box:nth-child(3),
.about-pharmacy .osusumeBox .box:nth-child(6),
.about-pharmacy .osusumeBox .box:nth-child(9),
.about-pharmacy .osusumeBox .box:nth-child(12) {
margin-right: 0;
}
.about-pharmacy .osusumeBox .box li.check {
width: 60px;
display: table-cell;
vertical-align: middle;
}
.about-pharmacy .osusumeBox .box li.check img {
width: 40px;
height: 40px;
}
.about-pharmacy .osusumeBox .box li.txt {
font-size: 14px;
font-weight: bold;
line-height: 1.6;
}
.about-pharmacy .osusumeBox .box li.txt span {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
@media only screen and (max-width: 767px) {
.about-pharmacy .osusumeBox .box {
flex-wrap: wrap;
padding: 7%;
width: 100%;
margin-right: 0;
}
.about-pharmacy .osusumeBox .box li.check {
margin-right: 0;
}
.about-pharmacy .osusumeBox .box li.check {
width: 15%;
padding-right: 5%;
}
.about-pharmacy .osusumeBox .box li.check img {
width: 100%;
height: auto;
}
.about-pharmacy .osusumeBox .box li.txt {
font-size: 15px;
width: 100%;
}
.about-pharmacy .osusumeBox .box li.txt span {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
}
/* section page WEB
* ----------------------------------------------- */
.about-web {
margin-bottom: 100px;
width: 1180px;
}
.about-web .line {
content: '';
width: 4px;
height: 80px;
background-color: #000;
}
.about-web p {
font-size: 15px;
line-height: 1.8;
}
.about-web .webtopBox {
display: flex;
justify-content: space-between;
}
.about-web .webtopBox .txtBox {
width: 480px;
}
.about-web .webtopBox .txtBox h2 {
font-size: 30px;
font-weight: bold;
margin: 0 0 30px;
line-height: 1.4;
}
.about-web .webtopBox .txtBox h2 span {
font-size: 15px;
}
.about-web .webtopBox .txtBox h3 {
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
}
.about-web .webtopBox .imgBox {
width: 650px;
}
.section-web.lb {
background: #ecf2f5;
padding-bottom: 10px;
}
.section-web.gr {
background: #f4f4f4;
padding-bottom: 10px;
}
.section-web.lb .wrapper {
width: 1180px;
margin: auto;
}
.about-web .otherBox {
display: flex;
justify-content: space-between;
margin-top: 100px;
}
.about-web .otherBox:hover {
transition: 0.5s;
}
.about-web .otherBox ul li ul.lineBox {
position: relative;
}
.about-web .otherBox ul li ul.lineBox .line {
position: absolute;
top: 160px;
left: 60px;
}
.about-web .otherBox ul {
position: relative;
width: 360px;
border-radius: 10px;
box-shadow: 0 0 15px #ccc;
display: inline-block;
height: 510px;
}
.about-web .otherBox ul img {
width: 360px;
border-radius: 10px 10px 0 0;
}
.about-web .otherBox ul h2 {
position: absolute;
font-size: 13px;
top: 255px;
left: 30px;
}
.about-web .otherBox ul h3 {
position: absolute;
font-size: 24px;
font-weight: bold;
margin: 20px 0;
padding: 15px 30px 0 30px;
top: 245px;
left: 0;
}
.about-web .otherBox ul h3::after {
position: absolute;
content: url(../img/common/icn_arrow_news_bk.png);
top: 15px;
left: 290px;
}
.about-web .otherBox a:hover {
color: #044191;
}
.about-web .otherBox a:hover ul h3::after {
position: absolute;
content: url(../img/common/icn_arrow_news_hv.png);
top: 15px;
left: 290px;
}
.about-web .otherBox .txt {
position: absolute;
top: 330px;
left: 0;
font-size: 15px;
line-height: 1.6;
padding: 0 30px 30px 30px;
}
.about-web .clientBox {
margin-top: 40px;
background: #fff;
padding: 60px;
box-shadow: 0 0 15px #ccc;
}
.about-web .clientBox ul {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.about-web .clientBox ul:first-child {
margin-top: 0;
}
.about-web h6.ttl-fts30 {
font-size: 30px;
font-weight: bold;
border-bottom: none;
}
.about-web h6.ttl-client {
font-size: 28px;
font-weight: bold;
border-bottom: none;
}
@media only screen and (max-width: 767px) {
.about-web {
margin: 0 0 100px;
width: 100%;
}
.about-web h6.ttl-client {
font-size: 20px;
}
.about-web .webtopBox {
flex-wrap: wrap;
}
.about-web .webtopBox .txtBox {
width: 100%;
margin-bottom: 50px;
}
.about-web .webtopBox .imgBox {
width: 100%;
}
.about-web .webtopBox .imgBox img {
width: 100%;
}
.section-web .wrapper {
width: 100%;
}
.section-web.lb {
width: 100%;
}
.section-web.lb .wrapper {
width: 100%;
}
.about-web .otherBox {
flex-wrap: wrap;
}
.about-web .otherBox .lineBox .line {
position: absolute;
top: 160px;
left: 60px;
}
.about-web .otherBox ul {
width: 100%;
height: 510px;
margin-bottom: 50px;
}
.about-web .otherBox ul img {
width: 100%;
}
.about-web .otherBox ul h2 {
position: absolute;
top: 255px;
left: 30px;
}
.about-web .otherBox ul h3 {
position: absolute;
top: 245px;
left: 0;
}
.about-web .otherBox ul h3::after {
position: absolute;
top: 15px;
left: 100%;
}
.about-web .otherBox a:hover ul h3::after {
position: absolute;
top: 15px;
left: 100%;
}
.about-web .otherBox .txt {
position: absolute;
top: 330px;
left: 0;
}
.about-web .clientBox {
padding: 30px;
}
.about-web .clientBox ul {
justify-content: space-between;
flex-wrap: wrap;
margin-top: 10px;
}
.about-web .clientBox ul li {
width: 46%;
margin-bottom: 20px;
}
.about-web .clientBox ul li:last-child {
margin-bottom: 0;
}
}
/* section pharmacy works
* ----------------------------------------------- */
.worksBox ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.worksBox ul::after {
content:'';
display: block;
width: 30.5%;
}
.worksBox ul li.box {
background: #fff;
/* width: 360px;*/
width: 30.5%;
color: #000;
font-weight: bold;
padding-bottom: 30px;
margin-bottom: 60px;
box-shadow: 0 0 15px #ccc;
}
.worksBox ul li.box:nth-child(3n) {
margin-right: 0;
}
/* 各プロモーションTOPの広告出稿事例枠 */
.worksBox ul li.box figure img {
width: 360px;
height: 220px;
object-fit: cover;
object-position: 50% 0%;
}
.worksBox.web ul li.box {
width: 360px;
height: 200px;
object-fit: cover;
object-position: 50% 0%;
border-radius: 10px;
margin-bottom: 200px;
}
.worksBox.web .top-post-meta {
display: block;
font-size: 15px;
padding: 30px;
border-radius: 0 0 10px 10px;
box-shadow: 0 0 15px #ccc;
font-family: "游ゴシック";
height: 22vh;
}
.worksBox.web .top-post-meta .sitename {
position: relative;
color: #888;
margin-bottom: 5px;
}
.worksBox.web .top-post-meta .sitename::after {
content: url(../img/common/icn_arrow_news.png);
position: absolute;
top: 0;
right: 0;
}
.worksBox.web .top-post-meta .date-web {
color: #888;
font-size: 12px;
position: relative;
}
.worksBox.web .top-post-meta .text-web {
color: #000;
height: 50px;
margin-top: 20px;
}
/* ウェブ関連ページの制作実績枠 */
.worksBox.web ul li.box figure img {
border-radius: 10px 10px 0 0;
width: 360px;
height: 220px;
object-fit: cover;
object-position: 50% 0%;
font-family: 'object-fit: cover;';
}
.worksBox ul li .category {
position: relative;
}
.worksBox ul li .category p {
position: absolute;
right: 0;
bottom: 0;
background: #000;
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding: 5px 12px;
}
.worksBox .top-post-meta {
display: block;
}
.worksBox .top-post-meta .text {
line-height: 1.6;
height: 100px;
padding: 30px 30px 0 30px;
}
.worksBox .top-post-meta .text.svtop {
font-size: 16px;
line-height: 1.4;
height: 110px;
}
.worksBox .top-post-meta .tag {
color: #888;
padding: 0 30px 0 30px;
}
.worksBox .top-post-meta .date {
color: #888;
padding: 5px 30px 0 30px;
position: relative;
}
.worksBox .top-post-meta .date::after {
content: url(../img/common/icn_arrow_news.png);
position: absolute;
top: 0;
right: 30px;
}
.worksBox.weblist {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.worksBox.weblist ul::before {
content:"";
display: block;
width: 22.5%;
order:1;
}
.worksBox.weblist ul::after {
content:"";
display: block;
width: 22.5%;
}
.worksBox.weblist2 ul {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.worksBox.weblist ul li {
margin-right: 0;
}
.worksBox.weblist ul li.box {
background: #fff;
width: 22.5%;
color: #000;
padding-bottom: 30px;
margin-bottom: 60px;
}
.worksBox.weblist ul li.box figure img {
width: 270px;
height: 180px;
object-fit: cover;
object-position: 50% 0%;
}
.worksBox.weblist ul li:nth-child(3n) {
margin-right: 0;
}
.worksBox.weblist ul li img {
width: 271px;
height: 180px;
object-fit: cover;
object-position: 50% 0%;
font-family: 'object-fit: cover;'; /* 【js】IE対策 */
}
.worksBox.weblist .box .category {
font-size: 15px;
padding: 0;
margin-bottom: 25px;
}
.worksBox.weblist .top-post-meta .tag {
color: #333;
height: 35px;
padding: 0 25px 0 25px;
}
.worksBox.weblist .top-post-meta .date {
padding: 20px 25px 0;
}
.worksBox.weblist .top-post-meta .date::after {
display: none;
}
.worksBox.weblist .works-tag {
position: relative;
display: flex;
flex-wrap: wrap;
margin-top: 15px;
font-size: 12px;
font-weight: normal;
line-height: 1.6;
padding: 0 25px 0 45px;
}
.worksBox.weblist .works-tag::before {
position: absolute;
content: "";
top: 5px;
left: 25px;
width: 1em;
height: 1em;
background: url(../img/common/icon_works_tag.png) 0 0 no-repeat;
background-size: contain;
}
@media only screen and (max-width: 767px) {
.worksBox.weblist ul li.box {
width: 100%;
margin-right: 0;
}
.worksBox.weblist ul li img {
width: 598px;
height: 60vw;
}
.worksBox.weblist .box .category {
width: 100%;
}
.worksBox.web .top-post-meta .text {
padding: 0 30px 0 30px;
}
.worksBox.web ul li.box {
width: 100%;
height: 50vw;
margin-bottom: 260px;
margin-right: 0;
}
.worksBox.web ul li.box:last-of-type {
margin-bottom: 180px;
}
.worksBox.web .top-post-meta {
font-size: 15px;
padding: 30px;
}
.worksBox.web .top-post-meta .sitename {
margin-bottom: 5px;
}
.worksBox.web .top-post-meta .sitename::after {
top: 0;
right: 0;
}
.worksBox.web .top-post-meta .date-web {
font-size: 12px;
}
.worksBox.web .top-post-meta .text-web {
height: 50px;
margin-top: 20px;
}
.worksBox.web ul li.box figure img {
width: 100%;
height: 50vw;
}
}
/* 調剤プロモーション実績：下層ぺージ */
.worksBoxtop { /*works配下の実績*/
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.worksBoxtop::after {
content:"";
display: block;
width: 30%;
}
.worksBoxtop.wlist {
width: 1180px;
justify-content: flex-start;
}
.worksBoxtop.media {
width: 1180px;
text-align: left;
justify-content: space-between;
}
.worksBoxtop ul.worksBox {
margin-bottom: 50px;
}
.worksBoxtop.media ul {
margin-bottom: 50px;
}
.worksBoxtop.media::before {
content: '';
display: block;
width: 23%;
order:1;
}
.worksBoxtop.media::after {
content: '';
display: block;
width: 23%;
}
.worksBoxtop.media.center {
justify-content: center;
padding-top: 20px;
}
/*
.worksBoxtop ul {
margin-bottom: 50px;
margin-right: 38.5px;
}
.worksBoxtop ul:nth-child(3n) {
margin-right: 0;
}
.worksBoxtop.media ul {
margin-right: 32px;
}
.worksBoxtop.media ul:nth-child(4),
.worksBoxtop.media ul:nth-child(8),
.worksBoxtop.media ul:nth-child(12),
.worksBoxtop.media ul:nth-child(16),
.worksBoxtop.media ul:nth-child(20) {
margin-right: 0;
}*/
.worksBoxtop ul li {
background: #fff;
width: 271px;
color: #000;
font-weight: bold;
padding-bottom: 1px;
}
.worksBoxtop.wlist ul {
margin-right: 32px;
padding-bottom: 30px;
}
.worksBoxtop.wlist ul:nth-of-type(4n) {
margin-right: 0;
}
.worksBoxtop ul li img {
width: 271px;
height: 177px;
}
.worksBoxtop .thumb {
background: #eee;
color: #fff;
font-weight: bold;
display: inline-block;
}
.worksBoxtop ul li.box {
box-shadow: 0 0 15px #ccc;
}
.worksBoxtop ul li .period {
position: relative;
font-size: 12px;
padding: 0 25px 20px 25px;
}
.worksBoxtop ul li .period p {
position: absolute;
right: 0;
bottom: 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 5px 12px;
}
.worksBoxtop .top-post-meta {
display: block;
padding-bottom: 30px;
}
.worksBoxtop .top-post-meta .ttl {
line-height: 1.4;
height: 60px;
padding: 25px 25px 0 25px;
position: relative;
}
.worksBoxtop .top-post-meta .detail {
color: #777;
font-size: 12px;
line-height: 1.6;
height: 50px;
padding: 5px 25px 0 25px;
}
.worksBoxtop .top-post-meta .ttl::after {
content: "";
position: absolute;
top: 38px;
right: 25px;
display: inline-block;
width: 1.2em;
height: 1.2em;
background: url(../img/common/icn_arrow_news.png) no-repeat;
background-size: contain;
}
.worksBoxtop.media .top-post-meta .ttl::after {
top: 70px;
}
.worksBoxtop.media .ico_media {
font-size: 10px;
text-align: center;
border: solid 1px #000;
padding: 3px 5px 4px 5px;
display: block;
max-width: 70px;
margin-top: 5px;
}
.worksBoxtop.media .ico_media.nobr {
display: inline;
margin-left: 5px;
}
@media only screen and (max-width: 767px) {
/* 調剤プロモーション実績：下層ぺージ */
.worksBoxtop {
flex-wrap: wrap;
width: 100%;
}
.worksBoxtop .thumb {
width: 100%;
}
.worksBoxtop ul {
width: 100%;
margin-bottom: 40px;
margin-right: 0;
}
.worksBoxtop ul.worksBox {
margin-bottom: 0;
}
.worksBoxtop ul li img {
width: 100%;
height: auto;
}
.worksBoxtop ul li {
width: 100%;
padding-bottom: 0;
}
.worksBoxtop ul li .period {
font-size: 12px;
padding: 0 25px 20px 25px;
}
.worksBoxtop ul li .period p {
font-size: 12px;
padding: 5px 12px;
}
.worksBoxtop .top-post-meta {
display: block;
margin-bottom: 20px;
padding-bottom: 0;
}
.worksBoxtop .top-post-meta .ttl {
line-height: 1.6;
height: 60px;
padding: 30px 25px 0 25px;
}
.worksBoxtop .top-post-meta .tags::after {
top: 8px;
right: 25px;
width: 1.5em;
height: 1.5em;
}
.worksBoxtop .top-post-meta .detail {
height: 80px;
}
.worksBoxtop.wlist {
width: 100%;
}
.worksBoxtop.wlist ul {
margin-right: 0;
}
}
/* 調剤プロモーション実績：下層ぺージ */
.worksBox.under {
display: flex;
justify-content: space-between;
}
.worksBox.under ul li {
background: #fff;
width: 271px;
color: #000;
font-weight: bold;
padding-bottom: 30px;
}
.worksBox.under ul li img {
width: 271px;
height: 177px;
}
.worksBox.under ul li {
background: #fff;
width: 271px;
color: #000;
font-weight: bold;
padding-bottom: 30px;
}
.worksBox.under .thumb {
background: #eee;
color: #fff;
font-weight: bold;
display: inline-block;
}
.worksBox.under ul li.box {
box-shadow: 0 0 15px #ccc;
}
.worksBox.under ul li .period {
position: relative;
font-size: 12px;
padding: 0 25px 20px 25px;
}
.worksBox.under ul li .period p {
position: absolute;
right: 0;
bottom: 0;
background: #000;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 5px 12px;
}
.worksBox.under .top-post-meta {
display: block;
}
.worksBox.under .top-post-meta .text {
line-height: 1.6;
height: 60px;
padding: 30px 25px 0 25px;
}
.worksBox.under .top-post-meta .tags {
color: #888;
font-size: 12px;
padding: 0 25px 0 50px;
position: relative;
}
.worksBox.under .top-post-meta .tags::before {
content: "";
position: absolute;
top: 2px;
left: 30px;
display: inline-block;
width: 1em;
height: 1em;
background: url(../img/common/icon_works_tag.png) no-repeat;
background-size: contain;
}
.worksBox.under .top-post-meta .tags::after {
content: "";
position: absolute;
top: 8px;
right: 25px;
display: inline-block;
width: 1.5em;
height: 1.5em;
background: url(../img/common/icn_arrow_news.png) no-repeat;
background-size: contain;
}
@media only screen and (max-width: 767px) {
/* 調剤プロモーション実績：下層ぺージ */
.worksBox.under {
flex-wrap: wrap;
}
.worksBox.under .thumb {
width: 100%;
}
.worksBox.under ul {
width: 100%;
margin-bottom: 40px;
}
.worksBox.under ul li img {
width: 100%;
height: auto;
}
.worksBox.under ul li {
width: 100%;
padding-bottom: 0;
}
.worksBox.under ul li .period {
font-size: 12px;
padding: 0 25px 20px 25px;
}
.worksBox.under ul li .period p {
font-size: 12px;
padding: 5px 12px;
}
.worksBox.under .top-post-meta {
display: block;
}
.worksBox.under .top-post-meta .text {
line-height: 1.6;
height: 60px;
padding: 30px 25px 0 25px;
}
.worksBox.under .top-post-meta .tags {
font-size: 12px;
padding: 0 25px 0 50px;
}
.worksBox.under .top-post-meta .tags::before {
top: 2px;
left: 30px;
width: 1em;
height: 1em;
}
.worksBox.under .top-post-meta .tags::after {
top: 8px;
right: 25px;
width: 1.5em;
height: 1.5em;
}
}
.more-btn {
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.worksBox {
margin: 30px 0;
margin-bottom: 30px;
}
.worksBox ul {
flex-wrap: wrap;
}
.worksBox ul li {
width: 100%;
padding-bottom: 0;
margin-right: 0;
}
.worksBox ul li.box {
width: 100%;
margin-bottom: 40px;
margin-right: 0;
}
/* 各プロモTOPの広告出稿事例枠 */
.worksBox ul li.box figure {
width: 100%;
height: 50vw;
}
.worksBox ul li.box figure img {
width: 100%;
height: 50vw;
}
.worksBox.weblist ul li.box figure img {
width: 100%;
height: 50vw;
}
.worksBox ul li:last-child {
margin-bottom: 0;
}
.worksBox ul li img {
width: 100%;
height: auto;
}
.worksBox .top-post-meta {
display: block;
}
.worksBox .top-post-meta .text {
line-height: 1.6;
height: auto;
padding: 30px;
}
.worksBox .top-post-meta .tag {
padding: 0 30px 10px 30px;
}
.worksBox .top-post-meta .date {
padding: 0 30px 30px 30px;
}
.worksBox .top-post-meta .date::after {
top: 0;
}
.worksBox a:hover {
top: 0;
right: 30px;
}
.more-btn {
margin: 0 auto;
}
}
.recruit-text-wrapper {
max-width: 1180px;
height: 100%;
margin: auto;
position: relative;
}
.recruit-text-box {
font-feature-settings: 'palt';
position: absolute;
top: 35%;
}
.recruit-text-box h2,
.recruit-text-box h3,
.recruit-text-box p {
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
.recruit-text-box h2 {
font-size: 40px;
line-height: 1;
margin-bottom: 35px;
}
.recruit-text-box h3 {
color: #0b68b7;
font-size: 20px;
line-height: 1;
margin-bottom: 20px;
text-indent: 3px;
}
.recruit-text-box p {
font-size: 24px;
line-height: 1;
}
@media only screen and (max-width: 767px) {
.section-page-keyvisual .keyvisual-wrapper.faq {
background: url("../img/faq/sp/img_keyvisual_faq.jpg");
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box {
width: 100%;
text-align: center;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box h2 {
font-size: 2.6em;
}
.section-page-keyvisual .keyvisual-wrapper .key-ttl-box p {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
font-size: 1.2em;
margin-top: 30px;
padding: 25px 0;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box {
padding: 60px 0;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .key-img-box-wrapper {
flex-wrap: wrap;
width: 100%;
padding: 0 30px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox {
width: 100%;
margin-right: 0;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .imgBox {
width: 100%;
height: auto;
margin-top: 30px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3 {
width: 100%;
font-size: 1.8em;
line-height: 1.7;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox h3 strong {
background: linear-gradient(transparent 1%, #1eaa9b 1%);
padding: 8px 10px;
}
.section-page-keyvisual .keyvisual-wrapper .key-img-box .txtBox p {
font-size: 15px;
line-height: 2;
}
.section-page-menu {
margin: 60px 30px;
padding: 0;
}
.section-page-menu .key-txt-box {
width: 100%;
padding: 30px;
position: static;
font-size: 11px;
}
.section-page-menu .key-txt-box ul {
width: 100%;
line-height: 2.4;
margin-top: 20px;
}
.section-page-menu .key-txt-box li {
margin-right: 0;
margin-bottom: 20px;
}
.section-page-menu .key-txt-box ul li {
flex-basis: 50%;
line-height: 1.4;
}
.section-page-menu .key-txt-box ul li.mg {
text-align: right;
}
.recruit-text-wrapper {
max-width: 100%;
}
.recruit-text-box {
padding: 0 20px;
top: 30%;
}
.recruit-text-box h2 {
font-size: 30px;
margin-bottom: 20px;
}
.recruit-text-box h3 {
font-size: 16px;
margin-bottom: 10px;
}
.recruit-text-box p {
font-size: 22px;
}
}
/* PAGE FAQ
* ----------------------------------------------- */
.section-faq {
margin-top: 80px;
}
.section-faq .faq-wrapper {
max-width: 1180px;
margin: auto;
}
.section-faq .faq-wrapper dl {}
.section-faq .faq-wrapper dl dt {
font-size: 20px;
background: #0b68b7;
color: #fff;
padding: 30px;
line-height: 1;
position: relative;
}
.section-faq .faq-wrapper dl dt::after {
background-image: url(../img/common/icn_plus_wh.png);
background-size: 100% auto;
content: "";
position: absolute;
right: 20px;
top: 38%;
width: 21px;
height: 21px;
transition: all .3s ease-in-out;
}
.section-faq .faq-wrapper dl dt.active::after {
background-image: url(../img/common/icn_minus_wh.png);
}
.section-faq .faq-wrapper dl:nth-child(even) dt {
background: #f0efe4;
color: #000;
}
.section-faq .faq-wrapper dl:nth-child(even) dt::after {
background-image: url(../img/common/icn_plus_bk.png);
background-size: 100% auto;
content: "";
position: absolute;
right: 20px;
}
.section-faq .faq-wrapper dl:nth-child(even) dt.active::after {
background-image: url(../img/common/icn_minus_bk.png);
}
.section-faq .faq-wrapper dl dd {
padding: 40px;
}
.section-faq .faq-wrapper dl dd span {
font-size: 20px;
color: #0b68b7;
}
.section-faq .faq-wrapper dl dd p {
font-family: source-han-sans-japanese, sans-serif;
line-height: 1.6;
padding-left: 2em;
text-indent: -1.6em;
font-size: 15px;
}
@media only screen and (max-width: 767px) {
.section-faq {
margin-top: 40px;
}
.section-faq .faq-wrapper {
max-width: 100%;
margin: 0 40px;
}
.section-faq .faq-wrapper dl {}
.section-faq .faq-wrapper dl dt {
font-size: 14px;
padding: 15px 30px 15px 15px;
line-height: 1.4;
}
.section-faq .faq-wrapper dl dt::after {
background-image: url(../img/common/icn_plus_wh.png);
background-size: 100% auto;
right: 10px;
top: 42%;
width: 14px;
height: 14px;
}
.section-faq .faq-wrapper dl dt.active::after {
background-image: url(../img/common/icn_minus_wh.png);
}
.section-faq .faq-wrapper dl:nth-child(even) dt {
background: #f0efe4;
color: #000;
}
.section-faq .faq-wrapper dl:nth-child(even) dt::after {
background-image: url(../img/common/icn_plus_bk.png);
background-size: 100% auto;
content: "";
position: absolute;
right: 10px;
}
.section-faq .faq-wrapper dl:nth-child(even) dt.active::after {
background-image: url(../img/common/icn_minus_bk.png);
}
.section-faq .faq-wrapper dl dd {
padding: 15px;
}
.section-faq .faq-wrapper dl dd span {
font-size: 20px;
color: #0b68b7;
}
.section-faq .faq-wrapper dl dd p {
font-size: 13px;
}
}
/* PAGE RECRUIT
* ----------------------------------------------- */
.section-overview {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
margin-top: 80px;
}
.section-overview .overview-text {
padding: 40px 0 0 60px;
}
.section-overview .overview-text h3 {
color: #0b68b7;
font-size: 16px;
font-weight: 700;
}
.section-overview .overview-text h3 span {
font-size: 18px;
}
.section-overview .overview-text h2 {
font-size: 36px;
margin-top: 20px;
}
.section-overview .overview-text p {
font-size: 16px;
margin-top: 25px;
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.section-overview {
display: block;
margin-top: 40px;
}
.section-overview .overview-text {
padding: 0;
}
.section-overview .overview-text h3 {
font-size: 14px;
}
.section-overview .overview-text h3 span {
font-size: 16px;
}
.section-overview .overview-text h2 {
font-size: 24px;
margin-top: 10px;
}
.section-overview .overview-text p {
font-size: 14px;
margin-top: 15px;
}
.section-overview figure {
width: 100%;
padding-left: 20%;
margin-top: 30px;
}
}
.section-greetings {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
margin-top: 120px;
}
.section-greetings .greetings-text {
padding: 80px 40px 0 0;
width: calc(100% - 620px);
}
.section-greetings .greetings-text h3 {
color: #0b68b7;
font-size: 16px;
font-weight: 700;
}
.section-greetings .greetings-text h3 span {
font-size: 18px;
}
.section-greetings .greetings-text h2 {
font-size: 36px;
margin-top: 20px;
}
.section-greetings .greetings-text p {
font-size: 16px;
margin-top: 25px;
line-height: 1.8;
}
.section-greetings .greetings-text p.name {
font-size: 26px;
}
.section-greetings .greetings-text p.name span {
font-size: 18px;
margin-right: 20px;
}
@media only screen and (max-width: 767px) {
.section-greetings {
display: block;
margin-top: 60px;
}
.section-greetings .greetings-text {
width: 100%;
padding: 0;
margin-top: 20px;
}
.section-greetings .greetings-text h3 {
font-size: 14px;
}
.section-greetings .greetings-text h3 span {
font-size: 16px;
}
.section-greetings .greetings-text h2 {
font-size: 24px;
margin-top: 10px;
}
.section-greetings .greetings-text p {
font-size: 14px;
margin-top: 15px;
}
}
.section-message {
margin-top: 80px;
}
.section-message h3 {
font-size: 26px;
text-align: center;
position: relative;
z-index: 1;
}
.section-message h3 span {
background: #fff;
padding: 0 10px;
}
.section-message h3::after {
content: "";
display: block;
width: 100%;
height: 3px;
background-color: #0b68b7;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
z-index: -1;
}
.section-message ul {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.section-message ul li {
width: 30%;
}
.section-message ul li figure {}
.section-message ul li figure img {
display: block;
}
.section-message ul li p {
font-size: 14px;
margin-top: 25px;
line-height: 1.8;
}
.section-message ul li p.message-title {
font-size: 19px;
line-height: 1;
}
.section-message ul li p.member-career {
margin-top: 15px;
font-weight: 700;
line-height: 1;
}
@media only screen and (max-width: 767px) {
.section-message {
margin-top: 60px;
}
.section-message h3 {
font-size: 20px;
}
.section-message ul {
display: block;
margin-top: 20px;
}
.section-message ul li {
width: 100%;
margin-bottom: 30px;
}
.section-message ul li:last-child {
margin-bottom: 0;
}
.section-message ul li figure {}
.section-message ul li p {
margin-top: 15px;
}
}
.section-about {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
margin-top: 120px;
}
.section-about .about-text {
padding: 80px 0 0 40px;
width: calc(100% - 620px);
}
.section-about .about-text h3 {
color: #0b68b7;
font-size: 16px;
font-weight: 700;
}
.section-about .about-text h3 span {
font-size: 18px;
}
.section-about .about-text h2 {
font-size: 36px;
margin-top: 20px;
}
.section-about .about-text p {
font-size: 16px;
margin-top: 25px;
line-height: 1.8;
}
.section-about .about-text p.name {
font-size: 26px;
}
.section-about .about-text p.name span {
font-size: 18px;
margin-right: 20px;
}
@media only screen and (max-width: 767px) {
.section-about {
display: block;
margin-top: 60px;
}
.section-about .about-text {
width: 100%;
padding: 0;
}
.section-about .about-text h3 {
font-size: 14px;
}
.section-about .about-text h3 span {
font-size: 16px;
}
.section-about .about-text h2 {
font-size: 24px;
margin-top: 10px;
}
.section-about .about-text p {
font-size: 14px;
margin-top: 15px;
}
.section-about figure {
margin-top: 30px;
}
}
.section-main-works {
margin-top: 80px;
}
.section-main-works h3 {
font-size: 30px;
}
.section-main-works ul {
display: flex;
justify-content: space-between;
margin-top: 30px;
}
.section-main-works ul li {
width: 30%;
}
.section-main-works ul li img {
display: block;
}
.section-main-works ul li p.main-works-title {
font-size: 22px;
line-height: 1;
margin-top: 25px;
}
.section-main-works ul li p.main-works-text {
margin-top: 50px;
line-height: 1.8;
font-size: 14px;
padding-top: 20px;
border-top: 4px solid #0b68b7;
}
@media only screen and (max-width: 767px) {
.section-main-works {
margin-top: 60px;
}
.section-main-works h3 {
font-size: 24px;
}
.section-main-works ul {
display: block;
margin-top: 20px;
}
.section-main-works ul li {
width: auto;
margin-bottom: 40px;
}
.section-main-works ul li p.main-works-title {
font-size: 18px;
margin-top: 15px;
}
.section-main-works ul li p.main-works-text {
margin-top: 15px;
line-height: 1.6;
font-size: 13px;
padding-top: 10px;
}
}
.section-schedule {
margin-top: 80px;
display: block;
}
.section-schedule h3 {
font-size: 30px;
}
.section-schedule .schedule-board {}
.section-schedule .schedule-board ul {
margin-top: 40px;
}
.section-schedule .schedule-board ul li {
background: #e5f4ed;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 20px 40px;
}
.section-schedule .schedule-board ul li:nth-child(even) {
background: #fff;
}
.section-schedule .schedule-board ul li p.work-time {
font-size: 36px;
color: #248859;
padding-right: 30px;
width: 120px;
border-right: 1px solid #248859;
}
.section-schedule .schedule-board ul li p.work-contents {
padding-left: 30px;
font-size: 16px;
}
.section-schedule .schedule-board .schedule-gallery {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 80px;
}
.section-schedule .schedule-board .schedule-gallery > figure:first-child {
width: 480px;
height: 270px;
margin-bottom: 60px;
}
.section-schedule .schedule-board .schedule-gallery > figure:nth-child(2) {
width: 560px;
height: 270px;
margin-bottom: 60px;
}
.section-schedule .schedule-board .schedule-gallery > figure:nth-child(3) {
width: 340px;
height: 540px;
}
.section-schedule .schedule-board .schedule-gallery figure img {
display: block;
width: 100%;
height: auto;
}
.section-schedule .schedule-board .schedule-gallery .gallery-box figure:first-child {
width: 480px;
height: 240px;
margin-bottom: 60px;
position: relative;
right: 220px;
}
.section-schedule .schedule-board .schedule-gallery .gallery-box figure:nth-child(2) {
width: 480px;
height: 240px;
}
@media only screen and (max-width: 767px) {
.section-schedule {
margin-top: 40px;
}
.section-schedule h3 {
font-size: 24px;
}
.section-schedule .schedule-board ul {
margin-top: 20px;
}
.section-schedule .schedule-board ul li {
padding: 10px 15px;
}
.section-schedule .schedule-board ul li p.work-time {
font-size: 20px;
padding-right: 10px;
width: auto;
min-width: 60px;
}
.section-schedule .schedule-board ul li p.work-contents {
padding-left: 10px;
font-size: 14px;
}
.section-schedule .schedule-board .schedule-gallery {
display: block;
margin-top: 60px;
}
.section-schedule .schedule-board .schedule-gallery > figure:first-child {
width: auto;
height: auto;
margin-bottom: 30px;
padding-right: 15%;
}
.section-schedule .schedule-board .schedule-gallery > figure:nth-child(2) {
width: auto;
height: auto;
margin-bottom: 30px;
padding-left: 15%;
}
.section-schedule .schedule-board .schedule-gallery > figure:nth-child(3) {
width: auto;
height: auto;
margin-bottom: 30px;
padding-right: 35%;
}
.section-schedule .schedule-board .schedule-gallery figure img {
display: block;
width: 100%;
height: auto;
}
.section-schedule .schedule-board .schedule-gallery .gallery-box {}
.section-schedule .schedule-board .schedule-gallery .gallery-box figure {}
.section-schedule .schedule-board .schedule-gallery .gallery-box figure:first-child {
width: auto;
height: auto;
margin-bottom: 30px;
padding-left: 15%;
position: static;
}
.section-schedule .schedule-board .schedule-gallery .gallery-box figure:nth-child(2) {
width: auto;
height: auto;
padding-right: 15%;
}
}
.section-works-archive {
margin-top: 80px;
}
.section-works-archive h3 {
font-size: 30px;
line-height: 1;
}
.works-archive-wrapper ul {
margin-top: 30px;
margin-bottom: 40px;
display: flex;
justify-content: space-between;
}
.works-archive-wrapper ul li {
width: 30%;
}
.works-archive-wrapper ul li a {
display: block;
}
.works-archive-wrapper ul li figure {
height: 220px;
}
.works-archive-wrapper ul li figure img {
display: block;
width: 100%;
height: 100%;
}
.works-archive-wrapper ul li h3 {
font-size: 18px;
line-height: 1;
margin-top: 15px;
}
.works-archive-wrapper ul li p {
font-size: 14px;
line-height: 1;
margin-top: 18px;
}
@media only screen and (max-width: 767px) {
.section-works-archive {
margin-top: 60px;
}
.section-works-archive h3 {
font-size: 24px;
}
.works-archive-wrapper ul {
margin-top: 20px;
margin-bottom: 0;
display: block;
}
.works-archive-wrapper ul li {
width: auto;
margin-bottom: 40px;
}
.works-archive-wrapper ul li h3 {
font-size: 16px;
margin-top: 10px;
}
.works-archive-wrapper ul li p {
font-size: 13px;
margin-top: 15px;
}
}
.section-recruit-outline {
margin-top: 100px;
padding: 48px;
border-radius: 10px;
border: 1px solid #0b68b7;
}
.section-recruit-outline h3 {
line-height: 1;
font-size: 30px;
text-align: center;
}
.section-recruit-outline .outline-wrapper {
margin-top: 30px;
}
.section-recruit-outline .outline-wrapper table {
width: 100%;
border-top: 1px dashed #bbb;
}
.section-recruit-outline .outline-wrapper table tr {
border-bottom: 1px dashed #bbb;
}
.section-recruit-outline .outline-wrapper table tr:last-child {
border-bottom: none;
}
.section-recruit-outline .outline-wrapper table tr th {
font-size: 15px;
color: #0b68b7;
padding: 25px 0;
vertical-align: top;
text-align: left;
width: 20%;
font-weight: 700;
}
.section-recruit-outline .outline-wrapper table tr td {
padding: 25px 0;
font-size: 15px;
vertical-align: middle;
border: none;
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.section-recruit-outline {
margin-top: 60px;
padding: 14px;
}
.section-recruit-outline h3 {
font-size: 24px;
}
.section-recruit-outline .outline-wrapper {
margin-top: 20px;
}
.section-recruit-outline .outline-wrapper table {
width: 100%;
}
.section-recruit-outline .outline-wrapper table tr th {
font-size: 13px;
padding: 15px 0;
width: 25%;
}
.section-recruit-outline .outline-wrapper table tr td {
font-size: 13px;
padding: 15px 0;
line-height: 1.6;
}
}
.section-recruit-contact {
margin-top: 100px;
}
.section-recruit-contact h3 {
font-size: 36px;
line-height: 1;
text-align: center;
}
.section-recruit-contact h3 span {
display: block;
margin-top: 20px;
color: #0b68b7;
font-size: 18px;
}
.section-recruit-contact .block-recruit-contact {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
margin-top: 40px;
position: relative;
}
.section-recruit-contact .block-recruit-contact .recruit-tel {
font-size: 40px;
margin-right: 50px;
margin-left: -10px;
color: #0b68b7;
}
.section-recruit-contact .block-recruit-contact .recruit-tel::after {
display: block;
background: #000;
content: "";
width: 1px;
height: 100%;
position: absolute;
top: 0;
left: 53%;
}
.section-recruit-contact .block-recruit-contact .recruit-tel span {
font-size: 20px;
}
@media only screen and (max-width: 767px) {
.section-recruit-contact {
margin-top: 60px;
}
.section-recruit-contact h3 {
font-size: 30px;
line-height: 1.2;
letter-spacing: 0.075em
}
.section-recruit-contact h3 span {
margin-top: 10px;
font-size: 18px;
letter-spacing: 0.05em
}
.section-recruit-contact .block-recruit-contact {
display: block;
margin-top: 10px;
}
.section-recruit-contact .block-recruit-contact .recruit-tel {
font-size: 30px;
text-align: center;
margin-right: 0;
margin-left: 0;
margin-bottom: 20px;
}
.section-recruit-contact .block-recruit-contact .recruit-tel::after {
content: none;
}
.section-recruit-contact .block-recruit-contact .recruit-tel span {
font-size: 14px;
}
}
/* PAGE WORKS
* ----------------------------------------------- */
@media print, (min-width: 768px) {
.list-works {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.list-works li {
width: 271px;
margin-right: 38px;
margin-bottom: 40px;
}
.list-works li img {
height: 180px;
object-fit: cover;
object-position: 50% 0%;
}
.list-works li:nth-child(3n) {
margin-right: 0;
}
.list-works li a {
display: inline-block;
}
.list-works img {
margin-bottom: 10px;
width: 271px;
}
.list-works .item {
margin-bottom: 46px;
}
.list-works .works-archive-cat {
font-size: 10px;
line-height: 1.2;
letter-spacing: 0.075em;
padding: 4px 10px;
border: 1px solid #000;
display: inline-block;
}
.list-works .works-title-text {
font-size: 16px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 0.05em;
height: 50px;
}
.list-works .works-title-date {
font-size: 13px;
font-weight: bold;
color: #777;
padding: 10px 0;
}
.list-works .works-tag {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
font-size: 12px;
line-height: 1.6;
position: relative;
padding-left: 2em;
}
.list-works .works-tag::before {
position: absolute;
content: "";
top: 3px;
left: 0;
width: 1.2em;
height: 1.2em;
background: url(../img/common/icon_works_tag.png) 0 0 no-repeat;
background-size: contain;
}
.list-works.web li {
box-shadow: 0 0 15px #ccc;
}
.list-works.web .imgBox {
position: relative;
}
.list-works.web .imgBox {
position: relative;
}
.list-works.web .works-archive-cat {
position: absolute;
right: 0;
bottom: 10px;
background: #000;
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding: 5px 12px;
}
.list-works.web .works-title-text {
font-size: 15px;
line-height: 1.4;
margin-top: -5px;
padding: 0 20px;
}
.list-works.web .date {
color: #888;
font-weight: bold;
padding: 10px 20px;
}
.list-works.web .works-tag {
padding: 0 20px 30px 40px;
}
.list-works.web .works-tag::before {
left: 20px;
}
.section-works {
padding-top: 36px;
padding-bottom: 60px;
}
.section-works .list-works .item {
margin-bottom: 62px;
}
.category-link {
margin-top: 80px;
}
.category-link h3 {
font-size: 30px;
line-height: 1;
padding-bottom: 20px;
border-bottom: 4px solid #0b68b7;
}
.category-link ul {
display: flex;
justify-content: space-between;
margin-top: 40px;
}
.category-link ul li {
width: 30%;
}
.category-link ul li a {
display: block;
}
.category-link ul li img {
display: block;
}
.category-link ul li p {
font-size: 18px;
line-height: 1;
margin-top: 15px;
}
}
@media only screen and (max-width: 767px) {
.list-works {
display: block;
flex-wrap: wrap;
}
.list-works li {
margin-bottom: 80px;
width: 100%;
}
.list-works img {
margin-bottom: 10px;
width: 100%;
}
.list-works .works-archive-cat {
font-size: 12px;
padding: 8px 10px 5px;
display: inline-block;
border: 1px solid #000;
margin: 10px 0 5px;
}
.list-works .works-title-text {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
letter-spacing: 0.05em;
padding-top: 5px;
margin-bottom: 10px;
}
.list-works .works-title-date {
font-size: 13px;
font-weight: bold;
color: #777;
padding: 10px 0;
}
.list-works .item {
width: 48%;
margin-right: 4%;
margin-bottom: 24px;
}
.list-works .item:nth-child(2n) {
margin-right: 0;
}
.list-works .case-text {
min-height: 32px;
}
.list-works .arrow-text {
font-weight: bold;
font-size: 12px;
background: url(../img/common/icn_arrow_04.png) right 3px no-repeat;
background-size: 20px auto;
padding-right: 30px;
}
.list-works.web li {
box-shadow: 0 0 15px #ccc;
}
.list-works.web .imgBox {
position: relative;
}
.list-works.web .imgBox {
position: relative;
}
.list-works.web .works-archive-cat {
position: absolute;
right: 0;
bottom: 10px;
background: #000;
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding: 5px 12px;
}
.list-works.web .works-title-text {
font-size: 15px;
line-height: 1.4;
margin-top: -5px;
padding: 0 20px;
}
.list-works.web .date {
color: #888;
font-weight: bold;
padding: 10px 20px;
}
.list-works.web .works-tag {
padding: 0 20px 30px 20px;
}
.list-works.web .works-tag::before {
left: 50px;
}
.list-works .works-tag::before {
position: absolute;
content: "";
width: 1.2em;
height: 1.2em;
background: url(../img/common/icon_works_tag.png) 0 0 no-repeat;
background-size: contain;
}
.list-works .works-tag a:first-child {
margin-left: 25px;
}
.section-works {
padding-top: 25px;
padding-bottom: 35px;
}
.category-link {
margin-top: 60px;
}
.category-link h3 {
font-size: 22px;
padding-bottom: 10px;
border-bottom: 4px solid #0b68b7;
}
.category-link ul {
display: block;
margin-top: 20px;
}
.category-link ul li {
width: 100%;
margin-bottom: 40px;
}
.category-link ul li p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
}
}
/* PAGE CASE DETAIL
* ----------------------------------------------- */
.section-works-detail .flex {
display: flex;
justify-content: space-between;
}
.section-works-detail .works {
width: 890px;
margin-bottom: 20px;
/*margin-bottom: 100px;*/
}
.section-works-detail .works.new {
width: 100%;
margin-bottom: 40px;
}
.section-works-detail .works.wlist {
width: 1180px;
margin-bottom: 40px;
}
.section-works-detail .works h1 {
font-size: 30px;
font-weight: bold;
line-height: 1.3;
border-bottom: solid 5px #000;
padding-bottom: 12px;
letter-spacing: 0;
margin-bottom: 20px;
}
.section-works-detail .works .category {
background: #044191;
color: #fff;
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
margin-bottom: 40px;
display: inline-block;
}
.section-works-detail .works h3 {
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
padding: 0em 0.5em;
color: #142c4b;
background: transparent;
border-left: solid 7px #142c4b;
}
.section-works-detail .works h5 {
background: rgb(242, 247, 250);
font-size: 24px;
font-weight: bold;
padding: 18px 30px;
margin-bottom: 40px;
}
.section-works-detail .works h5::before {
content: "";
padding: 0.005em 0.4em;
background: transparent;
border-left: 7px solid rgb(35, 116, 171);
}
.section-works-detail .works .txt {
font-size: 15px;
line-height: 1.6;
border-bottom: dotted 1px #999;
padding-bottom: 25px;
}
.section-works-detail .works .sitelink {
color: #555;
font-size: 15px;
font-weight: bold;
margin-bottom: 15px;
}
.section-works-detail .works .sitelink::before {
content: url(../img/common/ico_window_bk.png);
padding-right: 8px;
}
.section-works-detail .works .sitename {
color: #666;
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.section-works-detail .works .release {
color: #666;
font-size: 14px;
font-weight: bold;
}
.section-works-detail .worksweb-imgBox img {
border: solid 1px #ddd;
}
.section-works-detail .worksweb-imgBox .spBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 50px;
}
.section-works-detail .worksweb-imgBox .spBox img {
width: 420px;
}
.section-works-detail .worksweb-imgBox .spBox .spimg:last-child {
margin-top: 80px;
}
.section-works-detail .worksweb-imgBox .spBox.graphic {
display: block;
margin-top: 50px;
}
.section-works-detail .worksweb-imgBox .spBox.graphic img {
width: 100%;
}
.section-works-detail .worksweb-imgBox .spBox.graphic .spimg:last-child {
margin-top: 50px;
}
.section-works-detail .works h3.worksweb {
color: #000;
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 10px;
border-bottom: solid 4px #ccc;
border-left: none;
padding-left: 0;
}
.section-works-detail .works h4.worksweb {
color: #000;
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: solid 3px #ccc;
}
.section-works-detail .works .worksweb-txt {
font-size: 15px;
line-height: 1.8;
}
.ph-link {
font-weight: bold;
position: relative;
padding-left: 1.5em;
}
.ph-link::before {
position: absolute;
top: 0.3em;
left: 0;
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
background: url(../img/common/icon_link.png) no-repeat;
background-size: contain;
}
.ph-link a:link,
.ph-link a:visited,
.ph-link a:hover,
.ph-link a:active {
color: #0faedb;
}
.ph-link.media::before {
position: absolute;
top: 0.1em;
}
.section-works-detail .works .table-detail {
margin-top: 30px;
margin-bottom: 50px;
}
.section-works-detail .works .table-detail {
margin-bottom: 80px;
}
.section-works-detail .works .table-detail th {
width: 220px;
background: #f9f9f9;
}
.section-works-detail .works .photos {
margin: 100px 0;
}
.section-works-detail .works .photos .ph01 {
display: flex;
justify-content: space-between;
margin: 40px 0;
}
.section-works-detail .works .photos .ph01 .ph01-2 {
width: 360px;
margin-left: 30px;
margin-top: 120px;
}
.section-works-detail .works .photos .ph02 {
display: flex;
justify-content: space-between;
}
.section-works-detail .works .photos .ph02 li {
width: 276px;
}
@media only screen and (max-width: 767px) {
.section-works-detail .works h5 {
line-height: 1.3;
text-indent: -24px;
padding-left: 45px;
}
.section-works-detail .works h5::before {
padding: 0.0005em 0.3em;
}
.ph-link {
font-size: 14px;
}
.section-works-detail .works {
width: 100%;
}
.section-works-detail .works .category {
padding: 8px 20px;
font-size: 14px;
font-weight: bold;
margin-bottom: 40px;
}
.section-works-detail .works .table-detail th {
width: 30%;
}
.section-works-detail .works .photos {
margin: 100px 0 60px;
}
.section-works-detail .works .photos .ph01 {
flex-wrap: wrap;
}
.section-works-detail .works .photos .ph01 .ph01-2 {
width: 100%;
margin-left: 0;
margin-top: 40px;
}
.section-works-detail .works .photos .ph02 {
flex-wrap: wrap;
}
.section-works-detail .works .photos .ph02 li {
width: 100%;
margin-bottom: 40px;
}
.section-works-detail .works .photos .ph02 li:last-child {
margin-bottom: 0;
}
}
.section-works-detail a.btn-list {
color: #000;
}
.section-works-detail .works-wrap-slide {
overflow: hidden;
}
.section-works-detail .works-wrap-slide .img-canvas {
position: relative;
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 63%;
/* padding-bottom: 56.25%;*/
background: #000;
}
.section-works-detail .works-wrap-slide .img-canvas > img {
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.section-works-detail .works-wrap-slide .img-canvas.wider > img {
height: auto;
top: 50%;
transform: translateY(-50%);
}
.section-works-detail .works-wrap-slide .img-canvas.longer > img {
width: auto;
max-width: none;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
@media only screen and (max-width: 767px) {
.section-works-detail .works-wrap-slide .img-canvas {
padding-bottom: 63.25%;
}
}
.section-works-detail .works-wrap-slide p {
font-size: 16px;
color: #000;
background: #fff;
padding: 10px;
position: absolute;
bottom: 0;
width: 100%;
}
.section-works-detail .works-wrap-slide .works-slide .slick-arrow {
position: absolute;
z-index: 100;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
top: 50%;
}
.section-works-detail .works-wrap-slide .works-slide .slick-prev,
.section-works-detail .works-wrap-slide .works-slide .slick-next {
background-color: #000;
background-size: 13px 20px;
width: 60px;
height: 60px;
}
.section-works-detail .works-wrap-slide .works-slide .slick-prev {
background-image: url(../img/common/icn_arrow_prev.png);
}
.section-works-detail .works-wrap-slide .works-slide .slick-next {
background-image: url(../img/common/icn_arrow_next.png);
}
.section-works-detail .works-wrap-slide .works-gallery {
display: flex;
flex-wrap: wrap;
}
.section-works-detail .works-wrap-slide .works-gallery .col {
transition: 0.26s ease;
cursor: pointer;
position: relative;
display: block;
}
.section-works-detail .block-equipment .item {
border: 1px solid #fff;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.section-works-detail .block-equipment .thumbnail {
position: relative;
}
.section-works-detail .block-equipment .thumbnail img {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
}
.section-works-detail .block-equipment .know-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
}
.section-works-detail .block-other {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
@media print, (min-width: 768px) {
.section-works-detail {
padding-top: 70px;
}
.section-works-detail.mediasearch {
padding-top: 20px;
}
.section-works-detail .detail-title {
font-size: 30px;
font-weight: 700;
line-height: 1;
padding-bottom: 20px;
border-bottom: 4px solid #0b68b7;
display: flex;
align-items: center;
}
.section-works-detail .detail-title span {
font-size: 16px;
border: 1px solid #000;
margin-left: 20px;
padding: 8px 10px 6px;
}
.section-works-detail .rich-title {
margin-bottom: 12px;
}
.section-works-detail .company-text {
margin-bottom: 32px;
font-feature-settings: 'palt';
}
.section-works-detail .descriptive-text {
font-weight: 700;
margin-top: 80px;
padding-bottom: 40px;
border-bottom: 1px dashed #bbb;
}
.section-works-detail .descriptive-text .desc-title {
font-size: 18px;
}
.section-works-detail .descriptive-text .desc-text {
font-size: 28px;
margin-top: 12px;
}
.section-works-detail .works-outline {
margin-top: 40px;
}
.section-works-detail .works-outline h3 {
font-size: 15px;
color: #fff;
background: #000;
display: inline-block;
line-height: 1;
padding: 12px 40px;
letter-spacing: 0.075em;
}
.section-works-detail .works-outline p {
font-size: 15px;
line-height: 2;
margin-top: 20px;
font-weight: 700;
}
.section-works-detail .main-title {
margin-bottom: 40px;
}
.works-wrap-slide {
margin-top: 50px;
}
.works-wrap-slide .works-slide {
margin-bottom: 20px;
padding: 0 30px;
}
.works-wrap-slide .works-slide .slick-arrow {
width: 30px;
height: 52px;
margin-top: -26px;
}
.works-wrap-slide .works-slide .slick-prev {
left: 0;
}
.works-wrap-slide .works-slide .slick-next {
right: 0;
}
.works-wrap-slide .works-gallery {
margin: 0 -10px;
}
.works-wrap-slide .works-gallery .col {
width: 170px;
height: 98px;
/* padding: 0 10px;*/
position: relative;
margin-right: 16px;
overflow: hidden;
}
.works-wrap-slide .works-gallery .col img {
position: absolute;
top: 0;
left: 0;
}
.block-equipment {
margin-bottom: 96px;
}
.block-equipment .item {
margin-bottom: 15px;
}
.block-equipment .thumbnail {
width: 148px;
height: 105px;
}
.block-equipment .know-text {
padding: 0 10px 0 30px;
width: calc(100% - 148px);
height: 85px;
}
.block-other {
margin-bottom: 60px;
}
.block-other .item {
width: 240px;
margin-right: 40px;
}
.block-other .item:nth-child(4n) {
margin-right: 0;
}
.block-other .img {
margin-bottom: 8px;
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.block-equipment .thumbnail img {
top: 50%;
transform: translateY(-50%);
}
}
@media only screen and (max-width: 767px) {
.section-works-detail {
padding-top: 30px;
padding-bottom: 0;
}
.section-works-detail.mediasearch {
padding-top: 20px;
width: 100%;
}
.section-works-detail .detail-title {
font-size: 24px;
font-weight: 700;
line-height: 1.6;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 4px solid #0b68b7;
}
.section-works-detail .detail-title .sm {
display: block !important;
}
.section-works-detail .detail-title span {
font-size: 12px;
padding: 5px 10px 4px;
border: 1px solid #000;
}
.section-works-detail .works-wrap-slide .works-slide .slick-arrow {
position: absolute;
z-index: 100;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
top: 45%;
}
.section-works-detail .works-wrap-slide .works-slide .slick-prev,
.section-works-detail .works-wrap-slide .works-slide .slick-next {
background-color: #000;
background-size: 10px 15px;
width: 30px;
height: 30px;
}
.section-works-detail .works-wrap-slide p {
font-size: 13px;
color: #000;
background: #fff;
padding: 5px;
position: absolute;
bottom: 0;
width: 100%;
}
.section-works-detail .rich-title {
margin-bottom: 12px;
}
.section-works-detail .company-text {
margin-bottom: 20px;
}
.section-works-detail .table-detail {
margin-bottom: 50px;
}
.section-works-detail .main-title {
margin-bottom: 30px;
}
.section-works-detail .table-detail {
margin-top: 20px;
margin-bottom: 40px;
}
.section-works-detail .table-detail tr {}
.section-works-detail .table-detail tr th,
.section-works-detail .table-detail tr td {
font-size: 14px;
padding: 15px 20px;
}
.section-works-detail .table-detail tr th {
background: #f9f9f9;
width: 30%;
}
.section-works-detail .table-detail tr td {
}
.section-works-detail .descriptive-text {
line-height: 1.4;
font-weight: 700;
margin-top: 25px;
padding-bottom: 20px;
border-bottom: 1px dashed #bbb;
}
.section-works-detail .descriptive-text .desc-title {
font-size: 14px;
font-weight: normal;
margin-bottom: 5px;
}
.section-works-detail .descriptive-text .desc-text {
font-size: 20px;
}
.section-works-detail .works-outline {
margin-top: 20px;
}
.section-works-detail .works-outline h3 {
font-size: 14px;
color: #fff;
background: #000;
display: inline-block;
line-height: 1;
padding: 5px 20px;
letter-spacing: 0.075em;
}
.section-works-detail .works-outline p {
font-size: 15px;
line-height: 1.6;
margin-top: 15px;
}
.works-wrap-slide {
margin-bottom: 0;
}
.works-wrap-slide .works-slide {
margin-bottom: 0;
}
.works-wrap-slide .works-slide .slick-arrow {
width: 15px;
height: 26px;
margin-top: -13px;
}
.works-wrap-slide .works-slide .slick-prev {
left: 0;
}
.works-wrap-slide .works-slide .slick-next {
right: 0;
}
.works-wrap-slide .works-gallery {
margin: 0 -3px;
}
.works-wrap-slide .works-gallery .col {
width: 70px;
height: 45px;
padding: 0;
margin-right: 5px;
margin-bottom: 0;
}
.works-wrap-slide .works-gallery .col img {
display: block;
width: 100%;
height: 100%;
}
.block-equipment {
margin-bottom: 46px;
}
.block-equipment .item {
margin-bottom: 15px;
}
.block-equipment .thumbnail {
width: 100px;
height: 75px;
}
.block-equipment .know-text {
width: calc(100% - 100px);
padding: 0 10px 0 20px;
}
.block-other {
margin-bottom: 30px;
}
.block-other .item {
width: 48%;
margin-right: 4%;
margin-bottom: 14px;
}
.block-other .item:nth-child(2n) {
margin-right: 0;
}
.block-other .img {
margin-bottom: 8px;
}
}
/* PAGE NEWS
* ----------------------------------------------- */
h2.ttl {
font-size: 26px;
font-weight: bold;
margin-bottom: 40px;
padding-bottom: 10px;
border-bottom: solid 5px;
}
.list-sidebar a {}
.list-sidebar a.current {
background-color: #000;
color: #fff;
}
.list-news.second li {
border-bottom: 1px dotted #000;
}
.navigation {}
.navigation .nav-links {
display: flex;
justify-content: space-between;
font-size: 15px;
font-weight: 700;
}
.navigation .nav-links .nav-previous {
text-align: left;
}
.navigation .nav-links .nav-next {
text-align: right;
}
.pagination {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
margin-top: -20px;
}
.pagination .page-arrows,
.pagination .page-numbers {
text-align: center;
display: block;
font-size: 15px;
transition: all 0.26s ease;
padding: 0 8px;
border-left: 1px solid #000;
}
.pagination .page-arrows.prev {
border-left: none;
}
.pagination .page-arrows:hover,
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
color: #044191;
}
.section-info {
margin-top: 80px;
margin-bottom: 160px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.section-info .list-title {
margin-bottom: 40px;
}
.sidebar {
width: 240px;
margin-bottom: 100px;
}
.sidebar-ttl {
background: #f9f8f8;
border-top: solid 5px #000;
padding: 20px;
margin-top: 42px;
}
.sidebar-ttl.newsdetail {
margin-top: 0;
}
.sidebar .sidebar-title {
font-size: 16px;
font-weight: bold;
line-height: 1;
}
.sidebar .sidebar-ttl p.subttl {
font-size: 12px;
font-weight: bold;
line-height: 1;
margin-top: 13px;
letter-spacing: 0.06em;
}
.list-sidebar {
font-size: 14px;
font-weight: bold;
}
.list-sidebar ul {
margin-top: 30px;
}
.list-sidebar.tag ul {
margin: 25px 0 0 17px;
display: flex;
flex-wrap: wrap;
}
.list-sidebar.tag ul a {
margin: 0 10px 5px 0;
color: #777;
text-decoration: underline;
}
.list-sidebar.tag ul a:hover {
color: #044191;
transition: 0.3s;
}
.list-sidebar ul li {}
.list-sidebar ul li a {
text-decoration: underline;
transition: all .3s ease-in-out;
padding-left: 20px;
margin-bottom: 25px;
line-height: 1;
display: block;
}
.list-sidebar.tag ul li a:link,
.list-sidebar.tag ul li a:visited,
.list-sidebar.tag ul li a:active {
color: #999;
}
.list-sidebar.tag ul li a:link:hover {
color: #000;
transition: 0.5s;
}
.list-sidebar a:hover {
text-decoration: none;
}
.news-list {
justify-content: space-between;
}
.block-main {
width: 890px;
}
.block-main.search {
width: 100%;
}
.block-main.second {
margin-bottom: 20px;
}
.list-news.second {
margin-bottom: 40px;
}
.list-news.second a {
padding: 30px 0;
display: flex;
justify-content: space-between;
}
.list-news.second a figure {
width: 270px;
height: 177px;
border-radius: 0 !important;
border: none !important;
}
.list-news.second.trivia a figure {
width: 270px;
height: 177px;
}
.list-news.second a figure img {
display: block;
width: 270px;
height: 180px;
border: solid 1px #ddd;
object-fit: cover;
object-position: 50% 0%;
font-family: 'object-fit: cover;';
}
.list-news.second.trivia a figure img {
display: block;
width: 270px;
height: auto;
border-radius: 5px;
border: none !important;
}
.list-news.second a .archive-post-meta {
/* width: calc(100% - 238px);*/
width: 570px;
position: relative;
}
.list-news.second a .archive-post-meta .date::after {
position: absolute;
content: '';
width: 17px;
height: 5px;
background-image: url(../img/common/icn_arrow_news.png);
background-size: contain;
right: 0;
bottom: 0;
}
.list-news.second.trivia a .archive-post-meta ul {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 10px;
}
.list-news.second.trivia a .archive-post-meta ul li.date {
font-size: 15px;
font-weight: bold;
color: #000;
line-height: 1;
margin-right: 20px;
}
.list-news.second.trivia a .archive-post-meta ul li.cat {
font-size: 12px;
font-weight: 400;
background: #000;
color: #fff;
text-align: center;
display: block;
line-height: 1;
min-width: 100px;
padding: 6px 0;
}
.list-news.second a .archive-post-meta .date {
color: #888;
font-size: 13px;
font-weight: bold;
line-height: 1;
margin-bottom: 15px;
}
.list-news.second a .archive-post-meta .text {
font-size: 15px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 15px;
}
.list-news.second a .archive-post-meta .text-cnt {
color: #666;
}
.list-news.second.trivia a .archive-post-meta .text {
font-size: 18px;
margin-top: 15px;
}
@media only screen and (max-width: 767px) {
.list-news.second a .archive-post-meta .date {
padding-bottom: 10px;
}
.sidebar {
-webkit-order: 1;
order: 1;
width: 100%;
margin: 40px auto 100px;
}
.section-info {
margin-top: 30px;
margin-bottom: 60px;
}
.news-list {
justify-content: space-between;
}
.block-main {
-webkit-order: 0;
order: 0;
width: 100%;
}
.list-news.second {
margin-bottom: 20px;
}
.list-news.second li {
padding-bottom: 10px; /* お知らせ一覧 */
}
.list-news.second li a {
display: flex;
justify-content: flex-start;
padding-bottom: 20px;
/* padding: 30px 0;*/
}
.list-news.second li a figure {
width: 140px;
height: auto;
border-radius: 5px;
border: solid 1px #ddd;
margin-right: 20px;
}
.list-news.second li a figure img {
width: 100%;
height: 90px;
display: block;
}
.list-news.second li a .archive-post-meta {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
width: calc(100% - 150px);
}
.list-news.second.trivia a .archive-post-meta ul li.date {
line-height: 1;
font-size: 13px;
margin-right: 10px;
}
.list-news.second.trivia a .archive-post-meta ul li.cat {
min-width: 80px;
}
.list-news.second li a .archive-post-meta .text {
font-size: 14px;
line-height: 1.4;
}
.list-news.second a .archive-post-meta .text-cnt {
font-size: 14px;
font-weight: normal;
}
.list-news.second.trivia li a .archive-post-meta .text {
margin-top: 5px;
font-size: 15px;
}
.list-sidebar {
font-size: 14px;
font-weight: bold;
}
.list-sidebar ul {
margin-top: 20px;
}
.list-sidebar ul li {}
.list-sidebar ul li a {
margin-bottom: 20px;
}
.navigation {}
.navigation .nav-links {
font-size: 13px;
font-weight: 700;
}
.navigation .nav-links .nav-previous {}
.navigation .nav-links .nav-next {}
.pagination {
margin-bottom: 35px;
}
.pagination .page-arrows,
.pagination .page-numbers {
font-size: 12px;
margin-left: 5px;
padding: 10px 6px 8px 12px;
height: 30px;
}
.pagination .page-arrows {
padding-top: 6px;
}
.pagination .page-numbers {
padding-top: 8px;
}
.list-news.second a figure img {
width: 598px;
height: 60vw;
}
}
/* PAGE NEWS DETAIL
* ----------------------------------------------- */
.section-news-detail .list-news.second {
padding-top: 10px;
border-top: 4px solid #0b68b7 !important;
border-bottom: 1px dashed #bbb !important;
}
.section-news-detail .list-news.second .date {
color: #777;
font-weight: bold;
}
.article strong, .article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
font-weight: bold;
}
.article ol {
list-style: decimal;
}
.article ul {
list-style: disc;
}
.article i,
.article em {
font-style: italic;
}
.article .arrow {
font-size: 10px;
display: inline-block;
vertical-align: middle;
}
.article-blog-detail {
*zoom: 1;
}
.article-blog-detail:after {
content: "";
display: table;
clear: both;
}
@media print, (min-width: 768px) {
.article {
margin-bottom: 60px;
font-size: 15px;
line-height: 2;
font-family: source-han-sans-japanese, sans-serif;
font-weight: 400;
font-style: normal;
}
.article p {
margin-bottom: 30px;
}
.article h1 {
font-size: 1.28em;
margin-bottom: 1em;
}
.article h1 + h2 {
margin-top: 0;
}
.article h2 {
font-weight: bold;
font-size: 18px;
margin: 46px 0 10px;
}
.article h3 {
font-weight: bold;
font-size: 16px;
margin-bottom: 6px;
}
.article blockquote {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
margin-bottom: 22px;
}
.article blockquote img {
width: 182px;
}
.article blockquote p {
padding-left: 30px;
margin-top: -8px;
}
.article ul,
.article ol {
margin-bottom: 1.5em;
padding-left: 40px;
}
.article-blog-detail {
margin-bottom: 72px;
}
.article-blog-detail p {
margin-bottom: 22px;
}
.single-sns {}
.single-sns ul {
display: flex;
justify-content: flex-start;
margin-bottom: 30px;
}
.single-sns ul li {}
.section-news-detail {
margin-bottom: 145px;
}
.section-news-detail .list-news.second {
font-family: source-han-sans-japanese, sans-serif;
font-weight: 700;
font-style: normal;
padding: 30px 0;
}
.section-news-detail .list-news.second .article-title {
font-size: 24px;
margin-top: 10px;
}
.section-news-detail .list-news.second .date {
color: #0b68b7;
line-height: 1;
}
.section-news-detail .list-news.second .type {
width: 100px;
}
.list-pager {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: space-between;
padding-top: 20px;
border-top: 1px dashed #bbb;
font-weight: bold;
}
.list-pager li {
width: 33.33%;
}
.list-pager a {
display: inline-block;
font-size: 15px;
font-weight: 700;
}
.list-pager .list {
text-align: center;
}
.list-pager .next {
text-align: left;
}
.list-pager .prev {
text-align: right;
}
}
@media only screen and (max-width: 767px) {
.article {
margin-bottom: 30px;
font-size: 14px;
line-height: 2.15;
}
.article .news-txt,
.article .blog-txt {
font-size: 14px;
}
.article p {
margin-bottom: 15px;
}
.article img {
width: 100%;
}
.article h1 {
font-size: 1.4em;
margin-bottom: 1em;
}
.article h1 + h2 {
margin-top: 0;
}
.article h2 {
font-weight: bold;
font-size: 16px;
margin: 30px 0 10px;
}
.article h3 {
font-weight: bold;
font-size: 14px;
margin-bottom: 5px;
}
.article blockquote {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
margin-bottom: 22px;
}
.article blockquote img {
width: 130px;
}
.article blockquote p {
padding-left: 15px;
}
.article ul,
.article ol {
margin-bottom: 1.5em;
padding-left: 15px;
}
.single-sns {}
.single-sns ul {
display: flex;
justify-content: flex-start;
margin-bottom: 30px;
}
.single-sns ul li {}
.section-news-detail {
margin-bottom: 60px;
}
.section-news-detail .list-news.second {
padding-top: 20px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: -6px;
border-bottom-width: 2px;
}
.section-news-detail .list-news.second .article-title {
width: 100%;
font-size: 18px;
font-weight: bold;
padding: 8px 0 10px;
}
.list-pager {
text-align: center;
border-top: 1px dashed #000;
margin-bottom: 40px;
display: flex;
justify-content: space-between;
}
.list-pager li {
display: block;
width: 33%;
}
.list-pager li.next {
text-align: left;
}
.list-pager li.list {
text-align: center;
}
.list-pager li.prev {
text-align: right;
}
.list-pager a {
display: block;
border-bottom: none !important;
font-size: 12px !important;
padding-bottom: 12px;
padding-top: 16px;
}
}
@media only screen and (max-width: 374px) {
.article blockquote img {
width: 90px;
}
}
/* PAGE BLOG
* ----------------------------------------------- */
.list-blog a {
border-bottom: 1px dashed #000;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.list-blog .date {
font-weight: bold;
color: #e46b00;
}
.show {
font-weight: bold;
color: #e46b00;
border-bottom: 1px solid #e46b00;
}
@media print, (min-width: 768px) {
.show {
font-size: 16px;
}
.section-info.detail {
margin-bottom: 130px;
}
.section-heading.blog {
background-image: url(../img/blog/img_banner.jpg);
}
.list-blog {
margin-top: -40px;
margin-bottom: 30px;
}
.list-blog a {
padding: 30px 0;
}
.list-blog .img {
width: 180px;
}
.list-blog .blog-detail {
width: 600px;
padding-left: 30px;
margin-top: -5px;
}
.list-blog .date {
font-size: 16px;
margin-bottom: 20px;
}
.list-blog .case-title {
margin-bottom: 12px;
}
}
@media only screen and (max-width: 767px) {
.show {
font-size: 14px;
}
.section-heading.blog {
background-image: url(../img/blog/sp/img_banner.jpg);
}
.list-blog {
margin-top: -40px;
margin-bottom: 30px;
}
.list-blog a {
padding: 15px 0;
}
.list-blog .img {
width: 116px;
flex: 0 0 116px;
}
.list-blog .blog-detail {
width: calc(100% - 116px);
padding-left: 20px;
}
.list-blog .date {
font-size: 14px;
margin-bottom: 5px;
}
.list-blog .case-title {
margin-bottom: 5px;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.list-blog .know-text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 2;
}
.list-blog .know-text .show {
display: none;
}
}
@media only screen and (max-width: 374px) {
.list-blog .img {
width: 90px;
flex: 0 0 90px;
}
}
/* PAGE BLOG DETAIL
* ----------------------------------------------- */
.section-blog-detail {
margin-bottom: 170px;
}
/* PAGE RECRUIT
* ----------------------------------------------- */
@media print, (min-width: 768px) {
.section-heading.recruit {
background-image: url(../img/recruit/img_banner.jpg);
}
.section-recruit {
margin-top: 46px;
}
.section-recruit .recruit-title {
margin-bottom: 30px;
}
.section-recruit .table-base {
margin-top: -20px;
margin-bottom: 190px;
}
.section-recruit .table-base th {
width: 230px;
}
}
@media only screen and (max-width: 767px) {
.section-heading.recruit {
background-image: url(../img/recruit/sp/img_banner.jpg);
}
.section-recruit {
margin-top: 20px;
}
.section-recruit .recruit-title {
margin-bottom: 15px;
}
.section-recruit .table-base {
margin-bottom: 60px;
}
.section-recruit .table-base th {
width: 80px;
}
}
/* PAGE PRIVACY
* ----------------------------------------------- */
@media print, (min-width: 768px) {
.section-heading.privacy {
background-image: url(../img/privacy/img_banner.jpg);
}
.section-heading.privacy .wrapper {
height: 200px;
}
.section-privacy {
margin-top: 60px;
margin-bottom: 120px;
}
.section-privacy .recruit-title {
margin: 40px 0 22px;
}
.section-privacy .company-text {
margin-bottom: 32px;
}
.section-privacy .create-text {
margin-top: 92px;
}
}
@media only screen and (max-width: 767px) {
.section-heading.privacy {
background-image: url(../img/privacy/sp/img_banner.jpg);
}
.section-privacy {
margin-top: 40px;
margin-bottom: 60px;
}
.section-privacy .recruit-title {
margin: 25px 0 15px;
}
.section-privacy .company-text {
margin-bottom: 10px;
}
.section-privacy .create-text {
margin-top: 40px;
}
}
/* PAGE CONTACT
* ----------------------------------------------- */
form textarea:focus,
form input:focus,
form select:focus {
outline: none;
}
form select::-ms-expand {
display: none;
}
form input,
form textarea,
form select {
display: inline-block;
vertical-align: middle;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* background: #fff !important;*/
}
form ::-webkit-input-placeholder {
color: #ccc;
}
form :-moz-placeholder {
color: #ccc;
opacity: 1;
}
form ::-moz-placeholder {
color: #ccc;
opacity: 1;
}
form :-ms-input-placeholder {
color: #ccc;
}
form :placeholder-shown {
color: #ccc;
}
.section-contact {
background-color: #eee;
}
.section-contact .contact-form {
background-color: #eee !important;
}
.section-contact .wrap-contact {
font-size: 20px;
font-weight: bold;
border-bottom: 4px solid #000 !important;
font-feature-settings: 'palt';
letter-spacing: 0.09em;
}
.section-contact .box-form {
background: #fff;
padding: 60px 100px;
}
.section-contact .box-caution {
margin-bottom: 20px;
}
.section-contact .box-caution span {
font-weight: bold;
color: #d70000;
}
.section-contact .form-text {
font-weight: bold;
color: #333;
}
.section-contact .mwform-text,
.section-contact .mwform-textarea {
display: block;
border: 1px solid #bbb;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
width: 100%;
}
.section-contact .mw-wrap {
width: 100%;
display: inline-flex;
flex-wrap: wrap;
}
.section-contact .mw-wrap.btn-submit {
display: block;
}
.section-contact input[type="checkbox"] {
display: none;
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
font-weight: bold;
}
.section-contact .mwform-checkbox-field.vertical-item {
display: block;
}
.section-contact input[type="checkbox"] + span {
position: relative;
display: inline-block;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
line-height: 1.5625;
color: #333;
}
.section-contact input[type="checkbox"] + span:after {
position: absolute;
content: "";
left: 0;
top: 0;
background: url(../img/contact/icn_check.png) 0 0 no-repeat;
background-position: 0 -21px;
}
.section-contact input[type="checkbox"]:checked + span:after {
background-position: 0 0;
}
.section-contact .wrap-checkbox label {
display: block;
margin-right: 30px;
}
.section-contact .wrap-checkbox .wpcf7-list-item {
display: block;
margin-left: 0;
}
@media only screen and (max-width: 767px) {
.section-contact .box-form {
padding: 40px 30px;
}
.section-contact .wrap-checkbox .wpcf7-list-item {
width: 100%;
}
}
/* ラジオボタン */
.section-contact .mwform-radio-field.vertical-item {
display: block;
}
.section-contact .wrap-radio .wpcf7-list-item input[type="radio"] {
padding: 0;
position: absolute;
z-index: -1;
opacity: 0;
vertical-align: middle;
cursor: pointer;
font-weight: bold;
line-height: 1.5625;
}
.section-contact .wrap-radio .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label:after {
filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
opacity: 1;
}
.section-contact .wrap-radio .wpcf7-list-item {
position: relative;
display: inline-flex;
margin: 0 50px 12px 0;
}
.section-contact .wrap-radio .wpcf7-list-item .wpcf7-list-item-label {
position: relative;
padding-left: 23px;
line-height: 1.2;
}
.section-contact .wrap-radio .wpcf7-list-item .wpcf7-list-item-label:before,.section-contact .wrap-radio .wpcf7-list-item .wpcf7-list-item-label:after {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 0.04em;
left: 0;
}
.section-contact .wrap-radio .wpcf7-list-item .wpcf7-list-item-label:before {
pointer-events: none;
z-index: 1;
border: #666 solid 1px;
}
.section-contact .wrap-radio .wpcf7-list-item .wpcf7-list-item-label:after {
display: block;
background-color: #444;
border: 5px solid #fff;
-moz-transition: opacity 0.15s ease-in-out;
-o-transition: opacity 0.15s ease-in-out;
-webkit-transition: opacity 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
}
@media only screen and (max-width: 767px) {
.section-contact .wrap-radio .wpcf7-list-item {
padding: 10px 50px 0 0;
}
}
/* ドロップダウン */
.section-contact .wrap-select {
position: relative;
display: block;
width: 100%;
height: 50px;
font-size: 16px;
line-height: normal;
letter-spacing: 0.025em;
border: 1px solid #bbb;
border-radius: 5px;
padding: 10px 30px;
outline: none;
-webkit-appearance: none;
box-shadow: none;
margin-top: 20px;
}
/* Select dropdown */
.f-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.f-select::-ms-expand {
display: none;
}
.f-select,
.sl-datepicker {
background: url(../img/contact/ico_dropdown.png) no-repeat right center;
}
@media only screen and (max-width: 767px) {
.section-contact .wrap-select {
font-size: 14px;
padding: 10px 15px;
margin-top: 10px;
}
}
.section-contact .btn-submit .mwform-button {
display: block;
background-color: #333 !important;
color: #fff !important;
font-weight: 700;
font-size: 18px !important;
text-align: center;
cursor: pointer;
letter-spacing: 0.075em;
}
.section-contact .mark {
padding-left: 4px;
}
.section-contact.section-thanks {
background: #fff !important;
}
@media print, (min-width: 768px) {
.section-contact {
padding-top: 40px;
padding-bottom: 0 !important;
}
.section-contact .contact-form {
width: 1024px;
margin: 0 auto;
}
.section-contact .contact-title {
margin-bottom: 18px;
}
.section-contact .wrap-contact {
padding-top: 20px !important;
padding-bottom: 15px !important;
margin-bottom: 50px !important;
}
.section-contact .form-text {
font-size: 18px;
margin-bottom: 10px;
}
.section-contact .form-text.line {
border-bottom: solid 1px #bbb;
padding-bottom: 10px;
}
.section-contact .input-type {
margin-bottom: 24px;
width: 100%;
}
.section-contact .mwform-text {
height: auto !important;
line-height: unset !important;
font-size: 15px !important;
padding: 10px !important;
background: #fff !important;
}
.section-contact input[type="checkbox"] + span {
font-size: 15px !important;
padding: 0 0 0 25px !important;
}
.section-contact input[type="checkbox"] + span:after {
width: 20px !important;
height: 20px !important;
}
.section-contact .wrap-checkbox {
padding: 16px 0 !important;
margin-bottom: 30px;
}
.section-contact .wrap-checkbox label {
margin-top: 15px;
}
.section-contact input[type="radio"] + span {
font-size: 15px !important;
padding: 0 0 0 25px !important;
}
.section-contact input[type="radio"] + span:after {
width: 20px !important;
height: 20px !important;
}
.section-contact .wrap-radio {
margin-bottom: 30px;
font-weight: bold;
}
.section-contact .wrap-radio label {
margin-top: 15px;
}
.section-contact .mwform-textarea {
height: 190px;
padding: 18px;
background: #fff !important;
}
.section-contact .input-name {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.section-contact .input-name .mw-wrap {
width: 244px;
}
.section-contact .input-name .mw-wrap + .mw-wrap {
margin-left: 20px;
}
.section-contact .input-tel {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.section-contact .input-tel .space {
display: inline-block;
vertical-align: middle;
padding: 12px !important;
margin-top: 20px !important;
}
.section-contact .input-tel .mw-wrap {
width: 210px;
}
.section-contact .product-text {
margin-bottom: 10px;
}
.section-contact .recaptcha {
display: flex;
justify-content: center;
}
.section-contact .accept {
margin-top: 40px;
text-align: center;
}
.section-contact .accept.txt {
margin-top: 20px;
}
.section-contact .accept a {
text-decoration: underline;
color: #d70000;
}
.section-contact .accept a:hover {
text-decoration: none;
}
.section-contact .btn-submit .mwform-button {
margin: 20px auto !important;
width: 380px !important;
font-size: 16px !important;
padding: 24px 5px 22px;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
span.wpcf7-list-item {
margin-left: 0 !important;
}
}
@media only screen and (max-width: 767px) {
.section-contact {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.section-contact .wrap-contact {
border-bottom-width: 2px;
}
.section-contact .contact-form {
padding: 0 !important;
}
.section-contact .contact-title {
margin-bottom: 10px;
}
.section-contact .wrap-contact {
padding-bottom: 15px;
margin-bottom: 24px;
}
.section-contact .form-text {
font-size: 15px;
margin-bottom: 6px;
}
.section-contact .input-type {
margin-bottom: 18px;
}
.section-contact .input-tel {
margin-left: -5px;
margin-right: -5px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.section-contact .input-tel .mw-wrap {
width: 26%;
padding: 0 5px;
}
.section-contact .input-tel .space {
width: 11%;
padding: 0 5px;
}
.section-contact .mwform-text {
height: 36px;
line-height: 36px;
font-size: 14px;
padding: 0 6px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff !important;
}
.section-contact input[type="checkbox"] + span {
font-size: 14px;
padding: 0 0 0 35px;
}
.section-contact input[type="checkbox"] + span:after {
width: 20px;
height: 20px;
background-size: 20px auto;
background-position: 0 -21px;
}
.section-contact .wrap-checkbox {
padding: 15px 0 15px;
margin-bottom: 14px;
}
.section-contact .wrap-checkbox label {
margin-top: 5px;
}
.section-contact .mwform-textarea {
height: 120px;
padding: 15px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
.section-contact .input-name .mw-wrap {
width: 100%;
}
.section-contact .input-name .mw-wrap + .mw-wrap {
margin-top: 8px;
}
.section-contact .input-tel .space {
display: block;
text-align: center;
font-weight: bold;
font-size: 20px;
}
.section-contact .input-tel .mw-wrap {
width: 100%;
}
.section-contact .product-text {
margin-bottom: 10px;
}
.section-contact .accept {
margin-top: 40px;
text-align: center;
}
.section-contact .accept a {
text-decoration: underline;
color: #d70000;
}
.section-contact .accept a:hover {
text-decoration: none;
}
.section-contact .btn-submit .mwform-button {
margin: 20px auto 0 !important;
width: 100% !important;
font-size: 16px !important;
padding: 20px 10px !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
}
span.wpcf7-list-item {
margin: 0 !important;
}
}
/* PAGE CONTACT THANKS
* ----------------------------------------------- */
.section-contact-heading {
text-align: center;
margin-top: 60px;
}
.section-contact-heading h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 30px;
}
.section-contact-heading p {
line-height: 1.6;
}
.section-contact-heading .telBox {
display: inline-block;
font-weight: bold;
text-align: center;
border: solid 1px #000;
padding: 20px;
margin: 20px 0;
width: 500px;
}
.section-contact-heading .telBox .tel-number {
font-size: 22px;
}
.section-contact-heading .telBox .tel-txt {
font-size: 13px;
}
.contact-txt {
font-size: 15px;
line-height: 2;
text-align: center;
margin-bottom: 40px;
}
.contact-txt .caution {
background: #fdf402;
font-weight: bold;
width: 680px;
padding: 25px;
margin: 10px auto;
font-size: 18px;
}
.contact-txt .dl-txt {
font-weight: bold;
font-size: 20px;
line-height: 1.5;
}
.thanks-txt {
font-size: 16px;
}
@media only screen and (max-width: 767px) {
.section-contact-heading {
margin-top: 40px;
}
.section-contact-heading h2 {
font-size: 20px;
margin-bottom: 15px;
}
.section-contact-heading p {
font-size: 14px;
line-height: 1.8;
}
.section-contact-heading .telBox {
width: 90%;
}
.contact-txt {
margin-bottom: 20px;
}
.contact-txt .caution {
width: 100%;
padding: 20px;
font-size: 18px;
line-height: 1.4;
}
.contact-txt .dl-txt {
margin-top: 20px;
}
}
@media print, (min-width: 768px) {
.section-thanks {
color: #333;
text-align: center;
}
.section-thanks .thank-title {
font-weight: bold;
text-align: center;
font-size: 24px !important;
margin-bottom: 30px;
}
.section-thanks .thank-text {
margin-bottom: 82px;
font-size: 15px;
line-height: 2.4;
font-weight: 700;
}
.section-thanks .contact-form {
padding-top: 85px;
}
}
@media only screen and (max-width: 767px) {
.section-thanks {
color: #333;
text-align: center;
}
.section-thanks .thank-title {
font-weight: bold;
text-align: center;
font-size: 18px;
margin-bottom: 20px;
}
.section-thanks .thank-text {
margin-bottom: 20px;
}
.section-thanks .contact-form {
padding-top: 40px;
}
}
/* ----------------------------------------------- *
* IKEGAMI追記：20210118-
* ----------------------------------------------- */
/* ----------------------------------------------- *
* Margin / Padding
* ----------------------------------------------- */
.mgT5 {
margin-top: 5px;
}
.mgT10 {
margin-top: 10px;
}
.mgT20 {
margin-top: 20px;
}
.mgT25 {
margin-top: 25px;
}
.mgT30 {
margin-top: 30px;
}
.mgT40 {
margin-top: 40px;
}
.mgT50 {
margin-top: 50px;
}
.mgT60 {
margin-top: 60px;
}
.mgT70 {
margin-top: 70px;
}
.mgT80 {
margin-top: 80px;
}
.mgT90 {
margin-top: 90px;
}
.mgT100 {
margin-top: 100px;
}
.mgT120 {
margin-top: 120px;
}
.mgT130 {
margin-top: 130px;
}
.mgB10 {
margin-bottom: 10px;
}
.mgB20 {
margin-bottom: 20px;
}
.mgB25 {
margin-bottom: 25px;
}
.mgB30 {
margin-bottom: 30px;
}
.mgB40 {
margin-bottom: 40px;
}
.mgB50 {
margin-bottom: 50px;
}
.mgB60 {
margin-bottom: 60px;
}
.mgB70 {
margin-bottom: 70px;
}
.mgB80 {
margin-bottom: 80px;
}
.mgB90 {
margin-bottom: 90px;
}
.mgB100 {
margin-bottom: 100px;
}
.pdT10 {
padding-top: 10px;
}
.pdT20 {
padding-top: 20px;
}
.pdT25 {
padding-top: 25px;
}
.pdT30 {
padding-top: 30px;
}
.pdT40 {
padding-top: 40px;
}
.pdT50 {
padding-top: 50px;
}
.pdT60 {
padding-top: 60px;
}
.pdT70 {
padding-top: 70px;
}
.pdT80 {
padding-top: 80px;
}
.pdT90 {
padding-top: 90px;
}
.pdT100 {
padding-top: 100px;
}
.pdB10 {
padding-bottom: 10px;
}
.pdB20 {
padding-bottom: 20px;
}
.pdB25 {
padding-bottom: 25px;
}
.pdB30 {
padding-bottom: 30px;
}
.pdB40 {
padding-bottom: 40px;
}
.pdB50 {
padding-bottom: 50px;
}
.pdB60 {
padding-bottom: 60px;
}
.pdB70 {
padding-bottom: 70px;
}
.pdB80 {
padding-bottom: 80px;
}
.pdB90 {
padding-bottom: 90px;
}
.pdB100 {
padding-bottom: 100px;
}
/* ----------------------------------------------- *
* Color
* ----------------------------------------------- */
.ftc-red {
color: #df0000;
font-weight: bold;
}
/* ----------------------------------------------- *
* 光彩 / シャドウ
* ----------------------------------------------- */
.shadow-w {
text-shadow: white 1px 1px 5px, white -1px 1px 5px, white 1px 1px 5px, white -1px 1px 5px, white 1px -1px 5px, white -1px -1px 5px;
}
.shadow-n {
text-shadow: black 1px 1px 5px, black -1px 1px 5px, black 1px 1px 5px, black -1px 1px 5px, black 1px -1px 5px, black -1px -1px 5px;
}
/* ----------------------------------------------- *
* GoogleMap
* ----------------------------------------------- */
.gmap {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}
.gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
/* KEY VISUAL
* ----------------------------------------------- */
.section-page-keyvisual .keyvisual-wrapper.company {
background-image: url("../img/company/img_keyvisual_company.jpg");
}
.section-page-keyvisual .keyvisual-wrapper.services {
background-image: url("../img/services/img_keyvisual_services.jpg");
}
.section-page-keyvisual .keyvisual-wrapper.privacy {
background-image: url("../img/privacy/img_keyvisual_privacy.jpg");
}
.section-page-keyvisual .keyvisual-wrapper.works-ph {
background: url("../img/works/pharmacy/phw-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-dr {
background: url("../img/works/pharmacy/drw-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-or {
background: url("../img/works/pharmacy/orw-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-web {
background: url("../img/works/pharmacy/webw-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-gr {
background: url("../img/works/pharmacy/gra-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.company {
background: url("../img/company/company-main.jpg") center center no-repeat;
background-size: cover;
width: 100%;
height: auto;
padding-top: 24.32%; /* 画像の高さ÷画像の幅×100 */
}
@media only screen and (max-width: 767px) {
.section-page-keyvisual .keyvisual-wrapper.company {
background: url("../img/company/company-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.services {
background: url("../img/services/sp/img_keyvisual_services.jpg");
}
.section-page-keyvisual .keyvisual-wrapper.privacy {
background: url("../img/privacy/sp/img_keyvisual_privacy.jpg");
}
.section-page-keyvisual .keyvisual-wrapper.works-ph {
background: url("../img/works/pharmacy/phw-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-dr {
background: url("../img/works/pharmacy/drw-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-or {
background: url("../img/works/pharmacy/orw-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-web {
background: url("../img/works/pharmacy/webw-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
.section-page-keyvisual .keyvisual-wrapper.works-ph.works-gr {
background: url("../img/works/pharmacy/gra-main-sp.jpg");
background-size: cover;
width: 100%;
height: auto;
padding-top: 59.90%; /* 画像の高さ÷画像の幅×100 */
}
}
/* section PHARMACY
* ----------------------------------------------- */
.section-pharmacy h4 {
font-size: 32px;
font-weight: bold;
border-bottom: solid 5px #000;
padding-bottom: 12px;
margin-bottom: 60px;
letter-spacing: 0;
line-height: 1.2;
}
.section-pharmacy h4.web {
margin-bottom: 40px;
}
.section-pharmacy h4.root {
position: relative;
font-size: 24px;
font-weight: bold;
letter-spacing: 0;
line-height: 1.2;
background: #f3f3f3;
border-bottom: solid 6px #2374ab;
padding: 22px 0 20px 30px;
margin-bottom: 40px;
}
.section-pharmacy .txt {
font-size: 15px;
line-height: 1.8;
}
.section-pharmacy .pharmacy-wrapper {
max-width: 1180px;
margin: auto;
}
.section-pharmacy .pharmacy-wrapper .box {
display: flex;
justify-content: space-between;
margin-bottom: 150px;
}
.section-pharmacy .pharmacy-wrapper .box.left {
flex-direction: row-reverse;
}
.section-pharmacy .pharmacy-wrapper .box .txtBox {
width: 400px;
}
.section-pharmacy .pharmacy-wrapper .box .txtBox .ttl {
font-size: 18px;
color: #0b68b7;
}
.section-pharmacy .pharmacy-wrapper .box .txtBox .ttl span {
font-size: 30px;
}
.section-pharmacy .pharmacy-wrapper .box .txtBox h3 {
font-size: 28px;
line-height: 40px;
padding: 20px 0 40px;
}
.section-pharmacy .pharmacy-wrapper .box .txt {
font-size: 15px;
line-height: 30px;
font-family: source-han-sans-japanese;
}
.section-pharmacy .pharmacy-wrapper .box .imgBox {
width: 656px;
margin-left: 45px;
}
.section-pharmacy .pharmacy-wrapper .box.left .imgBox {
margin-right: 45px;
margin-left: 0;
}
@media only screen and (max-width: 767px) {
.section-pharmacy {
max-width: 100%;
}
.section-pharmacy .pharmacy-wrapper {
max-width: 100%;
margin: 0 40px;
}
.section-pharmacy .pharmacy-wrapper .box {
flex-wrap: wrap;
}
.section-pharmacy .pharmacy-wrapper .box .txt {
width: 100%;
}
.section-pharmacy .pharmacy-wrapper .box .imgBox {
width: 100%;
margin-left: 0;
margin-top: 40px;
}
.section-pharmacy .pharmacy-wrapper .box.left .imgBox {
margin-right: 0;
margin-left: 0;
margin-top: 40px;
}
.section-pharmacy .pharmacy-wrapper .box .txtBox {
width: 100%;
}
}
/* section ORIGINALMEDIA
* ----------------------------------------------- */
.section-originalmedia {
background: #ecf2f5;
margin-bottom: 100px;
padding: 10px 0 60px;
}
.section-originalmedia.allmedia {
background: #fff;
margin: 20px 0 -20px 0;
}
.section-originalmedia h4 {
font-size: 24px;
font-weight: bold;
border-bottom: solid 5px #000;
padding-bottom: 12px;
margin: 80px 0 50px;
letter-spacing: 0;
}
.section-originalmedia .wrapper {
max-width: 1180px;
margin: auto;
}
.section-originalmedia .wrapper .menuBox {
background: #fff;
display: flex;
margin-bottom: 50px;
max-width: 1180px;
height: 250px;
position: relative;
}
.section-originalmedia .wrapper .menuBox.allmedia {
box-shadow: 0 0 15px #ccc;
}
.section-originalmedia .wrapper .menuBox::after {
content: url(../img/common/arrow_bl_right.png);
position: absolute;
top: 46%;
right: 60px;
}
.section-originalmedia .wrapper .menuBox:hover:after {
content: url(../img/common/arrow_wt_right.png);
}
.section-originalmedia .wrapper .menuBox:hover {
background: #014c8c;
color: #fff;
transition: 0.5s;
}
.section-originalmedia .wrapper .menuBox:hover .txtBox .subttl {
color: #fff;
}
.section-originalmedia .wrapper .menuBox .imgBox img {
width: 350px;
}
.section-originalmedia .wrapper .menuBox .txtBox {
padding: 60px;
width: 780px;
}
.section-originalmedia .wrapper .menuBox .txtBox .ttl {
font-size: 24px;
line-height: 1.4;
font-weight: bold;
}
.section-originalmedia .wrapper .menuBox .txtBox .subttl {
color: #044191;
font-size: 15px;
margin: 15px 0 20px 0;
}
@media only screen and (max-width: 767px) {
.section-originalmedia.allmedia {
margin: 20px 0 0 0;
}
.section-originalmedia.allmedia .wrapper {
padding: 0 !important;
}
.section-originalmedia .wrapper {
max-width: 100%;
}
.section-originalmedia .wrapper .menuBox {
flex-wrap: wrap;
margin-bottom: 50px;
max-width: 100%;
height: auto;
}
.section-originalmedia .wrapper .menuBox::after {
content: url(../img/common/arrow_bl_right.png);
position: absolute;
top: 60%;
right: 30px;
}
.section-originalmedia .wrapper .menuBox .imgBox img {
width: 100%;
}
.section-originalmedia .wrapper .menuBox .txtBox {
padding: 30px;
width: 100%;
}
.section-originalmedia .wrapper .menuBox .txtBox .ttl {
width: 80%;
}
.section-originalmedia .wrapper .menuBox .txtBox .subttl {
margin: 15px 0 20px 0;
}
}
.about-pharmacy .aboutBox {
position: relative;
}
.about-pharmacy .aboutBox .txtBox {
background: #333;
color: #fff;
padding: 60px;
width: 1000px;
margin-top: 120px;
}
.about-pharmacy .aboutBox .txtBox.grey {
background: #f4f8f9;
color: #000;
}
.about-pharmacy .aboutBox .imgBox {
position: absolute;
top: -70px;
right: 0;
width: 625px;
}
.about-pharmacy .aboutBox .txtBox .ttl {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
}
.about-pharmacy .aboutBox .txtBox .ttl span {
font-size: 15px;
display: inline-block;
padding-left: 20px;
}
.about-pharmacy .aboutBox .txtBox .ttl span.opt {
border: solid 1px #fff;
padding: 5px;
font-size: 15px;
text-align: center;
display: block;
width: 85px;
margin-bottom: 15px;
}
.about-pharmacy .aboutBox .txtBox.grey .ttl span.opt {
border: solid 1px #000;
}
.about-pharmacy .aboutBox .txtBox .ttl-web {
font-size: 24px;
font-weight: bold;
margin: 15px 0 30px;
width: 440px;
}
.about-pharmacy .aboutBox .txtBox .txt {
font-size: 15px;
line-height: 2.2;
width: 440px;
}
.about-pharmacy .aboutBox .txtBox .about-note {
font-size: 12px;
line-height: 1.6;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .aboutBox {
position: static;
}
.about-pharmacy .aboutBox .txtBox {
padding: 40px 30px;
width: 100%;
margin-top: 0;
}
.about-pharmacy .aboutBox .imgBox {
position: static;
width: 100%;
}
.about-pharmacy .aboutBox .txtBox .ttl {
font-size: 24px;
margin-bottom: 20px;
}
.about-pharmacy .aboutBox .txtBox .ttl-web {
font-size: 22px;
width: 100%;
}
.about-pharmacy .aboutBox .txtBox .txt {
font-size: 14px;
line-height: 2;
width: 100%;
}
}
/* ↓↓2022年12月追記↓↓ */
.about-pharmacy .menu-upBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 100%;
}
.about-pharmacy .menu-upBox::after {
content:"";
display: block;
width:31%;
}
.about-pharmacy .menu-upBox .upbox {
width: 31%;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, .1);
margin-bottom: 40px;
transition: 0.4s;
}
.about-pharmacy .menu-upBox .upbox:hover {
opacity: 0.6;
transition: 0.4s;
}
.about-pharmacy .menu-upBox .upbox .ttl {
font-size: 16px;
font-weight: bold;
margin: 20px 20px 15px;
width: 70%;
}
.about-pharmacy .menu-upBox .upbox .ttl.nospan {
margin: 25px 20px 15px;
height: 40px;
}
.about-pharmacy .menu-upBox .upbox ul {
padding-bottom: 25px;
position: relative;
}
.about-pharmacy .menu-upBox .upbox .ttl:after {
content: "";
position: absolute;
top: 65%;
right: 25px;
display: inline-block;
width: 1.2em;
height: 1.2em;
background: url(../img/common/icn_arrow_news.png) no-repeat;
background-size: contain;
}
.about-pharmacy .menu-upBox .upbox .ttl.nospan:after {
top: 63%;
}
.about-pharmacy .menu-upBox .upbox .ttl span {
display: inline-block;
font-size: 13px;
border: solid 1px #333;
padding: 3px 10px;
margin-top: 7px;
}
.about-pharmacy .menu-upBox .upbox .ttl span.middle {
background: #333;
color: #fff;
}
.about-pharmacy .menu-upBox .upbox .txt {
font-size: 14px;
margin: 0 20px;
height: 80px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .menu-upBox .upbox {
width: 100%;
}
}
/* ↑↑2022年12月追記↑↑ */
.about-pharmacy .mediaBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.about-pharmacy .mediaBox::before {
content: '';
display: block;
width: 23%;
order: 1;
}
.about-pharmacy .mediaBox::after {
content: '';
display: block;
width: 23%;
}
.about-pharmacy .mediaBox ul {
background: #1c6aa8;
color: #fff;
text-align: center;
font-weight: bold;
width: 23%;
padding: 25px;
}
.about-pharmacy .mediaBox li.num {
color: #b5cee2;
font-size: 36px;
margin-top: -48px;
}
.about-pharmacy .mediaBox li.ttl {
font-size: 15px;
padding: 5px 0 7px;
}
.about-pharmacy .mediaBox li.detail {
font-size: 20px;
line-height: 1.2;
}
.about-pharmacy .mediaBox li.detail.fts13 {
font-size: 13px;
margin-top: 5px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .mediaBox {
flex-wrap: wrap;
}
.about-pharmacy .mediaBox ul {
width: 100%;
padding: 25px;
margin-bottom: 40px;
}
.about-pharmacy .mediaBox li.num {
margin-top: -48px;
}
.about-pharmacy .mediaBox li.ttl {
font-size: 13px;
padding-bottom: 5px;
}
.about-pharmacy .mediaBox li.detail {
font-size: 20px;
}
.about-pharmacy .mediaBox li.detail.fts13 {
font-size: 13px;
}
}
.about-pharmacy .col2Box {
display: flex;
justify-content: space-between;
}
.about-pharmacy .col2Box.block {
display: block;
}
.about-pharmacy .col2Box.block ul {
margin-bottom: 40px;
}
.about-pharmacy .col2Box.block ul:last-child {
margin-bottom: 0;
}
.about-pharmacy figure .col2Box blockquote {
display: contents;
justify-content: space-between;
}
.about-pharmacy .col2Box img,
.about-pharmacy figure .col2Box blockquote img {
width: 570px;
}
.about-pharmacy .col2Box .bargraph img,
.about-pharmacy figure .col2Box blockquote .bargraph img {
width: 900px;
}
.about-pharmacy .col2Box .ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.about-pharmacy figure .col2Box blockquote .ttl {
font-size: 18px;
}
.about-pharmacy figure .col2Box blockquote .ttl span {
font-size: 15px;
}
.about-pharmacy .col2Box .ttl:before {
content: '▸';
padding-right: 5px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .col2Box ul {
margin-bottom: 40px;
}
.about-pharmacy .col2Box ul:last-child {
margin-bottom: 0;
}
.about-pharmacy .col2Box img,
.about-pharmacy figure .col2Box blockquote img {
width: 100%;
}
.about-pharmacy .col2Box,
.about-pharmacy figure .col2Box blockquote {
flex-wrap: wrap;
}
}
.about-pharmacy .col4Box {
display: flex;
flex-wrap: wrap;
}
.about-pharmacy .col4Box ul {
margin-bottom: 20px;
}
.about-pharmacy .col4Box li.ttl {
color: #0a5794;
font-size: 16px;
font-weight: bold;
text-align: center;
border: solid 1px #1c6aa8;
padding: 30px;
margin-bottom: 20px;
margin-left: 33px;
width: 270px;
}
.about-pharmacy .col4Box li.ttl:first-child,
.about-pharmacy .col4Box li.ttl:nth-child(5),
.about-pharmacy .col4Box li.ttl:nth-child(9),
.about-pharmacy .col4Box li.ttl:nth-child(13) {
margin-left: 0;
}
.about-pharmacy .col4Box li.clt {
background: #1c6aa8;
color: #fff;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 30px;
margin-bottom: 20px;
margin-left: 33px;
width: 270px;
}
.about-pharmacy .col4Box li.clt:first-child,
.about-pharmacy .col4Box li.clt:nth-child(5),
.about-pharmacy .col4Box li.clt:nth-child(9),
.about-pharmacy .col4Box li.clt:nth-child(13) {
margin-left: 0;
}
.about-pharmacy .col4Box .serBox {
width: 270px;
margin-left: 33px;
}
.about-pharmacy .col4Box .serBox:first-child,
.about-pharmacy .col4Box .serBox:nth-child(5),
.about-pharmacy .col4Box .serBox:nth-child(9),
.about-pharmacy .col4Box .serBox:nth-child(13) {
margin-left: 0;
}
.about-pharmacy .col4Box .serBox .ser-ttl {
font-size: 15px;
font-weight: bold;
text-align: center;
background: #f3f3f3;
padding: 25px 0 20px;
width: 270px;
}
.about-pharmacy .col4Box .serBox img {
width: 270px;
}
.about-pharmacy .col4Box .serBox .ser-ttl::after {
content: url(../img/common/arrow-ser-gr.png);
display: block;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .col4Box {
flex-wrap: wrap;
justify-content: space-between;
}
.about-pharmacy .col4Box li.ttl {
font-size: 14px;
margin-left: 0;
width: 47%;
}
.about-pharmacy .col4Box li.clt {
font-size: 14px;
margin-left: 0;
width: 47%;
}
.about-pharmacy .col4Box .serBox {
margin-left: 0;
width: 100%;
}
.about-pharmacy .col4Box .serBox .ser-ttl {
width: 100%;
}
.about-pharmacy .col4Box .serBox img {
width: 100%;
}
}
.about-pharmacy .col3Box {
display: flex;
flex-wrap: wrap;
}
.about-pharmacy .col3Box ul {
width: 360px;
margin-left: 50px;
}
.about-pharmacy .col3Box ul img {
width: 360px;
margin-bottom: 30px;
}
.about-pharmacy .col3Box ul img.undertxt {
margin-bottom: 20px;
}
.about-pharmacy .col3Box .ttl {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.about-pharmacy .col3Box ul:first-child,
.about-pharmacy .col3Box ul:nth-child(4),
.about-pharmacy .col3Box ul:nth-child(7),
.about-pharmacy .col3Box ul:nth-child(10) {
margin-left: 0;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .col3Box ul {
width: 100%;
margin-left: 0;
margin-bottom: 50px;
}
.about-pharmacy .col3Box ul:last-child {
margin-bottom: 0;
}
.about-pharmacy .col3Box ul img {
width: 100%;
}
}
.about-pharmacy .col3Box .ttl:before {
content: '▸';
padding-right: 5px;
}
.about-pharmacy .col3Box .txt {
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
}
.about-pharmacy .col3Box .txt.undertxt {
font-size: 16px;
font-weight: bold;
line-height: 1.6;
}
.about-pharmacy .col3Box .aboutBox {
font-size: 15px;
line-height: 1.6;
text-align: center;
border: solid 2px #044191;
border-radius: 10px;
}
.about-pharmacy .col3Box .aboutBox .about-ttl {
color: #fff;
background: #044191;
border-radius: 6px 6px 0 0;
padding: 30px;
font-size: 20px;
font-weight: bold;
line-height: 1.2;
padding: 20px;
}
.about-pharmacy .col3Box .aboutBox .about-ttl span.num {
font-size: 32px;
vertical-align: sub;
margin-right: 5px;
}
.about-pharmacy .col3Box .aboutBox .img {
width: 160px;
margin: 0 auto;
}
.about-pharmacy .col3Box .aboutBox .txt {
font-size: 16px;
line-height: 1.8;
padding: 0 30px 20px;
}
.about-pharmacy p.onestop {
width: 697px;
margin: 0 auto;
}
@media only screen and (max-width: 767px) {
.about-pharmacy p.onestop {
width: 100%;
margin: 0 auto;
}
}
.about-pharmacy .col3Box .flowBox {
background: #fff;
border-top: solid 6px #044191;
padding: 40px;
}
.about-pharmacy .col3Box .flowBox .ttlBox {
display: flex;
line-height: 50px;
}
.about-pharmacy .col3Box .flowBox .ttlBox .num {
color:#044191;
font-size: 50px;
margin-right: 20px;
letter-spacing: 0.05em;
}
.about-pharmacy .col3Box .flowBox .ttlBox .flow-ttl {
font-size: 18px;
font-weight: bold;
line-height: 1.4;
width: 208px;
}
.about-pharmacy .col3Box .flowBox img {
margin: 30px 0;
}
.databox.wid360 {
width: 360px;
padding: 0 40px;
}
.databox.wid360 th.ttl {
width: 45%;
padding: 10px 0 10px 20px;
font-size: 14px;
}
.databox.wid360 th.txt {
width: 55%;
padding: 10px 0 10px 20px;
font-size: 14px;
}
@media only screen and (max-width: 767px) {
.databox.wid360 {
width: 100%;
}
}
/* PAGE INDEX
* ----------------------------------------------- */
.upindex {
margin-top: 80px;
}
.upindex .wrapper {
max-width: 1180px;
margin: auto;
}
.upindex .wrapper ul {
display: flex;
margin-bottom: 40px;
font-family: source-han-sans-japanese;
font-weight: bold;
}
.upindex .wrapper ul li {
margin-right: 40px;
}
.upindex .wrapper ul li::after {
content: url(../img/common/icn_arrow_gr.png);
padding: 10px;
}
.upindex .wrapper ul a:hover {
color: #0b68b7;
transition: color 0.3s;
}
@media only screen and (max-width: 767px) {
.upindex .wrapper {
max-width: 100%;
margin: 0 20px;
}
.upindex .wrapper ul {
flex-wrap: wrap;
line-height: 30px;
}
.upindex .wrapper ul li {
}
}
/* PAGE COMPANY
* ----------------------------------------------- */
/* table ---------------------- */
.split2 {
font-size: 14px;
line-height: 24px;
width: 1180px;
}
.split2 td {
border: solid 1px #bbb;
border-collapse: collapse;
border-width: 1px 0;
padding: 12px 20px;
}
.split2 td.ttl {
background: #f7f7f7;
width: 240px;
font-weight: bold;
}
.split2 td.ttl60 {
background: #f7f7f7;
width: 60%;
font-weight: bold;
}
.split2 td.txt {
width: 780px;
}
@media screen and (max-width: 768px) {
.split2 {
width: 100%;
}
}
.split5 {
font-size: 14px;
line-height: 24px;
width: 1180px;
font-family: source-han-sans-japanese;
}
.split5 th,td:last-of-type {
border-width: 1px 0;
}
.split5 th {
background: #f7f7f7;
width: 200px;
font-weight: bold;
}
.split5 td.ttl {
font-weight: bold;
width: 225px;
}
@media screen and (max-width: 768px) {
.split5 {
width: 100%;
}
.split5 th {
width: 100%;
font-weight: bold;
border-width: 2px 0;
background: #fff;
text-align: center;
}
.split5 td {
width: 100%;
}
.split5 th.ttl {
}
.split5 td.subttl {
background: #f7f7f7;
width: 30%;
font-weight: bold;
}
.split5 td {
border-width: 1px 0 1px 0;
border-collapse: collapse;
}
}
/* PAGE COMPANY:map ---------------------- */
.acMapup {
position: relative;
padding-bottom: 36%;
padding-top: 30px;
margin-top: 20px;
height: 0;
overflow: hidden;
}
.acMapup iframe, .acMapup object, .acMap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (max-width: 768px) {
.acMapup {
padding-bottom: 70%;
margin-top: 40px;
}
}
/* PAGE SERVICES
* ----------------------------------------------- */
.section-services {
margin-top: 80px;
overflow-x: hidden;
}
.section-services .services-wrapper {
max-width: 1180px;
margin: auto;
}
.section-services .services-wrapper h3 {
font-size: 30px;
border-bottom: solid 4px #0b68b7;
padding-bottom: 20px;
margin-bottom: 40px;
}
.section-services .services-wrapper .servicesBox {
border-bottom: dotted 1px #000;
padding-bottom: 100px;
padding-top: 200px;
margin-top: -140px;
}
.section-services .services-wrapper .box.servicesBox_inner {
padding-top: 200px;
margin-top: -200px;
}
/* PAGE SERVICES:about ---------------------- */
.section-services .services-wrapper .about h4 {
color: #fff;
font-size: 26px;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.section-services .services-wrapper .about .subtitle {
color: #fff;
font-size: 18px;
margin: 0 auto;
text-align: center;
}
.section-services .services-wrapper .about {
margin: 0 -200% 100px -200%;
padding: 50px 200%;
background: linear-gradient(90deg,#333 0%,#333 60%,#fff 50%,#fff 100%);
text-align: center;
max-height: 500px;
}
.section-services .services-wrapper .about .aboutBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fff;
width: 880px;
margin: 0 auto;
text-align: center;
padding: 20px;
margin-top: 40px;
box-shadow: 0 0 10px #bbb;
}
.section-services .services-wrapper .about .aboutBox ul {
width: 265px;
height: 210px;
padding: 30px;
font-size: 18px;
line-height: 20px;
position: relative;
}
.section-services .services-wrapper .about .aboutBox ul::before {
content: "";
top: 0;
left: 0;
border-bottom: 1.4em solid transparent;
border-left: 1.4em solid #0b68b7;
position: absolute;
z-index: 100;
}
.section-services .services-wrapper .about .aboutBox .upper {
border-bottom: solid 1px #bbb;
border-right: solid 1px #bbb;
}
.section-services .services-wrapper .about .aboutBox .upper.sec {
margin-top: 15px;
}
.section-services .services-wrapper .about .aboutBox ul .img {
margin-bottom: 15px;
}
.section-services .services-wrapper .about .aboutBox ul .txt span.small {
font-size: 12px;
}
.section-services .services-wrapper .about .aboutBox ul .txt span.arrow {
font-size: 24px;
color: #0b68b7;
font-weight: bold;
}
.section-services .services-wrapper .box {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
.section-services .services-wrapper .box.left {
flex-direction: row-reverse;
}
.section-services .services-wrapper .box .txtBox.max {
width: 100%;
margin-bottom: 40px;
}
.section-services .services-wrapper .box .txtBox.line {
border-bottom: dotted 1px #000;
padding-bottom: 30px;
}
.section-services .services-wrapper .box .txt {
font-size: 15px;
line-height: 36px;
}
.section-services .services-wrapper .services .box .txtBox {
width: 470px;
}
.section-services .services-wrapper .services .box .imgBox {
width: 580px;
margin-left: 50px;
}
.section-services .services-wrapper .services .box.left .imgBox {
margin-left: 0;
margin-right: 50px;
}
.section-services .services-wrapper .services .box .imgBox img {
width: 580px;
}
@media only screen and (max-width: 767px) {
.section-services {
margin-top: 40px;
}
.section-services .services-wrapper {
max-width: 100%;
margin: 0 40px;
}
.section-services .services-wrapper .box {
flex-wrap: wrap;
}
.section-services .services-wrapper .services .box .txtBox {
width: 100%;
}
.section-services .services-wrapper .services .box .imgBox {
width: 100%;
margin-left: 0;
}
.section-services .services-wrapper .services .box.left .imgBox {
margin-right: 0;
}
.section-services .services-wrapper .services .box .imgBox img {
width: 100%;
padding-top: 30px;
}
.section-services .services-wrapper .services .box.left .imgBox img {
width: 100%;
padding-top: 30px;
}
/* PAGE SERVICES:about ---------------------- */
.section-services .services-wrapper .about {
background: linear-gradient(90deg,#333 0%,#333 60%,#333 50%,#333 100%);
max-height: 600px;
}
.section-services .services-wrapper .about .aboutBox {
width: 100%;
padding: 15px;
}
.section-services .services-wrapper .about .aboutBox ul {
width: 50%;
height: auto;
padding: 20px 0;
font-size: 16px;
line-height: 20px;
}
.section-services .services-wrapper .about .aboutBox .upper {
border-bottom: solid 1px #bbb;
border-right: solid 1px #bbb;
}
.section-services .services-wrapper .about .aboutBox ul .img {
width: 60%;
margin: 0 auto;
padding-bottom: 15px;
text-align: center;
}
.section-services .services-wrapper .about .aboutBox .upper.sec {
margin-top: 0;
}
}
/* PAGE SERVICES:services ---------------------- */
.section-services .services-wrapper .services {
margin-top: 230px;
}
.section-services .services-wrapper .services h4 {
font-size: 36px;
padding-bottom: 10px;
}
.section-services .services-wrapper .services .subtitle {
color: #0b68b7;
font-size: 18px;
padding-bottom: 40px;
position: relative;
display: inline-block;
margin-bottom: 2em;
}
.section-services .services-wrapper .services .subtitle::before {
content: '';
position: absolute;
left: 40%;
bottom: 0;
display: inline-block;
width: 50px;
height: 1px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #000;
}
.section-services .services-wrapper .works {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 60px;
padding-bottom: 40px;
}
.section-services .services-wrapper .works .item {
width: 333px;
}
.section-services .services-wrapper .works .item img {
width: 333px;
margin-bottom: 20px;
}
.section-services .services-wrapper .works .item .place {
font-size: 14px;
padding-bottom: 10px;
}
.section-services .services-wrapper .works .item .ttl {
position: relative;
font-size: 18px;
}
.section-services .services-wrapper .works .item .ttl.link:after {
content: '⇀';
position: absolute;
top: -8px;
right: 0;
font-weight: bold;
font-size: 1.5em;
text-align: right;
}
.section-services .services-wrapper .works .item a:hover{
color: #0b68b7;
transition: all 0.35s ease;
}
.section-services .services-wrapper .works .item .txt {
font-family: source-han-sans-japanese, sans-serif;
font-size: 14px;
line-height: 30px;
padding-top: 15px;
}
@media only screen and (max-width: 767px) {
.section-services .services-wrapper .works .item {
width: 100%;
margin-bottom: 40px;
}
.section-services .services-wrapper .works .item:last-of-type {
margin-bottom: 0;
}
.section-services .services-wrapper .works .item img {
width: 100%;
}
}
/* BUTTON ---------------------- */
.btn-more {
display: block;
font-family: source-han-sans-japanese, sans-serif;
font-weight: bold;
text-align: center;
padding: 20px 60px;
background: #fff url(../img/common/icn_arrow_01.png) right 20px center no-repeat;
background-size: 15px auto;
width: 320px;
border: 3px solid #000;
letter-spacing: 0.2em;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.btn-more.right {
float: right;
}
.btn-more:hover {
background: #000 url(../img/common/icn_arrow_08.png) right 20px center no-repeat;
background-size: 15px auto;
color: #fff;
}
.btn-area {
display: flex;
flex-wrap: wrap;
}
.btn-area p {
margin-right: 30px;
}
@media only screen and (max-width: 767px) {
.btn-more:hover {
background-color: #000;
background-image: url(../img/common/icn_arrow_08.png);
color: #fff;
}
.btn-more {
width: 100%;
background-position: right 32px center;
font-size: 14px;
padding: 18px 15px;
}
.btn-area {
width: 100%;
}
.btn-area p {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}
}
/* PAGE SERVICES:fee ---------------------- */
.section-services .services-wrapper .fee {
padding-top: 30px;
font-size: 15px;
line-height: 30px;
}
.section-services .services-wrapper .fee h4 {
font-size: 30px;
border-bottom: dotted 1px #000;
padding-bottom: 20px;
margin-bottom: 30px;
}
.section-services .services-wrapper .fee .topic {
background: #fcf4be;
padding: 25px 30px;
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.section-services .services-wrapper .fee {
padding-top: 60px;
}
.section-services .services-wrapper .fee .topic {
padding: 25px 20px;
}
}
/* PAGE SERVICES:flow ---------------------- */
.step-wrap {
counter-reset: count;
margin: 2em 0;
position: relative;
}
.step-content {
padding: 0 0 0 2.5em;
margin: 0;
position: relative;
}
.step-content::before {
content: "";
display: block;
width: 100px;
height: 100px;
background: #000;
position: absolute;
top: 0;
left: 0;
}
.step-content::after {
content: "";
display: block;
height: calc(100% - 100px);
border-left: solid 4px #000;
position: absolute;
top: 100px;
left: 49px;
}
.step-content:last-of-type::after {
border: none;
}
.step-label {
color: #fff;
font-size: 18px;
position: absolute;
top: 36px;
left: 25px;
}
.step-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-left: 100px;
padding-bottom: 30px;
}
.step-box .txtBox {
width: 600px;
}
.step-box .txtBox .step-body {
font-family: source-han-sans-japanese, sans-serif;
font-size: 14px;
line-height: 28px;
}
.step-box .imgBox {
width: 320px;
}
.step-title {
font-size: 24px;
color: #0b68b7;
}
.step-body {
margin-top: 1em;
padding: 0 0 1em;
}
.step-wrap > :last-of-type::after {
display: none;
}
@media only screen and (max-width: 767px) {
.step-content::before {
width: 70px;
height: 70px;
top: 0;
left: 0;
}
.step-content::after {
height: calc(100% - 0px);
position: absolute;
top: 70px;
left: 35px;
}
.step-content:last-of-type::after {
height: calc(100% - 70px);
}
.step-label {
font-size: 16px;
top: 24px;
left: 13px;
}
.step-box {
margin-left: 60px;
padding-bottom: 50px;
}
}
/* PAGE PRIVACY
* ----------------------------------------------- */
.section-privacy {
margin-top: 80px;
}
.section-privacy .privacy-wrapper {
max-width: 1180px;
margin: auto;
}
.section-privacy .privacy-wrapper .box {
margin-bottom: 60px;
}
.section-privacy .privacy-wrapper .box .txtBox {
width: 100%;
margin-bottom: 40px;
}
.section-privacy .privacy-wrapper h3 {
font-size: 30px;
border-bottom: solid 4px #0b68b7;
padding-bottom: 20px;
margin-bottom: 40px;
}
.section-privacy .privacy-wrapper h4 {
font-weight: bold;
background-color: #eee;
font-size: 18px;
padding: 22px 20px 18px;
margin: 50px 0 25px;
}
.section-privacy .privacy-wrapper h4:before {
content: '▸';
padding-right: 5px;
}
.section-privacy .privacy-wrapper .box .txtBox .ttl {
font-size: 18px;
color: #0b68b7;
}
.section-privacy .privacy-wrapper .box .txt {
font-size: 15px;
line-height: 30px;
font-family: source-han-sans-japanese;
}
.section-privacy .privacy-wrapper p.txt {
font-size: 15px;
line-height: 30px;
font-family: source-han-sans-japanese;
}
.section-privacy .privacy-wrapper .mark {
color: #0b68b7;
font-weight: bold;
}
.section-privacy .privacy-wrapper .privacyBox {
font-size: 15px;
line-height: 30px;
font-family: source-han-sans-japanese;
margin-bottom: 80px;
}
.section-privacy .privacy-wrapper .privacyBox .ttl {
font-size: 15px;
line-height: 30px;
font-weight: bold;
margin: 40px 0 15px;
border-bottom: dotted 1px #000;
padding-bottom: 10px;
}
.section-privacy .privacy-wrapper .privacyBox .create-txt {
margin: 40px 0 20px;
}
@media only screen and (max-width: 767px) {
.section-privacy .privacy-wrapper {
max-width: 100%;
margin: 0 40px;
}
.section-privacy .privacy-wrapper .box {
flex-wrap: wrap;
}
.section-privacy .privacy-wrapper .box .txt {
width: 100%;
}
.section-privacy .privacy-wrapper .privacyBox {
margin-bottom: 120px;
}
}
/* section COMPANY
* ----------------------------------------------- */
/* section company MENU
* ----------------------------------------------- */
.section-company-menu {
background: #ebf1f5;
padding: 30px 0;
}
.section-company-menu .key-txt-box {
width: 1180px;
margin: 0 auto;
}
.section-company-menu .key-txt-box ul {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
color: #000;
font-size: 13px;
line-height: 2;
}
.section-company-menu .key-txt-box li {
margin-left: 40px;
}
.section-company-menu .key-txt-box li a {
font-weight: bold;
}
.section-company-menu .key-txt-box ul li::after {
content: url(../img/common/icn_arrow_menu_bl.png);
padding-left: 10px;
}
@media only screen and (max-width: 767px) {
.section-company-menu {
margin: 60px 30px;
padding: 0;
}
.section-company-menu .key-txt-box {
width: 100%;
padding: 10px 30px;
position: static;
font-size: 11px;
}
.section-company-menu .key-txt-box ul {
width: 100%;
line-height: 2.4;
margin-top: 20px;
}
.section-company-menu .key-txt-box li {
margin-right: 0;
margin-left: 40px;
margin-bottom: 20px;
}
.section-company-menu .key-txt-box ul li {
flex-basis: auto;
}
}
.company-wrap,.member-wrap {
margin: 90px 0 100px;
}
.company-wrap h3,
.member-wrap h3 {
font-size: 56px;
margin-bottom: 30px;
}
.company-wrap h4,
.member-wrap h4 {
font-size: 24px;
font-weight: bold;
line-height: 2;
}
.company-wrap h4.vision {
line-height: 2;
margin-bottom: 50px;
}
.company-wrap h4 span.cl_gr {
color: #11b99f;
}
.company-wrap h4 span.cl_pl {
color: #8049dc;
}
.company-wrap h4 span.cl_lb {
color: #1091db;
}
.company-wrap h5,.member-wrap h5 {
font-size: 14px;
line-height: 1.8;
font-weight: bold;
}
.company-wrap .txt {
font-size: 15px;
line-height: 1.8;
}
.company-wrap .txt.vision {
width: 330px;
}
.company-vision {
background: url("../img/company/bg_vision.png") no-repeat center center/cover; background-size: cover;
width: 100%;
height: auto;
padding: 20px 0;
margin-top: 20px;
}
.company-mission {
background: url("../img/company/bg_mission.png") no-repeat center center/cover;
background-size: cover;
width: 100%;
height: auto;
padding: 20px 0;
margin-top: 20px;
}
.company-mission {
color: #fff;
}
@media only screen and (max-width: 767px) {
.company-wrap.wr-vision {
margin: 0 0 110%;
}
.company-vision {
background: url("../img/company/bg_vision_sp.png") no-repeat bottom;
background-size: 100% auto;
}
.company-mission {
background: url("../img/company/bg_mission_sp.png") no-repeat center center/cover;
background-size: cover;
width: 100%;
}
}
.company-wrap .missionBox {
display: flex;
justify-content: space-between;
}
.company-wrap .missionBox ul {
width: 260px;
}
.company-wrap .missionBox ul li.ttl {
font-size: 13px;
text-align: center;
line-height: 1.4;
margin-bottom: 20px;
}
.company-wrap .missionBox ul li.ttl span {
font-size: 46px;
display: block;
}
.company-wrap .missionBox ul li.txt {
border-top: solid 4px #fff;
margin-bottom: 20px;
padding-top: 20px;
height: 100px;
}
.company-wrap .missionBox ul li.img {
padding-top: 60px;
}
.company-wrap .missionBox ul.btm {
margin-top: 30px;
}
.company-wrap .gmap {
height: 0;
overflow: hidden;
padding-bottom: 48%;
position: relative;
}
.company-wrap .gmap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.company-wrap .gmap iframe,
.company-wrap .gmap object,
.company-wrap .gmap embed {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
@media only screen and (max-width: 767px) {
.company-wrap .missionBox {
flex-wrap: wrap;
}
.company-wrap .missionBox ul {
width: 100%;
margin-top: 50px;
}
.company-wrap .missionBox ul li.txt {
height: 80px;
}
.company-wrap .missionBox ul li.img {
padding-top: 40px;
}
.company-wrap .missionBox ul li.ttl {
font-size: 20px;
line-height: 1.2;
}
.company-wrap .missionBox ul li.ttl span {
font-size: 56px;
}
.company-wrap .missionBox ul.btm {
margin-top: 50px;
}
.company-wrap .gmap {
height: 360px;
}
}
.section-company-message {
background: #e7ebed;
padding: 1px 0;
height: 540px;
margin-bottom: 280px;
}
.section-company-message .messageBox {
background: #fff;
padding: 70px 78px;
box-shadow: 0 0 15px #ccc;
}
.section-company-message .messageBox .txt-post {
font-size: 12px;
font-weight: bold;
line-height: 1.6;
padding: 50px 0 20px;
}
.section-company-message .messageBox .txt-name {
font-size: 18px;
font-weight: bold;
}
.section-company .favorite-wrap {
margin-top: 100px;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.section-company .favorite-wrap img {
margin: 30px 0 60px;
}
.section-company-client {
background: #e7ebed;
padding: 1px 0;
}
.section-company-client .messageBox {
background: #fff;
padding: 70px 78px;
box-shadow: 0 0 15px #ccc;
}
.section-company-client .messageBox.client {
display: flex;
justify-content: center;
}
.section-company-client .messageBox.client p {
margin-right: 100px;
}
.section-company-client .messageBox.client p:last-child {
margin-right: 0;
}
@media only screen and (max-width: 767px) {
.section-company-message {
height: 1000px;
margin-bottom: 280px;
}
.section-company-message .messageBox {
padding: 40px 30px;
}
.section-company-message .messageBox .txt-post {
font-size: 12px;
}
.section-company-message .messageBox .txt-name {
font-size: 18px;
}
.section-company .favorite-wrap {
margin-top: 100px;
font-size: 12px;
font-weight: bold;
text-align: center;
}
.section-company-client .messageBox {
padding: 40px 30px;
}
.section-company-client .messageBox.client {
flex-wrap: wrap;
}
.section-company-client .messageBox.client p {
margin-right: 0;
}
}
.section-company-member {
background: #e7ebed;
padding: 1px 0;
margin-top: 180px;
}
.section-company-member .member-wrap {
display: flex;
justify-content: space-between;
}
.section-company-member .member-wrap .txtBox {
width: 500px;
}
.section-company-member .member-wrap .txtBox .txt-post {
font-size: 14px;
font-weight: bold;
}
.section-company-member .member-wrap .txtBox .txt-name {
font-size: 24px;
font-weight: bold;
margin: 12px 0 50px;
}
.section-company-member .member-wrap .txtBox .txt {
line-height: 2;
}
.section-company-member .member-wrap .imgBox {
width: 625px;
margin-top: -150px;
}
.section-company-member .member-wrap .imgBox img {
box-shadow: 0 0 15px #ccc;
}
@media only screen and (max-width: 767px) {
.section-company-member .member-wrap {
flex-wrap: wrap;
}
.section-company-member .member-wrap .txtBox {
width: 100%;
}
.section-company-member .member-wrap .imgBox {
width: 100%;
margin-top: 40px;
}
.section-company-member .member-wrap .imgBox.left {
margin-top: 0;
margin-bottom: 40px;
}
}
.norecruit {
background: #084d8e;
color: #fff;
font-size: 18px;
font-weight: bold;
text-align: center;
padding: 20px;
}
.txt.unline {
border-bottom: dotted 1px #bbb;
padding-bottom: 40px;
margin-bottom: 40px;
}
p.ttl-policy {
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
}
.cntr {
text-align: center;
}
.cntr p {
display: inline-block;
}
@media only screen and (max-width: 767px) {
.cntr p {
width: 100%;
}
}
/* MEDIA
* ----------------------------------------------- */
.section-media {
text-align: center;
margin: 80px 0;
}
.section-media .txt {
font-size: 15px;
line-height: 1.8;
}
.section-media.detail {
text-align: left;
margin: 80px 0;
}
.section-media.detail .txt {
font-size: 15px;
line-height: 1.8;
}
.section-media .media-download {
background: #333;
border: solid 3px #000;
margin: 0 auto 150px;
width: 620px;
transition: 0.4s;
}
.section-media .downloadBox {
display: flex;
align-items: center;
width: 100%;
}
.section-media .downloadBox .imgBox {
width: 43%;
}
.section-media .downloadBox .txtBox {
color: #fff;
text-align: left;
letter-spacing: 0.01em;
padding: 0 25px;
width: 57%;
}
.section-media .downloadBox .txtBox .ttl {
font-size: 13px;
font-weight: bold;
margin-bottom: 10px;
}
.section-media .downloadBox .txtBox .ttl-dl {
font-size: 18px;
font-weight: bold;
}
.section-media .downloadBox .txtBox .ttl-dl::after {
content: '→';
padding-left: 10px;
}
.media-type {
display: flex;
flex-wrap: wrap;
border-bottom: dotted 1px #bbb;
padding-bottom: 30px;
margin-top: -15px;
margin-bottom: 50px;
}
.media-type.other {
padding-bottom: 15px;
margin-bottom: 15px;
}
.media-type li {
color: #044191;
font-size: 14px;
font-weight: bold;
border: solid 1px #044191;
border-radius: 5px;
padding: 10px 20px;
margin: 0 10px 10px 0;
}
.media-dlBox {
display: flex;
justify-content: space-between;
padding-bottom: 50px;
}
.media-dlBox .imgBox {
width: 380px;
margin-right: 60px;
}
.media-dlBox .imgBox img {
height: auto;
}
.media-dlBox .txtBox {
width: 740px;
}
.media-dlBox .txtBox .ttl {
font-size: 22px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.media-dlBox {
flex-wrap: wrap;
padding-bottom: 50px;
}
.media-dlBox .imgBox {
width: 100%;
margin-right: 0;
}
.media-dlBox .txtBox {
width: 100%;
margin-top: 50px;
}
.section-media .media-download {
width: 100%;
}
.section-media .downloadBox .txtBox .ttl {
font-size: 12px;
}
.section-media .downloadBox .txtBox .ttl-dl {
font-size: 16px;
}
}
@media only screen and (max-width: 767px) {
.worksBoxtop.media {
flex-wrap: wrap;
width: 100%;
}
.worksBoxtop.media .thumb {
width: 100%;
}
.worksBoxtop.media ul {
width: 100%;
margin-bottom: 40px;
margin-right: 0;
}
.worksBoxtop.media ul li img {
width: 100%;
height: auto;
}
.worksBoxtop.media ul li {
width: 100%;
padding-bottom: 0;
}
.worksBoxtop.media ul li .period {
font-size: 12px;
padding: 0 25px 20px 25px;
}
.worksBoxtop.media ul li .period p {
font-size: 12px;
padding: 5px 12px;
}
.worksBoxtop.media .top-post-meta {
display: block;
}
.worksBoxtop.media .top-post-meta .ttl {
line-height: 2;
height: 100px;
padding: 20px 25px 0 25px;
}
.worksBoxtop.media .top-post-meta .tags::after {
top: 8px;
right: 25px;
width: 1.5em;
height: 1.5em;
}
.worksBoxtop.media .top-post-meta .ttl::after {
top: 50px;
}
.worksBoxtop.media .ico_media {
font-size: 10px;
text-align: center;
border: solid 1px #000;
padding: 2px 5px;
display: block;
max-width: 70px;
}
.worksBoxtop.media .ico_media.nobr {
display: block;
margin-left: 0;
}
}
/* section page ORIGINALMEDIA-OTHER
* ----------------------------------------------- */
.otherMedia {
margin-bottom: 60px;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
padding-bottom: 50px;
border-bottom: dotted 1px #000;
}
.otherMedia .imgBox {
width: 380px;
margin-right: 50px;
}
.otherMedia .imgBox img {
width: 380px;
}
.otherMedia .txtBox {
width: 750px;
}
.otherMedia .txtBox li {
font-size: 15px;
line-height: 1.8;
}
.otherMedia .txtBox li.txt {
margin: 25px 0;
line-height: 1.6;
}
.otherMedia .txtBox .media-ttl {
font-size: 28px;
font-weight: bold;
margin: 0 0 10px 0;
line-height: 1.6;
}
.otherMedia .txtBox .target {
font-size: 16px;
font-weight: bold;
margin-left: 9em;
text-indent: -9em;
line-height: 1.6;
margin-top: 5px;
}
.otherMedia .txtBox .tpc-arrow {
position: relative;
font-size: 12px;
font-weight: bold;
padding: 0.5rem 1rem 0.5rem 1.5rem;
color: #fff;
background: #044191;
margin-right: 30px;
}
.otherMedia .txtBox .tpc-arrow:after {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
position: absolute;
pointer-events: none;
border-left-color: #044191;
border-width: 16px;
margin-top: -16px;
}
.otherMedia .txtBox .menu-ttl {
color: #044191;
font-size: 20px;
font-weight: bold;
border-bottom: solid 4px #044191;
padding-bottom: 4px;
margin-bottom: 35px;
}
.otherMedia .txtBox .remark {
font-size: 13px;
line-height: 1.6;
margin-top: 20px;
}
@media only screen and (max-width: 767px) {
.otherMedia {
margin-bottom: 60px;
flex-wrap: wrap;
}
.otherMedia .imgBox {
width: 100%;
margin-right: 0;
}
.otherMedia .imgBox img {
width: 100%;
}
.otherMedia .txtBox li {
font-size: 15px;
line-height: 1.8;
}
.otherMedia .txtBox .media-ttl {
font-size: 26px;
margin: 20px 0;
line-height: 1.4;
}
.otherMedia .txtBox .target {
font-size: 16px;
}
.otherMedia .txtBox .tpc-arrow {
font-size: 12px;
margin-right: 30px;
}
.otherMedia .txtBox .tpc-arrow:after {
left: 100%;
top: 50%;
border-width: 16px;
margin-top: -16px;
}
}
/* More Button */
.more-link {
color: #333;
font-size: 16px;
font-weight: bold;
}
.more-link::after {
content: url(../img/common/ico_list.png);
padding-left: 10px;
}
@media only screen and (max-width: 767px) {
.more-link {
float: right;
}
}
/* Under Line */
span.uline {
background: linear-gradient(transparent 40%, #fef501 40%);
}
/* NAVBAR WRAPPER
* ----------------------------------------------- */
.navbar-wrapper {
z-index: 10;
}
.navbar-toggler {
display: none;
padding: 5px;
line-height: 0;
}
.navbar-toggler .toggler-btn {
position: relative;
display: inline-block;
width: 20px;
height: 19px;
}
.navbar-toggler .toggler-btn span {
display: block;
width: 100%;
height: 3px;
position: absolute;
left: 0;
background: #000;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar-toggler .toggler-btn span:nth-child(1) {
top: 0;
}
.navbar-toggler .toggler-btn span:nth-child(2) {
opacity: 1;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.navbar-toggler .toggler-btn span:nth-child(3) {
top: 15px;
}
.navbar-toggler .toggler-btn.is-active span {
background-color: #fff;
}
.navbar-toggler .toggler-btn.is-active span:nth-of-type(1) {
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
top: 8px;
}
.navbar-toggler .toggler-btn.is-active span:nth-of-type(2) {
width: 0;
opacity: 0;
}
.navbar-toggler .toggler-btn.is-active span:nth-of-type(3) {
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
top: 8px;
}
.navbar-collapse {
height: auto;
margin: 0;
}
.nav-contact {
display: -webkit-flex;
display: flex;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.nav-contact > * {
margin-left: 38px;
}
.nav-contact .link {
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
-moz-transition: color 0.26s ease;
-o-transition: color 0.26s ease;
-webkit-transition: color 0.26s ease;
transition: color 0.26s ease;
}
.nav-contact .link:hover {
color: #50ad12;
}
.nav-contact .link:before {
content: "▶";
display: inline-block;
color: #8ec31f;
font-size: 0.75em;
line-height: 1;
margin-right: 0.2em;
}
.nav-link {
position: relative;
display: block;
padding-left: 45px;
color: currentColor;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
-moz-transition: color 0.26s ease;
-o-transition: color 0.26s ease;
-webkit-transition: color 0.26s ease;
transition: color 0.26s ease;
}
@media print, (min-width: 768px) {
.nav-link:hover {
color: #8ec31f;
}
}
.nav-dropdown {
display: none;
position: absolute;
z-index: 10;
background: #000;
width: 250px;
/* width: auto;*/
margin-left: 1.5em;
padding: 15px;
opacity: 0.9;
margin-top: 10px;
}
.nav-dropdown .dropdown-item {
padding: 8px 20px;
display: block;
text-align: left;
color: #fff;
}
.nav-dropdown .dropdown-item:hover {
color: #fdfa01;
}
@media print, (min-width: 768px) {
.nav-main {
text-align: center;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-top: 5px;
}
.nav-item {
width: auto;
text-align: right;
position: relative;
}
.nav-item:hover .nav-link {
color: #1974b9;
}
.navbar-collapse {
display: block !important;
}
.navbar-over {
display: none !important;
}
.hamburger-wrapper {
display: none;
}
}
@media only screen and (max-width: 767px) {
.navbar-over {
display: none;
position: fixed;
z-index: 5;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.navbar-toggler {
display: block;
position: relative;
z-index: 999;
}
.navbar-collapse {
display: none;
position: fixed;
z-index: 10;
width: 80%;
height: 100%;
right: 0;
top: 0;
background-color: rgba(142, 195, 31, 0.96);
padding: 50px 20px 20px;
}
.nav-main {
height: 100%;
overflow: auto;
}
.nav-link {
position: relative;
color: #fff;
padding: 7px 0;
font-size: 14px;
font-weight: 700;
}
.nav-dropdown {
display: block !important;
position: static;
padding: 0;
margin: 0;
}
.nav-dropdown .dropdown-item {
font-size: 12px;
font-weight: 400;
padding: 6px 20px;
position: relative;
}
.nav-dropdown .dropdown-item:before {
content: "";
width: 5px;
height: 8px;
position: absolute;
top: 50%;
left: 10px;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background-image: url("../img/common/ico_arrow_white.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
}
/* サイドカラム用バナー
* ----------------------------------------------- */
.sidebar .btnBox {
margin-top: 50px;
width: 100%;
}
.sidebar .btnBox .btn-side {
font-size: 13px;
font-weight: bold;
letter-spacing: 0.02em;
text-align: center;
border: solid 3px #000;
padding: 15px;
width: 100%;
display: inline-block;
}
.sidebar .btnBox .btn-side:hover {
color: #fff;
background: #000;
transition: 0.6s;
}
@media only screen and (max-width: 767px) {
.sidebar .btnBox .btn-side {
font-size: 15px;
padding: 20px;
}
}
.about-pharmacy .rootBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
margin-bottom: 20px;
}
.about-pharmacy .rootBox li {
color: #1c6aa8;
text-align: center;
font-size: 16px;
font-weight: bold;
border: solid 3px #1c6aa8;
margin-bottom: 20px;
padding: 30px;
width: 32%;
}
.about-pharmacy .root-txtBox .ttl {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .rootBox li {
width: 100%;
margin-bottom: 10px;
}
}
/* 202304追記：TOPメニュー追加 */
.service-ttl {
font-size: 46px;
text-align: left;
margin-bottom: 50px;
}
.service-ttl span {
color: #1974b9;
}
.block-original {
flex-wrap: wrap;
max-width: 1180px;
margin: 0 auto 32px;
}
.block-original .original-ttl {
display: inline-block;
background: rgba(0,37,91,0.8);
padding: 20px 30px 25px;
margin-bottom: 30px;
}
.block-original .original-ttl .services-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 0.02em;
color: #fff;
}
.block-original .original-ttl .services-subttl {
font-size: 14px;
color: #faf230;
letter-spacing: 0.05em;
padding-top: 4px;
}
.block-original .originalBox {
position: relative;
width: 24%;
transition: 0.4s;
background: #222;
margin-bottom: 15px;
}
.block-original .originalBox img {
opacity: 1;
transition: 0.4s;
height: auto;
}
.block-original .originalBox img:hover {
opacity: 0.4;
}
.block-original .originalBox .txtBox {
position: absolute;
bottom: 30px;
left: 30px;
}
.block-original .originalBox .txtBox .ttl {
font-size: 18px;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
margin-bottom: 5px;
}
.block-original .originalBox .txtBox .ttl-en {
font-size: 12px;
color: #faf230;
letter-spacing: 0.02em;
}
.block-original .subtitle {
line-height: 1.8;
}
@media only screen and (max-width: 767px) {
.block-original {
max-width: 100%;
}
.block-original .originalBox {
width: 48%;
}
.block-original .originalBox .txtBox {
bottom: 15px;
left: 15px;
}
.block-original .originalBox .txtBox .ttl {
font-size: 15px;
}
.block-original .originalBox .txtBox .ttl-en {
font-size: 8px;
}
}
/* section MediaSearch
* ----------------------------------------------- */
.section-mediasearch {
margin: 60px 0;
}
.section-mediasearch p {
font-size: 15px;
line-height: 1.8;
}
.section-mediasearch h3 {
font-size: 18px;
font-weight: bold;
line-height: 1.6;
margin-bottom: 20px;
}
.section-mediasearch h4 {
position: relative;
font-size: 30px;
font-weight: bold;
border-bottom: solid 5px #000;
padding: 0 0 12px 17px;
margin-bottom: 40px;
letter-spacing: 0;
line-height: 1.2;
}
.section-mediasearch h4::before {
position: absolute;
top: 2px;
left: 0;
content: '';
display: block;
background: transparent;
border-left: solid 7px #2374ab;
height: 30px;
}
.section-mediasearch h5 {
position: relative;
font-size: 24px;
font-weight: bold;
letter-spacing: 0;
line-height: 1.2;
background: #f3f3f3;
padding: 20px 0 20px 50px;
}
.section-mediasearch h5::before {
position: absolute;
top: 21px;
left: 30px;
content: '';
display: block;
background: transparent;
border-left: solid 6px #2374ab;
height: 25px;
}
.section-mediasearch h6 {
font-size: 20px;
font-weight: bold;
line-height: 1.2;
border-bottom: solid 3px #000;
padding-bottom: 15px;
margin-bottom: 30px;
}
.section-mediasearch .media-target {
margin: 60px 0;
}
.section-mediasearch .media-target-menu::before {
content: "";
display: block;
width: 24%;
order: 1;
}
.section-mediasearch .media-target-menu::after {
content: "";
display: block;
width: 24%;
}
.section-mediasearch .media-target-menu {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-mediasearch .media-target-menu .box {
display: block;
font-size: 16px;
font-weight: bold;
line-height: 1.3;
letter-spacing: 0.02em;
border: solid 1px #888888;
border-radius: 8px;
padding: 10px 10px 10px 15px;
width: 24%;
margin-bottom: 15px;
transition: 0.4s;
}
.section-mediasearch .media-target-menu.search .box {
border-radius: 6px;
padding: 10px 10px 10px 15px;
margin-bottom: 15px;
}
.section-mediasearch .media-target-menu.purpose .box {
font-size: 15px;
width: 24%;
}
.section-mediasearch .media-target-menu.purpose.search .box {
font-size: 16px;
}
.section-mediasearch .media-target-menu.purpose ul {
width: 100%;
}
.section-mediasearch .media-target-menu.purpose .ttl {
width: 70%;
margin-right: 20px;
}
.section-mediasearch .media-target-menu.purpose .img {
width: 80px;
}
.section-mediasearch .media-target-menu.purpose.search .img {
width: 60px;
}
@media only screen and (max-width: 767px) {
.section-mediasearch .media-target-menu.purpose .box {
text-align: center;
width: 48%;
padding: 15px 10px;
}
.section-mediasearch .media-target-menu.purpose .ttl {
font-size: 14px;
text-align: center;
width: 100%;
margin-right: 0;
}
.section-mediasearch .media-target-menu.purpose .ttl.sp {
font-size: 13px;
letter-spacing: 0;
}
.section-mediasearch .media-target-menu.purpose .img {
margin: 0 auto;
}
}
.section-mediasearch .media-target-menu ul {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.section-mediasearch .media-target-menu .box:hover {
opacity: 0.8;
transition: 0.4s;
color: #2374ab;
}
.section-mediasearch .media-target-menu li.ttl {
width: 40%;
}
.section-mediasearch .media-target-menu li.img {
width: 58%;
height: auto;
}
.section-mediasearch .media-target-menu img {
width: 100%;
height: auto;
padding-left: 10px;
}
.section-mediasearch .media-target-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 40px 0;
transition: 0.4s;
}
.section-mediasearch .media-target-list::before {
content: '';
display: block;
width: 23%;
order:1;
}
.section-mediasearch .media-target-list::after {
content: '';
display: block;
width: 23%;
}
.section-mediasearch .media-target-list .listBox {
width: 23%;
transition: 0.4s;
padding-bottom: 40px;
/* border-bottom: dotted 1px #bbb;*/
}
.section-mediasearch .media-target-list .listBox:hover {
color: #2374ab;
transition: 0.4s;
}
.section-mediasearch .media-target-list .listBox .imgBox {
height: auto;
margin-bottom: 25px;
}
.section-mediasearch .media-target-list .listBox .imgBox img {
height: auto;
}
.section-mediasearch .media-target-list .listBox .ttl {
font-size: 18px;
font-weight: bold;
letter-spacing: 0.02em;
margin-bottom: 10px;
}
.section-mediasearch .media-target-list .listBox .ttl.high {
height: 50px;
margin-bottom: 10px;
}
.section-mediasearch .media-target-list .listBox .ttl::after {
content: '⇀';
padding-left: 10px;
}
.section-mediasearch .media-target-list .listBox .txt {
font-size: 14px;
line-height: 1.8;
}
.section-mediasearch .media-purpose-list .listBox {
width: 100%;
margin-top: 30px;
}
.section-mediasearch .media-purpose-list .listBox .detailBox {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.section-mediasearch .media-purpose-list .listBox .detailBox .txt {
font-size: 17px;
line-height: 1.8;
width: 60%;
}
.section-mediasearch .media-purpose-list .listBox .detailBox .img {
width: 36%;
}
.section-mediasearch .media-target-age ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-mediasearch .media-target-age li {
width: 24%;
margin-bottom: 16px;
}
.section-mediasearch .media-target-age a.btn-age {
display: block;
border: solid 1px #888;
font-size: 16px;
font-weight: bold;
text-align: center;
padding: 17px 0;
transition: 0.4s;
}
.section-mediasearch .media-target-age a.btn-age:hover {
transition: 0.4s;
background: #12639a;
border: solid 1px #12639a;
color: #fff;
}
@media only screen and (max-width: 767px) {
.section-mediasearch h4 {
font-size: 30px;
}
.section-mediasearch h5 {
font-size: 22px;
padding: 25px 0 25px 37px;
}
.section-mediasearch h5::before {
position: absolute;
top: 26px;
left: 20px;
height: 23px;
}
.section-mediasearch .media-target-menu .box {
width: 48%;
margin-bottom: 10px;
padding: 20px 10px;
}
.section-mediasearch .media-target-menu ul {
flex-wrap: wrap;
}
.section-mediasearch .media-target-menu img {
width: 100%;
}
.section-mediasearch .media-target-menu .ttl {
font-size: 14px;
text-align: left;
margin-bottom: 5px;
width: 100%;
}
.section-mediasearch .media-target-list::after {
width: 47%;
}
.section-mediasearch .media-target-list .listBox {
width: 47%;
}
.section-mediasearch .media-target-list .listBox .imgBox {
width: 100%;
margin-bottom: 20px;
}
.section-mediasearch .media-target-list .listBox .txtBox {
width: 100%;
}
.section-mediasearch .media-target-list .listBox .ttl {
font-size: 17px;
}
.section-mediasearch .media-target-list .listBox .txt {
font-size: 15px;
}
.section-mediasearch .media-purpose-list .listBox .detailBox {
flex-wrap: wrap;
margin-bottom: 50px;
}
.section-mediasearch .media-purpose-list .listBox .detailBox .txt {
width: 100%;
margin-bottom: 20px;
}
.section-mediasearch .media-purpose-list .listBox .detailBox .img {
width: 100%;
}
.section-mediasearch .media-target-age li {
width: 48%;
}
}
.mediasearchBox {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
transition: 0.4s;
width: 100%;
}
.mediasearchBox ul {
width: 48%;
}
.mediasearchBox .txt {
font-size: 16px;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0;
margin-bottom: 15px;
}
.mediasearchBox a:hover {
opacity: 0.8;
transition: 0.4s;
}
@media only screen and (max-width: 767px) {
.mediasearchBox {
flex-wrap: wrap;
}
.mediasearchBox ul {
width: 100%;
}
.mediasearchBox ul:first-child {
margin-bottom: 50px;
}
}
/* MediaSearch btn
* ----------------------------------------------- */
.searchBtn {
position: fixed;
left: 8%;
bottom: 10px;
width: 530px;
z-index: 80;
}
.searchBtn .searchBox {
display: flex;
align-items: center;
}
.searchBtn .searchBox .btnbox {
background: #fff;
border: solid 5px #000;
padding: 15px;
width: 260px;
margin-left: 10px;
transition: 0.4s;
}
.searchBtn .searchBox .btnbox:hover {
background: #fdee02;
transition: 0.4s;
}
.searchBtn .searchBox ul {
display: flex;
justify-content: space-between;
}
.searchBtn .searchBox .btnbox .ttl {
font-size: 23px;
font-weight: 800;
}
.searchBtn .searchBox .btnbox .txt {
font-size: 12px;
font-weight: 600;
line-height: 1.4;
}
@media only screen and (max-width: 767px) {
.searchBtn {
left: 0;
width: 100%;
padding: 0 15% 0 3%;
}
.searchBtn .searchBox {
display: flex;
flex-wrap: wrap;
}
.searchBtn .searchBox .btnbox {
width: 93%;
margin-left: 0;
padding: 10px 15px;
margin-top: 5px;
}
.searchBtn .searchBox .btnbox .ttl {
font-size: 20px;
font-weight: 800;
line-height: 1.6;
}
}
/* Head MediaSearch btn
* ----------------------------------------------- */
.head-search-box {
display: flex;
justify-content: flex-end;
align-items: center;
}
.head-search-box .btn-media {
font-size: 10px;
border: solid 1px #000;
padding: 8px 10px;
margin-right: 10px;
}
/* 202306：追加
* ----------------------------------------------- */
.about-pharmacy .promo-scene {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.about-pharmacy .promo-scene ul {
width: 23%;
margin-bottom: 40px;
}
.about-pharmacy .promo-scene.col0 ul {
margin-bottom: 0;
}
.about-pharmacy .promo-scene.col1::after {
content: '';
display: block;
width: 23%;
}
.about-pharmacy .promo-scene.col2::after {
content: '';
display: block;
width: 48.7%;
}
.about-pharmacy .promo-scene li {
font-size: 15px;
line-height: 1.6;
}
.about-pharmacy .promo-scene li img {
margin-bottom: 15px;
}
@media only screen and (max-width: 767px) {
.about-pharmacy .promo-scene ul {
width: 47%;
}
.about-pharmacy .promo-scene ul:first-child {
margin-bottom: 40px;
}
.about-pharmacy .promo-scene.col1::after {
width: 47%;
}
.about-pharmacy .promo-scene.col2::after {
width: 47%;
}
}
.originalmedia-menu {
width: 30%;
margin-bottom: 50px;
}
.originalmedia-menu .imgBox {
margin-bottom: 20px;
}
.originalmedia-menu .txtBox .ttl {
font-size: 18px;
font-weight: bold;
}
.originalmedia-menu .txtBox .ttl {
font-size: 18px;
font-weight: bold;
}
.originalmedia-menu .txtBox .subttl {
color: #2374ab;
font-size: 13px;
margin: 5px 0 15px;
}
@media only screen and (max-width: 767px) {
.originalmedia-menu {
width: 100%;
margin-bottom: 50px;
}
}
.originalmedia-menu-col {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.originalmedia-menu-col::after {
content: '';
display: block;
width: 30%;
}
.originalmedia-menu-col .listBox {
width: 30%;
margin-bottom: 60px;
}
.originalmedia-menu-col .listBox .imgBox {
margin-bottom: 20px;
}
.originalmedia-menu-col .listBox .txtBox .ttl {
font-size: 18px;
font-weight: bold;
}
.originalmedia-menu-col .listBox .txtBox .subttl {
color: #2374ab;
font-size: 13px;
margin: 5px 0 15px;
}
.originalmedia-menu-col .listBox .txtBox .txt {
font-size: 15px;
line-height: 1.8;
}
/* 202401追記：オリジナルプロモメニュー一覧枠 */
.service-txt-menuBox {
margin: 60px 0;
}
.service-txt-menuBox .menuList {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 30px;
width: 100%;
}
.service-txt-menuBox .menuList::after {
content: '';
display: block;
width: 30%;
}
.service-txt-menuBox .menuList .menuBox {
width: 30%;
margin-bottom: 50px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl {
color: #034476;
font-size: 18px;
font-weight: bold;
border-bottom: solid 4px #034476;
padding-bottom: 10px;
margin-bottom: 25px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl::before {
content: '';
display: inline-block;
background-size: contain;
vertical-align: text-bottom;
display: inline-flex;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.medical::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_medical.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.education::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_education.png") no-repeat;
padding-right: 40px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.entertainment::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_entertainment.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.food::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_food.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.retail::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_retail.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.including::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_including.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.service::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_service.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox h6.menu-ttl.other::before {
width: 25px;
height: 25px;
background: url("../img/originalmedia/promo-menu_other.png") no-repeat;
padding-right: 33px;
}
.service-txt-menuBox .menuList .menuBox ul {
font-size: 15px;
font-weight: 500;
}
.service-txt-menuBox .menuList .menuBox li {
line-height: 2;
transition: 0.4s;
}
.service-txt-menuBox .menuList .menuBox li::before {
content: url(../img/originalmedia/promo-menu_arrow.png);
padding-right: 10px;
}
.service-txt-menuBox .menuList .menuBox li a:hover {
color: #2575b3;
transition: 0.4s;
}
@media only screen and (max-width: 767px) {
.service-txt-menuBox .menuList .menuBox {
width: 100%;
}
}
/* 202406：追加
* ----------------------------------------------- */
.list-media {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.list-media::before {
content: '';
display: block;
width: 23.5%;
order: 1;
}
.list-media::after {
content: '';
display: block;
width: 23.5%;
}
.list-media li {
width: 23.5%;
margin-bottom: 40px;
border-bottom: solid 1px #ddd;
padding-bottom: 15px;
}
.list-media li img {
margin-bottom: 20px;
}
.list-media p.ttl {
color: #004db0;
font-size: 16px;
font-weight: bold;
letter-spacing: 0;
margin-bottom: 10px;
}
.list-media p.txt {
font-size: 13px;
font-weight: 500;
line-height: 1.7;
}
.list-media .imgBox {
position: relative;
}
.list-media .imgBox .ico {
position: absolute;
bottom: 20px;
left: 0;
background: #fbd401;
color: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 5px 10px;
width: 80px;
}
.list-media .imgBox .ico.osusume {
background: #000;
}
.section-mediasearch .media-target-menu.mediasearch {
margin-top: 60px;
}
.section-mediasearch .media-target-menu.mediasearch ul {
width: 100%;
}
.section-mediasearch .media-target-menu.mediasearch li {
width: 23.5%;
}
.section-mediasearch .media-target-menu.mediasearch .box.btnmenu {
display: block;
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: center;
background: #044191;
padding: 30px 0;
width: 100%;
border: none;
border-radius: 0;
}
.section-mediasearch .media-target-menu.mediasearch .box.btnmenu::after{
display: block;
content: '▼';
color: #b5d4fd;
font-size: 10px;
padding-top: 5px;
}
.section-mediasearch .media-target-menu.mediasearch .box.btnmenu span {
font-size: 13px;
padding-left: 3px;
}
@media only screen and (max-width: 767px) {
.section-mediasearch .media-target-menu.mediasearch li {
width: 48%;
}
.list-media li {
width: 48%;
}
.list-media p.ttl {
height: 40px;
}
}
/* section top topic
* ----------------------------------------------- */
.section-top-topic {
margin: 80px 0 100px;
}
.section-top-topic .topic {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width:100%;
}
.section-top-topic .topic .box-ttl {
width: 23%;
position: relative;
display: inline-block;
padding: 0 30px;
margin-bottom: 36px;
}
.section-top-topic .topic .box-ttl::after {
position: absolute;
content: "";
right: 0;
top: -35px;
width: 2px;
height: 185px;
background: #000;
border-radius: 3px;
transform: rotate(43deg);
}
.section-top-topic .topic .box-ttl .ttl-en {
font-size: 14px;
font-weight:600;
margin-bottom: 15px;
}
.section-top-topic .topic .box-ttl .ttl {
font-size: 18px;
font-weight: bold;
letter-spacing: 0;
}
.section-top-topic .topic .box-news {
width: 69%;
border-top: solid 1px #000;
padding-top: 30px;
margin-top: 20px;
}
.section-top-topic .topic .box-news .date {
font-size: 12px;
font-weight: 600;
margin-bottom: 15px;
}
.section-top-topic .topic .box-news .txt {
position: relative;
font-size: 14px;
line-height: 1.6;
}
.section-top-topic .topic .box-news .txt .link {
transition: 0.4s;
}
.section-top-topic .topic .box-news .txt .link::before {
content: '';
position: absolute;
bottom: 8px;
right: 29%;
width: 8%;
height: 1px;
background: #000;
transition: all .3s;
}
.section-top-topic .topic .box-news .txt .link::after {
content: '';
position: absolute;
bottom: 9.8888px;
right: 29%;
width: 5px;
height:1px;
background:#000;
transform: rotate(35deg);
transition: all .3s;
}
.section-top-topic .topic .box-news .txt .link:hover {
color: #fff;
background:#000;
transition: 0.4s;
}
.section-top-topic .topic .box-news .txt .link:hover::before {
background:#fff;
right: 1%;
width: 10%;
}
.section-top-topic .topic .box-news .txt .link:hover::after {
background:#fff;
right: 1%;
}
.section-top-topic .topic .box-news ul {
border-bottom: solid 1px #000;
padding-bottom: 30px;
}
@media only screen and (max-width: 767px) {
.section-top-topic .topic .box-ttl {
width: 80%;
padding: 0;
margin-bottom: 30px;
}
.section-top-topic .topic .box-ttl::after {
right: 0;
top: -24px;
height: 100px;
}
.section-top-topic .topic .box-news {
width: 100%;
}
.section-top-topic .topic .box-news ul {
padding-bottom: 90px;
}
.section-top-topic .topic .box-news .txt .link::before {
top: 80px;
right: 3%;
width: 20%;
height: 1px;
}
.section-top-topic .topic .box-news .txt .link::after {
content: '';
position: absolute;
top: 78px;
right: 3%;
width: 5px;
}
}
/* section top strength
* ----------------------------------------------- */
.stg-block {
display: flex;
justify-content: space-between;
position: relative;
width: 100%;
margin-top: -30px;
}
/*コンテンツのブロック*/
.stg-block .contents {
width: 54%;
margin-top: 100px;
}
.stg-block .contents .scroll-box01,
.stg-block .contents .scroll-box02,
.stg-block .contents .scroll-box03 {
margin: 10vh 0 0 60px;
padding: 40px;
}
.stg-block .contents div {
display: inline-block;
position: relative;
color:#fff;
background: #111;
border-radius: 20px;
}
.stg-block .contents div h2 {
font-size: 12px;
font-weight: bold;
border-bottom: solid 1px #fff;
padding-bottom: 15px;
}
.stg-block .contents div h3 {
font-size: 20px;
font-weight: bold;
line-height: 1.5;
margin: 24px 0 20px;
}
.stg-block .contents div .img-wrap {
border-radius: 5px;
}
/*
.stg-block .contents div::before {
content: '';
position: absolute;
top: 20%;
left: -34px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 20px solid #111;
}*/
.stg-block .contents .scroll-box01::before,
.stg-block .contents .scroll-box02::before,
.stg-block .contents .scroll-box03::before {
content: '';
position: absolute;
top: 20%;
left: -34px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 20px solid #111;
}
.stg-block .contents div p.txt {
font-size: 15px;
line-height: 1.6;
margin-bottom: 30px;
}
.stg-block .contents div:last-child {
/* padding-bottom: 50vh;*/
}
.stg-block .contents div:last-child .images {
width: 42%;
height: 100vh;
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:0;
margin: 0 auto;
}
/*画像のブロック*/
.stg-block .images {
width: 46%;
height: 80vh;
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:0;
margin: 0 auto;
}
.stg-block .images p {
height: auto;
margin: auto;
display: block;
visibility: hidden;
position: absolute;
top: 100px;
bottom: 0;
/* フェード速度 */
transition: .8s;
opacity: 0;
}
.stg-block .images p:first-child,
.stg-block .images p.active {
visibility: visible;
opacity: 1;
}
@media only screen and (max-width: 767px) {
.stg-block {
flex-wrap: wrap;
width: 100%;
margin-top: 0;
}
/*コンテンツのブロック*/
.stg-block .contents {
width: 100%;
margin-top: 20px;
}
.stg-block .contents div {
display: inline-block;
position: relative;
}
.stg-block .contents .scroll-box01,
.stg-block .contents .scroll-box02,
.stg-block .contents .scroll-box03 {
margin: 5vh 0 0 10px;
padding: 30px;
}
/*
.stg-block .contents div::before {
content: '';
position: absolute;
top: 20%;
left: -34px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 20px solid #111;
}*/
.stg-block .contents .scroll-box01::before,
.stg-block .contents .scroll-box02::before,
.stg-block .contents .scroll-box03::before {
content: '';
position: absolute;
top: 20%;
left: -34px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 20px solid #111;
}
.stg-block .images {
position: static;
display: flex;
width: 100%;
height: auto;
}
.stg-block .images p {
position: static;
height: auto;
margin: auto;
display: block;
visibility: hidden;
}
.stg-block .contents div figure img {
border-radius: 10px;
}
}
/* section top about:new
* ----------------------------------------------- */
.section-top-about {
width: 100%;
}
.section-top-about .wrap-imgBox {
margin-left: -100px;
width: 70%;
}
.section-top-about .wrap-title {
width: 30%;
}
.section-top-about .wrap-imgBox img {
border-radius: 20px;
}
@media only screen and (max-width: 767px) {
.section-top-about .wrap-imgBox {
margin-left: auto;
margin-bottom: 30px;
width: 100%;
}
.section-top-about .wrap-title {
width: 100%;
}
}
/* section top service
* ----------------------------------------------- */
.section-top-service {
margin: 0 auto;
background: url("../img/top/top-bg-service.jpg") no-repeat top,
url("../img/top/top-bg-service-under.jpg") no-repeat bottom;
padding: 0 0 100px;
}
.section-top-service .subBox {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.section-top-service .subBox .txtBox {
text-align: left;
width: 45%;
}
.section-top-service .subBox .txtBox h3 {
font-size: 20px;
font-weight: bold;
line-height: 1.6;
margin: 20px 0 30px;
}
.section-top-service .subBox .txtBox p.txt {
line-height: 2;
}
.section-top-service .subBox .menuBox {
margin: 50px 0 0 100px;
}
.section-top-service .subBox .menuBox ul {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
color: #01589b;
border: solid 1px #01589b;
width: 480px;
height: 99px;
margin-bottom: 15px;
padding-left: 30px;
transition: 0.4s;
}
.section-top-service .subBox .menuBox ul:hover {
transition: 0.4s;
opacity: 0.6;
}
.section-top-service .subBox .menuBox li.ttl {
position: relative;
font-size: 16px;
font-weight: bold;
}
.section-top-service .subBox .menuBox li.ttl::after {
content: '';
background: url(../img/top/top-arrow-bl.png);
position: absolute;
top: 8px;
right: -40px;
width: 12px;
height: 6px;
}
.section-top-service .subBox .menuBox img {
width: 98px;
}
@media only screen and (max-width: 767px) {
.section-top-service .subBox .txtBox {
width: 100%;
}
.section-top-service .subBox .menuBox {
width: 100%;
margin: 40px 0 80px;
}
.section-top-service .subBox .menuBox ul {
width: 100%;
}
.section-top-service .subBox .menuBox li.ttl::after {
position: absolute;
right: -25px;
}
.section-top-service .subBox .menuBox img {
width: 97px;
}
}
.section-top-service .serBox {
padding: 120px 0 0;
}
.section-top-service .serBox .box {
position: relative;
margin-bottom: 160px;
}
.section-top-service .serBox .box.last {
margin-bottom: 60px;
}
.section-top-service .serBox .box .txtBox {
position: absolute;
bottom: 0;
right: 0;
background: #fff;
padding: 50px 0 40px 50px;
margin-right: auto;
width: 400px;
}
.section-top-service .serBox .box .txtBox.left {
left: 0;
padding: 50px 50px 40px 0;
}
.section-top-service .serBox .box .txtBox .en-ttl {
font-size: 10px;
font-weight: bold;
letter-spacing: 0.05em;
}
.section-top-service .serBox .box .txtBox .ttl {
color: #01519b;
font-size: 20px;
font-weight: bold;
letter-spacing: 0;
margin: 15px 0 25px;
}
.section-top-service .serBox .box .txtBox .txt {
line-height: 2;
margin-bottom: 30px;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: bold;
text-align: center;
color: #01589b;
border: solid 1px #01519b;
border-radius: 30px;
padding: 15px 30px;
width: 240px;
transition: 0.4s;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail::before {
content: '';
position: absolute;
bottom: 25px;
right:15%;
width: 8%;
height: 1px;
background:#01519b;
transition: all .3s;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail::after {
content: '';
position: absolute;
bottom: 26.5px;
right:36px;
width: 4px;
height:1px;
background:#01519b;
transform: rotate(35deg);
transition: all .3s;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail:hover {
color: #fff;
background:#01519b;
transition: 0.4s;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail:hover::before {
background:#fff;
right: 12%;
width: 10%;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail:hover::after {
background:#fff;
right: 12%;
}
@media only screen and (max-width: 767px) {
.section-top-service .serBox .box .txtBox {
background: none;
margin-bottom: 100px;
}
.section-top-service .serBox .box .txtBox {
position: static;
padding: 40px 0 40px 0;
width: 100%;
}
.section-top-service .serBox .box .txtBox.left {
padding: 50px 0 40px 0;
}
.section-top-service .serBox .box .txtBox .ttl {
font-size: 22px;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail {
background: #fff;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail::before {
bottom: 26px;
right: 11%;
width: 8%;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail::after {
bottom: 27.5px;
right: 26px;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail:hover::before {
right: 12%;
width: 10%;
}
.section-top-service .serBox .box .txtBox .btn .btn-detail:hover::after {
right: 12%;
}
}
/* section top works
* ----------------------------------------------- */
.section-top-works {
margin: 0 auto;
padding: 100px 0 0;
}
.section-top-works .slider {
width: 100%;
}
.section-top-works .slider ul {
width: 31%;
text-align: left;
}
.section-top-works .slider .cat {
font-size: 13px;
font-weight: bold;
margin: 20px 0 10px;
}
.section-top-works .slider .txt {
font-size: 16px;
font-weight: bold;
text-decoration: underline;
height: 50px;
}
.section-top-works .slider .subcat {
display: inline-block;
font-size: 11px;
border: solid 1px #000;
padding: 4px 12px;
margin-top: 20px;
}
.slider img {
width: 100%;
height: 27vh;
object-fit: cover;
object-position: top;
border: solid 1px #ddd;
transition: 0.4s;
}
.slider img[class*="attachment-"] {
height: 27vh;
}
.slider a:hover,
.slider2 a:hover {
opacity: 0.8;
transition: 0.4s;
}
.slider .slick-slide {
margin:0 15px;
}
.allworks {
margin: 100px 0;
}
.allworks h3 {
font-size: 22px;
font-weight: bold;
color: #005595;
border-top: solid 1px #005595;
text-align: center;
padding-top: 15px;
margin-bottom: 50px;
position: relative;
border-bottom: 1px solid #005a98;
background: #fff;
text-align: center;
padding: 22px 0 20px;
}
.allworks h3::before {
content: "";
position: absolute;
bottom: -44px;
left: 49.755%;
margin-left: -2px;
border: 22px solid transparent;
border-top: 22px solid #fff;
z-index: 2;
}
.allworks h3::after {
position: absolute;
border: 20px solid transparent;
border-top-color: #005a98;
border-bottom-width: 0;
bottom: -21px;
content: "";
left: 49.999%;
z-index: 1;
}
.allworks .workBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
text-align: left;
}
.allworks .workBox .box {
width: 30%;
}
.allworks .workBox .box.sec {
margin-top: 37px;
}
.allworks .workBox .box.third {
margin-top: 73px;
}
.allworks .workBox .box h4 {
font-size: 46px;
letter-spacing: 0;
color: #0181ac;
margin-bottom: -13px;
}
.allworks .workBox ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
background: linear-gradient(#0181ac,#00418b);
color: #fff;
padding: 30px 20px;
}
.allworks .workBox .subttl {
font-size: 18px;
font-weight: bold;
padding-left: 10px;
}
.allworks .workBox .txt {
font-size: 13px;
line-height: 1.6;
padding: 15px 0 25px 10px;
}
.allworks .workBox img {
width: 100%;
padding-bottom: 25px;
object-fit: cover;
height: 30vh
}
.allworks .workBox .btn .btn-detail {
position: relative;
display: inline-block;
background: #fff;
border-radius: 80px;
padding: 15px;
color: #01589b;
font-size: 15px;
font-weight: bold;
text-align: center;
transition: 0.4s;
width: 240px;
margin-bottom: 30px;
}
.allworks .workBox .btn .btn-detail::before {
content: '';
position: absolute;
bottom: 25px;
right:15%;
width: 8%;
height: 1px;
background:#01519b;
transition: all .3s;
}
.allworks .workBox .btn .btn-detail::after {
content: '';
position: absolute;
bottom: 26.5px;
right:36px;
width: 4px;
height:1px;
background:#01519b;
transform: rotate(35deg);
transition: all .3s;
}
.allworks .workBox .btn .btn-detail:hover {
color: #fff;
background:#333;
transition: 0.4s;
}
.allworks .workBox .btn .btn-detail:hover::before {
background:#fff;
right: 12%;
width: 10%;
}
.allworks .workBox .btn .btn-detail:hover::after {
background:#fff;
right: 12%;
}
@media only screen and (max-width: 767px) {
.allworks .workBox .box {
width: 100%;
}
.allworks h3::before {
left: 48.755%;
}
.section-top-works .slider .txt {
font-size: 15px;
}
.slider img {
height: 16vh;
}
}
/* section top news
* ----------------------------------------------- */
.section-top-news {
margin: 0 auto;
padding: 30px 0 0;
}
.wrap-title-flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.btn-news-more .btnBox {
position: relative;
display: inline-block;
background: #000;
border-radius: 80px;
color: #fff;
font-size: 15px;
text-align: center;
padding: 20px;
width: 240px;
transition: 0.4s;
}
.btn-news-more .btnBox::before {
content: '';
position: absolute;
bottom: 29px;
right:13%;
width: 6%;
height: .8px;
background:#fff;
transition: all .3s;
}
.btn-news-more .btnBox::after {
content: '';
position: absolute;
bottom: 30px;
right: 31px;
width: 4px;
height:1px;
background:#fff;
transform: rotate(35deg);
transition: all .3s;
}
.btn-news-more .btnBox:hover {
background: #fff;
color: #000;
border: solid 2px #000;
transition: 0.4s;
}
.btn-news-more .btnBox:hover::before {
background:#000;
right: 12%;
width: 10%;
}
.btn-news-more .btnBox:hover::after {
background:#000;
right: 12%;
}
/* news slider */
.section-top-news .slider2 {
width: 100%;
margin:0 auto;
padding-bottom: 120px;
}
.section-top-news .slider2 img {
width:100%;/*スライダー内の画像を横幅100%に*/
height: 200px;
border-radius: 10px;
object-fit: cover;
object-position: top;
}
.section-top-news .slider2 .slick-slide {
width: 265px !important;
margin:0 15px;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.section-top-news .slick-prev,
.section-top-news .slick-next {
position: absolute;
bottom: 5%;
cursor: pointer;
z-index: 99;
}
.section-top-news .slick-prev {/*戻る矢印の位置と形状*/
background: url(../img/top/arrow_left.png) no-repeat;
width: 46px;
height: 46px;
right: 55px;
}
.section-top-news .slick-next {/*次へ矢印の位置と形状*/
background: url(../img/top/arrow_right.png) no-repeat;
width: 46px;
height: 46px;
right: 0;
}
/*ドットナビゲーションの設定*/
.section-top-news .slick-dots {
text-align:center;
margin:20px 0 0 0;
}
.section-top-news .slick-dots li {
display:inline-block;
margin:0 5px;
}
.section-top-news .slick-dots button {
color: transparent;
outline: none;
width:8px;/*ドットボタンのサイズ*/
height:8px;/*ドットボタンのサイズ*/
display:block;
border-radius:50%;
background:#ccc;/*ドットボタンの色*/
}
.section-top-news .slick-dots .slick-active button {
background:#333;/*ドットボタンの現在地表示の色*/
display: none;
}
.section-top-news .slider2 ul {
text-align: center;
}
.section-top-news .slider2 li {
text-align: left;
}
.section-top-news .slider2 .tagBox {
display: flex;
width: 100%;
margin: 30px 0 20px;
}
.section-top-news .slider2 .tagBox .tag {
background: #ddd;
font-size: 12px;
font-weight: bold;
padding: 5px 15px;
border-radius: 50px;
letter-spacing: 0;
}
.section-top-news .slider2 .tagBox .date {
font-size: 13px;
font-weight: bold;
margin: 4.2px 0 0 13px;
}
.section-top-news .slider2 .ttl {
font-size: 15px;
font-weight: bold;
text-decoration: underline;
}
@media only screen and (max-width: 767px) {
.section-top-news .slider2 {
padding-bottom: 100px;
margin: 60px 0 90px;
}
.section-top-news .slider2 .slick-slide {
width: 10% !important;
}
.section-top-news .slick-dots .slick-active button {
display: block;
}
}
/* section top blog
* ----------------------------------------------- */
.section-top-blog {
background: #f7f7f7;
margin: 0 auto;
padding: 100px 0 140px;
}
.section-top-blog .blogBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-top-blog .blogBox .box {
display: flex;
justify-content: space-between;
width: 48%;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
padding: 30px 0;
margin-bottom: -1px;
}
.section-top-blog .blogBox .box .date {
color: #919191;
font-size: 13px;
font-weight: bold;
}
.section-top-blog .blogBox .box .ttl {
font-size: 15px;
font-weight: bold;
text-decoration: underline;
margin-top: 20px;
}
.section-top-blog .blogBox .box .txtBox {
width: 62%;
}
.section-top-blog .blogBox .box .imgBox {
width: 33.5%;
}
.section-top-blog .blogBox .box .img {
width: 190px;
height: 126px;
object-fit: cover;
border-radius: 8px;
transition: 0.4s;
}
.section-top-blog .blogBox .box a:hover {
opacity: 0.8;
transition: 0.4s;
}
@media only screen and (max-width: 767px) {
.section-top-blog .blogBox {
margin-top: 60px;
}
.section-top-blog .blogBox .box {
width: 100%;
}
.section-top-blog .blogBox .box .txtBox {
width: 46%;
}
.section-top-blog .blogBox .box .imgBox {
width: 45%;
}
.section-top-blog .blogBox .box .ttl {
margin-top: 10px;
}
.section-top-blog .blogBox .box .img {
width: 160px;
height: 106px;
}
}
/* section allmedia top
* ----------------------------------------------- */
.section-ser-rootmedia {
font-family: source-han-sans-japanese, sans-serif;
padding: 100px 0 0;
letter-spacing: 0.05em;
}
.key-ttl-box2 {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.key-ttl-box2 h2 {
font-size: 66px;
text-align: center;
margin-right: 20px;
}
.key-ttl-box2 h2::after {
display: inline-block;
border-bottom: solid 1px #000;
padding-bottom: 40px;
width: 110px;
}
.key-ttl-box2 h3 {
font-size: 20px;
font-weight: bold;
}
.section-ser-rootmedia .worry {
margin-top: 70px;
padding: 40px 0 110px;
}
.section-ser-rootmedia .worry h3 {
font-size: 30px;
font-weight: bold;
text-align: center;
}
.section-ser-rootmedia .worry .box {
display: flex;
justify-content: space-between;
align-items: end;
flex-wrap: wrap;
width: 90%;
margin: 0 auto;
padding-top: 60px;
}
.section-ser-rootmedia .aboutmedia {
text-align: center;
padding-bottom: 110px;
}
.section-ser-rootmedia .aboutmedia h3 {
display: inline-block;
font-size: 30px;
font-weight: bold;
margin: 0 auto;
border-bottom: solid 5px #014c8c;
padding-bottom: 10px;
}
.section-ser-rootmedia .aboutmedia .box {
margin-top: 70px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-ser-rootmedia .aboutmedia .box ul {
width: 30%;
}
.section-ser-rootmedia .aboutmedia .box li {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.section-ser-rootmedia .aboutmedia .box li img {
margin-top: 30px;
}
@media only screen and (max-width: 767px) {
.section-ser-rootmedia .worry .box {
width: 100%;
}
.section-ser-rootmedia .worry .box li {
width: 46%;
margin-bottom: 30px;
}
.section-ser-rootmedia .aboutmedia .box ul {
width: 100%;
margin-bottom: 60px;
}
.section-ser-rootmedia .aboutmedia .box li img {
margin-top: 20px;
}
}
.section-about-rootmedia {
background: #f0f2f2;
font-family: source-han-sans-japanese, sans-serif;
padding: 110px 0;
}
.section-about-rootmedia {
background: #f0f2f2;
padding: 110px 0;
}
.key-ttl-box3 {
}
.key-ttl-box3 h2 {
font-size: 66px;
line-height: 1.1;
margin-bottom: 40px;
}
.key-ttl-box3::after {
content: '';
display: inline-block;
border-bottom: solid 1px #000;
padding-bottom: 40px;
width: 110px;
}
.key-ttl-box3 p {
font-size: 15px;
line-height: 1.8;
}
.section-about-rootmedia .pickup {
margin: 60px 0 80px;
border-bottom: dashed 1px #014c8c;
padding-bottom: 60px;
}
.section-about-rootmedia .pickup h4 {
position: relative;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 30px;
padding-left: 20px;
}
.section-about-rootmedia .pickup h4::before {
content: '▶';
position: absolute;
top: 13px;
left: 0;
font-size: 15px;
}
.section-about-rootmedia .pickupBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-about-rootmedia .pickupBox ul {
width: 30%;
}
.section-about-rootmedia .pickupBox .ttl {
font-size: 24px;
font-weight: 800;
line-height: 1.3;
border-bottom: solid 1px #bbb;
padding-bottom: 20px;
margin: 20px 0;
}
.section-about-rootmedia .pickupBox .ttl span {
color: #005ba8;
}
.section-about-rootmedia .pickupBox .txt {
font-size: 15px;
line-height: 1.8;
}
.section-about-rootmedia .pickupBox .img {
position: relative;
transition: 0.4s;
}
.section-about-rootmedia .pickupBox .img:hover {
opacity: 0.7;
transition: 0.4s;
}
.section-about-rootmedia .pickupBox .img::before {
content: '';
background: url(../img/allmedia/pick_corner.png);
position: absolute;
top: 0;
left: 0;
width: 70px;
height: 70px;
}
.section-about-rootmedia .pickupBox .img::after {
content: '';
background: url(../img/allmedia/btn_root_arrow.png);
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.section-about-rootmedia .location h4 {
position: relative;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
margin-bottom: 30px;
padding-left: 20px;
}
.section-about-rootmedia .location h4::before {
content: '▶';
position: absolute;
top: 13px;
left: 0;
font-size: 15px;
}
.section-about-rootmedia .location .locationBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-about-rootmedia .location .locationBox::after {
content: '';
display: block;
width: 31%;
}
.section-about-rootmedia .location .locationBox .box {
width: 31%;
margin-bottom: 80px;
}
.section-about-rootmedia .location .locationBox .box .ttl-en {
font-size: 14px;
color: #014c8c;
margin: 25px 0 8px;
}
.section-about-rootmedia .location .locationBox .box h5 {
font-size: 24px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 30px;
}
.section-about-rootmedia .location .locationBox .box .menu {
font-size: 15px;
width: 100%;
}
.section-about-rootmedia .location .locationBox .box li {
position: relative;
border-bottom: solid 1px #bbb;
padding: 15px 0 15px 0;
transition: 0.4s;
}
.section-about-rootmedia .location .locationBox .box li::after {
content: '';
background: url(../img/allmedia/arrow_bl.png);
position: absolute;
top: 22px;
right: 20px;
width: 13px;
height: 12px;
}
.section-about-rootmedia .location .locationBox .box li:hover {
color: #0076da;
transition: 0.6s;
}
@media only screen and (max-width: 767px) {
.section-about-rootmedia .pickupBox ul {
width: 100%;
margin-bottom: 80px;
}
.section-about-rootmedia .pickupBox ul:last-of-type {
margin-bottom: 0
}
.section-about-rootmedia .location .locationBox .box {
width: 100%;
margin-bottom: 80px;
}
.section-about-rootmedia .location .locationBox .box:last-of-type {
margin-bottom: 0;
}
.section-about-rootmedia .location .locationBox .box li {
padding: 15px 0 15px 0;
}
}
.section-search-rootmedia {
position: relative;
z-index: 0;
overflow: hidden;
background-color: #fff;
transition: .6s;
}
.section-search-rootmedia::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 0%;
height: 100%;
background-color: #000;
-webkit-transition: .6s;
transition: .6s;
}
.section-search-rootmedia:hover::before {
width: 100%;
}
.section-search-rootmedia:hover .searchBox h2 {
color: #fff;
transition: 0.6s;
}
.section-search-rootmedia:hover .searchBox .copy .txt {
color: #fff;
transition: 0.6s;
}
.section-search-rootmedia:hover .searchBox .copy::after {
background: url(../img/allmedia/btn_search_arrow_wt.png) no-repeat;
width: 156px;
height: 156px;
transition: 0.6s;
}
.section-search-rootmedia:hover .searchBox .copy:hover::after {
background: url(../img/allmedia/btn_search_arrow_wt-hover.png) no-repeat;
transition: 0.6s;
}
.section-search-rootmedia .searchBox {
padding: 150px 0;
}
.section-search-rootmedia .searchBox h2 {
font-size: 80px;
line-height: 1.1;
margin-bottom: 50px;
}
.section-search-rootmedia .searchBox h2 span {
color: #1974b9;
}
.section-search-rootmedia .searchBox .copy {
position: relative;
width: 100%;
}
.section-search-rootmedia .searchBox .copy .txt {
font-size: 15px;
line-height: 2;
width: 58%;
}
.section-search-rootmedia .searchBox .copy::after {
content: '';
background: url(../img/allmedia/btn_search_arrow.png) no-repeat;
position: absolute;
top: 10%;
right: 0;
width: 156px;
height: 156px;
}
@media only screen and (max-width: 767px) {
.section-search-rootmedia .searchBox {
padding: 80px 0 90px;
}
.section-search-rootmedia .searchBox h2 {
font-size: 60px;
}
.section-search-rootmedia .searchBox .copy .txt {
width: 100%;
}
.section-search-rootmedia .searchBox .copy::after {
background-size: 70%;
top: 3%;
right: -50px;
}
.section-search-rootmedia:hover .searchBox .copy::after {
background-size: 70%;
top: 3%;
right: -50px;
}
.section-search-rootmedia:hover .searchBox .copy:hover::after {
background-size: 70%;
top: 3%;
right: -50px;
}
}
.section-works-rootmedia {
background: #f0f2f2;
padding: 100px 0;
}
.section-works-rootmedia h2 {
font-size: 66px;
margin-bottom: 60px;
}
/* section media-recruitment
* ----------------------------------------------- */
.section-media-recruitment {
font-family: source-han-sans-japanese, sans-serif;
letter-spacing: 0.05em;
padding: 80px 0;
}
.section-media-recruitment h3 {
position: relative;
font-size: 26px;
font-weight: bold;
line-height: 1.6;
text-align: center;
margin-bottom: 70px;
}
.section-media-recruitment h3::before {
content: '';
background: url(../img/media-recruitment/sunburst_left.png);
position: absolute;
top: 10px;
left: 26%;
width: 44px;
height: 52px;
}
.section-media-recruitment h3::after {
content: '';
background: url(../img/media-recruitment/sunburst_right.png);
position: absolute;
top: 10px;
right: 26%;
width: 44px;
height: 52px;
}
.section-media-recruitment .about h4 {
background: #195298;
color: #fff;
font-size: 24px;
font-weight: bold;
text-align: center;
padding: 25px;
width: 100%;
margin-bottom: 30px;
}
.section-media-recruitment .txt {
font-size: 16px;
line-height: 1.8;
}
.section-media-recruitment .about .txt span {
background: linear-gradient(transparent 40%, #f5fe01 40%);
}
.section-media-recruitment .aboutBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 90px 0;
width: 100%;
}
.section-media-recruitment .aboutBox .copy {
width: 42%;
}
.section-media-recruitment .aboutBox .copy .ttl {
font-size: 30px;
font-weight: bold;
line-height: 1.4;
margin-bottom: 40px;
}
.section-media-recruitment .aboutBox .copy .ttl span {
color: #1171b5;
}
.section-media-recruitment .aboutBox .img {
width: 53%;
}
.section-media-recruitment .aboutBox .img img {
border-radius: 10px;
}
.section-media-recruitment .businessBox {
margin: 100px 0;
}
.section-media-recruitment .businessBox h4,
.section-media-recruitment .caseBox h4 {
position: relative;
font-size: 28px;
font-weight: bold;
border-bottom: solid 5px #000;
padding: 0 0 15px 17px;
margin-bottom: 40px;
letter-spacing: 0;
line-height: 1.2;
}
.section-media-recruitment .businessBox h4::before,
.section-media-recruitment .caseBox h4::before {
position: absolute;
top: 2px;
left: 0;
content: '';
display: block;
background: transparent;
border-left: solid 7px #2374ab;
height: 30px;
}
.section-media-recruitment .businessBox .box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-media-recruitment .businessBox .box::before {
content: '';
display: block;
width: 23%;
order:1;
}
.section-media-recruitment .businessBox .box::after {
content: '';
display: block;
width: 23%;
}
.section-media-recruitment .businessBox .box ul {
width: 23%;
margin-bottom: 40px;
}
.section-media-recruitment .businessBox .box ul .txt {
font-size: 16px;
font-weight: bold;
margin-top: 10px;
}
.section-media-recruitment .caseBox {
margin-bottom: 100px;
}
.section-media-recruitment .caseBox .box {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-media-recruitment .caseBox .box ul {
width: 31%;
}
.section-media-recruitment .caseBox .box .img img {
border-radius: 8px;
}
.section-media-recruitment .caseBox .box .ttl {
font-size: 16px;
font-weight: bold;
margin: 20px 0 15px;
}
.section-media-recruitment .caseBox .box .txt {
font-size: 14px;
line-height: 1.6;
}
.section-media-recruitment .cntctBox {
margin-bottom: 40px;
}
.section-media-recruitment .cntctBox h4 {
position: relative;
font-size: 26px;
font-weight: bold;
line-height: 1.6;
text-align: center;
margin-bottom: 70px;
}
.section-media-recruitment .cntctBox h4::before {
content: '';
background: url(../img/media-recruitment/sunburst_left.png);
position: absolute;
top: 20px;
left: 15%;
width: 44px;
height: 52px;
}
.section-media-recruitment .cntctBox h4::after {
content: '';
background: url(../img/media-recruitment/sunburst_right.png);
position: absolute;
top: 20px;
right: 15%;
width: 44px;
height: 52px;
}
.section-media-recruitment .cntctBox .contact {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-media-recruitment .cntctBox .contact .box {
position: relative;
color: #fff;
text-align: center;
width: 47%;
display:block;
text-decoration:none;
overflow:hidden;
}
.section-media-recruitment .cntctBox .contact .box::before {
content:"";
display:block;
padding-top: 50%;/*ここには横幅に対して縦が何%になるかを記述*/
}
.section-media-recruitment .cntctBox .contact .box ul {
text-align: center;
}
.section-media-recruitment .cntctBox .contact .box ul::after {
content: url(../img/media-recruitment/cntct-arrow.png);
position: absolute;
display: inline-block;
bottom: 50px;
right: 40px;
width: 76px;
height: 76px;
}
.section-media-recruitment .cntctBox .contact .box img {
border-radius: 15px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
transition:0.3s;
display:block;
width:100%;
}
.section-media-recruitment .cntctBox .contact .box:hover img {
border-radius: 15px;
transform:scale(1.1);
}
.section-media-recruitment .cntctBox .contact .ttl {
position: absolute;
font-size: 40px;
font-weight: bold;
top: 17%;
left: 0 ;
right: 0;
margin: 0 auto;
}
.section-media-recruitment .cntctBox .contact .ttl.web {
top: 22%;
}
.section-media-recruitment .cntctBox .contact .ttl::after {
content: '';
display: block;
border-bottom: solid 4px #fff;
width: 50px;
margin: 0 auto;
padding-bottom: 20px;
}
.section-media-recruitment .cntctBox .contact .txt1 {
position: absolute;
font-size: 16px;
font-weight: bold;
top: 55%;
left: 0 ;
right: 0;
}
.section-media-recruitment .cntctBox .contact .txt2 {
position: absolute;
font-size: 32px;
font-weight: bold;
top: 63%;
left: 0 ;
right: 0;
}
.section-media-recruitment .cntctBox .contact .txt3 {
position: absolute;
font-size: 24px;
font-weight: bold;
top: 62%;
left: 0 ;
right: 0;
}
@media only screen and (max-width: 767px) {
.section-media-recruitment h3 {
font-size: 24px;
}
.section-media-recruitment h3::before {
top: auto;
bottom: -30px;
left: -20px;
}
.section-media-recruitment h3::after {
top: auto;
bottom: -30px;
right: -20px;
}
.section-media-recruitment .aboutBox .copy .ttl {
font-size: 26px;
margin-bottom: 30px;
}
.section-media-recruitment .aboutBox .copy {
width: 100%;
}
.section-media-recruitment .aboutBox .img {
width: 100%;
margin-top: 40px;
}
.section-media-recruitment .businessBox .box::before {
width: 47%;
}
.section-media-recruitment .businessBox .box::after {
width: 47%;
}
.section-media-recruitment .businessBox .box ul {
width: 47%;
}
.section-media-recruitment .businessBox .box ul .txt {
font-size: 14px;
}
.section-media-recruitment .caseBox .box ul {
width: 100%;
margin-bottom: 60px;
}
.section-media-recruitment .cntctBox h4 {
font-size: 24px;
}
.section-media-recruitment .cntctBox h4::before {
top: auto;
bottom: -30px;
left: -20px;
}
.section-media-recruitment .cntctBox h4::after {
top: auto;
bottom: -30px;
right: -20px;
}
.section-media-recruitment .cntctBox .contact .box {
width: 100%;
margin-bottom: 20px;
}
.section-media-recruitment .cntctBox .contact .box ul::after {
display: none;
}
.section-media-recruitment .cntctBox .contact .box img {
border-radius: 10px;
}
.section-media-recruitment .cntctBox .contact .box:hover img {
border-radius: 10px;
}
.section-media-recruitment .cntctBox .contact .ttl {
font-size: 28px;
top: 13%;
}
.section-media-recruitment .cntctBox .contact .ttl.web {
top: 22%;
}
.section-media-recruitment .cntctBox .contact .ttl::after {
border-bottom: solid 3px #fff;
padding-bottom: 5px;
}
.section-media-recruitment .cntctBox .contact .txt1 {
font-size: 13px;
top: 52%;
}
.section-media-recruitment .cntctBox .contact .txt2 {
font-size: 24px;
top: 63%;
}
.section-media-recruitment .cntctBox .contact .txt3 {
font-size: 18px;
top: 62%;
}
}
/* section work-entry
* ----------------------------------------------- */
.work-entry {
font-family: source-han-sans-japanese, sans-serif;
letter-spacing: 0.05em;
margin-top: 50px;
margin-left: 10%;
padding: 10px 0 220px;
}
.work-entry h4 {
font-size: 30px;
font-weight: bold;
}
.work-entry h4 span {
display: block;
font-size: 15px;
font-weight: bold;
margin: 10px 0 40px;
}
.work-entry h4.root span {
color: #17babc;
}
.work-entry h4.web span {
color: #0c6bbc;
}
.work-entry h4.graphic span {
color: #ffb400;
}
.work-entry .work-entry-box {
position: relative;
margin-bottom: 120px;
}
.work-entry .work-entry-box .more-btn {
position: absolute;
bottom: -10%;
right: 10%;
z-index: 70;
}
.work-entry .work-entry-box .slider {
display: flex;
justify-content: space-between;
border-radius: 20px 0 0 20px;
width: 100%;
height: 400px;
overflow: hidden;
}
.work-entry .work-entry-box .slider img {
height: 400px;
}
.work-entry .work-entry-box .slider .slick-slide {
width: 400px !important;
margin: 0;
}
.work-entry .work-entry-box .slider .slick-slider .slick-track {
width: 100%;
}
.work-entry .work-entry-box .slider .slick-initialized .slick-slide img {
width: 100%;
}
/* PAGE New-Works
* ----------------------------------------------- */
.section-works-detail {
font-family: source-han-sans-japanese, sans-serif;
letter-spacing: 0.05em;
padding: 60px 0 120px;
}
.section-works-detail h3.ttl {
font-size: 28px;
font-weight: bold;
margin-bottom: 30px;
padding: 0em 0.5em;
color: #142c4b;
background: transparent;
border-left: solid 7px #142c4b;
}
.section-works-detail .sidebar-upper .works-menu {
background: #f8f8f8;
border: solid 3px #000;
border-radius: 10px;
padding: 40px 60px;
margin: 40px 0 80px;
}
.section-works-detail .sidebar-upper .works-menu.sub {
background: none;
border-bottom: solid 3px #000;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
padding: 0 0 15px 0;
margin: 40px 0 25px;
width: 1180px;
}
.section-works-detail .sidebar-upper .works-menu.sub-single {
background: none;
border-bottom: solid 3px #000;
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
padding: 0 0 15px 0;
margin: 0 0 80px;
width: 1180px;
}
.section-works-detail .sidebar-upper .works-menu.sub h3 {
font-size: 26px;
font-weight: 600;
margin-bottom: 15px;
}
.section-works-detail .sidebar-upper .works-menu.sub-single h3 {
font-size: 26px;
font-weight: 600;
margin-bottom: 15px;
}
.section-works-detail .sidebar-upper .works-menu h4 {
font-size: 24px;
font-weight: bold;
text-align: center;
border-bottom: dashed 1px #000;
padding-bottom: 20px;
margin-bottom: 30px;
}
.section-works-detail .sidebar-upper .works-menu .menuBox {
display: flex;
align-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-works-detail .sidebar-upper .works-menu .menuBox li {
display: flex;
margin-right: 8px;
}
.section-works-detail .sidebar-upper .works-menu .menuBox .btn {
background: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
border: solid 2px #000;
border-radius: 60px;
padding: 11px 20px 12px;
margin-bottom: 8px;
transition: 0.4s;
}
.section-works-detail .sidebar-upper .works-menu .menuBox .btn:hover {
color: #fff000;
background: #000;
transition: 0.4s;
}
.section-works-detail .sidebar-upper .works-menu .menuBox .btn.current {
color: #fff000;
background: #000;
transition: 0.4s;
}
.section-works-detail .workslist h5 {
background: #f2f7fa;
font-size: 24px;
font-weight: bold;
padding: 18px 30px;
margin-bottom: 40px;
}
.section-works-detail .workslist h5::before {
content: '';
padding: 0.005em .4em;
background: transparent;
border-left: solid 7px #2374ab;
}
.section-works-detail .workslist .listBox {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-works-detail .workslist .listBox::before {
content: '';
display: block;
width: 22.5%;
order:1;
}
.section-works-detail .workslist .listBox::after {
content: '';
display: block;
width: 22.5%;
}
.section-works-detail .workslist .listBox li {
box-shadow: 0 0 15px #ccc;
width: 22.5%;
margin-bottom: 60px;
}
.section-works-detail .workslist .listBox li img {
width: 100%;
height: 21vh;
object-fit: cover;
object-position: top;
}
.section-works-detail .workslist .listBox .works-title-text {
font-size: 15px;
font-weight: bold;
line-height: 1.5;
padding: 20px;
height: 90px;
}
.section-works-detail .workslist .listBox .works-archive-cat {
color: #777;
font-size: 14px;
font-weight: bold;
line-height: 1.6;
padding: 0 20px 8px;
}
.section-works-detail .workslist .listBox .works-title-date {
color: #777;
font-size: 12px;
font-weight: bold;
line-height: 1.6;
padding: 0 20px 10px;
}
.section-works-detail .workslist .listBox .works-tag {
position: relative;
font-size: 12px;
line-height: 1.4;
padding: 0 20px 30px 39px;
}
.section-works-detail .workslist .listBox .works-tag::before {
position: absolute;
content: "";
top: 4px;
left: 20px;
width: 1em;
height: 1em;
background: url(../img/common/icon_works_tag.png) 0 0 no-repeat;
background-size: contain;
}
.section-works-detail .workslist .listBox .works-cat {
position: relative;
}
.section-works-detail .workslist .listBox .works-cat img {
width: 100%;
height: 21vh;
object-fit: cover;
object-position: top;
}
.section-works-detail .workslist .listBox .works-cat p {
position: absolute;
bottom: 0;
right: 0;
background: #000;
color: #fff;
font-size: 11px;
font-weight: bold;
text-align: center;
padding: 5px 10px;
}
@media only screen and (max-width: 767px) {
.section-works-detail .workslist h5 {
padding: 18px 20px;
text-indent: -28px;
padding-left: 50px;
line-height: 1.2;
}
.section-works-detail .sidebar-upper .works-menu {
padding: 40px 30px;
}
.section-works-detail .sidebar-upper .works-menu .menuBox {
display: flex;
align-content: space-between;
flex-wrap: wrap;
width: 100%;
}
.section-works-detail .sidebar-upper .works-menu .menuBox li {
display: flex;
margin-right: 8px;
}
.section-works-detail .sidebar-upper .works-menu .menuBox .btn {
background: #fff;
font-size: 12px;
font-weight: bold;
text-align: center;
border: solid 2px #000;
border-radius: 60px;
padding: 11px 20px 12px;
margin-bottom: 8px;
transition: 0.4s;
}
.section-works-detail .workslist .listBox li {
width: 100%;
}
.section-works-detail .workslist .listBox .works-title-text {
height: auto;
}
.section-works-detail .sidebar-upper .works-menu.sub {
width: 100%;
}
.section-works-detail .sidebar-upper .works-menu.sub-single {
width: 100%;
}
}
@media screen and (min-width:481px) and (max-width:768px) {
.section-works-detail .workslist .listBox .works-cat img {
height: 46vh;
}
}
@media screen and (max-width: 480px) {
.section-works-detail .workslist .listBox .works-cat img {
height: 30vh;
}
}
.pnavi {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
margin-top: -20px;
}
.pnavi .page-arrows,
.pnavi .page-numbers {
text-align: center;
display: block;
font-size: 15px;
transition: all 0.26s ease;
padding: 0 8px;
border-left: 1px solid #000;
}
.pnavi .page-arrows.prev {
border-left: none;
}
.pnavi .page-arrows:hover,
.pnavi .page-numbers.current,
.pnavi .page-numbers:hover {
color: #044191;
}
@media only screen and (max-width: 767px) {
.pnavi {
margin-bottom: 35px;
}
.pnavi .page-arrows,
.pnavi .page-numbers {
font-size: 12px;
margin-left: 5px;
padding: 10px 6px 8px 12px;
height: 30px;
}
.pnavi .page-arrows {
padding-top: 6px;
}
.pnavi .page-numbers {
padding-top: 8px;
}
}
/*タブ切り替え全体のスタイル*/
.tabs {
font-family: source-han-sans-japanese, sans-serif;
margin-top: 50px;
padding-bottom: 60px;
background-color: #fff;
width: 100%;
margin: 0 auto;
}
/*タブのスタイル*/
.tab_item {
position: relative;
width: 200px;
height: 45px;
background-color: #fff;
border: 1px solid #999;
border-radius: 5px;
line-height: 45px;
font-size: 13px;
text-align: left;
color: #000;
display: block;
float: left;
font-weight: bold;
transition: all 0.2s ease;
margin: 0 10px 20px 0;
padding-left: 20px;
}
.tab_item:hover {
background: #333;
color: #fff;
transition: 0.4s;
}
.tab_item::after {
position: absolute;
display: inline-block;
content: '';
background: url(../img/works/search_arrow.png) no-repeat;
background-size: contain;
top: 18px;
right: 15px;
width: 10px;
height: 20px;
}
.tab_item.tag::after {
position: absolute;
display: inline-block;
content: '';
background: url(../img/works/search_arrow_gr.png) no-repeat;
background-size: contain;
top: 18px;
right: 15px;
width: 10px;
height: 20px;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding-top: 20px;
clear: both;
overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#taglist:checked ~ #taglist_content {
display: block;
border-top: dashed 1px #000;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #555;
color: #fff;
}
.tabs input:checked + .tab_item.tag {
background-color: #0895a5;
color: #fff;
border: none;
}
.tabs input:checked + .tab_item.tag::after {
position: absolute;
display: inline-block;
content: '';
background: url(../img/works/search_arrow.png) no-repeat;
background-size: contain;
top: 18px;
right: 15px;
width: 10px;
height: 20px;
}
.tab_content_description .menuBox {
display: flex;
align-content: space-between;
flex-wrap: wrap;
width: 100%;
transition: 0.4s;
}
.tab_content_description .menuBox .btn {
display: inline-block;
background: #fff;
color: #666;
border: solid 1px #999;
border-radius: 60px;
font-size: 12px;
font-weight: bold;
text-align: center;
padding: 7px 15px 9px;
margin: 0 8px 8px 0;
transition: 0.4s;
}
.tab_content_description .menuBox .btn:hover {
background: #333;
color: #fff;
transition: 0.4s;
}
.tab_content_description .menuBox .btn.current {
background: #333;
color: #fff;
transition: 0.4s;
}
.tab_content_description .menuBox a {
display: flex;
align-items: center;
color: #0895a5;
margin-right: 12px;
}
@media only screen and (max-width: 767px) {
.tab_item {
width: 100%;
margin: 0 10px 10px 0;
}
}
@media only screen and (max-width: 767px) {
.tab_item.tag {
margin: 0 10px 20px 0;
}
}
/*========= LoadingのためのCSS ===============*/
/* 使用しない場合は削除すること */
/* Loading背景画面設定 */
#splash {
/*fixedで全面に固定*/
position: fixed;
z-index: 9001;
width: 100%;
height: 100%;
background: #0155a3;
text-align:center;
color:#fff;
}
/* Loadingバー中央配置 */
#splash_text {
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
width: 100%;
transform: translate(-50%, -50%);
color: #fff;
}
/*IE11対策用バーの線の高さ※対応しなければ削除してください*/
#splash_text svg{
height: 2px;
}
/*========= end LoadingのためのCSS ===============*/
@charset "UTF-8";
.wpcf7c-conf {
background-color: #eee !important;
}
.mt0 {
margin-top: 0!important;
}
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license
Copyright (c) 2013 Daniel Eden
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
@-webkit-keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
@keyframes flash {
0%, 50%, 100% {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
-webkit-animation-name: flash;
animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
@-webkit-keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
}
@keyframes shake {
0%, 100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
10%, 30%, 50%, 70%, 90% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
20%, 40%, 60%, 80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
}
.shake {
-webkit-animation-name: shake;
animation-name: shake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes swing {
20% {
-webkit-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
40% {
-webkit-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
60% {
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
80% {
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
100% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.swing {
-webkit-transform-origin: top center;
-ms-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
animation-name: swing;
}
@-webkit-keyframes tada {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes tada {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
10%, 20% {
-webkit-transform: scale(0.9) rotate(-3deg);
-ms-transform: scale(0.9) rotate(-3deg);
transform: scale(0.9) rotate(-3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale(1.1) rotate(3deg);
-ms-transform: scale(1.1) rotate(3deg);
transform: scale(1.1) rotate(3deg);
}
40%, 60%, 80% {
-webkit-transform: scale(1.1) rotate(-3deg);
-ms-transform: scale(1.1) rotate(-3deg);
transform: scale(1.1) rotate(-3deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.tada {
-webkit-animation-name: tada;
animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
0% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
}
@keyframes wobble {
0% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
15% {
-webkit-transform: translateX(-25%) rotate(-5deg);
-ms-transform: translateX(-25%) rotate(-5deg);
transform: translateX(-25%) rotate(-5deg);
}
30% {
-webkit-transform: translateX(20%) rotate(3deg);
-ms-transform: translateX(20%) rotate(3deg);
transform: translateX(20%) rotate(3deg);
}
45% {
-webkit-transform: translateX(-15%) rotate(-3deg);
-ms-transform: translateX(-15%) rotate(-3deg);
transform: translateX(-15%) rotate(-3deg);
}
60% {
-webkit-transform: translateX(10%) rotate(2deg);
-ms-transform: translateX(10%) rotate(2deg);
transform: translateX(10%) rotate(2deg);
}
75% {
-webkit-transform: translateX(-5%) rotate(-1deg);
-ms-transform: translateX(-5%) rotate(-1deg);
transform: translateX(-5%) rotate(-1deg);
}
100% {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
}
}
.wobble {
-webkit-animation-name: wobble;
animation-name: wobble;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
70% {
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
}
80% {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp;
}
@-webkit-keyframes bounceOut {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
transform: scale(0.3);
}
}
@keyframes bounceOut {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
}
50% {
opacity: 1;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.3);
-ms-transform: scale(0.3);
transform: scale(0.3);
}
}
.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes bounceOutDown {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.bounceOutDown {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes bounceOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.bounceOutLeft {
-webkit-animation-name: bounceOutLeft;
animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes bounceOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
20% {
opacity: 1;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.bounceOutRight {
-webkit-animation-name: bounceOutRight;
animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInDownBig {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInLeftBig {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUpBig {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUpBig {
-webkit-animation-name: fadeInUpBig;
animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
transform: translateY(2000px);
}
}
@keyframes fadeOutDownBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(2000px);
-ms-transform: translateY(2000px);
transform: translateY(2000px);
}
}
.fadeOutDownBig {
-webkit-animation-name: fadeOutDownBig;
animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
-ms-transform: translateX(-20px);
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes fadeOutLeftBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.fadeOutLeftBig {
-webkit-animation-name: fadeOutLeftBig;
animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
-ms-transform: translateX(20px);
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes fadeOutRightBig {
0% {
opacity: 1;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.fadeOutRightBig {
-webkit-animation-name: fadeOutRightBig;
animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes fadeOutUpBig {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.fadeOutUpBig {
-webkit-animation-name: fadeOutUpBig;
animation-name: fadeOutUpBig;
}
@-webkit-keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.animated.flip {
-webkit-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
-webkit-animation-name: flip;
animation-name: flip;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
@keyframes flipInY {
0% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateY(-10deg);
-ms-transform: perspective(400px) rotateY(-10deg);
transform: perspective(400px) rotateY(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateY(10deg);
-ms-transform: perspective(400px) rotateY(10deg);
transform: perspective(400px) rotateY(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
}
.flipInY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInY;
animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
@keyframes flipOutX {
0% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
@keyframes flipOutY {
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
opacity: 1;
}
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
opacity: 0;
}
}
.flipOutY {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipOutY;
animation-name: flipOutY;
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
60% {
-webkit-transform: translateX(-20%) skewX(30deg);
-ms-transform: translateX(-20%) skewX(30deg);
transform: translateX(-20%) skewX(30deg);
opacity: 1;
}
80% {
-webkit-transform: translateX(0%) skewX(-15deg);
-ms-transform: translateX(0%) skewX(-15deg);
transform: translateX(0%) skewX(-15deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
}
.lightSpeedIn {
-webkit-animation-name: lightSpeedIn;
animation-name: lightSpeedIn;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
@keyframes lightSpeedOut {
0% {
-webkit-transform: translateX(0%) skewX(0deg);
-ms-transform: translateX(0%) skewX(0deg);
transform: translateX(0%) skewX(0deg);
opacity: 1;
}
100% {
-webkit-transform: translateX(100%) skewX(-30deg);
-ms-transform: translateX(100%) skewX(-30deg);
transform: translateX(100%) skewX(-30deg);
opacity: 0;
}
}
.lightSpeedOut {
-webkit-animation-name: lightSpeedOut;
animation-name: lightSpeedOut;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateIn {
-webkit-animation-name: rotateIn;
animation-name: rotateIn;
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownLeft {
-webkit-animation-name: rotateInDownLeft;
animation-name: rotateInDownLeft;
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInDownRight {
-webkit-animation-name: rotateInDownRight;
animation-name: rotateInDownRight;
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpLeft {
-webkit-animation-name: rotateInUpLeft;
animation-name: rotateInUpLeft;
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
}
.rotateInUpRight {
-webkit-animation-name: rotateInUpRight;
animation-name: rotateInUpRight;
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
opacity: 0;
}
}
.rotateOut {
-webkit-animation-name: rotateOut;
animation-name: rotateOut;
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutDownLeft {
-webkit-animation-name: rotateOutDownLeft;
animation-name: rotateOutDownLeft;
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutDownRight {
-webkit-animation-name: rotateOutDownRight;
animation-name: rotateOutDownRight;
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0;
}
}
.rotateOutUpLeft {
-webkit-animation-name: rotateOutUpLeft;
animation-name: rotateOutUpLeft;
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
opacity: 1;
}
100% {
-webkit-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
opacity: 0;
}
}
.rotateOutUpRight {
-webkit-animation-name: rotateOutUpRight;
animation-name: rotateOutUpRight;
}
@-webkit-keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.slideInDown {
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight;
}
@-webkit-keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
@keyframes slideOutLeft {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
}
.slideOutLeft {
-webkit-animation-name: slideOutLeft;
animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
transform: translateX(2000px);
}
}
@keyframes slideOutRight {
0% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(2000px);
-ms-transform: translateX(2000px);
transform: translateX(2000px);
}
}
.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes slideOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.slideOutUp {
-webkit-animation-name: slideOutUp;
animation-name: slideOutUp;
}
@-webkit-keyframes hinge {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
@keyframes hinge {
0% {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
20%, 60% {
-webkit-transform: rotate(80deg);
-ms-transform: rotate(80deg);
transform: rotate(80deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
40% {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
80% {
-webkit-transform: rotate(60deg) translateY(0);
-ms-transform: rotate(60deg) translateY(0);
transform: rotate(60deg) translateY(0);
opacity: 1;
-webkit-transform-origin: top left;
-ms-transform-origin: top left;
transform-origin: top left;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
100% {
-webkit-transform: translateY(700px);
-ms-transform: translateY(700px);
transform: translateY(700px);
opacity: 0;
}
}
.hinge {
-webkit-animation-name: hinge;
animation-name: hinge;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
@keyframes rollOut {
0% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
100% {
opacity: 0;
-webkit-transform: translateX(100%) rotate(120deg);
-ms-transform: translateX(100%) rotate(120deg);
transform: translateX(100%) rotate(120deg);
}
}
.rollOut {
-webkit-animation-name: rollOut;
animation-name: rollOut;
}
/*# sourceMappingURL=animate.css.map */