/* ----------------------------------------------------------------
	產品頁 PERFECT
-----------------------------------------------------------------*/
section.inner {
    width: calc(100% - 20px);
}
section.feature>.spray {
    background: #fae7a9
}
section.feature>.spray .inner{ max-width: 100%;width: 100%;}
@media(max-width: 767px) {
section.feature>.spray .inner{ max-width: 500px;        width: 100%;}
}
section.feature>.spray img {
    max-width: 100%;
   
}
@media(max-width: 767px) {
    section.feature>.spray img{}
    
}

section.feature>.about {
    padding: 84px 0 111px;
    background-color: #fff;
    background-image: url("../images/bg_triangle_top.webp"),url("../images/bg_triangle_bottom.webp");
    background-repeat: no-repeat;
    background-position: top,bottom;
    background-size: 100% 271px,100% 272px
}

@media(max-width: 767px) {
    section.feature>.about {
        padding:72px 0 130px;
        background-image: url("../images/bg_triangle_top_sp.webp"),url("../images/bg_triangle_bottom_sp.webp");
        background-size: 100% 128px,100% 127px
    }
}

section.feature>.about h2 {
    margin-bottom: 48px
}

@media(max-width: 767px) {
    section.feature>.about h2 {
        margin-bottom:16px
    }
}

section.feature>.about h3 {
    margin-bottom: 30px
}

section.feature>.about picture+picture {
    margin-top: 44px;
    display: block
}

@media(max-width: 767px) {
    section.feature>.about picture+picture {
        margin-top:50px
    }
}

section.feature>.guard {
    padding: 84px 0 74px;
    background-image: url("../images/perfect/guard_bg.webp");
    background-repeat: no-repeat;
    background-size: cover
}

@media(max-width: 767px) {
    section.feature>.guard {
        padding:50px 0;
        background-image: url("../images/perfect/guard_bg_sp.webp")
    }
}

section.feature>.guard .inner>picture img {
    max-width: calc(100% + 32px)
}

@media(max-width: 767px) {
    section.feature>.guard .inner>picture img {
        max-width:100%
    }
}
section.feature>.free {
    background-image: url("../images/perfect/free_bg.webp");
    background-repeat: no-repeat;
    background-size: cover
}

@media(max-width: 767px) {
    section.feature>.free {
        background-image:url("../images/perfect/free_bg_sp.webp")
    }
}

section.feature>.free .inner {
    padding: 89px 0 52px
}

@media(max-width: 767px) {
    section.feature>.free .inner {
        padding:50px 0
    }
}

section.feature>.free h3 {
    margin-bottom: 32px;
    text-align: center
}

@media(max-width: 767px) {
    section.feature>.free h3 {
        margin-bottom:18px
    }
}

section.feature>.free h4 {
    width: 55%;
    display: block;
    margin: 0 0 37px auto;
    font-size: 4.8rem;
    font-weight: bold;
    left: 0;
    transform: none
}

@media(max-width: 767px) {
    section.feature>.free h4 {
        width:100%;
        margin: 0 0 16px 0;
        font-size: 2.6rem
    }
}

section.feature>.free h4::before,section.feature>.free h4::after,section.feature>.free h4 span::before {
    height: 2px
}

@media(min-width: 768px) {
    section.feature>.free h4::before {
        width:calc(50% - 26px)
    }
}

section.feature>.free h4 span::before {
    width: 36px
}

@media(min-width: 768px) {
    section.feature>.free h4 span::before {
        left:calc(50% - 26px)
    }
}

@media(max-width: 767px) {
    section.feature>.free h4 span::before {
        width:25px
    }
}

section.feature>.free .img {
    width: 61.3%;
    position: absolute;
    bottom: 0;
       left: -13%;
}

@media(max-width: 767px) {
    section.feature>.free .img {
        width:100%;
        position: static
    }
}

section.feature>.free .txt {
    width: 55%;
    margin-left: auto
}

@media(max-width: 767px) {
    section.feature>.free .txt {
        width:100%
    }
}

.attempt {
    padding: 130px 0 120px;
    background-image: url("../images/perfect/attempt_bg.webp");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
}

@media(max-width: 767px) {
   .attempt {
        padding:89px 0 80px;
        background-image: url("../images/perfect/attempt_bg_sp.webp");
 background-position:center bottom;
    }
}

.attempt .sea_ttl {
    margin-bottom: 60px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fff
}

@media(max-width: 767px) {
  .attempt .sea_ttl {
        margin-bottom:9px;
        display: block
    }
}

@media(max-width: 767px) {
 .attempt .sea_ttl .txt {
        margin-bottom:15px
    }
}

.attempt .sea_ttl>.img {
    width: 582px
}

@media(max-width: 767px) {
  .attempt .sea_ttl>.img {
        margin:0 0 0 -25px;
        width: calc(100% + 73px)
    }
}

.attempt .sea_ttl h2 {
    margin-bottom: 36px
}

@media(max-width: 767px) {
.attempt .sea_ttl h2 {
        margin-bottom:26px
    }
}

.attempt .sea_ttl p {
    font-size: 2rem;
    line-height: 2
}

@media(max-width: 767px) {
  .attempt .sea_ttl p {
        font-size:1.4rem;
        line-height: 1.5;
        filter: drop-shadow(2px 2px 6px #262626)
    }
}

.attempt .sea_ttl .note {
    margin-top: 10px
}

@media(max-width: 767px) {
  .attempt .sea_ttl .note {
        filter:drop-shadow(2px 2px 6px #262626)
    }
}

.attempt .sea_save {
    padding: 88px 94px 67px 98px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: rgba(245,245,245,.3);
    color: #fff
}

@media(max-width: 767px) {
   .attempt .sea_save {
        width:calc(100% + 50px);
        margin-left: -25px;
        padding: 57px 40px 70px;
        display: block
    }
}

.attempt .sea_save::before,section.attempt .sea_save::after {
    content: "";
    width: 335px;
    height: 365px;
    display: block;
    pointer-events: none;
    position: absolute;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff
}

@media(max-width: 767px) {
   .attempt .sea_save::before,section.attempt .sea_save::after {
        width:83px;
        height: 80px
    }
}
.attempt .sea_save::before {
    top: 50px;
    left: 50px
}

@media(max-width: 767px) {
    .attempt .sea_save::before {
        top:25px;
        left: 20px
    }
}

.attempt .sea_save::after {
    right: 50px;
    bottom: 50px;
    transform: scale(-1, -1)
}

@media(max-width: 767px) {
   .attempt .sea_save::after {
        right:20px;
        bottom: 25px
    }
}

.attempt .sea_save h3 {
    width: 100%;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 2.4rem;
    font-weight: normal
}

@media(max-width: 767px) {
   .attempt .sea_save h3 {
        margin-bottom:19px;
        font-size: 1.8rem
    }
}

.attempt .sea_save h3 img {
    margin-bottom: 26px
}

@media(max-width: 767px) {
  .attempt .sea_save h3 img {
        height:19px;
        margin-bottom: 17px
    }
}

.attempt .sea_save .img {
    width: 50%
}

@media(max-width: 767px) {
    .attempt .sea_save .img {
        width:100%;
        margin-bottom: 18px
    }
}

.attempt .sea_save .img img {
    display: block;
    height: auto
}

.attempt .sea_save .img img:nth-of-type(1) {
    width: 338px
}

@media(max-width: 767px) {
  .attempt .sea_save .img img:nth-of-type(1) {
        width:89.5%
    }
}

.attempt .sea_save .img img:nth-of-type(2) {
    width: 226px;
    margin: -84px 0 0 auto
}

@media(max-width: 767px) {
  .attempt .sea_save .img img:nth-of-type(2) {
        width:46%;
        margin-top: -63px
    }
}

.attempt .sea_save .txt {
    width: 44.8%;
    padding-bottom: 22px
}

@media(max-width: 767px) {
   .attempt .sea_save .txt {
        width:100%;
        padding: 0;
        font-size: 1.2rem
    }
}

section.feature>.kind {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    background-image: url("../images/perfect/kind_bg.webp");
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%
}

@media(max-width: 767px) {
    section.feature>.kind {
        flex-direction:column;
        background-position: center
    }
}

section.feature>.kind h3 {
    width: 100%;
    margin: -17px 0 -15px;
    padding: 13px 0 16px;
    text-align: center
}

@media(max-width: 767px) {
    section.feature>.kind h3 {
        margin:0;
        padding: 9px 0 11px;
        order: 2
    }
}

section.feature>.kind h3 img {
    width: 980px
}

section.feature>.kind>img,section.feature>.kind>picture {
    width: 50%;
    height: auto
}

@media(max-width: 767px) {
    section.feature>.kind>img,section.feature>.kind>picture {
        width:100%
    }
}

section.feature>.kind>picture img {
    width: 100%;
    height: auto
}

@media(max-width: 767px) {
    section.feature>.kind>picture img {
        order:1
    }
}

@media(max-width: 767px) {
    section.feature>.kind>img {
        order:3
    }
}
section.feature>.note {
    padding: 32px 0
}

section.feature>.note li {
    margin-right: 1em;
    display: inline
}
.note {
    font-size: 1.2rem;
}

section.product {
    padding: 105px 0 114px;
    background: #e6f7ff;
}
section.product h2 {
    margin-bottom: 58px;
}
@media (max-width: 767px) {
    section.product {
        padding: 65px 0;
    }
}
.product .inner{max-width: 100%;width: 100%;padding:0 5%;}
.product_list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
}
section.product .product_list {
    margin-bottom: 16px;
}
.product_list>li {
    width: 32%;
    display: flex;
    flex-direction: column;
}
@media(max-width: 991px) {
    .product_list>li {
        width:100%
    }

    .product_list>li+li {
        margin-top: 50px;
    }

}
.product_list>li>.main {
    padding: 46px 30px 8px;
    background: #fff
}

@media(max-width: 767px) {
    .product_list>li>.main {
        padding:46px 10px 20px
    }
}

.product_list .diagonal_ttl {
    margin-bottom: 15px
}

@media(max-width: 767px) {
    .product_list .diagonal_ttl {
        margin-bottom:13px
    }
}

.product_list .diagonal_ttl sup {
    font-size: 40%;
    top: -1.4em
}

.product_list .copy {
    margin-bottom: -5px;
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1.54;
    text-align: center;
    color: #1147b4
}

@media(max-width: 767px) {
    .product_list .copy {
        margin-bottom:20px;
        font-size: 2.7rem
    }
}

.product_list .copy span {
    display: block;
    font-size: 2.4rem
}

@media(max-width: 767px) {
    .product_list .copy span {
        font-size:1.6rem
    }
}

.product_list .copy sup {
    font-size: 30%;
    top: -2.2em
}

.product_list>li>.main picture {
    max-width: 432px;
    min-height: 100px;
    margin: 15px auto 13px;
    display: block
}

@media(max-width: 767px) {
    .product_list>li>.main picture {
        min-height:0;
        margin: 0 auto 20px
    }
}
.product_list .content {
    height: 100%;
    padding: 0 30px 14px;
    display: none;
    background: #fff;
}

@media(max-width: 767px) {
    .product_list .content {
        padding:7px 0 50px
    }
}

.product_list .txt {
    min-height: 88px;
    margin-bottom: 15px
}

@media(max-width: 767px) {
    .product_list .txt {
        min-height:0;
        margin-bottom: 16px
    }
}

.product_list .lead {
    margin-bottom: 4px;
    line-height: 1.5;
    text-align: center;
}

.product_list .name {
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
    text-align: center
}

@media(max-width: 767px) {
    .product_list .name {
        font-size:2.6rem;
        line-height: 1.23
    }
}

.product_list .feature_list {
    min-height: 90px;
    margin-bottom: 29px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: stretch;
    justify-content: space-between
}

@media(max-width: 767px) {
    .product_list .feature_list {
        max-width:calc(100% - 60px);
        min-height: 0;
        margin: 0 auto 46px
    }
}

.product_list .feature_list>li {
    width: 49.4%;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    text-align: center;
    background: #d3f2ff;
    color: #1147b4
}

@media(max-width: 767px) {
    .product_list .feature_list>li {
        width:100%;
        min-height: 34px;
        font-size: 1.4rem
    }
}

@media(max-width: 767px) {
    .product_list .feature_list>li+li {
        margin-top:7px
    }
}

@media(min-width: 768px) {
    .product_list .feature_list>li:nth-of-type(n + 3) {
        margin-top:6px
    }
}

.product_list .feature_img {
    margin: -15px 0 32px
}

@media(max-width: 767px) {
    .product_list .feature_img {
        width:calc(100% - 40px);
        margin: -36px auto 20px
    }
}
.product_list .attention {
    margin-bottom: 20px;
    font-size: 1.2rem;
    line-height: 1.5
}

@media(max-width: 767px) {
    .product_list .attention {
        width:calc(100% - 40px);
        margin: 0 auto 40px;
        font-size: 1.4rem;
        line-height: 1.4285714286
    }
}

.diagonal_ttl {
    display: inline-block;
    font-size: 2.4rem;
    font-weight: normal;
    line-height: 1.4;
    position: relative;
    left: 50%;
    text-align: center;
    transform: translateX(-50%);
    color: #1147b4
}

@media(max-width: 767px) {
    .diagonal_ttl {
        font-size:2rem
    }
}

.diagonal_ttl::before,.diagonal_ttl::after {
    content: "";
    height: 1px;
    display: block;
    position: absolute;
    bottom: 0;
    background: #1147b4
}

.diagonal_ttl::before {
    width: calc(50% - 14px);
    left: 0
}

@media(max-width: 767px) {
    .diagonal_ttl::before {
        width:calc(50% - 18px)
    }
}

.diagonal_ttl::after {
    width: calc(50% + 2px);
    right: 0
}

.diagonal_ttl span {
    width: 100%;
    padding-bottom: 8px;
    display: block;
    position: relative
}

@media(max-width: 767px) {
    .diagonal_ttl span {
        padding:0 5px 4px
    }
}

.diagonal_ttl span::before {
    content: "";
    width: 18px;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: calc(50% - 14px);
    transform: rotate(48deg);
    transform-origin: top left;
    background: #1147b4
}

@media(max-width: 767px) {
    .diagonal_ttl span::before {
        left:calc(50% - 18px)
    }
}