@charset "UTF-8";

/*!
Theme Name: Create Atelier J.
Author: J.
Author URI: https://ekaki-j.com
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
* {
-webkit-tap-highlight-color: transparent; /* 強調をなくす */
}
.clearfix:after {
content:" ";
display:block;
clear:both;
}
body.body {
background-color: #52c2f0;
}
#container {
background-color: #fff;
}
/*** Youtube ***/
.video-container {
margin: 0px auto;
}
.home .video-container {
margin-bottom: 10px;
}
/*** 共通 ***/
/*** ページリンクボタン ***/
div.request-wrap {
display: flex;
flex-direction: column;
align-items: center;
font-size: 200%;
margin-bottom: 20px;
}
.request-wrap a .anchor-icon {
display: none;
}
a.page-link-btn {
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
border-radius: 0.5rem;
font-size: 1.5rem;
padding: 1.5rem 3rem 1.5rem 2rem;
}
a.page-link-btn.youtube {
color: #fff;
background-color: #fb000f;
}
a.page-link-btn.youtube:hover {
background: #fc404b;
}
a.page-link-btn i.fa,
a.page-link-btn i.fas {
margin-right: 1rem;
}
a.page-link-btn:before {
font-family: 'Font Awesome 5 Free';
font-size: 1.6rem;
line-height: 1;
position: absolute;
top: calc(50% - .8rem);
right: 1rem;
margin: 0;
padding: 0;
content: '\f054';
}
/*** ヘッダー ***/
/* ヘッダーアニメーション */
.header-container {
position: relative;
}
.header-container canvas {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
body:not(.home) .header-container canvas {
/*display: none;*/
}
.header-container canvas.not-home-canvas {
/*position: absolute;
top: 0;
width: 100%;
height: 100px;*/
transform: scale(-1,-1);
margin-bottom: -100px;
}
.header-container .tagline {
/*z-index: 1;*/
}

.header-in {
/*position: relative;*/
}
.header-in .logo {
text-align: left;
margin-left: 20px;
margin-right: 20px;
}
.header-site-logo-image,
.mobile-menu-buttons .site-logo-image {
opacity: 0;
animation: logoRising 1.5s ease 0.5s alternate forwards;

}
/*** ナビゲーション ***/
.navi {
top: 0;
z-index: 2;
width: 100%;
box-shadow: 0 4px 4px rgba(0,0,0,0.4);
}
.navi.fixed {
position: fixed;
}
/* フラットボタンアニメ */
.navi-in .menu-header li a {
overflow: hidden;
}
.navi-in .menu-header li a:before,
.navi-in .menu-header li a:after,
.navi-in .menu-header li ul.sub-menu li a:before,
.navi-in .menu-header li ul.sub-menu li a:after {
position: absolute;
top: 0;
left: 0;
content: "";
-webkit-transition: all .3s linear;
transition: all .3s linear;
background: transparent;
border: 4px solid rgba(255,255,255,0.8);
display: block;
width: 100%;
height: 40px;
box-sizing: border-box;
}
.navi-in .menu-header li a:before,
.navi-in .menu-header li ul.sub-menu li a:before {
transform: translate(50%, -40px);
}
.navi-in .menu-header li a:after,
.navi-in .menu-header li ul.sub-menu li a:after {
transform: translate(-50%, 40px);
}
.navi-in .menu-header li:hover a:before,
.navi-in .menu-header li:hover a:after,
.navi-in .menu-header li ul.sub-menu li:hover a:before,
.navi-in .menu-header li ul.sub-menu li:hover a:after {
transform: translate(0%, 0%);
border: 2px solid rgba(255,255,255,0.0);
}
.navi .menu-header > .menu-item.current-menu-item > a,
.navi .menu-header > .menu-item.current-menu-ancestor > a,
.navi .menu-header > .menu-item > .current-menu-item > a,
.navi-in .menu-header li ul.sub-menu li.current-menu-item > a,
.navi-in .menu-header li ul.sub-menu li.current-menu-ancestor > a {
background-color: rgba(255,255,255,0.2);
}
/*** ボックスメニュー ***/
#content-top-in {
/*z-index: 1;*/
}
.widget_box_menu {
/*z-index: 2;*/
}
/*** 本文 ***/
h1.entry-title {
text-align: center;
font-weight: normal;
color: #002d5e;
/*position: relative;*/
}
.entry-content h2 {
font-weight: normal;
color: #002d5e;
background: none;
padding-left: 0;
padding-bottom: 0;
border-bottom: 1px solid #002d5e;
}
.entry-content h3 {
font-weight: normal;
color: #002d5e;
display: flex;
align-items: center;
justify-content: left;
border: none;
padding: 0;
}
.entry-content h4 {
font-weight: normal;
color: #002d5e;
display: flex;
align-items: center;
justify-content: left;
border-top: 1px solid #002d5e;
border-bottom: 1px solid #002d5e;
}
/* コンテンツアニメーション */
.content {
position: relative;
}
.content canvas {
/*position: absolute;
top: 0;
width: 100%;
height: 100px;
transform: scale(-1,-1);*/
/*margin-top: -24px;*/
}
body:not(.home) .content canvas.home-canvas {
/*display: none;*/
}
body.home .content canvas.not-home-canvas {
/*display: none;*/
}
.main {
background-color: transparent;
}
body.category #main,
body.error404 #main,
body.search #main/*,
body.blog #main*/ {
/*width: 100%;
margin-right: 0;*/
}
/*** アピールエリア ***/
.appeal {
background-size: cover;
/*background-size: contain;*/
background-position: center;
}
/*** ページリンクボタン 20210424 ***/
div.request-wrap {
display: flex;
flex-direction: column;
align-items: center;
font-size: 200%;
margin-bottom: 20px;
}
a.page-link-btn {
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
border-radius: 0.5rem;
font-size: 1.5rem;
padding: 1.5rem 3rem 1.5rem 2rem;
}
a.page-link-btn.fee {
color: #fff;
background-color: #1e73be;
}
a.page-link-btn.contact {
color: #fff;
background-color: #ff8000;
}
a.page-link-btn.fee:hover {
background: #29a2d4;
}
a.page-link-btn.contact:hover {
background: #ffcc00;
}
a.page-link-btn i.fa {
margin-right: 1rem;
}
a.page-link-btn:before {
font-family: 'Font Awesome 5 Free';
font-size: 1.6rem;
line-height: 1;
position: absolute;
top: calc(50% - .8rem);
right: 1rem;
margin: 0;
padding: 0;
content: '\f054';
}
/*** 検索窓 ***/
.search-box {
}
.search-box .search-edit {
border-radius: 40px;
}
.search-box .search-edit:focus {
outline: none;
border-color: #ffd500; /* フォーカス時の枠色 */
}
/*** リスト ***/
.dl-single-line > dt {
font-weight: bold;
float: left;
clear: left;
margin-right: 0.5em;
}
dl dt {
font-weight: bold;
}
dl.komelist dt {
clear: left;
float: left;
margin-right: 0.5em;
}
/*** サイドバー ***/
.sidebar-menu-content,
.navi-menu-content {
background-color: rgba(255,255,255,0.9);
}
#slide-in-sidebar {
background-color: transparent;
}
body.category #sidebar,
body.error404 #sidebar,
body.search #sidebar/*,
body.blog #sidebar*/ {
/*display: none;*/
}
.widget-sidebar .widget-title {
color: #005bbb;
background-color: transparent;
font-weight: normal;
display: flex;
align-items: center;
}
.widget-sidebar .widget-title:before,
.widget-sidebar .widget-title:after {
content: "";
height: 1px;
flex-grow: 1;
background-color: #005bbb;
}
.widget-sidebar .widget-title:before {
margin-right: .5em;
}
.widget-sidebar .widget-title:after {
margin-left: .5em;
}
/*** フッター ***/
.footer-bottom-logo .logo-image {
max-width: 200px;
}
.footer-bottom-logo img {
height: auto;
}
/*** flex box ***/
body .flex-container {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
justify-content: center;
overflow: hidden;
}
.flex-container .flex-item {
height: auto;
box-sizing: border-box;
position: relative;
text-align: center;
display: block;
}
.flex-container .flex-item a {
display: block;
text-decoration: none;
}
.flex-container .flex-item span {
display: block;
}
.flex-container .inner {
display: block;
position: relative;
margin: 0 auto 0;
box-sizing: border-box;
padding: 25px 8.33333%;
width: 100%;
background-color: white;
text-decoration: none;
color: #444;
}
/*** grid layout ***/
.grid-container {
display: grid;
gap: 0.25rem;
grid-template-columns: repeat(auto-fit, 1fr);
/*place-items: center;*/
}
.grid-container .grid-item {
display: flex;
align-items: center;
}
ul.grid-container {
margin-left: 0;
padding-left: 0;
}
/*** 制作例 ***/
.flex-container.create-site .flex-item a {
position: relative;
overflow: hidden;
}
.flex-container.create-site .flex-item a:before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: '\f00e';
font-size: 3em;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
transition: all 0.3s ease-in;
transform: scale(0);
opacity: 0;
}
.flex-container.create-site .flex-item:hover a:before {
opacity: 0.5;
transform: scale(1.4);
}
/*###### ホーム ######*/
body.home {
/*background-image: url(img/home-bg.jpg);*/
}
.home .content-in {
/*margin-top: 400px;*/
/*width: 100%;*/
}
.home.page .main {
/*width: 100%;
padding: 0;
margin: 0;
border: none;
background-color: #c00;*/
/*margin-top: -50px;
padding-top: 71px;*//*20210721仮無効*/
position: relative;
}

.home .bg-img-wrap {
margin: 0;
position: absolute;
top: 0;
width: 100%;
min-height: 512px;
overflow: hidden;
z-index: -1;
/*background-color: #ccc;*/
}
.home .bg-img {
position: absolute;
display: block;
top: 0;
width: 50%;
max-width: 512px;
height: auto;
}
.home .bg-img.left {
left:0;
transform: translateX(-100%);
animation: bgImgLeft 0.5s linear 1.0s alternate forwards;
}
.home .bg-img.right {
right: 0;
transform: translateX(100%);
animation: bgImgRight 0.5s linear 1.0s alternate forwards;
}
/*
.home.page .flex-container:not(.create-site) {
list-style-type: none;
justify-content: space-around;
}
.home.page .flex-container:not(.create-site) .flex-item {
width: 33%;
margin: 0;
overflow: hidden;
border-radius: 50%;
background-color: #fff;
margin-bottom: 20px;
}
.home.page .flex-container:not(.create-site) .flex-item a {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
display: block;
}
.home.page .flex-container:not(.create-site) .flex-item a:before {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 3em solid #0086cc;
box-sizing: border-box;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0.5;
transition-duration: 0.3s;
}
.home.page .flex-container:not(.create-site) .flex-item:hover a:before {
border: 1em solid #eeee22;
opacity: 0.5;
}
.home.page .flex-container:not(.create-site) .flex-item img {
width: 100%;
height: auto;
display: block;
transition-duration: 0.3s;
}
.home.page .flex-container:not(.create-site) .flex-item:hover img {
transform: scale(1.1);
transition-duration: 0.3s;
opacity: 0.7;
}
.home.page .flex-container:not(.create-site) .flex-item .item-title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
line-height: 110%;
z-index: 1;
font-weight: bold;
padding: 6px 20px;
font-family: 'arial black', sans-serif;
color: #ffbb00;
font-size: 110%;
letter-spacing: 0;
text-shadow: 0px 2px 2px rgba(255,255,255,0.6),
             0px 4px 2px rgba(255,255,255,0.4);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5em;
}
.home.page .flex-container:not(.create-site) .flex-item .item-description {
font-size: 80%;
padding: 10% 20%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
line-height: 120%;
transition: color 0.5s;
color: #113f8f;
display: flex;
align-items: flex-end;
justify-content: center;
}
*/
/*** flex box ***/
.home.page .flex-container.menu {
justify-content: space-around;
overflow: hidden;
}
.home.page .flex-container.menu > .flex-item {
width: 23%;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 1em;
justify-content: space-around;
border: 8px solid #ffd500;
border-top: 8px solid #005bbb;
border-left: 8px solid #005bbb;
border-right: 8px solid #005bbb;
border-radius: 40px 40px 0 0;
padding: 0;
transition: all .5s;
overflow: hidden;
background-color: #ffd500;
}
.home.page .flex-container.menu .flex-item p {
margin-bottom: 0;
}
.home.page .flex-container.menu > .flex-item .item-title {
color: #005bbb;
/*background-color: #ffd500;*/
/*color: #fff;*/
text-shadow: -1px 1px 4px #ffd500,
             1px 1px 4px #ffd500,
             1px -1px 4px #ffd500,
             -1px -1px 4px #ffd500,
             -4px 0px 6px rgba(255,255,255,0.7),
             0px 4px 6px rgba(255,255,255,0.7),
             4px 0px 6px rgba(255,255,255,0.7),
             0px -4px 6px rgba(255,255,255,0.7);
/*position: absolute;
top: 0;
left: 0;
right: 0;*/
margin: auto;
z-index: 1;
line-height: 110%;
}
.home.page .flex-container.menu > .flex-item a:hover .item-title {
/*background-color: #527585;*/
text-shadow: -1px 1px 4px rgba(255,255,255,1.0),
             1px 1px 4px rgba(255,255,255,1.0),
             1px -1px 4px rgba(255,255,255,1.0),
             -1px -1px 4px rgba(255,255,255,1.0),
             -4px 0px 6px rgba(255,255,255,0.7),
             0px 4px 6px rgba(255,255,255,0.7),
             4px 0px 6px rgba(255,255,255,0.7),
             0px -4px 6px rgba(255,255,255,0.7);
transition: all .5s;
}
.home.page .flex-container.menu > .flex-item > a,
.home.page .flex-container.menu > .flex-item.no-anchor {
position: relative;
}
.home.page .flex-container.menu > .flex-item img {
display: block;
opacity: 0.7;
transition: all .5s;
width: 80%;
height: auto;
margin: auto;
}
.home.page .flex-container.menu > .flex-item:not(.no-anchor):hover {
/*border-color: #527585;*/
border-radius: 0 0 40px 0;
border-top: 8px solid #ffd500;
border-left: 8px solid #ffd500;
border-right: 8px solid #005bbb;
border-bottom: 8px solid #005bbb;
}
.home.page .flex-container.menu > .flex-item:not(.no-anchor):hover > a img {
transform: scale(1.1);
opacity: 1;
}
.home.page .flex-container.menu .flex-item > span {
display: inline-block;
}
.home.page .flex-container.menu .flex-item > h4 {
display: inline-block;
margin: 0;
}
.home.page .flex-container.menu .flex-item .item-title {
font-size: 120%;
font-weight: 500;
line-height: 120%;
padding: 6px 1em;
}
.home.page .flex-container.menu .flex-item.line .item-title {
border-color: #06c755;
}
.home.page .flex-container.menu .flex-item .item-description {
/*text-align: left;*/
color: #332b00;
/*position: absolute;
bottom: 0;
left: 0;
right: 0;*/
margin: auto;
z-index: 1;
padding: 0.5em 1em;
/*background-color: #eef1f3;*/
line-height: 120%;
font-size: 90%;
transition: all .5s;
}
.home.page .flex-container.menu .flex-item a:hover .item-description {
/*background-color: #527585;
color: #fff;*/
}
.home.page .flex-container.menu .flex-item:hover,
.home.page .flex-container.menu .flex-item:hover a {
/*background-color: #527585;*/
}
.home.page .flex-container.menu .flex-container.line {
margin-top: 1em;
}
.home.page .flex-container.menu .flex-item dl {
margin: 0;
}
.home.page .flex-container.menu .flex-item dd {
text-align: left;
}
.home.page .flex-container.menu .flex-item a .anchor-icon {
display: none;
}
.home.page .flex-container.menu > .flex-item > a:before {
content: "\f00e";
font-family: "Font awesome 5 Free";
font-weight: 900;
font-size: 400%;
color: #fff;
width: 50%;
height: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
opacity: 0;
transition: all .5s;
z-index: 2;
}
.home.page .flex-container.menu > .flex-item a:hover:before {
opacity: 0.8;
}
.web-management {
/*width: 60%;*/
margin-left: auto;
margin-right: auto;
text-align: center;
margin-left: 20px;
margin-right: 20px;
}
.web-management a {
border-radius: 40px;
border: none;
background: #ff3c00;
box-shadow: 0 5px 1px #ccc;
color: #fff;
transition: 0.3s;
padding: 6px 12px;
font-weight: bold;
font-size: 200%;
text-decoration: none;
display: inline-block;
line-height: 130%;
}
.web-management a span {
display: block;
}
.web-management a .small {
font-size: 70%;
}
.web-management a:hover {
/*background: #ff0099;*/
background: #d51542;
/*font-size: 300%;*/
}
.web-management a:focus {
outline: 0;
background: #ff3c00;
box-shadow: 0 -5px 1px #ccc;
transform: translateY(3px);
}
/* 制作例ランダム表示 */
.home .flex-container.create-site .flex-item:nth-of-type(n+4) {
display: none;
}
/*###### Webサイト制作 ######*/
.mobile-display {
display: none;
}
dl.mobile-display dt,
dl.mobile-display dd {
width: 100%;
}
dl.mobile-display dd {
margin-left: 0;
}
dl.mobile-display dd dt,
dl.mobile-display.type2 dt {
background-color: #d9edf7;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 40px;
}
dl.mobile-display dd dd,
dl.mobile-display.type2 dd {
background-color: #fff;
padding-left: 40px;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 10px;
}
/*** TablePress ***/
table.tablepress th {
text-align: center;
}
table.tablepress td {
/*background-color: #fff;*/
}
table.tablepress td ul,
table.tablepress td ul li {
margin: 0;
}
#tablepress-1 td:not(.column-1) {
text-align: right;
}
.tablepress td .num {
display: block;
text-align: right;
}
#tablepress-2 td.column-3,
#tablepress-3 td.column-2 {
/*text-align: right;*/
}
#tablepress-2 td:last-child,
#tablepress-2 th:last-child {
width: 50%;
}
#tablepress-3 td:last-child,
#tablepress-3 th:last-child,
#tablepress-3 td:nth-last-child(2),
#tablepress-3 th:nth-last-child(2) {
width: 30%;
}
#tablepress-2 td.column-3 {
/*white-space: nowrap;*/
}
#tablepress-3 td.column-2 {
white-space: nowrap;
}
.flex-container.create-site {
margin-bottom: 20px;
}
.flex-container.create-site .flex-item {
/*margin: 1em;*/
width: 32%;
display: flex;
justify-content: space-around;
align-items: center;
margin-bottom: 20px;
}
.flex-container.create-site .flex-item img {
display: block;
margin: auto;
}
.flex-container.create-site .flex-item img:nth-of-type(1) {
margin-bottom: 10px;
}
/*###### 制作の流れ ######*/
.production-flow ul.flow-pre {
list-style: none;
margin-left: 0;
padding-left: 0;
}
.production-flow ul.flow-pre li {
background-color: #fff5bf;
/*border: 2px solid #0086CC;*/
border-left: 20px solid #005bbb;
padding: .5em 1em;
margin-left: 0;
}

.production-flow dl.flow-pre {
margin-left: 0;
padding-left: 0;
}
.production-flow dl.flow-pre dt {
background-color: #fff5bf;
border-left: 20px solid #005bbb;
padding: .5em 1em;
margin-left: 0;
}
.production-flow dl.flow-pre dd {
background-color: #fff5bf;
padding: .5em 1em;
margin-left: 0;
}

.production-flow ol.flow {
list-style: none;
padding-left: 0;
}
.production-flow ol.flow li {
position: relative;
border-bottom: 2px solid #005bbb;
margin-bottom: 20px;
}
.production-flow ol.flow li:not(:last-child):after {
content: "";
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #005bbb;
display: block;
}
.production-flow ol.flow li:after {
/*content: "";
position: absolute;
bottom: -27px;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #fff;
display: block;*/
}
.production-flow ol.flow li span.title {
display: inline-block;
padding-left: .5em;
padding-right: 1em;
/*border: 2px solid transparent;
border-top-color: #005bbb;
border-right-color: #005bbb;
border-bottom-color: #005bbb;
border-radius: 0 1em 1em 0;*/
font-weight: bold;
}
.production-flow ol.flow li:before {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
background-color: #005bbb;
border-radius: 50%;
color: #fff;
margin-right: .5em;
}
.production-flow ol.flow li:nth-of-type(1):before {
content: "1";
}
.production-flow ol.flow li:nth-of-type(2):before {
content: "2";
}
.production-flow ol.flow li:nth-of-type(3):before {
content: "3";
}
.production-flow ol.flow li:nth-of-type(4):before {
content: "4";
}
.production-flow ol.flow li:nth-of-type(5):before {
content: "5";
}
.production-flow ol.flow li:nth-of-type(6):before {
content: "6";
}

.production-flow ol.flow li > dl {
margin-left: 1em;
}
.production-flow ol.flow li > dl > dt {
font-weight: normal;
}
.production-flow ol.flow li dl dd {
/*padding-left: 0;*/
margin-left: 0;
}
.production-flow ol.flow li dl dd dt {
/*padding-left: 0;
margin-left: 0;*/
position: relative;
border-left: 10px solid #005bbb;
padding-left: .5em;
}
.production-flow ol.flow li dl dt span {
display: inline-block;
position: relative;
font-size: 80%;
padding: .2em .5em;
margin-left: 1em;
/*border-left: 10px solid #73b8e2;*/
}
.production-flow ol.flow li dl dt span:before {
/*content: "";
position: absolute;
top: 50%;
left: -2em;
margin-top: -1em;
border: 1em solid transparent;*/
}
.production-flow ol.flow li dl dt span.contents {
background-color: #F3F47F;
/*border-left: 1px solid #ECE038;*/
}
.production-flow ol.flow li dl dt span.design {
background-color: #F8EED1;
/*border-left: 1px solid #F8EED1;*/
}
.production-flow ol.flow li dl dt span.domain {
background-color: #EBF4F4;
/*border-left: 1px solid #ADA250;*/
}
.production-flow ol.flow li dl dt span.contents:before {
/*border-right-color: #ECE038;*/
}
.production-flow ol.flow li dl dt span.design:before {
/*border-right-color: #F8EED1;*/
}
.production-flow ol.flow li dl dt span.domain:before {
/*border-right-color: #ADA250;*/
}
.production-flow ol.flow li dl dt.contents:before {
/*content: "コンテンツ（内容・情報）";
position: absolute;
right: 0;
font-weight: normal;
background-color: #ECE038;
padding: .2em .5em;
font-size: 80%;*/
}
/*###### 料金 ######*/
body.create-web-design-fee .plan-container:nth-of-type(1) h2:before {
content: "1. ";
}
body.create-web-design-fee .plan-container:nth-of-type(2) h2:before {
content: "2. ";
}
body.create-web-design-fee .flex-container {
justify-content: space-around;
flex-direction : row;
}
body.create-web-design-fee .flex-container .flex-item {
width: 33%;
border: 1px solid #00558F;
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
}
body.create-web-design-fee .flex-container:not(.option):not(.support) .flex-item:nth-of-type(1),
body.create-web-design-fee .flex-container:not(.option):not(.support) .flex-item:nth-of-type(2) {
margin-left: 1%;
margin-right: 1%;
}
body.create-web-design-fee .flex-container .flex-item span,
body.create-web-design-fee .flex-container .flex-item dt,
body.create-web-design-fee .flex-container .flex-item dd {
line-height: 130%;
}
body.create-web-design-fee .flex-container.option .flex-item span,
body.create-web-design-fee .flex-container.support .flex-item span {
display: inline-block;
}
body.create-web-design-fee .flex-container .flex-item .title,
body.create-web-design-fee .flex-container .flex-item .selling-price {
font-weight: bold;
margin-bottom: 20px;
}
body.create-web-design-fee .flex-container .flex-item .selling-price {
font-size: 120%;
}
body.create-web-design-fee .flex-container .flex-item .sub-price {
font-size: 120%;
}
body.create-web-design-fee .flex-container .flex-item span.per {
display: inline-block;
font-size: 80%;
}
body.create-web-design-fee .flex-container .flex-item .description {
font-size: 90%;
text-align: left;
}
body.create-web-design-fee dl.check-list dd:before {
content:"\f058";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: .5em;
color: #6CBB5A;
}
body.create-web-design-fee .flex-container.option dd .flex-item {
width: 48%;
}
body.create-web-design-fee .flex-container.option .flex-item dd span.selling-price,
body.create-web-design-fee .flex-container.support .flex-item dd span.selling-pricebody.create-web-design-fee .flex-container.option .flex-item dd span.sub-price,
body.create-web-design-fee .flex-container.support .flex-item dd span.sub-price {
margin-left: 1em;
margin-right: 1em;
}
body.create-web-design-fee .flex-container.option > .flex-item:nth-of-type(4),
body.create-web-design-fee .flex-container.option > .flex-item:nth-of-type(5),
body.create-web-design-fee .flex-container.support .flex-item {
width: 100%;
}
body.create-web-design-fee .flex-container dl dd {
margin-left: 0;
}
body.create-web-design-fee .plan-container {
/*border: 1px solid #00558F;
border-radius: 20px;
margin-top: 50px;
padding-left: 20px;
padding-right: 20px;*/
}
body.create-web-design-fee .plan-container h2 {
/*margin-top: 0;*/
}
/*** 問い合わせリンクボタン ***/
div.request-wrap {
display: flex;
flex-direction: column;
align-items: center;
font-size: 200%;
color: #113f8f;
}
.request-wrap .dl-single-line {
padding: 0;
margin: 0;
font-family: FuturaLTPro,Futura,San Francisco,Helvetica Neue,Arial,sans-serif;
}
.request-wrap .dl-single-line dt {
clear: left;
float: left;
width: 2.5em;
font-weight: normal;
}
.request-wrap .dl-single-line dd {
margin-left: 3em;
}
div.request-wrap .tel-num,
div.request-wrap .fax-num {
font-weight: bold;
/*color: #fff100;
text-shadow: 1px 1px 1px #113f8f, -1px -1px 1px #113f8f,
             -1px 1px 1px #113f8f, 1px -1px 1px #113f8f,
             0px 1px 1px #113f8f,  0 -1px 1px #113f8f,
             -1px 0 1px #113f8f, 1px 0 1px #113f8f;*/
}
a.inquiry-button {
  color: #fff;
  background-color: #eb6100;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  padding: 1.5rem 3rem 1.5rem 2rem;
}
a.inquiry-button:hover {
  color: #fff;
  background: #f56500;
  opacity: 1;
}
a.inquiry-button i.fa {
  margin-right: 1rem;
}

a.inquiry-button:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}
/*###### ポートフォリオ ######*/
.grid-container.example {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
line-height: 0;
justify-content: center;
}
.grid-container.example .grid-item {
overflow: hidden;
aspect-ratio: 4 / 3;
position: relative;
}
.grid-container.example .grid-item a {
/*position: relative;*/
}
.grid-container.example .grid-item a span {
display: block;
width: 100%;
height: auto;
margin: auto;
position: absolute;
bottom: 0;
padding: .5em;
z-index: 1;
background-color: rgba(0,0,0,0.4);
color: #fff;
/*font-size: calc(0.3vw + 1em);*/
font-size: 90%;
overflow-wrap: break-word;
line-height: 120%;
transform: translateY(101%);
transition: all 0.3s;
}
.grid-container.example .grid-item:hover a span {
transform: translateY(0%);
}
/*###### 問い合わせフォーム ######*/
dl#Inquiry dd,
#Inquiry dl dd {
margin-bottom: 10px;
}
#Inquiry dd .your-postcode input,
#Inquiry dd .your-pref select,
#Inquiry dd .your-tel input,
#Inquiry dd .your-number input,
#Inquiry dd .your-position input,
#Inquiry dd .your-delivery-date input {
width: 50%;
}
#Inquiry dd .your-size-vertical input,
#Inquiry dd .your-size-side input {
width: 6em;
}
#Inquiry dd .your-size-unit select,
#Inquiry dd .your-data-dpi input {
width: 5em;
}
#Inquiry dd .your-budget-start input,
#Inquiry dd .your-budget-end input {
width: 6em;
}
#Inquiry dd .inner {
display: inline-block;
margin-top: 10px;
}
#Inquiry b {
color: #c00;
}
dl#Inquiry dt,
#Inquiry dl dt {
font-weight: bold;
float: left;
clear: left;
width: 11em;
text-align: right;
}
dl#Inquiry dd,
#Inquiry dl dd {
margin-left: 11.5em;
}
.tel-num {
font-size: 150%;
font-weight: bold;
color: #4aba00;
}
#Inquiry dl .your-age input {
width: 6em;
}
#Inquiry .hide {
display: none;
}
#Inquiry .upload-file label {
background: #ddd;
padding: 8px 30px;
border-radius: 10px;
display: inline-block;
margin-right: 10px;
/*position: relative;*/
}
#Inquiry .upload-file label:hover {
background: #bbb;
color: #fff;
}
#Inquiry .upload-file label.selected {
background: #eeee22;
color: #444;
}
#Inquiry .upload-file label.selected:after {
content: "（選択済み）";
}
#Inquiry .upload-file-wrap span {
display: inline-block;
}
#Inquiry .upload-file-wrap span.hide {
display: none;
}
#Inquiry input:focus,
#Inquiry textarea:focus {
/*border: 2px solid #73b8e2;
outline: 0;*/
outline-color: #005bbb;
}
/*** 送信ボタン ***/
p.submit {
width: 10em;
margin-left: auto;
margin-right: auto;
}
p.submit input[type="submit"].wpcf7-submit {
border-radius: 40px;
border: none;
font-weight: bold;
font-size: 100%;
background: #6CBB5A;
box-shadow: 0 3px 1px #84a1a8;
color: #fff;
transition: 0.3s;
padding: 1em;
}
p.submit input[type="submit"].wpcf7-submit:before {
font-family: "Font Awesome 5 Free";
content: "\f0e0";
font-weight: 900;
}
p.submit input[type="submit"].wpcf7-submit:hover {
background: #CCDE68;
box-shadow: 0 -3px 1px #84a1a8;
transform: translateY(3px);
}
p.submit input[type="submit"].wpcf7-submit:focus {
outline: 0;
background: #6CBB5A;
}
/*** アコーディオンメニュー（プライバシーポリシー） ***/
.acd-check {
display: none;
}
.acd-label {
color: #00558F;
display: block;
margin-bottom: 1px;
padding: 10px;
padding-left: 26px;
font-weight: bold;
border-top: solid 2px #0086cc;
}
.acd-label:before {
content: '\f054';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 8px;
color: #0086cc;
}
.acd-content {
display: block;
height: 0;
opacity: 0;
transition: 0.8s;
overflow: hidden;
}
.acd-check:checked + .acd-label + .acd-content {
height: auto;
opacity: 1;
}
.acd-check:checked + .acd-label:before {
content: '\f078';
color: #0086cc;
}
/*###### プライバシーポリシー ######*/
dd.mail-form-dd input[name="e1"] {
width: 6em;
margin-bottom: 10px;
}
dd.mail-form-dd input[name="e2"] {
width: 8em;
margin-bottom: 10px;
}
dd.mail-form-dd input[type="button"] {
border-radius: 40px;
border: none;
background: #81d742;
box-shadow: 0 3px 1px #ccc;
color: #fff;
transition: 0.3s;
padding: .5em 1em;
/*margin-top: 20px;*/
}
dd.mail-form-dd input[type="button"]:hover {
background: #6db738;
}
dd.mail-form-dd input[type="button"]:focus {
outline: 0;
background: #81d742;
box-shadow: 0 -3px 1px #ccc;
transform: translateY(3px);
}
dl.mail-form-dl dt {
clear: left;
float: left;
width: 8em;
}
dl.mail-form-dl dd {
margin-left: 8.5em;
}
/*###### 特商法 ######*/
.tokusyoho dl dd {
margin-left: 0;
margin-bottom: 10px;
}
.tokusyoho .dl-single-line > dt {
width: 10em;
text-align: right;
}
.tokusyoho .dl-single-line > dd {
margin-left: 10.5em;
}
/*###### 管理人プロフィール ######*/
.about .dl-single-line dd {
margin-left: 8.5em;
}
/* ###### SNS ###### */
body .container .sns-share .sns-share-buttons .share-button .button-caption {
display:none;
}
body .container .sns-share .sns-share-buttons {
justify-content: center;
}
body .container .sns-share .sns-share-buttons a {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 8px;
border: 2px solid #fff;
}
body .container .sns-follow .sns-follow-buttons .follow-button {
/*width: 34px;
height: 34px;*/
}
body .container .sns-follow:not(.sf-profile) .sns-follow-buttons {
justify-content: center;
}
body .container .sns-follow:not(.sf-profile) .sns-follow-buttons a {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 8px;
border: 2px solid #fff;
}
.sns-share,
.sns-follow:not(.sf-profile) {
position: relative;
text-align: center;
}
.sns-share-message::before,
.sns-share-message::after {
/*font-family: FontAwesome;*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f584";
padding-right: .5em;
padding-left: .5em;
}
.sns-follow-message::before,
.sns-follow-message::after {
/*font-family: FontAwesome;*/
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f587";
padding-right: .5em;
padding-left: .5em;
}
/*###### reCAPTCHA v3 表示 ######*/
.grecaptcha-badge {
margin-bottom: 60px;
}
/*###### 非表示項目######*/
.contact .date-tags,
.contact .eye-catch-wrap,
.contact .sns-share,
.contact .sns-follow,
.contact .toc,
.contact .read-time/*,
.contact .breadcrumb*/ {
display: none;
}
.page .date-tags {
display: none;
}
.home .read-time {
display: none;
}
/* 広告非表示 */
.home .ad-content-top {
display: none;
}
/*###### モバイルメニュー ######*/
.mobile-menu-buttons {
/*background-color: #73b8e2;*/
background-color: transparent;
/*box-shadow: 0 -4px 4px rgba(0,0,0,0.4);*/
box-shadow: none;
transition: .5s;
}
.mobile-menu-buttons.solid {
background-color: #52c2f0;
box-shadow: 0 -4px 4px rgba(0,0,0,0.4);
}
/* ハンバーガーメニューアニメーション */
.mobile-menu-buttons .navi-menu-button {
}
#navi-menu-close {
background-color: rgba(0,0,0,0.4) !important;
}
.mobile-menu-buttons .navi-menu-button label.menu-button-in {
overflow: hidden;
display: block;
position: relative;
width: 30px;
height: 40px;
z-index: 0;
margin-left: 20px;
}
.mobile-menu-buttons .navi-menu-button label.menu-button-in span,
.mobile-menu-buttons .navi-menu-button label.menu-button-in:before,
.mobile-menu-buttons .navi-menu-button label.menu-button-in:after {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 27px;
height: 2px;
margin: auto;
background: #fff;
}
.mobile-menu-buttons .navi-menu-button .navi-menu-icon {
/*overflow: hidden;
display: block;
position: relative;
width: 50px;
height: 50px;
z-index: 0;*/
display: none;
}
.mobile-menu-buttons .navi-menu-button .navi-menu-icon span {
/*display: none;*/
}
.mobile-menu-buttons .navi-menu-caption {
/*display: none;*/
}
.mobile-menu-buttons .navi-menu-button .navi-menu-icon span,
.mobile-menu-buttons .navi-menu-button .navi-menu-icon:before,
.mobile-menu-buttons .navi-menu-button .navi-menu-icon:after {
/*display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 36px;
height: 4px;
margin: auto;
background: #fff;*/
}
/*.mobile-menu-buttons .navi-menu-button .navi-menu-icon span*/
.mobile-menu-buttons .navi-menu-button label.menu-button-in span {
overflow: hidden;
z-index: 1;
color: #fff;
}
/*.mobile-menu-buttons .navi-menu-button .navi-menu-icon:before*/
.mobile-menu-buttons .navi-menu-button label.menu-button-in:before {
z-index: 2;
transform: translate(0, -9px);
content: "";
}
/*.mobile-menu-buttons .navi-menu-button .navi-menu-icon:after*/
.mobile-menu-buttons .navi-menu-button label.menu-button-in:after {
z-index: 2;
transform: translate(0, 9px);
content: "";
}
.mobile-menu-buttons .navi-menu-button label.menu-button-in span {
opacity: 1;
transition: opacity 300ms 100ms;
}
.mobile-menu-buttons .navi-menu-button label.menu-button-in:before,
.mobile-menu-buttons .navi-menu-button label.menu-button-in:after {
transition: transform 400ms;
}
.mobile-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in span {
opacity: 0;
transition: opacity 300ms;
}
.mobile-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in:before {
transform: rotate(45deg);
}
.mobile-menu-buttons .navi-menu-button #navi-menu-input:checked + label.menu-button-in:after {
transform: rotate(-45deg);
}

.mobile-menu-buttons .navi-menu-button .navi-menu-content {
width: 280px;
padding-top: 20px;
}
.mobile-menu-buttons .navi-menu-button .navi-menu-close-button {
display: none;
}

.navi-menu-button .menu-button-in,
.mobile-menu-buttons .home-menu-button > a,
.search-menu-button,
.mobile-menu-buttons .top-menu-button > a,
.sidebar-menu-button .menu-button-in {
color: #fff;
}
.navi-menu-close-button,
.sidebar-menu-close-button {
color: #52c2f0
}
.mobile-menu-buttons .menu-button:hover {
/*background-color: #6db3f2;*/
}
.mobile-menu-buttons .navi-menu-button:hover,
.mobile-menu-buttons .home-menu-button:hover > a,
.mobile-menu-buttons .search-menu-button:hover,
.mobile-menu-buttons .top-menu-button:hover > a,
.mobile-menu-buttons .sidebar-menu-button:hover > label {
/*color: #fff;*/
/*color: #1ca9f9;*/
}
.mobile-menu-buttons .menu-button:hover {
/*background-color: #fff;*/
}
.mobile-menu-buttons .navi-menu-button:hover .menu-button-in,
.mobile-menu-buttons .home-menu-button:hover > a,
.mobile-menu-buttons .search-menu-button:hover,
.mobile-menu-buttons .top-menu-button:hover > a,
.mobile-menu-buttons .sidebar-menu-button:hover .menu-button-in {
color: #52c2f0;
}
.navi-menu-content .menu-item:not(.current-menu-item) > a:hover:after {
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: .5em;
color: #52c2f0;
font-size: 90%;
}
.navi-menu-content .current-menu-item > a:after {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-left: .5em;
color: #52c2f0;
}
/* ###### トップへ戻る ###### */
.go-to-top-button {
border-radius: 50%;
}
.go-to-top-button span {
font-size: 150%;
}
/* ###### パララックス ###### */
.moving-wrap {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.moving-wrap.vertical {
transform: translateY(2em);
/*transform: translateY(60px);*/
}
.moving-wrap.vertical.active {
transform: translateY(0);
}
.moving-wrap.horizontal {
transform: translateX(-100%);
opacity: 0;
}
.moving-wrap.horizontal-rev {
transform: translateX(100%);
opacity: 0;
}
.moving-wrap.horizontal.active,
.moving-wrap.horizontal-rev.active {
transform: translateX(0);
opacity: 1;
}
.flex-container .flex-item.moving-wrap:nth-of-type(2n),
.grid-container .grid-item.moving-wrap:nth-of-type(2n) {
transition-delay: 0.1s;
}
.flex-container .flex-item.moving-wrap:nth-of-type(3n) {
/*transition-delay: 0.2s;*/
}
/*###### ブログ投稿ページ ######*/
/*** トーン ***/
.tone-circle-wrap {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 50%;
margin: auto;
}
.tone-circle-wrap .vertical-axis {
width: 1.2em;
}

.tone-circle-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
border: 2px solid #aaa;
border-radius: 0 100% 100% 0;
padding: 1%;
width: calc(100% - 1.2em);
margin: auto;
}
.tone-circle-container:before {
}
.tone-circle-container .wrap {
display: flex;
align-items: center;
justify-content: center;
/*flex-direction: column;*/
flex-wrap: wrap;
}
.tone-circle-container .wrap-1 {
width: 18%;
}
.tone-circle-container .wrap-2 {
width: 20%;
}
.tone-circle-container .wrap-3 {
width: 20%;
}
.tone-circle-container .wrap-4 {
width: 21%;
}
.tone-circle-container .wrap-5 {
width: 21%;
}
.tone-circle-container .wrap .circle-item {
border-radius: 50%;
/*margin: 0;*/
flex: 0 0 98%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
border: 2px solid #aaa;
box-sizing: border-box;
margin: 1%;
}
.tone-circle-container .wrap .circle-item a {
color: #444;
}
.tone-circle-container .wrap .circle-item:hover {
background-color: #fff;
}
.tone-circle-container .wrap .circle-item:before {
content: "";
display: block;
padding-top: 100%;
}
.tone-circle-container .circle-item span {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-weight: bold;
/*font-size:calc(.53405vw + 1.11696rem);*/
font-size: calc(.5vw + 1.2rem);
}
.tone-circle-container .circle-item div {
display: none;
position: absolute;
padding: 10px;
color: #fff;
border-radius: 5px;
background: #444;
/*width: 200%;*/
width: auto;
z-index: 1;
opacity: 0.8;
/*font-size: 14px;*/
font-size: calc(.5vw + .5rem);
}
.tone-circle-container .circle-item div:before {
content: "";
position: absolute;
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #444;
margin-left: -15px;
}
.tone-circle-container .circle-item:hover div {
display: inline-block;
bottom: 60%;
left: 0;
white-space: nowrap;
}
/*.tone-circle-container .circle-item:nth-of-type(-n+5) {
width: 18%;
height: 0;
padding-bottom: 18%;
}
.tone-circle-container .circle-item:nth-last-of-type(-n+4) {
width: 31.33333333%;
height: 0;
padding-bottom: 31.33333333%;
}*/
.tone-circle-container.tone-circle-v .circle-item {

}

.circle-container {
position: relative;
width: 301px;
height: 301px;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
.circle-container .title {
display: block;
font-size: 300%;
font-weight: bold;
text-align: center;
}
.circle-container .circle-item {
position: absolute;
width: 35px;
height: 35px;
border-radius: 50%;
margin: 0;
}
.flex-container.color-tone .flex-item {
width: 25%;
height: 50px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
/* ビビッドトーン */
.circle-container.color-tone-v .circle-item:nth-of-type(12) {
background-color: #D40045;
}
.circle-container.color-tone-v .circle-item:nth-of-type(13) {
background-color: #EE0026;
}
.circle-container.color-tone-v .circle-item:nth-of-type(14) {
background-color: #FD1A1C;
}
.circle-container.color-tone-v .circle-item:nth-of-type(15) {
background-color: #FE4118;
}
.circle-container.color-tone-v .circle-item:nth-of-type(16) {
background-color: #FF590B;
}
.circle-container.color-tone-v .circle-item:nth-of-type(17) {
background-color: #FF7F00;
}
.circle-container.color-tone-v .circle-item:nth-of-type(18) {
background-color: #FFCC00;
}
.circle-container.color-tone-v .circle-item:nth-of-type(19) {
background-color: #FFE600;
}
.circle-container.color-tone-v .circle-item:nth-of-type(20) {
background-color: #CCE700;
}
.circle-container.color-tone-v .circle-item:nth-of-type(21) {
background-color: #99CF15;
}
.circle-container.color-tone-v .circle-item:nth-of-type(22) {
background-color: #66B82B;
}
.circle-container.color-tone-v .circle-item:nth-of-type(23) {
background-color: #33A23D;
}
.circle-container.color-tone-v .circle-item:nth-of-type(24) {
background-color: #008F62;
}
.circle-container.color-tone-v .circle-item:nth-of-type(1) {
background-color: #008678;
}
.circle-container.color-tone-v .circle-item:nth-of-type(2) {
background-color: #007A87;
}
.circle-container.color-tone-v .circle-item:nth-of-type(3) {
background-color: #055D87;
}
.circle-container.color-tone-v .circle-item:nth-of-type(4) {
background-color: #093F86;
}
.circle-container.color-tone-v .circle-item:nth-of-type(5) {
background-color: #0F218B;
}
.circle-container.color-tone-v .circle-item:nth-of-type(6) {
background-color: #1D1A88;
}
.circle-container.color-tone-v .circle-item:nth-of-type(7) {
background-color: #281285;
}
.circle-container.color-tone-v .circle-item:nth-of-type(8) {
background-color: #340C81;
}
.circle-container.color-tone-v .circle-item:nth-of-type(9) {
background-color: #56007D;
}
.circle-container.color-tone-v .circle-item:nth-of-type(10) {
background-color: #770071;
}
.circle-container.color-tone-v .circle-item:nth-of-type(11) {
background-color: #AF0065;
}
/* ブライトトーン */
.circle-container.color-tone-b .circle-item:nth-of-type(7) {
background-color: #F9344C;
}
.circle-container.color-tone-b .circle-item:nth-of-type(8) {
background-color: #FC4E32;
}
.circle-container.color-tone-b .circle-item:nth-of-type(9) {
background-color: #FF9914;
}
.circle-container.color-tone-b .circle-item:nth-of-type(10) {
background-color: #FFF231;
}
.circle-container.color-tone-b .circle-item:nth-of-type(11) {
background-color: #99D02B;
}
.circle-container.color-tone-b .circle-item:nth-of-type(12) {
background-color: #33A65E;
}
.circle-container.color-tone-b .circle-item:nth-of-type(1) {
background-color: #1AA18E;
}
.circle-container.color-tone-b .circle-item:nth-of-type(2) {
background-color: #1D86AE;
}
.circle-container.color-tone-b .circle-item:nth-of-type(3) {
background-color: #386CB0;
}
.circle-container.color-tone-b .circle-item:nth-of-type(4) {
background-color: #6964AD;
}
.circle-container.color-tone-b .circle-item:nth-of-type(5) {
background-color: #A45AAA;
}
.circle-container.color-tone-b .circle-item:nth-of-type(6) {
background-color: #DF4C94;
}
/* ストロングトーン */
.circle-container.color-tone-s .circle-item:nth-of-type(7) {
background-color: #CA1028;
}
.circle-container.color-tone-s .circle-item:nth-of-type(8) {
background-color: #CC4613;
}
.circle-container.color-tone-s .circle-item:nth-of-type(9) {
background-color: #D9760F;
}
.circle-container.color-tone-s .circle-item:nth-of-type(10) {
background-color: #CCB914;
}
.circle-container.color-tone-s .circle-item:nth-of-type(11) {
background-color: #8CA113;
}
.circle-container.color-tone-s .circle-item:nth-of-type(12) {
background-color: #27853F;
}
.circle-container.color-tone-s .circle-item:nth-of-type(1) {
background-color: #297364;
}
.circle-container.color-tone-s .circle-item:nth-of-type(2) {
background-color: #205B85;
}
.circle-container.color-tone-s .circle-item:nth-of-type(3) {
background-color: #233B8B;
}
.circle-container.color-tone-s .circle-item:nth-of-type(4) {
background-color: #3D1C83;
}
.circle-container.color-tone-s .circle-item:nth-of-type(5) {
background-color: #5E2883;
}
.circle-container.color-tone-s .circle-item:nth-of-type(6) {
background-color: #990F4F;
}
/* ディープトーン */
.circle-container.color-tone-dp .circle-item:nth-of-type(7) {
background-color: #9E002C;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(8) {
background-color: #A41200;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(9) {
background-color: #A34A02;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(10) {
background-color: #A38204;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(11) {
background-color: #518517;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(12) {
background-color: #2F6F41;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(1) {
background-color: #025965;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(2) {
background-color: #04436D;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(3) {
background-color: #073E73;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(4) {
background-color: #232166;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(5) {
background-color: #531460;
}
.circle-container.color-tone-dp .circle-item:nth-of-type(6) {
background-color: #740050;
}
/* ライトトーン */
.circle-container.color-tone-lt .circle-item:nth-of-type(7) {
background-color: #FA7482;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(8) {
background-color: #FB8072;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(9) {
background-color: #FDB46C;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(10) {
background-color: #FFF27B;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(11) {
background-color: #B3DE69;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(12) {
background-color: #7FC97E;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(1) {
background-color: #66C2AE;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(2) {
background-color: #67B2CA;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(3) {
background-color: #679FCA;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(4) {
background-color: #807DBA;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(5) {
background-color: #B172B6;
}
.circle-container.color-tone-lt .circle-item:nth-of-type(6) {
background-color: #E170A4;
}
/* ソフトトーン */
.circle-container.color-tone-sf .circle-item:nth-of-type(7) {
background-color: #C95F6A;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(8) {
background-color: #D77856;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(9) {
background-color: #D89048;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(10) {
background-color: #CCBA48;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(11) {
background-color: #B3B140;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(12) {
background-color: #66AC78;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(1) {
background-color: #4E9B86;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(2) {
background-color: #4F8B97;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(3) {
background-color: #516690;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(4) {
background-color: #5D5791;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(5) {
background-color: #8C5588;
}
.circle-container.color-tone-sf .circle-item:nth-of-type(6) {
background-color: #B15076;
}
/* ダルトーン */
.circle-container.color-tone-d .circle-item:nth-of-type(7) {
background-color: #994152;
}
.circle-container.color-tone-d .circle-item:nth-of-type(8) {
background-color: #B24443;
}
.circle-container.color-tone-d .circle-item:nth-of-type(9) {
background-color: #B25938;
}
.circle-container.color-tone-d .circle-item:nth-of-type(10) {
background-color: #997F42;
}
.circle-container.color-tone-d .circle-item:nth-of-type(11) {
background-color: #747E47;
}
.circle-container.color-tone-d .circle-item:nth-of-type(12) {
background-color: #5A804B;
}
.circle-container.color-tone-d .circle-item:nth-of-type(1) {
background-color: #2A6B68;
}
.circle-container.color-tone-d .circle-item:nth-of-type(2) {
background-color: #1E6282;
}
.circle-container.color-tone-d .circle-item:nth-of-type(3) {
background-color: #214274;
}
.circle-container.color-tone-d .circle-item:nth-of-type(4) {
background-color: #3A367B;
}
.circle-container.color-tone-d .circle-item:nth-of-type(5) {
background-color: #5E3179;
}
.circle-container.color-tone-d .circle-item:nth-of-type(6) {
background-color: #802A68;
}
/* ダークトーン */
.circle-container.color-tone-dk .circle-item:nth-of-type(7) {
background-color: #632A31;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(8) {
background-color: #743526;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(9) {
background-color: #6C4919;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(10) {
background-color: #695B18;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(11) {
background-color: #56561A;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(12) {
background-color: #345934;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(1) {
background-color: #1D4B44;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(2) {
background-color: #0E4251;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(3) {
background-color: #16344F;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(4) {
background-color: #312C4B;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(5) {
background-color: #4A304B;
}
.circle-container.color-tone-dk .circle-item:nth-of-type(6) {
background-color: #633142;
}
/* ペールトーン */
.circle-container.color-tone-p .circle-item:nth-of-type(7) {
background-color: #FBB4C4;
}
.circle-container.color-tone-p .circle-item:nth-of-type(8) {
background-color: #FDCDB7;
}
.circle-container.color-tone-p .circle-item:nth-of-type(9) {
background-color: #FEE6AA;
}
.circle-container.color-tone-p .circle-item:nth-of-type(10) {
background-color: #FFFFB3;
}
.circle-container.color-tone-p .circle-item:nth-of-type(11) {
background-color: #E6F5B0;
}
.circle-container.color-tone-p .circle-item:nth-of-type(12) {
background-color: #CCEBC5;
}
.circle-container.color-tone-p .circle-item:nth-of-type(1) {
background-color: #B3E2D8;
}
.circle-container.color-tone-p .circle-item:nth-of-type(2) {
background-color: #B3D7DD;
}
.circle-container.color-tone-p .circle-item:nth-of-type(3) {
background-color: #B3CDE3;
}
.circle-container.color-tone-p .circle-item:nth-of-type(4) {
background-color: #B2B6D8;
}
.circle-container.color-tone-p .circle-item:nth-of-type(5) {
background-color: #CAB2D6;
}
.circle-container.color-tone-p .circle-item:nth-of-type(6) {
background-color: #E3ADD5;
}
/* ライトグレイッシュトーン */
.circle-container.color-tone-ltg .circle-item:nth-of-type(7) {
background-color: #D7A4B6;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(8) {
background-color: #D8AFA7;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(9) {
background-color: #D9BA97;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(10) {
background-color: #D9C69B;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(11) {
background-color: #AAC09B;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(12) {
background-color: #9EBCA3;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(1) {
background-color: #91B8AC;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(2) {
background-color: #91AFBB;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(3) {
background-color: #91A4B6;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(4) {
background-color: #9191AD;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(5) {
background-color: #A997B0;
}
.circle-container.color-tone-ltg .circle-item:nth-of-type(6) {
background-color: #C09EB3;
}
/* グレイッシュトーン */
.circle-container.color-tone-g .circle-item:nth-of-type(7) {
background-color: #7D4F5B;
}
.circle-container.color-tone-g .circle-item:nth-of-type(8) {
background-color: #7D5F61;
}
.circle-container.color-tone-g .circle-item:nth-of-type(9) {
background-color: #7D6764;
}
.circle-container.color-tone-g .circle-item:nth-of-type(10) {
background-color: #7D6F59;
}
.circle-container.color-tone-g .circle-item:nth-of-type(11) {
background-color: #636E5B;
}
.circle-container.color-tone-g .circle-item:nth-of-type(12) {
background-color: #486C5C;
}
.circle-container.color-tone-g .circle-item:nth-of-type(1) {
background-color: #385B63;
}
.circle-container.color-tone-g .circle-item:nth-of-type(2) {
background-color: #384E5D;
}
.circle-container.color-tone-g .circle-item:nth-of-type(3) {
background-color: #384158;
}
.circle-container.color-tone-g .circle-item:nth-of-type(4) {
background-color: #3F2F50;
}
.circle-container.color-tone-g .circle-item:nth-of-type(5) {
background-color: #493753;
}
.circle-container.color-tone-g .circle-item:nth-of-type(6) {
background-color: #5A3A54;
}
/* ダークグレイッシュトーン */
.circle-container.color-tone-dkg .circle-item:nth-of-type(7) {
background-color: #3A2C2E;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(8) {
background-color: #3A2C2A;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(9) {
background-color: #463B34;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(10) {
background-color: #46402C;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(11) {
background-color: #3E3F31;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(12) {
background-color: #24342D;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(1) {
background-color: #253532;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(2) {
background-color: #283539;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(3) {
background-color: #222831;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(4) {
background-color: #282430;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(5) {
background-color: #2E2A31;
}
.circle-container.color-tone-dkg .circle-item:nth-of-type(6) {
background-color: #3A2D31;
}

.flex-container.color-tone-v .flex-item {
width: 12.5%;
}

/* ビビッドトーン */
.flex-container.color-tone-v .flex-item:nth-of-type(1) {
background-color: #D40045;
}
.flex-container.color-tone-v .flex-item:nth-of-type(2) {
background-color: #EE0026;
}
.flex-container.color-tone-v .flex-item:nth-of-type(3) {
background-color: #FD1A1C;
}
.flex-container.color-tone-v .flex-item:nth-of-type(4) {
background-color: #FE4118;
}
.flex-container.color-tone-v .flex-item:nth-of-type(5) {
background-color: #FF590B;
}
.flex-container.color-tone-v .flex-item:nth-of-type(6) {
background-color: #FF7F00;
}
.flex-container.color-tone-v .flex-item:nth-of-type(7) {
background-color: #FFCC00;
}
.flex-container.color-tone-v .flex-item:nth-of-type(8) {
background-color: #FFE600;
}
.flex-container.color-tone-v .flex-item:nth-of-type(9) {
background-color: #CCE700;
}
.flex-container.color-tone-v .flex-item:nth-of-type(10) {
background-color: #99CF15;
}
.flex-container.color-tone-v .flex-item:nth-of-type(11) {
background-color: #66B82B;
}
.flex-container.color-tone-v .flex-item:nth-of-type(12) {
background-color: #33A23D;
}
.flex-container.color-tone-v .flex-item:nth-of-type(13) {
background-color: #008F62;
}
.flex-container.color-tone-v .flex-item:nth-of-type(14) {
background-color: #008678;
}
.flex-container.color-tone-v .flex-item:nth-of-type(15) {
background-color: #007A87;
}
.flex-container.color-tone-v .flex-item:nth-of-type(16) {
background-color: #055D87;
}
.flex-container.color-tone-v .flex-item:nth-of-type(17) {
background-color: #093F86;
}
.flex-container.color-tone-v .flex-item:nth-of-type(18) {
background-color: #0F218B;
}
.flex-container.color-tone-v .flex-item:nth-of-type(19) {
background-color: #1D1A88;
}
.flex-container.color-tone-v .flex-item:nth-of-type(20) {
background-color: #281285;
}
.flex-container.color-tone-v .flex-item:nth-of-type(21) {
background-color: #340C81;
}
.flex-container.color-tone-v .flex-item:nth-of-type(22) {
background-color: #56007D;
}
.flex-container.color-tone-v .flex-item:nth-of-type(23) {
background-color: #770071;
}
.flex-container.color-tone-v .flex-item:nth-of-type(24) {
background-color: #AF0065;
}
/* ブライトトーン */
.flex-container.color-tone-b .flex-item:nth-of-type(1) {
background-color: #F9344C;
}
.flex-container.color-tone-b .flex-item:nth-of-type(2) {
background-color: #FC4E32;
}
.flex-container.color-tone-b .flex-item:nth-of-type(3) {
background-color: #FF9914;
}
.flex-container.color-tone-b .flex-item:nth-of-type(4) {
background-color: #FFF231;
}
.flex-container.color-tone-b .flex-item:nth-of-type(5) {
background-color: #99D02B;
}
.flex-container.color-tone-b .flex-item:nth-of-type(6) {
background-color: #33A65E;
}
.flex-container.color-tone-b .flex-item:nth-of-type(7) {
background-color: #1AA18E;
}
.flex-container.color-tone-b .flex-item:nth-of-type(8) {
background-color: #1D86AE;
}
.flex-container.color-tone-b .flex-item:nth-of-type(9) {
background-color: #386CB0;
}
.flex-container.color-tone-b .flex-item:nth-of-type(10) {
background-color: #6964AD;
}
.flex-container.color-tone-b .flex-item:nth-of-type(11) {
background-color: #A45AAA;
}
.flex-container.color-tone-b .flex-item:nth-of-type(12) {
background-color: #DF4C94;
}
/* ストロングトーン */
.flex-container.color-tone-s .flex-item:nth-of-type(1) {
background-color: #CA1028;
}
.flex-container.color-tone-s .flex-item:nth-of-type(2) {
background-color: #CC4613;
}
.flex-container.color-tone-s .flex-item:nth-of-type(3) {
background-color: #D9760F;
}
.flex-container.color-tone-s .flex-item:nth-of-type(4) {
background-color: #CCB914;
}
.flex-container.color-tone-s .flex-item:nth-of-type(5) {
background-color: #8CA113;
}
.flex-container.color-tone-s .flex-item:nth-of-type(6) {
background-color: #27853F;
}
.flex-container.color-tone-s .flex-item:nth-of-type(7) {
background-color: #297364;
}
.flex-container.color-tone-s .flex-item:nth-of-type(8) {
background-color: #205B85;
}
.flex-container.color-tone-s .flex-item:nth-of-type(9) {
background-color: #233B8B;
}
.flex-container.color-tone-s .flex-item:nth-of-type(10) {
background-color: #3D1C83;
}
.flex-container.color-tone-s .flex-item:nth-of-type(11) {
background-color: #5E2883;
}
.flex-container.color-tone-s .flex-item:nth-of-type(12) {
background-color: #990F4F;
}
/* ディープトーン */
.flex-container.color-tone-dp .flex-item:nth-of-type(1) {
background-color: #9E002C;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(2) {
background-color: #A41200;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(3) {
background-color: #A34A02;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(4) {
background-color: #A38204;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(5) {
background-color: #518517;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(6) {
background-color: #2F6F41;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(7) {
background-color: #025965;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(8) {
background-color: #04436D;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(9) {
background-color: #073E73;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(10) {
background-color: #232166;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(11) {
background-color: #531460;
}
.flex-container.color-tone-dp .flex-item:nth-of-type(12) {
background-color: #740050;
}
/* ライトトーン */
.flex-container.color-tone-lt .flex-item:nth-of-type(1) {
background-color: #FA7482;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(2) {
background-color: #FB8072;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(3) {
background-color: #FDB46C;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(4) {
background-color: #FFF27B;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(5) {
background-color: #B3DE69;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(6) {
background-color: #7FC97E;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(7) {
background-color: #66C2AE;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(8) {
background-color: #67B2CA;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(9) {
background-color: #679FCA;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(10) {
background-color: #807DBA;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(11) {
background-color: #B172B6;
}
.flex-container.color-tone-lt .flex-item:nth-of-type(12) {
background-color: #E170A4;
}
/* ソフトトーン */
.flex-container.color-tone-sf .flex-item:nth-of-type(1) {
background-color: #C95F6A;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(2) {
background-color: #D77856;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(3) {
background-color: #D89048;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(4) {
background-color: #CCBA48;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(5) {
background-color: #B3B140;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(6) {
background-color: #66AC78;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(7) {
background-color: #4E9B86;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(8) {
background-color: #4F8B97;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(9) {
background-color: #516690;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(10) {
background-color: #5D5791;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(11) {
background-color: #8C5588;
}
.flex-container.color-tone-sf .flex-item:nth-of-type(12) {
background-color: #B15076;
}
/* ダルトーン */
.flex-container.color-tone-d .flex-item:nth-of-type(1) {
background-color: #994152;
}
.flex-container.color-tone-d .flex-item:nth-of-type(2) {
background-color: #B24443;
}
.flex-container.color-tone-d .flex-item:nth-of-type(3) {
background-color: #B25938;
}
.flex-container.color-tone-d .flex-item:nth-of-type(4) {
background-color: #997F42;
}
.flex-container.color-tone-d .flex-item:nth-of-type(5) {
background-color: #747E47;
}
.flex-container.color-tone-d .flex-item:nth-of-type(6) {
background-color: #5A804B;
}
.flex-container.color-tone-d .flex-item:nth-of-type(7) {
background-color: #2A6B68;
}
.flex-container.color-tone-d .flex-item:nth-of-type(8) {
background-color: #1E6282;
}
.flex-container.color-tone-d .flex-item:nth-of-type(9) {
background-color: #214274;
}
.flex-container.color-tone-d .flex-item:nth-of-type(10) {
background-color: #3A367B;
}
.flex-container.color-tone-d .flex-item:nth-of-type(11) {
background-color: #5E3179;
}
.flex-container.color-tone-d .flex-item:nth-of-type(12) {
background-color: #802A68;
}
/* ダークトーン */
.flex-container.color-tone-dk .flex-item:nth-of-type(1) {
background-color: #632A31;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(2) {
background-color: #743526;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(3) {
background-color: #6C4919;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(4) {
background-color: #695B18;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(5) {
background-color: #56561A;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(6) {
background-color: #345934;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(7) {
background-color: #1D4B44;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(8) {
background-color: #0E4251;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(9) {
background-color: #16344F;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(10) {
background-color: #312C4B;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(11) {
background-color: #4A304B;
}
.flex-container.color-tone-dk .flex-item:nth-of-type(12) {
background-color: #633142;
}
/* ペールトーン */
.flex-container.color-tone-p .flex-item:nth-of-type(1) {
background-color: #FBB4C4;
}
.flex-container.color-tone-p .flex-item:nth-of-type(2) {
background-color: #FDCDB7;
}
.flex-container.color-tone-p .flex-item:nth-of-type(3) {
background-color: #FEE6AA;
}
.flex-container.color-tone-p .flex-item:nth-of-type(4) {
background-color: #FFFFB3;
}
.flex-container.color-tone-p .flex-item:nth-of-type(5) {
background-color: #E6F5B0;
}
.flex-container.color-tone-p .flex-item:nth-of-type(6) {
background-color: #CCEBC5;
}
.flex-container.color-tone-p .flex-item:nth-of-type(7) {
background-color: #B3E2D8;
}
.flex-container.color-tone-p .flex-item:nth-of-type(8) {
background-color: #B3D7DD;
}
.flex-container.color-tone-p .flex-item:nth-of-type(9) {
background-color: #B3CDE3;
}
.flex-container.color-tone-p .flex-item:nth-of-type(10) {
background-color: #B2B6D8;
}
.flex-container.color-tone-p .flex-item:nth-of-type(11) {
background-color: #CAB2D6;
}
.flex-container.color-tone-p .flex-item:nth-of-type(12) {
background-color: #E3ADD5;
}
/* ライトグレイッシュトーン */
.flex-container.color-tone-ltg .flex-item:nth-of-type(1) {
background-color: #D7A4B6;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(2) {
background-color: #D8AFA7;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(3) {
background-color: #D9BA97;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(4) {
background-color: #D9C69B;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(5) {
background-color: #AAC09B;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(6) {
background-color: #9EBCA3;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(7) {
background-color: #91B8AC;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(8) {
background-color: #91AFBB;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(9) {
background-color: #91A4B6;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(10) {
background-color: #9191AD;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(11) {
background-color: #A997B0;
}
.flex-container.color-tone-ltg .flex-item:nth-of-type(12) {
background-color: #C09EB3;
}
/* グレイッシュトーン */
.flex-container.color-tone-g .flex-item:nth-of-type(1) {
background-color: #7D4F5B;
}
.flex-container.color-tone-g .flex-item:nth-of-type(2) {
background-color: #7D5F61;
}
.flex-container.color-tone-g .flex-item:nth-of-type(3) {
background-color: #7D6764;
}
.flex-container.color-tone-g .flex-item:nth-of-type(4) {
background-color: #7D6F59;
}
.flex-container.color-tone-g .flex-item:nth-of-type(5) {
background-color: #636E5B;
}
.flex-container.color-tone-g .flex-item:nth-of-type(6) {
background-color: #486C5C;
}
.flex-container.color-tone-g .flex-item:nth-of-type(7) {
background-color: #385B63;
}
.flex-container.color-tone-g .flex-item:nth-of-type(8) {
background-color: #384E5D;
}
.flex-container.color-tone-g .flex-item:nth-of-type(9) {
background-color: #384158;
}
.flex-container.color-tone-g .flex-item:nth-of-type(10) {
background-color: #3F2F50;
}
.flex-container.color-tone-g .flex-item:nth-of-type(11) {
background-color: #493753;
}
.flex-container.color-tone-g .flex-item:nth-of-type(12) {
background-color: #5A3A54;
}
/* ダークグレイッシュトーン */
.flex-container.color-tone-dkg .flex-item:nth-of-type(1) {
background-color: #3A2C2E;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(2) {
background-color: #3A2C2A;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(3) {
background-color: #463B34;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(4) {
background-color: #46402C;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(5) {
background-color: #3E3F31;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(6) {
background-color: #24342D;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(7) {
background-color: #253532;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(8) {
background-color: #283539;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(9) {
background-color: #222831;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(10) {
background-color: #282430;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(11) {
background-color: #2E2A31;
}
.flex-container.color-tone-dkg .flex-item:nth-of-type(12) {
background-color: #3A2D31;
}

/** クリップボードコピー **/
.copy-value {
  cursor: pointer;
  position: relative;
}
 
/* Tooltip */
.tooltip::after {
    content: 'Copied!';
background: #444;
    display: inline-block;
    color: #fff;
    border-radius: .4rem;
    position: absolute;
    left: 50%;
bottom: .8rem;
    transform: translate(-50%, 0);
    font-size: .75rem;
    padding: 4px 10px 6px 10px;
    animation: fade-tooltip .5s 1s 1 forwards;
}

/*** 彩度 ***/
.flex-container.color-chroma {
width: 50%;
margin: auto;
flex-direction: row-reverse;
}
.flex-container.color-chroma .flex-item {
width: 9%;
height: 50px;
margin: 10px 0;
}
.flex-container.color-chroma .flex-item:nth-of-type(1) {
background-color: #e50039;
}
.flex-container.color-chroma .flex-item:nth-of-type(2) {
background-color: #de2c42;
}
.flex-container.color-chroma .flex-item:nth-of-type(3) {
background-color: #d34e4f;
}
.flex-container.color-chroma .flex-item:nth-of-type(4) {
background-color: #c9605c;
}
.flex-container.color-chroma .flex-item:nth-of-type(5) {
background-color: #c06c62;
}
.flex-container.color-chroma .flex-item:nth-of-type(6) {
background-color: #b7776e;
}
.flex-container.color-chroma .flex-item:nth-of-type(7) {
background-color: #ae7d76;
}
.flex-container.color-chroma .flex-item:nth-of-type(8) {
background-color: #a1827d;
}
.flex-container.color-chroma .flex-item:nth-of-type(9) {
background-color: #94817d;
}
.flex-container.color-chroma .flex-item:nth-of-type(10) {
background-color: #847f7b;
}
.flex-container.color-chroma .flex-item:nth-of-type(11) {
background-color: #797979;
}
.flex-container.color-chroma .flex-item:nth-of-type(12) {
background-color: #12a84e;
}
.flex-container.color-chroma .flex-item:nth-of-type(13) {
background-color: #29ad5a;
}
.flex-container.color-chroma .flex-item:nth-of-type(14) {
background-color: #55af65;
}
.flex-container.color-chroma .flex-item:nth-of-type(15) {
background-color: #6eb475;
}
.flex-container.color-chroma .flex-item:nth-of-type(16) {
background-color: #84b985;
}
.flex-container.color-chroma .flex-item:nth-of-type(17) {
background-color: #93bc90;
}
.flex-container.color-chroma .flex-item:nth-of-type(18) {
background-color: #a0bf9f;
}
.flex-container.color-chroma .flex-item:nth-of-type(19) {
background-color: #abc1aa;
}
.flex-container.color-chroma .flex-item:nth-of-type(20) {
background-color: #b4c2b3;
}
.flex-container.color-chroma .flex-item:nth-of-type(21) {
background-color: #bbc2bb;
}
.flex-container.color-chroma .flex-item:nth-of-type(22) {
background-color: #c2c2c4;
}
.flex-container.color-chroma .flex-item:nth-of-type(23) {
background-color: #004098;
}
.flex-container.color-chroma .flex-item:nth-of-type(24) {
background-color: #1f4898;
}
.flex-container.color-chroma .flex-item:nth-of-type(25) {
background-color: #375297;
}
.flex-container.color-chroma .flex-item:nth-of-type(26) {
background-color: #4f5a98;
}
.flex-container.color-chroma .flex-item:nth-of-type(27) {
background-color: #5b6296;
}
.flex-container.color-chroma .flex-item:nth-of-type(28) {
background-color: #666994;
}
.flex-container.color-chroma .flex-item:nth-of-type(29) {
background-color: #6b6f8c;
}
.flex-container.color-chroma .flex-item:nth-of-type(30) {
background-color: #6e6f84;
}
.flex-container.color-chroma .flex-item:nth-of-type(31) {
background-color: #6e6d7b;
}
.flex-container.color-chroma .flex-item:nth-of-type(32) {
background-color: #69686e;
}
.flex-container.color-chroma .flex-item:nth-of-type(33) {
background-color: #605e5f;
}
.flex-container.color-chroma .flex-item:nth-of-type(34) {
background-color: #6a1686;
}
.flex-container.color-chroma .flex-item:nth-of-type(35) {
background-color: #722b87;
}
.flex-container.color-chroma .flex-item:nth-of-type(36) {
background-color: #783e8a;
}
.flex-container.color-chroma .flex-item:nth-of-type(37) {
background-color: #784a8a;
}
.flex-container.color-chroma .flex-item:nth-of-type(38) {
background-color: #7e588b;
}
.flex-container.color-chroma .flex-item:nth-of-type(39) {
background-color: #7d6189;
}
.flex-container.color-chroma .flex-item:nth-of-type(40) {
background-color: #7c6784;
}
.flex-container.color-chroma .flex-item:nth-of-type(41) {
background-color: #76697d;
}
.flex-container.color-chroma .flex-item:nth-of-type(42) {
background-color: #716674;
}
.flex-container.color-chroma .flex-item:nth-of-type(43) {
background-color: #666167;
}
.flex-container.color-chroma .flex-item:nth-of-type(44) {
background-color: #5a5657;
}
/*** 明度 ***/
.flex-container.color-value {
width: 50%;
margin: auto;
flex-direction: row-reverse;
}
.flex-container.color-value .flex-item {
width: 10%;
height: 50px;
margin: 10px 0;
}
.flex-container.color-value .flex-item:nth-of-type(1) {
background-color: #b0dff9;
}
.flex-container.color-value .flex-item:nth-of-type(2) {
background-color: #2cbcf0;
}
.flex-container.color-value .flex-item:nth-of-type(3) {
background-color: #00a0ea;
}
.flex-container.color-value .flex-item:nth-of-type(4) {
background-color: #0097da;
}
.flex-container.color-value .flex-item:nth-of-type(5) {
background-color: #018dcb;
}
.flex-container.color-value .flex-item:nth-of-type(6) {
background-color: #0081ba;
}
.flex-container.color-value .flex-item:nth-of-type(7) {
background-color: #0076a8;
}
.flex-container.color-value .flex-item:nth-of-type(8) {
background-color: #006897;
}
.flex-container.color-value .flex-item:nth-of-type(9) {
background-color: #005981;
}
.flex-container.color-value .flex-item:nth-of-type(10) {
background-color: #00496c;
}
.flex-container.color-value .flex-item:nth-of-type(11) {
background-color: #fce2ed;
}
.flex-container.color-value .flex-item:nth-of-type(12) {
background-color: #f6c0d7;
}
.flex-container.color-value .flex-item:nth-of-type(13) {
background-color: #f29cc1;
}
.flex-container.color-value .flex-item:nth-of-type(14) {
background-color: #ed72a8;
}
.flex-container.color-value .flex-item:nth-of-type(15) {
background-color: #e84191;
}
.flex-container.color-value .flex-item:nth-of-type(16) {
background-color: #e5007f;
}
.flex-container.color-value .flex-item:nth-of-type(17) {
background-color: #d40176;
}
.flex-container.color-value .flex-item:nth-of-type(18) {
background-color: #c4006c;
}
.flex-container.color-value .flex-item:nth-of-type(19) {
background-color: #b40064;
}
.flex-container.color-value .flex-item:nth-of-type(20) {
background-color: #a3005b;
}
.flex-container.color-value .flex-item:nth-of-type(21) {
background-color: #fff100;
}
.flex-container.color-value .flex-item:nth-of-type(22) {
background-color: #f0e100;
}
.flex-container.color-value .flex-item:nth-of-type(23) {
background-color: #e0d000;
}
.flex-container.color-value .flex-item:nth-of-type(24) {
background-color: #cbbe00;
}
.flex-container.color-value .flex-item:nth-of-type(25) {
background-color: #b7ab01;
}
.flex-container.color-value .flex-item:nth-of-type(26) {
background-color: #a19600;
}
.flex-container.color-value .flex-item:nth-of-type(27) {
background-color: #898000;
}
.flex-container.color-value .flex-item:nth-of-type(28) {
background-color: #736b00;
}
.flex-container.color-value .flex-item:nth-of-type(29) {
background-color: #5a5201;
}
.flex-container.color-value .flex-item:nth-of-type(30) {
background-color: #393100;
}
.flex-container.color-value .flex-item:nth-of-type(31) {
background-color: #efefef;
}
.flex-container.color-value .flex-item:nth-of-type(32) {
background-color: #dddddd;
}
.flex-container.color-value .flex-item:nth-of-type(33) {
background-color: #c9c9cb;
}
.flex-container.color-value .flex-item:nth-of-type(34) {
background-color: #b6b6b6;
}
.flex-container.color-value .flex-item:nth-of-type(35) {
background-color: #a0a0a0;
}
.flex-container.color-value .flex-item:nth-of-type(36) {
background-color: #898989;
}
.flex-container.color-value .flex-item:nth-of-type(37) {
background-color: #727071;
}
.flex-container.color-value .flex-item:nth-of-type(38) {
background-color: #5a5657;
}
.flex-container.color-value .flex-item:nth-of-type(39) {
background-color: #383735;
}
.flex-container.color-value .flex-item:nth-of-type(40) {
background-color: #000000;
}
/*** 色相、補色 ***/
.circle-container.color-hue .circle-item:nth-of-type(8),
.circle-container.color-complementary .circle-item:nth-of-type(8) {
background-color: #e5007f;
}
.circle-container.color-hue .circle-item:nth-of-type(9),
.circle-container.color-complementary .circle-item:nth-of-type(9) {
background-color: #e50150;
}
.circle-container.color-hue .circle-item:nth-of-type(10),
.circle-container.color-complementary .circle-item:nth-of-type(10) {
background-color: #e70012;
}
.circle-container.color-hue .circle-item:nth-of-type(11),
.circle-container.color-complementary .circle-item:nth-of-type(11) {
background-color: #f39801;
}
.circle-container.color-hue .circle-item:nth-of-type(12),
.circle-container.color-complementary .circle-item:nth-of-type(12) {
background-color: #fff100;
}
.circle-container.color-hue .circle-item:nth-of-type(1),
.circle-container.color-complementary .circle-item:nth-of-type(1) {
background-color: #8fc320;
}
.circle-container.color-hue .circle-item:nth-of-type(2),
.circle-container.color-complementary .circle-item:nth-of-type(2) {
background-color: #009a44;
}
.circle-container.color-hue .circle-item:nth-of-type(3),
.circle-container.color-complementary .circle-item:nth-of-type(3) {
background-color: #019e97;
}
.circle-container.color-hue .circle-item:nth-of-type(4),
.circle-container.color-complementary .circle-item:nth-of-type(4) {
background-color: #00a0ea;
}
.circle-container.color-hue .circle-item:nth-of-type(5),
.circle-container.color-complementary .circle-item:nth-of-type(5) {
background-color: #0168b7;
}
.circle-container.color-hue .circle-item:nth-of-type(6),
.circle-container.color-complementary .circle-item:nth-of-type(6) {
background-color: #1d2089;
}
.circle-container.color-hue .circle-item:nth-of-type(7),
.circle-container.color-complementary .circle-item:nth-of-type(7) {
background-color: #920784;
}
.circle-container.color-hue,
.circle-container.color-complementary {
width: 300px;
height: 300px;
}
.circle-container.color-hue .title {
font-size: 200%;
line-height: 110%;
}
.circle-container.color-hue .circle-item,
.circle-container.color-complementary .circle-item {
width: 50px;
height: 50px;
}
.circle-container.color-hue .circle-item span,
.circle-container.color-complementary .circle-item span {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff;
font-size: 11px;
text-align: center;
line-height: 110%;
}
.circle-container.color-hue .circle-item:nth-of-type(12) span,
.circle-container.color-complementary .circle-item:nth-of-type(12) span {
color: #444;
}
/*** 補色 ***/
.circle-container.color-complementary .title {
font-size: 200%;
line-height: 110%;
/*text-shadow: white 1px 1px 0px, white -1px 1px 0px,
             white 1px -1px 0px, white -1px -1px 0px;*/
}
.circle-container.color-complementary .title::before,
.circle-container.color-complementary .title::after {
font-family: "Font Awesome 5 Free";
content: "\f0b2";
font-weight: 900;
position: absolute;
font-size: 400%;
top: 0;
left: 0;
right: 0;
z-index: -1;
color: #ccc;
}
.circle-container.color-complementary .title::before {
transform: translateY(130px);
text-shadow: white 1px 1px 0px, white -1px 1px 0px,
             white 1px -1px 0px, white -1px -1px 0px;
}
.circle-container.color-complementary .title::after {
transform: translateY(130px) rotate(45deg);
text-shadow: white 1px 1px 0px, white -1px 1px 0px,
             white 1px -1px 0px, white -1px -1px 0px;
}
/*** 類似色 ***/
.circle-container.color-similar .circle-item:nth-of-type(16) {
transform: rotate(-45deg);
}
.circle-container.color-similar .circle-item:nth-of-type(17) {
background-color: #e50150;
}
.circle-container.color-similar .circle-item:nth-of-type(18) {
transform: rotate(-15deg);
}
.circle-container.color-similar .circle-item:nth-of-type(19) {
background-color: #e70012;
}
.circle-container.color-similar .circle-item:nth-of-type(20) {
transform: rotate(15deg);
}
.circle-container.color-similar .circle-item:nth-of-type(21) {
background-color: #f39801;
}
.circle-container.color-similar .circle-item:nth-of-type(22) {
transform: rotate(45deg);
}
.circle-container.color-similar .circle-item:nth-of-type(23) {
background-color: #fff100;
}
.circle-container.color-similar .circle-item:nth-of-type(24) {
transform: rotate(75deg);
}
.circle-container.color-similar .circle-item:nth-of-type(1) {
background-color: #8fc320;
}
.circle-container.color-similar .circle-item:nth-of-type(2) {
transform: rotate(105deg);
}
.circle-container.color-similar .circle-item:nth-of-type(3) {
background-color: #009a44;
}
.circle-container.color-similar .circle-item:nth-of-type(4) {
transform: rotate(135deg);
}
.circle-container.color-similar .circle-item:nth-of-type(5) {
background-color: #019e97;
}
.circle-container.color-similar .circle-item:nth-of-type(6) {
transform: rotate(165deg);
}
.circle-container.color-similar .circle-item:nth-of-type(7) {
background-color: #00a0ea;
}
.circle-container.color-similar .circle-item:nth-of-type(8) {
transform: rotate(-165deg);
}
.circle-container.color-similar .circle-item:nth-of-type(9) {
background-color: #0168b7;
}
.circle-container.color-similar .circle-item:nth-of-type(10) {
transform: rotate(-135deg);
}
.circle-container.color-similar .circle-item:nth-of-type(11) {
background-color: #1d2089;
}
.circle-container.color-similar .circle-item:nth-of-type(12) {
transform: rotate(-105deg);
}
.circle-container.color-similar .circle-item:nth-of-type(13) {
background-color: #920784;
}
.circle-container.color-similar .circle-item:nth-of-type(14) {
transform: rotate(-75deg);
}
.circle-container.color-similar .circle-item:nth-of-type(15) {
background-color: #e5007f;
}
.circle-container.color-similar .title {
font-size: 200%;
line-height: 110%;
}
.circle-container.color-similar .circle-item span {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-align: center;
}
.circle-container.color-similar .circle-item span:not(.arrow) {
color: #fff;
font-size: 11px;
line-height: 110%;
}
.circle-container.color-similar .circle-item span.arrow {
}
.circle-container.color-similar .circle-item:nth-of-type(23) span:not(.arrow) {
color: #444;
}
/*** 進出・後退色 ***/
.circle-container.color-advance-reverse .circle-item {
background-color: #fff;
}

.circle-container.color-neutral .circle-item:nth-of-type(8) {
background-color: #e5007f;
}
.circle-container.color-neutral .circle-item:nth-of-type(9) {
background-color: #e50150;
}
.circle-container.color-warm .circle-item:nth-of-type(10) {
background-color: #e70012;
}
.circle-container.color-warm .circle-item:nth-of-type(11) {
background-color: #f39801;
}
.circle-container.color-warm .circle-item:nth-of-type(12) {
background-color: #fff100;
}
.circle-container.color-neutral .circle-item:nth-of-type(1) {
background-color: #8fc320;
}
.circle-container.color-neutral .circle-item:nth-of-type(2) {
background-color: #009a44;
}
.circle-container.color-neutral .circle-item:nth-of-type(3) {
background-color: #019e97;
}
.circle-container.color-cold .circle-item:nth-of-type(4) {
background-color: #00a0ea;
}
.circle-container.color-cold .circle-item:nth-of-type(5) {
background-color: #0168b7;
}
.circle-container.color-cold .circle-item:nth-of-type(6) {
background-color: #1d2089;
}
.circle-container.color-neutral .circle-item:nth-of-type(7) {
background-color: #920784;
}
.circle-container.color-warm,
.circle-container.color-cold,
.circle-container.color-neutral {
width: 300px;
height: 300px;
}
.circle-container.color-warm .title,
.circle-container.color-cold .title,
.circle-container.color-neutral .title {
font-size: 200%;
line-height: 110%;
}
.circle-container.color-warm .circle-item,
.circle-container.color-cold .circle-item,
.circle-container.color-neutral .circle-item {
width: 50px;
height: 50px;
}
.circle-container.color-warm .circle-item span,
.circle-container.color-cold .circle-item span,
.circle-container.color-neutral .circle-item span {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #fff;
font-size: 11px;
text-align: center;
line-height: 110%;
}
.circle-container.color-warm .circle-item:nth-of-type(12) span {
color: #444;
}
.flex-container.color-advance-reverse {
width: 50%;
margin: auto;
}
.flex-container.color-advance-reverse .flex-item {
width: 50%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-container.color-advance-reverse .flex-item div {
width: 50%;
height: 50px;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(1) {
background-color: #1b2d5d;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(2) {
background-color: #fff100;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(3) {
background-color: #1d2089;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(4) {
background-color: #f39801;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(1) div {
background-color: #fff100;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(2) div {
background-color: #0168B7;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(3) div {
background-color: #00a0ea;
}
.flex-container.color-advance-reverse .flex-item:nth-of-type(4) div {
background-color: #e70012;
}
/*** 膨張・収縮色 ***/
.flex-container.color-expansion-contraction {
width: 50%;
margin: auto;
}
.flex-container.color-expansion-contraction .flex-item {
width: 50%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-container.color-expansion-contraction .flex-item div {
width: 50%;
height: 50px;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(1) {
background-color: #000000;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(2) {
background-color: #fff;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(3) {
background-color: #1d2089;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(4) {
background-color: #fff100;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(1) div {
background-color: #fff;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(2) div {
background-color: #000;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(3) div {
background-color: #fff100;
}
.flex-container.color-expansion-contraction .flex-item:nth-of-type(4) div {
background-color: #1d2089;
}
/*** 識別性 ***/
.flex-container.color-identity {
width: 50%;
margin: auto;
}
.flex-container.color-identity .flex-item {
width: 33.33333333%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-container.color-identity .flex-item div {
width: 50px;
height: 50px;
border-radius: 50%
}
.flex-container.color-identity .flex-item:nth-of-type(1) {
background-color: #000000;
}
.flex-container.color-identity .flex-item:nth-of-type(2) {
background-color: #000000;
}
.flex-container.color-identity .flex-item:nth-of-type(3) {
background-color: #000000;
}
.flex-container.color-identity .flex-item:nth-of-type(4) {
background-color: #3d7550;
}
.flex-container.color-identity .flex-item:nth-of-type(5) {
background-color: #3d7550;
}
.flex-container.color-identity .flex-item:nth-of-type(6) {
background-color: #3d7550;
}
.flex-container.color-identity .flex-item:nth-of-type(1) div {
background-color: #019e97;
}
.flex-container.color-identity .flex-item:nth-of-type(2) div {
background-color: #fff100;
}
.flex-container.color-identity .flex-item:nth-of-type(3) div {
background-color: #e70012;
}
.flex-container.color-identity .flex-item:nth-of-type(4) div {
background-color: #086763;
}
.flex-container.color-identity .flex-item:nth-of-type(5) div {
background-color: #84792a;
}
.flex-container.color-identity .flex-item:nth-of-type(6) div {
background-color: #8d553e;
}
/*** 視認性 ***/
.flex-container.color-visibility {
width: 50%;
margin: auto;
}
.flex-container.color-visibility .flex-item {
width: 50%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-container.color-visibility .flex-item div {
width: 100%;
height: 100%;
/*border: solid 1px #fff;
box-sizing: border-box;*/
display: flex;
align-items: center;
justify-content: center;
font-size: 400%;
font-weight: bold;
}
.flex-container.color-visibility .flex-item div {
}
.flex-container.color-visibility .flex-item:nth-of-type(1) {
background-color: #fff;
}
.flex-container.color-visibility .flex-item:nth-of-type(2) {
background-color: #fff;
}
.flex-container.color-visibility .flex-item:nth-of-type(3) {
background-color: #fff;
}
.flex-container.color-visibility .flex-item:nth-of-type(4) {
background-color: #fff;
}
.flex-container.color-visibility .flex-item:nth-of-type(1) div {
background-color: #000;
color: #373634;
}
.flex-container.color-visibility .flex-item:nth-of-type(2) div {
background-color: #000;
color: #fff;
}
.flex-container.color-visibility .flex-item:nth-of-type(3) div {
background-color: #000;
color: #fff100;
}
.flex-container.color-visibility .flex-item:nth-of-type(4) div {
background-color: #000;
color: #e70012;
}
/*** 誘目性 ***/
.flex-container.color-attention {
width: 50%;
margin: auto;
}
.flex-container.color-attention .flex-item {
width: 50%;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
.flex-container.color-attention .flex-item div {
width: 50px;
height: 50px;
border-radius: 50%
}
.flex-container.color-attention .flex-item:nth-of-type(1) {
background-color: #898989;
}
.flex-container.color-attention .flex-item:nth-of-type(2) {
background-color: #898989;
}
.flex-container.color-attention .flex-item:nth-of-type(3) {
background-color: #898989;
}
.flex-container.color-attention .flex-item:nth-of-type(4) {
background-color: #898989;
}
.flex-container.color-attention .flex-item:nth-of-type(1) div {
background-color: #000000;
}
.flex-container.color-attention .flex-item:nth-of-type(2) div {
background-color: #0b877f;
}
.flex-container.color-attention .flex-item:nth-of-type(3) div {
background-color: #fff100;
}
.flex-container.color-attention .flex-item:nth-of-type(4) div {
background-color: #d8c312;
}
/*** 三原色 ***/
.postid-4819 img {
/*width: 50%;
height: auto;*/
}
/*** デジタル画像のドキュメントサイズ ***/
.flex-container.pixel-container {
align-items: start;
}
.flex-container.pixel-container > .flex-item {
margin: 10px auto;
width: 33.333333%;
}
.flex-container.resolution-difference > .flex-item {
margin: 10px;
}
.flex-container.raster-expansion > .flex-item {
margin: 10px;
}
.flex-container.pixel-container > .flex-item .title,
.flex-container.pixel-container > .flex-item .description,
.flex-container.resolution-difference > .flex-item .title,
.flex-container.raster-expansion > .flex-item .title {
line-height: 120%;
margin: 10px auto;
}
.flex-container.pixel-container > .flex-item .title {
text-align: center;
}
.flex-container.pixel-container > .flex-item .description {
text-align: left;
width: 320px;
}
.flex-container.pixel-wrap {
width: 288px;
margin: auto;
}
.flex-container.pixel-wrap .flex-item {
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 6px;
background-color: #00ff00;
color: #fff;
}
.flex-container.pixel-wrap .flex-item.odd:nth-of-type(odd),
.flex-container.pixel-wrap .flex-item.even:nth-of-type(even) {
background-color: #0000ff;
}

.flex-container#pixelWrap16L {
width: 320px;
}
.flex-container#pixelWrap16L .flex-item {
width: 20px;
height: 20px;
font-size: 16px;
}
.flex-container.pixel-wrap-16 {
width: 240px;
}
.flex-container.pixel-wrap-16 .flex-item {
width: 15px;
height: 15px;
font-size: 12px;
}
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(19),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(20),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(21),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(22),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(34),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(39),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(49),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(56),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(65),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(72),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(81),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(88),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(97),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(104),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(114),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(119),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(131),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(132),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(133),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(134),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(27),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(28),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(29),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(30),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(42),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(47),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(57),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(64),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(73),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(80),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(89),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(96),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(105),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(112),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(122),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(127),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(139),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(140),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(141),
.flex-container.pixel-wrap.pixel-wrap-16 .flex-item:nth-of-type(142),

.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(35),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(36),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(37),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(38),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(43),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(44),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(45),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(46),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(51),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(52),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(53),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(54),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(59),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(60),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(61),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(62),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(66),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(71),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(74),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(79),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(82),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(87),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(90),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(95),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(97),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(104),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(105),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(112),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(113),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(120),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(121),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(128),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(129),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(136),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(137),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(144),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(145),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(152),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(153),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(160),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(161),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(168),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(169),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(176),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(177),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(184),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(185),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(192),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(193),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(200),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(201),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(208),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(209),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(216),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(217),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(224),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(226),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(231),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(234),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(239),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(242),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(247),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(250),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(255),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(259),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(260),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(261),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(262),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(267),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(268),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(269),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(270),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(275),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(276),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(277),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(278),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(283),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(284),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(285),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(286),

.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(323),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(324),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(325),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(326),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(331),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(332),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(333),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(334),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(339),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(340),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(341),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(342),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(347),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(348),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(349),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(350),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(354),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(359),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(362),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(367),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(370),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(375),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(378),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(383),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(385),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(392),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(393),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(400),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(401),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(408),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(409),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(416),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(417),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(424),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(425),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(432),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(433),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(440),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(441),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(448),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(449),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(456),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(457),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(464),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(465),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(472),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(473),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(480),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(481),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(488),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(489),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(496),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(497),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(504),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(505),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(512),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(514),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(519),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(522),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(527),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(530),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(535),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(538),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(543),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(547),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(548),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(549),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(550),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(555),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(556),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(557),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(558),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(563),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(564),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(565),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(566),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(571),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(572),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(573),
.flex-container.pixel-wrap.pixel-wrap-32 .flex-item:nth-of-type(574) {
background-color: #ff0000;
}
.flex-container.pixel-wrap-32 {
width: 240px;
}
.flex-container.pixel-wrap-32 .flex-item {
width: 7.5px;
height: 7.5px;
}
/*** デジタル画像の種類 ***/
.flex-container.imagetype {
width: 100%;
height: auto;
}
.flex-container.imagetype .flex-item {
display: flex;
width: 50%;
height: auto;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 10px auto;
}
.flex-container.imagetype .flex-item .title {
width: 100%;
margin: 0;
}
.flex-container.imagetype .flex-item .title.bottom {
}
.flex-container.imagetype .flex-item .img50 {
display: block;
width: 50px;
height: 50px;
}
.flex-container.imagetype .flex-item .description {
width: 70px;
line-height: 110%;
}
.flex-container.imagetype .flex-item .description span {
font-size: 11px;
}
.flex-container.imagetype .flex-item .img200 {
display: block;
width: 200px;
height: 200px;
}
/*** ピクセル解像度相互変換 ***/
.pixel-cm-conversion .your-size-vertical input,
.pixel-cm-conversion .your-size-side input {
width: 6em;
}
.pixel-cm-conversion .your-size-unit select,
.pixel-cm-conversion .your-data-dpi input {
width: 5em;
}
.pixel-cm-conversion .hide {
display: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1090px以下*/
@media screen and (max-width: 1090px){
 /*** トップ ***/
 /*.home.page .flex-container:not(.create-site) .flex-item {
 width: 48%;
 }*/
}
/*1023px以下*/
@media screen and (max-width: 1023px){
 /*###### トップページ ######*/
 .home.page .flex-container.menu .flex-item .item-title {
 font-size: 100%;
 }
 .home.page .flex-container.menu .flex-item .item-description {
 /*font-size: 80%;
 position: static;
 display: block;
 padding-top: 1em;*/
 }
}

/*834px以下*/
@media screen and (max-width: 834px){
 /*###### トップページ ######*/
 .home.page .flex-container.menu > .flex-item {
 width: 48%;
 }
 .home.page .flex-container.menu > .flex-item > a:before {
 /*font-size: 200%;*/
 font-size: 500%;
 }
 .home.page .flex-container.menu .flex-item .item-title {
 font-size: 120%;
 }
 .home.page .flex-container.menu .flex-item .item-description {
 /*font-size: 90%;
 position: absolute;*/
 }
 
 body.create-web-design-fee .flex-container .flex-item {
 width: 48%;
 }
 body.create-web-design-fee .flex-container .flex-item:last-child {
 width: 100%;
 }
 body.create-web-design-fee .flex-container.option > .flex-item:nth-of-type(3),
 body.create-web-design-fee .flex-container.option dd .flex-item {
 width: 100%;
 }
 /*** アピールエリア ***/
 #appeal,
 .appeal .appeal-in {
 min-height: 400px;
 }
 /*** Web制作 ***/
 .flex-container.create-site .flex-item {
 width: 48%;
 }
}
/*768px以下*/
@media screen and (max-width: 768px){
 /*###### トップページ ######*/
 .home.page .flex-container.menu > .flex-item {
 width: 48%;
 }
 /*.home.page .flex-container:not(.create-site) .flex-item {
 width: 90%;
 }
 .home.page .flex-container:not(.create-site) .flex-item a:before {
 border-width: 6em;
 }
 .home.page .flex-container:not(.create-site) .flex-item:hover a:before {
 border-width: 2em;
 }
 .home.page .flex-container:not(.create-site) .flex-item .item-title {
 font-size: 150%;
 }
 .home.page .flex-container:not(.create-site) .flex-item .item-description {
 font-size: 100%;
 }*/
}
/*640px以下*/
@media screen and (max-width: 640px){
 /*###### トップページ ######*/
 .home.page .flex-container.menu .flex-item .item-description {
 /*position: static;*/
 }
}
/*599px以下*/
@media screen and (max-width: 599px){
 /*** トップ ***/
 .home.page .flex-container:not(.create-site) .flex-item {
 width: 48%;
 }
 .home.page .flex-container:not(.create-site) .flex-item a:before {
 border-width: 3em;
 }
 .home.page .flex-container:not(.create-site) .flex-item:hover a:before {
 border-width: 1em;
 }
 .home.page .flex-container:not(.create-site) .flex-item .item-title {
 /*font-size: 100%;
 margin-bottom: 1.5em;*/
 }
}

/*480px以下*/
@media screen and (max-width: 480px){
 /*###### トップページ ######*/
 .home.page .flex-container.menu > .flex-item {
 width: 98%;
 /*height: calc(100vw * 0.5);*/
 }
 .home.page .flex-container.menu > .flex-item img {
 /*transform: translateY(-25%);*/
 }
 .home.page .flex-container.menu .flex-item .item-title {
 /*font-size: 100%;*/
 }
 .home.page .flex-container.menu .flex-item .item-description {
 /*bottom: calc(100vw * 0.4);
 background-color: transparent;
 text-shadow: -1px 1px 4px rgba(255,255,255,1.0),
             1px 1px 4px rgba(255,255,255,1.0),
             1px -1px 4px rgba(255,255,255,1.0),
             -1px -1px 4px rgba(255,255,255,1.0),
             -4px 0px 6px rgba(255,255,255,0.7),
             0px 4px 6px rgba(255,255,255,0.7),
             4px 0px 6px rgba(255,255,255,0.7),
             0px -4px 6px rgba(255,255,255,0.7);*/
 font-size: 100%;
 /*position: absolute;*/
 }
 .home.page .flex-container.menu .flex-item a:hover .item-description {
 /*color: initial;
 background-color: transparent;*/
 }
 .home.page .flex-container.menu > .flex-item > a:before {
 font-size: 400%;
 top: -25%;
 }
 /*.home.page .flex-container:not(.create-site) .flex-item .item-title {
 font-size: 110%;
 }
 .home.page .flex-container:not(.create-site) .flex-item .item-description {
 font-size: 80%;
 }
 .flex-container.create-site .flex-item {
 width: 90%;
 }*/
 /*** 問い合わせリンクボタン ***/
 div.request-wrap {
 font-size: 150%;
 }
 a.inquiry-button {
 font-weight: 700;
 letter-spacing: 0em;
 font-size: 1.0rem;
 padding: 1.0rem 2.2rem 1.2rem 1.0rem;
 }
 a.inquiry-button i.fa {
 margin-right: 0.5rem;
 }
/*** リスト ***/
 .tokusyoho .dl-single-line > dt,
 dl#Inquiry dt,
 #Inquiry dl dt {
 float: none;
 width: 100%;
 text-align: left;
 }
 .tokusyoho .dl-single-line dd,
 dl#Inquiry dd,
 #Inquiry dl dd {
 margin-left: 0em !important;
 }
 /*###### 管理人プロフィール ######*/
 .about .dl-single-line dt:not(.name) {
 float: none;
 width: 100%;
 }
 .about .dl-single-line dd:not(.name) {
 margin-left: 0em !important;
 }
}