@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;
}
/*###### 制作の流れ カード式（Web制作ページ） ######*/
.web-flow-steps {
list-style: none;
padding: 0;
margin: 1.5em 0 2em;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
.web-flow-steps li {
background: #ffffff;
border: 2px solid #00558F;
border-radius: 8px;
padding: 1em 1em 1em 1em;
display: flex;
flex-direction: column;
gap: 0.4em;
}
.web-flow-num {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2em;
height: 2em;
background: #00558F;
color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 0.9em;
flex-shrink: 0;
}
.web-flow-steps li strong {
display: block;
color: #002d5e;
font-size: 1em;
margin: 0;
}
.web-flow-steps li p {
font-size: 0.85em;
margin: 0;
color: #444;
line-height: 1.6;
}
@media (max-width: 767px) {
.web-flow-steps {
grid-template-columns: 1fr;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.web-flow-steps {
grid-template-columns: repeat(2, 1fr);
}
}

/*###### 制作の流れ（893）2026-06-05 新デザイン統一 ######*/
/* --- 導入の3箇条（薄水色カード） --- */
.production-flow ul.flow-pre {
list-style: none;
margin: 24px auto 0;
padding-left: 0;
display: grid;
gap: 10px;
}
.production-flow ul.flow-pre li {
background-color: #e4f4fc;
border-left: 6px solid #00558F;
border-radius: 6px;
padding: .7em 1.1em;
margin-left: 0;
font-size: .95em;
}

/* --- 6ステップ：白カード＋ネイビー番号＋シェブロン連結 --- */
.production-flow ol.flow {
list-style: none;
padding-left: 0;
margin-top: 32px;
}
.production-flow ol.flow li {
position: relative;
background: #fff;
border: 1px solid #d4e8f5;
border-top: 4px solid var(--color-accent, #ECE038);
border-radius: 10px;
padding: 1.1em 1.4em 1.3em;
margin-bottom: 52px;
box-shadow: 0 3px 12px rgba(0,40,80,.08);
}
.production-flow ol.flow li:last-child {
margin-bottom: 1.5em;
}
.production-flow ol.flow li:not(:last-child):after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f078";
color: #00558F;
font-size: 1.5em;
position: absolute;
bottom: -44px;
left: 50%;
transform: translateX(-50%);
display: block;
line-height: 1;
}
.production-flow ol.flow li span.title {
display: inline-block;
vertical-align: middle;
padding-left: .1em;
font-weight: bold;
font-size: 1.15em;
color: #002d5e;
}
.production-flow ol.flow li:before {
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
width: 2em;
height: 2em;
background-color: #00558F;
border-radius: 50%;
color: #fff;
font-weight: bold;
margin-right: .6em;
}
.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: .9em 0 0;
}
.production-flow ol.flow li > dl > dt {
font-weight: bold;
color: #00558F;
margin-bottom: .4em;
}
/* 詳細項目（dt/dd） */
.production-flow ol.flow li dl dd {
margin-left: 0;
}
.production-flow ol.flow li dl dd dt {
position: relative;
border-left: 4px solid #9ecbe8;
padding-left: .6em;
margin-top: .8em;
font-weight: bold;
color: #002d5e;
}
.production-flow ol.flow li dl dd dd {
padding-left: .6em;
font-size: .92em;
line-height: 1.8;
color: #555;
}
@media (max-width: 767px) {
.production-flow ol.flow li { padding: 1em 1.1em 1.1em; }
.production-flow ol.flow li span.title { font-size: 1.05em; }
}
/*###### 料金 ######*/
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;
}
/* CF7 5.6+はラッパーがフィールド名classでなくdata-name属性のため、属性セレクタで指定（2026-06-10）
   旧 .your-postcode 等のclassセレクタは現行CF7では一切マッチしない */
#Inquiry dd [data-name="your-postcode"] input {
width: 9em;
}
#Inquiry dd [data-name="your-pref"] select {
width: 14em;
}
#Inquiry dd [data-name="your-tel"] input {
width: 12em;
}
#Inquiry dd [data-name="your-position"] input {
width: 16em;
}
#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: #00558F;
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: #003e6b;
box-shadow: 0 -3px 1px #84a1a8;
transform: translateY(3px);
}
p.submit input[type="submit"].wpcf7-submit:focus {
outline: 0;
background: #00558F;
}
/*** アコーディオンメニュー（プライバシーポリシー） ***/
.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;
}
/* CF7のwpautopがinput+labelを<p>で包み、上の隣接セレクタが成立しないための補完（2026-06-10） */
p:has(.acd-check:checked) + .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;
}
/* 法務3ページ（特商法・プライバシー・規約）：本文を控えめに（base18px→15px） */
.tokusyoho .entry-content,
.privacy-policy .entry-content,
.regulations .entry-content {
font-size: 15px;
}
/*###### 管理人プロフィール ######*/
.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: #ffffff !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.1) !important;
transition: top 0.3s ease, background 0.35s ease, box-shadow 0.35s ease;
}
.mobile-menu-buttons.solid {
background-color: rgba(255,255,255,0.97);
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
/* ハンバーガーメニューアニメーション */
.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: #002d5e;
}
.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: #002d5e;
}
.navi-menu-close-button,
.sidebar-menu-close-button {
color: #00558F
}
.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: #00558F;
}
.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: #00558F;
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;
}
/* モバイル: ロゴを左端に移動 */
.mobile-header-menu-buttons .logo-menu-button {
order: -1 !important;
justify-content: flex-start !important;
padding-left: 12px;
}
.mobile-header-menu-buttons .logo-menu-button .site-logo-image {
height: 32px;
width: auto;
margin: 0 !important;
}
/* ###### トップへ戻る ###### */
.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;
 }
}

/* ============================================================
   全面リニューアル用スタイル 2025
   カラー定数: Blue=#00558F  Yellow=#ECE038
   ============================================================ */

/* ---- 共通変数 ---- */
:root {
  --color-primary: #00558F;
  --color-accent:  #ECE038;
  --color-text:    #333;
  --color-bg-light: #f5f9fc;
  --color-border:  #c8dded;
  --radius:        12px;
}

/* ---- ページリード文 ---- */
.page-lead {
  font-size: 1.05em;
  line-height: 1.9;
  color: #444;
  margin-bottom: 2em;
  border-left: 4px solid var(--color-primary);
  padding-left: 1em;
}

/* ---- ヒーローセクション ---- */
.hero-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, #003d6b 100%);
  color: #fff;
  padding: 60px 20px;
  text-align: center;
  border-radius: var(--radius);
  margin-bottom: 2.5em;
}
.hero-title {
  font-size: clamp(1.4em, 3vw, 2em);
  font-weight: bold;
  margin-bottom: .5em;
  line-height: 1.4;
  color: #fff;
}
.hero-subtitle {
  font-size: 1em;
  opacity: .9;
  margin-bottom: 1.5em;
  line-height: 1.8;
}
.hero-cta-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: bold;
  font-size: 1.05em;
  padding: .8em 2em;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity .2s;
}
.hero-cta-btn:hover { opacity: .85; text-decoration: none; }

/* ---- セクション共通 ---- */
.section-services,
.section-features,
.section-flow-teaser,
.section-cta {
  margin-bottom: 3em;
}
.section-title {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-accent);
  padding-bottom: .3em;
  margin-bottom: 1em;
}
.section-lead {
  color: #555;
  margin-bottom: 1.5em;
}
.section-btn-wrap {
  text-align: center;
  margin-top: 1.5em;
}

/* ---- サービスカード ---- */
.service-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.service-card {
  flex: 1 1 calc(33% - 16px);
  min-width: 200px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.service-card:hover {
  box-shadow: 0 4px 16px rgba(0,85,143,.15);
  transform: translateY(-3px);
}
.service-card a {
  display: block;
  padding: 24px 20px;
  text-decoration: none;
  color: var(--color-text);
  height: 100%;
}
.service-icon {
  font-size: 2em;
  display: block;
  margin-bottom: .4em;
}
.service-card-title {
  font-size: 1em;
  font-weight: bold;
  color: var(--color-primary);
  margin: 0 0 .5em;
}
.service-card-desc {
  font-size: .88em;
  color: #555;
  line-height: 1.7;
  margin: 0 0 .6em;
}
.service-card-link {
  font-size: .82em;
  color: var(--color-primary);
  font-weight: bold;
}

/* ---- 強み・特徴リスト ---- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.feature-item {
  flex: 1 1 calc(33% - 16px);
  min-width: 220px;
  background: var(--color-bg-light);
  border-radius: var(--radius);
  padding: 20px;
}
.feature-item h3 {
  font-size: 1em;
  color: var(--color-primary);
  margin-bottom: .5em;
}
.feature-item p {
  font-size: .9em;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* ---- 制作の流れ（teaser） ---- */
.flow-teaser-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  list-style: none;
  counter-reset: flow-counter;
}
.flow-teaser-list li {
  flex: 1 1 auto;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 14px 10px;
  font-size: .9em;
  font-weight: bold;
  position: relative;
}
.flow-teaser-list li:not(:last-child)::after {
  content: '▶';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .8em;
  z-index: 1;
  color: var(--color-accent);
}

/* ---- CTA セクション ---- */
.section-cta {
  background: var(--color-bg-light);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
}
.section-cta h2 {
  color: var(--color-primary);
  margin-bottom: .5em;
}

/* ---- CTA ボックス（本文内埋め込み用） ---- */
.cta-box {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
  margin: 2em 0;
}
.cta-box p {
  margin-bottom: .8em;
  font-size: 1em;
}
.cta-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-primary);
  font-weight: bold;
  padding: .7em 2em;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1em;
  transition: opacity .2s;
}
.cta-btn:hover { opacity: .85; text-decoration: none; color: var(--color-primary); }

/* ---- アウトラインボタン ---- */
.btn-outline {
  display: inline-block;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: bold;
  padding: .6em 1.8em;
  border-radius: 50px;
  text-decoration: none;
  font-size: .95em;
  transition: background .2s, color .2s;
}
.btn-outline:hover {
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
}

/* ---- 懸念事項リスト ---- */
.concern-list {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}
.concern-list li {
  margin-bottom: .5em;
  line-height: 1.7;
}
.concern-list li::marker { color: var(--color-primary); }

/* ---- サービス詳細リスト ---- */
.service-detail-list {
  list-style: none;
  padding: 0;
}
.service-detail-list > li {
  border-left: 4px solid var(--color-accent);
  padding: 14px 16px;
  margin-bottom: 1.2em;
  background: var(--color-bg-light);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.service-detail-list > li h3 {
  margin: 0 0 .4em;
  font-size: 1em;
  color: var(--color-primary);
}
.service-detail-list > li p {
  margin: 0;
  font-size: .9em;
  color: #555;
  line-height: 1.7;
}

/* ---- 制作の流れページ ---- */
.flow-steps { margin-bottom: 2em; }
.flow-step {
  border-left: 4px solid var(--color-primary);
  padding: 16px 20px;
  margin-bottom: 1.5em;
  background: var(--color-bg-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  position: relative;
}
.flow-step h3 {
  margin: 0 0 .5em;
  font-size: 1em;
  color: var(--color-primary);
}
.step-num {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: .75em;
  font-weight: bold;
  padding: .15em .6em;
  border-radius: 4px;
  margin-right: .5em;
  vertical-align: middle;
}

/* ---- 料金テーブル ---- */
.fee-note {
  background: #fffbea;
  border: 1px solid #e8d800;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 1.5em;
  font-size: .92em;
}
.fee-table-wrap {
  overflow-x: auto;
  margin-bottom: 2em;
}
.fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92em;
}
.fee-table th {
  background: var(--color-primary);
  color: #fff;
  padding: 10px 14px;
  text-align: left;
}
.fee-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.fee-table tr:nth-child(even) td { background: var(--color-bg-light); }
.fee-price { text-align: right; white-space: nowrap; }
.fee-amount {
  font-weight: bold;
  color: var(--color-primary);
  font-size: 1.05em;
}
.fee-free {
  font-weight: bold;
  color: #c00;
  font-size: 1.05em;
}
.fee-note-inline {
  font-size: .82em;
  color: #777;
  display: block;
}
.fee-caution {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 1.5em;
  font-size: .9em;
}
.fee-caution h3 {
  color: var(--color-primary);
  margin-bottom: .5em;
}
.fee-caution ul { padding-left: 1.5em; margin: 0; }
.fee-caution li { margin-bottom: .4em; }

/* ---- プロフィールページ ---- */
.profile-img {
  border-radius: 50%;
  border: 4px solid var(--color-primary);
  margin-bottom: 1.5em;
}
.profile-list {
  margin-bottom: 1.5em;
}
.profile-list dt {
  font-weight: bold;
  color: var(--color-primary);
  margin-top: 1em;
}
.profile-list dd {
  margin-left: 0;
  padding-left: 1em;
  color: #555;
  line-height: 1.7;
}
.about-request-list {
  list-style: none;
  padding: 0;
}
.about-request-list li {
  padding: .6em 1em .6em 2.2em;
  margin-bottom: .5em;
  background: var(--color-bg-light);
  border-radius: 6px;
  position: relative;
  font-size: .93em;
  color: #444;
}
.about-request-list li::before {
  content: '✓';
  position: absolute;
  left: .8em;
  color: var(--color-primary);
  font-weight: bold;
}

/* ============================================================
   レスポンシブ調整
   ============================================================ */
@media (max-width: 768px) {
  .hero-section { padding: 40px 16px; }
  .hero-title { font-size: 1.3em; }
  .service-card { flex: 1 1 calc(50% - 16px); }
  .feature-item { flex: 1 1 100%; }
  .flow-teaser-list { flex-direction: column; }
  .flow-teaser-list li::after { display: none; }
}
@media (max-width: 480px) {
  .service-card { flex: 1 1 100%; }
}

/* ============================================================
   汎用ボタン
   ============================================================ */
.btn-primary,
.btn-secondary {
  display: inline-block;
  font-weight: bold;
  font-size: 1em;
  padding: .75em 2em;
  border-radius: 50px;
  text-decoration: none;
  transition: opacity .2s, transform .15s;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-accent, #eeee22);
  color: var(--color-primary, #1e73be);
}
.btn-secondary {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.btn-primary:hover,
.btn-secondary:hover {
  opacity: .85;
  transform: translateY(-1px);
  text-decoration: none;
}
.hero-cta {
  display: flex;
  gap: 1em;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- CTAボックス ---- */
.cta-box {
  background: var(--color-primary, #1e73be);
  color: #fff;
  text-align: center;
  padding: 2.5em 1.5em;
  border-radius: var(--radius, 8px);
  margin: 2.5em 0;
}
.cta-box h2 { color: #fff; margin-bottom: .4em; }
.cta-box p  { opacity: .9; margin-bottom: 1.2em; }

/* ---- 料金テーブル補完 ---- */
.fee-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.fee-table th { background: var(--color-primary, #1e73be); color: #fff; padding: .6em .8em; text-align: left; }
.fee-table td { padding: .6em .8em; border-bottom: 1px solid #ddd; vertical-align: top; }
.fee-table tr:nth-child(even) td { background: #f5f9ff; }
.fee-note { font-size: .85em; color: #666; margin-top: -.5em; margin-bottom: 1.5em; }
.lead { font-size: 1.05em; border-left: 4px solid var(--color-accent, #eeee22); padding-left: 1em; margin-bottom: 2em; }

/* ---- プロフィールセクション ---- */
.profile-section { margin-bottom: 2em; }

/* ---- レスポンシブ補完 ---- */
@media (max-width: 768px) {
  .hero-cta { flex-direction: column; align-items: center; }
  .fee-table { font-size: .88em; }
  .fee-table th, .fee-table td { padding: .5em .6em; }
}

/* ###### 全ページ共通: ヘッダー・ナビ統一 ###### */
/* デスクトップヘッダー（ロゴ＋タグライン）非表示 */
#header { display: none !important; }

/* ナビロゴ画像サイズ（全ページ共通） */
.fp-nav-logo img { height: 36px; width: auto; }

/* キャンバスアニメーション: 全ページで非表示 */
canvas { display: none !important; }

/* ナビ: 白背景統一（フロントページは front-page.css で透明→白に上書き） */
.navi,
.navi.fixed {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}

/* ナビ内レイアウト: ロゴ左・メニュー右 */
@media (min-width: 1024px) {
  .navi .navi-in {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 24px !important;
    box-sizing: border-box;
  }
}

/* ナビリンク: 濃紺 */
.navi .navi-in .menu-header .menu-item > a {
  color: #002d5e !important;
}

/* サブメニュー: 白背景・角丸 */
.navi .navi-in .sub-menu {
  background: #fff !important;
  border: 1px solid rgba(0, 85, 143, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.navi .navi-in .sub-menu a { color: #002d5e !important; }

.navi .navi-in .sub-menu a:hover {
  background: #e4f4fc !important;
  color: #00558F !important;
}

/* モバイル: デスクトップナビを非表示（モバイルヘッダーに任せる） */
@media (max-width: 1023px) {
  .navi {
    display: none !important;
  }
  .fp-nav-logo,
  .fp-nav-logo.is-in-nav {
    display: none !important;
  }
}

/* フッター: 薄水色（ロゴ・文字色変更不要） */
#footer {
  background-color: #e4f4fc !important;
}

/* ###### グラフィックデザインページ (create-illustration-logo) ###### */
.create-illustration-logo .gl-lead {
  font-size: 1.05rem;
  line-height: 1.95;
  text-align: center;
  margin: 0 auto 3em;
  max-width: 680px;
}

.gl-services { margin: 0 0 3em; }

.gl-services-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.gl-services-card {
  background: #fff;
  border-radius: 10px;
  border-top: 4px solid #ECE038;
  padding: 40px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: transform 0.3s, box-shadow 0.3s;
}

.gl-services-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,85,143,0.14);
}

.gl-services-icon {
  font-size: 1.6rem;
  color: #00558F;
  margin-bottom: 16px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e4f4fc;
  border-radius: 50%;
}

.gl-services-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #002d5e;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.gl-services-desc {
  display: block;
  font-size: 0.82rem;
  color: #555;
  line-height: 1.7;
}

.gl-works {
  background: #e4f4fc;
  padding: 2.5em 2em;
  border-radius: 12px;
  margin-bottom: 2.5em;
}

.gl-works-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: center;
}

.gl-works-item {
  margin: 0;
  text-align: center;
  max-width: 240px;
  background: #e4f4fc;            /* 水色維持（帯と同色） */
  border-radius: 10px;
  padding: 20px;                 /* ← イラストと枠の内側余白 */
  box-shadow: 0 4px 16px rgba(0,40,80,0.12);  /* 枠＝ドロップシャドウ */
}

.gl-works-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.gl-works-item figcaption {
  font-size: 0.85rem;
  color: #555;
  margin-top: 12px;
}

.gl-pricing {
  border-left: 4px solid #ECE038;
  padding: 1.2em 1.5em;
  background: #f9f9f9;
  border-radius: 0 8px 8px 0;
  margin-bottom: 2.5em;
}

.gl-pricing p { margin: 0; line-height: 1.9; }

.gl-faq { margin: 0 0 2.5em; }
.gl-faq h2 { margin-bottom: 1em; }

.gl-cta { text-align: center; margin: 2.5em 0; }

.gl-cta-btn {
  display: inline-block;
  background: #00558F;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 16px 48px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.08em;
  transition: background 0.25s, transform 0.2s;
}

.gl-cta-btn i { margin-right: 0.5em; }

.gl-cta-btn:hover {
  background: #0068af;
  transform: translateY(-3px);
  color: #fff !important;
  text-decoration: none;
}

@media (max-width: 640px) {
  .gl-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gl-services-card { padding: 20px 10px 16px; }
  .gl-services-icon { font-size: 1.3rem; width: 44px; height: 44px; }
  .gl-works-item { max-width: 160px; }
}

/* Web制作ページ: 制作例グリッド — ロゴ高さを統一 */
.flex-container.create-site .flex-item a img:first-child {
  height: 40px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* ============================================================
   create-web-design（855）冒頭〜費用 デザイン改良 2026-06-03
   共有スコープ：.create-web-design（855）＋ .production-flow（893）2026-06-05
   ※ 893は855の子だが body class は create-web-design-child のため
     親スコープに入らない。.production-flow を併記して同デザインを流用
   ============================================================ */

/* --- セクション帯（白↔薄水色の交互・全幅フルブリード） --- */
.create-web-design .cwd-section,
.production-flow .cwd-section,
.create-movie-editing .cwd-section,
.about .cwd-section {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 48px calc(50vw - 50%);
}
.create-web-design .cwd-section.cwd-alt,
.production-flow .cwd-section.cwd-alt,
.create-movie-editing .cwd-section.cwd-alt,
.about .cwd-section.cwd-alt {
  background: #e4f4fc;
}
/* 帯の中身は本文幅に戻す */
.create-web-design .cwd-section > *,
.production-flow .cwd-section > *,
.create-movie-editing .cwd-section > *,
.about .cwd-section > * {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
/* セクション内CTAボタンの上余白（直上ボックスとの密着回避） */
.create-web-design .cwd-section .request-wrap,
.production-flow .cwd-section .request-wrap,
.create-movie-editing .cwd-section .request-wrap,
.about .cwd-section .request-wrap {
  margin-top: 32px;
}

/* --- h2 リデザイン（中央寄せ＋アクセント下線＋英字サブ） --- */
.create-web-design .entry-content h2,
.production-flow .entry-content h2,
.create-illustration-logo .entry-content h2,
.create-movie-editing .entry-content h2,
.create-web-design-fee .entry-content h2,
.about .entry-content h2,
body.contact .entry-content h2 {
  text-align: center;
  color: #002d5e;
  border: none;
  background: none;
  padding: 0;
  margin: 0 auto .4em;
}
.create-web-design .entry-content h2::after,
.production-flow .entry-content h2::after,
.create-illustration-logo .entry-content h2::after,
.create-movie-editing .entry-content h2::after,
.create-web-design-fee .entry-content h2::after,
.about .entry-content h2::after,
body.contact .entry-content h2::after {
  content: "";
  display: block;
  width: 48px;
  height: 4px;
  background: var(--color-accent, #ECE038);
  border-radius: 2px;
  margin: 14px auto 0;
}
/* 帯の外の独立h2（制作例・よくある質問）の上余白を確保 2026-06-04
   先頭の「制作の流れ」は直上の費用帯パディングで十分空くため ~h2 で除外 */
.create-web-design .entry-content > h2 ~ h2 {
  margin-top: 2.5em;
}
.create-web-design .cwd-h2sub,
.production-flow .cwd-h2sub,
.create-illustration-logo .cwd-h2sub,
.create-movie-editing .cwd-h2sub,
.create-web-design-fee .cwd-h2sub,
.about .cwd-h2sub,
body.contact .cwd-h2sub {
  display: block;
  font-size: .5em;
  letter-spacing: .15em;
  color: var(--color-primary, #00558F);
  font-weight: normal;
  margin-top: .4em;
}
.create-web-design .cwd-lead,
.production-flow .cwd-lead,
.create-movie-editing .cwd-lead,
.about .cwd-lead {
  text-align: center;
  max-width: 700px;
}

/* --- 3つの特徴：アイコン3カラムカード --- */
.create-web-design .cwd-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.create-web-design .cwd-feature-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px 20px 24px;
  text-align: center;
  border-top: 4px solid var(--color-accent, #ECE038);
  box-shadow: 0 3px 12px rgba(0,40,80,.08);
}
.create-web-design .cwd-feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e4f4fc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-web-design .cwd-feature-icon i {
  font-size: 26px;
  color: var(--color-primary, #00558F);
}
.create-web-design .cwd-feature-card h3 {
  color: #002d5e;
  font-size: 1.05em;
  margin: 0 0 .6em;
}
.create-web-design .cwd-feature-card p {
  font-size: .88em;
  color: #555;
  margin: 0;
  text-align: left;
  line-height: 1.8;
}

/* --- お困りごと：2カラム・アイコン付き --- */
.create-web-design .cwd-concern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 32px;
}
.create-web-design .cwd-concern-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0,40,80,.07);
}
.create-web-design .cwd-concern-item i {
  color: var(--color-primary, #00558F);
  font-size: 20px;
  flex-shrink: 0;
}
.create-web-design .cwd-concern-item span {
  font-size: .92em;
  line-height: 1.6;
}
.create-web-design .cwd-concern-wide {
  grid-column: 1 / -1;
}
.create-web-design .cwd-concern-after {
  text-align: center;
  max-width: 700px;
  margin: 28px auto 0;
  font-weight: bold;
  color: #002d5e;
}

/* --- 費用：ハイライトボックス --- */
.create-web-design .cwd-fee-highlight {
  background: linear-gradient(135deg, #00558F, #003d6b);
  color: #fff;
  border-radius: 10px;
  padding: 32px 28px;
  margin-top: 32px;
  text-align: center;
}
.create-web-design .cwd-fee-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  background: var(--color-accent, #ECE038);
  color: var(--color-primary, #00558F);
  font-weight: bold;
  font-size: 1.15em;
  padding: .5em 1.4em;
  border-radius: 50px;
  margin-bottom: 1em;
}
.create-web-design .cwd-fee-highlight p {
  margin: .5em auto;
  font-size: .95em;
  max-width: 640px;
  line-height: 1.9;
}
.create-web-design .cwd-fee-highlight .cwd-em {
  background: rgba(236,224,56,.28);
  padding: 0 .2em;
  border-radius: 3px;
  font-weight: bold;
}

/* --- レスポンシブ --- */
@media (max-width: 767px) {
  .create-web-design .cwd-feature-grid { grid-template-columns: 1fr; }
  .create-web-design .cwd-concern-grid { grid-template-columns: 1fr; }
  .create-web-design .cwd-section,
  .production-flow .cwd-section,
  .create-movie-editing .cwd-section,
  .about .cwd-section { padding: 36px calc(50vw - 50%); }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .create-web-design .cwd-feature-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   create-movie-editing（8162）動画編集・YouTube管理 2026-06-08
   共有 .cwd-* は上部で .create-movie-editing を併記済み。
   以下はこのページ固有のパーツ。
   ============================================================ */

/* --- 動画編集：2カラム作品カード（動画を見やすく本文幅より広げる） --- */
.create-movie-editing .cwd-section .cme-work-grid {
  max-width: 980px;
}
.create-movie-editing .cme-work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.create-movie-editing .cme-work {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  padding: 24px 22px 26px;
  box-shadow: 0 3px 14px rgba(0,40,80,.08);
}
.create-movie-editing .cme-work h3 {
  color: #002d5e;
  font-size: 1.1em;
  text-align: center;
  margin: 0 0 .8em;
}
/* 段落マージンは一旦リセット。flex-growは説明文（最後のp）だけに効かせ、
   動画の段落には効かせない（動画の上端位置をカード間で揃えるため） */
.create-movie-editing .cme-work > p { margin: 0; }
.create-movie-editing .cme-work > p:last-of-type {
  font-size: .9em;
  line-height: 1.9;
  color: #444;
  margin: 14px 0 0;
  flex-grow: 1;
}
/* 動画埋め込み：CocoonのレスポンシブPlayer（.video-container > .video > iframe）を
   尊重し、iframeのheight:100%は上書きしない。コンテナのみカードに最適化 */
.create-movie-editing .cme-work .video-container {
  max-width: 100%;
  margin: 0;
}
.create-movie-editing .cme-work .video {
  margin-top: 0;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0,40,80,.12);
}
/* CTAはカード下端に揃える */
.create-movie-editing .cme-work .request-wrap {
  margin: 18px 0 0;
}

/* --- ボタン共通：末尾シェブロンを除去し、アイコン＋テキストを中央寄せで均等配置 --- */
.create-movie-editing .page-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-size: 1.02rem;
  padding: .8rem 1.9rem;
  border-radius: 8px;
  line-height: 1.4;
}
.create-movie-editing .page-link-btn:before { content: none; }
.create-movie-editing .page-link-btn i.fa,
.create-movie-editing .page-link-btn i.fas { margin: 0; }
.create-movie-editing .page-link-btn .external-icon { display: none; }
/* 相談ボタン（カラーモディファイア無し）に背景色を付与 */
.create-movie-editing .request-wrap .page-link-btn:not(.youtube) {
  background-color: #00558F;
  color: #fff;
}
.create-movie-editing .request-wrap .page-link-btn:not(.youtube):hover {
  background-color: #00467a;
}

/* --- チャンネル運用・管理：カードグリッド --- */
.create-movie-editing .cme-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 32px;
}
/* wpautopが挿入する<br>はグリッドセルを食うので除外 */
.create-movie-editing .cme-channel-grid br { display: none; }
/* Cocoonが付与する外部リンクアイコンは冗長なので非表示 */
.create-movie-editing .cme-channel-card .external-icon { display: none; }
.create-movie-editing .cme-channel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  background: #fff;
  border-radius: 12px;
  padding: 26px 18px 22px;
  box-shadow: 0 3px 12px rgba(0,40,80,.08);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.create-movie-editing .cme-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,40,80,.16);
}
.create-movie-editing .cme-channel-card i {
  font-size: 40px;
  margin-bottom: 4px;
}
.create-movie-editing .cme-channel-card.yt i { color: #ff0000; }
.create-movie-editing .cme-channel-card.ig i {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.create-movie-editing .cme-ch-name {
  color: #002d5e;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.4;
}
.create-movie-editing .cme-ch-plat {
  font-size: .78em;
  letter-spacing: .08em;
  color: #888;
}

@media (max-width: 767px) {
  .create-movie-editing .cme-work-grid { grid-template-columns: 1fr; }
  .create-movie-editing .cme-channel-grid { grid-template-columns: 1fr; }
}

/************************************
** 料金ページ（create-web-design-fee）冒頭プランカード
************************************/
.create-web-design-fee .fee-lead {
  text-align: center;
  margin-bottom: 1.5em;
}
.create-web-design-fee .fee-plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 3em;
}
.create-web-design-fee .fee-plan-cards br { display: none; }
.create-web-design-fee a.fee-plan-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e6eef5;
  border-top: 4px solid #ECE038;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 45, 94, 0.10);
  padding: 24px 20px;
  color: #002d5e;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.create-web-design-fee a.fee-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 45, 94, 0.16);
  color: #002d5e;
}
.create-web-design-fee .fee-plan-name {
  font-size: 1.1em;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 0.6em;
}
.create-web-design-fee .fee-plan-price {
  color: #00558F;
  font-weight: 700;
  font-size: 0.95em;
  margin-bottom: 0.6em;
}
.create-web-design-fee .fee-plan-desc {
  font-size: 0.88em;
  line-height: 1.7;
  flex-grow: 1;
  margin-bottom: 1em;
}
.create-web-design-fee .fee-plan-more {
  font-size: 0.85em;
  color: #00558F;
  font-weight: 700;
  text-align: right;
}
.create-web-design-fee .fee-plan-more i {
  margin-left: 0.4em;
}
.create-web-design-fee #plan-simple,
.create-web-design-fee #plan-support {
  scroll-margin-top: 80px;
}
@media (max-width: 834px) {
  .create-web-design-fee .fee-plan-cards { grid-template-columns: 1fr; }
}
/* サポート2プラン（保守管理基本／プラス）を横並びに */
body.create-web-design-fee .flex-container.support .flex-item {
  width: 48.5%;
}
@media screen and (max-width: 834px) {
  body.create-web-design-fee .flex-container.support .flex-item { width: 100%; }
}
/* 注記・補足の文字サイズ調整 */
body.create-web-design-fee dl.komelist {
  font-size: 85%;
  color: #555;
}
body.create-web-design-fee .flex-container .flex-item .kome-ref {
  font-size: 65%;
  font-weight: normal;
}
body.create-web-design-fee .info-box {
  background: #e4f4fc;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 90%;
  margin-top: 16px;
}
body.create-web-design-fee .info-box p {
  margin: 0;
}
/* 「各ページで使用する素材について」2カード */
.create-web-design-fee .material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.create-web-design-fee .material-grid dl.material-item {
  border: 1px solid #b9d8ec;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0;
  font-size: 95%;
}
.create-web-design-fee .material-item dt {
  color: #002d5e;
  margin-bottom: .5em;
}
.create-web-design-fee .material-item dd {
  margin-left: 0;
}
@media (max-width: 834px) {
  .create-web-design-fee .material-grid { grid-template-columns: 1fr; }
}
/* h2セクション間の上余白（共有ルールの margin:0 auto .4em の上方向のみ上書き） */
.create-web-design-fee .entry-content h2 {
  margin-top: 2.5em;
}

/************************************
** 管理人について（about）
************************************/
.about .abt-hero {
  display: block;
  margin: 0 auto 1.2em;
  width: 100%;
  max-width: 340px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 45, 94, 0.12);
}
.about .abt-name {
  text-align: center;
  color: #00558F;
  font-weight: bold;
  letter-spacing: .05em;
}
.about .abt-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.about .abt-services br { display: none; }
.about .abt-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 8px;
  border-top: 4px solid #ECE038;
  box-shadow: 0 2px 12px rgba(0, 45, 94, 0.08);
  padding: 22px 16px;
  color: #002d5e;
  text-decoration: none;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.about a.abt-service:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 45, 94, 0.14);
  color: #002d5e;
}
.about .abt-service i {
  font-size: 28px;
  color: #00558F;
}
.about .abt-service-name {
  font-size: .92em;
  line-height: 1.5;
}
.about .abt-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.about .abt-profile-card {
  border: 1px solid #b9d8ec;
  border-radius: 8px;
  padding: 20px 22px;
  margin: 0;
  font-size: 95%;
}
.about .abt-profile-card dt {
  color: #002d5e;
  margin-bottom: .5em;
}
.about .abt-profile-card dt i {
  color: #00558F;
  margin-right: .5em;
}
.about .abt-profile-card dd {
  margin-left: 0;
  padding-left: 1em;
  text-indent: -1em;
}
.about .abt-profile-card dd:before {
  content: "・";
}
.about a.inquiry-button {
  background-color: #00558F;
}
.about a.inquiry-button:hover {
  background: #003e6b;
}
@media (max-width: 834px) {
  .about .abt-services { grid-template-columns: 1fr 1fr; }
  .about .abt-profile-grid { grid-template-columns: 1fr; }
}
@media (max-width: 599px) {
  .about .abt-services { grid-template-columns: 1fr; }
}

/************************************
** blog統合：記事用スタイル移植（2026-06-12・blog子テーマより）
** 注意：.postid-XXXXセレクタはインポートでID再採番されるため
** スラッグのbodyクラス（functions.phpで付与）に書き換え済み
************************************/
/*** 回り込み（記事内の段落・画像） ***/
p.alignright {
display: inline-block;
margin: 0 0 1em 1.5em;
float: right;
margin-left: 25px;
}
p.alignleft {
display: inline-block;
margin: 0 1.5em 1em 0;
float: left;
margin-right: 25px;
}
/*** リスト ***/
dl.inline-block-wrap dd {
display: inline-block;
}
ul.check {
list-style: none;
padding-left: 0;
}
ul.check > li {
text-indent: -1.5em;
padding-left: 1.5em;
}
ul.check > li .anchor-icon {
text-indent: -1.5em;
padding-left: 1.5em;
}
ul.check:not(.matome) > li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: .5em;
color: #005bbb;
}
ul.check.matome > li:before {
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
margin-right: .5em;
color: #ffd500;
}
/*** ソースコード言語バッジ ***/
pre.css,
pre.html,
pre.excel,
pre.php,
pre.jquery,
pre.js,
pre.xml,
pre.cmd,
pre.vbs,
pre.claude {
position: relative;
}
.pre-before {
padding: 0 6px;
color: white;
font-size: 90%;
font-weight: bold;
border-radius: 10px 10px 0 0;
margin-bottom: 0;
width: 10em;
}
.pre-before.css {
background-color: #4287f5;
}
.pre-before.html {
background-color: #ff4a08;
}
.pre-before.excel {
background-color: #067800;
}
.pre-before.php {
background-color: #333;
}
.pre-before.jquery {
background-color: #ffbf00;
}
.pre-before.js {
background-color: #ffbf00;
}
.pre-before.xml {
background-color: #779900;
}
.pre-before.cmd {
background-color: #000;
}
.pre-before.vbs {
background-color: #000;
}
.pre-before.claude {
background-color: #d97757;
}
.test-form-wrap {
border: 3px solid #ffd500;
padding: 1em;
}
/*### Highchartsデモ（highcharts-demoページ） ###*/
body.highcharts-demo .measuring-1.hide,
body.highcharts-demo .measuring-2.hide {
display: none;
}
body.highcharts-demo dl.report dt,
body.highcharts-demo dl.report dd {
margin-left: 0;
}
body.highcharts-demo dl.report .measuring-time span:nth-of-type(1),
body.highcharts-demo dl.report .measuring-value span:nth-of-type(1) {
width: 8em;
display: inline-block;
}
body.highcharts-demo dl.report .cleaning > span:nth-of-type(1) {
width: 7em;
display: inline-block;
}
body.highcharts-demo dl.report .measuring-time span:nth-of-type(2) {
margin-right: .5em;
}
body.highcharts-demo dl.report .measuring-time span:nth-of-type(3) {
margin-left: .5em;
}
body.highcharts-demo dl.report .measuring-time input {
width: 3.5em;
}
body.highcharts-demo dl.report .measuring-time select {
width: 4.0em;
}
body.highcharts-demo dl.report .measuring-value input {
width: 6em;
}
body.highcharts-demo dl.report dd {
margin-bottom: .5em;
}
body.highcharts-demo .entry-content form {
margin-bottom: 40px;
}
body.highcharts-demo .entry-content form span {
display: inline-block;
}
body.highcharts-demo .entry-content form span.offset {
width: 13em;
margin-left: 1em;
margin-bottom: 10px;
}
body.highcharts-demo .entry-content form input.offset {
width: 5em;
}
body.highcharts-demo .entry-content form input[name="submit"] {
width: 5em;
}
body.highcharts-demo .entry-content p.submit.dummy {
border: 1px solid #ddd;
}
body.highcharts-demo .entry-content p.submit.dummy button {
width: 100%;
padding: 0.8em;
background-color: #f5f8fa;
border: none;
outline: none;
cursor: pointer;
}
/*### アコーディオンデモ（記事 css-accordion-menu） ###*/
.ac-content-page .ac-check {
display: none;
}
.ac-content-page .ac-label {
color: #04287e;
display: block;
margin-bottom: 1px;
padding: 10px;
padding-left: 26px;
font-weight: bold;
border-top: solid 3px #6db3f2;
}
.ac-content-page .ac-label:before {
content: '\f054';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 8px;
color: #6db3f2;
}
.ac-content-page .ac-content {
height: 0;
opacity: 0;
overflow: hidden;
border-bottom: solid 3px #6db3f2;
transition: all 1s linear;
}
.ac-content-page .ac-content p {
height: 0;
opacity: 0;
overflow: hidden;
}
.ac-content-page .ac-content p:nth-of-type(1) {
transition: all 0.5s;
}
.ac-content-page .ac-content p:nth-of-type(2) {
transition: all 1s;
}
.ac-content-page .ac-content p:nth-of-type(3) {
transition: all 1.5s;
}
.ac-content-page .ac-check:checked + .ac-label + .ac-content {
height: auto;
opacity: 1;
}
.ac-content-page .ac-check:checked + .ac-label + .ac-content p {
height: auto;
opacity: 1;
}
.ac-content-page .ac-check:checked + .ac-label:before {
content: '\f078';
color: #6db3f2;
}
.ac-content-page .ac-check-view:checked + .ac-label + .ac-content {
height: auto;
opacity: 1;
}
.ac-content-page .ac-check-view:checked + .ac-label + .ac-content p {
height: auto;
opacity: 1;
}
.ac-content-page .ac-check-view:checked + .ac-label:before {
content: '\f078';
color: #6db3f2;
}
/*### HTMLエンティティツール（記事 htmlentities） ###*/
.htmlentities .flex-container .flex-item {
width: 48%;
margin-left: 1%;
margin-right: 1%;
box-sizing: border-box;
max-width: 80%;
}
.htmlentities .flex-container .flex-item textarea {
width: 100%;
max-width: 100%;
height: auto;
}
.htmlentities .button-wrap {
text-align: center;
}
.htmlentities #changeButton {
font-size: 150%;
cursor: pointer;
display: inline-block;
padding: 0.1em .5em;
text-decoration: none;
background: #f7f7f7;
border: solid 3px #ff7c5c;
color: #ff7c5c;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 40px;
}
.htmlentities #changeButton:active {
box-shadow: 0 0 2px rgba(128, 128, 128, 0.1) inset;
transform: translateY(2px);
}
.htmlentities .flex-item .copy-button {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #f7f7f7;
border: solid 3px #ff7c5c;
color: #ff7c5c;
font-weight: bold;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
border-radius: 20px;
cursor: pointer;
}
.htmlentities .flex-item .copy-button:active {
box-shadow: 0 0 2px rgba(128, 128, 128, 0.1) inset;
transform: translateY(2px);
}
.htmlentities #changeButton:focus,
.htmlentities .copy-button:focus {
outline:0;
}
.htmlentities .flex-item .title {
display: block;
color: #ff7c5c;
font-weight: bold;
text-align: center;
}
.htmlentities .flex-item .copy-button.add {
position: relative;
}
.htmlentities .flex-item .copy-button.add:after {
content: "Copied!";
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 50%;
background-color: #ff7c5c;
border-radius: 18px;
color: #fff;
font-weight: bold;
padding: .5em 1em;
z-index: -1;
animation: copiedTextMotionHorizontal 1.5s linear 0s alternate forwards;
}
/*### Garlic.jsデモ（記事 jquery-garlic） ###*/
body.jquery-garlic dl.report dt,
body.jquery-garlic dl.report dd {
margin-left: 0;
}
body.jquery-garlic dl.report input,
body.jquery-garlic dl.report select {
display: inline-block;
}
body.jquery-garlic dl.report .your-name select {
max-height: 8em;
}
body.jquery-garlic dl.report .depth input {
width: 8em;
}
body.jquery-garlic dl.report .temperature input,
body.jquery-garlic dl.report .time input {
width: 4em;
}
body.jquery-garlic h4 {
margin: 0;
}
body.jquery-garlic .grid-container {
display: grid;
gap: 0.25rem;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
body.jquery-garlic .grid-container .grid-item {
display: flex;
align-items: top;
flex-direction: column;
}
body.jquery-garlic p.submit {
text-align: center;
}
body.jquery-garlic p.submit input {
padding: .5em;
}
/*### 画像（large-photo） ###*/
.clearfix.large-photo > img,
.clearfix.large-photo > p img,
.clearfix.large-photo > figure,
.clearfix.large-photo > .wp-block-image {
max-width: 50%;
height: auto;
}
/*### キー操作表示 ###*/
.key-operation > div {
display: inline-block;
margin-bottom: .5em;
}
.key-operation > div > span {
display: inline-block;
background-color: #1070c6;
color: #fff;
padding: .5em;
border-radius: 5px;
}
.key-operation > div:not(:last-child)::after {
content: "\f105";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #1070c6;
margin-left: .5em;
margin-right: .5em;
}
/*### 記事用レスポンシブ ###*/
@media screen and (max-width: 768px){
img.alignleft,
img.alignright {
max-width: 50vw;
}
}
@media screen and (max-width: 480px){
.clearfix.large-photo > img,
.clearfix.large-photo > p img,
.clearfix.large-photo > .wp-block-image {
max-width: none;
}
.single dl:not(.dl-single-line):not(.check) dd {
margin-left: 0;
}
img.alignleft,
img.alignright {
max-width: none;
width: 100%;
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft.size-thumbnail,
img.alignright.size-thumbnail {
max-width: 50%;
width: auto;
}
}

/************************************
** お問い合わせ（contact）
************************************/
body.contact .cwd-lead {
  text-align: left;
  max-width: none;
}
body.contact .ct-reference {
  text-align: left;
  font-size: .9em;
  color: #555;
}
body.contact .entry-content h2 {
  margin-top: 2em;
}
body.contact .wpcf7 .form-note {
  font-size: .85em;
  color: #555;
}
body.contact .wpcf7 .akismet-note {
  font-size: .85em;
  color: #777;
}
body.contact #Inquiry dl dd {
  margin-bottom: 10px;
}
/* input横のカッコ書きキャプション（郵便番号・都道府県）を控えめに */
body.contact #Inquiry dd .wpcf7-form-control-wrap + span {
  font-size: .85em;
  color: #777;
  margin-left: .6em;
}
/* ラベル列を13emに拡張（「メールアドレス（確認）」の2行折れ解消・デスクトップのみ。
   ≤834pxは既存のラベル全幅化（float:none/width:100%/margin-left:0!important）が生きる */
@media (min-width: 835px) {
  body.contact dl#Inquiry dt,
  body.contact #Inquiry dl dt {
    width: 13em;
  }
  body.contact dl#Inquiry dd,
  body.contact #Inquiry dl dd {
    margin-left: 13.5em;
  }
}
/* CTAボタンをサイトパレット（ネイビー）に統一 */
body.create-web-design-fee .request-wrap {
  margin-top: 40px;
}
body.create-web-design-fee a.inquiry-button {
  background-color: #00558F;
}
body.create-web-design-fee a.inquiry-button:hover {
  background: #003e6b;
}

/*### FAQアコーディオン サイト共通カラー（案A：白カード＋ネイビー）2026-06-30 ###*/
/* Cocoonデフォルトのグレー箱(#e8ecef)・レンガ赤の「Q」をサイトパレットに統一。
   全FAQページ共通（855・893・1143・857）。薄水色帯の上でも白カードが浮き立つ。 */
.entry-content .is-style-accordion > .faq > .faq-question {
  background-color: #ffffff;
  border: 1px solid #cfe3f0;
  border-left: 4px solid #00558F;
  border-radius: 6px;
}
/* 「Q」ラベル：レンガ赤 #b7282e → サイトのネイビー */
.entry-content .is-style-accordion .faq-question .faq-question-label {
  color: #00558F;
}
/* 開閉アイコン（+/-）もネイビー基調に */
.entry-content .is-style-accordion > .faq > .faq-question::before {
  color: #00558F;
  opacity: 0.55;
}

/* ===== blog記事の見出し装飾（blog.ekaki-j.comから移植・2026-07-03） =====
   .singleスコープ＝投稿（旧blog記事）のみ。固定ページ（cwd見出し・1009・法務3ページ）非影響。
   配色はblog側の原本値（gold #ffd500・endeavour #005abb・水色 #52c2f0）を忠実に維持。 */
.single header.entry-header {
  text-align: center;
}
.single h1.entry-title {
  font-size: 150%;
  border-bottom: solid 3px #ffd500;
  padding-bottom: 0.2em;
  position: relative;
}
.single h1.entry-title span {
  display: inline-block;
}
.single h1.entry-title:after {
  content: "";
  position: absolute;
  border-bottom: solid 8px #005abb;
  bottom: -8px;
  left: 0;
  right: 0;
  margin: auto;
  width: 30%;
}
.single .entry-content h2 {
  padding-bottom: 0.2em;
  border-bottom: solid 3px #52c2f0;
  position: relative;
}
.single .entry-content h2:after {
  position: absolute;
  content: "";
  border-bottom: solid 6px #ffd500;
  bottom: -6px;
  right: 0;
  width: 50%;
}
.single .entry-content h3 {
  position: relative;
}
.single .entry-content h3:after {
  position: absolute;
  content: "";
  border-bottom: solid 6px #52c2f0;
  bottom: -6px;
  left: 0;
  width: 30%;
}

/* 本文上アイキャッチ（eyecatch_visible=ON・2026-07-03）は投稿のみ。
   固定ページはOGP用サムネイル（1168等）が本文上に出ないよう抑制 */
.page .eye-catch-wrap {
  display: none;
}