/*
Theme Name: COCHAE WP THEME
Text Domain: cochae
Theme URI: https://cochae.com/
Author: MATHMATH CRAFTS
Author URI: https://relax13.com/
Description: Developin Cochae Theme Base
Version: 1.0.1
Tags: Responsive
*/

/*============================
	Reset
============================*/
:root { -ms-overflow-style: -ms-autohiding-scrollbar; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }

body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, thead, tr, th, td, figure, figcaption, blockquote, section { margin: 0; padding: 0; border: 0; box-sizing: border-box; font-size: inherit; line-height: inherit; font-weight: inherit; vertical-align: baseline; }

html { -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; }
body { position: relative; width: 100%; scroll-behavior: smooth; line-height: 1.5; overflow-x: hidden; background-color: #fff; }

article, header, footer, aside, figure, figcaption, nav, section { display: block; }

ul, ol { list-style: none; list-style-type: none; }

img { display: block; width: 100%; max-width: 100%; height: auto; border-style: none; line-height: 1; }
img[src$=".svg"] { width: 100%; }
svg:not(:root) { overflow: hidden; }

button, input:not([type="checkbox"]):not([type="radio"]), optgroup, select, textarea { box-sizing: border-box; font: inherit; }
button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { padding: 0.35em 0.75em 0.625em; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }
[hidden] { display: none; }

table { border-collapse: collapse; border-spacing: 0; }

article > * + * { margin-top: 2em; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/*============================
	Font
============================*/
@font-face { font-family: YuGothicM; src: local("Yu Gothic Medium"); }

html { font-size: 62.5%; }
body { font-size: 16px; font-size: 1.6rem; font-weight: 400; font-family: "Roboto", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; word-wrap: break-word; }
.sans { font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; }
.noto { font-family: "Noto Sans JP", sans-serif; }
.serif { font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif; }
.roboto { font-family: "Roboto", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; }
.garamond { font-family: "EB Garamond", "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif; }

/*============================
	Common
============================*/
:root {
	--content-width: 1280px;
	--base-padding: 20px;
	--base-margin: 20px;
	--header-height: 62px;
	--color-text: #1e1e18;
	--color-bg: #fff;
	--shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 9px 18px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.1);
	--serif: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;
}

.defs { display: none; }
.inner { position: relative; width: 100%; padding: 0; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.inner.full { max-width: var(--content-width); margin: 0 auto; }

.shadow-box { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.04), 0 9px 18px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.1); }
.shadow-text { text-shadow: 0 0 20px rgba(0,0,0,.5); }

.cursor, .stalker { position: absolute; top: 0; left: 0; cursor: none; pointer-events: none; border-radius: 100%; }
.cursor { width: 10px; height: 10px; background-color: var(--main-color, #1e1e18); z-index: 9000; }
.stalker { width: 30px; height: 30px; background-color: var(--accent-color, #ffe922); z-index: 8999; opacity: 0.8; filter: invert(100%); mix-blend-mode: difference; transition: transform .1s; transform: scale(1); }
.stalker.hover { transform: scale(2.5); }
.touch .stalker { display: none; }
.stalker.hide { display: none; }

.stalker-change { position: fixed; bottom: 30px; left: 30px; z-index: 9000; padding-left: 25px; }
.stalker-change:hover { cursor: pointer; }
.stalk, .nostalk { font-size: 1.6rem; }
.stalk { display: none; }
.nostalk { display: block; }
.stalker-change::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 100%; background-color: var(--accent-color, #ffe922); }

.stalker-change.active .stalk { display: block; }
.stalker-change.active .nostalk { display: none; }
.touch .stalker-change { display: none; }

br.pc-only { display: none; }
@media (min-width: 960px) {
	br.pc-only { display: block; }
}

.edit { position: absolute; top: 80px; left: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 40px; background-color: cadetblue; }
.edit .post-edit-link { font-weight: 700; text-decoration: none; color: #fff; }

/*============================
	Header
============================*/
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; padding: 15px 0; transition: all .3s ease; }
.header .inner { display: flex; justify-content: space-between; align-items: center; }
.header.active { background-color: rgba(255,255,255,.95); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.pointer .header:hover { background-color: rgba(255,255,255,.95); }

/*----------------
	Branding
----------------*/
.branding { position: relative; margin-left: 15px; padding: 10px; transition: padding .3s ease; }
.header.active .branding { padding: 0; }
.branding #branding-logo { display: block; width: 195px; height: 31.5px; fill: var(--main-color, #1e1e18); }
/*----------------
	Navigation
----------------*/
.nav { position: relative; margin-right: 20px; padding-right: 20px; display: none; justify-content: flex-end; align-items: center; transition: padding .3s ease; }
.header.active .nav { padding: 0; }
.nav-list { display: flex; justify-content: flex-end; align-items: center; }
.nav-item { position: relative; padding: 0 5px; }
.nav-item > a { position: relative; display: block; padding: 0 10px; font-size: 1.6rem; font-weight: 700; line-height: 42px; text-decoration: none; color: var(--main-color, #1e1e18); }
.nav-item > a span { position: relative; }
.nav-item > a::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--main-color, #1e1e18); transform: scale3d(0,1,1); transform-origin: 100% 0; transition: .3s transform ease; z-index: -1; }
.nav-item > a:hover::after { transform: scale3d(1,1,1); transform-origin: 0 0; transition: transform .5s ease; }
.nav-dropdown:hover > a::after { transform: scale3d(1,1,1); transform-origin: 0 0; transition: transform .5s ease; }

.dropmenu { visibility: hidden; opacity: 0; position: absolute; top: 42px; left: 5px; background-color: rgba(255,255,255,.95); padding: 30px; transform: translateY(20px); transition: all .3s ease; }
/*.dropmenu::before { content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 0; background-color: var(--color-text); transition: height .3s ease .1s; }*/
.nav-dropdown:hover { cursor: pointer; }
.nav-dropdown:hover .dropmenu { opacity: 1; visibility: visible; transform: translateY(0); }
/*.nav-dropdown:hover .dropmenu::before { height: 100%; }*/
.drop-list { position: relative; }
.drop-item { display: block; }
.drop-item:not(.catalog) > a { position: relative; display: inline-block; padding: 0 5px; font-size: 1.6rem; font-weight: 700; line-height: 42px; text-decoration: none; color: var(--color-text); }
.drop-item:not(.catalog) > a::after { content: ""; position: absolute; bottom: 4px; left: 0; width: 100%; height: 2px; background-color: var(--main-color, #1e1e18); transform: scale3d(0,1,1); transform-origin: 100% 0; transition: .3s transform ease; z-index: 0; }
.drop-item:not(.catalog) > a:hover::after { transform: scale3d(1,1,1); transform-origin: 0 0; transition: transform .5s ease; }
.drop-item.catalog { margin-top: 10px; margin-left: -5px; }
.drop-item.catalog > a { position: relative; display: inline-block; padding: 5px 40px 5px 10px; font-size: 1.6rem; font-weight: 700; line-height: 22px; text-decoration: none; color: #fff; background-color: var(--main-color, #1e1e18); transition: all .3s ease; }
.drop-item.catalog i { position: absolute; top: 48%; right: 10px; font-size: 1.4rem; transform: translateY(-50%); transition: .3s ease; }
.drop-item.catalog > a:hover i { font-size: 2rem; }

.sns-list { display: flex; justify-content: flex-end; align-items: center; margin-left: 20px; }
.sns-item { padding: 0 6px; }

.sns-item:last-child { padding-right: 0; }
.sns-item > a { position: relative; display: block; padding: 5px; font-size: 1.8rem; text-decoration: none; color: var(--main-color, #1e1e18); line-height: 1; }
.sns-henoheno > a { font-size: 2.8rem; }
.heno-link { visibility: hidden; position: absolute; top: 41px; left: 50%; background-color: rgba(255,255,255,.95); font-size: 1.4rem; transform: translateX(-50%) translateY(20px); display: flex; align-items: center; justify-content: center; flex-direction: column; transition: transform .3s ease; }
.heno-title, .heno-text { writing-mode: vertical-rl; display: block; padding: 20px; font-size: 1.6rem; font-weight: 700; }
.sns-henoheno > a:hover .heno-link { visibility: visible; transform: translateX(-50%) translateY(0); }

@media(min-width: 600px) {
	.header { padding: 15px 0; }
	.branding { padding: 15px; margin-left: 20px; }
	.branding #branding-logo { width: 260px; height: 42px; }
}
@media(min-width: 960px) {
	.header { padding: 20px 0; }
	.header.active { padding: 15px 0; }
	.branding { padding: 20px; margin-left: 20px; }
	.nav { display: flex; }
	.touch .nav { display: none; }
}

/*----------------
	Modal Trigger
----------------*/
.menu-toggle { position: fixed; top: 10px; right: 10px; display: flex; justify-content: center; align-items: center; width: 62px; height: 62px; border: none; background: transparent; transition: all .3s ease; z-index: 1200; margin-right: env(safe-area-inset-right); }
.is-menu-active .menu-toggle { top: 0; right: -10px; }
.menu-toggle.active { top: 0; right: 0; }

.menu-toggle:focus { outline: none; }/* Chrome */
.menu-toggle:hover { cursor: pointer; }
.menu-toggle-inner { position: relative; display: block; width: 28px; height: 24px; }
.menu-toggle-inner span { position: absolute; height: 2px; width: 28px; left: 0; background: var(--main-color, #1e1e18); transition: all .3s ease-in-out; }
.menu-toggle-inner span:nth-child(1) { top: 0; transform: rotate(0deg);  }
.menu-toggle-inner span:nth-child(2) { top: 11px; width: 24px; opacity: 1; }
.menu-toggle-inner span:nth-child(3) { bottom: 0; transform: rotate(0deg); }
.is-menu-active .menu-toggle-inner span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.is-menu-active .menu-toggle-inner span:nth-child(2) { top: 11px; opacity: 0; }
.is-menu-active .menu-toggle-inner span:nth-child(3) { bottom: 11px; transform: rotate(-45deg); }

@media (min-width: 400px) {
	.is-menu-active .menu-toggle { top: 0; right: 0; }
}
@media (min-width: 600px) {
	.menu-toggle { width: 72px; height: 72px; top: 20px; right: 10px; }
}
@media (min-width: 960px) {
	.menu-toggle { display: none; }
	.touch .menu-toggle { display: flex; }
}

/*----------------
	Modal Menu
----------------*/
.modal-menu { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; height: calc(var(--vh, 1vh) * 100); z-index: 1100; background-color: #fff; display: none; visibility: hidden; opacity: 0; transform: scale(.9); }
/* Viewport Height Fallback for browsers that do not support Custom Properties */
.is-menu-active .modal-menu { display: block; visibility: visible; animation: activeMenu .2s forwards ease-in-out; }

@keyframes activeMenu {
	0% { opacity: 0; transform: scale(.9); }
	100% { opacity: 1; transform: scale(1); }
}
.modal-header { padding: 15px 0; z-index: 10; }
.modal-nav { position: absolute; top: 30px; left: 20px; width: calc(100% - 40px); height: calc(100vh - 50px); height: calc(var(--vh, 1vh) * 100 - 50px); background-color: #efefef; display: flex; justify-content: center; align-items: center; }
/* Viewport Height Fallback for browsers that do not support Custom Properties */
.modal-list { width: calc(100% - 40px); margin-bottom: 20px; }
.modal-item { padding: 3px 10px; }
.modal-separator { margin-top: 5px; padding-top: 10px; border-top: 1px solid #ccc; }
.modal-has-sub { display: flex; }
.modal-item > a { display: block; padding: 3px; color: var(--main-color, #1e1e18); font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.modal-has-sub > a { width: 50%; }
.modal-sublist { display: block; width: 50%; padding: 0 5px; }
.modal-subitem { padding: 2px 10px; }
.modal-subitem > a { display: block; padding: 3px; color: var(--main-color, #1e1e18); font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.modal-sns-list { display: flex; justify-content: flex-end; align-items: center; }
.modal-sns-list .sns-item > a { font-size: 1.3rem; line-height: 1; }
.modal-sns-list .sns-henoheno > a { font-size: 1.8rem; }

.modal-copyright { position: absolute; bottom: 10px; left: 33px; width: 100%; font-size: 1rem; }

@media (min-width: 400px) {
	.modal-nav { top: 30px; left: 30px; width: calc(100% - 60px); height: calc(100vh - 60px); height: calc(var(--vh, 1vh) * 100 - 60px); background-color: #efefef; display: flex; justify-content: center; align-items: center; }
	/* Viewport Height Fallback for browsers that do not support Custom Properties */
	.modal-list { width: calc(100% - 60px); }
	.modal-item { padding: 3px 10px; }
	.modal-separator { margin-top: 5px; padding-top: 10px; }
	.modal-item > a { padding: 3px; font-size: 1.8rem; }
	.modal-subitem { padding: 3px 10px; }
	.modal-subitem > a { font-size: 1.6rem; }
	.modal-sublist { padding: 0 10px; }
	.modal-sns-list .sns-item > a { font-size: 1.6rem; }
	.modal-sns-list .sns-henoheno > a { font-size: 2.4rem; }
}
@media (min-width: 600px) {
	.modal-nav { top: 35px; left: 35px; width: calc(100% - 70px); height: calc(100vh - 70px); height: calc(var(--vh, 1vh) * 100 - 70px); background-color: #efefef; display: flex; justify-content: center; align-items: center; }
	/* Viewport Height Fallback for browsers that do not support Custom Properties */
	.modal-list { width: calc(100% - 70px); }
	.modal-item { padding: 5px 10px; }
	.modal-separator { margin-top: 15px; padding-top: 20px; }
	.modal-item > a { padding: 5px; font-size: 2.8rem; }
	.modal-subitem { padding: 5px 10px; }
	.modal-subitem > a { font-size: 2rem; }
	.modal-sublist { padding: 0 20px; }
	.modal-sns-list .sns-item > a { font-size: 2rem; }
	.modal-copyright { position: absolute; bottom: 15px; left: 50px; width: 100%; font-size: 1rem; }
	.modal-sns-list .sns-henoheno > a { font-size: 2.8rem; }
}
@media (max-width: 959px) and (orientation: landscape) {
	.modal-list { margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
	.modal-item { padding: 2px 10px; }
	.modal-separator { margin-top: 0; padding-top: 2px; border: none; } 
	.modal-has-sub > a { width: auto; }
	.modal-sublist { display: none; }
	.modal-sns { width: 100%; }
	.modal-sns-list { justify-content: center; }
} 
@media (min-width: 960px) and (orientation: landscape) {
	.modal-has-sub { display: block; }
	.modal-sublist { display: flex; justify-content: space-around; align-items: center; width: 100%; padding: 10px 80px; }
}

/*============================
	Featured
============================*/
.features-wrapper { position: relative; width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px); height: calc(100vh - 20px); height: calc(var(--fvh, 1vh) * 100 - 20px); margin: 10px auto 60px; background-color: #efefef; }
/* Viewport Height Fallback for browsers that do not support Custom Properties */
.features-wrapper::after { content: ""; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 100%; background-color: #1e1e18; animation: scaleout 1s 10 ease-in-out; }
@keyframes scaleout {
	0% { transform: scale(0); }
	100% { transform: scale(1); opacity: 0; }
}

.scroll { position: absolute; bottom: 0; left: 50%; z-index: 700; width: 100px; height: 100px; margin-left: -50px; transition: background-color .3s ease; }
.scroll > a { display: block; width: 100%; font-size: 4rem; text-align: center; text-decoration: none; color: #fff; line-height: 100px; animation: toScroll 2s infinite; }
.scroll:hover { background-color: rgba(0,0,0,.2); }

@keyframes toScroll {
	0% { transform: translateY(0); }
	50% { transform: translateY(10px); }
	100% { transform: translateY(0); }
}

.features { position: relative; width: 100%; height: 100%; transition: .8s ease .5s; }
.features.loading { opacity: 0; visibility: hidden; }

.features-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.features-pagination { position: absolute; bottom: 0; right: 0; padding: 0 30px; display: none; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; z-index: 100; transition: all .3s ease; }
.features-pagination:hover { background-color: rgba(0,0,0,.2); }

.features-pagination-item { position: relative; display: flex; align-items: center; padding: 30px 5px; }
.features-pagination-item:hover, .features-pagination-item:focus { cursor: pointer; }

.features-thumb { position: absolute; bottom: 40px; left: 50%; display: block; width: 90px; height: 60px; margin-left: -45px; transition: all .3s ease; visibility: hidden; opacity: 0; transform: translateY(20px); pointer-events: none; }
.features-thumb img { width: 100%; height: 100%; object-fit: cover; }
.features-pagination-item:hover .features-thumb { visibility: visible; opacity: 1; transform: translateY(0); }
.pagination-separator { display: block; position: relative; width: 30px; height: 5px; background-color: rgba(128,128,128,.2); transition: width .3s ease; }
.features-pagination:hover .pagination-separator { background-color: rgba(0,0,0,.4); }
.features-pagination-item.active .pagination-separator { width: 60px; }
.pagination-separator-loader { position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #fff; transform-origin: 0 0; transition: width .2s linear; }
.features-pagination-item.active .pagination-separator-loader { width: 100%; transition: width 6s linear; }

.features-button-navigation { position: absolute; top: 50%; left: 0; width: 100%; height: 100px; z-index: 90; margin-top: -50px; display: none; }
.features-prev, .features-next { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; height: 100px; width: 100px; transition: all .3s ease; color: #FFF; font-size: 4rem; }
.features-prev { left: 0; padding-right: 0.5rem; }
.features-next { right: 0; padding-left: 0.5rem; }
.features-prev:hover, .features-next:hover, .features-prev:focus, .features-next:focus { cursor: pointer; background-color: rgba(0,0,0,.2); }

@media (min-width: 600px) {
	.features-wrapper { width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px); height: calc(100vh - 40px); height: calc(var(--vh, 1vh) * 100 - 40px); margin: 20px auto 60px; }
	/* Viewport Height Fallback for browsers that do not support Custom Properties */
	.features-info { bottom: 20px; right: 20px; padding: 15px; }
	.features-title { font-size: 1.4rem; margin-bottom: 10px; }
	.features-list-item { font-size: 1.3rem; }
}
@media (min-width: 960px) {
	.features-info { padding: 20px; }
	.features-pagination { display: flex; }
	.features-button-navigation { display: block; }
}

/*============================
	Contents
============================*/
.section { position: relative; padding: 120px 10px 60px; }

.section-top { padding: 60px 10px; }

.section-title { position: relative; font-size: 2rem; font-weight: 700; text-align: center; display: flex; justify-content: center; align-items: center; margin-bottom: 60px; color: var(--main-color, #1e1e18); }

.section-top .section-title span { position: relative; display: inline-block; }
.section-top .section-title span::after { content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; background-color: var(--border-color, #1e1e18); }

@media (min-width: 600px) {
	.section { padding: 60px 20px; }
	.section-title { font-size: 3.2rem; }
}

.section-page, .section-post { padding: 120px 10px 60px; }

.section-page { font-size: 14px; font-size: 1.4rem; }
@media ( min-width: 600px ) {
	.section-page { font-size: 16px; font-size: 1.6rem; }
}


.button { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.button > a { display: flex; padding: 20px; width: 240px; justify-content: space-around; align-items: center; color: var(--main-color, #1e1e18); font-size: 1.8rem; font-weight: 700; line-height: 1; text-decoration: none; border: 1px solid var(--main-color, #1e1e18); }
.button > a i { font-size: 2rem; transition: transform .3s ease-in-out; }
.button > a:hover i { transform: translateX(10px); }

.main { padding-top: 30px; }
/*----------------
	Top Works / Top Products
----------------*/
.top-works, .top-products { position: relative; padding: 20px 0 30px; }

.works-list, .products-list { position: relative; display: flex; flex-wrap: wrap; margin-left: -5px; width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 10px); margin-bottom: 40px; }
.works-item, .products-item { display: block; width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 10px) / 2); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 10px) / 2); overflow: hidden; }
.works-item > a, .products-item > a { position: relative; display: block; margin: 5px; text-decoration: none; color: var(--main-color, #1e1e18); font-weight: 700; overflow: hidden; }

.works-item .thumb, .products-item .thumb { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.works-item > a:hover .thumb, .products-item > a:hover .thumb { transform: scale(1.08); transition: transform .8s ease; }
.thumb-text { display: none; }
/*
.thumb-text { display: none; visibility: hidden; position: absolute; bottom: 10px; padding: 5px 10px; background-color: rgba(255,255,255,.9); opacity: 0; transition: all .3s; }
.works-item .thumb-text { left: -20px; }
.products-item .thumb-text { right: -20px; }
.thumb-text .tag-list { display: none; }
.works-item > a:hover .thumb-text { visibility: visible; opacity: 1; left: 0; }
.products-item > a:hover .thumb-text { visibility: visible; opacity: 1; right: 0; }
*/
@media (min-width: 600px) {
	.works-list, .products-list { width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 30px); }
	.works-item, .products-item { display: block; width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 30px) / 4); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 30px) / 4); }
}

/*----------------
	Top About
----------------*/
.section-top-about { padding: 10px; }
.top-about-inner { padding: 60px 10px; }

.section-top-about .section-title { padding-top: 60px; margin-bottom: 60px; }
.about-ja { font-size: 1.6rem; font-weight: 700; line-height: 2; margin-bottom: 60px; }
.about-en { font-size: 1.4rem; font-weight: 700; line-height: 1.8; margin-bottom: 60px; }

@media (min-width: 600px) {
	.section-top-about { padding: 20px; }
	.top-about-inner { padding: 60px 20px; }
	.about-ja { font-size: 1.8rem; }
}
@media (min-width: 960px) {
	.about-ja { font-size: 2rem; }
	.about-en { font-size: 1.6rem; }
}
@media (min-width: 1400px) {
	.about-ja { font-size: 2.4rem;  }
}

/*----------------
	Top News
----------------*/
.top-news-list { display: block; margin-bottom: 60px; padding: 10px; }
.top-news-item { padding: 10px 0; border-bottom: 1px solid var(--border-color, #1e1e18); }
.top-news-item > a { position: relative; display: flex; flex-wrap: wrap; flex-direction: column; padding: 10px; color: var(--main-color, #1e1e18); font-weight: 700; text-decoration: none; }
.top-news-date { display: block; padding-bottom: 5px; margin-right: 20px; color: var(--main-color, #1e1e18); font-size: 1.3rem; }
.top-news-title { display: block; font-size: 1.4rem; }
.top-news-item > a i { position: absolute; top: 50%; right: 20px; font-size: 2rem; transition: transform .3s ease-in-out; }
.top-news-item > a:hover i { transform: translateX(10px); }

@media (min-width: 600px) {
	.top-news-list { max-width: 80%; margin-left: auto; margin-right: auto; }
	.top-news-item > a { flex-direction: row; align-items: center; }
	.top-news-date { padding-bottom: 0; }
	.top-news-title { font-size: 1.6rem; }
}
@media (min-width: 960px) {
	.top-news-list { max-width: 60%; }
}

/*============================
	WORKS / PRODUCTS
============================*/
.grid { position: relative; width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px); margin-left: auto; margin-right: auto; }
.grid-item { position: absolute; display: block; width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px) / 2); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px) / 2); }
.item-content { display: block; padding: 5px; width: 100%; height: 100%; }
.item-content > a { display: block; overflow: hidden; width: 100%; height: 100%; }
.item-content > a img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease; }
.item-content > a:hover img { transform: scale(1.08); transition: transform .8s ease; }

.products .grid-item { width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 20px) / 2); }

.sort-list { visibility: visible; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; padding: 10px 0; }
.sort-item { display: block; border: 1px solid #fff; transition: border .3s ease; }
.sort-link { display: block; padding: 10px 15px; font-size: 1.2rem; font-weight: 700; text-decoration: none; color: var(--main-color, #1e1e18); }
.sort-item.sort-active { border: 1px solid var(--main-color, #1e1e18); background-color: #fff; }

.sort-list.hide { visibility: hidden; }
.sort-sub { visibility: hidden; position: fixed; top: 61px; left: 0; width: 100%; background-color: rgba(238,238,238,.95); flex-wrap: wrap; padding: 10px 0; }
.sort-sub.sticky { visibility: visible; }
.sort-sub .sort-item { border: 1px solid transparent; }
/*
.sort-sub::after { position: relative; font-size: 1.4rem; font-weight: 700; line-height: 1; color: #1e1e18; display: block; width: 100%; background-color: rgba(212,212,212,.95); margin-top: 10px; }
.products .sort-sub::after { content: "PRODUCTS"; }
.works .sort-sub::after { content: "WORKS"; }
*/

.prevnext { display: flex; align-items: center; justify-content: space-between; margin-top: 80px; }
.prevnext .prev, .prevnext .next { width: 49%; }
.prevnext .prev { border-right: 1px solid #eee; }
.prev-link, .next-link { display: flex; align-items: center; text-decoration: none; color: var(--main-color, #1e1e18); }
.next-link { justify-content: flex-end; text-align: right; }
.prev-link img, .next-link img { max-width: 40px; }
.prevnext-title { padding: 10px; font-size: 1.3rem; font-weight: 700; }
.prevnext-title span { display: block; padding-bottom: 10px; color: #ccc; font-size: 1.2rem; }

@media (min-width: 600px) {
	.grid { width: calc(100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px); }
	.sort-link { font-size: 1.6rem; padding: 10px 20px; }
	.sort-sub { top: 72px; } 
	.grid-item { width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 2); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 2); }
	.products .grid-item { width: calc(100vw - 20px); height: calc((100vw - 20px) / 2); }
	.prev-link img, .next-link img { max-width: 120px; }
}
@media (min-width: 960px) {
	.sort-link { padding: 10px 20px; }
	.grid-item { width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 4); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 4); }
	.products .grid-item { width: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 2); height: calc((100vw - (env(safe-area-inset-left) + env(safe-area-inset-right)) - 40px) / 4); }
}

/*============================
	Indivisual
============================*/
.section-individual { padding: 120px 10px 60px; }
.section-individual .section-title { position: relative; font-size: 1.8rem; font-weight: 700; text-align: center; display: block; margin-bottom: 30px; }
.section-individual .section-title::before, .section-individual .section-title::after { display: none; }
.info-toggle { position: fixed; bottom: 0; right: 20px; width: 40px; height: 40px; margin-bottom: calc(44px + env(safe-area-inset-bottom)); margin-right: env(safe-area-inset-right); border-radius: 100%; border: 1px solid #1e1e18; z-index: 900; transition: background-color .3s ease; }
.info-toggle:hover { cursor: pointer; }
.info-toggle.info-active { background-color: var(--main-color, #1e1e18); }
.info-open { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 2.4rem; text-decoration: none; color: var(--main-color, #1e1e18); line-height: 1; transition: color .3s ease; }
.info-toggle.info-active .info-open { color: #fff; }
.post-info { visibility: hidden; position: fixed; bottom: 0; right: 0; padding-top: 20px; padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(80px + env(safe-area-inset-right));  padding-bottom: calc(20px + env(safe-area-inset-bottom)); width: 100%; background-color: rgba(255,255,255,.95); z-index: 800; opacity: 0; transform: translateY(100px); transition: all .3s ease; }
.post-info.info-active { visibility: visible; transform: translateY(0); opacity: 1; }

.info-notice { display: none; font-size: 1.4rem; font-weight: 700; position: absolute; top: 50%; right: 0; padding-right: 50px; min-width: 180px; text-align: right; line-height: 1; margin-top: -0.7rem; }
.info-notice span { padding-right: 5px; }
.info-notice { animation: infoAnim 5s forwards 1s; }

@keyframes infoAnim {
	0% { transform: translateX(0); opacity: 1; }
	15% { transform: translateX(-10px); }
	30% { transform: translateX(0); }
	45% { transform: translateX(-10px); }
	60% { transform: translateX(0); }
	75% { transform: translateX(-10px); }
	90% { transform: translateX(0); opacity: 1; }
	100% { opacity: 0; }
}

.post-info-title { display: block; font-size: 1.4rem; font-weight: 700; padding-bottom: 20px; }
.post-client { display: block; font-size: 1.3rem; padding-bottom: 5px; }
.post-year { display: block; font-size: 1.3rem; padding-bottom: 15px; }
.post-info-content p { display: block; font-size: 1.3rem; line-height: 1.8; padding-bottom: 10px; }
.post-unit { display: block; font-size: 1.3rem; }

.image { display: block; width: 100%; margin-bottom: 20px; }

.section-individual .button { margin-top: 60px; }

.post-info a { color: var(--main-color, #1e1e18); text-decoration: underline; }

@media (min-width: 600px) {
	.section-individual { padding: 120px 20px 60px; }
	.section-individual .section-title { font-size: 2rem; }
	.info-toggle { right: 40px; }
	.post-info { padding-right: calc(100px + env(safe-area-inset-right)); }
	.post-info-title { font-size: 1.6rem; }
	.post-client, .post-year, .post-content p, .post-unit { font-size: 1.4rem; }
}
@media (min-width: 960px) {
	.section-individual .section-title { font-size: 2rem; }
	.info-toggle { top: 145px; right: 60px; margin-bottom: 0;  }
	.post-info { top: 120px; right: 40px; bottom: auto; max-width: 320px; padding: 80px 20px 20px; margin-right: env(safe-area-inset-right); }
	.info-notice { display: flex; align-items: center; justify-content: flex-end; }
}

/*============================
	NEWS
============================*/
.section-post .section-title { margin-bottom: 30px; }
.post-date { font-size: 1.4rem; font-weight: 700; text-align: center; color: var(--main-color, #1e1e18); margin-bottom: 60px; }
.post-content { margin-bottom: 60px; padding: 30px 20px; margin-left: auto; margin-right: auto; }
@media ( min-width: 600px ) {
	.post-content { max-width: 80%; }
}
@media ( min-width: 960px ) {
	.post-content { max-width: 60%; }
}

/*============================
	ABOUT
============================*/

/*============================
	Conntact
============================*/
.contact-field { margin: 30px auto 60px; max-width: 1260px; padding: 20px; font-family: "Roboto", "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif; }
.contact-field p { padding: 0 10px 20px; font-size: 1.3rem; }
.contact-field { display: flex; flex-wrap: wrap; justify-content: space-between; }
.contact-field dl { position: relative; z-index: 1; padding: 20px 10px; width: 50%; }
.contact-field dl:last-of-type { width: 100%; }
.contact-field dt { width: 100%; margin-bottom: 10px; font-size: 18px; font-size: 1.6rem; font-weight: 700; }
.contact-field dd { width: 100%; }
.contact-field dt span { font-size: 13px; font-size: 1.3rem; }
.contact-field span.required { position: relative; top: -3px; left: 10px; padding: 4px 6px 2px; border-radius: 3px; background-color: #1e1e18; color: #FFF; font-weight: bold; }
.contact-field span.norequired { position: relative; top: -3px; left: 10px; padding: 3px 6px; border-radius: 10px; color: #666; font-weight: bold; }
.contact-field .error { padding: 5px 0; font-size: 14px; font-size: 1.4rem; font-weight: bold; }
input:not([type="checkbox"]):not([type="radio"]), textarea { padding: 12px; width: 100%; border: none; border-radius: 0; background: #f0f0f0; color: #000; font-size: 1.6rem; font-weight: 400; line-height: 1.5; -webkit-transition: all .5s; transition: all .5s; -webkit-appearance: none; /* for box shadows to show on iOS */ }
textarea { min-height: 200px; max-height: 400px; resize: vertical; }
input[typs="hidden"] { padding: 12px; width: 100%; color: #000; background: #FFF; }
input[type="text"],
input[type="email"],
input[type="hidden"],
textarea { outline: none; border: 1px solid #aaa; }
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus { border: 1px solid rgba(255,0,102,1); background: #FFF; }
.sendbutton { margin: 30px auto; text-align: center; display: flex; justify-content: center; }
.sendbutton button { position: relative; padding: 8px 24px; font-size: 1.6rem; font-weight: bold; color: var(--main-color, #1e1e18); cursor: pointer; transition: all .5s; background: none; border: 1px solid var(--main-color, #1e1e18); }
.sendbutton button:hover { color: #fff; border: 1px solid var(--main-color, #1e1e18); }
.sendbutton button::before { content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 100%; background-color: transparent; transition: all .4s ease; z-index: -1; }
.sendbutton button:hover::before { background-color: var(--main-color, #1e1e18); }

.contact-privacy { margin: 20px 10px; padding: 20px; border: 1px solid var(--border-color, #1e1e18); }
.contact-privacy-check { padding: 10px; text-align: center; }

@media only screen and (max-width: 960px){
	.contact-field dl { width: 100%; }
}

/*============================
	Footer
============================*/
.footer { position: relative; }
.footer-content { padding: 20px; margin-top: 40px; }
.copyright { font-size: 1.1rem; text-align: center; }

/*============================
	Fonts
============================*/
@font-face { font-family: 'cochaeicons'; src: url('lib/fonts/cochaeicons.ttf?16wu7t') format('truetype'), url('lib/fonts/cochaeicons.woff?16wu7t') format('woff'), url('lib/fonts/cochaeicons.svg?16wu7t#cochaeicons') format('svg'); font-weight: normal; font-style: normal; font-display: block; }

.co {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'cochaeicons' !important; speak-as: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

.co-command:before { content: "\e900"; }
.co-shift:before { content: "\e901"; }
.co-ctrl:before { content: "\e902"; }
.co-opt:before { content: "\e903"; }
.co-arrow-up:before { content: "\e904"; }
.co-arrow-down:before { content: "\e905"; }
.co-arrow-left:before { content: "\e906"; }
.co-arrow-right:before { content: "\e907"; }
.co-arrow-circle-up:before { content: "\e908"; }
.co-arrow-circle-down:before { content: "\e909"; }
.co-arrow-circle-left:before { content: "\e90a"; }
.co-arrow-circle-right:before { content: "\e90b"; }
.co-chevron-up:before { content: "\e90c"; }
.co-chevron-down:before { content: "\e90d"; }
.co-chevron-left:before { content: "\e90e"; }
.co-chevron-right:before { content: "\e90f"; }
.co-chevron-circle-up:before { content: "\e910"; }
.co-chevron-circle-down:before { content: "\e911"; }
.co-chevron-circle-left:before { content: "\e912"; }
.co-chevron-circle-right:before { content: "\e913"; }
.co-angle-up:before { content: "\e914"; }
.co-angle-down:before { content: "\e915"; }
.co-angle-left:before { content: "\e916"; }
.co-angle-right:before { content: "\e917"; }
.co-caret-up:before { content: "\e918"; }
.co-caret-down:before { content: "\e919"; }
.co-caret-left:before { content: "\e91a"; }
.co-caret-right:before { content: "\e91b"; }
.co-plus:before { content: "\e91c"; }
.co-minus:before { content: "\e91d"; }
.co-check:before { content: "\e91e"; }
.co-close:before { content: "\e91f"; }
.co-remove:before { content: "\e91f"; }
.co-circle:before { content: "\e920"; }
.co-circle-o:before { content: "\e921"; }
.co-circle-fill:before { content: "\e922"; }
.co-square:before { content: "\e923"; }
.co-check-square:before { content: "\e924"; }
.co-square-o:before { content: "\e925"; }
.co-check-square-o:before { content: "\e926"; }
.co-external-link:before { content: "\e927"; }
.co-plus-circle:before { content: "\e928"; }
.co-minus-circle:before { content: "\e929"; }
.co-check-circle:before { content: "\e92a"; }
.co-close-circle:before { content: "\e92b"; }
.co-question-circle:before { content: "\e92c"; }
.co-exclamation-circle:before { content: "\e92d"; }
.co-info-circle:before { content: "\e92e"; }
.co-info:before { content: "\e92f"; }
.co-search:before { content: "\e930"; }
.co-search-plus:before { content: "\e931"; }
.co-search-minus:before { content: "\e932"; }
.co-asterisk:before { content: "\e933"; }
.co-certificate:before { content: "\e934"; }
.co-award:before { content: "\e935"; }
.co-diamond:before { content: "\e936"; }
.co-gear:before { content: "\e937"; }
.co-quotes-left:before { content: "\e938"; }
.co-quotes-right:before { content: "\e939"; }
.co-feed:before { content: "\e93a"; }
.co-rss:before { content: "\e93b"; }
.co-heart:before { content: "\e93c"; }
.co-heart-o:before { content: "\e93d"; }
.co-star:before { content: "\e93e"; }
.co-star-half:before { content: "\e93f"; }
.co-star-o:before { content: "\e940"; }
.co-bookmark:before { content: "\e941"; }
.co-bookmark-o:before { content: "\e942"; }
.co-tag:before { content: "\e943"; }
.co-tags:before { content: "\e944"; }
.co-th-large:before { content: "\e945"; }
.co-th:before { content: "\e946"; }
.co-th-list:before { content: "\e947"; }
.co-list:before { content: "\e948"; }
.co-bars:before { content: "\e949"; }
.co-bell:before { content: "\e94a"; }
.co-bell-o:before { content: "\e94b"; }
.co-home:before { content: "\e94c"; }
.co-building:before { content: "\e94d"; }
.co-clock:before { content: "\e94e"; }
.co-calendar-o:before { content: "\e94f"; }
.co-calendar:before { content: "\e950"; }
.co-date:before { content: "\e951"; }
.co-list-alt:before { content: "\e952"; }
.co-table:before { content: "\e953"; }
.co-book:before { content: "\e954"; }
.co-books:before { content: "\e955"; }
.co-paperclip:before { content: "\e956"; }
.co-camera:before { content: "\e957"; }
.co-image:before { content: "\e958"; }
.co-file:before { content: "\e959"; }
.co-file-pdf:before { content: "\e9b0"; }
.co-file-text:before { content: "\e95a"; }
.co-file-o:before { content: "\e95b"; }
.co-file-text-o:before { content: "\e95c"; }
.co-file-download:before { content: "\e95d"; }
.co-clone:before { content: "\e95e"; }
.co-window:before { content: "\e95f"; }
.co-code:before { content: "\e960"; }
.co-toggle-off:before { content: "\e961"; }
.co-toggle-on:before { content: "\e962"; }
.co-comment:before { content: "\e963"; }
.co-comment-o:before { content: "\e964"; }
.co-commenting:before { content: "\e965"; }
.co-commenting-o:before { content: "\e966"; }
.co-comments:before { content: "\e967"; }
.co-comments-o:before { content: "\e968"; }
.co-comment-alt:before { content: "\e969"; }
.co-comment-alt-o:before { content: "\e96a"; }
.co-envelope:before { content: "\e96b"; }
.co-envelope-o:before { content: "\e96c"; }
.co-link:before { content: "\e96d"; }
.co-globe:before { content: "\e96e"; }
.co-edit:before { content: "\e96f"; }
.co-pencil:before { content: "\e970"; }
.co-edit-square:before { content: "\e971"; }
.co-sissors:before { content: "\e972"; }
.co-map:before { content: "\e973"; }
.co-map-o:before { content: "\e974"; }
.co-map-marked:before { content: "\e975"; }
.co-marker:before { content: "\e976"; }
.co-post:before { content: "\e977"; }
.co-user:before { content: "\e978"; }
.co-user-alt:before { content: "\e979"; }
.co-profile:before { content: "\e97a"; }
.co-v-card:before { content: "\e97b"; }
.co-tel:before { content: "\e97c"; }
.co-shopping-cart:before { content: "\e97d"; }
.co-shopping-bag:before { content: "\e97e"; }
.co-truck:before { content: "\e97f"; }
.co-facebook-official:before { content: "\e980"; }
.co-facebook:before { content: "\e981"; }
.co-twitter:before { content: "\e982"; }
.co-instagram:before { content: "\e983"; }
.co-tumblr:before { content: "\e984"; }
.co-google-plus:before { content: "\e985"; }
.co-line:before { content: "\e986"; }
.co-hatebu:before { content: "\e987"; }
.co-pinterest:before { content: "\e988"; }
.co-github:before { content: "\e989"; }
.co-pocket:before { content: "\e98a"; }
.co-youtube:before { content: "\e98b"; }
.co-vimeo:before { content: "\e98c"; }
.co-wordpress:before { content: "\e98d"; }
.co-slack:before { content: "\e98e"; }
.co-skype:before { content: "\e98f"; }
.co-google-drive:before { content: "\e990"; }
.co-amazon:before { content: "\e991"; }
.co-apple:before { content: "\e992"; }
.co-app-store:before { content: "\e993"; }
.co-google:before { content: "\e994"; }
.co-android:before { content: "\e995"; }
.co-safari:before { content: "\e996"; }
.co-chrome:before { content: "\e997"; }
.co-firefox:before { content: "\e998"; }
.co-opera:before { content: "\e999"; }
.co-edge:before { content: "\e99a"; }
.co-ie:before { content: "\e99b"; }
.co-desktop:before { content: "\e99c"; }
.co-laptop:before { content: "\e99d"; }
.co-tablet:before { content: "\e99e"; }
.co-mobile:before { content: "\e99f"; }
.co-wifi:before { content: "\e9a0"; }
.co-yen:before { content: "\e9a1"; }
.co-credit-card:before { content: "\e9a2"; }
.co-cc-visa:before { content: "\e9a3"; }
.co-cc-mastercard:before { content: "\e9a4"; }
.co-cc-discover:before { content: "\e9a5"; }
.co-cc-amex:before { content: "\e9a6"; }
.co-cc-paypal:before { content: "\e9a7"; }
.co-cc-jcb:before { content: "\e9a8"; }
.co-cc-diners-club:before { content: "\e9a9"; }
.co-cc-stripe:before { content: "\e9aa"; }
.co-cc-apple-pay:before { content: "\e9ab"; }
.co-cc-amazon-pay:before { content: "\e9ac"; }
.co-paypal:before { content: "\e9ad"; }
.co-apple-pay:before { content: "\e9ae"; }
.co-amazon-pay:before { content: "\e9af"; }
.co-henoheno:before { content: "\e9b1"; }


/*============================
	Gutenberg
============================*/
.admin-bar #wpadminbar { background-color: rgba(16,16,16,.5);}
/* Gutenberg */
/* Image Block */

.wp-block-image { margin-bottom: 20px; }

.section p { line-height: 1.8; margin-bottom: 2em; }
.section p a { color: var(--main-color, #1e1e18); }


.has-accent-color { color: var(--accent-color, #ffe922); }
.has-accent-background-color { background-color: var(--accent-color, #ffe922); color: #1e1e18; }

.has-main-color { color: var(--main-color, #1e1e18); }
.has-main-background-color { background-color: #000; color: #fff; }

.has-indigo-color { color: #043c78; }
.has-indigo-background-color { background-color: #043c78; color: #fff; }

.has-turquoise-color { color: #2ab7ca; }
.has-turquoise-background-color { background-color: #2ab7ca; color: #fff; }

.has-tomato-color { color: #ff2002; }
.has-tomato-background-color { background-color: #ff2002; color: #fff; }

.has-poppy-color { color: #ff7772; }
.has-poppy-background-color { background-color: #ff7772; color: #fff; }

.has-cherryblossom-color { color: #f6abb6; }
.has-cherryblossom-background-color { background-color: #f6abb6; color: #1e1e18; }

.has-meadow-color { color: #598234; }
.has-meadow-background-color { background-color: #598234; color: #fff; }

.has-moss-color { color: #aebd38; }
.has-moss-background-color { background-color: #aebd38; color: #1e1e18; }

.has-mustard-color { color: #ffd954; }
.has-mustard-background-color { background-color: #ffd954; color: #1e1e18; }

.has-honey-color { color: #f2ab39; }
.has-honey-background-color { background-color: #f2ab39; color: #1e1e18; }

.has-fuchsia-color { color: #a1268e; }
.has-fuchsia-background-color { background-color: #a1268e; color: #fff; }

/* GENERAL COLORS */
.has-black-color { color: #1e1e18; }
.has-black-background-color { background-color: #1e1e18; color: #fff; }

.has-gray-color { color: #767575; }
.has-gray-background-color { background-color: #767575; color: #fff; }

.has-white-color { color: #fff; }
.has-white-background-color { background-color: #fff; color: #1e1e18; }

.has-text-align-center { text-align: center; }


/* Paragraph */
p.has-small-font-size { font-size: 0.875em; }
p.has-normal-font-size,
p.has-regular-font-size { font-size: 1em; }
p.has-medium-font-size { font-size: 1.125em; }
p.has-large-font-size { font-size: 1.3125em; }
p.has-larger-font-size { font-size: 1.5em; }

.is-style-centered { width: 80%; margin-left: auto; margin-right: auto; }
@media (min-width: 960px) {
	.is-style-centered { width: 50%; }
}
@media (min-width: 1400px) {
	.is-style-centered { width: 40%; }
}