@charset "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, i, button {margin: 0; padding: 0; border: 0;}
h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th, dfn, var, button {font-weight: normal; font-style: normal; font-size:100%;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main {display: block;}


html,body{position: relative; width: 100%; height: 100%;}
html{font-size: 62.5%;}
body{font-size:1.8rem; color:#000000; position:relative; font-family: 'Noto Sans JP', "BIZ UDPGothic", "Hiragino Kaku Gothic Pro", "メイリオ",Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-feature-settings: "palt";}



ul,ol{list-style:none;}
li{list-style:none;}
a{color:#000000; text-decoration:none;}
input[type=text],
input[type=tel],
input[type=email],
input[type=submit],
input[type=button],
button,
textarea {-webkit-appearance: none; -moz-appearance:none;  border-radius:0; border:none; background:none;}
input[type=radio]{vertical-align:middle;}
input[type=submit]:hover,
input:hover[type=button]:hover,
button{outline:none; cursor:pointer;}
select{border: none; border-radius: 0; background: none; appearance: none;}
select::-ms-expand {display: none;}
input::placeholder {color: #b2b2b2;}
input:-ms-input-placeholder{color: #b2b2b2;}
input::-ms-input-placeholder {color: #b2b2b2;}
table{border-collapse:collapse; border:none; border-spacing:0;}
th ,td{border:none; vertical-align:top; text-align:left;}
img{vertical-align:bottom; height:auto;}
strong, b, .bold {font-weight: bold;}
i{line-height:1; font-style:normal;}
svg{vertical-align:bottom; transition:.3s; -webkit-transition:.3s;}
p{line-height:1.5;}
.wrap{width:1000px; padding:0 20px; box-sizing:border-box; margin:0 auto;}
.clear{clear:both;}
.clearfix:after{clear:both; content:""; height:0; font-size:0; visibility:hidden; display:block;}
.center{text-align:center;}
.left{float:left;}
.right{float:right;}
.flexbox{display:-webkit-flex; display:flex;}
.flexbox-center{-webkit-align-items:center; align-items:center; -webkit-justify-content:center; justify-content:center;}
.flexbox-wrap{-webkit-flex-wrap:wrap; flex-wrap:wrap;}
.ai-center{-webkit-align-items:center; align-items:center;}
.jc-center{-webkit-justify-content:center; justify-content:center;}
.jc-between{-webkit-justify-content:space-between; justify-content:space-between;}



.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt35{margin-top: 35px;}
.mt40{margin-top: 40px;}
.mt45{margin-top: 45px;}
.mt50{margin-top: 50px;}
.mt55{margin-top: 55px;}
.mt60{margin-top: 60px;}
.mt65{margin-top: 65px;}

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb35{margin-bottom: 35px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb50{margin-bottom: 50px;}
.mb55{margin-bottom: 55px;}
.mb60{margin-bottom: 60px;}
.mb65{margin-bottom: 65px;}

.ml5{margin-left: 5px;}
.ml10{margin-left: 10px;}
.ml15{margin-left: 15px;}
.ml20{margin-left: 20px;}
.ml25{margin-left: 25px;}
.ml30{margin-left: 30px;}
.ml35{margin-left: 35px;}
.ml40{margin-left: 40px;}
.ml45{margin-left: 45px;}
.ml50{margin-left: 50px;}
.ml55{margin-left: 55px;}
.ml60{margin-left: 60px;}
.ml65{margin-left: 65px;}

.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr15{margin-right: 15px;}
.mr20{margin-right: 20px;}
.mr25{margin-right: 25px;}
.mr30{margin-right: 30px;}
.mr35{margin-right: 35px;}
.mr40{margin-right: 40px;}
.mr45{margin-right: 45px;}
.mr50{margin-right: 50px;}
.mr55{margin-right: 55px;}
.mr60{margin-right: 60px;}
.mr65{margin-right: 65px;}


.pc{display:block;}
.pc-inline{display:inline;}
.pc-flex{display: flex;}
.tab-inline{display:none !important;}
.sp{display:none !important;}
.sp-inline{display:none !important;}
.sp-flex{display: none;}


.page-catch-narrow {position: relative; display: flex; align-items: center; justify-content: center; max-width: 1080px; width: calc(100% - 80px); height: 160px; margin: 0 auto 40px; background: url("/jp/special/pfas/assets/img/mv_small.jpg") no-repeat center; background-size: 1080px auto;}
.page-catch-narrow:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1);}
.page-catch-narrow .page-catch-text {position: relative; z-index: 1; font-size: 3.2rem; font-weight: 500; line-height: 2; letter-spacing: .32rem; color: #ffffff;}

.page-catch-wide{position: relative; display: flex; justify-content: center; width: 100%; height: 480px; padding-top: 224px; box-sizing: border-box; background: url("/jp/special/pfas/assets/img/mv_big.jpg") no-repeat center; background-size: cover;}
.page-catch-wide:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1);}
.page-catch-wide .page-catch-text {position: relative; z-index: 1; font-size: 4.8rem; font-weight: 500; line-height: 1.33; letter-spacing: .48rem; color: #ffffff; text-align: center;}

.page-catch-under{position: relative; display: flex; justify-content: center; width: 100%; height: 360px; padding-top: 184px; box-sizing: border-box; background: url("/jp/special/pfas/assets/img/mv_big.jpg") no-repeat center; background-size: cover;}
.page-catch-under:after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1);}
.page-catch-under .page-catch-text {position: relative; z-index: 1; font-size: 3.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .32rem; color: #ffffff; text-align: center;}

.header + .page-catch-narrow {margin-top: 120px;}


.contents-narrow {max-width: 1080px; width: calc(100% - 80px); margin: 0 auto;}
.contents-wide {max-width: 1440px; width: 100%; margin: 0 auto; padding: 0 60px; box-sizing: border-box;}

.page-title {margin-bottom: 30px; font-size: 3.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .32rem;}

.section-title {position: relative; margin-bottom: 32px; padding-bottom: 16px; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}
.section-title:before,
.section-title:after {content: ""; position: absolute; left: 0; bottom: 0; display: block; height: 2px;}
.section-title:before {width: 100%; background-color: #d9d9d9;}
.section-title:after {width: 240px; background-color: #0B478F;}

.title00 {margin-bottom: 80px;}
.title00 .title00-big {display: block; font-size: 3.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .32rem; text-align: center; color: #0B478F;}
.title00 .title00-small {display: block; font-size: 2.4rem; line-height: 1.5; letter-spacing: .12rem; text-align: center; color: #0B478F;}

.title01 {font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}

.title02 {margin-bottom: 30px;}
.title02 .title02-big {display: block; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem; text-align: center;}
.title02 .title02-small {display: block; margin-top: 3px; font-size: 1.8rem; line-height: 1; letter-spacing: .09rem; text-align: center; color: #0B478F;}

.title03 {margin-bottom: 30px;}
.title03 .title03-big {display: block; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}
.title03 .title03-small {display: block; margin-bottom: 14px; font-size: 1.8rem; line-height: 1; letter-spacing: .09rem; color: #0B478F;}

.overview-list .overview-list-item {position: relative; padding-left: 70px;}
.overview-list .overview-list-title {position: absolute; left: 0; top: 0; line-height: 2;}
.overview-list .overview-list-content {line-height: 2;}

.check-list .check-list-item {position: relative; padding-left: 30px; line-height: 2;}
.check-list .check-list-item:before {content: ""; position: absolute; left: 0; top: 0; width: 14px; height: 36px; background: url("/jp/special/pfas/assets/img/icon_check.svg") no-repeat center; background-size: 14px;}

.number-list .number-list-item {counter-increment: num; line-height: 2;}
.number-list .number-list-item:before {content: counter(num) '. ';}

.number-box {margin-bottom: 36px; padding-left: 20px;}
.number-box:last-of-type {margin-bottom: 0;}
.number-box .number-box-title {position: relative; counter-increment: numbox; margin-top: 36px; font-weight: 700; letter-spacing: .09rem; line-height: 1.55;}
.number-box .number-box-title:first-of-type {margin-top: 0;}
.number-box .number-box-title:before {position: absolute; left: -20px; top: 0; content: counter(numbox) '. ';}

.page-title-head {margin-bottom: 40px;}
.page-title-head .page-title {margin-bottom: 0;}
.page-title-head .page-title-info-box {display: flex; align-items: center; margin-top: 15px;}
.page-title-head .page-title-tag {display: flex; align-items: center; height: 24px; padding: 0 10px; margin-right: 20px; box-sizing: border-box; border-radius: 12px; background-color: #0B478F; font-size: 1.2rem; font-weight: 700; color: #ffffff;}

.gradient{position: relative; z-index: 0; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%); display: flex; align-items: center; justify-content: center; overflow: hidden; font-weight: 700; color: #ffffff;}
.gradient:before {content: ""; position: absolute; left: 0; top: 0; z-index: -1; display: block; transition: opacity .3s;  opacity: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.gradient .gradient-arrow {position: relative; display: block; overflow: hidden;}
.gradient .gradient-arrow:before,
.gradient .gradient-arrow:after {content: ""; position: absolute;  display: block; overflow: hidden; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center;}
.gradient .gradient-arrow:after {opacity: 0;}
.gradient:hover:before {opacity: 1;}
.gradient:hover .gradient-arrow:before {opacity: 0; transition: left .6s, opacity .3s;}
.gradient:hover .gradient-arrow:after {opacity: 1; transition: left .6s, opacity .6s .2s;}

.button-move {position: relative; display: flex; align-items: center; justify-content: center; height: 64px; margin: 0 auto; padding: 0 70px 0 20px; border-radius: 32px; border: #0B478F solid 1px; box-sizing: border-box;  background-color: #ffffff; font-size: 1.6rem; font-weight: 700; transition: box-shadow .3s;}
.button-move .button-move-arrow {position: absolute; right: 20px; top: calc(50% - 16px); display: block; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.button-move .button-move-arrow:before,
.button-move .button-move-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.button-move .button-move-arrow:before {left: 9px;}
.button-move .button-move-arrow:after {left: -23px; opacity: 0;}
.button-move:hover {box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);}
.button-move:hover .button-move-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.button-move:hover .button-move-arrow:before {opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.button-move:hover .button-move-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}

.button-move .button-move-arrow.arrow-bottom:before,
.button-move .button-move-arrow.arrow-bottom:after {left: calc(50% - 6px); width: 12px; height: 14px; background: url("/jp/special/pfas/assets/img/icon_arrow_bottom_white.svg") no-repeat center; background-size: 11px 13px;}
.button-move .button-move-arrow.arrow-bottom:before {top: 9px;}
.button-move .button-move-arrow.arrow-bottom:after {top: -23px;}
.button-move:hover .button-move-arrow.arrow-bottom:before {top: 41px; transition: top .6s, opacity .3s;}
.button-move:hover .button-move-arrow.arrow-bottom:after {top: 9px; transition: top .6s, opacity .6s .2s;}


.button-back {position: relative; display: flex; align-items: center; justify-content: center; width: 400px; height: 64px; margin: 0 auto; border-radius: 32px; border: #0B478F solid 1px; box-sizing: border-box; font-size: 1.6rem; font-weight: 700;}
.button-back .button-back-arrow {position: absolute; left: 20px; top: calc(50% - 16px); display: block; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.button-back .button-back-arrow:before,
.button-back .button-back-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_left_white.svg") no-repeat center; background-size: 13px 11px;}
.button-back .button-back-arrow:before {right: 9px;}
.button-back .button-back-arrow:after {right: -23px; opacity: 0;}
.button-back:hover .button-back-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.button-back:hover .button-back-arrow:before {opacity: 0; right: 41px; transition: right .6s, opacity .3s;}
.button-back:hover .button-back-arrow:after {opacity: 1; right: 9px; transition: right .6s, opacity .6s .2s;}

.button-down {position: relative; display: flex; align-items: center; justify-content: center; width: 400px; height: 64px; margin: 0 auto; border-radius: 32px; border: #0B478F solid 1px; box-sizing: border-box; font-size: 1.6rem; font-weight: 700;}
.button-down .button-down-arrow {position: absolute; left: 20px; top: calc(50% - 16px); display: block; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.button-down .button-down-arrow:before,
.button-down .button-down-arrow:after {content: ""; position: absolute; left: calc(50% - 6px); display: block; width: 12px; height: 14px; background: url("/jp/special/pfas/assets/img/icon_arrow_bottom_white.svg") no-repeat center; background-size: 11px 13px;}
.button-down .button-down-arrow:before {top: 9px;}
.button-down .button-down-arrow:after {top: -23px; opacity: 0;}
.button-down:hover .button-down-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.button-down:hover .button-down-arrow:before {opacity: 0; top: 41px; transition: top .6s, opacity .3s;}
.button-down:hover .button-down-arrow:after {opacity: 1; top: 9px; transition: top .6s, opacity .6s .2s;}
/*
.button-back .button-back-arrow:before {left: 9px;}
.button-back .button-back-arrow:after {left: -23px; opacity: 0;}
.button-back:hover .button-back-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.button-back:hover .button-back-arrow:before {opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.button-back:hover .button-back-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}
*/

.text-arrow {position: relative; top: 4px; z-index: 0; display: inline-block; width: 22px; height: 22px; margin-left: 10px; border-radius: 50%; overflow: hidden; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.text-arrow:before,
.text-arrow:after {content: ""; position: absolute; top: 5px; display: block; overflow: hidden; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.text-arrow:before {left: 4px;}
.text-arrow:after {opacity: 0; left: -18px;}

.text-arrow-link:hover .text-arrow:before {opacity: 0; transition: left .6s, opacity .3s; left: 26px;}
.text-arrow-link:hover .text-arrow:after {opacity: 1; transition: left .6s, opacity .6s .2s; left: 4px;}

.page-body {padding-bottom: 120px;}
.page-body .body-text {line-height: 2;}
.page-body .body-section {padding-top: 64px;}

.page-body .bn-social-issues-solution {width: 640px; margin: 80px auto 0;}
.page-body .bn-social-issues-solution-link {display: flex; border-radius: 16px; width: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); overflow: hidden;}
.page-body .bn-social-issues-solution-image-box {position: relative; width: 320px; height: 240px; overflow: hidden;}
.page-body .bn-social-issues-solution-image {display: block; transition: transform .5s;}
.page-body .bn-social-issues-solution-text-box {position: relative; width: 320px; padding: 30px; box-sizing: border-box;}
.page-body .bn-social-issues-solution-text {font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1rem;}
.page-body .solution-item-gradient {position: absolute; right: 24px; bottom: 28px; width: 32px; height: 32px; border-radius: 50%;}
.page-body .bn-social-issues-solution-link:hover .bn-social-issues-solution-image {transform: scale(1.2);}
.page-body .bn-social-issues-solution-link:hover .gradient {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.page-body .bn-social-issues-solution-link .gradient-arrow {width: 19px; height: 19px; margin-left: 10px;}
.page-body .bn-social-issues-solution-link .gradient-arrow:before,
.page-body .bn-social-issues-solution-link .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.page-body .bn-social-issues-solution-link .gradient-arrow:before {left: -2px;}
.page-body .bn-social-issues-solution-link .gradient-arrow:after {left: -34px; opacity: 0;}
.page-body .bn-social-issues-solution-link:hover .gradient-arrow:before {opacity: 0; left: 30px; transition: left .6s, opacity .3s;}
.page-body .bn-social-issues-solution-link:hover .gradient-arrow:after {opacity: 1; left: -2px; transition: left .6s, opacity .6s .2s;}
.page-body .cookie-text {margin-bottom: 60px;}

.header + .download {margin-top: 120px;}


/*--------------------------
Header
--------------------------*/
.header {position: fixed; top: 24px; left: 40px; z-index: 9999; display: flex; align-items: center; width: calc(100% - 80px); height: 80px; padding: 0 20px; box-sizing: border-box; border-radius: 4px; border: #f2f2f2 solid 1px; background-color: #ffffff;}
.header .header-logo {margin-right: auto;}
.header .header-logo-image {width: 234px; height: auto;}
.header .gnav-button {display: none;}
.header .gnav {display: flex; align-items: center;}
.header .gnav-list {display: flex; align-items: center; margin-right: 40px;}
.header .gnav-item {margin-right: 40px;}
.header .gnav-item:last-child {margin-right: 0;}
.header .gnav-link {position: relative; display: block; transition: color .3s; font-weight: 700;}
.header .gnav-link:after {content: ""; position: absolute; left: 0; bottom: 0; display: block; transition: width .3s; width: 0; height: 1px; background-color: #0B478F;}
.header .gnav-link:hover {color: #0B478F;}
.header .gnav-link:hover:after {width: 100%;}
.header .gnav-link-contact {position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 158px; height: 50px; box-sizing: border-box; border-radius: 80px; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%); font-weight: 700; color: #ffffff;}
.header .gnav-link-contact:before {content: ""; position: absolute; left: 0; top: 0; z-index: -1; display: block; transition: opacity .3s;  opacity: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.header .gnav-link-contact-arrow {position: relative; display: block; overflow: hidden; width: 19px; height: 19px; margin-left: 10px;}
.header .gnav-link-contact-arrow:before,
.header .gnav-link-contact-arrow:after {content: ""; position: absolute; top:calc(50% - 4px);  display: block; overflow: hidden; width: 13px; height: 11px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.header .gnav-link-contact-arrow:before {left: 3px;}
.header .gnav-link-contact-arrow:after {left: -35px; opacity: 0;}
.header .gnav-link-contact:hover:before {opacity: 1;}
.header .gnav-link-contact:hover .gnav-link-contact-arrow:before {left: 35px; opacity: 0; transition: left .6s, opacity .3s;}
.header .gnav-link-contact:hover .gnav-link-contact-arrow:after {left: 3px; opacity: 1; transition: left .6s, opacity .6s .3s;}


/*--------------------------
Breadclumb
--------------------------*/
.header + .breadclumb {margin-top: 120px;}
.breadclumb {display: flex; align-items: center; max-width: 1080px; width: calc(100% - 80px); height: 60px; margin: 0 auto;}
.breadclumb .breadcrumb-list {display: flex; flex-wrap: wrap; align-items: center;}
.breadclumb .breadcrumb-item {display: flex; align-items: center;}
.breadclumb .breadcrumb-item:after {content: ""; display: block; width: 8px; height: 8px; margin: 0 16px; background-color: #0B318F; border-radius: 50%;}
.breadclumb .breadcrumb-item:last-child:after {display: none;}
.breadclumb .breadcrumb-link {line-height: 2; color: #0B318F; text-decoration: underline;}
.breadclumb .breadcrumb-link:hover {text-decoration: none;}



/*--------------------------
Footer
--------------------------*/
.footer {padding: 85px 0 110px; box-sizing: border-box; background-color: #111B34;}
.footer .footer-contact {max-width: 1200px; width: calc(100% - 80px); margin: 0 auto 50px;  padding-bottom: 80px; border-bottom: #ffffff solid 1px;}
.footer .footer-contact-title {margin-bottom: 60px; font-size: 4.8rem; font-family: "FrutigerNext LT Bold"; line-height: 1; letter-spacing: .24rem; color: #ffffff; text-align: center;}
.footer .footer-contact-text {margin-bottom: 40px; font-size: 2.4rem; line-height: 1.33; color: #ffffff; text-align: center; }
.footer .footer-contact-link {width: 480px; height: 80px; margin: 0 auto; border-radius: 40px; font-size: 24px;}
.footer .footer-contact-arrow {width: 32px; height: 32px; margin-left: 3px;}
.footer .footer-contact-arrow:before,
.footer .footer-contact-arrow:after {top: 8px; width: 20px; height: 17px; background-size: 20px 17px;}
.footer .footer-contact-arrow:before {left: 6px;}
.footer .footer-contact-arrow:after {left: -34px;}
.footer .footer-contact-link:hover .footer-contact-arrow:before {left: 34px;}
.footer .footer-contact-link:hover .footer-contact-arrow:after {left: 6px;}
.footer .footer-nav {display: flex; align-items: center; justify-content: space-between; max-width: 1200px; width: calc(100% - 80px); margin: 0 auto;}
.footer .footer-logo-image {width: 167px; height: auto;}
.footer .footer-nav-list {display: flex; align-items: center;}
.footer .footer-nav-item {display: flex; align-items: center; font-size: 1.2rem;}
.footer .footer-nav-item:after {content: ""; display: block; width: 1px; height: 14px; margin: 0 16px; background-color: #ffffff;}
.footer .footer-nav-link {font-size: 1.2rem; color: #ffffff;}
.footer .copy {font-size: 1.2rem; color: #ffffff;}


.filter {position: fixed; left: 0; top: 0; z-index: 9998; opacity: 0; transition: opacity .3s; width: 100%; height: 100%; background-color: #ffffff; pointer-events: none;}
.filter.is-active {opacity: 1;}



/*--------------------------
Top
--------------------------*/
.page-lead {margin-bottom: 120px; font-size: 1.8rem; line-height: 2; text-align: center;}
.necessary {padding-top: 80px;}
.necessary .necessary-block {display: flex; justify-content: space-between; max-width: 1080px; width: 100%; margin: 0 auto;}
.necessary .necessary-item {max-width: 500px; width: calc(50% - 20px);}
.necessary .necessary-image-box {margin-bottom: 30px; width: 100%; overflow: hidden; border-radius: 10px;}
.necessary .necessary-image {width: 100%; height: auto;}
.necessary .body-text {margin-bottom: 35px;}
.necessary .gradient {width: 158px; height: 50px; border-radius: 24px; margin: 0 auto;}
.necessary .necessary-item:first-of-type .gradient {width: 200px;}
.necessary .gradient-arrow {width: 19px; height: 19px; margin-left: 10px;}
.necessary .gradient-arrow:before,
.necessary .gradient-arrow:after {top:calc(50% - 4px); width: 13px; height: 11px; background-size: 13px 11px;}
.necessary .gradient-arrow:before {left: 3px;}
.necessary .gradient-arrow::after {left: -35px; opacity: 0;}
.necessary .gradient:hover:before {opacity: 1;}
.necessary .gradient:hover .gradient-arrow:before {left: 35px; opacity: 0; transition: left .6s, opacity .3s;}
.necessary .gradient:hover .gradient-arrow::after {left: 3px; opacity: 1; transition: left .6s, opacity .6s .3s;}
.necessary .top-social-issues-solution {width: 640px; margin: 80px auto;}
.necessary .top-social-issues-solution-link {display: flex; border-radius: 16px; width: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); overflow: hidden;}
.necessary .top-social-issues-solution-image-box {position: relative; width: 320px; height: 240px; overflow: hidden;}
.necessary .top-social-issues-solution-image {display: block; transition: transform .5s;}
.necessary .top-social-issues-solution-text-box {position: relative; width: 320px; padding: 30px; box-sizing: border-box;}
.necessary .top-social-issues-solution-text {font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .1rem;}
.necessary .solution-item-gradient {position: absolute; right: 24px; bottom: 28px; width: 32px; height: 32px; border-radius: 50%;}
.necessary .top-social-issues-solution-link:hover .top-social-issues-solution-image {transform: scale(1.2);}
.necessary .top-social-issues-solution-link:hover .gradient {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.necessary .gradient-arrow:before,
.necessary .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.necessary .gradient-arrow:before {left: -2px;}
.necessary .gradient-arrow:after {left: -34px; opacity: 0;}
.necessary .top-social-issues-solution-link:hover .gradient-arrow:before {opacity: 0; left: 30px; transition: left .6s, opacity .3s;}
.necessary .top-social-issues-solution-link:hover .gradient-arrow:after {opacity: 1; left: -2px; transition: left .6s, opacity .6s .2s;}


.feature {max-width: 1080px; margin: 0 auto; padding-top: 160px;}
.feature .feature-list {display: flex; flex-wrap: wrap; margin-bottom: 80px;}
.feature .feature-item {width: calc(100% / 3 - 40px); margin-right: 60px;}
.feature .feature-item:nth-child(3n) {margin-right: 0;}
.feature .feature-item:nth-child(n + 4) {margin-top: 60px;}
.feature .feature-link {display: block;}
.feature .feature-image-box {margin-bottom: 24px; overflow: hidden; border-radius: 16px;}
.feature .feature-image {display: block; width: 100%; transition: transform .5s;}
.feature .feature-link:hover .feature-image {transform: scale(1.2);}
.feature .feature-title {margin-bottom: 20px; font-size: 1.8rem; font-weight: 700; line-height: 1.55; letter-spacing: .09rem;}
.feature .feature-tag-list {display: flex; flex-wrap: wrap; margin-bottom: 24px;}
.feature .feature-tag-item {display: flex; align-items: center; height: 24px; margin-right: 8px; padding: 0 16px; box-sizing: border-box; border: #d9d9d9 solid 1px; border-radius: 12px; font-size: 1.2rem; font-weight: 700;}
.feature .feature-button {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; box-sizing: border-box; border: #0B478F solid 1px; border-radius: 24px;}
.feature .feature-button-text {margin-left: -20px; font-size: 1.6rem; font-weight: 700;}
.feature .feature-button .gradient-arrow {position: absolute; right: 20px; top: calc(50% - 16px); display: block; overflow: hidden; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.feature .feature-button .gradient-arrow:before,
.feature .feature-button .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}

.feature .feature-button .gradient-arrow:before {left: 9px;}
.feature .feature-button .gradient-arrow:after {left: -23px; opacity: 0;}
.feature .feature-link:hover .feature-button .gradient-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.feature .feature-link:hover .feature-button .gradient-arrow:before {opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.feature .feature-link:hover .feature-button .gradient-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}
.feature .button-move {width: 280px;}

.solution {padding-top: 200px; margin-top: -40px;}
.solution-box {position: relative; display: flex; padding: 36px 40px; box-sizing: border-box; border-radius: 16px; background-color: #EDF9FF;}
.solution .solution-box:nth-of-type(2) {background-color: #EDF5FF;}
.solution .solution-box:nth-of-type(n + 2) {margin-top: 80px;}
.solution .title03 {width: 320px;}
.solution .solution-list {display: flex; flex-wrap: wrap; width: calc(100% - 320px);}
.solution .solution-item {position: relative; width: calc(100% / 3 - 20px); margin-right: 30px; border-radius: 12px; background-color: #ffffff;}
.solution .solution-box:nth-of-type(2) .solution-item {width: calc(100% / 2 - 30px);}
.solution .solution-item.unpublished {background-color: #F4F4F4;}
.solution .solution-item:nth-child(3n) {margin-right: 0;}
.solution .solution-item:nth-child(n + 4) {margin-top: 30px;}
.solution .solution-box:nth-of-type(2) .solution-item:nth-child(2n) {margin-right: 0;}
.solution .solution-box:nth-of-type(2) .solution-item:nth-child(3n) {margin-right: 30px;}
.solution .solution-box:nth-of-type(2) .solution-item:nth-child(n + 3) {margin-top: 30px;}
.solution .solution-link {display: block; padding: 24px; box-sizing: border-box;}
.solution .solution-title {margin-bottom: 20px;}
.solution .solution-icon {display: block; margin-bottom: 20px; width:48px;}
.solution .solution-title-text {font-size: 1.8rem; font-weight: 700; line-height: 2; letter-spacing: .09rem; color: #0B478F;}
.solution .solution-item-text {line-height: 1.71;}
.solution .solution-item-gradient {position: absolute; right: 24px; top: 28px; width: 32px; height: 32px; border-radius: 50%;}

.solution .top-products-block {width: 640px; margin: 80px auto;}
.solution .top-products-link {display: flex; border-radius: 16px; width: 100%; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); overflow: hidden;}
.solution .top-products-image-box {position: relative; width: 320px; height: 240px; overflow: hidden;}
.solution .top-products-image {display: block; transition: transform .5s;}
.solution .top-products-text-box {position: relative; width: 320px; padding: 30px; box-sizing: border-box;}
.solution .top-products-icon-box {margin-top: 40px;}
.solution .top-products-gradient {position: absolute; right: 30px; top: 30px; width: 32px; height: 32px; border-radius: 50%;}
.solution .top-products-link:hover .top-products-image {transform: scale(1.2);}

.solution .gradient-arrow {width: 32px; height: 32px;}
.solution .gradient-arrow:before,
.solution .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.solution .gradient-arrow:before {left: 9px;}
.solution .gradient-arrow:after {left: -23px; opacity: 0;}

.solution .solution-link:before,
.solution .solution-link:after {content: ""; position: absolute; border-radius: 12px; width: 100%; height: 100%; border: solid 1px; opacity: 0; transition: opacity .3s;}
.solution .solution-link:before {left: -1px; top: -1px; border-color: #0B478F #0B478F transparent transparent;}
.solution .solution-link:after {right: -1px; bottom: -1px; border-color: transparent transparent #0B478F #0B478F;}
.solution .solution-link:hover:before,
.solution .solution-link:hover:after {opacity: 1;}
.solution .solution-item.unpublished .solution-link:before,
.solution .solution-item.unpublished .solution-link:after {display: none;}

.solution .solution-link:hover .gradient-arrow:before,
.solution .top-products-link:hover .gradient-arrow:before{opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.solution .solution-link:hover .gradient-arrow:after,
.solution .top-products-link:hover .gradient-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}
.solution .button-move {position: absolute; left: 40px; bottom: 36px;}

.project {max-width: 1080px; margin: -40px auto 0; padding-top: 120px;}
.project .project-list {}
.project .project-item {position: relative; margin-bottom: 50px;}
.project .project-item:last-child {margin-bottom: 0;}
.project .project-item-link {display: flex; align-items: flex-start;}
.project .project-item-image-box {width: 500px; margin-right: auto; border-radius: 12px; overflow: hidden;}
.project .project-item-image {display: block; width: 100%; height: auto; transition: transform .5s;}
.project .project-item-text-box {max-width: 510px; width: calc(100% - 520px); padding-bottom: 50px;}
.project .project-item-title {margin-bottom: 12px; font-size: 1.8rem; font-weight: 700; line-height: 2; letter-spacing: .09rem;}
.project .project-tag-list {display: flex; flex-wrap: wrap; margin: 0 0 20px;}
.project .project-tag-item {display: flex; align-items: center; height: 32px; margin: 10px 12px 0 0; padding: 0 16px; box-sizing: border-box; border: #d9d9d9 solid 1px; border-radius: 16px;}
.project .project-tag-item:last-child {margin-right: 0;}
.project .project-tag-icon-box {display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 8px;}
.project .project-tag-icon {width: auto; height: 24px;}
.project .project-keyword-list {display: flex; align-items: flex-start; margin-bottom: 14px;}
.project .project-keyword-title {width: 100px; color: #0B478F; font-weight: 700;}
.project .project-keyword-item {width: calc(100% - 100px);}
.project .project-item-arrow-box {position: absolute; right: 10px; bottom: 10px;}
.project .project-item-arrow-text {position: relative; display: flex; align-items: center; font-size: 1.6rem; font-weight: 700;transition: color .3s;}
.project .project-item-arrow-text:after {content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: #0B478F; transition: width .3s;}
.project .project-item-arrow {position: relative; z-index: 0; display: block; width: 22px; height: 22px; margin-left: 10px; border-radius: 50%; overflow: hidden; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
.project .project-item-arrow.black {background: #000000;}
.project .project-item-arrow:before,
.project .project-item-arrow:after {content: ""; position: absolute; top: 5px; display: block; overflow: hidden; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.project .project-item-arrow:before {left: 4px;}
.project .project-item-arrow:after {opacity: 0; left: -18px;}

.project .project-item-link:hover .project-item-image {transform: scale(1.2);}
.project .project-item-link:hover .project-item-arrow-text {color: #0B478F;}
.project .project-item-link:hover .project-item-arrow-text:after {width: calc(100% - 32px);}
.project .project-item-link:hover .project-item-arrow {background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
.project .project-item-link:hover .project-item-arrow.black {background: #000000;}
.project .project-item-link:hover .project-item-arrow:before {opacity: 0; transition: left .6s, opacity .3s; left: 26px;}
.project .project-item-link:hover .project-item-arrow:after {opacity: 1; transition: left .6s, opacity .6s .2s; left: 4px;}
.project .button-move {width: 280px; margin: 70px auto 0;}

.seminar {padding-top: 120px; margin-top: -40px;}
.seminar .seminar-list {display: flex; flex-wrap: wrap; max-width: 1080px; margin: 0 auto;}
.seminar .seminar-item {position: relative; width: calc(100% / 3 - 40px); margin: 0 60px 0 0; border-radius: 16px; overflow: hidden; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); background-color: #ffffff;}
.seminar .seminar-item:nth-child(3n) {margin-right: 0;}
.seminar .seminar-item:nth-child(n + 4) {margin-top: 60px;}
.seminar .seminar-link {display: block;}
.seminar .seminar-item-image-box {width: 100%; overflow: hidden;}
.seminar .seminar-item-image {display: block; width: 100%; transition: transform .5s;}
.seminar .seminar-item-text-box {position: relative; min-height: 204px; padding: 16px 16px 80px 16px; box-sizing: border-box;}
.seminar .seminar-item-date {line-height: 2;}
.seminar .seminar-item-title {font-size: 1.8rem; font-weight: 700; line-height: 1.55; letter-spacing: .09rem;}
.seminar .seminar-item-tag-list {position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap;}
.seminar .seminar-item-tag {display: flex; align-items: center; justify-content: center; height: 24px; margin-right: 16px; margin-top: 8px; padding: 0 16px; border-radius: 12px; border: #d9d9d9 solid 1px; font-size: 1.2rem; font-weight: 700;}
.seminar .seminar-tag.seminar-tag-online {background-color: #00A0E9;}
.seminar .gradient {position: absolute; right: 30px; bottom: 30px; width: 32px; height: 32px; border-radius: 50%;}
.seminar .gradient-arrow {width: 32px; height: 32px;}
.seminar .gradient-arrow:before,
.seminar .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.seminar .gradient-arrow:before {left: 9px;}
.seminar .gradient-arrow:after {left: -23px; opacity: 0;}
.seminar .seminar-link:hover:before {opacity: 1;} 
.seminar .seminar-link:hover .seminar-item-image {transform: scale(1.2);}
.seminar .seminar-link:hover .gradient-arrow:before {opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.seminar .seminar-link:hover .gradient-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}

.news {max-width: 1080px; margin: -40px auto 0; padding-top: 200px;}
.news .news-list {margin-bottom: 40px;}
.news .news-item {display: flex; padding: 18px 20px; box-sizing: border-box; border-bottom: #0B478F dotted 1px;}
.news .news-item:first-child {border-top: #0B478F dotted 1px;}
.news .news-item-category {position: relative; top: 6px; display: flex; align-items: center; justify-content: center; width: 100px; height: 24px; margin-right: 40px; border-radius: 12px; background-color: #0B478F; font-size: 1.2rem; font-weight: 700; color: #ffffff;}
.news .news-item-date {width: 100px; line-height: 2;}
.news .news-item-title {width: calc(100% - 240px); line-height: 2;}
.news .news-item-title a {line-height: 2; color: #0B318F;}
.news .button-move {width: 280px;}




/*--------------------------
Solution
--------------------------*/
.solution-lead {padding-top: 64px;}
.solution-lead .solution-issue {display: flex; max-width: 1140px; margin: 0 auto 64px; padding: 0 30px; box-sizing: border-box;}
.solution-lead .solution-issue .title02 {width: calc(100% - 690px); margin-right: auto;}
.solution-lead .solution-issue .title02-big {text-align: left;}
.solution-lead .solution-issue .title02-small {text-align: left;}
.solution-lead .solution-issue-list {width: 690px;} 
.solution-lead .solution-issue-item {position: relative; margin-bottom: 20px; padding-left: 60px; box-sizing: border-box; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;} 
.solution-lead .solution-issue-item:last-child {margin-bottom: 0;}
.solution-lead .solution-issue-item-number {position: absolute; left: 0; top: 0; font-weight: 700; color: #0B478F;}
.solution-lead .solution-point {display: flex; max-width: 1140px; margin: 0 auto; padding: 30px; box-sizing: border-box; border-radius: 16px; background-color: #EDF9FF;}
.solution-lead .solution-point .title02 {width: calc(100% - 690px); margin-right: auto;}
.solution-lead .solution-point .title02-big {text-align: left;}
.solution-lead .solution-point .title02-small {text-align: left;}
.solution-lead .solution-point-text {width: 690px; font-size: 1.8rem; line-height: 1.55; color: #0B478F;}

.project .page-title {margin-bottom: 70px; text-align: center;}

.about-solution {max-width: 1080px; margin: 0 auto; padding-top: 70px;}
.about-solution .page-title {margin-bottom: 70px; text-align: center;}
.about-solution .about-solution-text {margin-bottom: 70px; font-size: 1.6rem; line-height: 2; text-align: center;}
.about-solution .about-solution-list {margin-bottom: 80px;}
.about-solution .about-solution-item {display: flex; margin-bottom: 50px;}
.about-solution .about-solution-item:last-of-type {margin-bottom: 0;}
.about-solution .about-solution-text-box {width: calc(50% - 15px); margin-right: auto;}
.about-solution .about-solution-title {position: relative; margin-bottom: 32px; padding-left: 60px; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}
.about-solution .about-solution-title-number {position: absolute; left: 0; top: 0; font-size: 3.2rem; font-weight: 700; line-height: 1.125; letter-spacing: .16rem; color: #0B478F;}
.about-solution .about-solution-item-text {font-size: 1.6rem; line-height: 2;}
.about-solution .about-solution-image-box {width:  calc(50% - 15px); max-width: 500px;}
.about-solution .about-solution-image {width: 100%;}
.about-solution .button-move {width: 480px;}



/*--------------------------
Download
--------------------------*/
.download .tag-list {display: flex; flex-wrap: wrap; margin-top: 16px;}
.download .tag-item {display: flex; align-items: center; justify-content: center; height: 24px; margin-right: 8px; padding: 0 16px; box-sizing: border-box; border-radius: 12px; border: #d9d9d9 solid 1px; font-size: 1.2rem; font-weight: 700;}
.download .download-info {display: flex; margin-top: 40px;}
.download .download-image-block {width: 360px; margin-right: auto;}
.download .download-image {width: 100%;}
.download .download-image-thumb-box {display: flex; flex-wrap: wrap; margin-top: 30px;}
.download .download-image-thumb {width: calc(50% - 10px); margin-right: 20px;}
.download .download-image-thumb:nth-child(2n) {margin-right: 0;}
.download .download-image-thumb:nth-child(n + 3) {margin-top: 20px;}
.download .download-text-block {width: calc(100% - 400px);}
.download .button-move {width: 280px; margin-top: 40px;}


.relation-service {padding: 120px 40px 120px; box-sizing: border-box; background-color: #F4F4F4;}
.relation-service .page-title {text-align: center;}
.relation-service .relation-list {display: flex; justify-content: center; margin-top: 80px;}
.relation-service .relation-item {position: relative; width: 400px; border-radius: 16px; background-color: #ffffff;}
.relation-service .relation-item:nth-child(2) {margin-left: 80px;}
.relation-service .relation-link {display: flex; align-items: center; height: 96px; padding-left: 35px; box-sizing: border-box; font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}
.relation-service .relation-link:before {content: ""; display: block; width: 28px; height: 28px; margin-right: 16px; background: no-repeat center;}
.relation-service .relation-item:first-child .relation-link:before {background-image: url("/jp/special/pfas/assets/img/icon_document.svg");}
.relation-service .relation-item:last-child .relation-link:before {background-image: url("/jp/special/pfas/assets/img/icon_edit.svg");}
.relation-service .relation-link:after {content: ""; position: absolute; left: -1px; top: -1px; border-radius: 16px; width: 100%; height: 100%; border: #0B478F solid 1px; opacity: 0; transition: opacity .3s;}
.relation-service .relation-link:hover:after {opacity: 1;}
.relation-service .gradient {position: absolute; right: 20px; top: 32px; width: 32px; height: 32px; border-radius: 50%;}
.relation-service .gradient-arrow {width: 32px; height: 32px;}
.relation-service .gradient-arrow:before,
.relation-service .gradient-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.relation-service .gradient-arrow:before {left: 9px;}
.relation-service .gradient-arrow:after {left: -23px; opacity: 0;}
.relation-service .relation-link:hover:before {opacity: 1;} 
.relation-service .relation-link:hover .gradient-arrow:before {opacity: 0; left: 41px; transition: left .6s, opacity .3s;}
.relation-service .relation-link:hover .gradient-arrow:after {opacity: 1; left: 9px; transition: left .6s, opacity .6s .2s;}




/*--------------------------
Mailmagazine
--------------------------*/
.page-catch-mailmagazine {background-color: #EDF9FF; padding-top: 214px;}
.page-catch-mailmagazine .page-catch-mailmagazine-inner {position: relative; max-width: 1300px; margin: 0 auto;}
.page-catch-mailmagazine .page-catch-mailmagazine-text-block {max-width: 1080px; margin: 0 auto; padding-bottom: 88px;}
.page-catch-mailmagazine .page-catch-mailmagazine-title {margin-bottom: 70px; font-size: 3.2rem; font-weight: 900; line-height: 1.5; letter-spacing: .32rem; color: #0B478F;}
.page-catch-mailmagazine .page-catch-mailmagazine-text {font-size: 1.8rem; line-height: 2;}
.page-catch-mailmagazine .page-catch-mailmagazine-link {display: flex; align-items: center; justify-content: center; width: 240px; height: 60px; margin-top: 50px; border-radius: 30px;}
.page-catch-mailmagazine .page-catch-mailmagazine-arrow {width: 32px; height: 32px; margin-left: 3px;}
.page-catch-mailmagazine .page-catch-mailmagazine-arrow:before,
.page-catch-mailmagazine .page-catch-mailmagazine-arrow:after {content: ""; position: absolute; top: calc(50% - 6px); display: block; width: 14px; height: 12px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_white.svg") no-repeat center; background-size: 13px 11px;}
.page-catch-mailmagazine .page-catch-mailmagazine-arrow:before {left: 9px;}
.page-catch-mailmagazine .page-catch-mailmagazine-arrow:after {left: -23px;}
.page-catch-mailmagazine .page-catch-mailmagazine-link:hover .page-catch-mailmagazine-arrow:before {opacity: 0; transition: left .6s, opacity .3s; left: 32px;}
.page-catch-mailmagazine .page-catch-mailmagazine-link:hover .page-catch-mailmagazine-arrow:after {opacity: 1; transition: left .6s, opacity .6s .2s; left: 9px;}
.page-catch-mailmagazine .page-catch-mailmagazine-image {position: absolute; right: 0; bottom: 0;}

.mailmagazine-block {padding-top: 80px; margin-bottom: 30px;}
.mailmagazine-block .page-title {margin-bottom: 80px; text-align: center;}
.mailmagazine-block .mailmagazine-service-list {display: flex; justify-content: center;}
.mailmagazine-block .mailmagazine-service-item {display: flex; align-items: center; justify-content: center; width: 160px; height: 160px; background-color: #EDF9FF; border-radius: 50%; margin-right: 20px;}
.mailmagazine-block .mailmagazine-service-item:last-child {margin-right: 0;}
.mailmagazine-block .mailmagazine-service-icon {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin: 0 auto;}
.mailmagazine-block .mailmagazine-service-text {margin-top: 7px; font-size: 1.8rem; font-weight: 700; line-height: 1.55; letter-spacing: .09rem; text-align: center; color: #0B478F;}




.seminar-application {padding-top: 80px;}
.seminar-application .seminar-application-title {margin-bottom: 80px; font-size: 3.2rem; font-weight: 500; line-height: 1.5; letter-spacing: .32rem; text-align: center;}

#application {padding-top: 120px; margin-top: -40px;}

.form-block iframe {}

.thanks {padding-top: 180px;}
.thanks .page-title {margin-bottom: 96px;}
.thanks .title01 {margin-bottom: 30px;}
.thanks .text-download {overflow-wrap: anywhere; word-break: normal; line-break: strict; color: #0B318F; line-height: 2;}
.thanks .button-down {margin-top: 40px;}
.thanks .button-back {margin-top: 70px;}

@media screen and (max-width:1199px){
    /*--------------------------
    Header
    --------------------------*/
    .header .gnav-button {position: relative; z-index: 0; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
    .header .gnav-button:before {content: ""; position: absolute; left: 0; top: 0; z-index: -1; display: block; transition: opacity .3s;  opacity: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(90deg, #00A0E9 0%, #0B478F 100%);}
    .header .gnav-button:hover:before {opacity: 1;}
    .header .gnav-button-inner {position: relative; display: block; width: 12px; height: 1px; background-color: #ffffff;}
    .header .gnav-button-inner:before,
    .header .gnav-button-inner:after {content: ""; position: absolute; left: 0; width: 100%; height: 1px; background-color: #ffffff;}
    .header .gnav-button-inner:before {top: -3px; transition: top .3s .3s, transform .3s;}
    .header .gnav-button-inner:after {bottom: -3px; transition: bottom .3s .3s, transform .3s;}
    .header .gnav {position: absolute; left: 0; top: 100%; display: block; overflow: hidden; transition: opacity .3s, padding .3s; opacity: 0; pointer-events: none; width: 100%; padding-left: 100%; background-color: #ffffff;}
    .header .gnav-button.is-active .gnav-button-inner {background-color: transparent;}
    .header .gnav-button.is-active .gnav-button-inner:before {top: 0; transform: rotate(45deg); transition: top .3s, transform .3s .3s;}
    .header .gnav-button.is-active .gnav-button-inner:after {bottom: 0; transform: rotate(-45deg); transition: bottom .3s, transform .3s .3s;}
    .header .gnav-list {display: block; transition: opacity .3s .2s; opacity: 0; margin:0 0 24px; padding: 0 30px; box-sizing: border-box;}
    .header .gnav-item {margin: 0; border-bottom: #f4f4f4 solid 1px;}
    .header .gnav-link {display: flex; align-items: center; height: 70px; font-size: 1.6rem;}
    .header .gnav-link:after {left: auto; bottom: auto; right: 0; top: calc(50% - 5px); display: block; transition: none; width: 13px; height: 11px; background: url("/jp/special/pfas/assets/img/icon_arrow_right_black.svg") no-repeat center; background-size: 13px 11px;}
    .header .gnav-link:hover {color: #0B478F;}
    .header .gnav-link:hover:after {width: 13px;}
    .header .gnav-link-contact {transition: opacity .3s .2s; opacity: 0; width: 315px; height: 48px; margin: 0 auto; background: linear-gradient(90deg, #0B478F 0%, #00A0E9 100%);}
    .header .gnav.is-active {transition: opacity .3s, padding .3s .2s; opacity: 1; pointer-events: auto; padding-left: 0;}
    .header .gnav.is-active .gnav-list {opacity: 1;}
    .header .gnav.is-active .gnav-link-contact {opacity: 1;}


    /*--------------------------
    Top
    --------------------------*/
    .solution-box {display: block;}
    .solution .title03 {width: 100%;}
    .solution .solution-list {width: 100%;}
    .solution .button-move {position: relative; left: 0; bottom: 0; width: 280px; margin: 50px auto 0;}




    /*--------------------------
    Mailmagazine
    --------------------------*/
    .page-catch-mailmagazine {background-color: #EDF9FF; padding-top: 214px;}
    .page-catch-mailmagazine .page-catch-mailmagazine-text-block {padding:  0 60px 88px; box-sizing: border-box;}
    .page-catch-mailmagazine .page-catch-mailmagazine-image {max-width: 50%;}

    .mailmagazine-block .mailmagazine-service-list {flex-wrap: wrap; width: 520px; margin: 0 auto;}
    .mailmagazine-block .mailmagazine-service-item:nth-child(3n) {margin-right: 0;}
    .mailmagazine-block .mailmagazine-service-item:nth-child(n + 4) {margin-top: 20px;}
}




@media screen and (max-width:959px){
    .seminar .seminar-item {width: calc(100% / 2 - 30px); margin: 0 60px 0 0;}
    .seminar .seminar-item:nth-child(3n) {margin-right: 60px;}
    .seminar .seminar-item:nth-child(2n) {margin-right: 0;}
    .seminar .seminar-item:nth-child(n + 3) {margin-top: 60px;}
}



@media screen and (max-width:768px){

    .pc{display:none !important;}
    .pc-inline{display:none !important;}
    .sp{display:block !important;}
    .sp-inline{display:inline !important;}

    .page-catch-narrow {width: 100%; height: 160px; margin: 0 auto 40px;}
    .page-catch-narrow .page-catch-text {font-size: 2.4rem; line-height: 1.5; letter-spacing: .24rem;}
    .page-catch-wide{height: 500px;}
    .page-catch-wide .page-catch-text {font-size: 2.4rem; line-height: 1.5; letter-spacing: .24rem;}
    .page-catch-under{height: 400px;}
    .page-catch-under .page-catch-text {font-size: 2.4rem; line-height: 1.5; letter-spacing: .24rem;}
    
    .header + .page-catch-narrow {margin-top: 80px;}


    .contents-narrow {max-width: 800px; width: calc(100% - 48px);}
    .contents-wide {padding: 0;}

    .page-title {font-size: 2.4rem; letter-spacing: .24rem;}
    .section-title {padding-bottom: 14px; font-size: 1.8rem; letter-spacing: .18rem;}
    .section-title:after {width: 120px; background-color: #0B478F;}

    .title00 {margin-bottom: 40px;}
    .title00 .title00-big {font-size: 2.4rem; letter-spacing: .2rem;}
    .title00 .title00-small {font-size: 1.4rem; letter-spacing: .07rem;}

    .title01 {font-size: 2.4rem; font-weight: 500; line-height: 1.5; letter-spacing: .24rem;}

    .title02 {margin-bottom: 20px;}
    .title02 .title02-big {font-size: 1.8rem; letter-spacing: .18rem;}
    .title02 .title02-small {margin-top: 6px; font-size: 1.2rem; line-height: 1.5; letter-spacing: .06rem;}

    .title03 {margin-bottom: 30px;}
    .title03 .title03-big {font-size: 1.8rem; font-weight: 700; letter-spacing: .09rem;}
    .title03 .title03-small {margin-bottom: 14px; font-size: 1.2rem; line-height: 1.5; letter-spacing: .06rem;}
    
    .button-back {width: 315px;}

    .button-down {width: 315px;}
    
    .page-body {padding-bottom: 60px;}
    .page-body .body-section {padding-top: 64px;}
    .page-body .bn-social-issues-solution {max-width: 640px; width: 100%; margin: 40px auto 0; padding: 0 24px; box-sizing: border-box;}
    .page-body .bn-social-issues-solution-link {display: block;}
    .page-body .bn-social-issues-solution-image-box {width: 100%;}
    .page-body .bn-social-issues-solution-image {width: 100%;}
    .page-body .bn-social-issues-solution-text-box {width: 100%; padding: 20px 20px 60px 20px;}
    .page-body .bn-social-issues-solution-text {font-size: 1.8rem;}
    .page-body .solution-item-gradient {position: absolute; right: 20px; bottom: 20px; width: 24px; height: 24px;}
    .page-body .bn-social-issues-solution-link .gradient-arrow {width: 24px; height: 24px; margin-left: 0;}
    .page-body .bn-social-issues-solution-link .gradient-arrow:before {left: -5px;}
    .page-body .bn-social-issues-solution-link .gradient-arrow:after {left: -19px;}
    .page-body .bn-social-issues-solution-link:hover .gradient-arrow:before {left: 29px;}
    .page-body .bn-social-issues-solution-link:hover .gradient-arrow:after {left: 5px;}
    
    .header + .download {margin-top: 80px;}



    /*--------------------------
    Header
    --------------------------*/
    .header {top: 0; left: 0; width: 100%; height: 60px; padding: 0 10px; border-radius: 0;}
    .header .header-logo-image {width: 234px; height: auto;}


    /*--------------------------
    Breadclumb
    --------------------------*/
    .header + .breadclumb {margin-top: 80px;}
    .breadclumb {width: calc(100% - 48px);}


    /*--------------------------
    Footer
    --------------------------*/
    .footer {padding: 40px 0 50px;}
    .footer .footer-contact {width: calc(100% - 48px); margin: 0 auto 40px;  padding-bottom: 40px;}
    .footer .footer-contact-title {margin-bottom: 40px; font-size: 3.2rem;}
    .footer .footer-contact-text {margin-bottom: 30px; font-size: 1.8rem;}
    .footer .footer-contact-link {width: 280px; height: 60px; border-radius: 30px; font-size: 1.8rem;}
    .footer .footer-contact-arrow {width: 32px; height: 32px; margin-left: 3px;}
    .footer .footer-contact-arrow:before,
    .footer .footer-contact-arrow:after {top: 8px; width: 20px; height: 17px; background-size: 20px 17px;}
    .footer .footer-contact-arrow:before {left: 6px;}
    .footer .footer-contact-arrow:after {left: -34px;}
    .footer .footer-contact-link:hover .footer-contact-arrow:before {left: 34px;}
    .footer .footer-contact-link:hover .footer-contact-arrow:after {left: 6px;}
    .footer .footer-nav {display: block; width: calc(100% - 48px);}
    .footer .footer-logo {text-align: center; margin-bottom: 30px;}
    .footer .footer-nav-list {display: block; margin-bottom: 50px;}
    .footer .footer-nav-item {display: block; margin-bottom: 10px; text-align: center;}
    .footer .footer-nav-item:after {display: none;}
    .footer .copy {text-align: center;}


    /*--------------------------
    Top
    --------------------------*/
    .page-lead {margin-bottom: 35px; font-size: 1.8rem; text-align: left;}
    .necessary {padding: 40px 24px 0; box-sizing: border-box;}
    .necessary .necessary-block {display: block;}
    .necessary .necessary-item {max-width: none; width: 100%;}
    .necessary .necessary-item:first-of-type {margin-bottom: 35px;}
    .necessary .necessary-image-box {margin-bottom: 20px;}
    .necessary .body-text {margin-bottom: 10px;}
    .necessary .gradient {margin: 20px auto 0;}
    
    .necessary .top-social-issues-solution {max-width: 640px; width: 100%; margin: 40px auto 0;}
    .necessary .top-social-issues-solution-link {display: block;}
    .necessary .top-social-issues-solution-image-box {width: 100%;}
    .necessary .top-social-issues-solution-image {width: 100%;}
    .necessary .top-social-issues-solution-text-box {width: 100%; padding: 20px 20px 60px 20px;}
    .necessary .top-social-issues-solution-text {font-size: 1.8rem;}
    .necessary .solution-item-gradient {position: absolute; right: 20px; bottom: 20px; width: 24px; height: 24px;}
    .necessary .top-social-issues-solution .gradient-arrow {width: 24px; height: 24px; margin-left: 0;}
    .necessary .gradient-arrow:before {left: 5px;}
    .necessary .gradient-arrow:after {left: -19px;}
    .necessary .top-social-issues-solution-link:hover .gradient-arrow:before {left: 29px;}
    .necessary .top-social-issues-solution-link:hover .gradient-arrow:after {left: 5px;}
    

    .feature {padding: 60px 24px 0;}
    .feature .feature-list {display: block;}
    .feature .feature-item {max-width: 400px; width: 100%; margin: 0 auto 40px;}
    .feature .feature-item:nth-child(3) {margin-right: auto;}
    .feature .feature-item:nth-child(n + 4) {margin-top: 0;}
    

    .solution {padding-top: 100px;}
    .solution-box {display: block; padding: 40px 24px; border-radius: 0;}
    .solution .solution-box:nth-of-type(n + 2) {margin-top: 40px;}
    .solution .title03 {width: 100%;}
    .solution .solution-list {display: block; width: 100%;}
    .solution .solution-item {width: 100%; margin: 0;}
    .solution .solution-box:nth-of-type(2) .solution-item {width: 100%; margin: 0;}
    .solution .solution-box:nth-of-type(2) .solution-item:nth-child(3n) {margin-right: 0;}
    .solution .solution-item:nth-child(n + 2) {margin-top: 20px;}
    .solution .solution-item:nth-child(n + 4) {margin-top: 20px;}
    .solution .solution-box:nth-of-type(2) .solution-item:nth-child(n + 2) {margin-top: 20px;}
    .solution .solution-box:nth-of-type(2) .solution-item:nth-child(n + 3) {margin-top: 20px;}
    .solution .solution-link {padding: 20px;}
    .solution .solution-title {display: flex; margin-bottom: 10px;}
    .solution .solution-icon {display: block; width: 24px; margin: 0 7px 0 0;}
    .solution .solution-item-gradient {right: 20px; bottom: 20px; width: 24px; height: 24px;}
    
    .solution .top-products-block {max-width: 640px; width: calc(100% - 48px); margin: 40px auto 0;}
    .solution .top-products-link {display: block;}
    .solution .top-products-image-box {width: 100%;}
    .solution .top-products-image {display: block; transition: transform .5s; width: 100%;}
    .solution .top-products-text-box {width: 100%; padding: 20px;}
    .solution .top-products-icon-box {margin-top: 30px;}
    .solution .top-products-gradient {position: absolute; right: 20px; top: 20px; width: 24px; height: 24px;}

    .solution .gradient-arrow {width: 24px; height: 24px;}
    .solution .gradient-arrow:before {left: 5px;}
    .solution .gradient-arrow:after {left: -19px;}
    .solution .solution-link:hover .gradient-arrow:before,
    .solution .top-products-link:hover .gradient-arrow:before {left: 29px;}
    .solution .solution-link:hover .gradient-arrow:after,
    .solution .top-products-link:hover .gradient-arrow:after {left: 5px;}
    .solution .button-move {margin-top: 40px;}

    .project {padding: 100px 24px 0; box-sizing: border-box;}
    .project .project-list {}
    .project .project-item {position: relative; margin-bottom: 40px;}
    .project .project-item:last-child {margin-bottom: 0;}
    .project .project-item-link {display: block;}
    .project .project-item-image-box {width: 100%; margin: 0 0 12px;}
    .project .project-item-text-box {max-width: none; width: 100%; padding-bottom: 0;}
    .project .project-keyword-list {margin-bottom: 16px;}
    .project .project-item-arrow-box {position: static; display: flex; justify-content: flex-end; margin-top: 20px;}
    .project .button-move {margin: 40px auto 0;}

    .seminar {padding: 100px 24px 0; box-sizing: border-box;}
    .seminar .seminar-list {display: block; }
    .seminar .seminar-item {max-width: 400px; width: 100%; margin: 0 auto;}
    .seminar .seminar-item:nth-child(2n) {margin-right: auto;}
    .seminar .seminar-item:nth-child(3n) {margin-right: auto;}
    .seminar .seminar-item:nth-child(n + 2) {margin-top: 40px;}

    .news {width: calc(100% - 48px); padding-top: 100px;}
    .news .news-item {flex-wrap: wrap;}
    .news .news-item-title {width: 100%; margin-top: 10px;}



    /*--------------------------
    Solution
    --------------------------*/
    .solution-lead {padding-top: 64px;}
    .solution-lead .solution-issue {display: block; margin: 0 auto 48px; padding: 0 24px;}
    .solution-lead .solution-issue .title02 {width: 100%; margin: 0 0 30px;}
    .solution-lead .solution-issue .title02-big {text-align: center;}
    .solution-lead .solution-issue .title02-small {text-align: center;}
    .solution-lead .solution-issue-list {width: 100%;} 
    .solution-lead .solution-issue-item {padding-left: 40px; font-size: 1.8rem; letter-spacing: .09rem;} 
    .solution-lead .solution-point {display: block; padding: 24px; box-sizing: border-box; border-radius: 0;}
    .solution-lead .solution-point .title02 {width: 100%; margin: 0 0 30px;}
    .solution-lead .solution-point .title02-big {text-align: center;}
    .solution-lead .solution-point .title02-small {text-align: center;}
    .solution-lead .solution-point-text {width: 100%; font-size: 1.4rem; line-height: 2;}

    .project .page-title {margin-bottom: 50px;}

    .about-solution {padding: 70px 24px 0;}
    .about-solution .page-title {margin-bottom: 70px; text-align: center;}
    .about-solution .about-solution-text {margin-bottom: 40px; font-size: 1.4rem; line-height: 2; text-align: left;}
    .about-solution .about-solution-list {margin-bottom: 60px;}
    .about-solution .about-solution-item {flex-direction: column-reverse; margin-bottom: 30px;}
    .about-solution .about-solution-item:last-of-type {margin-bottom: 0;}
    .about-solution .about-solution-text-box {width: 100%; margin-right: 0;}
    .about-solution .about-solution-title {margin-bottom: 12px; padding-left: 40px; font-size: 1.8rem; letter-spacing: .09rem;}
    .about-solution .about-solution-title-number {font-size: 1.8rem; line-height: 1.5; letter-spacing: .09rem;}
    .about-solution .about-solution-item-text {font-size: 1.4rem;}
    .about-solution .about-solution-image-box {width: 100%; max-width: none; margin-bottom: 20px;}
    .about-solution .button-move {width: 320px;}



    /*--------------------------
    Download
    --------------------------*/
    .download .download-info {display: block;}
    .download .download-image-block {display: none; width: 360px; margin-right: auto;}
    .download .download-image {width: 100%;}
    .download .download-image-thumb-box {display: flex; flex-wrap: wrap; margin-top: 30px;}
    .download .download-image-thumb {width: calc(50% - 10px); margin-right: 20px;}
    .download .download-image-thumb:nth-child(2n) {margin-right: 0;}
    .download .download-image-thumb:nth-child(n + 3) {margin-top: 20px;}
    .download .download-text-block {width: 100%;}


    .relation-service {padding: 60px 24px;}
    .relation-service .relation-list {display: block; margin-top: 60px;}
    .relation-service .relation-item {position: relative; width: 300px; margin: 0 auto;}
    .relation-service .relation-item:nth-child(2) {margin: 30px auto 0;}
    .relation-service .relation-link {padding-left: 20px; font-size: 1.8rem; letter-spacing: .18rem;}
    .relation-service .relation-link:before {width: 20px; height: 20px; background-size: 20px auto;}




    /*--------------------------
    Mailmagazine
    --------------------------*/
    .page-catch-mailmagazine {padding: 120px 0 0;}
    .page-catch-mailmagazine .page-catch-mailmagazine-text-block {padding: 0 24px;}
    .page-catch-mailmagazine .page-catch-mailmagazine-title {margin-bottom: 40px; font-size: 2.4rem; letter-spacing: .24rem; text-align: center;}
    .page-catch-mailmagazine .page-catch-mailmagazine-link {margin: 40px auto 0;}
    .page-catch-mailmagazine .page-catch-mailmagazine-image {position: static; display: block; max-width: none; width: 70%; margin: 0 auto;}

    .mailmagazine-block {padding-top: 50px; margin-bottom: 0;}
    .mailmagazine-block .page-title {margin-bottom: 50px;}
    .mailmagazine-block .mailmagazine-service-list {width: 340px;}
    .mailmagazine-block .mailmagazine-service-item {width: 100px; height: 100px;}
    .mailmagazine-block .mailmagazine-service-icon {width: 40px; height: 40px;}
    .mailmagazine-block .mailmagazine-service-icon-image {max-height: 100%; width: auto;}
    .mailmagazine-block .mailmagazine-service-text {font-size: 1.4rem;}




    .seminar-application {padding-top: 60px;}
    .seminar-application .seminar-application-title {margin-bottom: 40px; font-size: 2.4rem; letter-spacing: .24rem;}
    
    
    #application {padding-top: 100px;}
}