@charset "utf-8";

/* CSS Document */
/* ==========================================================================
   Base
   ========================================================================== */
html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
    line-height: 1.8;
    text-align: justify;
    font-feature-settings: "palt";
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    padding-left: 20px;
    background-color: #fff;
}

@media (max-width: 767.98px) {
    header {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
    }
}

article {
    padding-top: 52px;
}

@media (min-width: 768px) {
    article {
        padding-top: 64px;
    }
}


footer {
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff;
}

h1 {
    width: 114px;
    font-size: 0;
}

b,
strong,
.hp_fwb {
    font-family: YuGothic, "Yu Gothic", "Segoe UI", Verdana, Meiryo, sans-serif;
    font-weight: bold;
}


@media all and (-ms-high-contrast: none) {
    body,
    b,
    strong,
    .hp_fwb {
        font-family: "Segoe UI", Meiryo, sans-serif;
    }
}

table {
    width: 100%;
}

.no-touchevents a {
    transition: .3s;
}

.no-touchevents a:hover {
    text-decoration: none;
}

input:focus,
textarea:focus,
a:focus {
    outline: none;
}

.no-touchevents a:hover {
    opacity: .5;
}

em {
    font-style: italic;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

figcaption {
    line-height: 1.5;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.ly_cont {
    margin-right: auto;
    margin-left: auto;
    padding-right: 20px;
    padding-left: 20px;
}

.ly_cont__440 {
    max-width: 480px;
}

.ly_cont__780 {
    max-width: 820px;
}

.ly_cont__900 {
    max-width: 940px;
}

.ly_cont__1140 {
    max-width: 1180px;
}

.ly_cont__1026 {
    max-width: 1066px;
}

/* ==========================================================================
   Block Module Template
   ========================================================================== */
.bl_grid {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

@media (max-width: 575.98px) {
    .bl_grid_xs__s {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
}

@media (max-width: 767.98px) {
    .bl_grid_xs {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
}

@media (min-width: 576px) {
    .bl_grid_md__s {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
}

@media (min-width: 768px) {
    .bl_grid_md {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
}

@media (min-width: 992px) {
    .bl_grid_lg {
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
    }
}

.bl_grid__gutters {
    margin-right: -20px;
    margin-left: -20px;
}

.bl_grid__gutters>* {
    padding-right: 20px;
    padding-left: 20px;
}

.bl_grid__gutters_l {
    margin-right: -5%;
    margin-left: -5%;
}

.bl_grid__gutters_l>* {
    padding-right: 5%;
    padding-left: 5%;
}

.bl_grid__2>* {
    width: 50%;
}

.bl_grid_md__2>* {
    width: 100%;
}

@media (min-width: 768px) {
    .bl_grid_md__2>* {
        width: 50%;
    }
}

.bl_grid_md__3>* {
    width: 100%;
}

@media (min-width: 768px) {
    .bl_grid_md__3>* {
        width: 33.333%;
    }
}

.bl_grid__4>* {
    width: 25%;
}

.bl_grid_md__4>* {
    width: 100%;
}

@media (min-width: 768px) {
    .bl_grid_md__4>* {
        width: 25%;
    }
}

.bl_grid__fxww {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.bl_grid__jcfe {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.bl_grid__jcc {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bl_grid__jcsb {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.bl_grid__jcsa {
    -ms-flex-pack: distribute;
    justify-content: space-around;
}

.bl_grid__aife {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.bl_grid__aic {
    -ms-align-items: center;
    align-items: center;
}

.bl_grid__asfe {
    -ms-align-self: flex-end;
    align-self: flex-end;
}

.bl_grid__ass {
    -ms-align-self: stretch;
    align-self: stretch;
}

.bl_grid__fxdrr {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

/* ==========================================================================
   Block Module
   ========================================================================== */

/* ==========================================================================
   Element Module
   ========================================================================== */
.elbtnyellow_junbi {
    margin-right: auto;
    margin-left: auto;
    display: block;
    position: relative;
}


.el_btn_yellow {
    position: relative;
    max-width: 200px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #F3CA5F;
    border: 2px solid #1A4A7E;
    font-size: 1.4rem;
    color: #000;
    text-decoration: none;
    text-align: center;
    text-indent: -1.5em;
    line-height: 1;
}

.el_btn_yellow::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('../image/icon-cart.png') no-repeat center center;
    background-size: 20px auto;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .el_btn_yellow__wrap {
        margin-right: -20px;
        margin-left: -20px;
    }
}

.el_btn_blue {
    position: relative;
    max-width: 200px;
    display: block;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #1A4A7E;
    font-size: 1.4rem;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    text-indent: -1.5em;
    line-height: 1;
}

.el_btn_blue::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url('../image/icon-link.png') no-repeat center center;
    background-size: 20px auto;
}

@media (min-width: 768px) {
    .el_btn_blue {
        display: none;
    }
}

.el_btn_blue__m {
    display: block;
    max-width: 360px;
    margin-top: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    text-indent: 0;
}

.el_btn_blue__l {
    display: block;
    max-width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    text-indent: 0;
}

.el_btn_blue__m::before {
    right: 20px;
}

/* ==========================================================================
   Unique
   ========================================================================== */

.un_gnav {
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .un_gnav {
        position: fixed;
        top: 52px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
        background: rgba(255, 255, 255, 0.85);
    }

    .un_gnav ul {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}

.un_gnav li {
    list-style-type: none;
}

@media (min-width: 768px) {
    .un_gnav li:not(:last-child) a {
        display: block;
        height: 64px;
        font-size: 1.3rem;
        color: #000;
        line-height: 64px;
        text-decoration: none;
    }

    .un_gnav li {
        margin-left: 19px;
    }
}

@media (min-width: 768px) and (-ms-high-contrast: none) {
    .un_gnav li:not(:last-child) a {
        font-size: 1.2rem;
    }
}

@media (min-width: 992px) {
    .un_gnav li:not(:last-child) a {
        font-size: 1.4rem;
    }

    .un_gnav li {
        margin-left: 30px;
    }
}

@media (orientation: landscape) and (max-width: 767.98px) {
    .un_gnav li:last-child {
        margin-top: 10px;
    }
}

@media (orientation: portrait) and (max-width: 767.98px) {
    .un_gnav li+li {
        margin-top: 30px;
    }

    .un_gnav li:last-child {
        margin-top: 45px;
    }
}

.un_gnav a {
    display: block;
    font-size: 1.6rem;
    color: #000;
    text-decoration: none;
}

@media (max-width: 767.98px) {
    .un_gnav a {
        white-space: nowrap;
        line-height: 3;
    }
}

.un_gnav_amazon {
    width: 214px;
    height: 64px;
}

.un_gnav_amazon a {
    display: block;
    height: 100%;
    background-color: #000;
    text-align: center;
}

.un_gnav_menu__wrap {
    position: relative;
    width: 36px;
    height: 33px;
    margin-left: auto;
}

.un_gnav_menu,
.un_gnav_menu_close {
    position: absolute;
    top: -2px;
    width: 36px;
    height: 33px;
    font-size: 1.1rem;
    color: #1A4A7E;
    line-height: 1;
    cursor: pointer;
}

@media (min-width: 768px) {
    .un_gnav_menu,
    .un_gnav_menu_close {
        display: none;
    }
}

.un_gnav_menu span,
.un_gnav_menu_close span {
    position: absolute;
    left: 0;
    width: 100%;
}

.un_gnav_menu span+span,
.un_gnav_menu_close span {
    height: 4px;
    margin-top: 7px;
    background-color: #1A4A7E;
}

.un_gnav_menu span:nth-of-type(1) {
    top: 0;
}

.un_gnav_menu span:nth-of-type(2) {
    top: 12px;
}

.un_gnav_menu span:nth-of-type(3) {
    bottom: 0;
}

.un_gnav_menu_close {
    display: none;
}

.un_gnav_menu_close span:nth-of-type(1) {
    top: 0;
    -webkit-transform: translateY(8px) rotate(-45deg);
    transform: translateY(8px) rotate(-45deg);
}

.un_gnav_menu_close span:nth-of-type(2) {
    bottom: 0;
    -webkit-transform: translateY(-14px) rotate(45deg);
    transform: translateY(-14px) rotate(45deg);
}

.un_slider__bottom {
    position: relative;
    z-index: 9998;
    height: 214px;
    margin-top: -100px;
    background: url("../image/bg-kv-sp.png") center center / auto 214px;
}

.un_slider__item {
    max-width: 380px;
    margin-left: auto;
    padding-top: 40px;
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .un_slider__item {
        margin-right: 5vw;
    }
}

@media (min-width: 768px) {
    .un_slider__bottom {
        height: 280px;
        margin-top: -280px;
        background: url("../image/bg-kv.png") center center / auto 280px;
    }

    .un_slider__item {
        max-width: 445px;
        padding-top: 84px;
    }
}

.un_about {
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

.un_about__body {
    padding-top: 30px;
}

@media (min-width: 768px) {
    .un_about__body {
        padding-top: 60px;
    }
}

.un_about__bottom {
    height: 100px;
    margin-top: -2px;
    background: url("../image/bg-section-bottom.png") repeat-x center bottom;
    background-size: auto 100px;
}

@media (min-width: 768px) {
    .un_about__bottom {
        height: 180px;
        margin-top: -50px;
        background-size: auto 180px;
    }
}

.un_about__title {
    max-width: 320px;
    margin-bottom: 20px;
}

@media (min-width: 768px) {
    .un_about__title {
        max-width: 724px;
        margin-bottom: 50px;
    }
}

.un_aboutConts__title {
    letter-spacing: .05em;
}

.un_aboutConts__body {
    color: #1A4A7E;
}

.un_aboutConts__arrow img {
    width: 80px;
    margin-top: 40px;
    margin-bottom: 20px;
}


@media (max-width: 767.98px) {
    .un_aboutConts {
        color: #1A4A7E;
    }

    .un_aboutConts+.un_aboutConts {
        margin-top: 5px;
    }

    .un_aboutConts>* {
        background-color: #fff;
    }

    .un_aboutConts__head>* {
        padding: 10px 36px 10px 20px;
    }

    .un_aboutConts__img {
        width: 100px;
    }

    .un_aboutConts__title {
        flex: 1;
        padding-left: 20px;
        font-size: 1.6rem;
        text-align: left;
    }

    .un_aboutConts__text {
        padding-top: 20px;
        padding-right: 20px;
        padding-left: 20px;
    }

    .un_aboutConts__body {
        padding: 50px 20px 20px;
    }

    .un_aboutConts__body h4 img {
        width: 380px;
    }

    .un_aboutConts__item img {
        width: 380px;
    }

    .un_aboutConts__body .el_btn_yellow,
    .un_aboutConts__body .el_btn_blue {
        max-width: 300px;
        text-indent: -.5em;
    }
}

@media (max-width: 374.98px) {
    .un_aboutConts__title {
        font-size: 1.4rem;
    }

    .un_aboutConts__body .el_btn_blue {
        padding-top: 12px;
        padding-bottom: 12px;
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    .un_aboutConts__head {
        color: #fff;
    }

    .un_aboutConts__title {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 2.3rem;
        text-align: center;
        line-height: 1.5;
    }

    .un_aboutConts__text {
        letter-spacing: .03em;
        color: #fff;
    }

    .un_aboutConts__body {
        margin-top: 80px;
        padding: 30px 30px 40px;
        background-color: #fff;
        border-radius: 10px;
    }
}

.un_ingredient {
    position: relative;
    margin-top: -100px;
    padding-top: 100px;
    padding-bottom: 200px;
    background: url("../image/bg-pattern.png") center center;
}

@media (min-width: 768px) {
    .un_ingredient {
        margin-top: -180px;
        padding-top: 180px;
    }
}

.un_ingredientItem+.un_ingredientItem {
    padding-top: 100px;
}

.un_ingredientItem {
    padding-bottom: 100px;
}

@media (min-width: 768px) {
    .un_ingredientItem+.un_ingredientItem {
        padding-top: 130px;
    }

    .un_ingredientItem {
        padding-bottom: 130px;
    }
}

.un_ingredientItem:nth-of-type(3) {
    padding-bottom: 0;
}

.un_ingredientItem__sec_02,
.un_ingredientItem__sec_03 {
    position: relative;
}

.un_ingredientItem__sec_02::before,
.un_ingredientItem__sec_03::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% + 40px);
    height: 1px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

@media (min-width: 768px) {
    .un_ingredientItem__sec_02::before,
    .un_ingredientItem__sec_03::before {
        width: 60%;
    }
}

.un_ingredientItem__sec_02::before {
    background-color: #198DD0;
}

.un_ingredientItem__sec_03::before {
    background-color: #F08F19;
}

.un_ingredient__title {
    max-width: 400px;
    margin-top: 30px;
    margin-bottom: 30px;
}

@media (min-width: 768px) {
    .un_ingredient__title {
        max-width: 500px;
        margin-top: 50px
    }
}

.un_ingredientItem__about {
    font-size: 1.4rem;
}

@media (max-width: 767.98px) {
    .un_ingredientItem__name {
        font-size: 1.6rem;
    }
}

.un_ingredientItem__spec {
    margin-top: 30px;
    margin-bottom: 30px;
    list-style-type: none;
}

.un_ingredientItem__left {
    color: #1A4A7E;
}

.un_ingredientItem__title {
    margin-bottom: 10px;
    padding-bottom: 10px;
    line-height: 1.5;
}

.un_ingredientItem__title span {
    font-size: 66.666%;
}

.un_ingredientItem__title_citric {
    padding-top: 100px;
    background: url("../image/bg-citric-formula.png") no-repeat left bottom / auto 140px, url("../image/bg-citric-eat.png") no-repeat right bottom 5px / auto 40px;
}

.un_ingredientItem__title_theobromine {
    padding-top: 120px;
    background: url("../image/bg-theobromine-formula.png") no-repeat left bottom / auto 150px;
}

.un_ingredientItem__title_phytin {
    padding-top: 120px;
    background: url("../image/bg-phytin-formula.png") no-repeat left bottom / auto 150px, url("../image/bg-phytin-eat.png") no-repeat right bottom 5px / auto 40px;
}

.un_ingredientItem__title_polyphenol {
    padding-top: 20px;
    background: url("../image/bg-polyphenol-eat.png") no-repeat right bottom 5px / auto 40px;
}

.un_ingredientItem__title_methionine {
    padding-top: 70px;
    background: url("../image/bg-methionine-formula.png") no-repeat left bottom / auto 100px, url("../image/bg-methionine-eat.png") no-repeat right bottom 5px / auto 40px;
}

.un_ingredientItem__left small {
    display: block;
    margin-top: 20px;
    padding-left: 1em;
    text-indent: -1em;
}

@media (max-width: 767.98px) {
    .un_ingredientItem__left {
        margin-top: 20px;
    }

    .un_ingredientItem__title {
        margin-left: -10px;
        padding-left: 10px;
        font-size: 2rem;
    }

    .un_ingredientItem__img {
        max-width: 380px;
        margin-right: auto;
        margin-left: auto;
    }

    .un_ingredientItem__about {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .un_ingredientItem__mgImg {
        max-width: 380px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .un_ingredientItem__right {
        width: 340px;
    }

    .un_ingredientItem__left {
        flex: 1;
        margin-right: 40px;
    }

    .un_ingredientItem__spec,
    .un_ingredientItem__name {
        width: 220px;
        margin-left: auto;
    }

    .un_ingredientItem__spec {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .un_ingredientItem__spec span {
        display: block;
        text-indent: 3.5em;
    }

	   .un_ingredientItem__right .elbtnyellow_junbi {
        max-width: 200px;
        margin-right: 20px;
    }
	
    .un_ingredientItem__right .el_btn_yellow {
        max-width: 220px;
        margin-right: 0;
    }

    .un_ingredientItem__left>* {
        padding-left: 20px;
    }

    .un_ingredientItem__title {
        font-size: 2.4rem;
    }

    .un_ingredientItem__left small {
        margin-top: 30px;
    }

    .un_ingredientItem__title_citric {
        background: url("../image/bg-citric-formula.png") no-repeat left bottom / auto 140px, url("../image/bg-citric-eat.png") no-repeat right bottom 5px / auto 60px;
    }

    .un_ingredientItem__title_phytin {
        padding-top: 140px;
        background: url("../image/bg-phytin-formula.png") no-repeat left bottom / auto 180px, url("../image/bg-phytin-eat.png") no-repeat right bottom 5px / auto 60px;
    }

    .un_ingredientItem__title_methionine {
        padding-top: 100px;
        background: url("../image/bg-methionine-formula.png") no-repeat left bottom / auto 120px, url("../image/bg-methionine-eat.png") no-repeat right bottom 5px / auto 60px;
    }

    .un_ingredientItem__mgImg {
        margin-right: calc(11.076vw - 235.063px);
    }
}

@media  (min-width: 1400px) {
    .un_ingredientItem__mgImg {
        margin-right: -80px;
    }
}

@media (-ms-high-contrast: none) and (min-width: 768px) {
    .un_ingredientItem__spec span {
        text-indent: 4em;
    }
}

.un_wave {
    position: relative;
    z-index: 1;
    height: 100px;
    margin-top: -120px;
    background: url("../image/bg-section-top.png") repeat-x center bottom;
    background-size: auto 100px;
}

@media (min-width: 768px) {
    .un_wave {
        height: 180px;
        margin-top: -150px;
        background-size: auto 180px;
    }
}

.un_attack {
    position: relative;
    z-index: 1;
    margin-top: -2px;
}

.un_attack__title {
    max-width: 236px;
}

.un_attackAbout__title {
    margin-bottom: 20px;
    font-size: 1.7rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .un_attackAbout__title {
        font-size: 2.4rem;
    }
}

.un_attackAbout+.un_attackAbout {
    margin-top: 100px;
}

@media (max-width: 767.98px) {
    .un_attack {
        padding-top: 30px;
    }
}

@media (max-width: 575.98px) {
    .un_attackAbout__left {
        max-width: 130px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
    }
	    .un_attackAbout__left2 {
        max-width: 200px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
			margin-top: 60px;
    }
}


@media (min-width: 768px) {
    .un_attack {
        padding-bottom: 200px;
    }

    .un_attack__title {
        max-width: 320px;
    }
}

@media (min-width: 576px) {
    .un_attackAbout+.un_attackAbout {
        margin-top: 40px;
    }

    .un_attackAbout__left {
        width: 168px;
    }

.un_attackAbout__left2 {
    width: 180px;
    margin-top: 10px;
    margin-left: 30px;
}



    .un_attackAbout__right {
        flex: 1;
        margin-left: 30px;
    }
}

.un_recommend__title {
    max-width: 320px;
}

@media (min-width: 768px) {
    .un_recommend__title {
        max-width: 500px;
    }
}

@media (max-width: 575.98px) {
    .un_recommend__about img {
        width: 110px;
    }

    .un_recommend__about figcaption {
        flex: 1;
        margin-left: 15px;
    }
}

@media (min-width: 576px) {
    .un_recommend__about figcaption {
        margin-top: 10px;
        text-align: center;
    }
}

.un_faq__title {
    max-width: 208px;
}

.un_faq__subTitle {
    margin-bottom: 20px;
}

.un_faqAbout:nth-of-type(1) {
    margin-top: -15px;
}


.un_faqAbout__head_q {
    display: block;
    padding-left: 2em;
    text-indent: -2em;
}

.un_faqAbout__body p:nth-of-type(1) {
    text-indent: -2em;
}

.un_faqAbout__body p {
    padding-left: 2em;
}

.un_faqAbout__head {
    margin-top: 15px;
    padding-top: 10px;
    padding-right: 50px;
    padding-bottom: 10px;
}

.un_faqAbout__body {
    display: none;
    padding-top: 20px;
    padding-right: 50px;
}

.un_faqAbout__head_q::before {
    content: 'Q.　';
}

.un_faqAbout__body p:nth-of-type(1)::before {
    content: 'A.　';
}

@media (min-width: 768px) {
    .un_faq__title {
        max-width: 310px;
    }

    .un_faq__subTitle {
        font-size: 2.4rem;
        margin-bottom: 40px;
    }

    .un_faqAbout {
        margin-left: 30px;
    }

    .un_faq__text {
        padding-right: 30px;
        padding-left: 30px;
    }
}

.un_trouble__title {
    max-width: 230px;
}

@media (min-width: 768px) {
    .un_trouble__title {
        max-width: 530px;
    }
}

@media (max-width: 767.98px) {
    .un_trouble__about>*+* {
        margin-top: 50px;
    }

    .un_trouble__item {
        max-width: 380px;
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .un_trouble__br {
        display: block;
    }
}

.un_contact__title {
    max-width: 190px;
}

@media (min-width: 768px) {
    .un_contact__title {
        max-width: 280px;
    }
}

@media (max-width: 767.98px) {
    .un_attack,
    .un_recommend,
    .un_faq,
    .un_trouble {
        padding-bottom: 100px;
    }

    .un_contact {
        padding-bottom: 40px;
    }
}

@media (min-width: 768px) {
    .un_attack,
    .un_recommend,
    .un_faq,
    .un_trouble {
        padding-bottom: 200px;
    }

    .un_contact {
        padding-bottom: 100px;
    }
}

.un_footer__logo {
    width: 114px;
}

.un_footer__copyright small {
    font-size: 1.1rem;
    color: #000;
}

@media (max-width: 767.8px) {
    .un_footer__logo {
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 10px;
    }

    .un_footer__copyright {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .un_footer__copyright {
        flex: 1;
        text-align: right;
    }
}

/* ==========================================================================
   Program
   ========================================================================== */
.js_noscript p {
    padding: 20px;
    color: red;
    border: 1px solid;
    line-height: 1.5;
}

.js_slider__01,
.slick-slide {
    height: 500px;
}

@media (min-width: 576px) {
    .js_slider__01,
    .slick-slide {
        height: calc(12.136vw + 430.097px);
    }
}

@media (min-width: 1400px) {
    .js_slider__01,
    .slick-slide {
        height: 600px;
    }
}

.js_slider__01 {
    background: url("../image/ph-kv-01.jpg") no-repeat center center;
    background-size: cover;
}

.js_slider__02 {
    background: url("../image/ph-kv-02.jpg") no-repeat center center;
    background-size: cover;
}

@media (max-width: 575.98px) {

    .js_slider__01,
    .js_slider__02 {
        background-position: calc(50% + 20vw) center;
    }
}


@media (max-width: 767.98px) {
    .js_accordion:not(.is_active) {
        position: relative;
        cursor: pointer;
    }

    .js_accordion:not(.is_active) .js_accordion__btn {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 36px;
        height: 36px;
        background-color: #1A4A7E;
    }

    .js_accordion:not(.is_active) .js_accordion__btn::before,
    .js_accordion:not(.is_active) .js_accordion__btn::after {
        content: '';
        position: absolute;
        right: 8px;
        bottom: 16px;
        width: 20px;
        height: 2px;
        background-color: #fff;
    }

    .js_accordion:not(.is_active) .js_accordion__btn::after {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .js_accordion__body {
        display: none;
    }

    .js_accordion__close {
        position: relative;
        display: block;
        height: 44px;
        margin-top: 20px;
        margin-right: -20px;
        margin-left: -20px;
        cursor: pointer;
    }

    .js_accordion__close::before,
    .js_accordion__close::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;
        height: 2px;
        background-color: #1A4A7E;
    }

    .js_accordion__close::before {
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .js_accordion__close::after {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
    }
}

.js_accordionFaq {
    border-bottom: 2px solid;
}

.js_accordionFaq dt:not(.is_active) {
    position: relative;
    cursor: pointer;
    transition: .3s;
}

.js_accordionFaq dt:not(.is_active)::before,
.js_accordionFaq dt:not(.is_active)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 20px;
    height: 2px;
    background-color: #fff;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.js_accordionFaq dt:not(.is_active)::after {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.js_accordionFaq__close {
    position: relative;
    display: block;
    height: 60px;
    margin-top: 30px;
    margin-right: -30px;
    cursor: pointer;
    transition: .3s;
}

@media (min-width: 768px) {
    .js_accordionFaq__close {
        margin-right: -30px;
        margin-left: -30px;
    }
}

.js_accordionFaq__close::before,
.js_accordionFaq__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background-color: #fff;
}

.js_accordionFaq__close::before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(-45deg);
}

.js_accordionFaq__close::after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.no-touchevents .js_accordionFaq dt:not(.is_active):hover,
.no-touchevents .js_accordionFaq__close:hover {
    opacity: .5;
}

.js_noscript {
    padding-top: 80px;
    padding-bottom: 28px;
}

@media (min-width: 768px) {
    .js_noscript {
        padding-top: 100px;
        padding-bottom: 46px;
    }
}

#js_pageTop__wrap {
    padding-bottom: 40px;
}

#js_pageTop {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    margin-left: auto;
    background-color: #1A4A7E;
    border-radius: 50%;
}

#js_pageTop::before {
    content: '';
    position: absolute;
    top: 45%;
    right: 50%;
    width: 18px;
    height: 18px;
    border: 0px;
    border-top: solid 2px #fff;
    border-left: solid 2px #fff;
    -webkit-transform: translateX(50%) rotate(45deg) skew(20deg,20deg);
    transform: translateX(50%) rotate(45deg) skew(20deg,20deg);
}

/* ==========================================================================
   Helper
   ========================================================================== */
.hp_posr {
    position: relative;
}

.hp_dib {
    display: inline-block;
}

.hp_maw_100 {
    max-width: 100%;
}

.hp_db_xs {
    display: block;
}

@media (min-width: 768px) {
    .hp_db_xs {
        display: none;
    }
}

.hp_db_md {
    display: none;
}

@media (min-width: 768px) {
    .hp_db_md {
        display: block;
    }
}

.hp_ma {
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    .hp_ma_xs {
        margin-right: auto;
        margin-left: auto;
    }
}

@media (min-width: 768px) {
    .hp_ma_md {
        margin-right: auto;
        margin-left: auto;
    }
}

.hp_mra {
    margin-right: auto;
}

.hp_mla {
    margin-left: auto;
}

.hp_nmt10 {
    margin-top: -10px;
}

.hp_mt10 {
    margin-top: 10px;
}

.hp_mt20 {
    margin-top: 20px;
}

.hp_mt30 {
    margin-top: 30px;
}

.hp_mt40 {
    margin-top: 40px;
}

.hp_mt50 {
    margin-top: 50px;
}

.hp_mt60 {
    margin-top: 60px;
}

.hp_mt70 {
    margin-top: 70px;
}

.hp_mt80 {
    margin-top: 80px;
}

.hp_mt90 {
    margin-top: 90px;
}

.hp_mt100 {
    margin-top: 100px;
}

@media (max-width: 767.98px) {
    .hp_mt10_xs {
        margin-top: 10px;
    }

    .hp_mt20_xs {
        margin-top: 20px;
    }

    .hp_mt30_xs {
        margin-top: 30px;
    }

    .hp_mt40_xs {
        margin-top: 40px;
    }

    .hp_mt50_xs {
        margin-top: 50px;
    }

    .hp_mt60_xs {
        margin-top: 60px;
    }

    .hp_mt100_xs {
        margin-top: 100px;
    }

    .hp_mt155_xs {
        margin-top: 155px;
    }
}

.hp_mb10 {
    margin-bottom: 10px;
}

.hp_mb20 {
    margin-bottom: 20px;
}

.hp_mb30 {
    margin-bottom: 30px;
}

.hp_mb40 {
    margin-bottom: 40px;
}

.hp_mb50 {
    margin-bottom: 50px;
}

.hp_mb60 {
    margin-bottom: 60px;
}

.hp_mb70 {
    margin-bottom: 70px;
}

.hp_mb80 {
    margin-bottom: 80px;
}

@media (max-width: 767.98px) {
    .hp_mb10_xs {
        margin-bottom: 10px;
    }

    .hp_mb20_xs {
        margin-bottom: 20px;
    }

    .hp_mb30_xs {
        margin-bottom: 30px;
    }

    .hp_mb40_xs {
        margin-bottom: 40px;
    }

    .hp_mb50_xs {
        margin-bottom: 50px;
    }

    .hp_mb60_xs {
        margin-bottom: 60px;
    }
}

@media (min-width: 768px) {
    .hp_mt50_md {
        margin-top: 50px;
    }

    .hp_mt80_md {
        margin-top: 80px;
    }
}

.hp_mb10 {
    margin-bottom: 10px;
}

.hp_mb20 {
    margin-bottom: 20px;
}

.hp_mb30 {
    margin-bottom: 30px;
}

.hp_mb40 {
    margin-bottom: 40px;
}

.hp_mb50 {
    margin-bottom: 50px;
}

.hp_mb60 {
    margin-bottom: 60px;
}

.hp_mb70 {
    margin-bottom: 70px;
}

.hp_mb80 {
    margin-bottom: 80px;
}

@media (max-width: 767.98px) {
    .hp_mb10_xs {
        margin-bottom: 10px;
    }

    .hp_mb20_xs {
        margin-bottom: 20px;
    }

    .hp_mb30_xs {
        margin-bottom: 30px;
    }

    .hp_mb40_xs {
        margin-bottom: 40px;
    }

    .hp_mb50_xs {
        margin-bottom: 50px;
    }

    .hp_mb60_xs {
        margin-bottom: 60px;
    }
}

.hp_pt0 {
    padding-top: 0;
}

.hp_tal {
    text-align: left;
}

.hp_tar {
    text-align: right;
}

@media (max-width: 767.98px) {
    .hp_tac_xs {
        text-align: center;
    }
}

.hp_tac {
    text-align: center;
}

@media (min-width: 768px) {
    .hp_tac_md {
        text-align: center;
    }
}

.hp_tdu {
    text-decoration: underline;
}

.hp_listn {
    padding-left: 0;
    list-style-type: none;
}

.hp_c_white {
    color: #fff;
}

.hp_c_black {
    color: #000;
}

.hp_bac_blue {
    background-color: #477EBF;
}

.touchevents .hp_sup {
    position: relative;
    top: -0.5em;
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}