@import url("https://fonts.googleapis.com/css2?family=Yantramanav:wght@300&display=swap");
html {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-text-size-adjust: 100%; } table {
border-collapse: collapse;
border-spacing: 0
}
fieldset,
img {
border: 0
}
address,
button,
caption,
cite,
code,
dfn,
em,
input,
optgroup,
option,
select,
strong,
textarea,
th,
var {
font: inherit
}
del,
ins {
text-decoration: none
}
li {
list-style: none
}
caption,
th {
text-align: left
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal
}
q:before,
q:after {
content: ''
}
abbr,
acronym {
border: 0;
font-variant: normal
}
sup {
vertical-align: baseline
}
sub {
vertical-align: baseline
}
legend {
color: #000
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
body,
html {
width: 100%;
height: 100%;
font-family: 'scnr_grotesklight', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga"0;
}
body {
font-size: 15px;
position: relative;
}
a {
text-decoration: none;
}
body,
a {
color: #080a15;
}
* {
outline: none;
}
img {
vertical-align: bottom;
}
a {
text-decoration: none;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
}
.in {
position: relative;
height: 100%;
width: 100%;
}
@font-face {
font-family: 'scnr_grotesklight';
src: url(//copain-grp.jp/wp-content/themes/copain/fonts/scnrgrotesk-light.woff2) format('woff2'), url(//copain-grp.jp/wp-content/themes/copain/fonts/scnrgrotesk-light.woff) format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'i';
src: url(//copain-grp.jp/wp-content/themes/copain/fonts/i.eot?bry259);
src: url(//copain-grp.jp/wp-content/themes/copain/fonts/i.eot?bry259#iefix) format('embedded-opentype'), url(//copain-grp.jp/wp-content/themes/copain/fonts/i.ttf?bry259) format('truetype'), url(//copain-grp.jp/wp-content/themes/copain/fonts/i.woff?bry259) format('woff'), url(//copain-grp.jp/wp-content/themes/copain/fonts/i.svg?bry259#i) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="i-"],
[class*=" i-"] { font-family: 'i' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.i-right:before {
content: "\e903";
}
.i-left:before {
content: "\e904";
}
.i-up:before {
content: "\e905";
}
.i-down:before {
content: "\e906";
}
.i-tw:before {
content: "\74";
}
.i-brand:before {
content: "\74";
}
.i-tweet:before {
content: "\74";
}
.i-social:before {
content: "\74";
}
.i-inst:before {
content: "\69";
}
.i-brand2:before {
content: "\69";
}
.i-social2:before {
content: "\69";
}
.i-fb:before {
content: "\66";
}
.i-brand3:before {
content: "\66";
}
.i-social3:before {
content: "\66";
}
.spacer {
display: block;
width: 100%;
clear: both;
}
p {
line-height: 1.85em;
opacity: 0.8;
}
input,
button,
textarea,
select {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
}
section,
label {
display: block;
}
b,
strong {
font-weight: bold;
}
header {
height: 0;
} .is_scrolled .toggle .in div,
.support-header-body li a.active,
.toggle-link,
.buttons .hr {
background: #6a6b75;
}
.slider-controls .i {
color: #6a6b75;
} .buttons {
display: block;
width: 120px;
line-height: 60px;
height: 60px;
overflow: hidden;
}
.buttons span {
display: block;
}
.buttons .hr {
position: absolute;
bottom: 0;
left: 0;
height: 2px;
width: 100%;
}
.buttons .txt {
font-weight: 400;
font-family: 'Roboto', sans-serif;, sans-serif;
opacity: 0.5;
letter-spacing: 0.05em;
}
.body {
width: 100%;
margin: 0 auto; box-sizing: border-box;
}
.body,
.body.thin,
.section-products .body { max-width: 977px;
width: 50.89vw;
}
.body-inside {
margin: 0 auto;
padding: 0 120px;
width: 100%;
box-sizing: border-box;
}
.add-bg-white {
background: #fff;
}
.add-bg-gray {
background: #f3f3f3;
}
.add-bg-midblue {
background: #080a15;
color: #fff;
}
.side {
position: absolute;
left: 0;
top: 150px;
width: 400px;
line-height: 60px;
height: 60px;
font-size: 0.85vw;
opacity: 0.6;
text-align: center;
margin-left: -200px;
transform: rotate(-90deg);
}
.side.side-right {
left: auto;
right: 0;
margin-left: 0px;
margin-right: -200px;
transform: rotate(90deg);
}
.section-products .side-left {
top: 420px;
}
.section-products .side-right {
top: 420px;
}
.contents {
overflow: hidden;
width: 100%;
transition: all 0.8s;
}
.scroll {
background: #fff;
}
.first-view .slider-controls {
position: absolute;
right: 0;
} .slider-controls,
.controls-num {
display: inline-block;
vertical-align: top;
}
.slider-controls {
font-size: 0;
height: 60px;
}
.slider-controls .js-slider-to {
display: inline-block;
vertical-align: top;
text-align: center;
line-height: 60px;
height: 60px;
width: 60px;
font-size: 1.6rem;
background: #fff;
cursor: pointer;
}
.slider-controls .i {
opacity: 1;
position: relative;
z-index: 2;
}
.js-slider-to {
cursor: pointer;
}
.main-title {
font-size: 2.343vw;
line-height: 1.467em;
}
.subpages .main-title {
font-size: 5vw;
}
.js-slider-to > .in {
display: block;
overflow: hidden;
}
.js-slider-to .bg {
display: block;
height: 100%;
width: 100%;
position: absolute;
z-index: 1;
background: #f3f3f3;
top: 0;
left: 0;
}
.js-slider-hover-left .bg,
.js-slider-hover-right .bg {
transform: translate(-100%, 0);
} .js-hover {
overflow: hidden;
}
.js-hover > .in {
display: block;
}
.js-hover .bg {
display: block;
height: 101%;
width: 101%;
position: absolute;
z-index: 1;
background: #272727;
top: 0;
left: 0;
}
.menu .js-hover .bg {
height: 101%;
background: #b9b9b9;
}
.toggle-link .txt {
position: relative;
z-index: 2;
} @media screen and (min-width:768px) {
.logo {
display: block;
width: 166px;
height: 30.92px;
text-indent: -9999px;
background: url(https://copain-grp.jp/wp-content/themes/copain/images/logo02.svg) center no-repeat;
background-size: cover;
background-position: center top;
position: absolute;
left: 0;
top: 50%;
margin-top: -15px;
}
} .header .logo {
z-index: 2;
}
.nav {
text-align: right;
font-size: 0;
}
.nav li {
display: inline-block;
vertical-align: top;
}
.nav li a {
padding: 0 20px;
font-size: 1.45rem; display: block;
color: #fff;
}
.nav-ol {
padding-right: 80px;
} .toggle .in div {
background: #fff;
position: absolute;
}
.toggle {
cursor: pointer;
height: 60px;
width: 60px;
position: fixed;
top: 25px;
right: 50px;
box-sizing: border-box;
z-index: 99;
}
.toggle-in { padding: 24px 23px 24px 22px;
width: 15px;
height: 12px;
position: relative;
}
.toggle-in > div {
height: 2px;
width: 100%;
}
.t2 {
margin: 3px 0;
}
.toggle-in > div.t4 {
top: 50%;
left: 50%;
position: absolute;
height: 16px;
width: 16px;
margin: -8px 0 0 -8px;
}
.t4 > .in > div {
opacity: 0;
transition: all 0.6s;
background: #fff;
position: absolute;
}
.t4 > .in > div.t4-1 {
transition-delay: 0.0s;
transform: translate(0px, -5px);
top: 0;
left: 50%;
height: 5px;
width: 2px;
margin-left: -1px;
}
.t4 > .in > div.t4-2 {
transition-delay: 0.02s;
transform: translate(-5px, 0px);
top: 50%;
left: 0;
width: 5px;
height: 2px;
margin-top: -1px;
}
.t4 > .in > div.t4-3 {
transition-delay: 0.04s;
transform: translate(5px, 0px);
top: 50%;
right: 0;
width: 5px;
height: 2px;
margin-top: -1px;
}
.t4 > .in > div.t4-4 {
transition-delay: 0.06s;
transform: translate(0px, 5px);
bottom: 0;
left: 50%;
height: 5px;
width: 2px;
margin-left: -1px;
}
.t4 {
transition: all 0.6s;
opacity: 0;
transform: rotate(45deg);
}
.t1 > .in > div,
.t2 > .in > div,
.t3 > .in > div {
opacity: 1;
transition: all 0.6s;
}
.is_menu_opened .t4 {
opacity: 1;
}
.t3 > .in > div.t1-1 {
transition-delay: 0.0s;
}
.t3 > .in > div.t1-2 {
transition-delay: 0.02s;
}
.t3 > .in > div.t2-1 {
transition-delay: 0.04s;
}
.t3 > .in > div.t2-2 {
transition-delay: 0.06s;
}
.t3 > .in > div.t3-1 {
transition-delay: 0.08s;
}
.t3 > .in > div.t3-2 {
transition-delay: 0.1s;
}
.is_menu_opened .t1 > .in > div,
.is_menu_opened .t2 > .in > div,
.is_menu_opened .t3 > .in > div {
opacity: 0;
transform: translate(0px, 5px);
}
.is_menu_opened .t4 > .in > div.t4-1,
.is_menu_opened .t4 > .in > div.t4-2,
.is_menu_opened .t4 > .in > div.t4-3,
.is_menu_opened .t4 > .in > div.t4-4 {
transform: translate(0px, 0px);
opacity: 1;
}
.t1-2,
.t2-2,
.t3-2 {
height: 2px;
background: #fff;
width: 10px;
position: absolute;
right: 0;
top: 0;
}
.t1-1,
.t2-1,
.t3-1 {
height: 2px;
background: #fff;
width: 2px;
position: absolute;
left: 0;
top: 0;
}
.is_menu_opened .toggle {
position: fixed;
}
.is_scrolled .toggle {
right: 50px;
position: fixed;
}
.is_scrolled .toggle-in {
background: #f3f3f3;
}
.is_menu_opened.is_scrolled .toggle-in {
background: none;
}
.is_menu_opened.is_scrolled .toggle .in div {
background: #fff;
} .logo-footer {
display: block;
padding-right: 60px;
}
.logo-footer span {
height: 30px;
width: 85px;
display: block;
background: url(//copain-grp.jp/wp-content/themes/copain/css/images/logo_black.png) no-repeat center;
background-size: cover;
text-indent: -9999px;
}
.sitemap {
width: 180px;
font-size: 0;
}
.sitemap li {
display: inline-block;
vertical-align: top;
}
.sitemap li a {
display: block;
line-height: 30px;
height: 30px;
width: 90px;
font-size: 1.2rem;
}
.sitemap-ol {
float: left;
width: 360px;
} .links {
float: right;
width: 420px;
}
.links .toggle-link {
width: 120px;
}
.sns {
font-size: 0;
}
.sns li {
display: inline-block;
vertical-align: top;
}
.sns li a {
display: block;
width: 40px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 1.4rem;
}
address {
font-size: 1.2rem;
width: 180px;
text-align: center;
display: block;
}
.toggle-link {
width: 180px;
text-align: center;
height: 60px;
line-height: 60px;
color: #fff;
display: block;
font-size: 1.5rem;
font-family: 'Roboto', sans-serif;, sans-serif;
clear: both;
}
.js-change-lang {
display: none;
}
.desktop .footer .sitemap li a,
.desktop .footer .sns li a {
opacity: 0.6;
transition: opacity 0.6s;
}
.desktop .footer .sitemap li a:hover,
.desktop .footer .sns li a:hover {
opacity: 1;
}  .first-view {
height: 100vh;
}
.main-title {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
margin-top: -1.5em;
z-index: 3;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main-title {
position: absolute;
top: 48%;
left: 0%;
right: 0;
color: #fff;
letter-spacing: 0;
margin-top: -1.5em;
z-index: 3;
margin-left: auto;
margin-right: auto;
}
.main-title span {
display: block;
font-family: 'Yantramanav', sans-serif;
font-size: 12px;
margin-top: 1.2vw;
line-height: 1.3;
}
@media screen and (min-width:768px) {
.main-title {
width: 768px;
}
}
.canvas-slider {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.first-view .controls-ol,
.pagemainimg .controls-ol {
position: absolute;
z-index: 4;
bottom: 0;
}
body.home .first-view .controls-ol {
width: 100%;
}
body.single .controls-ol,
body.archive .controls-ol {
display: none;
}
.contact .controls-ol,
.privacypolicy .controls-ol {
display: none;
}
.controls-in {
height: 60px;
line-height: 60px;
}
.pagemainimg .controls-in {
height: 60px;
line-height: 36px;
}
.pagemainimg .controls-in img {
width: 100px;
}
.controls-num-in {
display: inline-block;
vertical-align: top;
line-height: 60px;
width: 30px;
text-align: center;
cursor: pointer;
font-size: 1.3rem;
position: relative;
opacity: 0.4;
font-weight: 400;
color: #080a15;
font-family: 'Roboto', sans-serif;, sans-serif;
overflow: hidden;
transition: all 0.6s;
}
.controls-num-in .n {
display: block;
text-align: center;
}
.controls-num-in.active {
opacity: 1;
}
.controls-num-in .hr {
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: #080a15;
left: 0;
opacity: 0;
transform: scale(0, 1);
transition: all 0.6s;
transform-origin: center left;
}
.controls-num-in.active .hr {
opacity: 1;
transform: scale(1);
}
.first-view .controls-num {
position: absolute;
right: 20px;
top: 0;
}
.scroll-to-down {
opacity: 0.6;
font-size: 1.2rem;
padding: 0 30px;
box-sizing: border-box;
cursor: pointer;
} .sub-title {
font-size: 2.8vw;
font-weight: 500;
line-height: 60px;
}
.two-col-layout {
height: 100%;
width: 100%;
}
.cols {
height: 100%;
width: 50%;
float: left;
}
.section-concept-body .cols {
width: 49%;
}
@media screen and (max-width:680px) {
.section-concept-body .cols {
width: 100%;
}
}
.cols-text {
height: 100%; width: 67%;
margin: 0 auto;
padding: 0 80px;
min-width: 280px;
box-sizing: initial;
}
.slider-concept .js-background-img {
background-size: cover;
background-position: top center;
height: 100%;
}
.slider-concept {
position: absolute;
right: 0;
bottom: 20px;
width: 48.3vw;
}
.page-id-63 .slider-concept img {
width: 40.3vw;
}
@media screen and (max-width:767px) {
.page-id-63 .slider-concept img {
width: 100%;
}
}
.slider-concept .js-slider-wrap {
position: absolute;
right: 0;
top: 0;
width: 50%;
}
.slider-concept,
.slider-concept .js-slider-wrap {
max-height: 600px;
}
.slider-concept .js-slider-wrap.slider-concept-left {
right: 50%;
top: 60px;
}
.js-slider-img {
height: 100%;
background-size: cover;
background-position: center;
float: left
}
.js-slider-move {
height: 100%;
width: 100%;
}
.js-slider-wrap > .in {
overflow: hidden;
}
.slider-concept .slider-controls {
position: absolute;
z-index: 10;
top: 50%;
left: 50%;
margin: 0 0 0 -60px;
}
.slider-concept .controls-num {
position: absolute;
bottom: -120px;
left: 50%;
padding: 0 20px;
}
.js-slider-wrap {
background: #6a6b75;
}
.js-slider-img {
opacity: 0;
transition: opacity 0.6s;
}
.js-slider-img.is_bg_loaded {
opacity: 1;
}
.teams-ol {
padding: 30px;
background: #fff;
} .section-products .sub-header,
.section-products .sub-footer {
padding: 0 80px;
}
.support-header-hr {
height: 2px;
width: 48px;
background: #4d4f63;
display: block;
position: absolute;
left: 0;
top: 50%;
margin-top: -1px;
}
.support-header-body {
font-size: 0;
box-sizing: border-box;
padding-left: 80px;
}
.support-header-body li {
display: inline-block;
vertical-align: top;
}
.support-header-body li a {
line-height: 22px;
display: block;
text-decoration: underline;
font-family: 'Roboto', sans-serif;, sans-serif;
font-size: 1.4rem;
padding: 0 15px;
opacity: 0.6;
}
.support-header-body li a.active {
opacity: 1;
color: rgba(255, 255, 255, 0.8);
margin-left: 15px;
}
.products-ol {
margin: 0 -8px;
}
.products {
float: left;
width: 33.333%;
box-sizing: border-box;
padding: 8px;
}
.products-thumb {
display: block;
height: 420px;
position: relative;
}
.products-thumb span {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.products-cats {
height: 3.2em;
}
.products-cats li {
padding-right: 12px;
padding-bottom: 8px;
display: inline-block;
vertical-align: baseline;
}
.products-cats li a {
font-size: 1.2rem;
text-decoration: underline;
}
.products-cats li a.category-link {
color: #b4362a;
}
.products-cats li p {
font-size: 1.2rem;
line-height: 1.4em;
margin-bottom: 0;
}
.products .products-cats li {
display: block;
}
.products-body {
padding: 30px;
background: #fff;
}
.products-title a {
font-weight: bold;
height: 4em;
font-size: 1.2vw;
line-height: 1.4em;
overflow: hidden;
margin: 1em 0;
display: block;
}
.products-price {
display: block;
opacity: 0.6;
}
.products-price span {
display: inline-block;
vertical-align: bottom;
margin-right: 0.1em;
}
.yen {
font-size: 2rem;
font-weight: 400;
font-family: 'Roboto', sans-serif;
}
.tax {
font-size: 1.4rem;
font-family: 'Roboto', sans-serif;
}
.buttons-right {
float: right;
}
.section-products .buttons-right {
padding-right: 20px;
} .desktop .products-thumb:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #f3f3f3;
opacity: 0;
transition: all .4s ease-in-out;
background: rgba(255, 255, 255, 0.25);
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(right bottom, left top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(40%, rgba(255, 255, 255, 0.1)), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 100%);
}
.desktop .products:hover {
z-index: 3;
}
.desktop .products:hover .products-thumb:before {
opacity: 1;
box-shadow: -5px -5px 60px 0 rgba(20, 20, 20, 0.05);
} .products-thumb:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform-origin: 0% 100%;
background: #f3f3f3;
transform: scaleY(0);
transition: all .4s ease-in-out;
}
.products-thumb.go-detail:after {
transform: scaleY(1);
} .slider-middle .js-slider-wrap,
.slider-middle.js-canvas-slider-ol {
height: 70vh;
}
.slider-middle-ol {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slider-middle-in {
padding: 0 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.slider-middle-ol .slider-controls {
position: absolute;
z-index: 3;
bottom: 0;
left: 0;
}
.slider-middle-ol .controls-num {
position: absolute;
z-index: 3;
left: 120px;
bottom: -60px;
}
.slider-middle-bg {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
} .sub-header-left {
width: 37.5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sub-header-cols .cell {
vertical-align: top;
}
.bnr {
float: left;
padding-right: 40px;
width: 33.3333%;
display: block;
}
.bnr span {
display: block;
}
.bnr .js-background-img {
width: 100%;
height: 420px;
background-size: cover;
background-position: center;
}
.panels-inside .t,
.bnr .t {
position: absolute;
bottom: 0;
padding: 0 20px;
line-height: 60px;
z-index: 4;
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.05em;
color: #fff;
font-family: 'Roboto', sans-serif;, sans-serif;
pointer-events: none;
} .connected-header-bg {
height: 480px;
width: 100%;
background-position: center;
background-size: cover;
position: absolute;
top: -50%;
}
.connected {
width: 25%;
display: block;
height: 240px;
float: left
}
.connected .in {
display: block;
}
.connected-title {
z-index: 3;
position: relative;
text-align: center;
}
.connected .js-background-img {
display: block;
background-size: cover;
background-position: center;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.support-header-title {
line-height: 60px;
color: #fff;
font-size: 1.8rem;
font-family: 'Roboto', sans-serif;, sans-serif;
font-weight: 400;
}
.section-connected .support-header {
position: absolute;
top: -90px;
left: 0;
}
.connected-ol {
margin-top: 25%;
}
.section-connected .support-header-hr {
background: #fff;
}
.connected-title .cell span {
color: #fff;
display: block;
text-align: center;
}
.connected-title .account {
font-size: 1.3rem;
margin-top: 1em;
}
.connected-title .i {
font-size: 2rem;
}
.re .connected-title .cell span {
color: #434343;
} .bnr-hover {
position: relative;
}
.desktop .bnr-hover:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 1;
transition: all .4s ease-in-out;
background: rgba(255, 255, 255, 0.25);
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 100%);
background: -webkit-gradient(right bottom, left top, color-stop(0%, rgba(255, 255, 255, 0.4)), color-stop(40%, rgba(255, 255, 255, 0.1)), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0.2)));
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 100%);
background: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 100%);
background: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 100%);
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.2) 100%);
}
.desktop .bnr-hover:hover {
z-index: 3;
}
.desktop .bnr-hover:hover:before {
opacity: 1;
box-shadow: 0 -1px 30px 0 rgba(20, 20, 20, 0.05);
} .sub-sub-pages .first-view {
height: 60vh;
}
.sub-sub-pages .main-title-ol {
height: 100%;
}
.sub-sub-pages.subpages .main-title {
width: 100%;
font-size: 5vw;
margin-bottom: 0.5em;
}
.main-sub-title span {
display: block;
color: #fff;
opacity: 0.6;
padding-bottom: 1em;
}
.main-title-spacer {
display: block;
width: 100%;
height: 24vh;
} .subpages .first-view .slider-controls {
display: none;
}
.sub-sub-title span {
display: block;
font-size: 2.8rem;
opacity: 0.9;
}
.subpages .main-title {
left: 0;
width: 100%;
position: relative;
top: 0;
margin: 0;
}
.main-title-ol {
position: absolute;
z-index: 3;
width: 100%;
bottom: 0;
}
.em {
font-style: italic;
}
.js-canvas-fv {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.main-title-ol .hr {
display: block;
height: 3px;
width: 45px;
background: #fff;
}
.slider-large .js-slider-wrap,
.slider-large.js-canvas-slider-ol {
height: 100%;
}
.slider-middle,
.slider-large-ol > .body {
z-index: 2;
position: relative;
}
.slider-large-ol {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
}
.slider-large-ol .slider-controls {
position: absolute;
z-index: 3;
bottom: 0;
left: -60px;
}
.slider-large-ol .controls-num {
position: absolute;
z-index: 3;
left: 120px;
bottom: -60px;
}
.slider-large-bg {
position: absolute;
bottom: 0;
left: 0;
background: #fff;
}
.cols-left .cols-in {
padding: 0 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-img {
position: absolute;
right: 0;
top: 50%;
margin-top: -300px;
width: 50%;
height: 600px;
}
.floating-img .in {
padding: 0 0 0 60px;
box-sizing: border-box;
}
.floating-img.floating-img-left .in {
padding: 0 60px 0 0;
}
.floating-img.floating-img-single .in {
padding: 0 60px;
}
.floating-img .background-img {
height: 100%;
width: 100%;
background-size: cover;
}
.teams {
float: left;
width: 33.333%;
height: 240px;
}
.teams .background-img {
display: block;
height: 100%;
width: 100%;
background-color: #fff;
background-size: contain;
background-repeat: no-repeat;
}
.section-team {
padding: 0 60px;
}
.section-team-body {
background-color: #cac6c1;
background-size: 1280px;
background-repeat: no-repeat;
background-position: bottom center;
} .panels-inside span,
.panels-inside {
display: block;
}
.panels-inside {
height: 300px;
width: 100%;
}
.panels-ol {
padding: 60px 40px 0 40px;
margin: 0 auto;
max-width: 1040px;
}
.panels-inside .background-img {
height: 100%;
width: 100%;
background-position: center bottom;
background-size: cover;
background-repeat: no-repeat;
}
.panels {
float: left;
box-sizing: border-box;
}
.panles-1-4 {
padding-right: 40px;
width: 25%;
}
.panles-1-2 {
width: 50%;
} .box-text-slider,
.box-text-slider-ol {
height: 600px;
}
.box-text-slider {
position: absolute;
top: 0;
opacity: 0;
}
.box-text-slider.active {
opacity: 1;
}
.cols-right {
float: right;
}
.cols-right .cols-in {
padding: 0 60px;
}
.floating-img.floating-img-left {
right: auto;
left: 0;
}
.section-hr-contents .cols-in {
height: 600px;
}
.hr-text-ol {
box-sizing: border-box;
padding: 0 120px;
}
.hr-text {
opacity: 0.1;
font-size: 6vw;
line-height: 1em;
text-align: left;
text-align: center;
display: block;
margin-bottom: 0.35em;
} .pulldown-ol {
padding: 30px 0 60px;
}
.pulldown-ol .sub-sub-title {
opacity: 0.6;
margin-top: 0;
}
.pulldown {
position: relative;
z-index: 2;
margin: 20px 0;
font-size: 1.8vw;
height: 80px;
}
.pulldown span {
font-family: 'Roboto', sans-serif;, sans-serif;
height: 80px;
line-height: 80px;
display: block;
font-weight: 400;
cursor: pointer;
}
.pulldown span.t {
position: relative;
z-index: 2;
}
.pulldown span.bg {
position: absolute;
z-index: 1;
top: 0;
left: -100%;
display: block;
background: rgba(0, 0, 0, 0.05);
height: 100%;
width: 100%;
}
.pulldown span.in {
overflow: hidden;
padding: 0 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #d3d3d3;
border-right: 1px solid #d3d3d3;
border-left: 1px solid #d3d3d3;
}
.pulldown li {
background: #fff;
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
overflow: hidden;
}
.pulldown-ul {
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.pulldown-ul span.t {
font-weight: 300;
font-size: 1.4vw;
}
.pulldown span.pulldown-change {
display: block;
position: absolute;
right: 20px;
top: 50%;
background: #272727;
width: 120px;
height: 30px;
line-height: 30px;
color: #fff;
font-size: 1.2rem;
text-align: center;
margin-top: -15px;
z-index: 3;
}
.products-footer {
margin-bottom: 20px;
overflow: hidden;
}
.products-loaded {
font-size: 0;
text-align: center;
}
.products-loaded span {
display: inline-block;
vertical-align: bottom;
font-family: 'Roboto', sans-serif;, sans-serif;
margin-bottom: -0.35em;
}
.products-loaded .n {
font-size: 2vw;
padding: 0 0.1em;
}
.products-loaded .t {
font-size: 1.5vw;
opacity: 0.6;
padding-left: 0.5em;
}
.products-loadmore {
display: block;
height: 70vh;
width: 100%;
padding: 0 60px;
}
.products-loadmore .table {
background-size: cover;
background-repeat: no-repeat;
}
.products-loadmore .t {
display: block;
font-weight: 500;
font-family: 'Roboto', sans-serif;, sans-serif;
color: rgba(255, 255, 255, 0.9);
letter-spacing: 0.05em;
line-height: 60px;
font-size: 1.5rem;
height: 60px;
width: 120px;
text-align: center;
margin: 0 auto;
border-bottom: 2px solid #fff;
}
.section-products-list .products {
float: left;
width: 100%;
box-sizing: border-box;
padding: 0;
margin-bottom: 60px;
}
.pulldown-current {
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background: #fff;
border-top: 1px solid #d3d3d3;
box-sizing: border-box;
overflow: hidden;
}
.current-category {
display: block;
overflow: hidden;
line-height: 1.2em;
height: 1.2em;
}
.current-category span {
display: block;
line-height: 1.2em;
height: 1.2em;
}
.current-category .in {
height: 200%;
}
.pulldown span.current-category {
margin: 20px 0;
line-height: 40px;
height: 40px;
}
.pulldown span.current-category .before,
.pulldown span.current-category .after {
line-height: 40px;
height: 40px;
}
.pulldown span.current-category .in {
border: none;
padding: 0;
} .inf-layout-ol {
margin-bottom: 30px;
}
.sub-title .logo-black {
display: block;
width: 85px;
height: 30px;
background: url(//copain-grp.jp/wp-content/themes/copain/css/images/logo_black.png) no-repeat center;
background-size: cover;
}
.input-ol .input-head,
.input-ol .input-body,
.inf-layout dd,
.inf-layout dt {
box-sizing: border-box;
padding-top: 30px;
padding-bottom: 30px;
line-height: 1.5em;
}
.input-ol .input-head,
.inf-layout dt {
padding-right: 15px;
clear: both;
float: left;
position: relative;
}
.input-ol .input-body,
.inf-layout dd {
opacity: 0.8;
position: relative;
}
.input-ol .input-head:after,
.input-ol .input-body:after,
.inf-layout dt:after,
.inf-layout dd:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
}
.input-ol .input-head:after,
.inf-layout dt:after {
z-index: 2;
height: 2px;
width: 100%;
background: rgba(0, 0, 0, 1);
}
.input-ol .input-body:after,
.inf-layout dd:after {
width: 100%;
z-index: 1;
height: 1px;
background: rgba(0, 0, 0, 0.1);
}
.inf-layout.inf-layout-text dl {
clear: both;
}
.inf-layout.inf-layout-text dt {
font-size: 1.5rem;
line-height: 1.8em;
}
.inf-layout.inf-layout-text dd {
line-height: 1.8em;
}
.slider-middle-ol .slider-controls {
bottom: 0;
}
.is_scrolling_on .js-slider-controls-fixed-ol {
position: fixed;
z-index: 10;
top: 50%;
left: 0;
width: 100%;
}
.is_scrolling_on .js-slider-controls-fixed {
max-width: 1320px;
width: 100%;
margin: 0 auto;
padding: 0 120px;
box-sizing: border-box;
}
.is_scrolling_on .js-slider-controls-fixed .in {
margin-left: -60px;
}
.slider-middle-ol .is_scrolling_over .slider-controls,
.slider-large-ol .is_scrolling_over .slider-controls {
top: auto;
bottom: 0;
}
.inf-layout-icons li {
display: inline-block;
vertical-align: middle;
padding-right: 0.5em;
}
.slider-middle-ol .is_scrolling_on .js-slider-controls-fixed-ol {}
.slider-middle-ol .is_scrolling_on .js-slider-controls-fixed {
max-width: 100%;
}
.desktop .inf-layout dd a,
.desktop .inf-layout dt a {
opacity: 0.6;
transition: all .6s;
}
.desktop .inf-layout dd a:hover,
.desktop .inf-layout dt a:hover {
opacity: 1;
} .input-ol {
clear: both;
}
.input-ol .input-head {
display: block;
font-weight: bold;
}
.input-ol-bottom {
border-top: 2px solid rgba(0, 0, 0, 1);
padding-top: 30px;
}
.input-body input {
width: 100%;
margin-bottom: 5px;
}
.input-body textarea {
width: 100%;
height: 180px;
resize: none;
}
.inf-layout dt {
width: 180px;
}
.inf-layout dd {
margin-left: 180px;
}
.input-ol .input-head,
.inf-layout.inf-layout-text dt {
width: 280px;
padding-right: 30px;
}
.input-ol .input-body,
.inf-layout.inf-layout-text dd {
margin-left: 280px;
}
.mwform-checkbox-field label {
display: flex;
align-items: center;
line-height: 1.45em;
}
.input-ol .input-body-confirm {
float: left;
width: 60%;
font-size: 1.3rem;
}
.input-ol .input-body-confirm label {
cursor: pointer;
}
.input-ol .input-body-confirm input {
border: 2px solid #000;
display: block;
width: 30px;
height: 32px;
border-radius: 4px;
float: left;
margin: 0.25em 1em 0.25em 0;
}
.input-ol .input-body-confirm input:after {
transition: all .3s ease-in-out;
}
.input-ol .input-body-confirm input:checked:after {
content: '';
display: block;
width: 10px;
height: 10px;
background: #6a6b75;
margin: 9px 8px;
}
.desktop .input-ol .input-body-confirm label:hover input:not(:checked):after {
content: '';
display: block;
width: 10px;
height: 10px;
background: #6a6b75;
margin: 9px 8px;
opacity: 0.2;
}
.input-ol .input-body-submit {
opacity: 1;
float: right;
text-align: right;
}
.input-body-submit input {
width: 100%;
line-height: 60px;
height: 60px;
color: #fff;
cursor: pointer;
display: inline-block;
vertical-align: top;
position: relative;
z-index: 2;
}
.input-submit-ol {
float: right;
display: block;
width: 180px;
line-height: 60px;
height: 60px;
}
.error-title {
background: rgba(47, 40, 40, 0.6);
}
.complete-title {
background: rgba(60, 60, 60, 0.4);
} .inf-layout.inf-layout-text p {
opacity: 1;
margin-bottom: 1em;
}
.inf-layout.inf-layout-text dd > p {
margin-bottom: 2em;
}
.inf-layout.inf-layout-text li {
margin-bottom: 1em;
position: relative;
}
.inf-layout.inf-layout-text ul,
.inf-layout.inf-layout-text ol {
box-sizing: border-box;
padding-left: 2em;
counter-reset: my-counter;
margin-bottom: 1em;
overflow: hidden;
}
.inf-layout.inf-layout-text ul > li:before {
content: '';
display: block;
position: absolute;
left: -20px;
top: 11px;
width: 6px;
height: 6px;
background: #000;
border-radius: 100%;
}
.inf-layout.inf-layout-text ul ul > li:before {
background: none;
border: 1px solid #000;
border-radius: 100%;
}
.inf-layout.inf-layout-text ol > li:before {
content: counter(my-counter);
counter-increment: my-counter;
position: absolute;
left: -2em;
top: 0;
font-family: 'Roboto', sans-serif;, sans-serif;
font-weight: bold;
} .simple-slider {
display: none !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.simple-slider .js-slider-wrap,
.simple-slider .js-slider {
width: 100%;
height: 100%;
}
.is_not_webgl .simple-slider {
display: block !important;
}
.is_not_webgl .is_webgl {
display: none !important;
}  .is_item .header .logo {
background-position: center bottom;
}
.is_item .nav li a {
color: #080a15;
}
.is_item .toggle .in div {
background: #080a15;
}
.is_menu_opened.is_item .toggle .in div {
background: #fff;
}
.is_item .item-first-view {
background: #f3f3f3;
}
.item-side {
position: absolute;
z-index: 1;
top: 50%;
width: 60vh;
height: 40px;
font-size: 0.85vw;
font-size: 1.2rem;
padding: 10px 30px;
border: 1px solid #e4e6e8;
}
.item-side .bg {
background: rgba(8, 10, 21, 0.1);
clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
}
.item-side .txt {
position: relative;
z-index: 2;
display: inline-block;
width: 100%;
height: 100%;
}
.item-side.item-side-left {
left: -30vh;
text-align: left;
margin-left: -1px;
transform: rotate(-90deg);
}
.item-side.item-side-right {
right: -30vh;
text-align: right;
margin-right: -1px;
transform: rotate(-90deg);
}
.item-side .arrow {
position: absolute;
width: 15px;
height: 15px;
}
.item-side.item-side-left .arrow {
right: 0;
top: 15px;
transform: rotate(-90deg);
}
.item-side.item-side-right .arrow {
left: 0;
top: 10px;
transform: rotate(90deg);
}
.item-side .arrow .in {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.item-side .arrow .in .a1-1,
.item-side .arrow .in .a1-2,
.item-side .arrow .in .a2-1,
.item-side .arrow .in .a2-2 {
position: absolute;
display: block;
width: 8px;
height: 1.8px;
right: 2px;
top: 50%;
background: #080a15;
transform-origin: right center;
transition: all .4s ease-in-out;
}
.item-side .arrow .in .a1-1 {
transform: rotate(45deg) translate3d(0, 0, 0);
}
.item-side .arrow .in .a1-2 {
transform: rotate(-45deg) translate3d(0, 0, 0);
}
.item-side .arrow .in .a2-1 {
opacity: 0;
transform: rotate(45deg) translate3d(-75%, 0, 0);
}
.item-side .arrow .in .a2-2 {
opacity: 0;
transform: rotate(-45deg) translate3d(-75%, 0, 0);
}
.item-side.is_hovered .arrow .in .a1-1 {
opacity: 0;
transform: rotate(45deg) translate3d(75%, 0, 0);
}
.item-side.is_hovered .arrow .in .a1-2 {
opacity: 0;
transform: rotate(-45deg) translate3d(75%, 0, 0);
}
.item-side.is_hovered .arrow .in .a2-1 {
opacity: 1;
transform: rotate(45deg) translate3d(0, 0, 0);
}
.item-side.is_hovered .arrow .in .a2-2 {
opacity: 1;
transform: rotate(-45deg) translate3d(0, 0, 0);
}
.item-mainvisual {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
}
.item-mainvisual .background-img {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.item-title-ol {
position: absolute;
width: 100%;
left: 0;
bottom: 120px;
z-index: 2;
}
.item-title-in {
width: 37%;
}
.item-title-ol .body-inside {
padding: 30px;
}
.item-title-ol .body-inside h2 {
font-size: 2.4rem;
margin-bottom: 15px;
}
.item-title-ol .products-price {
margin-bottom: 30px;
}
.item-title-ol p {
opacity: 1;
}
.item-title-ol .yen {
font-size: 2.4rem;
}
.item-title-ol .tax {
font-size: 1.8rem;
}
.btn-shop {
display: inline-block;
box-sizing: border-box;
border: 2px solid #fff;
color: #fff;
border-radius: 30px;
font-weight: bold;
font-size: 1.6rem;
line-height: 4rem;
white-space: nowrap;
transition: all .2s ease-in-out;
}
.btn-shop .bg {
background: #fff;
}
.btn-shop .txt {
padding: 0 30px;
position: relative;
z-index: 2;
top: -1px;
}
.btn-shop.is_hovered {
color: #080a15;
transition: all .4s ease-in-out;
}
.js-background-lazy {
opacity: 0;
transition: opacity 0.6s;
}
.js-background-lazy.is_bg_loaded {
opacity: 1;
}
.section-item-info h2.item-info-title {
font-size: 20vw;
opacity: 0.5;
position: absolute;
left: 0;
top: 30px;
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
color: #fff;
text-align: center;
width: 100%;
}
.section-item-info .two-col-layout {
position: relative;
padding-top: 60px;
}
.section-item-info .cols-left .cols-in {
padding: 30px;
}
.item-info .background-img {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.item-info-single {
width: 100%;
}
.item-info-main {
width: 90%;
}
.item-info-sub {
width: 80%;
position: absolute;
right: -60px;
bottom: -100px;
}
.section-category-theme p {
text-align: justify;
}
.section-category-theme .body-inside {
padding: 0 30px;
} .item-info p {
font-size: 1.3rem;
margin-bottom: 0.5em;
}
.item-info em {
font-style: italic;
}
.item-info strong {
font-weight: bold;
}
.item-info .topic-title {
color: #6a6b75;
margin-bottom: 1.5rem;
font-size: 1.25em;
}
.item-info .products-dl {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
line-height: 1.8em;
}
.item-info .products-dl dt {
width: 30%;
padding: 0 1em 1em 0;
box-sizing: border-box;
font-weight: bold;
clear: both;
}
.item-info .products-dl dd {
width: 70%;
padding: 0 0 1em;
opacity: 0.8;
}
.item-info .products-dl dd li {
margin-bottom: 1em;
}
.item-info .products-list-dl {
position: relative;
padding: 3px 0 3px 15px;
}
.item-info .products-list-dl dt {
position: relative;
margin: 0 0 .75em;
font-weight: bold;
}
.item-info .products-list-dl dt .sub-text {
display: inline-block;
margin: 0 10px;
font-size: 1.1rem;
}
.item-info .products-list-dl dd {
margin: 0 0 1.5em;
opacity: 0.8;
}
.item-info .products-list-dl dt:before,
.item-info .products-list-dl dt:after {
content: '';
display: block;
width: 3px;
height: 3px;
background: #080a15;
position: absolute;
left: -10px;
top: 8px;
}
.item-info .products-list-dl dt:after {
top: 13px;
}
.item-info blockquote {
padding: 24px;
background: #fff;
margin: 1rem -24px;
} .item-info ul li {
margin: 0 0 0.5em;
font-size: 1.25rem;
} .section-related {
padding: 0 60px;
max-width: 1040px;
margin: 0 auto;
}
.section-related h4 {
font-weight: bold;
opacity: 0.6;
}
.related-ol {
margin: 0 -8px;
}
.related-ol .products {
float: left;
width: 25%;
box-sizing: border-box;
padding: 0 8px;
}
.related-ol .products-thumb {
display: block;
height: 420px;
max-width: 320px;
margin: 0 auto;
}
.related-ol .products-thumb span {
display: block;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
}
.related-ol .products-body {
position: absolute;
box-sizing: border-box;
left: 0;
top: 0;
width: 100%;
height: 100%;
visibility: hidden;
} .item-slide {
position: relative;
}
.item-slide .js-zoom {
cursor: pointer;
cursor: crosshair;
cursor: -webkit-zoom-in;
}
.item-slide .background-img {
display: block;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.item-slide-large {
height: 60vw;
}
.item-slide-medium {
padding-bottom: 70%;
}
.two-col-layout .item-slide-medium {
padding-bottom: 132%;
}
.item-slide-medium .in {
position: absolute;
left: 0;
top: 0;
}
.item-slide iframe {
width: 100%;
height: 100%;
}
.item-slide .js-iframe {
cursor: default;
}
.btn-zoom {
visibility: hidden;
position: absolute;
box-sizing: border-box;
z-index: 99;
height: 60px;
width: 60px;
margin: -30px 0 0 -30px;
pointer-events: none;
}
.btn-zoom-in {
padding: 20px;
width: 16px;
height: 16px;
position: relative;
}
.btn-zoom-in > .z {
top: 50%;
left: 50%;
position: absolute;
height: 16px;
width: 16px;
margin: -8px 0 0 -8px;
transition: all 0.6s;
opacity: 0;
}
.btn-zoom-in > .z > .in > div {
opacity: 0;
transition: all 0.6s;
background: #080a15;
position: absolute;
}
.btn-zoom-in > .z > .in > div.z-1 {
transition-delay: 0.0s;
transform: translate(0px, -5px);
top: 0;
left: 50%;
height: 9px;
width: 2px;
margin-left: -1px;
}
.btn-zoom-in > .z > .in > div.z-2 {
transition-delay: 0.02s;
transform: translate(-5px, 0px);
top: 50%;
left: 0;
width: 9px;
height: 2px;
margin-top: -1px;
}
.btn-zoom-in > .z > .in > div.z-3 {
transition-delay: 0.04s;
transform: translate(5px, 0px);
top: 50%;
right: 0;
width: 5px;
height: 2px;
margin-top: -1px;
}
.btn-zoom-in > .z > .in > div.z-4 {
transition-delay: 0.06s;
transform: translate(0px, 5px);
bottom: 0;
left: 50%;
height: 5px;
width: 2px;
margin-left: -1px;
}
.btn-zoom.on {
visibility: visible;
}
.btn-zoom.on .z {
opacity: 1;
}
.btn-zoom.on .z > .in > div.z-1,
.btn-zoom.on .z > .in > div.z-2,
.btn-zoom.on .z > .in > div.z-3,
.btn-zoom.on .z > .in > div.z-4 {
transform: translate(0px, 0px);
opacity: 1;
} .zoom-img-ol {
display: block;
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 999;
}
.zoom-img-in {
width: 100%;
height: 100%;
}
.zoom-img-body {
width: 100%;
position: relative;
transform: matrix(1, 0, 0, 1, 0, 0);
}
.close {
cursor: pointer;
height: 60px;
width: 60px;
position: fixed;
top: 25px;
right: 50px;
box-sizing: border-box;
z-index: 99;
background: #090A14;
}
.close-in {
padding: 24px 23px 24px 22px;
width: 15px;
height: 12px;
position: relative;
}
.close-in > div {
height: 2px;
width: 100%;
}
.close-in > div.t4 {
top: 50%;
left: 50%;
position: absolute;
height: 16px;
width: 16px;
margin: -8px 0 0 -8px;
opacity: 1;
}
.is_zoom_opened .t4 > .in > div.t4-1,
.is_zoom_opened .t4 > .in > div.t4-2,
.is_zoom_opened .t4 > .in > div.t4-3,
.is_zoom_opened .t4 > .in > div.t4-4 {
transform: translate(0px, 0px);
opacity: 1;
} .item-shopbtn-ol {
position: fixed;
z-index: 10;
right: 10px;
bottom: 10px;
transform: translateY(82px);
transform: translateY(calc(100% + 10px));
transition: all .4s ease-in-out;
}
.item-shopbtn-in {
padding: 15px 30px;
}
.item-shopbtn-ol h2 {
display: inline-block;
font-size: 1.4rem;
margin-right: 15px;
}
.item-shopbtn-ol .products-price {
display: inline-block;
margin-right: 30px;
}
.item-shopbtn-ol .products-price .yen {
font-size: 1.4rem;
}
.item-shopbtn-ol .products-price .tax {
font-size: 1.2rem;
}
.item-shopbtn-ol .btn-shop {
float: right;
font-size: 1.3rem;
}
.is_scrolled .item-shopbtn-ol {
transform: translateY(0);
}
.is_itemend .item-shopbtn-ol {
transform: translateY(82px);
transform: translateY(calc(100% + 10px));
}
.is_enter_transition .item-shopbtn-ol {
display: none;
} .menu-ol {
overflow: hidden;
position: fixed;
z-index: 98;
top: 0;
left: -9999px;
height: 100%;
width: 100%;
transition: left 0s 0.8s;
}
.menu-bg {
transform: translate(0px, 100%);
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
background: rgba(84, 85, 86, 0.95);
}
.menu {
z-index: 3;
width: 1000px;
height: 450px;
position: absolute;
top: 50%;
left: 50%;
margin: -225px 0 0 -500px;
}
.menu-header {
width: 40%;
height: 100%;
float: left;
}
.menu-header .logo {
top: 0;
margin: 0;
}
.menu-header .toggle-link {
position: absolute;
bottom: 0;
left: 0;
background: none;
}
.menu-header .toggle-link > .in {
box-sizing: border-box;
border: 1px solid #b9b9b9;
}
.menu-body {
width: 60%;
height: 100%;
float: right;
}
.menu-nav {
margin-bottom: 2rem;
overflow: hidden;
}
.menu-nav a {
line-height: 56px; font-size: 58px;
display: block;
color: rgb(158, 158, 158);
margin-bottom: 20px;
display: block;
vertical-align: top;
}
.menu-side-nav li a,
.menu-sns li a,
.menu-nav a,
.lang a .t {
transition: color 0.6s;
}
.lang .hr {
transition: all 0.6s;
}
.menu-side-nav li a:hover,
.menu-sns li a:hover,
.menu-nav a:hover,
.lang a:hover .t,
.menu-nav .active a {
color: rgba(255, 255, 255, 1);
}
.js-hover-menu {
display: block;
overflow: hidden;
}
.nav li,
.nav li a {
transition: all 0.6s;
}
.nav li a {
opacity: 0.6;
}
.nav li.active a {
font-weight: bold;
opacity: 1;
}
.nav li a:hover {
opacity: 1;
}
.menu-sns {
position: absolute;
bottom: 0;
left: 0;
}
.menu-sns li,
.menu-side-nav li {
display: inline-block;
vertical-align: top;
font-size: 0;
}
.menu-sns li a {
line-height: 60px;
height: 60px;
}
.menu-side-nav li a {
padding-right: 30px;
display: block;
font-size: 1.4rem;
color: rgb(158, 158, 158);
}
.menu-side-nav li.active a {
color: rgba(255, 255, 255, 1)
}
.menu-sns li a {
padding-right: 30px;
display: block;
font-size: 2rem;
color: rgb(158, 158, 158);
}
.lang {
margin-bottom: 10px;
}
.lang a {
display: block;
line-height: 30px;
text-align: center;
width: 26px;
padding: 10px 0;
box-sizing: border-box;
overflow: hidden;
}
.lang .t {
color: rgba(255, 255, 255, 0.4);
}
.lang span {
display: block;
}
.lang .hr {
position: absolute;
height: 1px;
width: 100%;
bottom: 0;
left: 0;
transform: translate(-100%, 0);
background: #fff;
}
.lang .active .t {
color: rgba(255, 255, 255, 1);
}
.lang .active .hr {
transform: translate(0%, 0);
}
.widget_wpglobus a img,
.widget_wpglobus a .name,
.widget_wpglobus a .code:before,
.widget_wpglobus a .code:after {
display: none !important;
}
.is_menu_opened .menu-ol {
left: 0;
transition: left 0s 0s;
}
.menu .js-fade-in {
opacity: 0;
transform: translate(0px, 100%);
}
.menu-mask,
.menu-background .js-background-img,
.menu-background-img,
.menu-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.menu-mask {
z-index: 100;
display: none;
}
.menu-background {
position: fixed;
z-index: 1;
top: 0;
left: -9999px;
width: 100%;
height: 100%;
background: none;
}
.is_menubg_opened .menu-background {
z-index: 97;
left: 0;
}
.is_page_transition .menu-mask {
display: block;
}
.menu-background {
background: rgba(84, 85, 86, 1);
}
.menu-background-img .js-background-img {
opacity: 0;
z-index: 1;
background-size: cover;
background-position: center;
}
.is_menubg_opened .menu-background-img .js-background-img {
transition: opacity 1s;
}
.is_not_menued .menu-background-img .js-background-img {
transition: opacity 0s;
}
.menu-background-img.active .js-background-img {
opacity: 0.1;
z-index: 2;
} .js-loading-mask {
z-index: 100;
}
.loading-mask {
position: fixed;
z-index: 1000;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
overflow: hidden;
}
.loading-mask .in {
position: fixed;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #6a6b75
}
.js-transiiton-mask {
z-index: 100;
}
.transiiton-mask {
position: fixed;
z-index: 1000;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #ccc
}
.is_menu_opened .js-canvas-slider {
opacity: 1;
transition: opacity 0s;
}
.toggle-in {
opacity: 0;
transform: translate(0px, 60px);
transition: opacity 0.6s, transform 0.6s, background 0.2s;
}
.slider-middle-bg,
.header .logo,
.header .nav,
.main-sub-title, .first-view .main-title {
opacity: 0;
transform: translate(0px, 60px);
transition: opacity 0.6s, transform 0.6s;
}
.is_page_loaded .toggle-in,
.is_page_loaded .slider-middle-bg,
.is_page_loaded .header .logo,
.is_page_loaded .header .nav,
.is_page_loaded .main-sub-title, .is_page_loaded .first-view .main-title {
opacity: 1;
transform: translate(0px, 0px);
}
.is_enter_transition .toggle-in,
.is_enter_transition .slider-middle-bg,
.is_enter_transition .header .logo,
.is_enter_transition .header .nav,
.is_enter_transition .main-sub-title, .is_enter_transition .first-view .main-title {
opacity: 0;
transform: translate(0px, -60px);
}
.is_leave_transition .toggle-in,
.is_leave_transition .slider-middle-bg,
.is_leave_transition .header .logo,
.is_leave_transition .header .nav,
.is_leave_transition .main-sub-title, .is_leave_transition .first-view .main-title {
opacity: 0;
transform: translate(0px, 60px);
}
.is_menubg_opened .toggle-in {
opacity: 1;
transform: translate(0px, 0px);
}
#js-page-wrapper {
position: relative;
z-index: 3;
}
.canvas-background-ol {
z-index: 0;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width:767px) {
body.home .canvas-background-ol {
z-index: 0;
height: 83vh!important;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
#js-canvas-background {
height: 100%;
width: 100%;
}
.js-scroll-fade-in {
transition: all 1s;
opacity: 0;
transform: translate(0px, 120px);
}
.is_over.js-scroll-fade-in {
opacity: 1;
transform: translate(0px, 0px);
}
.is_products_loaded .js-scroll-fade-in {
opacity: 1;
transform: translate(0px, 0px);
}
.is_products_loaded .products {
opacity: 0;
}
.huge-text-background {
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.js-shutter-text {
opacity: 0 !important;
}
.is_start.js-shutter-text {
opacity: 1 !important;
}
.is_not_menued .toggle {
z-index: 96;
}  .laptop-show,
.sp-show,
.pad-show {
display: none !important;
} @media screen and (min-width:1700px) {
html {
font-size: 71.5%;
}
.body,
.body.thin,
.section-products .body {
max-width: 1280px;
}
.products-title a {
font-size: 21px;
}
}
@media screen and (min-width:1600px) {
.subpages .main-title {
font-size: 4.6vw;
}
}
@media screen and (max-width:1700px) {
html {
font-size: 71.5%;
}
}
@media screen and (max-width:1600px) {
html {
font-size: 68.5%;
}
}
@media screen and (max-width:1500px) {
html {
font-size: 65.5%;
}
} @media screen and (max-width:1400px) {
html {
font-size: 62.5%;
} .body,
.body.thin,
.section-products .body {
max-width: 100%;
}
}
@media screen and (max-width:1300px) {
.cols-text {
min-width: 250px;
}
.slider-concept {
bottom: 60px;
}
.laptop-show {
display: block !important;
}
.laptop-hide {
display: none !important;
}
.menu {
width: 800px;
margin-left: -400px;
}
}
@media screen and (max-width:1100px) {} @media screen and (max-width:1024px) {
.body,
.body.thin,
.section-products .body {
max-width: 100%;
}
.js-scroll-fade-in {
opacity: 1;
transform: translate(0px, 0px);
}
.cols-text {
padding: 0;
}
.pad-show {
display: block !important;
}
.main-title-spacer,
.main-title-ol .spacer,
.pad-hide,
.controls-num,
.side {
display: none !important;
}
.body {
padding: 0 60px;
}
.slider-concept {
position: relative;
right: 0;
top: auto;
width: 100%;
}
.cols-text {
width: 100%;
}
.cols {
height: 100%;
width: 100%;
float: none;
padding: 0 60px;
box-sizing: border-box;
}
.spacer {
height: 30px !important;
}
.section-concept-body {
height: auto;
}
.section-concept-body .add-bg-gray { padding: 0 0 60px;
}
.slider-concept {
margin-top: -60px;
margin-bottom: 90px;
} .products-ol {
font-size: 0;
}
.products-body {
font-size: 1.2rem;
}
.products {
float: none;
width: 50%;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
padding: 10px;
}
.js-slider-controls-fixed-ol .slider-controls {
position: absolute !important;
top: auto !important;
bottom: -1px !important;
}
.js-slider-controls-fixed {
padding: 0px !important;
}
.slider-middle .js-slider-wrap,
.slider-middle.js-canvas-slider-ol {
height: 30vh;
}
.slider-middle-ol {
padding-top: 30px;
}
.sub-header-cols .cell {
display: block;
}
.section {
padding: 30px 0;
}
.section.section-header {
padding: 0;
}
.section-products .sub-header,
.section-products .sub-footer {
padding: 0 20px;
}
.sitemap-ol {
padding-bottom: 30px;
}
.links {
width: 100%;
}
.links .toggle-link {
margin-left: auto;
}
.links .sns {
margin-left: -10px;
}
.links address {
margin: 0 auto;
}
.slider-concept {
bottom: 0px;
}
.section-connected {
padding: 0;
} .subpages .main-title-ol {
display: table;
height: 100%;
width: 100%;
}
.subpages .main-title-ol .body {
vertical-align: middle;
height: 100% !important;
display: table-cell;
}
.body-inside {
padding: 0 60px;
}
.subpages .body-inside {
padding: 0;
text-align: left;
}
.subpages .first-view .body-inside {
padding: 30px;
}
.section-products-header .body-inside,
.section-concept .body-inside,
.section-infomation .body-inside {
padding: 0 30px;
}
.sub-sub-title span {
font-size: 2.8vw;
} .subpages .section.section-concept .add-bg-white {
padding-bottom: 60px;
}
.section-hr-contents .cols-in {
height: auto;
}
.floating-img {
position: relative;
right: 0;
top: 0;
margin-top: 0;
width: 100%;
height: 400px;
}
.cols-left .cols-in,
.cols-right .cols-in {
padding-left: 0px;
padding-right: 0px;
}
.cols-left .cols-in {
padding-bottom: 60px;
}
.section-item-info .two-col-layout {
padding-top: 30px;
}
.panles-1-4 {
padding-right: 30px;
width: 25%;
}
.section-team-body {
padding-bottom: 90px;
} .pulldown-ol {
padding: 15px 0 30px;
}
.pulldown-select {
margin-top: 20px;
height: 60px;
line-height: 60px;
font-family: 'Roboto', sans-serif;, sans-serif;
display: block;
font-weight: 400;
cursor: pointer;
border: 1px solid #d3d3d3;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pulldown-select > .in {
padding: 0 0 0 1em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.pulldown-select select {
width: 100%;
position: relative;
z-index: 2;
}
.section-products-header {
padding: 0;
}
.pulldown-select .pulldown-change {
display: block;
position: absolute;
right: 0px;
top: -1px;
background: #272727;
width: 60px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 1.1rem;
text-align: center;
margin-top: 0;
z-index: 1;
}
.products-footer {
margin-bottom: 0px;
}
.products-loadmore {
height: 30vh;
}
.section-products .body {
padding: 0 40px;
}
.products-cats {
height: 3em;
}
.products .products-cats li {
display: inline-block;
padding-right: 12px;
padding-bottom: 4px;
}
.products-title a {
margin: 0.5em 0;
height: 3em;
font-size: 2.4vw;
line-height: 1.4em;
} .sub-title .logo-black {
width: 85px;
height: 30px;
} .input-ol .input-body-confirm {
float: none;
width: 100%;
margin-bottom: 15px;
}
.input-ol .input-body-submit {
opacity: 1;
float: none;
text-align: right;
} .menu-body {
width: 100%;
float: none;
}
.menu-header {
height: auto;
width: auto;
float: none;
}
.menu-header > .in {
position: static;
}
.menu {
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px 30px;
}
.menu-body {
display: table;
padding: 0 0 0 180px;
box-sizing: border-box;
}
.menu-body > .in {
vertical-align: middle;
display: table-cell;
}
.menu-header .toggle-link,
.menu-header .lang,
.menu-header .logo {
position: absolute;
top: 0;
left: 30px;
z-index: 10;
}
.menu-header .logo {
top: 20px;
background-position: center top;
}
.menu-header .toggle-link {
bottom: 20px;
top: auto;
}
.menu-header .lang {
top: 50%;
margin-top: -60px;
}
.menu-nav a {
display: block;
margin: 0;
padding: 0.5em 0;
font-size: 4rem;
line-height: 3rem;
}
.menu-side-nav li {
display: block;
}
.menu-side-nav li a {
display: block;
font-size: 1.6rem;
padding: 0.5em 0;
}
.menu-sns li a {
padding-right: 0px;
padding-left: 20px;
font-size: 1.3rem;
}
.menu-sns {
left: auto;
right: 0;
}
.is_menu_opened .toggle .in div,
.is_menu_opened .t4 > .in > div {
background: #fff;
} .item-side {
display: none;
}
.item-mainvisual {
height: 75vh;
}
.item-mainvisual .background-img {
background-position: 60% 50%;
}
.item-title-ol {
bottom: 60px;
}
.item-title-in {
width: 66%;
}
.item-title-ol .yen {
font-size: 2rem;
}
.item-title-ol .tax {
font-size: 1.4rem;
}
.item-title-ol .body-inside h2 {
font-size: 2rem;
}
.section-item-info .cols-left .cols-in {
padding: 0;
}
.item-info-single {
width: 80%;
margin: 0 auto;
}
.item-info-main {
width: 45%;
}
.item-info-sub {
width: 58%;
position: absolute;
right: 0;
bottom: 60px;
}
.section-related {
margin-top: -60px;
padding-right: 60px;
padding-left: 60px;
} .section-item-slides {
padding: 0;
}
.item-slide-large {
height: 60.7vw;
}
.item-slide-medium {
height: 64.3vw;
padding-bottom: 0
}
.two-col-layout .item-slide-medium {
padding-bottom: 0
}
.section-item-slides .cols {
width: 50%;
float: left;
padding: 0;
} .zoom-img-in {
overflow: scroll;
-webkit-overflow-scrolling: touch;
} .item-shopbtn-ol {
position: relative;
z-index: 1;
right: auto;
bottom: auto;
transform: translateY(0);
transition: none;
}
.item-shopbtn-in {
padding: 30px 60px;
}
.item-shopbtn-ol h2 {
display: block;
font-size: 1.8rem;
margin-right: 15px;
margin-bottom: 5px;
}
.item-shopbtn-ol .products-price {
display: block;
margin-right: 15px;
margin-bottom: 1.5em;
}
.item-shopbtn-ol .products-price .yen {
font-size: 1.8rem;
}
.item-shopbtn-ol .btn-shop {
float: none;
font-size: 1.6rem;
}
.item-shopbtn-ol .btn-shop .txt {
padding: 0 20px;
}
.item-shopbtn-ol .cell {
display: block;
}
.is_itemend .item-shopbtn-ol {
transform: translateY(0);
}
}  @media screen and (max-width:680px) { .toggle-in,
.slider-middle-bg,
.header .logo,
.header .nav,
.first-view .controls-ol {
opacity: 1 !important;
transform: translate(0px, 0px);
}
.is_enter_transition .toggle-in,
.is_enter_transition .slider-middle-bg,
.is_enter_transition .header .logo,
.is_enter_transition .header .nav,
.is_enter_transition .first-view .main-title,
.is_enter_transition .first-view .controls-ol {
transform: translate(0px, 0px);
}
.is_leave_transition .toggle-in,
.is_leave_transition .slider-middle-bg,
.is_leave_transition .header .logo,
.is_leave_transition .header .nav,
.is_leave_transition .first-view .main-title,
.is_leave_transition .first-view .controls-ol {
transform: translate(0px, 0px);
}
.first-view .main-title {
opacity: 0;
transform: translate(0px, 30px);
}
.is_page_loaded .main-sub-title {
opacity: 1;
transform: translate(0px, 0px);
}
.is_enter_transition .main-sub-title {
opacity: 0;
transform: translate(0px, 0px);
}
.is_leave_transition .main-sub-title {
opacity: 0;
transform: translate(0px, 30px);
} .sub-sub-title span,
.products-loaded .n,
.products-loaded .t {
font-size: 1.4rem;
line-height: 2em;
}
.subpages .main-title {
width: 100%;
}
.sp-show {
display: block !important;
}
.sp-hide {
display: none !important;
} .subpages .slider-middle {
padding: 0 15px;
box-sizing: border-box;
}
.header {
padding: 0 30px;
background: #fff;
}
.sub-sub-pages .first-view,
.first-view {
height: 83vh;
padding-bottom: 0;
}
.contents > .spacer,
.section,
.footer {
background: #fff;
}
.footer {
position: relative;
z-index: 2;
}
.add-bg-gray,
.add-bg-gray .spacer {
background: transparent;
}
.add-bg-white .spacer {
background: #fff;
}
.first-view .controls-ol {
bottom: -30px;
}
.first-view .controls-ol .js-slider-canvas-controls {
position: absolute;
right: 0;
} .header {
overflow: hidden;
width: 100%;
height: auto;
position: relative;
}
.nav li a {
opacity: 0.6;
padding: 0 15px 0 0;
font-size: 1.4rem;
line-height: 60px;
height: 60px;
display: block;
color: #000;
}
.nav li a.active {
opacity: 1;
}
.nav-ol {
padding: 0;
}
.nav {
text-align: left;
font-size: 0;
}
.toggle .in div,
.t4 > .in > div {
background: #000;
}
.toggle {
top: 10px;
right: 10px;
}
.cols,
.body {
padding: 0 30px;
}
.section-products .body {
padding: 0 30px;
}
.section-products .sub-header,
.section-products .sub-footer {
padding: 0;
}
.controls-ol .body,
.section-concept-body {
padding: 0;
}
.sub-sub-pages.subpages .main-title,
.subpages .main-title {
font-size: 3rem;
}
.sub-title,
.main-title {
font-size: 3rem;
left: 30px;
}
.main-title {
font-size: 18px;
left: 0;
width: 90vw;
}
.sub-title {
line-height: 1.2;
}
.sub-sub-title {
margin-top: 0.5em;
}
.support-header-hr {
width: 15px;
}
.support-header-body li a {
padding: 0;
margin: 0 10px 0 0;
}
.support-header-body li a.active {
padding: 0 5px;
margin-left: 0;
}
.support-header-body {
padding-left: 30px;
}
.slider-middle-in {
padding: 0 15px;
}
.slider-middle .js-slider-wrap,
.slider-middle.js-canvas-slider-ol {
height: 50vh;
}
.sub-header-left {
width: 100%;
padding: 0 0 30px 0;
}
.bnr {
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0 0 3px;
}
.bnr:first-child {
padding: 0 3px 0 0;
}
.connected {
width: 33.333%;
}
.section-connected {
padding: 0;
}
.section-connected .support-header {
position: absolute;
top: -70px;
left: 0;
}
.footer {
padding: 30px;
}
.links,
.sitemap-ol {
width: 100%;
float: none;
}
address {
width: 100px;
}
.sns li a {
width: 30px;
}
.connected-header-bg {
top: -33%;
}
.controls-in {
height: 30px;
line-height: 30px;
}
.scroll-to-down {
display: none;
} .subpages .first-view .controls-ol,
.body-inside {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 30px;
}
.subpages .first-view .controls-ol {
bottom: 0;
} .slider-large-ol .slider-controls {
left: 0;
}
.cols-text-plane {
padding: 0 0 30px 0;
}
.floating-img {
height: 25vh;
}
.floating-img .in,
.floating-img.floating-img-left .in {
padding: 0 30px;
}
.section-team-body {
background-size: 100%;
}
.teams {
width: 50%;
}
.panels-ol {
padding: 30px 27px 0 30px;
}
.panles-1-4 {
width: 50%;
}
.panles-1-2 {
padding-top: 3px;
padding-right: 3px;
width: 100%;
}
.panles-1-4 {
padding-right: 3px;
}
.section-team-body {
padding-top: 30px;
}
.subpages .section-products .body {
padding: 0 28px;
}
.input-ol .input-head,
.input-ol .input-body,
.inf-layout dd,
.inf-layout dt {
line-height: 1.5;
}
.inf-layout dt {
width: 120px;
}
.inf-layout dd {
padding-left: 120px;
margin-left: 0;
}
.input-ol .input-head,
.inf-layout.inf-layout-text dt {
width: 100%;
padding-bottom: 30px;
}
.input-ol .input-body,
.inf-layout.inf-layout-text dd {
padding-left: 0;
float: none;
margin-left: 0;
}
.inf-layout.inf-layout-text dd {
line-height: 1.7em;
}
.input-body textarea {
height: 120px;
}
.floating-img.floating-img-single .in {
padding: 0 30px;
}
.body .body-inside .inf-layout dt {
width: 100%;
float: none;
}
.body .body-inside .inf-layout dd {
padding-left: 0;
padding-bottom: 48px;
} .sort-ol {
margin: 0 -30px;
}
.pulldown-ol {
padding: 0 0 30px;
}
.products-ol {
margin: 0 -18px;
}
.products-ol-home .products:last-child {
display: none;
}
.products {
padding: 2px;
}
.products-body {
padding: 15px;
}
.products .products-cats li {
display: block;
padding-right: 0;
}
.products-title a {
margin-top: 1.5em;
height: 4.3em;
font-size: 3.2vw;
line-height: 1.4em;
}
.yen {
font-size: 1.5rem;
}
.section-category-theme {
opacity: 0.75;
} .menu-nav {
margin-bottom: 1rem;
}
.menu-nav a {
font-size: 2.8rem;
line-height: 2.4rem;
}
.menu-side-nav li a,
.menu-nav a {
padding: 0.3em 0;
}
.menu-body {
padding: 0 0 0 60px;
} .canvas-background-ol {
height: 55vh;
top: 150px; } .sub-sub-pages .first-view .controls-ol,
.sub-sub-pages .body-inside {
padding: 0;
}
.remove-bg-gray {
background: #fff;
}
.footer .sns {
margin-left: -8px;
} .is_item .first-view {
padding-top: 95vw;
padding-bottom: 30px;
height: auto;
}
.item-mainvisual {
height: 100vw;
}
.item-mainvisual .background-img {
background-position: 75% 50%;
}
.item-title-ol {
bottom: auto;
position: relative;
}
.item-title-in {
width: 100%;
}
.is_item .subpages .item-title-ol .main-title {
font-size: 2rem;
}
.item-shopbtn-in {
padding: 30px;
}
.section-item-info .cols-right {
padding: 0;
}
.item-info-single {
width: 80%;
margin: 0 auto;
}
.item-info-main {
width: 45%;
}
.item-info-sub {
width: 58%;
position: absolute;
right: 0;
bottom: 30px;
}
.section-related {
padding-right: 30px;
padding-left: 30px;
}
.related-ol {
margin: 0 -1px;
}
.related-ol .products {
width: 50%;
padding: 1px;
} .section-item-slides .body {
padding: 0;
}
.section-item-slides .cols {
width: 50%;
}
.section-item-slides .cols .item-slide-medium {
height: 50vw;
padding-bottom: 0
}
.section-item-slides .cols .item-slide-large {
height: 50vw
}
.section-item-slides .item-slide-large {
height: 100vw
} .close {
top: 10px;
right: 10px;
}
.close .in div {
background: #fff;
}
.section-line {
opacity: 0;
transition: opacity 0.6s;
}
.is_page_loaded .section-line {
opacity: 1;
}
.is_leave_transition.is_page_loaded .section-line {
opacity: 0;
transition: opacity 0s;
}
}  @media screen and (max-width:320px) {
.sp-min-hide {
display: none !important;
}
address {
text-align: left;
}
.connected-title .account {
font-size: 1.1rem;
}
.sub-title,
.main-title {
font-size: 2.6rem;
}
}
.section-line {
background-color: rgba(255, 255, 255, 1);
padding: 0 0 160px;
}@import url("https://fonts.googleapis.com/css?family=Libre+Baskerville&display=swap");
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); body {
color: rgba(0, 0, 0, 1);
font-family: "Helvetica Neue", Helvetica, neue-haas-grotesk-display, sans-serif; font-style: normal;
letter-spacing: .05em;
}
a {
color: rgba(0, 0, 0, 1);
}
a:active,
a:focus,
a:hover {
color: rgba(0, 0, 0, 1);
text-decoration: none;
}
dt,
th {
font-weight: normal;
}
img {
height: auto;
max-width: 100%;
}
.navbar {
z-index: 9999;
}
@media screen and (min-width:768px) {
.container {
width: 1010px;
}
}
.navbar-default {
background: none;
border: none;
}
@media screen and (min-width:768px) {
.navbar {
border-radius: 0;
}
}
.navbar-nav ul {
font-size: 15px;
letter-spacing: .05em;
list-style-type: none;
margin-bottom: 0;
}
@media screen and (min-width:768px) {
.navbar-nav ul li {
display: inline;
}
.navbar-nav ul li a { display: inline-block;
padding: 20px;
}
.navbar-nav ul li.reserve a {
background-color: rgba(0, 0, 0, 1);
color: rgba(255, 255, 255, 1);
line-height: 1;
padding: 20px 60px;
text-align: center;
}
.navbar-nav ul li.reserve a span {
font-size: 8px;
}
}
@media screen and (max-width:767px) {
.footer {
background-image: url(//copain-grp.jp/wp-content/themes/copain/images/footer_03@2x.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: rgba(255,255,255,1);
padding: 100px 30px 100px;
}
}
@media screen and (min-width:768px) {
.footer {
background-image: url(//copain-grp.jp/wp-content/themes/copain/images/footer_03@2x.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
color: rgba(255,255,255,1);
padding: 460px 100px 70px;
}
}
.footer a {
color: rgba(255,255,255,1);
}
.footer h4 {
margin: 0 0 25px;
}
.footer ul.footernavsns {
font-size: 22px;
margin: 0 0 20px;
}
.footer ul.footernavsns li {
padding: 0 6px;
}
.footer ul.footernavsns li:first-child {
padding-left: 0;
}
@media screen and (max-width:767px) {
.footer .footernavcopy {
font-size: 11px;
letter-spacing: .05em;
}
}
@media screen and (min-width:768px) {
.footer .footernavcopy {
font-size: 14px;
letter-spacing: .05em;
}
}
.footer .footersns h3 {
color: rgba(255,255,255,1);
font-size: 10px;
font-weight: 400;
letter-spacing: .05em;
margin: 30px 0 10px;
padding: 0;
}
.footer .footersns h3::before {
border-bottom: 2px solid rgba(255,255,255,1);
content: '';
display: inline-block;
margin-right: 12px;
vertical-align: middle;
width: 24px;
}
@media screen and (min-width:768px) {
.footer .footersns h3 {
color: rgba(255, 255, 255, 1);
font-size: 18px;
font-weight: 400;
letter-spacing: .05em;
margin: 50px 0 40px;
padding: 0;
}
.footer .footersns h3::before {
border-bottom: 2px solid rgba(255, 255, 255, 1);
content: '';
display: inline-block;
margin-right: 30px;
vertical-align: middle;
width: 46px;
}
}
.footer .footersns ul {
letter-spacing: -.4em;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer .footersns ul li {
display: inline-block;
margin: 0;
padding: 0;
width: 25%;
}
@media screen and (min-width:768px) {
.footer .footersns ul li {
width: auto;
}
}
.footer .footersns ul li a {
color: rgba(255, 255, 255, 1);
display: block;
letter-spacing: .05em;
line-height: 2.1;
position: relative;
}
.footer .footersns ul li a p {
font-size: 15px;
position: absolute; top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}
.footer .footersns ul li a p i {
font-size: 24px;
}
.footer .footersns ul li a:before {
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.footer .footersns ul li a img {
width: 100%;
}
.footer .footersns ul li a:hover::before {
background-color: rgba(0, 0, 0, .4);
}
.footernav {
color: rgba(57, 57, 57, 1);
padding: 0 10px 50px;
}
.footernav a {
color: rgba(114, 114, 114, 1);
}
.footernav h4 {
margin: 0;
padding: 0 0 25px;
}
@media screen and (min-width:768px) {
.footernav {
color: rgba(57, 57, 57, 1);
padding: 0 40px 50px;
}
.footernav h4 {
margin: 0;
padding: 20px 0;
}
}
.footernav .footernavlist {
display: flex;
flex-wrap: wrap;
font-size: 11px;
margin: 0;
padding: 0;
}
@media screen and (min-width:768px) {
.footernav .footernavlist {
display: flex;
flex-wrap: wrap;
font-size: 12px;
margin: 0;
padding: 0;
}
}
@media screen and (max-width:767px) {
.footernav .footernavlist li {
display: inline-block;
letter-spacing: .05em;
list-style-type: none;
padding: 0 0 15px;
width: 50%;
}
}
@media screen and (min-width:768px) {
.footernav .footernavlist li {
display: inline-block;
letter-spacing: .05em;
list-style-type: none;
padding: 0 0 15px;
width: 40%;
}
}
.footernav .footernavlist li:nth-child(even) {
display: inline;
}
.footernav .footernavsns li {
font-size: 24px;
padding: 10px 16px 10px 0;
}
@media screen and (min-width:768px) {
.footernav .footernavsns li {
font-size: 18px;
padding: 0 8px;
}
}
@media screen and (max-width:767px) {
.footernav .footernavcopy {
font-size: 10px;
letter-spacing: .05em;
padding: 20px 0 0;
text-align: right;
}
}
@media screen and (min-width:768px) {
.footernav .footernavcopy {
font-size: 14px;
letter-spacing: .05em;
padding: 3px 0 0;
}
}
.homesevencontents .image,
.home©ontents .block .data,
.homerecruit .block,
.footer .footersns ul li a.footersns1,
.footer .footersns ul li a.footersns2,
.footer .footersns ul li a.footersns3,
.footer .footersns ul li a.footersns4,
.pageconcept .image,
.pagestaff .image,
.pagemenu .mainimg,
.pagemenubigami .banner .block,
.othercontents .outer .block,
.pagelineup .list .image,
.ceomessage .desc,
.businessgroup a img {  }
.homesevencontents .block4 .data,
.footer .footersns ul li a.footersns2 {
transition-duration: .4s;
}
.homesevencontents .block5 .data,
.footer .footersns ul li a.footersns3 {
transition-duration: .6s;
}
.homesevencontents .block6 .data,
.footer .footersns ul li a.footersns4 {
transition-duration: .8s;
}
.homesevencontents .image.is-show,
.homesevencontents .block .data.is-show,
.homerecruit .block.is-show,
.footer .footersns ul li a.is-show,
.pageconcept .image.is-show,
.pagestaff .image.is-show,
.pagemenu .mainimg.is-show,
.pagemenubigami .banner .block.is-show,
.othercontents .outer .block.is-show,
.pagelineup .list .image.is-show,
.ceomessage .desc.is-show,
.businessgroup a img.is-show {
opacity: 1;
transform: translateY(0%);
} .navmenu {
background-color: rgba(229, 229, 229, .9);
position: fixed;
z-index: 511111111;
top: 0;
left: 0;
color: rgba(15, 15, 15, 1);
width: 100%;
opacity: 0;
padding: 25px;
transition: all 0.6s;
display: none;
}
.navmenu ul.navmenulist {
width: 100%;
margin: 0 auto;
padding: 50px 10px 0;
}
@media screen and (min-width:768px) {
.navmenu {
width: 780px;
}
.navmenu ul.navmenulist {
padding: 130px 10px 0;
}
}
.navmenu ul.navmenulist li {
font-size: 11px;
letter-spacing: .1em;
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 2px solid rgba(193, 193, 193, 1);
}
@media screen and (min-width:768px) {
.navmenu ul.navmenulist li {
font-size: 13px;
}
}
.navmenu ul.navmenulist li:last-child {
padding-bottom: 0;
border-bottom: none; }
.navmenu ul.navmenulist li a {
display: block;
color: rgba(15, 15, 15, 1);
padding: .6em 15px;
position: relative;
}
@media screen and (min-width:768px) {
.navmenu ul.navmenulist li a {
padding: 1em 55px;
}
}
.navmenu ul.navmenulist li a:after {
color: rgba(15, 15, 15, 1);
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow01.svg);
font-size: 24px;
height: 12px;
position: absolute;
right: 10px;
top: -4px;
width: 6px;
}
@media screen and (min-width:768px) {
.navmenu ul.navmenulist li a:after {
color: rgba(15, 15, 15, 1);
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow01.svg);
font-size: 24px;
height: 25px;
position: absolute;
right: 25px;
top: 15px;
width: 14px;
}
}
.navmenu ul.navmenulist li.navresereve a:after,
.navmenu ul.navmenulist li.navrecruit a:after {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow02.svg);
}
.navmenu ul.navmenulist li.navresereve,
.navmenu ul.navmenulist li.navrecruit {
border-bottom: none;
}
.navmenu ul.navmenulist li.navresereve a {
margin-top: 10px;
}
.navmenu ul.navmenulist li.navresereve a,
.navmenu ul.navmenulist li.navrecruit a {
background-color: rgba(49, 49, 49, 1);
color: rgba(255, 255, 255, 1);
margin-bottom: 10px;
}
@media screen and (min-width:768px) {
.navmenu ul.navmenulist li.navresereve a {
margin-top: 25px;
}
.navmenu ul.navmenulist li.navresereve a,
.navmenu ul.navmenulist li.navrecruit a {
background-color: rgba(49, 49, 49, 1);
color: rgba(255, 255, 255, 1);
margin-bottom: 25px;
}
}
.navmenu ul.navmenulist li a:hover,
.navmenu ul.navmenulist li a:active,
.navmenu ul.navmenulist li a:focus {
text-decoration: none;
}
.navmenu ul.navmenulist li a span.eng {
display: block;
font-family: 'Libre Baskerville';
font-size: 14px;
letter-spacing: .05em;
width: 220px;
}
@media screen and (min-width:768px) {
.navmenu ul.navmenulist li a span.eng {
display: inline-block;
font-size: 20px;
}
} .navmenu.active {
display: block;
height: 100vh;
opacity: 1;
}
@media screen and (min-width:768px) {
.navmenu.active {
display: block;
height: auto;
opacity: 1;
}
}
@media screen and (max-width:767px) {
.logo {
cursor: pointer;
position: fixed;
text-align: center;
top: 22px;
width: 100%;
z-index: 11;
}
.logo a {
display: inline-block;
}
}
@media screen and (min-width:768px) {
.logo {
cursor: pointer;
position: fixed;
left: 90px;
top: 39px;
z-index: 5111111111;
}
.logo a {
display: block;
}
}
@media screen and (min-width:768px) {
.logo {
left: 130px;
top: 39px;
}
}
.logo img {
width: 166px;
}
.Toggle {
display: block;
position: fixed; left: 25px;
top: 25px;
width: 28px;
height: 18px;
cursor: pointer;
z-index: 5111111111;
}
.Toggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 3px #000;
border-radius: 20%;
-webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 6px;
}
.Toggle span:nth-child(1) {
top: 0px;
}
.Toggle span:nth-child(2) {
top: 7px;
width: 22px;
}
.Toggle span:nth-child(3) {
top: 14px;
width: 16px;
}
.Toggle.active {
height: 24px;
} .Toggle.active span:nth-child(1) {
top: 10px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 24px;
} .Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
width: 24px;
}
.navsns ul li {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
letter-spacing: .1em;
padding: 10px 15px;
}
.navsns ul li i {
font-size: 36px;
margin-right: 0;
vertical-align: middle;
}
@media screen and (min-width:768px) {
.navsns ul li {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
letter-spacing: .1em;
padding: 15px 30px;
}
.navsns ul li i {
margin-right: 20px;
}
} .home__mainimg {
height: 100vh;
margin: 0;
position: relative;
z-index: -1;
}
.home__mainimg__image div {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
}
.home__mainimg__image .slick-dots {
bottom: 4%;
z-index: +1;
}
.home__mainimg h1 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
width: fit-content;
z-index: 1;
}
.slick-dots li {
position: relative;
display: inline-block;
width: 95px;
height: 20px;
margin: 0 12px;
padding: 0;
cursor: pointer;
}
.slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 95px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:before {
border-bottom: 5px solid rgba(0,0,0,1);
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 95px;
height: 20px;
content: '';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width:767px) {
.home__concept {
background-color: rgba(255,255,255,1);
display: flex;
flex-wrap: wrap;
padding: 50px 30px;
position: relative;
}
.home__concept__text h2 {
font-size: 20px;
letter-spacing: .05em;
line-height: 1.5;
margin: 0 0 30px;
}
.home__concept__text__desc {
font-size: 10px;
line-height: 2.4;
padding: 0 0 30px;
}
.home__concept__link {
margin: 0!important;
}
.home__concept__side {
align-items: center;
color: rgba(121,121,121,1);
display: flex;
font-size: 10px;
justify-content: center;
letter-spacing: .05em;
order: 2;
position: absolute;
top: -60px;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: 100% 50%;
}
.home__concept__side::before {
background-color: rgba(112 ,112 ,112 ,1);
content: '';
display: block;
height: 1px;
margin: 0 0 0 30px;
order: 1;
width: 120px;
}
}
@media screen and (min-width:768px) {
.home__concept {
background-color: rgba(255,255,255,1);
display: flex;
padding: 170px 0 170px calc(( 100% - 980px ) / 2 );
position: relative;
}
.home__concept__text {
padding: 80px 0 0;
width: 390px;
}
.home__concept__text h2 {
font-size: 50px;
letter-spacing: .05em;
margin: 0 0 80px;
}
.home__concept__text__desc {
font-size: 15px;
line-height: 1.33;
padding: 0 0 110px;
}
.home__concept__link {
margin: 0!important;
}
.home__concept__image {
margin: 0 100px 0 90px;
width: fit-content;
}
.home__concept__side {
align-items: center;
color: rgba(121,121,121,1);
display: flex;
font-size: 15px;
justify-content: center;
letter-spacing: .05em;
order: 2;
position: absolute;
top: -160px;
right: 50px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: 100% 50%;
}
.home__concept__side::before {
background-color: rgba(112 ,112 ,112 ,1);
content: '';
display: block;
height: 1px;
margin: 0 0 0 60px;
order: 1;
width: 400px;
}
}
@media screen and (min-width:768px) {
.flickity-viewport {
height: 1000px !important;
}
}
.flickity-viewport .is-selected .image {
overflow: visible;
}
.carousel {
margin-bottom: 50px;
}
@media screen and (min-width:768px) {
.carousel {
margin-bottom: 0;
}
}
.flickity-prev-next-button {
top: 40%;
width: 44px;
height: 44px;
border-radius: 0%;
transform: translateY(-50%);
}
.flickity-prev-next-button.previous {
left: 0;
}
.flickity-prev-next-button.next {
right: 0;
}
@media screen and (min-width:768px) {
.flickity-prev-next-button.previous {
left: auto;
right: 0;
}
.flickity-prev-next-button.next {
right: -56px;
}
}
.flickity-prev-next-button .flickity-button-icon {
overflow: visible;
}
.button-group {
position: absolute;
top: 22px;
right: -33px;
z-index: 111111111;
}
.button-group .button {
background: hsla(0, 0%, 100%, .75);
border: none;
height: 44px;
transform: translateY(-50%);
width: 44px;
}
.button-group .button:hover,
.button-group .button:active,
.button-group .button:focus {
outline: none;
}
.button-group .button.button--previous {
right: 0;
top: 0;
}
.flickity-button:disabled {
opacity: 1;
cursor: auto;
pointer-events: none;
}
.flickity-page-dots {
display: none;
}
.arrow {
fill: #6a6b75;
} .carousel-cell:before {
display: block;
text-align: center; line-height: 200px;
font-size: 80px;
color: white;
}
@media screen and (max-width:767px) {
body.home .section-concept-body.body {
width: 95%;
}
body.home .section-concept-body.body .cols {
padding: 0;
}
body.home .section-concept-body.body .cols .cell {
display: flex;
}
body.home .section-concept-body.body .cols .cell .sub-title {
font-size: 20px;
letter-spacing: .05em;
line-height: 1.2;
margin: 0;
}
body.home .section-concept-body.body .cols .cell .spacer {
width: 28px;
}
body.home .section-concept-body.body .cols .cell p {
font-size: 10px;
line-height: 2.4;
}
body.home .section-concept-body.body .cols .cell a {
font-size: 10px;
}
body.home .section-concept-body.body .cols .cell a.buttons {
display: block;
width: 80px;
line-height: 30px;
height: 30px;
overflow: hidden;
}
.section-line {
background: none;
padding: 0 0 70px;
}
body.company .section-line {
background-color: rgba(255, 255, 255, 1);
padding: 0 0 0;
}
.slider-concept {
margin-bottom: 30px;
}
.section {
background: none;
}
}
.homemainimg .desc {
bottom: 30px;
color: rgba(255, 255, 255, 1);
font-size: 36px;
left: 50%;
margin: auto;
position: absolute;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 100%;
}
@media screen and (min-width:768px) {
.homemainimg .desc {
bottom: 170px;
font-size: 62px;
width: 700px;
}
}
.flexslider {
background: none;
border: none;
margin-bottom: 50px;
}
.flex-direction-nav {
display: none;
}
.homenews,
.pagenews {
background: rgba(243, 243, 243, 1);
padding: 50px 0 70px;
}
@media screen and (min-width:768px) {
.flexslider {
margin-bottom: 130px;
}
.homenews,
.pagenews {
padding: 120px 0 170px;
}
}
.homenews h2,
.pagenews h2 {
font-size: 20px;
font-weight: 500;
letter-spacing: .05em;
margin: 0 0 15px 0;
padding: 0;
}
@media screen and (min-width:768px) {
.homenews h2,
.pagenews h2 {
font-size: 36px;
font-weight: 500;
letter-spacing: .05em;
margin: 0 0 30px 0;
padding: 0;
}
}
.homenews .more,
.pagenews .more {
font-size: 10px;
margin: 30px 0 0 20px;
width: 80px;
}
@media screen and (min-width:768px) {
.homenews h2,
.pagenews h2 {
font-size: 50px;
margin: 0 0 30px 0px;
padding: 0;
}
.homenews .more,
.pagenews .more {
margin: 0 0 0 auto;
width: 110px;
}
.home__concept__link {
margin: 0 0 0 70px;
width: 110px;
}
}
@media screen and (min-width:768px) {
.homenews .more a,
.pagenews .more a {
border-top: 2px solid rgba(112,112,112, 1);
color: rgba(121, 121, 121, 1);
display: block;
font-size: 15px;
padding: 12px 0 0;
}
.home__concept__link a {
border-bottom: 2px solid rgba(112,112,112, 1);
color: rgba(121, 121, 121, 1);
display: block;
font-size: 15px;
padding: 0 0 7px;
}
}
.homenews .more a:active,
.homenews .more a:hover,
.pagenews .more a:active,
.pagenews .more a:hover,
.home__concept__link a:active,
.home__concept__link a:hover {
text-decoration: none;
}  .homenews,
.pagenews {
position: relative;
}
@media screen and (max-width:767px) {
.home__news__side {
position: absolute;
right: 0;
top: -10px;
width: 20vw;
}
}
@media screen and (min-width:768px) {
.home__news__side {
position: absolute;
right: 0;
top: -32px;
width: 16vw;
}
}
@media screen and (min-width:768px) { } @media screen and (min-width:768px) {
.homenews:before,
.pagenews:before {
left: 5%;
}
.homenews:after,
.pagenews:after {
right: 5%;
}
}
.ff-container {
margin: 0;
}
.ff-container label {
color: rgba(110, 111, 118, 1);
cursor: pointer;
float: left;
font-size: 10px;
font-weight: 400;
letter-spacing: .05em;
line-height: 1;
margin: 8px 2px;
padding: 3px 11px 1px;
}
@media screen and (max-width:767px) {
.ff-container label.label-eye {
margin-left: 84px;
}
}
@media screen and (min-width:768px) {
.ff-container label {
font-size: 14px;
margin: 10px;
padding: 3px 11px 1px;
}
.ff-container label.first {
font-size: 14px;
margin: 10px 10px 10px 0;
padding: 3px 11px 1px 0;
}
}
.ff-container label:hover {
background-position: 0px 0px;
}
.ff-container label.ff-label-type-all,
.ff-container label.ff-label-type-1,
.ff-container label.ff-label-type-2,
.ff-container label.ff-label-type-3,
.ff-container label.ff-label-type-4,
.ff-container label.ff-label-type-5,
.ff-container label.ff-label-type-6,
.ff-container label.ff-label-type-7,
.ff-container label.ff-label-type-8,
.ff-container label.ff-label-type-9,
.ff-container label.ff-label-type-10,
.ff-container label.ff-label-type-11,
.ff-container label.ff-label-type-12,
.ff-container label.ff-label-type-13,
.ff-container label.ff-label-type-14,
.ff-container label.ff-label-type-15,
.ff-container label.ff-label-type-16 {}
.ff-container input.ff-selector-type-all:checked ~ label.ff-label-type-all,
.ff-container input.ff-selector-type-1:checked ~ label.ff-label-type-1,
.ff-container input.ff-selector-type-2:checked ~ label.ff-label-type-2,
.ff-container input.ff-selector-type-3:checked ~ label.ff-label-type-3,
.ff-container input.ff-selector-type-4:checked ~ label.ff-label-type-4,
.ff-container input.ff-selector-type-5:checked ~ label.ff-label-type-5,
.ff-container input.ff-selector-type-6:checked ~ label.ff-label-type-6,
.ff-container input.ff-selector-type-7:checked ~ label.ff-label-type-7,
.ff-container input.ff-selector-type-8:checked ~ label.ff-label-type-8,
.ff-container input.ff-selector-type-9:checked ~ label.ff-label-type-9,
.ff-container input.ff-selector-type-10:checked ~ label.ff-label-type-10,
.ff-container input.ff-selector-type-11:checked ~ label.ff-label-type-11,
.ff-container input.ff-selector-type-12:checked ~ label.ff-label-type-12,
.ff-container input.ff-selector-type-13:checked ~ label.ff-label-type-13,
.ff-container input.ff-selector-type-14:checked ~ label.ff-label-type-14,
.ff-container input.ff-selector-type-15:checked ~ label.ff-label-type-15,
.ff-container input.ff-selector-type-16:checked ~ label.ff-label-type-16 {
background: rgba(106, 107, 117, 1);
color: rgba(255, 255, 255, 1);
}
.ff-container input {
display: none;
}
.ff-items {
position: relative;
margin: 0px auto;
padding-top: 20px;
}
.ff-items a {
display: block;
position: relative;
background: #fff;
margin: 0px;
width: 100%;
}
@media screen and (min-width:768px) {
.ff-items a {
display: block;
position: relative;
background: #fff;
margin: 0px;
width: 315px;
height: 486px;
}
}
.ff-items a span {
display: block;
background: rgba(255, 255, 102, 0.9);
color: #666;
font-weight: bold;
padding: 15px;
position: absolute;
bottom: 13px;
left: 0px;
width: 130px;
height: 0px;
overflow: hidden;
opacity: 0;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ff-items a:hover span {
height: 78px;
opacity: 1;
}
.ff-items ul.newslist {
list-style-type: none;
margin: 0;
padding: 0;
}
.ff-items ul.newslist li.list {
margin: 0 0 15px 0;
}
.ff-items ul.newslist li.list:nth-child(3n) {
margin: 0 0 15px 0;
}
@media screen and (min-width:768px) {
.ff-items ul.newslist li.list {
float: left;
margin: 0 15px 45px 0;
}
.ff-items ul.newslist li.list:nth-child(3n) {
margin: 0 0 45px 0;
}
}
.ff-items .list {
background-color: rgba(255, 255, 255, 1);
margin: 0 0 45px;
width: 0px;
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-o-transform: scale(0, 0);
-ms-transform: scale(0, 0);
transform: scale(0, 0);
z-index: 10;
position: relative;
}
@media screen and (min-width:768px) {
.ff-items .list {
height: 486px;
}
}
.ff-items .list a:hover {
text-decoration: none;
}
.ff-items .list .data {
padding: 15px;
}
.ff-items .list .image {
float: left;
width: 33%;
}
.ff-items .list .image img {
aspect-ratio: 1 / 1;
object-fit: cover;
width: 100%;
}
.ff-items .list .data {
float: right;
width: 65%;
}
@media screen and (min-width:768px) {
.ff-items .list .image {
float: none;
width: 100%;
}
.ff-items .list .image img {
aspect-ratio: 480 / 400;
object-fit: cover;
width: 100%;
}
.ff-items .list .data {
float: none;
width: 100%;
}
.ff-items .list .data {
padding: 25px;
}
}
.ff-items .list .data .newscategory {
color: rgba(180, 61, 61, 1);
font-size: 12px;
letter-spacing: .05em;
padding: 0 0 6px;
text-align: right;
}
.ff-items .list .data .date {
color: rgba(110, 111, 118, 1);
font-size: 12px;
letter-spacing: .05em;
margin: 0 0 6px;
}
.ff-items .list .data h3 {
color: rgba(62, 64, 73, 1);
font-size: 16px;
font-weight: 400;
letter-spacing: .05em;
margin: 0 0 8px;
padding: 0;
}
.ff-items .list .data .desc {
color: rgba(110, 111, 118, 1);
font-size: 12px;
letter-spacing: .05em;
}
@media screen and (min-width:768px) {
.ff-items .list .data .newscategory {
color: rgba(180, 61, 61, 1);
font-size: 12px;
letter-spacing: .05em;
padding: 0 0 12px;
text-align: left;
}
.ff-items .list .data .date {
color: rgba(110, 111, 118, 1);
font-size: 12px;
letter-spacing: .05em;
margin: 0 0 15px;
}
.ff-items .list .data h3 {
color: rgba(62, 64, 73, 1);
font-size: 20px;
font-weight: 400;
letter-spacing: .05em;
margin: 0 0 12px;
padding: 0;
}
.ff-items .list .data .desc {
color: rgba(110, 111, 118, 1);
font-size: 14px;
letter-spacing: .05em;
}
}
.ff-container input.ff-selector-type-all:checked ~ .ff-items .list {
position: relative;
width: 100%;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-o-transform: scale(1, 1);
-ms-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: -webkit-transform 0.3s linear;
-o-transition: -o-transform 0.3s linear;
-ms-transition: -ms-transform 0.3s linear;
transition: transform 0.3s linear;
z-index: 10;
}
@media screen and (min-width:768px) {
.ff-container input.ff-selector-type-all:checked ~ .ff-items .list {
width: 315px;
}
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .news2,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .news3,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .news4,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .news5,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .news6,
.ff-container input.ff-selector-type-6:checked ~ .ff-items .news7,
.ff-container input.ff-selector-type-7:checked ~ .ff-items .news8,
.ff-container input.ff-selector-type-8:checked ~ .ff-items .news9,
.ff-container input.ff-selector-type-9:checked ~ .ff-items .news10,
.ff-container input.ff-selector-type-10:checked ~ .ff-items .news11,
.ff-container input.ff-selector-type-11:checked ~ .ff-items .news12,
.ff-container input.ff-selector-type-12:checked ~ .ff-items .news13,
.ff-container input.ff-selector-type-13:checked ~ .ff-items .news14,
.ff-container input.ff-selector-type-14:checked ~ .ff-items .news15,
.ff-container input.ff-selector-type-15:checked ~ .ff-items .news16 {
-webkit-transition: -webkit-transform 0.3s linear, width 0s linear 0.3s;
-moz-transition: -moz-transform 0.3s linear, width 0s linear 0.3s;
-o-transition: -o-transform 0.3s linear, width 0s linear 0.3s;
-ms-transition: -ms-transform 0.3s linear, width 0s linear 0.3s;
transition: transform 0.3s linear, width 0s linear 0.3s;
-webkit-animation: scaleUp 0.3s linear 0.4s forwards;
-moz-animation: scaleUp 0.3s linear 0.4s forwards;
-o-animation: scaleUp 0.3s linear 0.4s forwards;
-ms-animation: scaleUp 0.3s linear 0.4s forwards;
animation: scaleUp 0.3s linear 0.4s forwards;
width: 100%;
}
@media screen and (min-width:768px) {
.ff-container input.ff-selector-type-1:checked ~ .ff-items .news2,
.ff-container input.ff-selector-type-2:checked ~ .ff-items .news3,
.ff-container input.ff-selector-type-3:checked ~ .ff-items .news4,
.ff-container input.ff-selector-type-4:checked ~ .ff-items .news5,
.ff-container input.ff-selector-type-5:checked ~ .ff-items .news6,
.ff-container input.ff-selector-type-6:checked ~ .ff-items .news7,
.ff-container input.ff-selector-type-7:checked ~ .ff-items .news8,
.ff-container input.ff-selector-type-8:checked ~ .ff-items .news9,
.ff-container input.ff-selector-type-9:checked ~ .ff-items .news10,
.ff-container input.ff-selector-type-10:checked ~ .ff-items .news11,
.ff-container input.ff-selector-type-11:checked ~ .ff-items .news12,
.ff-container input.ff-selector-type-12:checked ~ .ff-items .news13,
.ff-container input.ff-selector-type-13:checked ~ .ff-items .news14,
.ff-container input.ff-selector-type-14:checked ~ .ff-items .news15,
.ff-container input.ff-selector-type-15:checked ~ .ff-items .news16 {
width: 315px;
}
}
.ff-container input.ff-selector-type-1:checked ~ .ff-items .list:not(.news2),
.ff-container input.ff-selector-type-2:checked ~ .ff-items .list:not(.news3),
.ff-container input.ff-selector-type-3:checked ~ .ff-items .list:not(.news4),
.ff-container input.ff-selector-type-4:checked ~ .ff-items .list:not(.news5),
.ff-container input.ff-selector-type-5:checked ~ .ff-items .list:not(.news6),
.ff-container input.ff-selector-type-6:checked ~ .ff-items .list:not(.news7),
.ff-container input.ff-selector-type-7:checked ~ .ff-items .list:not(.news8),
.ff-container input.ff-selector-type-8:checked ~ .ff-items .list:not(.news9),
.ff-container input.ff-selector-type-9:checked ~ .ff-items .list:not(.news10),
.ff-container input.ff-selector-type-10:checked ~ .ff-items .list:not(.news11),
.ff-container input.ff-selector-type-11:checked ~ .ff-items .list:not(.news12),
.ff-container input.ff-selector-type-12:checked ~ .ff-items .list:not(.news13),
.ff-container input.ff-selector-type-13:checked ~ .ff-items .list:not(.news14),
.ff-container input.ff-selector-type-14:checked ~ .ff-items .list:not(.news15),
.ff-container input.ff-selector-type-15:checked ~ .ff-items .list:not(.news16) {
-webkit-animation: scaleDown 0.3s linear forwards;
-moz-animation: scaleDown 0.3s linear forwards;
-o-animation: scaleDown 0.3s linear forwards;
-ms-animation: scaleDown 0.3s linear forwards;
animation: scaleDown 0.3s linear forwards;
display: none;
}
@-webkit-keyframes scaleUp {
50% {
width: 100%;
-webkit-transform: scale(0, 0);
}
100% {
width: 100%;
-webkit-transform: scale(1, 1);
}
}
@-webkit-keyframes scaleDown {
0% {
width: 100%;
-webkit-transform: scale(1, 1);
}
99% {
width: 100%;
-webkit-transform: scale(0, 0);
}
100% {
width: 0px;
-webkit-transform: scale(0, 0);
}
}
@-moz-keyframes scaleUp {
50% {
width: 100%;
-moz-transform: scale(0, 0);
}
100% {
width: 100%;
-moz-transform: scale(1, 1);
}
}
@-moz-keyframes scaleDown {
0% {
width: 100%;
-moz-transform: scale(1, 1);
}
99% {
width: 100%;
-moz-transform: scale(0, 0);
}
100% {
width: 0px;
-moz-transform: scale(0, 0);
}
}
@-o-keyframes scaleUp {
50% {
width: 100%;
-o-transform: scale(0, 0);
}
100% {
width: 100%;
-o-transform: scale(1, 1);
}
}
@-o-keyframes scaleDown {
0% {
width: 100%;
-o-transform: scale(1, 1);
}
99% {
width: 100%;
-o-transform: scale(0, 0);
}
100% {
width: 0px;
-o-transform: scale(0, 0);
}
}
@-ms-keyframes scaleUp {
50% {
width: 100%;
-ms-transform: scale(0, 0);
}
100% {
width: 100%;
-ms-transform: scale(1, 1);
}
}
@-ms-keyframes scaleDown {
0% {
width: 100%;
-ms-transform: scale(1, 1);
}
99% {
width: 100%;
-ms-transform: scale(0, 0);
}
100% {
width: 0px;
-ms-transform: scale(0, 0);
}
}
@keyframes scaleUp {
50% {
width: 100%;
transform: scale(0, 0);
}
100% {
width: 100%;
transform: scale(1, 1);
}
}
@keyframes scaleDown {
0% {
width: 100%;
transform: scale(1, 1);
}
99% {
width: 100%;
transform: scale(0, 0);
}
100% {
width: 0px;
transform: scale(0, 0);
}
}
@media screen and (min-width:768px) {
@-webkit-keyframes scaleUp {
50% {
width: 315px;
-webkit-transform: scale(0, 0);
}
100% {
width: 315px;
-webkit-transform: scale(1, 1);
}
}
@-webkit-keyframes scaleDown {
0% {
width: 315px;
-webkit-transform: scale(1, 1);
}
99% {
width: 315px;
-webkit-transform: scale(0, 0);
}
100% {
width: 0px;
-webkit-transform: scale(0, 0);
}
}
@-moz-keyframes scaleUp {
50% {
width: 315px;
-moz-transform: scale(0, 0);
}
100% {
width: 315px;
-moz-transform: scale(1, 1);
}
}
@-moz-keyframes scaleDown {
0% {
width: 315px;
-moz-transform: scale(1, 1);
}
99% {
width: 315px;
-moz-transform: scale(0, 0);
}
100% {
width: 0px;
-moz-transform: scale(0, 0);
}
}
@-o-keyframes scaleUp {
50% {
width: 315px;
-o-transform: scale(0, 0);
}
100% {
width: 315px;
-o-transform: scale(1, 1);
}
}
@-o-keyframes scaleDown {
0% {
width: 315px;
-o-transform: scale(1, 1);
}
99% {
width: 315px;
-o-transform: scale(0, 0);
}
100% {
width: 0px;
-o-transform: scale(0, 0);
}
}
@-ms-keyframes scaleUp {
50% {
width: 315px;
-ms-transform: scale(0, 0);
}
100% {
width: 315px;
-ms-transform: scale(1, 1);
}
}
@-ms-keyframes scaleDown {
0% {
width: 315px;
-ms-transform: scale(1, 1);
}
99% {
width: 315px;
-ms-transform: scale(0, 0);
}
100% {
width: 0px;
-ms-transform: scale(0, 0);
}
}
@keyframes scaleUp {
50% {
width: 315px;
transform: scale(0, 0);
}
100% {
width: 315px;
transform: scale(1, 1);
}
}
@keyframes scaleDown {
0% {
width: 315px;
transform: scale(1, 1);
}
99% {
width: 315px;
transform: scale(0, 0);
}
100% {
width: 0px;
transform: scale(0, 0);
}
}
}
.homesevencontents {
background-color: rgba(255,255,255,1);
margin: 0 0 50px;
padding: 100px 0 0;
}
@media screen and (min-width:768px) {
.homesevencontents {
margin: 0 0 200px;
}
}
.homesevencontents .image {
margin: 0 50px 120px;
}
@media screen and (max-width:768px) {
.homesevencontents .image {
margin-bottom: 30px;
}
}
.homesevencontents .header {
margin: 0 0 110px;
}
.homesevencontents .header .desc {
font-size: 15px;
text-align: left;
}
.homesevencontents .block {
background-position: right top;
background-size: 100%;
background-repeat: no-repeat;
height: auto;
margin: 0 0 0;
padding: 0;
}
@media screen and (min-width:768px) {
.homesevencontents .block {
background-position: right top;
background-size: 900px;
background-repeat: no-repeat;
height: 460px;
margin: 0 0 80px;
padding: 0;
}
}
.homesevencontents .block.block2,
.homesevencontents .block.block7 {
background-position: left top;
}
.homesevencontents .block.block4,
.homesevencontents .block.block5,
.homesevencontents .block.block6 {
background-position: center top;
background-size: 100%;
height: auto;
padding: 90% 0 0;
}
@media screen and (min-width:768px) {
.homesevencontents .block.block4,
.homesevencontents .block.block5,
.homesevencontents .block.block6 {
background-position: center top;
background-size: 300px;
height: 530px;
margin: 0;
padding: 0;
}
}
.homesevencontents .block a {
display: block;
padding: 40px 0;
}
@media screen and (min-width:768px) {
.homesevencontents .block a {
display: block;
padding: 80px 0;
}
}
.homesevencontents .block.block4 a,
.homesevencontents .block.block5 a,
.homesevencontents .block.block6 a {
display: block;
padding: 0px 0 0;
}
@media screen and (min-width:768px) {
.homesevencontents .block.block4 a,
.homesevencontents .block.block5 a,
.homesevencontents .block.block6 a {
display: block;
padding: 230px 0 0;
}
}
.homesevencontents .block .data {
background-color: rgba(255, 255, 255, .9);
height: auto;
padding: 20px;
width: 300px;
}
@media screen and (min-width:768px) {
.homesevencontents .block .data {
background-color: rgba(255, 255, 255, 1);
height: 300px;
padding: 50px;
width: 300px;
}
}
.homesevencontents .block.block2 .data,
.homesevencontents .block.block7 .data {
margin: 0 0 0 auto;
}
.homesevencontents .block.block4 .data,
.homesevencontents .block.block5 .data,
.homesevencontents .block.block6 .data {
padding: 20px 0;
margin: 0 0 0 auto;
width: 100%;
}
@media screen and (min-width:768px) {
.homesevencontents .block.block4 .data,
.homesevencontents .block.block5 .data,
.homesevencontents .block.block6 .data {
padding: 40px 30px;
margin: 0 0 0 auto;
width: 260px;
}
}
.homesevencontents .block .data .num {
font-feature-settings: "frac";
font-size: 40px; letter-spacing: 6px;
margin: 0 0 10px;
text-align: center;
}
.homesevencontents .block.block2 .data .num,
.homesevencontents .block.block7 .data .num {
text-align: right;
}
@media screen and (max-width:767px) {
.homesevencontents .block.block7 .data .num {
margin: 10px 0 0;
}
}
@media screen and (min-width:768px) {
.homesevencontents .block .data .num {
font-feature-settings: "frac";
font-size: 40px; letter-spacing: 6px;
margin: 0 0 30px;
text-align: left;
}
.homesevencontents .block.block2 .data .num,
.homesevencontents .block.block7 .data .num {
text-align: right;
}
}
.homesevencontents .block .data h3 {
font-size: 20px;
margin: 20px 0 10px;
padding: 0;
}
.homesevencontents .block.block3 .data h3,
.homesevencontents .block.block7 .data h3 {
margin: 10px 0 10px;
}
.homesevencontents .block.block4 .data h3,
.homesevencontents .block.block5 .data h3,
.homesevencontents .block.block6 .data h3 {
font-size: 16px;
margin: 0 0 20px;
text-align: center;
}
@media screen and (min-width:768px) {
.homesevencontents .block .data h3 {
font-size: 20px;
margin: 20px 0 30px;
padding: 0;
}
.homesevencontents .block.block3 .data h3,
.homesevencontents .block.block7 .data h3 {
margin: 10px 0 30px;
}
.homesevencontents .block.block4 .data h3,
.homesevencontents .block.block5 .data h3,
.homesevencontents .block.block6 .data h3 {
font-size: 20px;
margin: 20px 0 30px;
text-align: right;
}
}
.homerecruit {
position: relative;
}
@media screen and (max-width:767px) {
.homerecruit {
background: rgba(243,243,243,1);
padding: 0 0 40px;
}
}
.homerecruit .image {
margin: 0;
}
@media screen and (min-width:768px) {
.homerecruit {
background-color: rgba(243,243,243,1);
padding: 0 0 90px;
position: relative;
z-index: 1;
}
.homerecruit::before {
background-color: rgba(255,255,255,1);
content: '';
display: block;
height: 28vw;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
.homerecruit .image {
margin: 0 50px;
position: relative;
}
}
.homerecruit .block {
background-color: rgba(255, 255, 255, 1);
margin: -50px 15px 0;
padding: 0 0 40px;
}
@media screen and (min-width:768px) {
.homerecruit .block {
margin: -50px 30px 0;
padding: 0 70px 40px;
}
}
.homerecruit .block h2 {
display: inline-block;
font-size: 20px;
letter-spacing: .05em;
margin: 15px 0 10px;
padding: 15px 30px 0;
}
@media screen and (min-width:768px) {
.homerecruit .block h2 {
display: inline-block;
font-size: 50px;
margin: 15px 0 5px;
padding: 15px 30px 0;
}
}
.homerecruit .block h3 {
font-size: 10px;
font-weight: 200;
margin: 0 0 25px;
padding: 0 30px;
}
.homerecruit .block .desc {
font-size: 10px;
line-height: 2.4;
margin: 0 0 30px;
padding: 0 30px;
}
@media screen and (min-width:768px) {
.homerecruit .block h3 {
font-size: 15px;
font-weight: 200;
margin: 0 0 45px;
padding: 0 30px;
}
.homerecruit .block .desc {
font-size: 15px;
line-height: 1.8;
margin: 0 0 30px;
padding: 0 30px;
}
}
.homerecruit .block .more {
margin: 0 0 0 30px;
width: 80px;
}
@media screen and (min-width:768px) {
.homerecruit .block .more {
margin: 0 0 0 30px;
width: 110px;
}
.homerecruit .block h2 {
display: inline-block;
font-size: 50px;
margin: -50px 0 5px;
padding: 0;
}
.homerecruit .block h3 {
margin: 0 0 45px;
padding: 0;
}
.homerecruit .block .desc {
margin: 0 0 30px;
padding: 0;
}
.homerecruit .block .more {
margin: 0;
width: 110px;
}
}
@media screen and (max-width:767px) {
.homerecruit .block .more a {
border-bottom: 1px solid rgba(121,121,121, 1);
color: rgba(121, 121, 121, 1);
font-size: 10px; display: block;
padding: 0 0 7px;
}
}
@media screen and (min-width:768px) {
.homerecruit .block .more a {
border-bottom: 1px solid rgba(121,121,121, 1);
color: rgba(121, 121, 121, 1); display: block;
padding: 0 0 15px;
}
}
.homerecruit .block .more a:hover {
text-decoration: none;
}
.othercontents {
background-color: rgba(243, 243, 243, 1);
padding: 50px 0 60px;
}
@media screen and (min-width:768px) {
.othercontents {
padding: 100px 0 40px;
}
}
.othercontents .outer {
margin: auto;
}
@media screen and (min-width:768px) {
.othercontents .outer {
margin: auto;
width: 980px;
}
}
.othercontents .outer h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 30px 10px;
padding: 0;
}
@media screen and (min-width:768px) {
.othercontents .outer h2 {
font-size: 36px;
margin: 0 0 90px;
padding: 0;
}
}
@media screen and (max-width:767px) {
.othercontents .outer .block {
display: flex;
margin-bottom: 15px;
position: relative;
}
}
@media screen and (min-width:768px) {
.othercontents .outer h2 {
font-size: 50px;
}
.othercontents .outer .block {
margin-bottom: 90px;
position: relative;
}
}
.othercontents .outer .block a {
color: rgba(0, 0, 0, 1);
}
.othercontents .outer .block .image {
width: 36%;
}
@media screen and (max-width:767px) {
.othercontents .outer .block .data {
background-color: rgba(255, 255, 255, .9);
margin: 0 0 0 auto;
padding: 12px 10px 5px 15px;
width: 64%;
}
}
@media screen and (min-width:768px) {
.othercontents .outer .block .image {
width: auto;
}
.othercontents .outer .block .data {
background-color: rgba(255, 255, 255, 1);
height: 300px;
margin: 0 0 0 auto;
padding: 60px 30px;
position: relative;
width: 254px;
right: 0;
top: -40px;
}
}
@media screen and (max-width:767px) {
.othercontents .outer .block .data h3 {
font-size: 15px;
margin: 0 0 7px;
}
.othercontents .outer .block .data .desc {
font-size: 10px;
line-height: 1.7;
}
}
@media screen and (min-width:768px) {
.othercontents .outer .block .data h3 {
font-size: 20px;
margin: 0 0 30px;
}
.othercontents .outer .block .data .desc {
font-size: 14px;
line-height: 1.7;
}
} .pagemainimg {
height: 100vh;
overflow: hidden;
}
.post-type-archive-news .pagemainimg,
.tax-cate .pagemainimg,
.single-news .pagemainimg {
height: 200px;
}
.pagemainimg .bg {
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
@media screen and (max-width:767px) {
.pagemainimg {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
}
.pagemainimg .bg {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
}
.pagestaff {
margin: 0 auto 50px;
padding: 45px 0 50px;
width: 88vw;
}
@media screen and (min-width:768px) {
.pagestaff {
margin: 0 0 110px;
padding: 150px 0 200px;
width: auto;
}
}
.pagestaff h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 35px;
padding: 0;
text-transform: capitalize;
}
@media screen and (min-width:768px) {
.pagestaff h2 {
font-size: 50px;
letter-spacing: .06em;
margin: 0 0 180px;
padding: 0;
text-transform: capitalize;
}
}
.pagestaff .list {
color: rgba(111, 111, 111, 1);
margin-bottom: 35px;
text-align: center;
}
.pagestaff .list .image {
margin-bottom: 15px;
}
@media screen and (min-width:768px) {
.pagestaff .list {
color: rgba(111, 111, 111, 1);
margin-bottom: 80px;
text-align: center;
}
.pagestaff .list .image {
margin-bottom: 30px;
}
}
.pagestaff .list .image img,
.pagelineup .list .image img {
border-radius: 100%;
}
.pagestaff .list h3,
.pagelineup .list h3 {
font-size: 14px;
font-weight: 200;
letter-spacing: .075em;
margin: 0 0 5px;
padding: 0;
}
@media screen and (min-width:768px) {
.pagestaff .list h3,
.pagelineup .list h3 {
font-size: 20px;
font-weight: 200;
letter-spacing: .075em;
margin: 0 0 10px;
padding: 0;
}
}
.pagestaff .list h3 a {
color: rgba(111, 111, 111, 1);
}
.pagestaff .list .eng {
border-bottom: 1px solid rgba(111, 111, 111, 1);
display: inline-block;
font-size: 10px;
letter-spacing: .075em;
margin: 0 0 5px;
padding: 0 0 5px;
}
.pagestaff .list .post {
font-size: 10px;
}
@media screen and (min-width:768px) {
.pagestaff .list .eng {
border-bottom: 1px solid rgba(111, 111, 111, 1);
display: block;
font-size: 15px;
letter-spacing: .075em;
margin: 0 auto 10px;
padding: 0 0 10px;
width: 140px;
}
.pagestaff .list .post {
font-size: 15px;
}
}
.pagemenu {
position: relative;
}
@media screen and (max-width:767px) {
.pagemenu {
background-color: rgba(243, 243, 243, 1);
}
}
@media screen and (min-width:768px) {
.pagemenu:after {
background-color: rgba(243, 243, 243, 1);
content: '';
display: block;
height: calc(100% - 300px);
position: absolute;
top: 300px;
width: 100%;
z-index: -1;
}
}
.page-id-66 .pagemenu {
background: none;
position: relative;
}
.page-id-66 .pagemenu:after {
background-color: rgba(243, 243, 243, 1);
content: '';
height: 95%;
display: block;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
@media screen and (max-width:767px) {
.page-id-48 .price-bikami-image {
margin: 0 auto 50px;
width: 81vw;
}
.page-id-48 .price-bikami-text {
font-size: 15px;
line-height: 1.8;
margin: 0 auto 50px;
width: 81vw;
}
.page-id-48 .price-bikami-text h5 {
font-size: 18px;
font-weight: bold;
margin: 0 0 30px;
}
}
@media screen and (min-width:768px) {
.page-id-48 .price-bikami-image {
margin: 0 auto 50px;
}
.page-id-48 .price-bikami-text {
font-size: 15px;
line-height: 1.8;
margin: 0 auto 50px;
}
.page-id-48 .price-bikami-text h5 {
font-size: 18px;
font-weight: bold;
margin: 0 0 30px;
}
}
@media screen and (min-width:768px) { .page-id-66 .pagemenu {
margin: 0 0 85px;
padding: 0 0 0;
}
}
.pagemenu .mainimg {
margin: 0;
padding: 0 0 30px;
}
.pagemenu .mainimg img {
margin: -100px 0 0;
}
.page-id-66 .pagemenu .mainimg img {
margin: 100px 0 0;
}
@media screen and (min-width:768px) {
.pagemenu .mainimg {
margin: 0;
padding: 0 55px 100px;
}
.pagemenu .mainimg img,
.page-id-66 .pagemenu .mainimg img {
margin: 0px 0 0;
}
}
.pagemenu h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 auto 15px;
padding: 0;
text-transform: capitalize;
width: 81vw;
}
@media screen and (min-width:768px) {
.pagemenu h2 {
font-size: 50px;
letter-spacing: .06em;
margin: 0 0 65px;
padding: 0;
text-transform: capitalize;
width: auto;
}
}
@media screen and (max-width:767px) {
.pagemenu .desc {
font-size: 10px;
line-height: 2.4;
margin: 0 auto 50px;
width: 81vw;
}
}
@media screen and (min-width:768px) {
.pagemenu .desc {
font-size: 15px;
line-height: 1.8;
margin: 0 0 70px;
}
}
@media screen and (max-width:767px) {
.pagemenu .list {
margin: 0 auto 50px;
width: 81vw;
}
.pagemenu .list h3 {
font-size: 16px; letter-spacing: .05em;
margin: 0 0 10px;
padding: 0;
}
.pagemenu .list dl {
border-bottom: 1px solid rgba(0, 0, 0, 1);
display: flex;
font-size: 14px;
margin-bottom: 6px;
padding-bottom: 6px;
}
.pagemenu .list dl dd {
margin: auto 0 auto auto;
}
}
@media screen and (min-width:768px) {
.pagemenu .list {
margin-bottom: 50px;
}
.pagemenu .list h3 {
font-size: 18px; margin: 0 0 20px;
padding: 0;
}
.pagemenu .list dl {
border-bottom: 1px solid rgba(0, 0, 0, 1);
display: flex;
font-size: 15px;
margin-bottom: 6px;
padding-bottom: 6px;
}
}
.pagemenu .list dl dt {
margin: auto auto auto 0;
}
.pagemenu .list dl dd {
margin: auto 0 auto auto;
}
.pagemenu .list .menupricedesc {
margin: 10px 0;
font-size: 12px;
}
.pagemenubigami {
padding: 80px 0 0;
}
.pagemenubigami .banner {
background-position: center top;
background-repeat: no-repeat;
background-size: 200%;
height: 300px;
margin: 0 -15px;
padding: 20px;
}
.pagemenubigami .banner .block {
background-color: rgba(255, 255, 255, 1);
padding: 30px;
height: 250px;
margin: 120px auto 70px;
width: 81vw;
}
@media screen and (min-width:768px) {
.pagemenubigami .banner {
background-position: center top;
background-repeat: no-repeat;
background-size: auto;
height: 460px;
padding: 80px;
}
.pagemenubigami .banner .block {
background-color: rgba(255, 255, 255, 1);
padding: 50px;
height: 300px;
margin: auto;
width: 300px;
}
}
.pagemenubigami .banner .block h3 {
font-size: 20px; margin: 0 0 30px;
padding: 0;
text-align: center;
}
.pagemenubigami .banner .block .desc {
line-height: 1.7;
}
.pagemenu .flowouter .flow {
font-size: 12px;
margin: 0 0 50px;
}
.pagesalon {
margin: 100px 0 0;
padding: 0 0 40px;
position: relative;
}
@media screen and (min-width:768px) {
.pagesalon {
margin: 250px 0 0;
padding: 0 0 220px;
}
}
body.page-id-66 .menuother .list {
margin: 0 0 70px;
}
body.page-id-66 .menuother .list h3 {
font-size: 18px; line-height: 1.5;
margin: 0 0 50px;
padding: 0;
}
body.page-id-66 .menuother .list .table {
border-bottom: 1px solid #ddd;
}
body.page-id-66 .menuother .list .table th {
font-weight: normal;
}
body.page-id-66 .menuother .list .table tr:first-child th {
border-top: none;
text-align: center;
}
body.page-id-66 .menuother .list .table tr:first-child td {
border-top: none;
}
body.page-id-66 .menuother .list .table td {
text-align: center;
}
body.page-id-66 .menuother .notice03 {
margin: 0 0 50px;
padding: 0;
}
body.page-id-66 .menuother .notice03 span {
font-weight: 600;
}
.hairesthe02 {
margin: 0 0 30px;
}
.gallery {
padding: 150px 0 50px;
}
@media screen and (max-width:767px) {
body.product .gallery {
padding: 60px 0 50px;
}
}
@media screen and (min-width:768px) {
.gallery {
padding: 140px 0 70px;
}
}
.gallery h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 10px;
padding: 0;
text-align: center;
text-transform: capitalize;
}
@media screen and (min-width:768px) {
.gallery h2 {
font-size: 50px;
letter-spacing: .05em;
margin: 0 0 70px;
padding: 0;
text-align: center;
text-transform: capitalize;
}
}
.gallery .insta {
color: rgba(121, 121, 121, 1);
font-size: 15px;
text-align: center;
}
.gallery .insta i {
font-size: 24px;
vertical-align: middle;
}
.gallery .more {
text-align: center;
}
.gallery .more a {
background-color: rgba(243, 243, 243, 1);
color: rgba(0, 0, 0, 1);
display: block;
margin: 90px auto 0;
padding: 20px 50px;
text-align: center;
width: 190px;
}
@media screen and (max-width:767px) {
.pagesalon:after {
background-color: rgba(243, 243, 243, 1);
content: '';
height: 64vw;
position: absolute;
top: -35px;
width: 72%;
z-index: -1;
}
}
@media screen and (min-width:768px) {
.pagesalon:after {
background-color: rgba(243, 243, 243, 1);
content: '';
height: 755px;
position: absolute;
top: -120px;
width: 63%;
z-index: -1;
}
}
.pagesalonmainimg {
width: 100%;
}
@media screen and (min-width:768px) {
.pagesalonmainimg {
float: left;
width: 660px;
}
.pagesalon .salondata {
float: left;
}
}
.pagesalon .salondata h2 {
font-size: 20px;
letter-spacing: .05em;
line-height: 1.2;
margin: 0 0 0 30px;
padding: 0;
}
@media screen and (min-width:768px) {
.pagesalon .salondata h2 {
font-size: 50px;
line-height: 1.2;
margin: 0 0 26px 30px;
padding: 0;
}
}
.pagesalon .salondata .block {
background-color: rgba(255, 255, 255, 1);
font-size: 10px;
padding: 30px;
width: 100%;
}
@media screen and (min-width:768px) {
.pagesalon .salondata .block {
background-color: rgba(255, 255, 255, 1);
margin: 0 0 0 -50px;
padding: 30px;
width: 370px;
}
}
@media screen and (max-width:767px) {
.pagesalon .salondata .block h3 {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 11px;
letter-spacing: .15em;
margin: 0 0 5px;
padding: 0;
}
}
@media screen and (min-width:768px) {
.pagesalon .salondata .block h3 {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
letter-spacing: .15em;
margin: 0 0 20px;
padding: 0;
}
}
.pagesalon .salondata .block .address {
color: rgba(121, 121, 121, 1);
letter-spacing: .075em;
margin: 0 0 5px;
}
@media screen and (max-width:767px) {
.pagesalon .salondata .block .tel {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
letter-spacing: .15em;
margin: 0 0 10px;
}
}
@media screen and (min-width:768px) {
.pagesalon .salondata .block .tel {
font-family: bebas-neue, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
letter-spacing: .15em;
margin: 0 0 10px;
}
}
.pagesalon .salondata .block .open {
color: rgba(121, 121, 121, 1);
margin: 0 0 20px;
}
.pagesalon .salondata .block .closed {
color: rgba(121, 121, 121, 1);
}
@media screen and (max-width:767px) {
.pagesalon .pagesalonmainimg {
margin: 0 auto 35px;
width: 81vw;
}
.pagesalon .salondata {
margin: auto;
width: 81vw;
}
}
@media screen and (min-width:768px) {
.pagesalon .pagesalonmainimg {
margin: 0 0 35px;
}
}
.pagesalon .salonsubimg {
font-size: 0;
margin: 0 auto 15px;
padding: 0;
overflow: visible;
width: 81vw;
}
@media screen and (min-width:768px) {
.pagesalon .salonsubimg {
width: 1180px;
}
}
.pagesalon .salonsubimg li {
display: inline-block;
padding: 0 0 15px 0;
width: 22%;
}
.pagesalon .salonsubimg li:first-child {
width: 33%;
}
.pagesalon .salonsubimg li:last-child {
padding: 0;
width: 22%;
}
@media screen and (min-width:768px) {
.pagesalon .salonsubimg li {
display: inline-block;
padding: 0 25px 15px 0;
width: 263px;
}
.pagesalon .salonsubimg li:first-child {
width: 385px;
}
.pagesalon .salonsubimg li:last-child {
padding: 0;
width: 238px;
}
}
.pagesalon .map {
margin: auto;
padding: 0;
width: 81vw;
}
@media screen and (min-width:768px) {
.pagesalon .map {
padding: 0 40px;
width: auto;
}
}
.pagesalon .map iframe {
height: 35vw;
margin: auto;
width: 81vw;
}
@media screen and (min-width:768px) {
.pagesalon .map iframe {
height: 380px;
width: 100%;
}
}
@media screen and (max-width:767px) {
.pagesalon .map .desc {
font-size: 10px;
text-align: center;
}
}
@media screen and (min-width:768px) {
.pagesalon .map .desc {
font-size: 15px;
text-align: right;
}
}  @media screen and (max-width:767px) {
.pagelineup {
margin: 0 auto;
padding: 45px 0 10px;
width: 88vw;
}
}
.pagelineup h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 30px;
padding: 0;
}
@media screen and (min-width:768px) {
.pagelineup {
padding: 160px 0 260px;
}
.pagelineup h2 {
font-size: 50px;
margin: 0 0 180px;
padding: 0;
}
}
@media screen and (max-width:767px) {
.pagelineup .list {
margin: 0 0 40px;
}
}
@media screen and (min-width:768px) {
.pagelineup .list {
margin: 0 0 100px;
}
}
.pagelineup .list h3 { text-align: center;
}
@media screen and (max-width:767px) {
.pagelineup .list .image {
margin: 0 0 20px;
}
.pagelineup .list h3:after {
content: '';
border-bottom: 1px solid rgba(111, 111, 111, 1);
display: block;
margin: 8px auto;
width: 100px;
}
.pagelineup .list .price {
font-size: 10px;
text-align: center;
}
}
@media screen and (min-width:768px) {
.pagelineup .list .image {
margin: 0 0 30px;
}
.pagelineup .list h3:after {
content: '';
border-bottom: 1px solid rgba(111, 111, 111, 1);
display: block;
margin: 18px auto;
width: 130px;
}
.pagelineup .list .price {
text-align: center;
}
} @media screen and (max-width:767px) {
body.company:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/side01.png);
left: 12px;
position: absolute;
top: 700px;
z-index: 1;
}
.subimg01 {
background-color: rgba(243, 243, 243, 1);
padding: 0 0 100px;
}
}
@media screen and (min-width:768px) {
body.company:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/company01.svg);
position: absolute;
top: 1400px;
left: 65px;
width: 14px;
z-index: 1;
}
.subimg01 {
background-color: rgba(243, 243, 243, 1);
padding: 0 0 200px;
}
}
@media screen and (max-width:767px) {
.pagecompany01 {
margin: -40px auto 40px;
width: 82vw;
}
.pagecompany01 h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 5px;
padding: 0;
}
.pagecompany01 h3 {
font-size: 10px;
margin: 0;
padding: 0;
}
}
@media screen and (min-width:768px) {
.pagecompany01 {
margin: -80px 0 50px;
}
.pagecompany01 h2 {
font-size: 50px;
margin: 0 0 20px;
padding: 0;
}
.pagecompany01 h3 {
font-size: 15px;
letter-spacing: .5em;
margin: 0;
padding: 0;
}
}
@media screen and (max-width:767px) {
.companydata {
font-size: 13px;
margin-bottom: 80px;
padding: 0 0 240px;
background-position: center bottom;
background-repeat: no-repeat;
background-size: 82vw 54vw;
}
.companydata .data .headoffice,
.companydata .data .my,
.companydata .data .aruchizan {
border-bottom: 1px solid rgba(112, 112, 112, 1);
margin: 0 auto 40px;
padding: 0 0 20px;
width: 82vw;
}
.companydata .data .lohas {
margin: 0 auto 40px;
padding: 0;
width: 82vw;
}
}
@media screen and (min-width:768px) {
.companydata {
font-size: 15px;
margin: 0 0 240px;
background-position: right top;
background-repeat: no-repeat;
background-size: 50%;
}
.companydata .data .headoffice,
.companydata .data .my,
.companydata .data .aruchizan {
border-bottom: 1px solid rgba(112, 112, 112, 1);
margin: 0 0 50px;
padding: 0 0 40px;
}
}
@media screen and (max-width:767px) {
.companydata .data h4 {
font-size: 16px;
font-weight: 600;
margin: 0 0 16px;
padding: 0;
}
}
@media screen and (min-width:768px) {
.companydata .data h4 {
font-size: 18px;
font-weight: 600;
margin: 0 0 16px;
padding: 0;
}
}
.companydata .data dl {
margin: 0;
padding: 0;
}
.companydata .data dl dt {
clear: left;
float: left;
font-weight: normal;
width: 50px;
}
.companydata .data dl dd {
float: left;
}
.companydata .data .address,
.companydata .data .tel,
.companydata .data .fax,
.companydata .data .mail,
.companydata .data .setsuritsu,
.companydata .data .ceo,
.companydata .data .money {
margin: 0 0 16px;
}
.companydata .subimg02 {
overflow: visible;
}
.companydata .subimg02 img {}
@media screen and (min-width:768px) {
.companydata .subimg02 img {
max-width: none;
width: 770px;
}
}
.headoffice h4 {
font-weight: bold;
}
@media screen and (max-width:767px) {
.headoffice .map {
background-color: rgba(243, 243, 243, 1);
display: inline-block;
padding: 7px;
}
}
@media screen and (min-width:768px) {
.headoffice .map {
background-color: rgba(243, 243, 243, 1);
display: inline-block;
padding: 7px;
}
}
.headoffice .map a {
border: 1px solid rgba(255, 255, 255, 1);
display: block;
letter-spacing: .05em;
padding: 10px 35px;
text-align: center;
} @media screen and (max-width:767px) {
body.company .image01 {
margin: auto 0 auto auto;
width: 85%;
}
}
.ceomessage {
position: relative;
}
@media screen and (max-width:767px) {
.ceomessage .image {
margin: auto 0 0 auto;
width: 91vw;
}
}
@media screen and (min-width:768px) {
.ceomessage .image {
margin: auto 0 70px auto;
width: 70.27vw;
}
}
@media screen and (max-width:767px) {
.ceomessage .desc {
background-color: rgba(255, 255, 255, 1);
margin: -24px auto 0 0;
padding: 30px 9vw;
position: relative;
width: 83%;
}
.ceomessage .desc h4 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 30px;
}
.ceomessage .desc h4 span {
display: inline-block;
font-size: 13px;
font-weight: 600;
margin-left: 50px;
}
.ceomessage .desc div {
font-size: 10px;
line-height: 2.4;
}
}
@media screen and (min-width:768px) {
.ceomessage .desc {
background-color: rgba(255, 255, 255, 1);
left: 14vw;
min-width: 500px;
padding: 2.6vw;
position: absolute;
top: 3vw;
width: 33.33vw;
}
.ceomessage .desc h4 {
font-size: 2.6vw;
letter-spacing: .02em;
margin: 0 0 30px;
}
.ceomessage .desc h4 span {
font-size: .93vw;
font-weight: 600;
margin-left: 1vw;
}
.ceomessage .desc div {
font-size: 16px;
line-height: 2;
}
}
@media screen and (max-width:767px) {
.ceoprofile {
margin: 0px auto 60px;
padding: 30px 0;
width: 82vw;
}
.ceoprofile h4 {
font-size: 20px;
font-weight: normal;
letter-spacing: .05em;
margin: 0 0 20px;
}
.ceoprofile {
font-size: 10px;
line-height: 2;
}
}
@media screen and (min-width:768px) {
.ceoprofile {
margin: 0 0 180px 70px;
}
.ceoprofile h4 {
font-size: 18px;
font-weight: bold;
margin: 0 0 30px;
}
.ceoprofile {
font-size: 18px;
line-height: 2;
}
}
@media screen and (max-width:767px) {
.businessgroup {
margin: auto auto 20px;
width: 82vw;
}
.businessgroup a {
display: block;
margin: 0 0 30px;
}
.business {
margin: 0 auto 50px;
width: 82vw;
}
.business h3 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 10px;
padding: 0;
}
.business h4 {
font-size: 10px;
font-weight: normal;
margin: 0 0 20px;
padding: 0;
}
.business div {
font-size: 10px;
line-height: 2.4;
}
}
@media screen and (min-width:768px) {
.businessgroup {
margin-bottom: 170px;
}
.businessgroup a {
display: block;
margin: 0 0 30px;
}
.business {
margin: 0 0 100px 70px;
}
.business h3 {
font-size: 50px;
letter-spacing: .05em;
margin: 0 0 20px;
padding: 0;
}
.business h4 {
font-size: 15px;
font-weight: 600;
letter-spacing: .5em;
margin: 0 0 50px;
padding: 0;
}
.business div {
font-size: 18px;
line-height: 2.22;
}
} .modal {
display: none;
height: 100vh;
overflow-y: auto;
position: fixed;
top: 0;
width: 100%;
}
.modal__bg {
background: rgba(64, 64, 64, .75);
height: 100vh;
left: 0;
position: absolute;
width: 100%;
}
.modal__content {
background: rgba(255, 255, 255, .85);
color: rgba(0, 0, 0, 1);
left: 50%;
padding: 0;
position: absolute;
top: 0%;
transform: translate(-50%, 0%);
width: 1000px;
max-width: 100%;
}
@media screen and (min-width:768px) {
.modal__content {
top: 50%;
transform: translate(-50%, -50%);
}
}
.modal__content a {
color: rgba(0, 0, 0, 1);
}
.modal__content__right {
padding: 25px 30px 100px 30px;
}
@media screen and (max-width:767px) {
.modal__content__right {
background-color: rgba(255, 255, 255, 1);
}
}
@media screen and (min-width:768px) {
.modal__content__right {
padding: 25px 35px 25px 60px;
}
}
.modal__content__right .num,
.modal__content__right .num {
border-bottom: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
line-height: 1;
padding: 20px 0 0px;
}
@media screen and (min-width:768px) {
.modal__content__right .num,
.modal__content__right .num {
padding: 30px 0 40px;
}
}
.modal__content__right .num span,
.modal__content__right .num span {
display: block;
margin-top: 0;
}
.js-modal-close {
display: block;
text-align: right;
}
.js-modal-close img {
width: 36px;
}
.modal__content__right .name {
margin: 0 0 25px 0;
padding-bottom: 12px;
}
@media screen and (min-width:768px) {
.modal__content__right .name {
margin: 0 55px 0 0;
padding-bottom: 0;
}
}
.modal__content__right .name h3,
.modal__content__right .name h3 {
color: rgba(0, 0, 0, 1);
font-size: 16px;
font-weight: bold;
letter-spacing: .2em;
margin: 0;
padding: 0 0 12px;
}
.modal__content__right .name h4 {
font-size: 12px;
font-weight: bold;
letter-spacing: .17em;
margin: 0 0 14px;
padding: 0;
}
@media screen and (min-width:768px) {
.modal__content__right .name h4 {
padding: 0;
}
}
.modal__content__right .name p.post {
border-bottom: 1px solid rgba(0, 0, 0, 1);
border-top: 1px solid rgba(0, 0, 0, 1);
font-size: 12px;
font-weight: bold;
margin: 0 0 30px;
padding: 6px 0;
}
.modal__content__right .desc {
font-size: 12px;
font-weight: bold;
letter-spacing: .17em;
line-height: 1.7;
margin: 0 0 75px 0;
}
@media screen and (min-width:768px) {
.modal__content__right .desc {
margin: 0 55px 25px 0;
}
}
.modal__content__right .insta,
.modal__content__right .blog {
display: inline-block;
font-size: 26px;
padding: 0 10px 0 0;
text-align: left;
} @media screen and (max-width:767px) {
body.privacypolicy:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/side01.png);
left: 12px;
position: absolute;
top: 400px;
z-index: 1;
}
.subimg01 {
background-color: rgba(243, 243, 243, 1);
padding: 0 0 100px;
}
}
@media screen and (min-width:768px) {
body.privacypolicy:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/policy01.svg);
height: 102px;
position: absolute;
top: 800px;
left: 65px;
width: 14px;
z-index: 1;
}
}
.privacypolicy .header {
background-color: rgba(243, 243, 243, 1);
font-size: 15px;
line-height: 1.8;
margin: -230px 0 100px;
padding: 70px;
text-align: center;
}
.privacypolicy .header h2 {
font-size: 50px;
letter-spacing: .05em;
margin: 0 0 40px;
padding: 0;
}
@media screen and (max-width:767px) {
.privacypolicy .desc,
.privacycontact {
font-size: 12px;
margin: auto;
width: 82vw;
}
.privacycontact {
margin: 0 auto 70px;
}
.privacypolicy .desc h3 {
font-size: 12px;
font-weight: bold;
margin: 50px 0;
padding: 0;
}
.privacypolicy .desc h4 {
font-size: 12px;
font-weight: bold;
margin: 0 0 10px;
padding: 0;
}
}
@media screen and (min-width:768px) {
.privacypolicy .desc {
font-size: 15px;
}
.privacypolicy .desc h3 {
font-size: 15px;
margin: 50px 0;
padding: 0;
}
.privacypolicy .desc h4 {
font-size: 15px;
font-weight: bold;
margin: 0 0 10px;
padding: 0;
}
}
.privacypolicy .desc p {
margin: 0 0 30px;
padding: 0;
} body.contact:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/contact01.svg);
height: 212px;
position: absolute;
top: 800px;
left: 65px;
width: 16px;
z-index: 1;
content: url(//copain-grp.jp/wp-content/themes/copain/images/company01.svg);
position: absolute;
top: 400px;
left: 12px;
width: 14px;
z-index: 1;
}
@media screen and (max-width:767px) {
body.contact:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/side01.png);
position: absolute;
top: 400px;
left: 12px;
z-index: 1;
}
}
@media screen and (min-width:768px) {
body.contact:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/contact01.svg);
position: absolute;
top: 800px;
left: 65px;
z-index: 1;
}
}
.contact .header {
background-color: rgba(243, 243, 243, 1);
font-size: 15px;
line-height: 1.8;
margin: -230px 0 100px;
padding: 70px;
text-align: center;
}
.contact .header h2 {
font-size: 50px;
letter-spacing: .05em;
margin: 0 0 40px;
padding: 0;
}
.contact .desc {
font-size: 15px;
}
.contactform .form-control {
background-color: rgba(244, 244, 244, 1);
border: none;
border-radius: 0;
font-size: 16px;
padding: 32px 32px;
-webkit-box-shadow: none;
box-shadow: none;
}
@media screen and (max-width:767px) {
.contactform {
margin: auto;
width: 82vw;
}
.contactform dl {
border-bottom: 1px solid rgba(88, 88, 88, 1);
display: block;
font-size: 14px;
margin-bottom: 30px;
padding: 0;
width: 100%;
}
.contactform dl dt {
display: block;
font-weight: normal;
margin: 0 0 10px;
}
.contactform dl dd {
display: block;
}
.contactform .meiwaku {
font-size: 10px;
line-height: 2;
margin: 0 0 20px;
}
}
@media screen and (min-width:768px) {
.contactform dl {
border-bottom: 1px solid rgba(88, 88, 88, 1);
display: table;
font-size: 16px;
margin-bottom: 30px;
padding: 0;
width: 100%;
}
.contactform dl dt {
display: table-cell;
font-weight: normal;
width: 180px;
}
.contactform dl dd {
display: table-cell;
}
.contactform .meiwaku {
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
text-align: center;
}
}
@media screen and (max-width:767px) {
.contactform .privacycheck {
font-size: 14px;
}
}
.contactform .privacycheck .left,
.contactform .privacycheck .right {
float: left;
}
.contactform .privacycheck .right {
margin-left: 20px;
text-decoration: underline;
}
@media screen and (max-width:767px) {
.contactform .send {
display: block;
margin: 30px auto 60px;
position: relative;
width: 190px;
}
.contactform .send .btn {
border: 1px solid rgba(88, 88, 88, 1);
border-radius: 0;
font-size: 14px;
font-weight: 200;
letter-spacing: .2em;
padding: 20px 60px;
position: relative;
}
.contactform .send:after {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow03.svg);
height: 12px;
position: absolute;
top: 20px;
right: -30px;
width: 48px;
}
}
@media screen and (min-width:768px) {
.contactform .send {
display: block;
margin: 60px auto;
position: relative;
width: 300px;
}
.contactform .send .btn {
border: 1px solid rgba(88, 88, 88, 1);
border-radius: 0;
font-size: 20px;
font-weight: 200;
letter-spacing: .2em;
padding: 20px 106px;
position: relative;
}
.contactform .send:after {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow03.svg);
height: 12px;
position: absolute;
top: 20px;
right: -30px;
width: 48px;
}
} @media screen and (max-width:767px) {
.sidebar {
font-size: 10px;
margin: auto auto 70px;
width: 82vw;
}
.sidebar h4 {
font-size: 11px;
font-weight: bold;
}
.sidebar ul {
line-height: 2;
margin-bottom: 30px;
padding-left: 15px;
}
body .blogmain {
border-bottom: 2px solid rgba(0,0,0,1);
font-size: 10px;
line-height: 2.4;
margin: auto auto 70px;
padding: 0 0 70px;
width: 82vw;
}
}
body.archive article {
margin: 0 0 50px;
}
@media screen and (max-width:767px) {
body.single:before  {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow05.svg);
left: 12px;
position: absolute;
top: 400px;
width: 9px;
z-index: 1;
}
}
@media screen and (min-width:768px) {
body.single:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow05.svg);
height: 136px;
position: absolute;
top: 800px;
left: 65px;
width: 9px;
z-index: 1;
}
}
@media screen and (max-width:767px) {
body.single .entry-header {
border-bottom: 1px solid rgba(51, 51, 51, 1);
margin: 0 0 30px;
padding: 0 0 30px 10px;
}
body.single .entry-header h1.entry-title {
font-size: 14px;
margin: 0;
padding: 0;
}
}
@media screen and (min-width:768px) {
body.single .entry-header {
border-bottom: 1px solid rgba(51, 51, 51, 1);
margin: 0 0 100px;
padding: 0 0 30px 10px;
}
body.single .entry-header h1.entry-title {
font-size: 18px;
margin: 0;
padding: 0;
}
}
body.single .entry-header p.date {
text-align: right;
}
body.page .header {
margin: -0 0 100px;
}
@media screen and (max-width:767px) {
body.privacypolicy .header,
body.contact .header,
body.news .header,
body.single .header,
body.archive .header,
body.page .header,
.carousel-cell .header {
background-color: rgba(243, 243, 243, 1);
font-size: 10px;
line-height: 2.2;
margin: -110px auto 100px;
padding: 60px 30px 30px;
position: relative;
text-align: center;
width: 82vw;
}
}
@media screen and (min-width:768px) {
body.privacypolicy .header,
body.contact .header,
body.news .header,
body.single .header,
body.archive .header,
body.page .header,
.carousel-cell .header {
background-color: rgba(243, 243, 243, 1);
font-size: 15px;
line-height: 1.8;
margin: -60px 0 100px;
padding: 60px 30px 30px;
position: relative;
text-align: center;
}
}
body.home.page .header {
background: none;
margin: 0 0 80px;
padding: 0 20px; }
@media screen and (min-width:768px) {
body.home.page .header {
background: none;
margin: 0 0 80px;
padding: 0 0 0 60px; }
}
@media screen and (min-width:768px) {
body.privacypolicy .header,
body.contact .header,
body.news .header,
body.single .header,
body.archive .header,
body.page .header,
.carousel-cell .header {
margin: -60px 0 100px;
padding: 30px;
}
}
body.page .carousel-cell .header {
background-color: rgba(243, 243, 243, 1);
font-size: 15px;
line-height: 1.8;
margin: 0px 0 0;
padding: 80px 0 30px;
position: relative;
text-align: center;
}
@media screen and (min-width:768px) {
body.page .carousel-cell .header {
background-color: rgba(243, 243, 243, 1);
font-size: 15px;
line-height: 1.8;
margin: 0px 0 100px;
padding: 30px;
position: relative;
text-align: center;
}
body.privacypolicy .header,
body.contact .header,
body.news .header,
body.single .header,
body.archive .header,
body.page .header,
.carousel-cell .header {
margin: -60px 0 100px;
padding: 60px;
}
}
body.news .header h2,
body.single .header h2,
body.archive .header h2,
body.page .header h2,
.carousel-cell .header h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0;
padding: 0;
}
body.page-id-68 .header h2,
body.page-id-226 .header h2,
body.page .pageconcept .header h2,
body.page .carousel-cell .header h2 {
margin: 0 0 20px;
}
@media screen and (min-width:768px) {
body.news .header h2,
body.single .header h2,
body.archive .header h2,
body.page .header h2,
.carousel-cell .header h2 {
font-size: 50px;
}
body.page-id-68 .header h2,
body.page-id-226 .header h2,
body.page .pageconcept .header h2,
body.page .carousel-cell .header h2 {
margin: 0 0 40px;
}
}
body.page.home .homesevencontents .header h2 {
font-size: 36px;
margin: 0 60px 30px 0;
padding: 0;
}
@media screen and (max-width:767px) {
body.page.home .homesevencontents .header h2 {
font-size: 20px;
margin: 0 60px 30px 0;
padding: 0;
text-align: left;
}
}
@media screen and (min-width:768px) {
body.page.home .homesevencontents .header h2 {
font-size: 50px;
float: left;
margin: 0 60px 60px 0;
padding: 0;
}
}
body.archive.post-type-archive-faq .header h2 {
font-size: 20px;
letter-spacing: .05em;
margin: 0 0 20px;
padding: 0;
}
body.main-concept {
position: relative;
}
@media screen and (max-width:767px) {
body.privacypolicy .header:before,
body.contact .header:before,
body.news .header:before,
body.single .header:before,
body.archive .header:before,
body.page .header:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow04.svg);
height: 10px;
position: absolute;
top: 23px;
left: 27px;
width: 94px;
z-index: 1;
}
.section-concept-body:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow04.svg);
height: 10px;
position: absolute;
top: 23px;
left: 19px;
width: 94px;
z-index: 1;
}
}
@media screen and (min-width:768px) {
body.privacypolicy .header:before,
body.contact .header:before,
body.news .header:before,
body.single .header:before,
body.archive .header:before,
body.page .header:before {
content: url(//copain-grp.jp/wp-content/themes/copain/images/arrow04.svg);
height: 10px;
position: absolute;
top: 27px;
left: 27px;
width: 94px;
z-index: 1;
}
}
body.home.page .header:before {
display: none;
}
body.news .entry-content,
body.single .entry-content {
margin: 0 0 100px;
}
.pageconcept {
margin: -30px 0 0;
position: relative;
}
@media screen and (min-width:768px) {
.pageconcept {
margin: -60px 0 0;
}
}
body.page .pageconcept .header:before {
top: 20px;
}
@media screen and (min-width:768px) {
body.page .pageconcept .header,
body.page .carousel-cell .header {
text-align: left;
margin: 0 0 290px;
height: 755px;
padding: 170px 0 200px 110px;
}
}
.pageconcept .image,
.carousel-cell .image {
position: relative;
z-index: 1;
}
body.page .carousel-cell .image img {
width: 100%;
position: relative;
}
@media screen and (min-width:768px) {
.pageconcept .image,
.carousel-cell .image {
left: 500px;
position: absolute;
right: auto;
top: 240px;
}
body.page .carousel-cell .image img {
width: auto;
}
body.page-id-53 .pageconcept .image img,
body.page-id-55 .pageconcept .image img,
body.page-id-57 .pageconcept .image img,
body.page-id-59 .pageconcept .image img,
body.page-id-61 .pageconcept .image img,
body.page-id-63 .pageconcept .image img,
body.page-id-66 .pageconcept .image img,
body.page .carousel-cell .image.carousel01 img {
max-width: 774px;
}
}
.carousel-cell {
width: 100%;
}
.carousel-cell .header {
z-index: 11111;
}
.carousel-cell .header .more {
border-bottom: 2px solid rgba(112, 112, 112, 1);
display: inline-block;
margin: 30px 0 0;
padding: 0 0 10px;
width: 115px;
}
.carousel-cell .header .more a {
display: block;
}
@media screen and (min-width:768px) {
.carousel-cell .header .more {
margin: 80px 0 0;
}
}
.carousel-cell .image {
z-index: 15151;
}
.carousel-cell.is-selected .header {
z-index: 22222;
}
.carousel-cell.is-selected .image {
z-index: 33333;
}
.flickity-viewport .image {
overflow: visible;
} @media screen and (max-width:767px) {
body .faqmain {
border-bottom: 2px solid rgba(0,0,0,1);
margin: auto auto 70px;
padding: 0 0 70px;
width: 82vw;
}
}
body.archive.post-type-archive-faq article {
margin: 0 0 10px;
}
body.archive.post-type-archive-faq .list {
border-bottom: 1px solid rgba(0, 0, 0, 1);
font-size: 16px;
margin: 0 0 40px;
line-height: 1.875;
position: relative;
}
@media screen and (min-width:768px) {
body.archive.post-type-archive-faq .list:after {
content: '';
position: absolute;
bottom: 0;
border-bottom: 3px solid rgba(0, 0, 0, 1);
width: 25%;
}
}
@media screen and (max-width:767px) {
body.archive.post-type-archive-faq .list h3 {
font-size: 13px;
font-weight: bold;
line-height: 1.875;
margin: 0 0 20px;
padding: 0;
position: relative;
}
body.archive.post-type-archive-faq .list h3:after {
content: '';
border-bottom: 3px solid rgba(0, 0, 0, 1);
display: block;
margin: 20px 0 0;
width: 100px;
}
body.archive.post-type-archive-faq .list .entry-content {
font-size: 12px;
padding: 0 0 20px;
}
}
@media screen and (min-width:768px) {
body.archive.post-type-archive-faq .list h3 {
font-size: 16px;
line-height: 1.875;
margin: 0 0 20px;
padding: 0;
}
body.archive.post-type-archive-faq .list .entry-content {
padding: 0 0 10px 25px;
}
} .pagination {
list-style-type: none;
padding-left: 0;
margin: 30px 0;
}
.pagination,
.pagination li a {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.pagination a { padding-top: 1px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
min-width: 36px;
min-height: 36px;
color: #333;
}
.pagination li:not([class*="current"]) a:hover {
background-color: #eee;
}
.pagination li:first-of-type a {
border-left-width: 1px;
}
.pagination li.first span,
.pagination li.last span,
.pagination li.previous span,
.pagination li.next span { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.first a::before,
.pagination li.last a::after,
.pagination li.previous a::before,
.pagination li.next a::after {
display: inline-block;
font-family: Fontawesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.pagination li.first a::before {
content: "<<";
}
.pagination li.last a::after {
content: ">>";
}
.pagination li.previous a::before {
content: "<";
}
.pagination li.next a::after {
content: ">";
}
.pagination li.current a {
background-color: #ddd;
cursor: default;
pointer-events: none;
}
.pagination > li:first-child > a {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination > li:last-child > a {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pagination > li > a,
.pagination > li > span {
color: rgba(0, 0, 0, 1);
}
.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
color: rgba(125, 125, 125, 1);
}
@media only screen and (max-width: 680px) {
.pagination li.first,
.pagination li.last { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a {
border-left-width: 1px;
}
}
@media only screen and (max-width: 500px) {
.pagination li { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.current,
.pagination li.first,
.pagination li.last,
.pagination li.previous,
.pagination li.next {
position: initial;
top: initial;
left: initial;
}
.pagination li.previous a {
border-left-width: 0;
}
}
@media only screen and (max-width: 400px) {
.pagination li.first,
.pagination li.last { position: absolute;
top: -9999px;
left: -9999px;
}
.pagination li.previous a {
border-left-width: 1px;
}
}
@media only screen and (max-width: 240px) { .pagination li {
width: 50%;
}
.pagination li.current {
order: 2;
width: 100%;
border-left-width: 1px;
}
}
@media screen and (max-width:768px) {
.homesevencontents .container {
padding-right: 0px;
padding-left: 0px;
margin-right: auto;
margin-left: auto;
}
.homesevencontents .row {
margin-right: 0px;
margin-left: 0px;
}
.homesevencontents .col-sm-12,
.homesevencontents .col-sm-8,
.homesevencontents .col-sm-4,
.homesevencontents .col-xs-4 {
position: relative;
min-height: 1px;
padding-right: 0px;
padding-left: 0px;
}
.homesevencontents .header .desc {
font-size: 10px;
text-align: left;
}
.homesevencontents .block {
width: 100%;
}
.homesevencontents .block1,
.homesevencontents .block3 {
margin: auto 0 35px auto;
width: 91%;
}
.homesevencontents .block2 {
margin: auto auto 35px 0;
width: 91%;
}
.homesevencontents .block.block4, .homesevencontents .block.block5, .homesevencontents .block.block6 {
margin: auto auto 40px 0;
}
.homesevencontents .block.block4, .homesevencontents .block.block5 {
border-right: 3px solid rgba(255,255,255,1);
}
.homesevencontents .block a {
display: block;
padding: 60px 0 0;
}
.homesevencontents .block .data {
background-color: rgba(255, 255, 255, 1);
height: auto;
padding: 20px;
width: 52%;
}
body.home.page .homesevencontents .header {
background: none;
margin: 0 auto 50px;
padding: 0; width: 82%;
}
body.home.page .homesevencontents .contents {
font-size: 9px;
line-height: 1.78;
}
.homesevencontents .block .data .num {
font-feature-settings: "frac";
font-size: 14px; letter-spacing: 6px;
margin: 0 0 10px;
text-align: left;
}
.homesevencontents .block .data h3 {
font-size: 14px;
line-height: 1.22;
margin: 2px 0 10px;
padding: 0;
}
.homesevencontents .block.block4 .data, .homesevencontents .block.block5 .data, .homesevencontents .block.block6 .data {
padding: 10px 12px;
}
.homesevencontents .block.block4 .data h3, .homesevencontents .block.block5 .data h3, .homesevencontents .block.block6 .data h3 {
font-size: 16px;
margin: 0 0 10px;
text-align: left;
}
.section-concept-body {
background-color: rgba(243,243,243,1);
margin: -110px auto auto 0;
max-width: 977px;
padding: 70px 30px 0 20px;
width: 88%;
}
.home .body, .home .body.thin, .home .section-products .body {
margin: auto;
max-width: 977px;
width: 81%;
}
.home .body {
margin: auto auto auto 0;
}
.section-concept-body .cols {
padding: 0;
}
.section-concept-body .cols .table {
margin-bottom: 0;
}
.section-concept-body .cell {
display: flex;
}
.section-concept-body .cell .sub-title {
font-size: 20px;
left: auto;
margin: 0 7vw 0 0;
}
.section-concept-body .cell .spacer {
display: none;
width: 10vw;
}
body.home .section-concept-body .cell .spacer {
display: block;
width: 28px;
}
.section-concept-body .cell p {
font-size: 10px;
line-height: 2.4;
}
.flink {
bottom: 0;
display: flex;
position: fixed;
width: 100%;
z-index: 1111111111;
}
.flink div {
width: 50%;
}
.flink div a {
background-color: rgba(50,50,50,1);
color: rgba(255,255,255,1);
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 16px 6px;
text-align: center;
}
.flink div:first-child a {
border-right: 1px solid rgba(255,255,255,1);
}
.flink div a span {
font-size: 10px;
margin-left: 10px;
}
.flink div a:hover {
background-color: rgba(255,255,255,1);
color: rgba(50,50,50,1);
text-decoration: none;
}
}
@media screen and (min-width:768px) {
.flink {
display: none;
}
}