@charset "euc-jp";
/* CSS Document */


p {
font-size: 16px;
line-height: 180%;
}

/*a:link {
color: #182186;
}*/

hr {
height: 1px;
background-color: #D3D3D3;
border: none;
color: #D3D3D3;
margin: 20px 0;
}

a img {
border:none;
verticle-align:top;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
opacity: 0.5;     /* 透過レベル */
filter: alpha(opacity=80);
}

/* midashi */
.stg1{
font-size: 120%;
font-weight: 600;
}

.stg2{
font-size: 134%;
font-weight: 600;
}

.balloon-title {
position: relative;
padding: 1rem 1.6rem;
color: #fff;
font-size: 22px;
border-radius: 10px;
background:rgba(109,146,92,1.00);
}

.balloon-title:after {
position: absolute;
bottom: -9px;
left: 1em;
width: 0;
height: 0;
content: '';
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: rgba(109,146,92,1.00) transparent transparent transparent;
}
/* midashi */


/* f-text */
.f-text {
font-size: 160%;
padding-right: 10px;
color: #FFF;
}

/* margin *
.mb10{
margin-bottom: 10px;
}

.mb20{
margin-bottom: 20px;
}

.mb30{
margin-bottom: 30px;
}

.mb40{
margin-bottom: 40px;
}
/* margin */

/* padding *
.pt30{
padding-top: 30px;
}

.pt40{
padding-top: 40px;
}

/* padding */

.no-tilte {
counter-reset:number;
}

/* txt-color */
.red{
color: #FB0025;
}

.white{
color: #FFF;
}

.blu{
color: #0066C0;
}
/* txt-color */


/* no-tilte-box */
.no-tilte-box {
position:relative;
margin-top: 40px;
margin-left:40px;
margin-bottom: 20px;
padding:8px 10px 6px;
border-bottom:solid 2px #333;
}

.no-tilte-box:before {
counter-increment:number;
content:counter(number);
position:absolute;
top:0;
left:-40px;
padding:6px 10px;
background: #333;
border:solid 2px #333;
color:#FFF;
font-weight: bold;
}

@media screen and (max-width: 780px) {
.no-tilte-box {
position:relative;
margin-top: 40px;
margin-left:40px;
margin-bottom: 20px;
padding:8px 2px 6px;
border-bottom:solid 2px #333;
font-size: 16px;
}

.no-tilte-box:before {
counter-increment:number;
content:counter(number);
position:absolute;
top:0;
left:-40px;
padding:6px 10px;
background: #333;
border:solid 2px #333;
color:#FFF;
font-weight: bold;
}
}

.kakomi-box {
position: relative;
margin: 4em auto;
padding: 1.2em;
color: #333;
background-color: #F4F4F4; 
border: 1px solid #707070;
width: 100%;
}

@media screen and (max-width: 780px) {
.kakomi-box {
position: relative;
margin: 3em auto;
color: #333;
background-color: #F4F4F4; 
border: 1px solid #707070;
width: auto;
}
}

.title-box {
font-size: 20px;
position: absolute;
padding: 0 .9em;
left: 20px;
top: -15px;
font-weight: bold;
background-color: #fff;
border: 1px solid #707070;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
color: #333;
}

.no-ol {
counter-reset: my-counter;
list-style: none;
padding: 0;
margin: 0;
}

.no-ol li {
font-size: 16px;
line-height: 1.5;
padding-left: 30px;
position: relative;
margin-bottom: 20px;
font-weight: 600;
}

.no-ol li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 22px;
width: 22px;
color: #333;
font-size: 85%;
line-height: 1;
position: absolute;
top: 0;
left: 0;
}

@media screen and (max-width: 780px) {
.no-ol {
counter-reset: my-counter;
list-style: none;
padding: 0;
margin: 0;
}

.no-ol li {
font-size: 14px;
line-height: 1.6;
padding-left: 30px;
position: relative;
margin-bottom: 20px;
font-weight: 500;
}

.no-ol li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 22px;
width: 22px;
color: #333;
font-size: 85%;
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
}


.no-ol2 {
counter-reset: my-counter;
list-style: none;
padding: 0;
margin: 0;
}

.no-ol2 li {
font-size: 16px;
line-height: 1.5;
padding-left: 30px;
position: relative;
margin-bottom: 20px;
font-weight: 500;
}

.no-ol2 li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 22px;
width: 22px;
color: #333;
font-size: 85%;
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
/* no-tilte-box */

.no-ol3 {
counter-reset: my-counter;
list-style: none;
padding: 0;
margin: 0;
}
.no-ol3 li {
font-size: 18px;
line-height: 1.5;
padding-left: 40px;
position: relative;
margin-bottom: 20px;
font-weight: 600;
}
.no-ol3 li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
color: #333;
font-size: 85%;
line-height: 1;
position: absolute;
top: 0;
left: 0;
}

@media screen and (max-width: 780px) {
.no-ol3 {
counter-reset: my-counter;
list-style: none;
padding: 0;
margin: 0;
}
.no-ol3 li {
font-size: 14px;
line-height: 1.6;
padding-left: 30px;
position: relative;
margin-bottom: 20px;
font-weight: 500;
}
.no-ol3 li:before {
content: counter(my-counter);
counter-increment: my-counter;
background-color: #DEDEDE;
border: 1px solid #DEDEDE;
border-radius: 50%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 22px;
width: 22px;
color: #333;
font-size: 85%;
line-height: 1;
position: absolute;
top: 0;
left: 0;
}
}


/* Column */
.container {
display: flex;
flex-wrap: wrap;
}

/* --- 60-40 --- */
.column60-40--l,
.column60-40--r {
width: 100%;
}

@media (min-width: 1024px) {
.column60-40--l {
width: 60%;
}
.column60-40--r {
width: 40%;
}
}
/* --- 60-40 --- */


/* --- 50-50 --- */
.column50-50--l,
.column50-50--r {
width: 100%;
padding-bottom: 20px;
}

@media (min-width: 1024px) {
.column50-50--l {
width: 50%;
padding-right: 10px;
}
.column50-50--r {
width: 50%;
padding-left: 10px;
}
}
/* --- 50-50 --- */

/* --- 52-48 --- */
.column52-48--l,
.column52-48--r {
width: 100%;
}

@media (min-width: 1024px) {
.column52-48--l {
width: 52%;
}
.column52-48--r {
width: 48%;
}
}
/* --- 52-48 --- */

/* --- 26-74 --- */
.column26-74--l,
.column26-74--r {
width: 100%;
}

@media (min-width: 1024px) {
.column26-74--l {
width: 26%;
}
.column26-74--r {
width: 74%;
}
}
/* --- 26-74 --- */
/* Column */


/* --- 25 --- */
.column25-1,
.column25-2,
.column25-3,
.column25-4{
width: 50%;
}

@media (min-width: 1024px) {
.column25-1{
width: 25%;
}
.column25-2{
width: 25%;
}
.column25-3{
width: 25%;
}
.column25-4{
width: 25%;
}	
}
/* --- 50-50 --- */


/* flexbox */
#flexbox{
}
#flex_left{
width: 100%;
background: #fff;
}
#flex_center{
width: 100%;
background: #fff;
}
#flex_right{
width: 100%;
background: #fff;
}
/*  PC向けのスタイル：1024px以上 */
@media only screen and (min-width: 1024px){
#flexbox{
display: flex;
}
#flex_left{
width: 33%;
}
#flex_center{
width: 34%;
}
#flex_right{
width: 33%;
}
}
/* flexbox */


/* flexbox2 */
#flexbox2{
}
#flex_left2{
width: 100%;
}
#flex_right2{
width: 100%;
}
/*  PC向けのスタイル：1024px以上 */
@media only screen and (min-width: 1024px){
#flexbox2{
display: flex;
}
#flex_left2{
width: 50%;
}
#flex_right2{
width: 50%;
}
}

/* Box-bg */
.yl-bg{
background: #FBFDF2;
padding: 20px;
border: 1px solid #D3D3D3;
}

.gly-bg{
background: #9F9F9F;
padding: 20px;
border: 1px solid #D3D3D3;
}

.gly-bg2{
background: #555555;
padding: 6px;
border: 1px solid #D3D3D3;
}

.blu-bg{
background: #EDF8FF;
padding: 20px;
border: 1px solid #D3D3D3;
}

.bg-bdr{
padding: 20px;
border: 1px solid #D3D3D3;
}

/* txt0 */
.txt01{
color: #286029;
font-size: 110%;
font-weight: 600;
margin-bottom: 10px;
vertical-align: top;	
}

.txt02{
color: #0978C0;
font-size: 110%;
font-weight: 600;
margin-bottom: 10px;
vertical-align: top;
}

.txt03{
color: #E15A11;
font-size: 110%;
font-weight: 600;
margin-bottom: 10px;	
vertical-align: top;	
}

/* tb-border */
.tb-border {
padding: 0.5rem 1rem;
border: 6px double #ddd;
font-size: 130%;
}

/* table-scroll */
.table-scroll{
display: block;
overflow-x: scroll;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}

/* table01 */
.table01 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}

.table01 tr {
background-color: #fff;
}

.table01 .tr2 {
background-color: #EEE;
}

.table01 .th-01 {
padding: 20px 0;
width: 20%;
}

.table01 .th-02 {
padding: 20px 0;
width: 66%;
}

.table01 .th-03 {
padding: 20px 0;
width: 14%;
}

.th-bg{
background: #3C3C3C;
}

.th-bg2{
background: #0094E5;
}

.th-bg3{
background: #8CC220;
}

.th-bg4{
background: #A0ABFF;
}

.th-bg5{
background: #FB0025;
}

.th-bg6{
background: #26A735;
}

.th-bg7{
background: #49B9A6;
}

.table01 .td-01 {
padding: 20px 0;
border: 1px solid #D3D3D3;
width: 100px;
font-weight: 600;
}

.table01 .td-02 {
padding: 20px 0;
border: 1px solid #D3D3D3;
}

.table01 .td-03 {
padding: 20px 0;
border: 1px solid #D3D3D3;
width: 80px;
}

.table01 .td-03 a{
font-weight: 500;
color: #182186;
}

.table01 td {
padding: 20px 0;
border: 1px solid #D3D3D3;
}

.table01 th {
padding: 10px 0;
border: 1px solid #D3D3D3;
color:#fff;
}

.table01 tr{
text-align: center;
padding: 20px 0;
background-color: #fff;
color:#3a3a3a;
}

.table01 tr:hover{
background-color: #d4faff;
}
.table01 .tr2:hover{
background-color: #EEE;
}


@media screen and (max-width: 780px) {
.table01 {
border-collapse: collapse;
width: 800px;
}

.table01 tr{
text-align: center;
padding: 4px;
background-color: #fff;
color:#3a3a3a;
}

.table01 td {
padding: 4px;
border: 1px solid #D3D3D3;
}

.table01 th {
padding: 4px;
border: 1px solid #D3D3D3;
color:#fff;
}

.table01 .tr2{
padding: 4px;
text-align: center;	
}	

.table01 .th-01 {
padding: 4px;
width: 100px;
text-align: center;	
font-size: 13px;	
}

.table01 .th-02 {
padding: 4px;
width: 600px;
text-align: center;	
font-size: 13px;		
}

.table01 .th-03 {
padding: 4px;
width: 100px;
text-align: center;		
font-size: 13px;	
}

.table01 .td-01 {
padding: 4px;
width: 100px;
border: 1px solid #D3D3D3;
font-size: 13px;	
}

.table01 .td-02 {
padding: 4px;
width: 600px;
border: 1px solid #D3D3D3;
text-align: left;
font-size: 13px;
}

.table01 .td-02 p{
font-size: 13px;	
}

.table01 .td-03 {
padding: 4px;
width: 100px;
border: 1px solid #D3D3D3;
font-size: 13px;	
}	
}


/* table02 */
.table02 {
border-collapse: collapse;
overflow-wrap: normal;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 110%;
}

.table02 .td-01 {
padding: 20px 0;
border: 1px solid #D3D3D3;
background: #43BA26;
color: #FFF;
text-align: center;
width: 200px;
font-weight: 600;
}

.table02 .td-02 {
padding: 20px 0;
border: 1px solid #D3D3D3;
background: #FFF2E2;
font-weight: 600;
}

.table02 .td-03 {
padding: 20px;
border: 1px solid #D3D3D3;
}

@media screen and (max-width: 780px) {
.table02 {
border-collapse: collapse;
overflow-wrap: normal;	
width: 800px;
}
.table02 .td-01 {
padding: 4px;
border: 1px solid #D3D3D3;
background: #43BA26;
color: #FFF;
text-align: center;
width: 100px;
font-weight: 600;
font-size: 14px;
}

.table02 .td-02 {
padding: 4px;
border: 1px solid #D3D3D3;
background: #FFF2E2;
font-weight: 600;
font-size: 14px;	
width: 700px;
}

.table02 .td-03 {
padding: 4px;
border: 1px solid #D3D3D3;
font-size: 14px;	
}	
}

/* table03 */
.table03 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 110%;
}

.table03 tr{
text-align: center;
padding: 20px 0;
background-color: #fff;
}

.table03 td{
text-align: center;
padding: 14px;
background-color: #fff;
border: 1px #D3D3D3 solid;
}

.table03 .td-02 {
padding: 10px;
background: #F3F3F3;
}

.table03 .th-03 {
padding: 10px;
width: 14%;
}

/* table04 */
.table04 {
border-collapse: collapse;	
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 110%;
}

.table04 tr{
text-align: center;
padding: 20px 0;
background-color: #fff;
border: 1px #D3D3D3 solid;
}

.table04 td{
text-align: center;
padding: 20px;
background-color: #fff;
border: 1px #D3D3D3 solid;
}

.table04 .th01{
text-align: center;
padding: 10px 0;
background-color: #286029;
color:#FFF;
width: 33%;	
}

.table04 .th02{
text-align: center;
padding: 10px 0;
background-color: #0978C0;
color:#FFF;
width: 33%;
}

.table04 .th03{
text-align: center;
padding: 10px 0;
background-color: #E15A11;
color:#FFF;
width: 33%;	
}

/* table05 */
.table05 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
font-size: 110%;
}

.table05 td{
text-align: center;
padding: 20px 0;
border: 1px #D3D3D3 solid;
width: 25%;
}

.table05 .tr-02{
text-align: center;
padding: 20px 0;
background-color: #EEE;
}

/* table06 */
.table06 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.table06 td{
text-align: center;
padding: 6px 0;
border: 1px #D3D3D3 solid;
width: 25%;
}

.table06 .td-02{
text-align: center;
padding: 6px 0;
border: 1px #D3D3D3 solid;
width: 25%;
background: #F1F4FF;
}

/* table07 */
.table07 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.table07 td{
text-align: left;
padding: 10px;
border: 1px #D3D3D3 solid;
width: 25%;
}

.table07 .td-02{
text-align: center;
font-size: 120%;
font-weight: 600;
color: #fff;
padding: 10px 0;
border: 1px #D3D3D3 solid;
width: 25%;
background: rgba(73,73,73,1.00);
}

.table07 .td-02 span{
color: #FBB465;
padding-right: 6px;
}

@media screen and (max-width: 740px) {
.table07 .td-02{
text-align: center;
font-size: 96%;
font-weight: 600;
color: #fff;
padding: 10px 0;
border: 1px #D3D3D3 solid;
width: 25%;
background: rgba(73,73,73,1.00);
}

.table07 .td-02 span{
color: #FBB465;
padding-right: 6px;
}
}

/* table08 */
.table08 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.table08 th{
width: 200px;
padding: 20px 0;
border: 1px #D3D3D3 solid;
text-align: center;
background: #EDEDED;
}
.table08 td{
width: 13%;
padding: 20px 0;
border: 1px #D3D3D3 solid;
text-align: center;
background: #FFF;
}
.table08 .td02{
width: 13%;
padding: 20px 0;
border: 1px #D3D3D3 solid;
text-align: center;
background:rgba(255,254,238,1.00);
}
.table08 .td03{
width: 13%;
padding: 20px 0;
border: 1px #D3D3D3 solid;
text-align: center;
background:rgba(249,249,249,1.00);
}

/* table09 */
.table09 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.table09 th{
width: 26%;
padding: 30px 0;
border-bottom: 2px rgba(75,83,145,0.80) solid;
text-align: center;
font-size: 20px;
letter-spacing: 2px;
}
.table09 .red {
font-weight: 500;
font-size: 14px;
}
.table09 td{
padding: 30px 30px;
border-bottom: 1px #333 dotted;
text-align: left;
background: #FFF;
font-size: 18px;
letter-spacing: 1px;
}

/* table10 */
.table10 {
border-collapse: collapse;
margin: 0 auto;
padding: 0;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.table10 th {
  background: #84b5d1;
  width: 30%;
}
.table10 td {
  background: #84b5d1;
  padding: 10px;
}
.table10 strong{
font-size: 16px;
color: #FFF;
}
.table10 p{
font-size: 13px;
line-height: 120%;
color: #FFF;
}
 
@media screen and (max-width: 640px) {
  .last td:last-child {
    width: 100%;
  }
  .table10 {
    width: 100%;
  }
  .table10 th,
  .table10 td {
　　border-bottom: none;
    display: block;
    width: 100%;
  }
}
 
}



/* スクロールバー */
.table-scroll::-webkit-scrollbar{　　
height: 5px;
}
.table-scroll::-webkit-scrollbar-track{
background: #333;
}
.table-scroll::-webkit-scrollbar-thumb {
background: #999;
}
/* table */

/* v-top */
.v-top{
vertical-align: top;
}

/* Delivery Charge */
.delivery-title{
font-size: 160%;
font-weight: 600;
color: #19297F;
}


/* 2Column */
*, *:before, *:after {
box-sizing: border-box;
}
.col_50 {
width: 100%;
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.col_50 .left{
width: 49%;
padding: 0px;
margin-right:auto;
}
.col_50 .right{
width: 49%;
padding: 0px;
}

@media screen and (max-width: 640px) {
.col_50 .left{
width: 100%;
padding: 10px;
margin-bottom: 30px;
}

.col_50 .right{
width: 100%;
padding: 10px;
}

}


/* 3column */
*, *:before, *:after {
box-sizing: border-box;
}
.col_3{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
width: 33.33333%;
padding: 10px;
}
@media screen and (max-width: 960px) {
.col_3 > div{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.col_3 > div{
width: 50%;
}
}


4column 
*, *:before, *:after {
box-sizing: border-box;
}
.col_4{
width: 100%;
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.col_4 > div{
width: 25%;
padding: 10px;
}
@media screen and (max-width: 960px) {
.col_4 > div{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.col_4 > div{
width: 50%;
}
}

/* step-title */
.step-title {
position: relative;
padding-left: 10em;
padding-top: 0.8em;
padding-bottom: 0.8em;
background: rgba(255,255,255,1.00);
border: rgba(181,181,181,1.00) 1px solid;
}

.step-title span {
position: absolute;
top: 0;
left: 0;
padding: 0.8em 2rem;
color: #F5FE00;
background: #C3432E;
}

.step-title span:after {
position: absolute;
top: calc(50% - 7px);
right: -11px;
width: 0;
height: 0;
content: '';
border-width: 7px 0 7px 12px;
border-style: solid;
border-color: transparent transparent transparent #C3432E;
}

/* button */
a.btn-border {
padding: 20px;
font-size: 140%;
font-weight: 600;
border: 4px solid #67AAE5;
border-radius: 0;
background: #fff;
color: #67AAE5;
}

a.btn-border:hover {
color: #fff;
background: #67AAE5;
}

/* img */
.img-center {
margin: 0 auto;
display: block;
}

.tmp-img{
width: 493px;
height: 66px;
}

@media screen and (max-width: 780px) {
.tmp-img{
width: 100%;
height: auto;
}
}

.data-note{
width: 430px;
height: 94px;
}

@media screen and (max-width: 780px) {
.data-note{
width: 100%;
height: auto;
}
}

.outline-ba{
width: 324px;
height: 153px;
}

@media screen and (max-width: 780px) {
.outline-ba{
width: 70%;
height: auto;
}
}

.zip-use{
width: 460px;
height: 187px:
}

@media screen and (max-width: 780px) {
.zip-use{
width: 100%;
height: auto;
}
}

.data-draft{
width: 410px;
height: 88px;
}

@media screen and (max-width: 780px) {
.data-draft{
width: 100%;
height: auto;
}
}

.win_1{
width: 289px;
height: 179px;
}

.win_2{
width: 528px;
height: 190px;
}

@media screen and (max-width: 780px) {
.win_2{
width: 100%;
height: auto;
}
}

.win_3{
width: 105px;
height: 89px;
}

.mac_1{
width: 339px;
height: 323px;
}

.mac_2{
width: 432px;
height: 293px;
}

@media screen and (max-width: 780px) {
.mac_2{
width: 100%;
height: auto;
}
}

.mac_3{
width: 432px;
height: 317px;
}

@media screen and (max-width: 780px) {
.mac_3{
width: 100%;
height: auto;
}
}

.trim{
width: 548px;
height: 360px;
}

@media screen and (max-width: 780px) {
.trim{
width: 100%;
height: auto;
margin-bottom: 20px;
}
}

.mame{
width: 122px;
height: 45px;
}

.point-setsumei{
width: 478px;
height: 207px;
}

@media screen and (max-width: 780px) {
.point-setsumei{
width: 100%;
height: auto;
margin-bottom: 20px;
}
}

.umekomi{
width: 390px;
height: 163px;
}

@media screen and (max-width: 780px) {
.umekomi{
width: 100%;
height: auto;
margin-bottom: 20px;
}
}

.4colors{
width: 820px;
height: 234px;
}

@media screen and (max-width: 780px) {
.4colors{
width: 100%;
height: auto;
margin-bottom: 20px;
}
}

.rgb-img{
width: 192px;
height: 122px;
}

@media screen and (max-width: 780px) {
.rgb-img{
margin-bottom: 20px;
}
}

.cmyk-img{
width: 397px;
height: 122px;
}

@media screen and (max-width: 780px) {
.cmyk-img{
width: 100%;
height: auto;	
margin-bottom: 20px;
}
}

.pdf-x4{
width: 460px;
height: auto;
}

@media screen and (max-width: 780px) {
.pdf-x4{
width: 100%;
height: auto;
}
}

.yubin-img{
width: 140px;
margin-top: 20px;
}

@media screen and (max-width: 780px) {
.yubin-img{
width: 100%;
height: auto;
}
}

.star-img01{
width: 24px;
}

@media screen and (max-width: 780px) {
.star-img01{
width: 10%;
height: auto;
}
}

.star-img02{
width: 80px;
}

@media screen and (max-width: 780px) {
.star-img02{
width: 34%;
height: auto;
}
}

.star-img03{
width: 200px;
}

@media screen and (max-width: 780px) {
.star-img03{
width: 100%;
height: auto;
}
}

.yubin-04{
width: 100%;
}
@media screen and (max-width: 780px) {
.yubin-04{
width: 100%;
height: auto;
}
}

.od-md02-01{
width: 207px;
height: auto;
}
@media screen and (max-width: 780px) {
.od-md02-01{
width: 50%;
height: auto;
margin: 14px auto;
}
}

.od-md03-01{
width: 220px;
height: auto;
}
@media screen and (max-width: 780px) {
.od-md03-01{
width: 50%;
height: auto;
margin: 14px auto;
}
}

.od-md03-05{
width: 280px;
height: auto;
}
@media screen and (max-width: 780px) {
.od-md03-05{
width: 100%;
height: auto;
margin: 14px auto;
}
}

.img70 {
width: 70%;
}

.img80 {
width: 80%;
}

.img90 {
width: 90%;
}

.border-org{
border: 3px solid rgba(251,79,82,0.50);
padding: 30px;
}

.border-blu{
border: 3px solid rgba(120,128,203,0.50);
padding: 30px;
}

.border-grn{
border: 3px solid rgba(109,146,92,0.50);
padding: 30px;
}

.border-gly{
border: 3px solid rgba(199,199,199,1.00);
padding: 30px;
}




/* item-list */
*, *:before, *:after {
box-sizing: border-box;
}
.item-list{
width: 100%;
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.item-list .left{
width: 49%;
padding: 10px 0;
margin-right:auto;
}
.item-list .right{
width: 49%;
padding: 10px 0;
}

.item-list h3{
font-size: 20px;
letter-spacing: 2px;
margin-bottom: 12px;
}

.item-list h4{
font-size: 16px;
letter-spacing: 1px;
margin-bottom: 2px;
}

.item-list th {
width: 50%;
padding-right: 10px;
}

.item-list td {
width: 50%;
vertical-align: text-top;
}

.item-list td p{
font-size: 12px;
}

.item-list .thin{
background: #4b69a9;
color: #FFF;
padding: 6px;
font-size: 12px;
font-weight: 700;
}

.item-list .basic{
background: #6baa82;
color: #FFF;
padding: 6px;
font-size: 12px;
font-weight: 700;	
}

.item-list .thick{
background: #cb6f3d;
color: #FFF;
padding: 6px;
font-size: 12px;
font-weight: 700;
}

.spec-area {
position: relative;
border-top: solid 2px #ECDFDF;
border-bottom: solid 2px #ECDFDF;
background: #f4f4f4;
line-height: 1.4;
padding: 0.8em 1.2em;
margin: 1.4em 0 0.5em;
}

.spec-area :after {
/*タブ*/
position: absolute;
font-weight: 900;
content: 'ポイント';
background: #ECDFDF;
color: #333;
left: 0px;
bottom: 100%;
border-radius: 5px 5px 0 0;
padding: 5px 7px 3px;
font-size: 0.7em;
line-height: 1;
letter-spacing: 0.05em;
}

.item-midashi {
font-size: 33px;
letter-spacing: 2px;
}

.item-midashi span{
font-size: 14px;
margin-left: 10px;
}


@media screen and (max-width: 640px) {
.item-list .left{
width: 100%;
padding: 10px;
margin-bottom: 30px;
}

.item-list .right{
width: 100%;
padding: 10px;
}

.item-list h3{
font-size: 18px;
}

.item-midashi {
font-size: 24px;
}

.item-midashi span{
font-size: 12px;
margin-left: 10px;
}

}