@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@500;700&display=swap');

/* global */
:root {
    --trans1: all 0.3s;
}
body {
    font-family: 'Noto Sans', sans-serif;
    color: #000;
	font-size: 1em;
    overflow-x: hidden;
    font-weight: 500;
    position: relative;
}
.border_left, .border_right {
    position: absolute;
    content: '';
    width: 1px;
    height: 100%;
    background: #000;
    top: 0;
    z-index: 2;
}
.border_left {
    left: 48px;
}
.border_right {
    right: 47px;
}
*, *:before, *:after {
    box-sizing: border-box;
	 -webkit-box-sizing: border-box;
}
*:focus { 
    outline: none; 
}
table {
    width: 100%;
}
a {
    text-decoration: none;
    color: #000;
    transition: var(--trans1);
}
a:hover {
/*    text-decoration: underline;*/
}
.link {
    color: #007dc5;
    display: inline-block;
}
.link:hover {
    text-decoration: underline;
}
p, .p {
    margin: 0;
	line-height: 1.5;
    font-size: 0.8vw;
}
.hidden {
    overflow: hidden;
}
.clear:after {
	content: '';
	display: table;
	clear: both;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.tl {
    text-align: left;
}
.tc {
    text-align: center;
}
.tr {
    text-align: right;
}
.inner {
	max-width: 75vw;
	margin: auto;
}
main {
    margin-top: 7vw;
}
section {
	position: relative;
}
.video_wrap {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.video_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	max-height: 100%;
	max-width: 100%;
	min-height: 100%;
	min-width: 100%;
	width: 0;
}
.max100 {
    max-width: 100%;
}
.full {
    width: 100%;
}
.r {
    position: relative;
}
.a {
    position: absolute;
}
.flex {
    display: flex;
}
.flex_1 {
    flex: 1;
}

/* header */
header {
    position: fixed;
    width: 100%;
    z-index: 3;
    background: #fff;
    top: 0;
    left: 0;
    border-bottom: 1px solid #000;
}
header .inner {
    align-items: center;
    padding: 0 2vw;
}
.logo_wrap {
    border-bottom: 1px solid #000;
    padding: 30px 0 20px;
}
.logo {
    width: 13vw;
    display: block;
    margin: 0 auto;
}
.light {
    width: 21px;
}
.light.top {
    top: -11px;
}
.light.btm {
    bottom: -14px;
}
.light.left {
    left: 38px;
}
.light.right {
    right: 38px;
}
.border {
    border-bottom: 1px solid #000;
    width: 100%;
    left: 0;
}
.border_top {
    top: 40px;
}
.border_btm {
    bottom: 42px;
}
.nav {
	display: flex;
    align-items: center;
    margin-bottom: 0.5vw;
}
.nav > li {
    position: relative;
}
.nav > li:before {
    position: absolute;
    content: '';
    width: 1px;
    height: 80%;
    background: #000;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.nav > li:first-of-type:before {
    content: none;
}
.nav a {
    display: block;
    padding: 0.7vw 2.5vw;
    display: block;
    position: relative;
    /* min-width: 12vw; */
    text-align: center;
}
.nav .buy_wrap {
    background: #19364e;
    display: flex;
    gap: 1.5vw;
    align-items: center;
}
.nav .buy_wrap:before {
/*    content: '';*/
}
.nav .buy_wrap .buy {
    width: 2vw;
}
.nav .buy_wrap .full {
    height: 1.2vw;
    width: auto;
}
.nav > li > .acc_con {
    position: absolute;
    width: 100%;
    z-index: 1;
    border: 1px solid #000;
}
.nav > li > .acc_con > a:nth-of-type(odd) {
    background: #f5f3f2;
}
.nav > li > .acc_con > a:nth-of-type(even) {
/*    background: #dedede;*/
    background: #f5f3f2;
}
.nav > li > .acc_con > a {
    border-bottom: 1px solid #000;
}
.nav > li > .acc_con > a:hover {
    background: #769fa9;
}
.yahoo_btn {
    position: relative;
    background: #f5f3f2;
}
.yahoo_btn:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: -0.7vw;
    margin-left: -0.8vw;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0.7vw 0.8vw 0 0.8vw;
    border-color: #f5f3f2 transparent transparent transparent;
    z-index: 1;
    transform: translateY(-0.7vw);
    transition: var(--trans1);
}
.yahoo_btn:hover {
    background: #769fa9;
}
.yahoo_btn:hover:before {
    border-color: #769fa9 transparent transparent transparent;
}
.sub_menu.open > .yahoo_btn:before {
    transform: translateY(0);
}
.yahoo_con {
    background: #dedede;
}
/*
.yahoo_con:hover {
    background: #769fa9;
    transition: var(--trans1);
}
*/
.yahoo_con a {
    font-size: 1vw;
/*    border-bottom: 1px solid #000;*/
}
.yahoo_con li:first-of-type a {
    padding-top: 1.4vw;
}
.yahoo_con li:nth-of-type(odd) {
    background: #dedede;
}
.yahoo_con li:nth-of-type(even) {
/*    background: #f5f3f2;*/
    background: #dedede;
}
.yahoo_con a:hover {
    color: #fff;
    background: #769fa9;
}
.social_wrap {
    padding: 0 2vw;
    gap: 1vw;
}
.social_wrap a {
    display: inline-block;
    width: 2vw;
}
.social_wrap .global {
    display: none;
}
.links_wrap {
    display: none;
}
.sub_menu.open {
    
}

/* footer */
footer {
    background: #000;
    padding: 1.5vw 3.4vw;
    font-size: 12px;
    color: #fff;
    position: relative;
}
footer .flex {
    justify-content: space-between;
    align-items: center;
}
.mandom {
    width: 3vw;
}
footer .logo_w {
    width: 10vw;
}
footer .logo_w path {
    fill: #fff;
}
footer .logo_w .st0 {
    fill: #fff;
}

/* tab */
.tab {
	
}
.tab_btn {
    
}
.tab_btn > * {
	position: relative;
	text-align: center;
	cursor: pointer;
    display: inline-block;
    margin: 0 0.5vw 0 0;
}
.tab_btn font {
    background: #dedede;
    position: relative;
    z-index: 1;
    display: block;
    padding: 0.7vw 2.5vw;
    font-size: 1.3vw;
    letter-spacing: 1px;
}
.tab_btn > *:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    z-index: -1;
    left: 0.2vw;
    top: 0.2vw;
}
.tab_btn > *.show font {
    background: #769fa9;
    color: #fff;
}
.tab_con {
	border-top: none;
}
.tab_con > div {
	opacity: 0;
	transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    -ms-transition: all .5s;
	display: none;
	padding: 10px;
}
.tab_con > div.show {
	display: block;
}
.tab_con > div.fade {
	opacity: 1;
}
.tab_con .inner {
	padding: 0 94px;
}

/* acc */
.acc_con {
    display: none;
}

/* list */
.no_list {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* main */
#kv {
    overflow: hidden;
}
#kv .inner {
    max-width: 82vw;
}
#kv .bg {
    background-image: url(../img/kv.jpg); /* 1577*822 */
    background-repeat: no-repeat;
    height: 48vw;
    background-size: 100% auto;
    overflow: hidden;
}
.deco {
    position: absolute;
}
.catch {
    width: 19.8vw;
    right: 16vw;
    top: 4.8vw;
}
.day7 {
    width: 5vw;
    right: 3vw;
    top: 24vw;
}
.kv_icon {
    width: 9.3vw;
    left: 16.4vw;
    top: 13.3vw;
}
.kv_pro {
    width: 24.5vw;
    right: 13.7vw;
    z-index: 1;
    top: 29.4vw;
}
.kv_smoky {
    width: 70vw;
    left: 0;
    top: -2vw;
/*    animation: cloud-movement 5.5s linear 1s infinite alternate;*/
}
@keyframes cloud-movement {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(5%);
  }
}
.kv_ps {
    padding: 0.3vw 0;
    position: absolute;
    left: 13.5%;
    bottom: 5%;
    /* margin-right: 3.5vw; */
    width: 36%;
    /* text-align: right;*/
}
#smell {
    background: #293d51;
    padding: 4vw 0 3vw;
}
.main_tit {
    margin: 0 auto 0.8vw;
}
#smell .main_tit {
    width: 21.8vw;
}
.sub_tit {
    font-size: 1.3vw;
    margin-bottom: 2vw;
    line-height: 1.45;
}
#manage {
    padding: 11vw 7vw 9vw 8vw;
}
.color_w {
    color: #fff;
}
.color_b {
    color: #000;
}
#manage .flex {
    gap: 5vw;
}
#manage .main_tit {
    margin-top: 3vw;
    margin-left: 0;
    width: 22vw;
}
#manage .sub_tit {
    margin-bottom: 8vw;
}
#points {
    background-image: url(../img/bg-01.jpg);
    padding: 4vw 0;
}
#points .main_tit {
    width: 22vw;
    margin-left: 0;
}
.chert_wrap {
    width: 62vw;
    margin: auto;
}
big {
    font-size: 125%;
}
.icon_40 {
    width: 8vw;
    float: left;
    margin-right: 2.6vw;
    margin-left: 2.6vw;
/*    animation-iteration-count: infinite;*/
/*    animation-duration: 5s;*/
}
.chart_desc {
    overflow: hidden;
}
.tit_wrap {
/*    gap: 2.6vw;*/
    margin-bottom: 1vw;
}
#points .sub_tit {
/*    font-size: 1vw;*/
    line-height: 1.5;
}
.chart {
    background: #fff;
    padding: 3vw;
    gap: 4vw;
}
.chart .bg {
    background-image: url(../img/bg-chart.png);
    height: 29vw;
    width: 40vw;
    background-size: 100% 100%;
}
.chart .deco {
    cursor: pointer;
}
.chart .deco.show {
    animation-name: jump2;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes jump2 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}
.chart .t1 {
    width: 5vw;
    top: 9vw;
    left: 4vw;
}
.chart .t2 {
    width: 8vw;
    top: 18vw;
    left: 10.5vw;
}
.chart .t3 {
    width: 4vw;
    top: 9vw;
    left: 28vw;
}
.intro_wrap {
    margin-bottom: 2vw;
    width: 14vw;
    color: #333;
    opacity: 0.5;
    transition: var(--trans1);
    cursor: pointer;
    text-align: justify;
}
.intro_wrap.show {
    opacity: 1;
}
.intro_wrap .tit {
    width: 12vw;
    margin-bottom: 1vw;
    position: relative;
    padding-left: 2vw;
}
.intro_wrap .tit:before {
    position: absolute;
    content: '';
    left: 0.2vw;
    top: 50%;
    margin-top: -0.5vw;
    width: 0.8vw;
    height: 0.8vw;
    transform: rotate(45deg);
}
.intro_wrap.i1 .tit:before {
    background: #72929c;
}
.intro_wrap.i2 .tit:before {
    background: #1a3063;
}
.intro_wrap.i3 .tit:before {
    background: #b68d6c;
}
#series {
    padding: 6vw 0 6vw;
    background: #e3f1f4;
}
#series .main_tit {
    width: 17vw;
}
.pro_wrap {
    width: 79vw;
    margin: 4vw auto 0;
    gap: 3.5vw;
    grid-template-columns: repeat(3, 1fr);
    display: grid;
}
.pro_wrap .item {
    position: relative;
    border: 1px solid #8fadb5;
    padding: 3vw 3vw;
    flex: 1;
    text-align: justify;
    margin-bottom: 1vw;
}
.pro_wrap .item.jp:after {
    position: absolute;
    content: '';
    background: url(../img/icon-jp.svg);
    background-size: 100% 100%;
    width: 6.3vw;
    height: 6.3vw;
    left: -3vw;
    top: -3vw;
}
.pro_wrap .item.jp1:after {
    position: absolute;
    content: '';
    background: url(../img/icon-jp-new.svg);
    background-size: 100% 100%;
    width: 6.3vw;
    height: 6.3vw;
    left: -3vw;
    top: -3vw;
}
.pro_wrap .img {
    margin: 0 auto 1.5vw;
    /* padding: 0 0.4vw; */
    display: block;
    text-align: center;
}
#series .pro_wrap .img:hover {
    animation-name: jump;
    animation-duration: 0.7s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@keyframes jump {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3%);
    }
    100% {
        transform: translateY(0);
    }
}
.pro_wrap .tit {
    font-weight: bold;
    font-size: 1.3vw;
    margin-bottom: 0.5vw;
    text-align: center;
}
.pro_wrap p {
    color: #4d4d4d;
}
.btn_buy {
    position: absolute;
    content: '';
    background: url(../img/icon-cart.png);
    background-size: 100% 100%;
    width: 3vw;
    height: 3vw;
    right: 0;
    bottom: 0;
}
#good {
    background: #293d51;
    padding: 4vw 0 0;
    z-index: 2;
    overflow: hidden;
}
#good .main_tit {
    width: 20vw;
}
.run_wrap {
    padding-bottom: 13vw;
    overflow: hidden;
}
.run_wrap .deco {
    left: 50%;
    bottom: -3px;
    width: 36.4vw;
    transform: translateX(-50%);
    text-align: center;
}
.marquee {
    display: flex;
    overflow: hidden;
    width: 100%;
    margin-bottom: 1.25vw;
    grid-column-gap: 1rem;
}
.marquee-content {
    display: flex;
    min-width: 100%;
    -ms-flex-pack: distribute;
/*    justify-content: center;*/
    justify-content: space-around;
    flex: 0 0 auto;
    grid-column-gap: 1rem;
}
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-100% - 1rem));
    }
}
.marquee .scroll {
/*    animation: scroll 50s linear infinite;*/
    animation-name: scroll;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
/*    pointer-events: none;*/
    cursor: default;
    animation-play-state: running;
}
.marquee .reverse {
    animation-direction: reverse;
}
.marquee:hover .scroll {
    animation-play-state: paused;
}
.comment {
    font-size: 1.3vw;
}
.comment span {
    font-weight: 700;
    display: inline-block;
    margin: 0 1vw;
}
.comment .c1 {
    color: #bfaa91;
}
.comment .c2 {
    color: #f03c64;
}
.comment .c3 {
    color: #3196ff;
}
.go_buy {
    background: #769fa9;
    color: #fff;
    font-size: 1.5vw;
    text-align: center;
    padding: 1.7vw;
    font-weight: bold;
    letter-spacing: 3px;
    position: relative;
}
.cloud {
    animation-fill-mode: forwards;
    animation-duration: 5s;
}
.cloud1 {
    width: 124vw;
    left: 50%;
    margin-left: -62vw;
    top: -14vw;
}
.cloud2 {
    width: 48vw;
    left: -7.5vw;
    top: 0;
}
.cloud3 {
    width: 113vw;
    right: -40vw;
    top: 4vw;
}
.cloud4 {
    width: 135vw;
    left: -58vw;
    bottom: 6vw;
}
.cloud5 {
    width: 58vw;
    right: -10vw;
    bottom: 6vw;
}
.cloud6 {
    width: 119vw;
    right: -43vw;
    bottom: -8.4vw;
}
.cloud7 {
    width: 132vw;
    left: -58vw;
    bottom: -8vw;
}
.run_lt.go {
    animation-name: run_lt;
}
.run_rt.go {
    animation-name: run_rt;
}
.run_lb.go {
    animation-name: run_lb;
}
.run_rb.go {
    animation-name: run_rb;
}
.run_l.go {
    animation-name: run_l;
}
.run_t.go {
    animation-name: run_t;
}
@keyframes run_lt {
    to {
        transform: translate(-100%, -100%);
    }
}
@keyframes run_rt {
    to {
        transform: translate(100%, -50%);
    }
}
@keyframes run_lb {
    to {
        transform: translate(-100%, 200%);
    }
}
@keyframes run_rb {
    to {
        transform: translate(100%, 100%);
    }
}
@keyframes run_l {
    to {
        transform: translate(-100%, 0%);
    }
}
@keyframes run_t {
    to {
        transform: translate(0%, -100%);
    }
}
#buy {
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: #fff;
}
#buy a {
    flex: 1;
    height: 31vw;
    display: flex;
    align-items: center;
    padding: 0 5vw;
    position: relative;
}
#buy a:hover {
    background: #f5f3f2;
}
#buy a:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 24vw;
    right: 0;
    top: 50%;
    margin-top: -12vw;
    background: #6f6f6f;
}
#buy a:last-of-type:after {
    content: none;
}
/* popup */
.p_layout {
    margin: 2vw auto;
    position: relative;
    background: #fff;
    border: 1px solid #000;
    padding: 8vw 0 0;
    width: 51vw;
}
.p_layout.big {
    width: 68vw;
    padding: 4vw;
}
.mfp-bg {
    background: rgba(0,0,0,.75);
}
button.mfp-close {
    background-image: url(../img/icon-close.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 1;
    font-size: 0px;
    width: 3.5vw;
    height: 3.5vw;
    right: -1px;
}
.mfp-close:active {
    top: 0;
}
.buy_link {
    display: block;
    width: 23vw;
    margin: 0 auto 4vw;
}
.p_layout .pro_wrap {
    width: auto;
    gap: 3vw;
}
.p_layout .pro_wrap .item {
    padding: 2.5vw 3vw;
}
.p_layout .pro_wrap .tit {
    text-align: center;
    font-size: 1.4vw;
}
.p_layout .pro_wrap .item.jp:after {
    width: 5vw;
    height: 5vw;
    left: -2.5vw;
    top: -2.5vw;
}
#user {
    z-index: 2;
    overflow: hidden;
}
.joe .main_tit {
    width: 22vw;
    margin-bottom: 1vw;
}
.joe {
    background-color: #3193ff;
    background-image: url(../img/bg-light.png);
    background-position: center -10vw;
    background-size: 83vw auto;
    background-repeat: no-repeat;
    padding: 5vw 0 10vw;
}
.joe .name {
    width: 8vw;
    position: absolute;
    left: 22vw;
    top: 13vw;
}
.kol {
    padding: 4vw 17vw 6vw;
    background: #8ab2c1;
}
.kol:before {
    position: absolute;
    content: '';
    width: 150%;
    height: 100%;
    background: #8ab2c1;
    transform: rotate(-5deg);
    top: -7vw;
    left: 0;
}
.kol .main_tit {
    width: 34vw;
    margin-bottom: 5vw;
}
.kol_wrap {
    gap: 2.4vw;
    align-items: center;
}
.kol_wrap .item {
    width: 20vw;
    border: 2px solid #000;
}
.kol_wrap .desc {
    background: #000;
    color: #f1f1f3;
    font-size: 0.9vw;
    padding: 0.7vw 2.2vw;
    line-height: 1.4;
}
.kol_wrap img {
    display: block;
}
.kol_wrap .swiper {
    border: 0.5vw solid #fff;
}
.kol_wrap .name {
    position: absolute;
    z-index: 2;
    right: -2vw;
    top: -2.5vw;
}
.kol_wrap .item1 .name {
     width: 11vw; 
}
.kol_wrap .item2 .name {
     width: 15vw; 
}
.kol_wrap .item3 .name {
     width: 9vw; 
}
.devil {
    z-index: 2;
    background: #8bb2c1;
    padding: 4vw 11vw 4vw;
    
/*    display: none;*/
}
.devil .main_tit {
    width: 34vw;
}
.grid {
    display: grid;
}
.devil .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 2vw;
    margin-top: 4vw;
    padding: 0 2vw;
}
.swiper2 {
    margin: 0 8vw;
    overflow: hidden;
}
.swiper2 .item {
    border: 1px solid #769ca6;
    padding: 0.7vw 0.7vw 4vw;
    color: #293d51;
    font-size: 0.9vw;
    position: relative;
    background: #e0eef1;
}
.swiper2 .item:after {
    position: absolute;
    content: '';
    background: url(../img/icon-link-01.png);
    width: 2vw;
    height: 2vw;
    background-size: 100% 100%;
    right: 0;
    bottom: 0;
}
.swiper2 .desc {
    margin-top: 1vw;
    line-height: 1.4;
}
.swiper-button-prev {
    left: 13vw;
}
.swiper-button-next {
    right: 13vw;
}
.swiper-button-next, .swiper-button-prev {
    width: 4.5vw;
    height: 4.5vw;
    top: 22vw;
}
.swiper-button-next:after, .swiper-button-prev:after {
    background-image: url(../img/icon-arrow-01.png);
    width: 4.5vw;
    height: 4.5vw;
    background-size: 100% 100%;
    font-size: 0;
}
.swiper-button-next:after {
    transform: scaleX(-1);
}
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    position: static;
    margin-top: 2vw;
}
.swiper-pagination-bullet {
    width: 0.6vw;
    height: 0.6vw;
    margin: 0 0.4vw;
    border: 1px solid #19364e;
    background: transparent;
    opacity: 1;
}
.swiper-pagination-bullet-active {
    background: #19364e;
}
.devil .ps {
    font-size: 0.7vw;
    color: #72979c;
    margin-top: 2vw;
    font-weight: bold;
    line-height: 1.5;
}

/* pc & mobile */
.pc {
	display: initial;
}
.mo {
	display: none;
}

@media only screen and (max-width: 769px) {
    header .inner {
        flex-direction: column;
        max-width: inherit;
        position: absolute;
        background: #fff;
        max-height: 87vh;
        overflow-y: auto;
        display: none;
        width: 100%;
        padding: 0;
        
        display: none;
    }
    .menu.show {
        display: block;
    }
    .nav {
        flex-direction: column;
        width: 100%;
        padding-top: 5vw;
    }
    .mask.show {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        background: rgba(0,0,0,.8);
    }

    .nav a {
        width: 20vw;
        min-width: initial;
        padding: 3vw 0;
        margin: auto;
    }
    .ga {
        width: 25vw;
    }
    .nav > li {
        width: 100%;
        border-bottom: 1px solid #ebebec;
    }
    .nav .buy_wrap {
        min-width: inherit;
        width: 100%;
        gap: 1.5vw;
        /*        padding: 5vw 43vw 5vw 34vw;*/
        padding-left: 42vw;
        flex-direction: row;
    }
    .nav .buy_wrap .full {
        /* flex: 1; */
        height: 3.1vw;
    }
    .nav .buy_wrap .buy {
        width: 3.8vw;
    }
    .nav > li:before {
        display: none;
    }
    .social_wrap {
        padding: 3vw;
/*        padding-bottom: 0;*/
        gap: 4vw;
/*        justify-content: center;*/
        text-align: center;
        min-height: 15vw;
    }
    .social_wrap .global {
        display: inline-block;
    }
    .social_wrap a {
        width: 8vw;
        margin: 0 1.5vw !important;
    }
    .logo_wrap {
        border: none;
        background: #000;
        padding: 20px;
        display: flex;
    }
    .logo_wrap path {
        fill: #fff;
    }
    .logo_wrap .st0 {
        fill: #fff;
    }
    .logo {
        width: 160px;
        margin-left: 0;
    }
    .nav > li > .acc_con {
        position: static;
        border: none;
    }
    .nav > li > .acc_con a {
        width: 100%;
        padding: 5vw 26vw;
        font-size: 5vw;
    }
    .yahoo_btn:before {
        border-width: 3vw 4vw 0 4vw;
        bottom: -2.5vw;
        margin-left: -4vw;
        transform: translateY(-3vw);
    }
    .menu_wrap {
		position: relative;
		width: 24px;
		height: 17px;
		cursor: pointer;
/*		background: red;*/
	}
	.menu_icon,
	.menu_icon:before,
	.menu_icon:after {
		position: absolute;
		height: 2px;
		width: 24px;
		background: #fff;
	}
	.menu_icon {
		display: inline-block;
		right: 0;
		top: 0;
	}
	.menu_icon:before {
		content: '';
		top: 8px;
		right: 0;
	}
	.menu_icon:after {
		content: '';
		top: 16px;
		right: 0;
	}
    .menu_wrap.act .menu_icon {
        height: 0;
    }
    .menu_wrap.act .menu_icon:before {
        transform: rotate(45deg);
    }
    .menu_wrap.act .menu_icon:after {
        transform: rotate(-45deg);
        top: 8px;
    }
    .menu_wrap.act .menu_icon:before, .menu_wrap.act .menu_icon:after {
        right: -3px;
    }
    footer {
        padding: 10vw 10vw 5vw;
    }
    footer .flex {
        flex-direction: column;
    }
    .mandom {
        width: 10vw;
    }
    .copy {
        font-size: 1.6vw;
        transform: scale(0.5);
    }
    .links_wrap {
        margin-bottom: 10vw;
    }
    .links_wrap a {
        display: inline-block;
        width: 11vw;
        margin: 0 4vw;
    }
    #buy > .flex {
        flex-direction: column;
    }
    #buy a {
        padding: 10vw 19vw;
    }
    #buy a:after {
        width: 62%;
        height: 1px;
        background: #d8d8d8;
        left: 19%;
        top: inherit;
        bottom: 0;
    }
    .go_buy {
        font-size: 4vw;
        padding: 4.4vw;
    }
    .run_wrap .deco {
        width: 70vw;
    }
    .main_tit {
        margin: 0 auto 2.4vw;
    }
    #good .main_tit {
        width: 48vw;
    }
    .sub_tit {
        font-size: 3vw;
        margin-bottom: 8vw;
    }
    .comment {
        font-size: 4vw;
        margin-bottom: 3.5vw;
    }
    .cloud {
        animation-duration: 4s;
    }
    .cloud1 {
        width: 150vw;
        top: -16vw;
        left: 26vw;
    }

    .cloud2 {
        width: 71vw;
        top: 10vw;
        left: -18vw;
    }

    .cloud3 {
        top: 9vw;
        right: -46vw;
    }

    .cloud4 {
        width: 155vw;
        bottom: 32vw;
        left: -50vw;
    }

    .cloud5 {
        width: 66vw;
        bottom: 47vw;
    }

    .cloud6 {
        width: 130vw;
        right: -59vw;
        bottom: 13vw;
    }

    .cloud7 {
        width: 154vw;
        bottom: 8vw;
    }
    #series {
        padding: 15vw 0 15vw;
    }
    #series .main_tit {
        width: 40vw;
    }
    #good {
       padding-top: 15vw;
    }
    .run_wrap {
        padding-bottom: 33vw;
    }
    .pro_wrap {
        flex-direction: column;
        width: 71vw;
        gap: 10vw;
        display: flex;
    }
    .pro_wrap .item {
        padding: 10vw 9vw;
    }
    .pro_wrap .item.jp:after {
        width: 16vw;
        height: 16vw;
        left: -4vw;
        top: -4vw;
    }
    .pro_wrap .item.jp1:after {
        width: 16vw;
        height: 16vw;
        left: -4vw;
        top: -4vw;
    }
    .pro_wrap .tit {
        font-size: 4vw;
    }
    p, .p {
        font-size: 3vw;
    }
    .pro_wrap .img {
        margin-bottom: 7vw;
    }
    .btn_buy {
        width: 11vw;
        height: 11vw;
    }
    .p_layout {
        width: 81vw;
        padding-top: 20vw;
    }
    .buy_link {
        width: 60vw;
        margin-bottom: 10vw;
    }
    button.mfp-close {
        width: 9vw;
        height: 9vw;
    }
    .chert_wrap {
        width: auto;
        margin: 0 7vw;
    }
    .chart {
        flex-direction: column;
        gap: 7vw;
        padding: 4vw;
    }
    .chart .bg {
        width: 100%;
        height: 57vw;
        background-image: url(../img/bg-chart-m.png);
    }
    .chart .t1 {
        width: 13vw;
        top: 20vw;
        left: 11vw;
    }
    .chart .t2 {
        width: 20vw;
        top: 42vw;
        left: 16.5vw;
    }
    .chart .t3 {
        width: 11.4vw;
        top: 20vw;
        left: 49vw;
    }
    .intro_wrap {
        width: auto;
        margin: 0 4vw 6vw;
    }
    .intro_wrap .tit {
        width: 37vw;
        margin-bottom: 2vw;
        padding-left: 6vw;
    }
    .intro_wrap .tit:before {
        width: 3vw;
        height: 3vw;
        margin-top: -2vw;
    }
    #points .main_tit {
        width: 56vw;
        margin-left: 0;
    }
    #points .sub_tit {
        line-height: 1.7;
       font-size: 3.8vw;
    }
    .icon_40 {
        width: 20vw;
        margin: -1vw 0 0 2.6vw;
        float: none;
        position: absolute;
        right: 0;
        top: 0;
    }
    .chart_desc {
        overflow: inherit;
    }
    #points {
        padding: 11vw 0;
        z-index: 2;
    }
    #manage .main_tit {
        width: 48vw;
        margin-left: auto;
    }
    #manage .sub_tit {
        width: 48vw;
        margin-left: auto;
        margin-right: auto;
    }
    #manage .flex {
       flex-direction: column;
        gap: 8vw;
    }
    .tab_btn {
        text-align: center;
    }
    .tab_btn font {
        font-size: 3vw;
        padding: 2vw 5vw;
    }
    .tab_btn > *:after {
        left: 0.5vw;
        top: 0.5vw;
    }
    #smell {
        padding: 11vw 0 12vw;
        position: relative;
        z-index: 2;
    }
    #smell .main_tit {
        width: 50vw;
    }
    .inner {
        max-width: 94vw;
    }
    .video_all {
        width: auto;
    }
    #kv {
        z-index: 2;
    }
    #kv .inner {
        max-width: inherit;
    }
    #kv .bg {
        background-image: url(../img/kv-m.jpg);
        height: 144vw;
        background-size: 100% 100%;
    }
    .catch {
        width: 47vw;
        top: 3.2vw;
        right: 48.2vw;
        z-index: 1;
    }
    .kv_icon {
        width: 21.3vw;
        top: 44.8vw;
        left: 47.6vw;
    }
    .day7 {
        width: 14vw;
        top: 115vw;
        right: initial;
        left: 9vw;
    }
    .kv_pro {
        width: 68.9vw;
        top: 107.4vw;
        right: 15.4vw;
    }
    .kv_ps {
        width: 69%;
        text-align: center;
        margin: auto;
        right: initial;
        left: 50%;
        transform: translateX(-50%);
        bottom: 3%;
    }
    .kv_smoky {
        width: 136vw;
        left: -8vw;
        top: 37vw;
        animation-duration: 2s;
    }
    .border_left {
        left: 20px;
    }
    .border_right {
        right: 20px;
    }
    .border_top {
        top: 20px;
    }
    .border_btm {
        bottom: 20px;
    }
    .light {
        width: 12px;
    }
    .light.top {  
        top: -9px;
    }
    .light.left {
        left: 14px;
    }
    .light.right {
        right: 15px;
    }
    .light.btm {
        bottom: -9px;
    }
    .p_layout.big {
        padding: 15vw 10vw 8vw;
        width: 80vw;
    }
    .p_layout .pro_wrap .item.jp:after {
        width: 16vw;
        height: 16vw;
        left: -4vw;
        top: -4vw;
    }
    .p_layout .pro_wrap {
        gap: 10vw;
    }
    .p_layout .pro_wrap .tit {
        font-size: 4vw;
    }
    .p_layout .pro_wrap .item {
        padding: 10vw 5vw 13vw;
    }
    .p_layout .pro_wrap .img {
        margin-bottom: 4vw;
    }
    main {
        margin-top: 65px;
    }
    .links_wrap {
        display: block;
    }
    .joe {
        padding: 10vw 4vw 15vw;
        background-size: 130vw auto;
        background-position: center 1vw;
        background-image: url(../img/bg-mlight.png);
    }
    .joe .main_tit {
        width: 56vw;
        margin-bottom: 10vw;
    }
    .joe .name {
        position: static;
        width: 39vw;
        margin: 5vw auto 0;
        text-align: center;
    }
    .kol {
        padding: 12vw 8vw 0;
    }
    .kol .main_tit {
        width: 82vw;
        margin-bottom: 13vw;
    }
    .kol_wrap {
        flex-direction: column;
        gap: 14vw;
    }
    .kol_wrap .item {
        width: 71vw;
        margin: 0 6.5vw;
    }
    .kol_wrap .name {
        right: -6.5vw;
        top: -9.5vw;
    }
    .kol_wrap .item1 .name {
        width: 38vw;
    }
    .kol_wrap .item2 .name {
        width: 55vw;
    }
    .kol_wrap .item3 .name {
        width: 31vw;
    }
    .kol_wrap .desc {
        font-size: 3.5vw;
        padding: 2.5vw 5vw;
    }
    .kol_wrap .swiper {
        border: 1.2vw solid #fff;
    }
    .devil {
        padding: 10vw 4vw 10vw;
    }
    .devil .main_tit {
        width: 73vw;
        margin-bottom: 9vw;
    }
    .devil .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5vw;
        padding: 0;
        margin: 0;
    }
    .swiper2 {
        margin: 0;
    }
    .swiper-button-next, .swiper-button-prev {
        display: none;
    }
    .swiper2 .item {
        padding: 2vw 2vw 15vw;
    }
    .swiper2 .desc {
        font-size: 3.5vw;
        margin-top: 4vw;
    }
    .swiper2 .item:after {
        width: 10vw;
        height: 10vw;
    }
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        margin-top: 10vw;
    }
    .swiper-pagination-bullet {
        width: 3vw;
        height: 3vw;
        margin: 0 1.5vw;
    }
    .devil .ps {
        font-size: 3vw;
        margin-top: 9vw;
    }
    .pc {
    	display: none;
    }
    .mo {
    	display: initial;
    }
}

/* sp menu renew */
.menu {
    background: #fff;
}
.mmenu {
    top: 65px;
    transition: var(--trans1);
/*    padding-bottom: 3vw;*/
/*    background: #fff;*/
}
.mmenu.act {
    left: 0;
}
.sliding-menu ul {
    padding: 0;
    margin: 0;
/*    display: block;*/
}
.sliding-menu a.nav:before {
    opacity: 0;
}
.sliding-menu a.back {
    background: #333;
    padding: 0.5rem 1rem;
}
.sliding-menu li:first-child {
    background: #fff;
}
.mmenu .i-content {
    background: none;
    padding-left: 0;
}
.social_wrap a {
    margin: 0;
    padding: 0;
}
.menu_2 li {
/*    border-bottom: 1px solid #000;*/
}
.menu_2 li:nth-of-type(odd) {
    background: #f5f3f2;
}
.menu_2 li:nth-of-type(even) {
/*    background: #dedede;*/
    background: #f5f3f2;
}
.menu_2 a {
    width: 100%;
    padding: 3vw;
    font-size: 5vw;
    display: block;
    text-align: center;
    border-bottom: 1px solid #000;
}
.menu_2 a:hover {
    background: #769fa9;
}
.menu_2 img {
	width: 40%;
/*    height: 5vw;*/
/*    width: auto;*/
	margin: auto;
}
.sliding-menu a.back:before {
    font-size: 12px;
}
.sliding-menu {
/*    padding-bottom: 3vw;*/
/*    background: #fff;*/
}
@media only screen and (max-width: 769px) {
    .yahoo_con a {
        width: 100%;
        padding: 4.2vw 3vw;
        font-size: 3.3vw;
        color: #000;
        text-align: center;
    }
    .yahoo_con a:hover {
        color: #fff;
        background: #769fa9;
    }
    .yahoo_con li:first-of-type a {
        padding-top: 4.2vw;
    }
}

/* 2023-09-11 增加區塊 */
#target .bg {
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    height: 49vw;
    background-size: 100% 100%;
    overflow: hidden;
}
#target .main_tit {
    width: 32vw;
    top: 7vw;
    left: 54vw;
}
#target .target_img {
    width: 22vw;
    top: 6vw;
    left: 23vw;
    z-index: 1;
}
.target_circle {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.812;
    stroke-miterlimit: 10;
}
.st1 {
    fill: #FFFFFF;
}
.st2 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 2.812;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.st3 {
    fill: none;
    stroke: #FFFFFF;
    stroke-width: 8.437;
    stroke-linecap: round;
    stroke-miterlimit: 10;
}
.st4 {
    fill: none;
}
@keyframes target-move {
    33% {
        transform: scale(0.8);
    }
    66% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(0.8);
    }
}
.target-move.go { 
    animation-name: target-move;
}
@keyframes target-fill {
    66% {
        fill: red;
    }
    100% {
        fill: red;
    }
}
@keyframes target-stroke {
    66% {
        stroke: red;
    }
    100% {
        stroke: red;
    }
}
.target-fill.go {  
    animation-name: target-fill; 
}
.target-stroke.go {  
    animation-name: target-stroke; 
}
#target .smoke:before {
    content: '';
    background-image: url(../img/smoke.png);
    background-repeat: no-repeat;
    height: 32vw;
    width: 100%;
    background-size: 100% 100%;
    position: absolute;
    top: -31vw;
    left: 0;
    z-index: 1;
}
#target .smoke {
    background-color: #e1eff2;
/*    padding-bottom: 5vw;*/
    margin-top: -1vw;
}
#target .smoke .in {
    max-width: 62vw;
	margin: auto;
    padding-top: 1vw;
}
#target .smoke .img {
    width: 32vw;
}
.t_sub_tit {
    width: 27vw;
    margin: 2.5vw 0;
}
#target .age {
    margin-left: 0.7vw; 
    width: 14vw;
    cursor: pointer;
}
#target .a1 {
    margin-bottom: 2vw; 
}
#target .a2 {
    margin-bottom: 2.3vw; 
}
#target .age.show {
    animation-name: jump2;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.smoke .circle {
    cursor: pointer;
    border-radius: 100vw;
    overflow: hidden;
}
.smoke .circle.show {
    animation-name: jump2;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
.smoke .c1 {
    width: 28%;
    left: 22%;
    top: 17%;
}
.smoke .c2 {
    width: 16%;
    top: 52%;
}
.smoke .c2-1 {
    left: 8%;
}
.smoke .c2-2 {
    left: 48%;
}
.smoke .c3 {
    width: 17%;
    top: 60%;
    left: 27.4%;
}
#track {
    padding: 6vw 0 10vw;
    background: #fff;
}
#track .main_tit {
    width: 21vw;
}
#track .sub_tit {
    color: #00334b;
}
.track_wrap {
    gap: 5vw;
    max-width: 62vw;
    margin: auto;
}
.track_wrap .item {
    position: relative;
}
.track_wrap .item .in {
    transition: var(--trans1);
}
.track_wrap .item:hover .in {
    transform: scale(1.1);
}
.track_wrap .tc {
    font-weight: bold;
    font-size: 1.1vw;
    position: absolute;
    width: 100%;
    top: 12.7vw;
    left: 0;
    color: #003349;
}
@media only screen and (max-width: 769px) {
    #target {
        z-index: 2;
        overflow: hidden;
    }
    #target .bg {
        background-image: url(../img/bg_m.png);
        height: 72vw;
    }
    #target .main_tit {
        width: 48vw;
        top: 15vw;
        left: 45vw;
    }
    #target .target_img {
        width: 25vw;
        left: 14vw;
        top: 23vw;
    }
    #target .smoke:before {
        width: 113vw;
        height: 36vw;
        left: -12vw;
        top: -36vw;
    }
    #track {
        padding: 14vw 0 8vw;
    }
    #track .main_tit {
        width: 46vw;
    }
    .track_wrap {
        flex-direction: column;
        gap: 3.6vw;
    }
    .t_sub_tit {
        position: absolute;
        width: 65vw;
        left: 50%;
        margin-left: -33.5vw;
        top: 0;
    }
    .smoke .flex {
        padding-top: 20vw;
    }
    #target .smoke .img {
        width: 52vw;
    }
    .smoke .txt {
        width: 35vw;
    }
    #target .smoke .in {
        max-width: 88vw;
    }
    #target .age {
        width: auto;
        margin-left: 1.5vw;
    }
    #target .a1 {
        margin-top: 16.5vw;
        margin-bottom: 4.2vw;
    }
    #target .a2 {
        margin-bottom: 5vw;
    }
    .smoke .c1 {
        width: 18vw;
        left: 13vw;
    }
    .smoke .c2 {
        width: 10vw;
    }
    .smoke .c2-1 {
        left: 5vw;
    }
    .smoke .c2-2 {
        left: 29vw;
    }
    .smoke .c3 {
        width: 10vw;
        left: 17vw;
    }
    #target .smoke {
        padding-bottom: 9vw;
    }
    .track_wrap .tc {
        font-size: 4vw;
        top: 45.8vw;
    }
}

/* 2024-04-19 renew */
.flex1 {
    gap: 4vw;
}
.smoke .sub_tit {
    width: 26.9vw;
    text-align: justify;
}
.El__slide {
    height: 100vh;
    background: #e1eff2;
    position: relative;
/*    padding: 10vw 0 5vw;*/
    
    display: flex;
    align-items: center;
    justify-content: center;
}

  @media only screen and (max-width: 769px) {
    .El__wrapper {
        width: 100%;
        display: block;
    }
    .El__slide {
        display: block;
        height: auto;
        padding: 10vw 0 5vw;
    }
    #target .smoke .in {
        position: relative;
    }
    .flex1 .t_sub_tit {
        /* position: static; */
        /* margin: 0 auto; */
        margin-left: -30vw;
        width: 59vw;
    }
    .smoke .flex1 {
        flex-direction: column;
        gap: 0;
    }
    .smoke .flex1 .txt {
        width: auto;
    }
    .smoke .sub_tit {
        width: auto;
        font-size: 3.8vw;
        margin-bottom: 4vw;
    }
    #target .smoke .flex1 .img {
        width: auto;
    }
  }

/* 2024-05-23 renew... */
.sub_video {
    padding: 0 6.25vw 5.3vw;
    margin: 4.3vw auto 0;
}
.sub_video:before, .sub_video:after {
    position: absolute;
    content: '';
    background-size: 100% 100%;
}
.sub_video:before {
    left: 0;
    top: 0.8vw;
    width: 19vw;
    height: 19.5vw;
    background-image: url(../img/img-border-01.png);
}
.sub_video:after {
    right: 0;
    bottom: 0;
    width: 19vw;
    height: 18.5vw;
    background-image: url(../img/img-border-02.png);
}
@media only screen and (max-width: 769px) {
    .sub_video {
        padding: 0 8.8vw 7.5vw;
        margin-top: 7.7vw;
    }
    .sub_video:before {
        width: 25.5vw;
        height: 25.9vw;
        top: 10vw;
        background-image: url(../img/img-border-01-m.png);
    }
    .sub_video:after {
        width: 25.3vw;
        height: 24.4vw;
        background-image: url(../img/img-border-02-m.png);
    }
}

/* 2025 refine */
.kv_icon .light {
    position: absolute;
    width: 72%;
    height: 71%;
    overflow: hidden;
    left: 14%;
    top: 13%;
    border-radius: 10vw;
/*    background: red;*/
/*    opacity: 0.5;*/
    transform: skewX(-5deg);
}
.kv_icon .light:before {
    content: '';
    position: absolute;
    height: 400%;
    width: 30%;
/*    top: -180%;*/
    left: 0;
    opacity: 0.6;
    background-image: url(../img/shine.png);
    background-size: 100%;
    background-position: center;
    animation-name: flashLight;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    z-index: 1;
    transform: rotate(90deg);
}
@keyframes flashLight {
	0% {
		top: -200%;
	}
	
	100% {
		top: -100%;
	}
}
.menu_buy .acc_btn .icon {
    position: absolute;
    width: 32px;
    right: 55px;
    top: 14px;
}
.menu_buy > .acc_con {
    position: absolute;
    width: 50%;
    right: 0;
    top: 65px;
/*    transform: translateX(-50%);*/
    background: #f5f3f2;
}
.menu_buy > .acc_con > a {
    border-bottom: 1px solid #000;
}
.menu_buy > .acc_con > a:hover {
    background: #769fa9;
}
.menu_buy a {
    display: block;
    padding: 10px 20px;
    text-align: center;
}
.video_flex {
    display: flex;
    gap: 2.7vw;
    margin-top: 2.7vw;
}
.video_flex .item {
    flex: 1;
/*    cursor: pointer;*/
}
.video_flex iframe {
/*    pointer-events: none;*/
}
#smell .video_flex .main_tit {
    width: 19vw;
}
@media only screen and (max-width: 769px) {
    .video_flex {
        margin-top: 5vw;
    }
    #smell .video_flex .main_tit {
        width: 40vw;
    }
    #smell .video_flex .sub_tit {
        margin-bottom: 2vw;
    }
}