@charset "utf-8";
/*

header:ex(.h-logo)

fotterなど:ex(.f-logo)

*/

/*---- 
effect-description 
----*/
.p-box-list.p-three li {
    width: 46.5%;
}
.history-wrap {
    padding-top: 160px;
    background: url(../../web/images/effect/pc/effects_bg.jpg) no-repeat;
}
.history-inner-wrap {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
}
.history-inner-wrap .c-text{
    padding: 80px 20px 0;
}
.history-wrap .c-page-title {
    margin-top: 120px;
}
/*.effect-description .c-prodact-img {
    margin: 20px 0 0;
}
*/

/* ---- 沿革 ---- */
.timeline_item div, .timeline_item p {
    text-align: left;
}
.cp_timeline04 {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.cp_timeline04:before {
    position: absolute;
    top: 53%;
    left: 18px;
    transform: translatey(-50%);
    width: 1px;
    height: 81%;
    content: '';
    background: #CE9C37;
}
.cp_timeline04 .timeline_item {
    margin: 0 0 10px 80px;
}
.cp_timeline04 .timeline_item .time_date .time {
    font-family: serif;
    font-size: 50px;
    position: relative;
    margin: 0;
    font-weight: bold;
    letter-spacing: 3px;
    color: rgba(0,0,0,0.1);
}
.cp_timeline04 .timeline_item .time_date .time:before {
    position: absolute;
    top: 50%;
    left: -68px;
    width: 10px;
    height: 10px;
    content: '';
    border: 1px solid #CE9C37;
    background: #fff;
    border-radius: 50%;
}
.cp_timeline04 .timeline_item .time_date .flag {
    /* width: 398px; */
    font-size: 14px;
    margin: 0;
    margin-top: -45px;
    color: #000;
    font-weight: normal;
}
.cp_timeline04 .timeline_item .desc {
    font-size: 0.8em;
    line-height: 20px;
    margin-top: 10px;
    padding-left: 20px;
    border-left: 1px solid #880e4f;
}





/*-----------------------

-----------------------*/
h3 + p{
margin:0 0 40px;
}
.c-prodact-img{
max-width: 832px;
margin: auto;
}
.effect-description img{
width: 100%;
}




/*-----------------------

-----------------------*/
.effect-content .c-page-title {
margin: 40px 0;
padding: 0;
font-size: 18px;
}
.effect-content .c-page-title:before {
display: none;
}
.effect-content .c-page-title:after {
display: none;
}
.effect-content-icon {
width: 100px;
margin: 0 auto;
}
.effect-content-img > img{
width: 100%;
}

/*-----------------------

-----------------------*/
/*.content-01*/
.wrap-620{
max-width: 620px;
margin: auto;
}
.effect-content ul{
width: 100%;
}
.effect-content ul li{
width: 100%;
flex-wrap: wrap;
margin: 0 0 40px;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
.effect-content ul li:last-child{
margin: 0;
}
.effect-content-text{
padding: 20px;
}
.effect-content-text p{
text-align: left;
}
.effect-content-text .inner-title{
font-size: 18px;
}

/*content-02*/
.wrap-800{
max-width: 800px;
margin: auto;
}
.content-02 ul li:last-child{
margin: 0;
}
.content-02 .effect-content-img{
width: 361px;
}
.content-02 .c-parallelogram{
width: 204px;
margin: 0;
padding: 4px 0;
font-size: 12px;
}
.content-02 .inner-title{
margin: 20px 0 0;
}

/*content-03*/
.content-03 li:first-child > .effect-content-img{
width: 160px;
}
.content-03 li:last-child > .effect-content-img{
width: 300px;
}


/*content-04*/
.content-04 ul{
width: 50%;
flex-wrap: wrap;
margin: auto;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.content-04 ul li{
display: unset;
}
li.gloss .c-parallelogram{
margin: 10px auto 0;
}
li.mat .c-parallelogram{
margin: 10px auto 0;
}

.gloss img{
width: 100%
}
.mat img{
width: 100%;
}


/*content-05*/
.content-05 ul{
width: 100%;
display: flex;
justify-content: center;
}
.content-05 ul li{
display: unset;
width: unset;
}
.content-05 ul li:first-child{
margin: 0 20px 0 0;
}
.content-05 ul li:last-child{
margin: 0;
}










/*-----------------------

-----------------------*/

@media (min-width: 768px) and (max-width: 1024px){
.wrap-580 {
max-width: 620px;
margin: auto;
}
.wrap-800 {
max-width: 700px;
margin: auto;
}
.history-inner-wrap{
max-width: 600px;
margin: auto;
}
.effect-description .c-text{
max-width: 600px;
margin: auto;
}
.c-prodact-img{
max-width: 600px;
}

.content-02 .effect-content-img{
width: 300px;
}
.content-03 li:last-child > .effect-content-img{
width: 220px;
}
.content-04 ul {
    width: 50%;
    margin: auto;
}
}


/*-----------------------

-----------------------*/

@media (max-width: 767px){
.effect-content-img{
width: 60%;
}
.history-inner-wrap .c-text {
    padding: 40px 40px 0;
}
.cp_timeline04:before {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translatey(-50%);
    width: 1px;
    height: 84%;
    content: '';
    background: #CE9C37;
}
.effect-content-text .inner-title {
    text-align: center;
}
h3 + p {
    text-align: left;
}
.content-02 .c-parallelogram {
    margin: auto;
}

.content-04 ul {
    width: 80%;
}
.content-05 ul li:first-child {
    margin: 0 10px 0 0;
}
}