@charset "UTF-8";
/* CSS Document */

.pop1.thebe::before {
    transform-origin: 0% 50%;
    transform: scale3d(1, 1, 1);
}

.d_maintitle{
    font-size: 4rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.6;
    margin-bottom: 1em;
    color: #232323;
    position: relative;
}
.d_maintitle .illust{
    position: absolute;
}
.d_maintitle .illust img{
    max-height: 100%;
}
h3.d_title{
    position: relative;
}
h3.d_title:after{
    content: "";
    display: block;
    height: 4.5em;
    border-left: 1px solid #d1d1d1;
    position: absolute;
left: 1.5em;
  bottom: -4.9em;
}

#index{}
#index .readbox{
    padding: 8em  0;
}
#index .readbox{
    width: 55%;
    text-align: justify;
}
#index .readbox h3{
    font-size: 2.8rem;
    font-weight: 600;
    padding-bottom: 1.4em;
}
#index .readbox p{
    font-size: 1.8rem;
    font-weight: 500;
}
#index .pentacle,
#index .pentacle .image{
    position: relative;
}
#index .pentacle .logo{
    position: relative;
      margin: 0 -1.5em;
}
#index .pentacle .pop{
    position: absolute;
    color: #fff;
}
#index .pentacle .pop .title{
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 600;
    font-family: "Roboto", sans-serif;
}
#index .pentacle .pop .txt{}
#index .pentacle .pop1{
top: 20em;
  left: 49%;
}
#index .pentacle .pop2{
top: 29em;
  right: 32%;
}
#index .pentacle .pop3{
    bottom: 26.3em;
    right: 40%;
}
#index .pentacle .pop4{
bottom: 29em;
  left: 36.5%;
}
#index .pentacle .pop5{
top: 26em;
  left: 35%;
}

#index .nohow{
    position: absolute;
    width: 30%;
    text-align: justify;
}
#index .nohow h3{
    font-size: 2.2rem;
    font-weight: 600;
    padding-bottom: 1em;
    position: relative;
}
#index .nohow h3:before{
    content: "●";
    display: block;
    position: absolute;
    left: -1.3em;
}
#index .nohow.box1 h3:before{
    color: #fabe00;
}
#index .nohow.box2 h3:before{
    color: #f08300;
}
#index .nohow.box3 h3:before{
    color: #812f46;
}
#index .nohow.box4 h3:before{
    color: #005083;
}
#index .nohow.box5 h3:before{
    color: #3ea6b2;
}
#index .nohow.box1{
left: 35%;
  top: -2em;
}
#index .nohow.box2{
right: -1.5em;
  top: 21em;
}
#index .nohow.box3{
right: 10%;
  bottom: 10em;
}
#index .nohow.box4{
left: 15%;
  bottom: 10em;
}
#index .nohow.box5{
left: 0;
  top: 19em;
}

#index .flow{
    padding: 6em 0 5em 0;
    margin: 5em 0 7em 0;
    background-color: #f4f6f8;
    width: 100%;
}
#index .flow h3{
    text-align: justify;
    font-size: 2.4rem;
    font-weight: 500;
}
#index .flow .read{
    text-align: justify;
    width: 55%;
    padding: 2em 0 4em 0;
}
#index .flowbox{
    position: relative;
}
#index .flow ul{
    display: flex;
    justify-content: space-between;
    margin: 20em 10em;
    border-bottom: 2px solid #4c4949;
}
#index .flow li{
    width: 2em;
    margin: -1em 0;
}
#index .flow dl{
    border-radius: 1em;
    position: absolute;
    border: 1px solid;
    background-color: #fff;
    width: 12em;
    display: flex;
    flex-wrap: wrap;
}
#index .flow dl:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
  height: 1em;
  width: 2em;
}
#index .flow dl:nth-child(even){
    bottom: 2.5em;
}
#index .flow dl:nth-child(even):before{
  clip-path: polygon(0 0, 100% 0, 50% 100%);
    bottom: -1em;
}
#index .flow dl:nth-child(even) dt{ order: 2;
    border-radius: 0 0 0.7em 0.7em;}
#index .flow dl:nth-child(even) dd{ order: 1;}
#index .flow dl:nth-child(even) img{ margin-top: 1em;}
#index .flow dl:nth-child(odd){
    top: 2.5em;
}
#index .flow dl:nth-child(odd):before{
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
    top: -1em;
}
#index .flow dl:nth-child(odd) dt{
    border-radius: 0.7em 0.7em 0 0;}
#index .flow dl:nth-child(odd) img{ margin-bottom: 1em;}
#index .flow dt{
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
    padding: 0.3em 0;
    width: 100%;
}
#index .flow dd{
    width: 100%;
}
#index .flow dd img{
    width: 4em;
}
#index .flow dd p{
    text-align: justify;
    font-weight: 500;
    margin: 1em;
    height: 6em;
  line-height: 1.4;
}
#index dl.flow1{
    border-color: #c1ab7f;
    left: 5em;
}
#index .flow dl.flow1:before,#index .flow1 dt{
    background-color: #c1ab7f;
}
#index dl.flow2{
    border-color: #a9ba8e;
left: 14em;
}
#index .flow dl.flow2:before,#index .flow2 dt{
    background-color: #a9ba8e;
}
#index dl.flow3{
    border-color: #6a7e9c;
left: 23em;
}
#index .flow dl.flow3:before,#index .flow3 dt{
    background-color: #6a7e9c;
}
#index dl.flow4{
    border-color: #c89a9a;
left: 32em;
}
#index .flow dl.flow4:before,#index .flow4 dt{
    background-color: #c89a9a;
}
#index dl.flow5{
    border-color: #a58fab;
right: 32em;
}
#index .flow dl.flow5:before,#index .flow5 dt{
    background-color: #a58fab;
}
#index dl.flow6{
    border-color: #9cb7d4;
right: 23em;
}
#index .flow dl.flow6:before,#index .flow6 dt{
    background-color: #9cb7d4;
}
#index dl.flow7{
    border-color: #8398a3;
right: 14em;
}
#index .flow dl.flow7:before,#index .flow7 dt{
    background-color: #8398a3;
}
#index dl.flow8{
    border-color: #aca94d;
    right: 5em;
}
#index .flow dl.flow8:before,#index .flow8 dt{
    background-color: #aca94d;
}


#index .top_list .container{
    display: flex;
    padding-bottom: 8em;
}
#index .top_list .title{
    width: 6em;
    font-size: 2rem;
    font-weight: 600;
    text-align: justify;
}
#index .list{
    border-left: 1px solid #cfcfcf;
    flex: 1;
    text-align: justify;
    padding: 0 2em 0 4em;
}
#index .list h4{
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 0.5em;
}
#index .list .list_img{
    border: 1px solid #cfcfcf;
    border-radius: 1em;
    overflow: hidden;
    margin-top: 0.5em;
}
#index .list .txt{
    padding-bottom: 2em;
}
#index .list .img1{
    margin-bottom: 3em;
}
#index .list .flexbox{
    margin-top: 3em;
    justify-content: space-between;
    padding-left: 0.5em;
}
#index .list .flexbox > div{
    width: 48%;
}
#index .list .flexbox .list_img{
    margin: 0.5em 0 1em -0.5em;
}

/*------------------------------------------------------------------------------------smt*/  
#smt .read,#equipment .read, #line .read{
    text-align: justify;
    font-size: 2rem;
    line-height: 2;
    width: 50%;
    margin-bottom: 5em;
    color: #232323;
}

#smt{
    padding: 5em 0 20em 0;
}
#smt .d_maintitle .illust{
  right: 3em;
  top: 2em;
  height: 5em;
}
#smt .flexbox{
    justify-content: space-between;
    position: relative;
    margin-bottom: 6em;
}
#smt .flexbox .inbox{
    background-color: #eeebe7;
    border-radius: 1em;
    padding: 4em 3em 6em 3em;
    width: 46%;
}
#smt .flexbox .inbox h3{
    font-size: 2.4rem;
    font-weight: 600;
    margin-bottom: 1.5em;
}
#smt .flexbox .inbox p{
    text-align: justify;
}
#smt .text{
    position: absolute;
    color: #696868;
    font-size: 15rem;
    font-weight: 800;
    line-height: 1;
    left: -5em;
    right: -5em;
    margin: 0 auto;
    bottom: -0.13em;
    opacity: 0.3;
    display: none;
}

.smtline h3{
    text-align: left;
    font-weight: 600;
    margin-bottom: 2em;
    color: #000;
}
.smtline h3 span{
    font-size: 4rem;
}
#smt .smtline{
    background-color: #f7f8fc;
    padding: 5em 0 2em 0;
}
#smt .smtline .image{
    position: relative;
    margin-top: 5em;
    margin: 7em auto 0 auto;
    max-width: 70em;
}
#smt .smtline .line{
    position: absolute;
top: -2.5em;
  left: 0;
  right: -1.8em;
}
#smt .smtline .txt{
    position: absolute;
}
#smt .smtline .txt1{
top: 10%;
  right: -8%;
}
#smt .smtline .txt2{
top: 16%;
  right: 1.5%;
}
#smt .smtline .txt3{
top: 21%;
  right: 11%;
}
#smt .smtline .txt4{
top: 26.7%;
  right: 17.3%;
}
#smt .smtline .txt4a{
top: 19.4%;
  right: 27.5%;
}
#smt .smtline .txt5{
top: -2.6%;
  right: 39.3%;
}
#smt .smtline .txt6{
top: -1.4%;
  left: 34%;
}
#smt .smtline .txt7{
top: -9%;
  left: 12%;
}
#smt .smtline .container{
    position: relative;
}
#smt .more{
    position: absolute;
    width: 27em;
    background-color: #003c76;
    color: #fff;
    border-radius: 1em;
    transform: translateY(-55%);
    left: 5em;
}
#smt .more a{
    display: block;
    padding: 3em 2em 2em 2em;
    color: #fff;
}
#smt .more ul{
    display: flex;
    justify-content: space-between;
    padding: 0 1em;
}
#smt .more li{
    width: 31%;
    overflow: hidden;
    border-radius: 100%;
}
#smt .more .title{
    font-size: 4.2rem;
    font-weight: 300;
}
#smt .more .read{
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    color: #fff;
    width: inherit;
    margin-bottom: 1.2em;
}
#smt .more .btn{
    display: block;
    width: 12em;
    color: #194f83;
    background-color: #fff;
    border: 1px solid #fff;
    text-align: center;
    padding: 1em 0;
    font-size: 1.4rem;
    border-radius: 2em;
    margin: 0 auto;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all  0.2s ease;
}
#smt .more a:hover .btn{
    background-color: #00305f;
    border-color: #abd1f6;
    color: #abd1f6;
}

/*------------------------------------------------------------------------------------equipment*/  
#equipment{
    padding: 5em 0 8em 0;
}
#equipment .d_maintitle .illust{
right: 2em;
  top: 1em;
  height: 5.5em;
}
#equipment .backg{
    display: flex;
}
#equipment .backg:before, #equipment .backg:after{
    content: "";
    flex: 1;
}
#equipment .backg:before{
    background-color: rgba(255,255,255,0.6);
}
#equipment .backg:after{
    background-color: rgba(238,243,247,0.6);
}

#equipment .clum{
    width: 17em;
    text-align: left;
    padding: 3em 1em;
    background-color: rgba(255,255,255,0.6);
}
#equipment .clum li a{
    color: #000;
}
#equipment .clum li a:hover{
    color: #0069d5;
}
#equipment .clum li .triger, #equipment .clum li.title{
    display: block;
    font-weight: 600;
    padding: 1.5em 0 0.6em 0;
    position: relative;
    color: #000;
    cursor: pointer;
}
#equipment .clum .in{
}
#equipment .clum .in li{
    padding: 0.2em 0 0.2em 1em;
}
#equipment .clum .in li a{
    cursor: pointer;
}
#equipment .clum a.tab.active{
    color: #0069d5;
}

#equipment .mainbox{
    width: 68em;
    padding: 2em 0 5em 5em;
    background-color: rgba(238,243,247,0.6);
}
#equipment .mainbox h3{
    text-align: left;
    font-weight: 600;
    padding: 2em 0;
}
#equipment .mainbox h3 span{
    font-size: 2.6rem;
}
#equipment .mainbox ul{
    display: flex;
    flex-wrap: wrap;
}
#equipment .mainbox li{
    position: relative;
    width: 31%;
    margin-bottom: 3em;
    background-color: #fff;
    border-radius: 1em;
    padding: 1.3em;
    text-align: left;
    box-shadow: 5px 5px 8px 0px rgba(0, 0, 0, 0.21);
    margin-right: 3.5%;
}
#equipment .mainbox li:nth-child(3n){
    margin-right: 0;
}
#equipment .mainbox li img{
    border-radius: 1em;
}
#equipment .mainbox li:before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 97%;
    height: 97%;
    border: 1px solid #d7d3c1;
    border-radius: 1em;
}/*
#equipment .mainbox li:after{
    color: #c4bb96;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-style: oblique;
    position: absolute;
    right: 1em;
    bottom: 0.5em;
}
#equipment .mainbox .smt li:after{
    content: "STM Equipment";
}
#equipment .mainbox .assem li:after{
    content: "Assembly system";
}
#equipment .mainbox .analy li:after{
    content: "Analyzers";
}
#equipment .mainbox .prop li:after{
    content: "Proprietary equipment";
}*/
#equipment .mainbox li h4{
    font-weight: 600;
    line-height: 1.3;
}
#equipment .mainbox li p{
    font-size: 1.5rem;
    padding: 0.4em 0;
}
#equipment .mainbox li .image{
    min-height: 19em;
}

#equipment .mainbox .panel {
  display: none;
  text-align: center;
}
#equipment .mainbox .panel.active, #equipment .clum .in.active {
  display: block;
}

/*------------------------------------------------------------------------------------line*/
#line{
    padding: 5em 0 15em 0;
}
#line .d_maintitle .illust{
right: 2.5em;
  top: 0.8em;
  height: 6em;
}
#line .images{}
#line ul{
    display: flex;
    justify-content: space-between;
    margin: 6em;
}
#line li{
    border: 1px solid #848484;
    background-color: #fff;
    border-radius: 1em;
    padding: 5em 3em 2em 3em;
    width: 30%;
}
#line li .icon{
    width: 5em;
    margin: 0 auto;
}
#line li h3{
    font-size: 1.8rem;
font-weight: 500;
    margin: 1em 0;
}
#line li p{
    text-align: justify;
}
#line .imgbox img{
    width: 100%;
}

/*------------------------------------------------------------------------------------material*/
#material{
    padding: 5em 0 8em 0;
}
#material .d_maintitle .illust{
right: 1em;
  top: 2.3em;
  height: 4.2em;
}
#material .read{
    text-align: justify;
    font-size: 2rem;
    line-height: 2;
    width: 55%;
    margin-bottom: 4em;
    color: #232323;
}
#material .map{
    margin: 0 -6em;
}
#material .flexbox{
    text-align: justify;
    margin-bottom: 4em;
}
#material .flexbox h3{
    font-size: 1.8rem;
    font-weight: 600;
    width: 30%;
}
#material .inbox{
    flex: 1;
}
#material h4{
    font-weight: 600;
}
#material .inbox p{
    padding-bottom: 2em;
}
#material li{
    display: block;
    border: 1px solid #d3d3d3;
    border-radius: 0.6em;
    padding: 0.7em 1.5em;
    margin-bottom: 0.5em;
}
#material .imgbox{
    margin-top: 8em;
}
#material .imgbox img.rellax{
    width: 100%;
}


/*------------------------------------------------------------------------------------production*/
#production{
    padding: 5em 0 8em 0;
}
#production .d_maintitle .illust{
right: 2em;
  top: 0.5em;
  height: 6em;
}
#production h3.smtline{
    text-align: left;
    font-weight: 600;
    color: #2a2a2a;
}
#production h3.smtline span{
    font-size: 5.5rem;
      font-weight: 700;
}
#production .read{
    text-align: justify;
    font-size: 2rem;
    line-height: 2;
    width: 55%;
    margin-bottom: 5em;
    color: #232323;
}
#production .read2{
    text-align: justify;
    line-height: 2;
    width: 55%;
    margin: 2em 0 5em 0;
}
#production #step{
    background-color: #f4f6f8;
    padding: 5em 0;
    margin-bottom: 6em;
}
#production .stepbox{
margin: 2em 12em 4em 12em;
    position: relative;
}
#production .stepbox:before{
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: #b3d0dd;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#production .stepbox:after{
    content: "";
    position: absolute;
    display: block;
    height: 80%;
    aspect-ratio: 1 / 1;
    background-color: #d6ebf9;
    border-radius: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
}
#production .image{
    position: relative;
    z-index: 4;
}
#production .stepbox .txt{
    position: absolute;
    top: 56.5%;
    color: #fff;
    font-weight: 500;
    z-index: 5;
}
#production .stepbox .txt1{
    left: 6.5em;
}
#production .stepbox .txt2{
    left: 0;
    right: 0;
}
#production .stepbox .txt3{
    right: 6em;
}
#production .stepbox .icon{
    position: absolute;
    font-weight: 500;
    z-index: 4;
}
#production .stepbox .icon img{
    width: 10.5em;
}
#production .stepbox .icon p{
    font-size: 1.5rem;
    padding-top: 0.4em;
}
#production .stepbox .icon1{
top: -1.5em;
  left: 14em;
}
#production .stepbox .icon2{
    top: -5.8em;
    left: 0;
    right: 0;
      margin: 0 auto;
}
#production .stepbox .icon3{
top: -1.5em;
  right: 14em;
}
#production .stepbox .icon4{
    bottom: -1em;
    left: 14em;
}
#production .stepbox .icon5{
    bottom: -4.5em;
    left: 0;
    right: 0;
      margin: 0 auto;
}
#production .stepbox .icon6{
    bottom: -1em;
    right: 14em;
}
#production ul{
    display: flex;
    justify-content: space-between;
}
#production li{
    width: 15.5%;
    border: 1px solid #b2b2b2;
    border-radius: 0.6em;
    position: relative;
}
#production li img{
    border-radius: 0.6em 0.6em 0 0;
}
#production li p{
    font-size: 1.8rem;
    line-height: 1.4;
    font-weight: 500;
    padding: 1.2em 0;
}
#production li:last-child p{
    padding: 0.5em 0;
}
#production li:after{
    content: "";
    background-image: url("img/production_arrow.png");
    background-size: 100% auto;
    display: block;
    position: absolute;
  width: 2.8em;
  height: 2.1em;
  top: 41%;
  right: -2em;
    z-index: 3;
}
#production li:last-child:after{
    display: none;
}
#production h4{
    text-align: left;
    font-size: 2rem;
    font-weight: 500;
    margin: 4em 0 1em 0;
}
#production .indent{
    text-align: justify;
    text-indent: -1em;
    padding: 0.4em 0 0 1em;
}


/*------------------------------------------------------------------------------------traceability*/
#traceability{
    padding: 5em 0 8em 0;
}
#traceability .d_maintitle .illust{
right: 0.2em;
  top: 3.5em;
  height: 5em;
}
#traceability .read{
    text-align: justify;
    font-size: 2rem;
    line-height: 2;
    width: 65%;
    color: #232323;
}
#traceability .flexbox{
    margin-top: 6em;
}
#traceability .flexbox h3{
    font-size: 1.8rem;
    font-weight: 600;
    text-align: left;
    width: 27%;
}
#traceability .inbox{
    flex: 1;
    text-align: justify;
}
#traceability dl{
    border-top: 1px solid #bcbcbc;
    padding: 1em 0;
}
#traceability dl.last{
    border-bottom: 1px solid #bcbcbc;
}
#traceability dt{
    font-weight: 500;
    padding-bottom: 0.5em;
}
#traceability h4{
    font-weight: 500;
    margin: 3em 0 1em 0;
}
#traceability .title{
    font-weight: 500;
}
#traceability .txt{
    padding: 0.6em 0 1.8em 0;
}
#traceability .flow1{
    margin: 3em 0 6em 0;
    display: flex;
}
#traceability .flow1 .middle,#traceability .flow1 .middle2{
    margin: 3em 1em 0 1em;
}
#traceability .flow1 .middle p,#traceability .flow1 .middle2 p{
    text-align: center;
    padding: 1em 0 1.5em 0;
    margin-top: 1em;
}
#traceability .flow1 .middle2 p{
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    margin-left: -1em;
    margin-right: -1em;
}
#traceability .flow1 .middle3 p{
    border-right: 1px solid #e4e4e4;
    margin-left: -1em;
    margin-right: -1em;
}
#traceability .flow1 .line{
    position: relative;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-weight: 500;
    width: 6em;
    line-height: 2.37em;
}
#traceability .flow1 .line:before{
  content: '';
    position: absolute;
    top: 0;
    left: -1.4em;
  width: 0px;
  height: 0px;
  border-width: 1.2em 0 1.2em 1.5em;
  border-style: solid;
}
#traceability .flow1 .line:after{
    content: "";
    position: absolute;
    top: 0;
    right: -1.4em;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 1.2em 1.5em;
  border-left-color: #333;
  border-right: 0;
}
#traceability .flow1 .ribon1{
    background-color: #b2d3a5;
}#traceability .flow1 .ribon1:before{
  border-color: #b2d3a5 #b2d3a5 #b2d3a5 transparent;
}#traceability .flow1 .ribon1:after{
  border-left-color: #b2d3a5;
}
#traceability .flow1 .ribon2{
    background-color: #a9ba8e;
    margin-right: 2em;
}#traceability .flow1 .ribon2:before{
  border-color: #a9ba8e #a9ba8e #a9ba8e transparent;
}#traceability .flow1 .ribon2:after{
  border-left-color: #a9ba8e;
}
#traceability .flow1 .ribon3{
    background-color: #9fc7d8;
}#traceability .flow1 .ribon3:before{
  border-color: #9fc7d8 #9fc7d8 #9fc7d8 transparent;
}#traceability .flow1 .ribon3:after{
  border-left-color: #9fc7d8;
}
#traceability .flow1 .ribon4{
    background-color: #8da1a7;
}#traceability .flow1 .ribon4:before{
  border-color: #8da1a7 #8da1a7 #8da1a7 transparent;
}#traceability .flow1 .ribon4:after{
  border-left-color: #8da1a7;
}
#traceability .flow1 .ribon5{
    background-color: #6a7f9b;
}#traceability .flow1 .ribon5:before{
  border-color: #6a7f9b #6a7f9b #6a7f9b transparent;
}#traceability .flow1 .ribon5:after{
  border-left-color: #6a7f9b;
}
#traceability .flow1 img{
    height: 6em;
}
#traceability .flow1 .first p{
    padding-left: 1em;
}
#traceability .flow1 .last p{
    text-align: right;
    padding-right: 1em;
}
#traceability .flow1 .first p,#traceability .flow1 .last p{
    font-weight: 600;
}
#traceability .flow2{
    display: flex;
    font-weight: 500;
    position: relative;
}
#traceability .flow2 p{
    text-align: center;
}
#traceability .flow2 .in1,#traceability .flow2 .icon2{
    width: 7em;
}
#traceability .flow2 .in1{
    margin: -2em 2em 0 0;
}
#traceability .flow2 .in3{
    width: 10em;
    margin: 2em 0 0 1em;
}
#traceability .flow2 .in2{
    flex: 1;
}
#traceability .flow2 .in2 > div{
    color: #fff;
    position: relative;
    text-align: center;
}
#traceability .flow2 .line1:after,#traceability .flow2 .line2:after,#traceability .flow2 .line3:before,#traceability .flow2 .line4:before{
    content:"";
    position: absolute;
    display: block;
    background-repeat: no-repeat;
    background-size: auto 100%;
    height: 100%;
    width: 2em;
    top: 0;
    bottom: 0;
}
#traceability .flow2 .line1,#traceability .flow2 .line2{
    background-color: #9bb7d4;
    margin: 0.5em 1.3em 0.5em 0;
    padding: 0.4em 0 0.4em 1.2em;
}
#traceability .flow2 .line1:after,#traceability .flow2 .line2:after{
    background-image: url("img/traceability_flow2_3.png");
    background-position: 100% 50%;
    right: -1.25em;
}
#traceability .flow2 .line3,#traceability .flow2 .line4{
    background-color: #c3b091;
    margin: 0.5em 0 0.5em 1.2em;
    padding: 0.4em 1.3em 0.4em 0;
}
#traceability .flow2 .line3:before,#traceability .flow2 .line4:before{
    content:"";
    position: absolute;
    display: block;
    background-image: url("img/traceability_flow2_4.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: 0% 50%;
    left: -1.2em;
}
#traceability .flow2 .line1,#traceability .flow2 .line4{
    margin-left: 60%;
}
#traceability .flow2 .icon1{
    position: absolute;
width: 7em;
  top: -4em;
  left: 38%;
}

.simpleParallax {
  position: relative;
  padding-top: 35%;
}
#material .rellax {
  position: absolute;
    top: -5%;
  left: 0;
}
#line .rellax {
  position: absolute;
    top: 10%;
  left: 0;
}

@media screen and (min-width: 769px) and (max-width: 1500px) {
    
#index .list{
    margin: 6em 0 8em 2em;
}

}
@media only screen and (max-width: 768px) {
    
.d_maintitle{
    font-size: 2.4rem;
    margin: 3em 0 1em 0;
}
#smt .d_maintitle .illust,#equipment .d_maintitle .illust,#line .d_maintitle .illust,#material .d_maintitle .illust,#production .d_maintitle .illust,#traceability .d_maintitle .illust {
  right: -0.3em;
  top: -4em;
  height: 4em;
}
    
h3.d_title:after{
    height: 3em;
left: 1.5em;
bottom: -3.3em;
}
    
#index .readbox{
    display: block;
    padding: 5em 0;
}
#index .readbox{
    width: 100%;
    padding-bottom: 2em;
}
#index .readbox h3{
    font-size: 2.8rem;
}
#index .pentacle .image{
    margin-right: 0;
}
#index .pentacle .logo{
    width: 100%;
    margin: 0;
}
#index .pentacle .pop{
    font-size: 1.4rem;
}
#index .pentacle .pop .title{
    font-size: 1.8rem;
}
#index .pentacle .pop .txt{}
#index .pentacle .pop1{
top: 3em;
    left: 42%;
}
#index .pentacle .pop2{
top: 10em;
    right: 1em;
}
#index .pentacle .pop3{
bottom: 1.5em;
    right: 6.8em;
}
#index .pentacle .pop4{
bottom: 3em;
    left: 3em;
}
#index .pentacle .pop5{
top: 7.5em;
    left: 2em;
}
#index .nohow{
    position: relative;
    width: 100%;
}
#index .nohow h3{
    font-size: 2rem;
    padding: 2.5em 0 0.8em 0;
}
#index .nohow h3:before{
    display: inline-block;
    position: relative;
    left: inherit;
    padding-right: 0.3em;
}
#index .nohow.box1,#index .nohow.box2,#index .nohow.box3,#index .nohow.box4,#index .nohow.box5{
left: inherit;
  top: inherit;
right: inherit;
  bottom: inherit;
}

#index .flow{
    padding: 5em 0 5em 0;
    margin: 5em 0 7em 0;
}
#index .flow h3{
    font-size: 2rem;
}
#index .flow .read{
    width: 100%;
    padding: 2em 0 4em 0;
}
#index .flowbox{
    position: relative;
}
#index .flow ul{
    display: block;
    margin: 0 0 0 1em;;
    border-bottom: none;
    border-left: 2px solid #4c4948;
    position: absolute;
    left: -1em;
    top: 0.6em;
}
#index .flow li{
    width: 2em;
    margin: -0.1em 0 0 -1em;
    padding-bottom: 8.95em;
}
    #index .flow li:nth-child(4),#index .flow li:nth-child(5){
    padding-bottom: 9em;
    }
    #index .flow li:last-child{
        padding-bottom: 0;
    }
    #index .flow li img{
        transform: rotate(90deg);
    }
#index .flow dl{
    border-radius: 1em;
    position: relative;
    width: inherit;
    display: block;
    left: auto;
    right: auto;
    margin: 0 0 1em 2.5em;
}
#index .flow dl:before{
    right: auto;
    margin: auto;
  height: 2em;
  width: 1em;
}
#index .flow dl:nth-child(even){
    bottom: auto;
}
#index .flow dl:nth-child(odd){
    top: auto;
}
#index .flow dl:nth-child(even):before,#index .flow dl:nth-child(odd):before{
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
    bottom: auto;
    top: 0.5em;
    left: -1em;
}
#index .flow dl:nth-child(even) dt,#index .flow dl:nth-child(odd) dt{
    border-radius: 0.7em 0.7em 0 0;}
#index .flow dl:nth-child(even) img{ margin-top: inherit;}
    
#index .flow dl:nth-child(odd) img{ margin-bottom: inherit;}
#index .flow dt{
}
#index .flow dd{
    display: flex;
    align-items: center;
}
#index .flow dd img{
    width: 4em;
}
#index .flow dd p{
    margin: 1em;
    height: inherit;
  line-height: 1.6;
}

#index .top_list .container{
    display: block;
    padding-bottom: 5em;
}
#index .top_list .title{
    width: auto;
    font-size: 2rem;
    padding-bottom: 0.5em;
}
#index .list{
    padding: 0 0 0 1em;
}
#index .list .flexbox{
    display: block;
    padding-left: 0;
}
#index .list .flexbox > div{
    width: 100%;
}
#index .list .flexbox .list_img{
    margin: 0.5em 0 1em 0;
}
  
/*------------------------------------------------------------------------------------smt sp*/  
#smt .read,#equipment .read, #line .read{
    font-size: 1.8rem;
    width: 100%;
}

#smt{
    padding: 5em 0 25em 0;
}
#smt .flexbox{
    display: block;
    margin-bottom: 6em;
}
#smt .flexbox .inbox{
    padding: 3em 1.5em 2em 1.5em;
    width: 100%;
    margin-bottom: 3em;
}
#smt .flexbox .inbox h3{
    font-size: 2rem;
    margin-bottom: 1.2em;
}
#smt .text{
    font-size: 10rem;
    line-height: 0.8;
    left: -3em;
    right: -3em;
    bottom: 2em;
}

.smtline h3{
}
.smtline h3 span{
    font-size: 3rem;
}
#smt .smtline{
    padding: 4em 0 3em 0;
}
#smt .smtline .image{
    padding-right: 0;
    margin-top: 0;
}
    
#smt .smtline .line{
top: 0.5em;
    left: 0;
    right: -0.5em;
}
#smt .smtline .txt{
    font-size: 0.8rem;
}
#smt .smtline .txt1{
top: 17%;
    right: -1.9em;
}
#smt .smtline .txt2{
top: 22%;
    right: 1%;
}
#smt .smtline .txt3{
top: 28%;
    right: 7%;
}
#smt .smtline .txt4{
top: 32%;
    right: 17.5%;
}
#smt .smtline .txt4a{
top: 22.5%;
    right: 23.5%;
}
#smt .smtline .txt5{
top: 3%;
    right: 29.5%;
}
#smt .smtline .txt6{
top: 4%;
    left: 31%;
}
#smt .smtline .txt7{
top: -4%;
    left: 8%;
  }

#smt .smtline .container{
    position: relative;
}
#smt .more{
    width: 88%;
    transform: translateY(0);
    left: 0;
    right: 0;
    margin: 0 auto;
}
#smt .more a{
    padding: 3em 2em 2em 2em;
}
#smt .more ul{
    padding: 0;
}
#smt .more li{
}
#smt .more .title{
    font-size: 3.5rem;
}
#smt .more .read{
    font-size: 1.5rem;
    width: 100%;
}

/*------------------------------------------------------------------------------------equipment sp*/  
#equipment{
    padding: 5em 0 8em 0;
}
#equipment .backg{
      background-image: none;
    display: block;
}
#equipment .backg:before, #equipment .backg:after{
    display: none;
}
#equipment .flexbox{
    display: block;
}
    .backg .container{
        padding: 0;
    }
#equipment .clum{
    position: absolute;
    top: 0;
        left: 0;
    width: 100%;
    padding: 1em 1.5em 1.5em 1.5em;
    display: flex;
    flex-wrap: wrap;
}
    #equipment .clum.fixed {
    position: fixed;
    padding: 0em 1.5em 1.5em 1.5em;
        background-color: #fff;
        z-index: 10;
    }
    #equipment .clum li{
        position: relative;
        width: 50%;
    }
#equipment .clum li .triger,#equipment .clum li.title{
    padding: 1em 0 0.5em 0;
    position: relative;
}
#equipment .clum li.title::before{
	content: "→";
	position: absolute;
	right: 2em;
}
#equipment .clum li .triger::before{/* 閉じている時 */
	content: "＋";
	position: absolute;
	right: 2em;
}
#equipment .clum li .triger.active::before{/* 開いている時 */
	content: "－";
}
#equipment .clum .in{
    display: none;
    position: absolute;
    width: 15em;
    background-color: #fff;
    border-radius: 1em;
    padding: 0.5em;
    z-index: 3;
    border: 1px solid #eef3f7;
}
#equipment .clum .in li{
    width: 100%;
    padding: 0.2em 0 0.2em 1em;
}

#equipment .mainbox{
    width: 100%;
    background-color: rgba(238,243,247,0.6);
    padding: 10em 1.5em 2em 1.5em;
}
#equipment .mainbox h3{
    padding: 0 0 2em 0;
}
#equipment .mainbox h3 span{
    font-size: 2.6rem;
}
#equipment .mainbox ul{
    display: block;
}
#equipment .mainbox li{
    width: 100%;
}
#equipment .mainbox li .image{
    min-height: inherit;
    margin-bottom: 1.5em;
}
    
/*------------------------------------------------------------------------------------line sp*/  
#line{
    padding: 5em 0 8em 0;
}
#line .images{}
#line ul{
    display: block;
    margin: 4em 0;
}
#line li{
    padding: 4em 2em 2em 2em;
    width: 100%;
}
    #line li:nth-child(2){
        margin: 2em 0;
    }
#line li .icon{
    width: 5em;
    margin: 0 auto;
}
#line li h3{
    font-size: 1.8rem;
font-weight: 500;
    margin: 1em 0;
}
#line li p{
    text-align: justify;
}
    #line .imgbox{
        overflow: hidden;
    }
#line .imgbox img{
    width: 150%;
}
/*------------------------------------------------------------------------------------material sp*/
#material{
    padding: 5em 0 5em 0;
}
#material .read{
    font-size: 1.8rem;
    width: 100%;
    margin-bottom: 1em;
}
#material .map{
    margin: 0 -6em;
}
#material .flexbox{
    display: block;
}
#material .flexbox h3{
    width: 100%;
    padding-bottom: 1em;
}
#material .inbox{
}
#material h4{
}
#material .inbox p{
}
#material li{
}
#material .imgbox{
    margin-top: 4em;
    overflow: hidden;
}
#material .imgbox img{
    width: 130%;
}
    
    
/*------------------------------------------------------------------------------------production sp*/
#production{
    padding: 5em 0 8em 0;
}
#production h3 span, #production h3.smtline span {
    font-size: 3rem;
}
#production .read{
    font-size: 1.8rem;
    width: 100%;
}
    #production .read2{
        width: 100%;  margin-bottom:4em;
    }
#production #step{
    padding: 5em 0 4em 0;
    margin-bottom: 6em;
}
#production .stepbox{
margin: 2em -1em 4em -1em;
    position: relative;
}
#production .image{
    position: relative;
    z-index: 4;
}
#production .stepbox .txt{
    top: 54.5%;
    font-size: 1.3rem;
}
#production .stepbox .txt1{
    left: 2.2em;
}
#production .stepbox .txt2{

}
#production .stepbox .txt3{
    right: 1.6em;
}
#production .stepbox .icon{
}
#production .stepbox .icon img{
    width: 4em;
}
#production .stepbox .icon p{
    font-size: 1rem;
    padding-top: 0.3em;
}
#production .stepbox .icon1{
top: -1em;
    left: 5.5em;
}
#production .stepbox .icon2{
    top: -2em;
}
#production .stepbox .icon3{
    top: -1em;
    right: 5.5em;
}
#production .stepbox .icon4{
    bottom: -0.5em;
    left: 5.5em;
}
#production .stepbox .icon5{
    bottom: -2.5em;
}
#production .stepbox .icon6{
    bottom: -0.5em;
    right: 5.5em;
}
    
#production ul{
    flex-wrap: wrap;
}
#production li{
    width: 47%;
    margin-bottom: 1em;
}
#production li img{
}
#production li p{
      font-size: 1.6rem;
    padding: 0.5em 0;
}
#production li:after{
  width: 2.9em;
  height: 2.1em;
  top: 41%;
  right: -2.2em;
}
#production h4{
    margin: 2em 0 1em 0;
}
#production .indent{
}
    
/*------------------------------------------------------------------------------------traceability sp*/
#traceability{
    padding: 5em 0 8em 0;
}
#traceability .read{
    font-size: 1.8rem;
    width: 100%;
}
#traceability .flexbox{
    display: block;
    margin-top: 6em;
}
#traceability .flexbox h3{
    margin-bottom: 1em;
    width: 100%;
}
#traceability h4{
    margin: 2em 0 1em 0;
}
#traceability .image{
    margin-top: 2em;
}
    
    #traceability .swipe{
    overflow-x: scroll;
        font-size: 1.3rem;
    }
    #traceability .flow1{
    margin: 0 0 2em 0;
        width: 62em;
}
    #traceability .flow1 .line {
  line-height: 2.38em;
}
    #traceability .caution{
        font-size: 1.4rem;
    }

#traceability .flow2{
    display: flex;
    font-size: 1.3rem;
        width: 62em;
}
#traceability .flow2 p{
}
#traceability .flow2 .in1,#traceability .flow2 .icon2{
    width: 5em;
}
#traceability .flow2 .in1{
    margin: 1em 0.5em 0 0;
}
#traceability .flow2 .in3{
    width: 5em;
    margin: 2em 0 0 0.5em;
}
#traceability .flow2 .line1,#traceability .flow2 .line4{
    margin-left: 35%;
}
#traceability .flow2 .icon1{
width: 5em;
    top: -2em;
    left: 28%;
}

.simpleParallax {
  padding-top: 50%;
}
.rellax {
    width: 150%;
}
}