@charset "utf-8";

/* 印刷色数見出し */
.color-box p.tittle{
color: #000;
font-weight: bold;
border-radius: 100vh;
background-color:#B4E2F1;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
text-align: center
}
/* 印刷色数見出し1行 */
.color-box p.tittle1{
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.05rem;
padding: 15px 5px;
}
/* 印刷色数見出し2行 */
.color-box p.tittle2{
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.05rem;
padding: 7px 0px;
}

/******* タブ内のリンクボタン *******/
 a.c-link-b{
display: inline-block;
font-size: 14px;
color: crimson;
margin-top: 5px;
}
a.c-link-b:hover{
transition: all .3s;
color: #15B8EB;
background-color: #FFFF00
}
/* アンダーライン */
span.yel{
 background:linear-gradient(transparent 60%, #FFFF00 60%);
}
span.sky{
 background:linear-gradient(transparent 60%, #B4E2F1 60%);
}
/* 価格赤色 */
span.red{color:#FF0000;}
/* フォントサイズ */
span.sml{font-size: 18px;}
/* --------------------------------------------------------------------------------
Tabのレイアウト
-------------------------------------------------------------------------------- */

/*tabの形状*/
.tab{
	display: flex;
	flex-wrap: wrap;
	font-weight: bold
}
.tab li a{
	display: block;
	margin:0 2px;
}
.tab li a.iro{
	color: #000;
	background:#B4E2F1;
}
.tab li a.data{
	color: #000;
	background:#C9C9CF;
}
.tab li a.note{
	color: #000;
	background:#FFFF00;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
	color: #000;
}
.tab li a.iro{
	background:#B4E2F1;
}
.tab li a.data{
	background:#C9C9CF;
}
.tab li a.note{
	background:#FFFF00;
}
.tab li a:hover{
transition: all .3s; 
background-color: #06B4EA}

/*エリアの表示非表示と形状*/
.area {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:0px 0px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.color{
	width:100%;
	max-width: 1100px;
}
/* リンク */	
.color > a{
color: #15B8EB;
}
.color > a:hover{
transition: all .3s; 
background-color: #FFFF00
}
.area h2{
	font-size:1.3rem;
	margin:0 0 20px 10px;
}

.area li{
	padding: 10px; 
	border-bottom: 1px solid #ddd;
}

/* ########### 413px以下 ########### */
@media screen and (max-width: 413px) {
.color{
	margin-bottom:50px;
}
/******* 印刷色数について *******/
.color-box{/* 大枠 */
display: block;
justify-content: space-around;
text-align: center;
margin-bottom: 20px;
}	
.color-box-in4{
width: 100%;
text-align: center;
margin-bottom: 30px
}
.color-box-in2{
width: 100%;
text-align: center;
margin-bottom: 30px
}
/* 印刷色数見出し */
.color-box p.tittle{
width: 60%;
}
/* 印刷色数イラスト */	
.color-box img{
height: auto;
margin-top: 15px;
margin-bottom: 15px
}
.c-img4{
width: 70%;
}
.c-img2{
width: 70%;
}

/* 印刷色数イラスト下のテキスト */
.color1{
position: relative;
display: inline-block;
padding:12px 12px;
width:85%;
font-size: 16px;
color: #4C4948;
line-height: 1.6;
letter-spacing: 0.02rem;
text-align:justify;
margin-left: auto;
margin-right: auto;
}
.color1:before, .color1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.color1:before {
  border-left: solid 1px #06B4EA;
  border-top: solid 1px #06B4EA;
  top:0;
  left: 0;
}
.color1:after {
  border-right: solid 1px #06B4EA;
  border-bottom: solid 1px #06B4EA;
  bottom:0;
right: 0;
}

/* タブ内 */
.tab li a{
	padding:10px 5px;
	font-size: 13.9px;
	letter-spacing: 0.00rem
}
.color2{
font-size: 16px;
color: #000;
line-height: 1.8;
letter-spacing: 0.05rem;
text-align: left;
padding: 15px 15px 15px 15px;
}
.skyblue2{
background-color: #B4E2F1;
}
.gray2{
background-color: #C9C9CF;
}	
.yellow2{
background-color: #FFFF00;
}

}
/* ########### 414pxから666pxまで ########### */
@media screen and (min-width: 414px) and (max-width: 666px) {
/******* 印刷色数について *******/
.color{
	margin-bottom:80px;
}
.color-box{/* 大枠 */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
margin-bottom: 20px;
}	
.color-box-in4{
width: 50%;
text-align: center;
margin-bottom: 30px
}
.color-box-in2{
width: 50%;
text-align: center;
margin-bottom: 30px
}
/* 印刷色数見出し */
.color-box p.tittle{
width: 80%;
}
/* 印刷色数イラスト */	
.color-box img{
height: auto;
margin-top: 15px;
margin-bottom: 15px
}
.c-img4{
width: 85%;
}
.c-img2{
width: 85%;
}

/* 印刷色数イラスト下のテキスト */
.color1{
position: relative;
display: inline-block;
padding:12px 12px;
width:80%;
font-size: 16px;
color: #4C4948;
line-height: 1.4;
letter-spacing: 0.02rem;
text-align:justify;
margin-left: auto;
margin-right: auto;
}
.color1:before, .color1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.color1:before {
  border-left: solid 1px #06B4EA;
  border-top: solid 1px #06B4EA;
  top:0;
  left: 0;
}
.color1:after {
  border-right: solid 1px #06B4EA;
  border-bottom: solid 1px #06B4EA;
  bottom:0;
right: 0;
}

/* タブ内 */
.tab li a{
	padding:10px 8px;
	font-size: 15px;
	letter-spacing: 0.00rem
}
.color2{
font-size: 16px;
color: #000;
line-height: 1.8;
letter-spacing: 0.05rem;
text-align: left;
padding: 20px 10px 15px 22px;
}
.skyblue2{
background-color: #B4E2F1;
}
.gray2{
background-color: #C9C9CF;
}	
.yellow2{
background-color: #FFFF00;
}

}

/* ########### 667pxから833pxまで ########### */
@media screen and (min-width: 667px) and (max-width: 833px) {
.color{
	margin-bottom:50px;
}
/******* 印刷色数について *******/
.color-box{/* 大枠 */
display: flex;
flex-wrap: wrap;
justify-content: space-around;
text-align: center;
margin-bottom: 20px;
}	
.color-box-in4{
width: 50%;
text-align: center;
height: auto;
margin-bottom: 30px
}
.color-box-in2{
width: 50%;
text-align: center;
height: auto;
margin-bottom: 30px
}
/* 印刷色数見出し */
.color-box p.tittle{
width: 190px;
}

/* 印刷色数イラスト */	
.color-box img{
height: auto;
margin-top: 15px;
margin-bottom: 15px
}
.c-img4{
width: 70%;
}
.c-img2{
width: 70%;
}

/* 印刷色数イラスト下のテキスト */
.color1{
position: relative;
display: inline-block;
padding:12px 12px;
width: 80%;
font-size: 16px;
color: #4C4948;
line-height: 1.6;
letter-spacing: 0.02rem;
text-align:justify;
margin-left: auto;
margin-right: auto;
}
.color1:before, .color1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.color1:before {
  border-left: solid 1px #06B4EA;
  border-top: solid 1px #06B4EA;
  top:0;
  left: 0;
}
.color1:after {
  border-right: solid 1px #06B4EA;
  border-bottom: solid 1px #06B4EA;
  bottom:0;
right: 0;
}

/* タブ内 */
.tab li a{
	padding:10px 20px;
	font-size: 18px;
	letter-spacing: 0.05rem
}
.color2{
font-size: 16px;
color: #000;
line-height: 1.8;
letter-spacing: 0.05rem;
text-align: left;
padding: 20px 10px 15px 22px;
}
.skyblue2{
background-color: #B4E2F1;
}
.gray2{
background-color: #C9C9CF;
}	
.yellow2{
background-color: #FFFF00;
}

}
/* ########### 834px 以上 ########### */
@media screen and (min-width:834px) {
.color{
	margin-bottom:60px;
}
/******* 印刷色数について *******/
.color-box{/* 大枠 */
display: flex;
justify-content: space-around;
text-align: center;
margin-bottom: 20px;
}
.color-box-in4{
width: 25%;
text-align: center;
}
.color-box-in2{
width: 50%;
text-align: center;
}
/* 印刷色数見出し */
.color-box p.tittle{
width: 160px;
color: #000;
font-weight: bold;
border-radius: 100vh;
background-color:#B4E2F1;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
text-align: center
}
/* 印刷色数見出し1行 */
.color-box p.tittle1{
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.05rem;
padding: 15px 5px;
}
/* 印刷色数見出し2行 */
.color-box p.tittle2{
font-size: 16px;
line-height: 1.1;
letter-spacing: 0.05rem;
padding: 7px 0px;
}
	
/* 印刷色数イラスト */	
.color-box img{
height: auto;
margin-top: 20px;
margin-bottom: 20px
}
.c-img4{
width: 90%;
}
.c-img2{
width: 60%;
}

/* 印刷色数イラスト下のテキスト */
.color1{
position: relative;
display: inline-block;
padding:12px 12px;
width: 80%;
font-size: 15px;
color: #4C4948;
line-height: 1.6;
letter-spacing: 0.00rem;
text-align:justify;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
.color1:before, .color1:after { 
  content:'';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
}
.color1:before {
  border-left: solid 1px #06B4EA;
  border-top: solid 1px #06B4EA;
  top:0;
  left: 0;
}
.color1:after {
  border-right: solid 1px #06B4EA;
  border-bottom: solid 1px #06B4EA;
  bottom:0;
right: 0;
}

/* タブ内 */	
.tab li a{
padding:10px 20px;
font-size: 18px;
letter-spacing: 0.05rem
}
.color2{
font-size: 16px;
color: #000;
line-height: 1.8;
letter-spacing: 0.05rem;
text-align: left;
padding: 20px 10px 15px 22px;
}
.skyblue2{
background-color: #B4E2F1;
}
.gray2{
background-color: #C9C9CF;
}	
.yellow2{
background-color: #FFFF00;
}

}