@charset "UTF-8";

/* RFID とは？仕組みと特長 */
.section.section-mw-980p .section-inner {
    max-width: 980px;
}
.u-td-none {
    text-decoration: none;
}


/* お気軽にご相談ください */
.contactarea {
    text-align: center;
    margin-top: 60px;
}
.contactarea p {
    font-weight: bold;
    font-size: 170%;
}
.btn-test {
    display: block;
    width: 100%;
    padding: 20px;
    background: #fff;
    text-decoration: none;
    text-align: center;
    font-weight: bold;
}
.btn-b {
    background: #d80084!important;
    border: none!important;
}
.btn-b:hover {
    background: #6d6e70!important;
}


/* 1つでも当てはまった方は、こちらから資料をご確認ください */
.main-contents .section.diff-bg-b.rfid-bg-g {
    background: linear-gradient(135deg, #EA0000, #D80084);
}

.rfid-bg-g .item {
    color: #fff;
}

.rfid-bg-g .hdg-d {
    color: #fff;
}

.rfid-bg-g .hdg-c {
    font-size: 1.17em;
}

.rfid-bg-g .list-a>li:before {
    background: #fff;
}


/* RFIDの主なソリューション */
.main-contents .p-pp-section:first-child {
    margin-top: 16px
}

.p-pp-section {
    position: relative;
} 

.p-pp-contents {
    max-width: calc(1280px + 7.4%);
    padding: 0 3.7%;
    margin: auto
}

.p-pp-textcol {
    text-align: center
}

.p-pp-textcol .c-pp-text {
    display: inline-block
}

.p-pp-section-weare .p-pp-textcol+.c-pp-panel {
    margin-top: 40px
}

.p-pp-section-wedo .p-pp-textcol {
    text-align: center
}

.p-pp-contents_item {
    margin-top: 60px
}

.c-pp-panel {
    display: flex;
    width: 100%
}

a.c-pp-panel {
    text-decoration: none
}

a.c-pp-panel .c-pp-panel_pt img {
    transition: transform 1s cubic-bezier(.075,.82,.165,1);
}

a.c-pp-panel:hover {
    color: #000
}

a.c-pp-panel:hover .c-pp-panel_pt img {
    transform: translate(-50%,-50%) scale(1.05)
}

a.c-pp-panel .c-btn {
    font-size: 1.4rem;
    margin-top: 15px!important
}

a.c-pp-panel .c-btn .c-btn-ico {
    width: 26px;
    height: 26px
}

.c-pp-panel_text {
    display: flex;
    flex-flow: column;
    justify-content: center;
    width: calc(642 / 1280 * 100%);
    padding: 5% 90px;
    background-color: #efefef;
    text-align: left;
}

.c-pp-panel_text strong {
    font-size: 2.6rem;
    line-height: calc(33.8/26)
}

.c-pp-panel_text p+p {
    margin-top: 25px!important
}

@media screen and (max-width: 1000px) {
    .c-pp-panel_text {
        padding: 40px 24px
    }
    
    .c-pp-panel_text strong {
        font-size: 2rem
    }
    
    .c-pp-panel_text p+p {
        margin-top: 20px!important
    }
}

@media screen and (max-width: 767px) {
    .c-pp-panel {
        flex-flow: column
    }
    .c-pp-panel_text {
        width: 100%;
        order: 2
    }
}

.c-pp-panel_pt {
    position: relative;
    width: calc(638 / 1280 * 100%)
}

.c-pp-panel_pt::before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: calc(600 / 957 * 100%)
}

.c-pp-panel_pt_inr {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden
}

.c-pp-panel_pt_inr img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    max-width: none;
    height: 100%
}

a.c-pp-panel .c-pp-panel_pt img {
    transition: transform 1s cubic-bezier(.075,.82,.165,1);
}

a.c-pp-panel:hover .c-pp-panel_pt img {
    transform: translate(-50%,-50%) scale(1.05)
}

.c-pp-panel_pt {
    position: relative;
    width: calc(638 / 1280 * 100%)
}

.c-pp-panel_pt::before {
    content: "";
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: calc(600 / 957 * 100%)
}

@media screen and (max-width: 767px) {
    .c-pp-panel_pt {
        width: 100%;
        order: 1
    }
    
    .c-pp-panel_pt_inr {
        width: 100%;
        height: 100%;
        top: 0;
        right: 0
    }
}

@media screen and (max-width: 1000px) {
    .c-btn-ico svg .circle {
        stroke-width: 1.5px
    }

    .c-btn-ico svg .arrow {
        stroke-width: 10px
    }
}

@media screen and (max-width: 767px) {
    .p-pp-contents_item {
        margin-top: 40px
    }
}


/* くるくるボタン */
@keyframes arrow_bg {
    0% {
        opacity: .1
    }

    100% {
        opacity: 0
    }
}
@keyframes arrow {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10% {
        opacity: 0;
        -webkit-transform: translateX(50%);
        transform: translateX(50%)
    }

    25% {
        opacity: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    40% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
@keyframes circle {
    0% {
        stroke-dasharray: 0 300;
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    10% {
        stroke-dasharray: 50 100
    }

    20% {
        stroke-dasharray: 100 200
    }

    30% {
        stroke-dasharray: 150 300
    }

    40% {
        stroke-dasharray: 200 300
    }

    60% {
        stroke-dasharray: 300 300;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes SlideIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px);
        transform: translateX(300px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}
@keyframes SlideIn2 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px);
        transform: translateX(300px)
    }

    100% {
        opacity: .3;
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1)
    }
}
@keyframes SlideIn3 {
    0% {
        opacity: 0;
        -webkit-transform: translateX(300px);
        transform: translateX(300px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0) scale(1);
        transform: translateX(0) scale(1)
    }
}
@keyframes img_anime {
    0% {
        -webkit-transform: skew(15deg) translateX(-150%);
        transform: skew(15deg) translateX(-150%)
    }

    42.5%,44.5% {
        -webkit-transform: skew(15deg) translateX(-20%);
        transform: skew(15deg) translateX(-20%)
    }

    100% {
        -webkit-transform: skew(15deg) translateX(150%);
        transform: skew(15deg) translateX(150%)
    }
}
@keyframes emergence {
    0% {
        opacity: 0
    }

    99.9% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}
.c-btn {
    color: #5f5f5f;
    font-size: 1.4rem;
    text-decoration: none;
    position: relative
}
.c-btn-ico {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    vertical-align: middle;
    margin-right: 7px
}

.c-btn-ico::before {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #5f5f5f;
    opacity: 0;
    z-index: 0
}

.c-btn-ico svg {
    fill: #5f5f5f;
    position: absolute;
    top: 0;
    left: 0
}

.c-btn-ico svg .circle {
    fill: none;
    stroke: #5f5f5f;
    stroke-width: 1px;
    width: 100%;
    height: 100%;
    transform-origin: center
}

.c-btn-ico svg .arrow {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0)
}
a:hover .c-btn .c-btn-ico::before {
    opacity: .1
}

a:hover .c-btn .c-btn-ico svg .arrow {
    -webkit-animation: arrow 1.5s forwards ease-in-out;
    animation: arrow 1.5s forwards ease-in-out
}

a:hover .c-btn .c-btn-ico svg .circle {
    fill: transparent;
    stroke: #5f5f5f;
    stroke-width: 1;
    -webkit-animation: circle 2s forwards cubic-bezier(.215,.61,.355,1);
    animation: circle 2s forwards cubic-bezier(.215,.61,.355,1)
}

a:hover .c-btn.c-btn-white .c-btn-ico-white svg .circle {
    fill: transparent;
    stroke: #fff;
    stroke-width: 1
}

a.c-btn {
    display: inline-block
}

a.c-btn:hover .c-btn-ico::before {
    opacity: .1;
    -webkit-animation: arrow_bg 2s forwards cubic-bezier(.215,.61,.355,1);
    animation: arrow_bg 2s forwards cubic-bezier(.215,.61,.355,1)
}

a.c-btn:hover .c-btn-ico svg .arrow {
    -webkit-animation: arrow 1.5s forwards ease-in-out;
    animation: arrow 1.5s forwards ease-in-out
}

a.c-btn:hover .c-btn-ico svg .circle {
    fill: transparent;
    stroke: #5f5f5f;
    stroke-width: 1;
    -webkit-animation: circle 2s forwards cubic-bezier(.215,.61,.355,1);
    animation: circle 2s forwards cubic-bezier(.215,.61,.355,1)
}

a.c-btn-white:hover .c-btn-ico-white::before {
    opacity: .2;
    -webkit-animation: arrow_bg 2s forwards cubic-bezier(.215,.61,.355,1);
    animation: arrow_bg 2s forwards cubic-bezier(.215,.61,.355,1)
}

a.c-btn-white:hover .c-btn-ico-white svg .circle {
    fill: transparent;
    stroke: #fff;
    stroke-width: 1
}


/* 解決 */
.merit-inner {
	width: 50%;
	color: #fff;
	padding: 40px;
	box-shadow: 0 10px 20px 0 rgb(0 0 0 / 50%);
}

.merit-inner h2 {
	text-align: center;
	font-size: 200%;
	margin-bottom: 30px;
}

@media screen and (max-width: 1000px){
	.merit-inner {
		width: 80%;
		margin: auto;
		opacity: 0.9;
	}
}

.merit {
	padding-top:64px;
	background-size: cover;
}

.merit a {
	display:block;
	text-decoration: none;
	color: #fff;
	transition: 0.3s;
}

.merit a:hover {
	background:#ffffff33;
	transition: 0.3s;
}

.merit1 {
	background-image: url(/jp/group/frontech/imagesgig5/merit1-bg_tcm169-6604141_tcm169-2750236-32.jpg);
}

.merit1 .merit-inner {
	background-image: url(/jp/group/frontech/imagesgig5/merit1-text_tcm169-6604142_tcm169-2750236-32.jpg);
	background-size: cover;
	margin-right: auto;
}

.merit2 {
	background-image: url(/jp/group/frontech/imagesgig5/merit2-bg_tcm169-6604206_tcm169-2750236-32.jpg);
}

.merit2 .merit-inner {
	background-image: url(/jp/group/frontech/imagesgig5/merit2-text_tcm169-6604207_tcm169-2750236-32.jpg);
	background-size: cover;
	margin-left: auto;
}

.merit3 {
	background-image: url(/jp/group/frontech/imagesgig5/merit3-bg_tcm169-6604286_tcm169-2750236-32.jpg);
}

.merit3 .merit-inner {
	background-image: url(/jp/group/frontech/imagesgig5/merit3-text_tcm169-6604288_tcm169-2750236-32.jpg);
	background-size: cover;
	margin-right: auto;
}

.supple {
    display: flex;
    justify-content: space-between;
}

.merit3 .supple .column {
	border:1px solid #fff;
	width:47%;
	padding:20px;
	text-align:center;
}

@media screen and (max-width: 1000px) {
	.merit3 .supple {
		display: block;
	}

	.merit3 .supple .column {
		width:100%;
		max-width:400px;
		text-align:center;
		margin:20px auto 0;
	}
}


/* 汎用的なパーツ
====================================================== */
/* 均等分割レイアウト
-------------------------- */
.c-column-a {
  display: flex;
  flex-wrap: wrap;
}

@media screen and (min-width: 768px) {
  .c-column-a {
    margin-top: 40px;
  }
}

@media screen and (max-width: 768px) {
  .c-column-a {
    margin-top: 20px;
  }
}

.c-column-a.c-column-a--border .col {
  position: relative;
}

.c-column-a .col {
  position: relative;
}

@media screen and (max-width: 768px) {
  .c-column-a .col {
    width: 100%;
    margin-top: 20px;
  }
}

.c-column-a .col .ttl-a {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .c-column-a .col .ttl-a {
    font-size: 3.0rem;
  }
}

/* 2column
-------------------------- */
@media screen and (min-width: 768px) {
  .c-column-a.c-column-a--2col.c-column-a--border .col:not(:nth-child(2n))::after {
    display: block;
    content: "";
    height: 100%;
    border-right: solid 1px rgba(155, 155, 155, 0.5);
    position: absolute;
    top: 0;
    right: 0;
  }
  .c-column-a.c-column-a--2col .c-column-a--2col__col:nth-child(2n) {
    padding-left: 3.125%;
  }
  .c-column-a.c-column-a--2col .c-column-a--2col__col:nth-child(2n+1) {
    padding-right: 3.125%;
  }
  .c-column-a.c-column-a--2col .c-column-a--2col__col:nth-child(n+3) {
    margin-top: 40px;
  }
  .c-column-a .c-column-a--2col__col {
    width: 50%;
  }
}

/* 3column
-------------------------- */
@media screen and (min-width: 768px) {
  .c-column-a.c-column-a--3col.c-column-a--border .col:not(:nth-child(3n))::after {
    display: block;
    content: "";
    height: 100%;
    border-right: solid 1px rgba(155, 155, 155, 0.5);
    position: absolute;
    top: 0;
    right: 0;
  }
  .c-column-a.c-column-a--3col .c-column-a--3col__col:nth-child(3n) {
    padding-left: 2.734375%;
  }
  .c-column-a.c-column-a--3col .c-column-a--3col__col:nth-child(3n+1) {
    padding-right: 2.734375%;
  }
  .c-column-a.c-column-a--3col .c-column-a--3col__col:nth-child(3n+2) {
    width: 35.15625%;
    padding: 0 2.734375%;
  }
  .c-column-a .c-column-a--3col__col {
    width: 32.421875%;
  }
}

/* 4column
-------------------------- */
@media screen and (min-width: 768px) {
  .c-column-a.c-column-a--4col.c-column-a--border .col:not(:nth-child(4n))::after {
    display: block;
    content: "";
    height: 100%;
    border-right: solid 1px rgba(155, 155, 155, 0.5);
    position: absolute;
    top: 0;
    right: 0;
  }
  .c-column-a.c-column-a--4col .c-column-a--4col__col:nth-child(4n) {
    padding-left: 2.34375%;
  }
  .c-column-a.c-column-a--4col .c-column-a--4col__col:nth-child(4n+1) {
    padding-right: 2.34375%;
  }
  .c-column-a.c-column-a--4col .c-column-a--4col__col:nth-child(4n+2) {
    padding: 0 2.34375%;
  }
  .c-column-a.c-column-a--4col .c-column-a--4col__col:nth-child(4n+3) {
    padding: 0 2.34375%;
  }
  .c-column-a .c-column-a--4col__col {
    width: 25%;
  }
}
@media screen and (max-width: 768px) {
    .c-column-a .c-column-a--4col__col {
        width: 50%;
        margin-top: 20px;
    }
}

/* Object - Project
 * 特定用途のためのパーツ
  ====================================================== */
/* Object - Utility
* 各種ヘルパークラス
====================================================== */
.u-flex {
  display: flex !important;
}

.u-flex-jc-fs {
  justify-content: flex-start !important;
}

.u-flex-jc-fe {
  justify-content: flex-end !important;
}

.u-flex-jc-between {
  justify-content: space-between !important;
}

.u-flex-jc-around {
  justify-content: space-around !important;
}

.u-flex-jc-center {
  justify-content: center !important;
}

.u-flex-ai-fs {
  align-items: flex-start !important;
}

.u-flex-ai-fe {
  align-items: flex-end !important;
}

.u-flex-ai-center {
  align-items: center !important;
}

.u-flex-wrap {
  flex-wrap: wrap !important;
}

.u-flex-nowrap {
  flex-wrap: nowrap !important;
}

.u-flex-row {
  flex-direction: row !important;
}

.u-flex-row-r {
  flex-direction: row-reverse !important;
}

.u-flex-column {
  flex-direction: column !important;
}

.u-flex-column-r {
  flex-direction: column-reverse !important;
}

@media screen and (max-width: 768px) {
  .u-flex-jc-fs-tab {
    justify-content: flex-start !important;
  }
  .u-flex-jc-fe-tab {
    justify-content: flex-end !important;
  }
  .u-flex-jc-between-tab {
    justify-content: space-between !important;
  }
  .u-flex-jc-around-tab {
    justify-content: space-around !important;
  }
  .u-flex-jc-center-tab {
    justify-content: center !important;
  }
  .u-flex-ai-fs-tab {
    align-items: flex-start !important;
  }
  .u-flex-ai-fe-tab {
    align-items: flex-end !important;
  }
  .u-flex-ai-center-tab {
    align-items: center !important;
  }
  .u-flex-wrap-tab {
    flex-wrap: wrap !important;
  }
  .u-flex-nowrap-tab {
    flex-wrap: nowrap !important;
  }
  .u-flex-row-tab {
    flex-direction: row !important;
  }
  .u-flex-row-r-tab {
    flex-direction: row-reverse !important;
  }
  .u-flex-column-tab {
    flex-direction: column !important;
  }
  .u-flex-column-r-tab {
    flex-direction: column-reverse !important;
  }
}

@media screen and (max-width: 480px) {
  .u-flex-jc-fs-sp {
    justify-content: flex-start !important;
  }
  .u-flex-jc-fe-sp {
    justify-content: flex-end !important;
  }
  .u-flex-jc-between-sp {
    justify-content: space-between !important;
  }
  .u-flex-jc-around-sp {
    justify-content: space-around !important;
  }
  .u-flex-jc-center-sp {
    justify-content: center !important;
  }
  .u-flex-ai-fs-sp {
    align-items: flex-start !important;
  }
  .u-flex-ai-fe-sp {
    align-items: flex-end !important;
  }
  .u-flex-ai-center-sp {
    align-items: center !important;
  }
  .u-flex-wrap-sp {
    flex-wrap: wrap !important;
  }
  .u-flex-nowrap-sp {
    flex-wrap: nowrap !important;
  }
  .u-flex-row-sp {
    flex-direction: row !important;
  }
  .u-flex-row-r-sp {
    flex-direction: row-reverse !important;
  }
  .u-flex-column-sp {
    flex-direction: column !important;
  }
  .u-flex-column-r-sp {
    flex-direction: column-reverse !important;
  }
}

/* 表示順
-------------------------- */
.u-flexOrder_00 {order:0}
.u-flexOrder_01 {order:1}
.u-flexOrder_02 {order:2}
.u-flexOrder_03 {order:3}
.u-flexOrder_04 {order:4}
.u-flexOrder_05 {order:5}
.u-flexOrder_06 {order:6}
.u-flexOrder_07 {order:7}
.u-flexOrder_08 {order:8}
.u-flexOrder_09 {order:9}
/* 表示順（タブレット以下） */
@media screen and (max-width: 768px) {
.u-flexOrder_00-tab {order:0}
.u-flexOrder_01-tab {order:1}
.u-flexOrder_02-tab {order:2}
.u-flexOrder_03-tab {order:3}
.u-flexOrder_04-tab {order:4}
.u-flexOrder_05-tab {order:5}
.u-flexOrder_06-tab {order:6}
.u-flexOrder_07-tab {order:7}
.u-flexOrder_08-tab {order:8}
.u-flexOrder_09-tab {order:9} }
/* 表示順（モバイル以下） */
@media screen and (max-width: 480px) {
.u-flexOrder_00-sp {order:0}
.u-flexOrder_01-sp {order:1}
.u-flexOrder_02-sp {order:2}
.u-flexOrder_03-sp {order:3}
.u-flexOrder_04-sp {order:4}
.u-flexOrder_05-sp {order:5}
.u-flexOrder_06-sp {order:6}
.u-flexOrder_07-sp {order:7}
.u-flexOrder_08-sp {order:8}
.u-flexOrder_09-sp {order:9} }