@charset "utf-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	background: transparent;
	border: 0;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
    box-sizing: border-box;
}
input, button, textarea, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    outline: none;
    padding: 0;
}

:root {
    /* x / 1920 */
    touch-action: manipulation;
    --fs14_pc: clamp(12px, 0.7vw, 14px);
    --fs16_pc: clamp(12px, 0.83vw, 16px);
    --fs17_pc: clamp(12px, 0.88vw, 17px);
    --fs20_pc: clamp(14px, 1.00vw, 20px);
    --fs22_pc: clamp(14px, 1.15vw, 22px);
    --fs24_pc: clamp(16px, 1.25vw, 24px);
    --fs25_pc: clamp(16px, 1.30vw, 25px);
    --fs26_pc: clamp(13px, 1.35vw, 26px);
    --fs27_pc: clamp(16px, 1.40vw, 27px);
    --fs33_pc: clamp(18px, 1.72vw, 33px);
    --fs34_pc: clamp(18px, 1.77vw, 34px);
    --fs35_pc: clamp(18px, 1.82vw, 35px);
    --fs36_pc: clamp(18px, 1.875vw, 36px);
    --fs38x_pc: clamp(20px, 1.99vw, 38.2762px);
    --fs40_pc: clamp(20px, 2.08vw, 40px);
    --fs40x_pc: clamp(20px, 2.09vw, 40.2976px);
    --fs42_pc: clamp(20px, 2.1875vw, 42px);
    --fs45_pc: clamp(24px, 2.34vw, 45px);
    --fs46x_pc: clamp(43px, 2.41vw, 46.3453px);
    --fs48_pc: clamp(24px, 2.5vw,48px);
	--fs50_pc: clamp(25px, 2.6vw, 50px);
    --fs54_pc: clamp(27px, 2.8125vw, 54px);
    --fs60_pc: clamp(30px, 3.125vw, 60px);
    --fs62_pc: clamp(30px, 3.23vw, 62px);
    --fs63_pc: clamp(30px, 3.28125vw, 63px);
    --fs65_pc: clamp(30px, 3.34vw, 65px);
    --fs96_pc: clamp(45px, 5vw, 96px);
    --fs100_pc: clamp(50px, 5.208333vw, 100px);
    --fs108_pc: clamp(54px, 5.625vw, 108px);
}
@media screen and (max-width:834px) {
    /* x / 640 */
    :root {
        --fs16_sp: clamp(9px, 2.5vw, 16px);
        --fs17_sp: clamp(9px, 2.66vw, 17px);
        --fs18_sp: clamp(10px, 2.81vw, 18px);
        --fs19_sp: clamp(10px, 2.97vw, 19px);
        --fs20_sp: clamp(10px, 3.125vw, 20px);
        --fs22_sp: clamp(11px, 3.4375vw, 22px);
        --fs23_sp: clamp(11px, 3.59vw, 23px);
        --fs24_sp: clamp(12px, 3.75vw, 24px);
        --fs28_sp: clamp(14px, 4.375vw, 28px);
        --fs30_sp: clamp(15px, 4.6875vw, 30px);
        --fs34_sp: clamp(17px, 5.3125vw, 34px);
        --fs38_sp: clamp(19px, 5.9375vw, 38px);
        --fs45_sp: clamp(22px, 7.03vw, 45px);
    }
}

/* web font */
body {
    font-family: "Gothic Medium BBB";
}
h2, h3, h4 {
    font-family: "Midashi Go MB31";
}
.midashigo {
    font-family: 'Midashi Go MB31';
}

/* util */

.disp_pc {
	display: block;
}
.disp_sp {
	display: none;
}
@media screen and (max-width:834px) {
	.disp_pc {
		display: none;
	}
	.disp_sp {
		display: block;
	}
}

/* wrapper */
.wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* section */
.section {
    pointer-events: none; /* for mobile */
}


/*
 header
================================================================ */
.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}
.header.active {
	z-index: 999;
}
.header-inner {
	position: relative;
    width: 100%;
	margin: 0 auto;
	padding: 6.3vh 0 0;
}
.header .site-logo {
    position: absolute;
    top: 6.6vh;
    right: 4.5%;
    width: 9vw;
    max-width: 174px;
    min-width: 150px;
    height: auto;
    margin: 0 0 0 0;
    transition: .5s;
}
.header .site-logo.logo-hide {
    transition: .5s;
    opacity: 0;
}
.header .site-logo a {
	display: block;
    cursor: pointer;
}
.header .site-logo a:hover {
	opacity: .7;
	transition: .4s;
}
.header .site-logo img {
	width: 100%;
	height: auto;
}
.header .logo {
    position: relative;
    top: 18%;
    width: 22%;
    max-width: 440px;
    min-width: 256px;
    height: auto;
    margin: 0 0 0 5%;
}
.header .logo button {
	display: block;
    cursor: pointer;
}
.header .logo img {
    display: block;
    width: 100%;
    height: auto;
}
.header .menu-container {
	position: relative;
	z-index: 99;
}
@media screen and (max-width:1920px) {
	.header-inner {
		width: 100%;
	}
}
@media screen and (max-width:834px) {
    .header-inner {
        padding: 0;
    }
    .header .site-logo {
        position: absolute;
        top: 3%;
        right: 5%;
        width: 14%;
        max-width: none;
        min-width: auto;
        height: auto;
        margin: 0 0 0 0;
    }
    .header .logo {
        position: relative;
        width: 52%;
        max-width: none;
        min-width: auto;
        margin: 5% 0 0 5%;
    }
}


/*
 menu
================================ */
#nav {
    display: none;
    position: fixed;
    top: 23vh;
    left: 5%;
    z-index: 2;
    opacity: 0;
}
.menu {
    margin: 1% 0 0 5.75%;
    width: 50%;
    width: max-content;
}
.menu li {
	list-style-type: none;
    line-height: 1;
    margin: 0 0 0.25em 0;
}
.menu li button {
	position: relative;
    display: block;
    padding: 0.25em 0 0.25em 1.75em;
    letter-spacing: 0.175em;
    font-size: 17.7165px;
    font-size: clamp(14px, 0.9222734%, 17.7165px);
    font-weight: 600;
    text-decoration: none;
    color: #000;
    opacity: 0.8;
    transition: .4s;
    cursor: pointer;
}
.menu li button::before {
	position: absolute;
    top: .5em;
    left: 0.25em;
    display: block;
    content: "";
    width: 0em;
    height: 0.825em;
    border-left: 0.3em solid #000;
    opacity: 0.4;
    transform: rotate(90deg);
}
.menu li.active button {
	opacity: 1;
}
.menu li.active button::before {
	opacity: 1;
}
.menu li.active button:hover {
	opacity: 1;
}
.menu li.active button:hover::before {
	opacity: 1;
}
.menu li a {
	position: relative;
    display: block;
    padding: 0.25em 0 0.25em 1.75em;
    letter-spacing: 0.175em;
    font-size: 17.7165px;
    font-size: clamp(14px, 0.9222734%, 17.7165px);
    font-weight: 600;
    text-decoration: none;
    color: #000;
    opacity: 0.8;
    transition: .4s;
    cursor: pointer;
}
.menu li a::before {
	position: absolute;
    top: .5em;
    left: 0.25em;
    display: block;
    content: "";
    width: 0em;
    height: 0.825em;
    border-left: 0.3em solid #000;
	line-height: 1.6;
    opacity: 0.4;
    transform: rotate(90deg);
}
.menu li.active a {
	opacity: 1;
}
.menu li.active a::before {
	opacity: 1;
}
.menu li.active a:hover {
	opacity: 1;
}
.menu li.active a:hover::before {
	opacity: 1;
}
@media screen and (max-width:834px) {
    #nav {
        top: 13.5%;
        left: 3%;
    }
    .menu {
        margin: 8% 0 0 5%;
        overflow: hidden;
        white-space: nowrap;
    }
    .menu li {
        margin: 0 0 0 0;
        line-height: 1;
    }
    .menu li button {
        padding: 0.25em 0 0.25em 1.75em;
        font-size: clamp(10px, 0.9222734%, 17.7165px);
        opacity: 0.7;
    }
	.menu li a {
        padding: 0.25em 0 0.25em 1.75em;
        font-size: clamp(10px, 0.9222734%, 17.7165px);
        opacity: 0.7;
    }
}


/*
 modal
================================ */
.drawer {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 100vh;
    background:#fff;
    z-index: 41;
    transition: .5s;
    opacity: 0;
}
.drawer.menu-hide {
    left: -50px;
    transition: .5s;
}
#drawer-checkbox {
    display: none;
}
#drawer-icon {
    display: inline-block;
    height: 40px;
    position: relative;
    width: 40px;
    cursor: pointer;
}
#drawer-icon span {
    background:  #555;
    display: block;
    height: 2px;
    left: 50%;
    margin: -8% 0 0 -42%;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-in-out;
    width: 85%;
}
#drawer-icon span::before,
#drawer-icon span::after {
    -webkit-transform: rotate(0);
    background: #555;
    border-radius: 0;
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    margin: -8% 0 0 -50%;
    position: absolute;
    top: 50%;
    transform: rotate(0);
    transition: all 0.3s ease-in-out;
    width: 100%;
}
#drawer-icon span::before {
    margin-top: -23%;
}
#drawer-icon span::after {
    margin-top: 19%;
}
#drawer-checkbox:checked ~ #drawer-icon span {
    background: rgba(96, 96, 96, 0);
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
    content: "";
    display: block;
    height: 100%;
    left: 50%;
    margin: -8% 0 0 -42%;
    position: absolute;
    top: 50%;
    width: 100%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
#drawer-content {
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: 100vw;
    height: 100vh;
    background:#fff;
    transition: .5s;
    opacity: 0;
    transform: translateX(-100%);
}
#drawer-content.open-menu {
    display: flex;
    width: 100vw;
    opacity: 1;
    transform: translateX(0%);
}
#drawer-content .menu {
    display: block;
}
#drawer-checkbox:checked ~ #drawer-content {
    transform: translateX(0);
    box-shadow: 6px 0 25px rgba(0, 0, 0, 0.16);
}
#drawer-close {
    display: none;
    position: fixed;
    z-index: 39;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #555;
    opacity: 0;
    transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
    display: block;
    opacity: 1;
}
#drawer-content {
    display: flex;
    align-items: center;
}
#drawer-content .menu li button {
    font-size: 24px;
    font-size: var(--fs24_pc);
    opacity: 1;
    cursor: pointer;
}
#drawer-content .menu li button::before {
    top: 0.8em;
    opacity: 1;
}
#drawer-content .menu li a {
	display: block;
	line-height: 1.6;
    font-size: 24px;
    font-size: var(--fs24_pc);
    opacity: 1;
    cursor: pointer;
}
#drawer-content .menu li a::before {
    top: 0.8em;
    opacity: 1;
}
@media screen and (max-width:834px) {
    .drawer {
        top: auto;
        bottom: 0;
        left: auto;
        align-items: center;
        justify-content: flex-end;
        align-content: center;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100vw;
        height: 50px;
    }
    .drawer.menu-hide {
        bottom: -50px;
        left: auto;
    }
    #drawer-icon span {
        width: 84%;
    }
    #drawer-content {
        overflow-y: hidden;
        position: fixed;
        top: auto;
        left: 0;
        bottom: -100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        height: 100vh;
        transition: .5s;
        opacity: 0;
        transform: none;
    }
    #drawer-content.open-menu {
        bottom: 0;
        opacity: 1;
        transform: none;
    }
    #drawer-content .menu li button {
        font-size: 30px;
        font-size: var(--fs30_sp);
        opacity: 1;
    }
    #drawer-content .menu li button::before {
        top: 0.5em;
        opacity: 1;
    }
	#drawer-content .menu li a {
        font-size: 30px;
        font-size: var(--fs30_sp);
        opacity: 1;
    }
    #drawer-content .menu li a::before {
        top: 0.5em;
        opacity: 1;
    }
}


/*
 footer
================================================================ */
.footer {
    width: 100%;
    padding: 1em 0 1.25em;
    background: #231815;
    z-index: 1;
}
.footer .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 70px 0;
}
.footer_pc {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}
.footer_sp {
    display: none;
}
.footer-other-link {
    display: flex;
    width: auto;
    list-style-type: none;
    color: #ABABAB;
}
.footer-other-link a {
    text-decoration: none;
    font-size: 17.7165px;
    font-size: clamp(10px, 0.9222734%, 17.7165px);
    color: #ABABAB;
    pointer-events: all;
}
.footer-other-link a:hover {
    transition: .3s;
}
.footer-other-link a::after:hover {
    position: relative;
    bottom: 1px;
    content: "";
    border: 1px solid #ABABAB;
    transition: .3s;
}
.footer-other-link .spacer {
    margin: 0 .5em;
}
.footer-logo {
    display: flex;
    justify-content: center;
    margin-left: 5%;
}
.footer-logo a {
    display: block;
    width: 11vw;
    max-width: 175px;
    pointer-events: all;
}
.footer-logo a figure {
    width: 100%;
    height: auto;
}
.footer-logo a figure img {
    display: block;
    width: 100%;
    height: auto;
}
.footer .copy {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
}
.footer small {
    display: block;
    color: #ABABAB;
    font-size: 17.7165px;
    font-size: clamp(10px, 0.9222734%, 17.7165px);
}
@media screen and (max-width:834px) {
    .footer {
        width: 100%;
        text-align: center;
    }
    .footer_pc {
        display: none;
    }
    .footer_sp {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin: 0 3% 0;
    }
    .footer .footer-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        width: auto;
        margin: 0 2% 0;
    }
    .footer-other-link {
        margin: 0 0 0 0;
    }
    .footer-other-link a {
        font-size: 10px;
    }
    .footer-logo {
        margin-bottom: 2%;
    }
    .footer-logo a {
        width: 109px;
    }
    .footer .copy {
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 4% 0 0;
    }
    .footer small {
        font-size: 9px;
    }
}


/*
 section1
================================ */
.section1 .inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}
.parts001 {
    width: 100%;
    text-align: center;
}
.parts001 img {
    width: auto;
    height: 100vh;
}
.parts009 {
    position: absolute;
    top: 33vh;
    width: 46%;
    text-align: center;
    font-size: 100px;
    font-size: var(--fs100_pc);
    font-weight: bold;
    opacity: 0;
}
.parts009 img {
    width: 100%;
    height: auto;
}
.section1 .sec1_parts002 {
    position: absolute;
    top: 11.5%;
    right: 30%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    font-size: 42px;
    font-size: var(--fs42_pc);
    font-weight: bold;
}
@media screen and (max-width:834px) {
    .section1 {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: #fff;
        z-index: 1;
    }
    .parts001 img {
        width: 100%;
        height: auto;
    }
    .section1 .sec1_parts002 {
        top: 15%;
        right: 7%;
        font-size: 24px;
    }
}


/*
 section2
================================ */
.section2 {
    position: relative;
    height: 100vh;
    margin: -140vh 0 0;
    padding: 0vh 0 0;
    z-index: 1;
}
.section2 .frame {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    opacity: 0;
}
.section2 .frame {
    position: relative;
    background: url(/cms/corp/brands/healthyon/common/img/sec2bkb.jpg);
    background-repeat: no-repeat;
    background-color: #E8E8E8;
    background-size: 118%;
    background-position: center center;
    text-align: center;
}
.section2 .unit {
    position: relative;
    top: 40%;
    width: 50%;
    max-width: 950px;
}
.section2 .unit1 {
    position: absolute;
    top: 74vh;
}
.section2 .sec2_unit1_parts005 {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 2% auto 0;
    text-align: center;
    opacity: 0;
}
.section2 .sec2_unit1_parts005_h1 {
    width: 52%;
}
.section2 .sec2_unit1_parts006 {
    width: 82%;
    margin: -8% auto 2%;
    opacity: 0;
}
.section2 .sec2_unit1_parts006 img {
    display: block;
    width: 100%;
    height: auto;
}
.section2 .sec2_unit1_parts008 {
    margin: 1% auto 1%;
    font-size: 33px;
    font-size: var(--fs33_pc);
    font-weight: bold;
    opacity: 0;
}
.section2 .unit2 {
    position: absolute;
    top: 70vh;
    opacity: 0;
}
.section2 .sec2_unit2 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: relative;
    top: 44vh;
    width: 100%;
    opacity: 0;
}
.parts010 {
    font-size: 40px;
    font-weight: bold;
}
.section2 .sec2_unit2_parts010 {
    margin: 1% 0 1%;
    font-size: 54px;
    font-size: var(--fs54_pc);
    font-weight: bold;
}
.parts011 {
    font-size: 20px;
}
.section2 .sec2_unit2_parts011 {
    margin: 2% 0 1%;
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.parts012 {
    font-size: 20px;
}
.section2 .sec2_unit2_parts012 {
    margin: 0 0 0;
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section2 .parts009 {
    width: 38%;
    max-width: 780px;
    position: absolute;
    top: 38vh;
}
@media screen and (max-width:834px) {
    .section2 {
        position: relative;
        height: 100vh;
        margin: -100vh 0 0;
        background: rgb(231, 230, 230);
        z-index: 2;
    }
    .section2 .frame {
        background: url(/cms/corp/brands/healthyon/common/img/sec2bk_sp.jpg);
        background-color: #E8E8E8;
        background-repeat: no-repeat;
        background-position: center 65%;
        background-size: cover;
        height: 100vh;
        opacity: 1;
    }
    .section2 .unit {
        width: 100%;
    }
    .section2 .unit1 {
        position: absolute;
        top: 60vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: flex-start;
        margin: 0 0 0;
        opacity: 0;
    }
    .section2 .sec2_unit1_parts005 {
        margin: 10% auto 0;
        opacity: 1;
    }
    .section2 .sec2_unit1_parts006 {
        width: 91%;
        margin: 1% auto 0;
        opacity: 1;
    }
    .section2 .sec2_unit1_parts008 {
        margin: 4% auto 0;
        opacity: 1;
    }
    .section2 .sec2_unit1_parts005_h1 {
        width: 70%;
    }
    .section2 .unit2 {
        position: absolute;
        top: 60vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        opacity: 0;
    }
    .section2 .parts010 {
        margin: 10% 0 0 .5em;
        letter-spacing: 0;
        font-size: 26px;
    }
    .section2 .unit2 .box1 {
        margin: 0 0 0;
    }
    .section2 .parts009 {
        top: 41%;
        width: 96%;
    }
}


/*
 section3
================================ */
.section3 {
    position: relative;
    height: 100vh;
    margin: -200vh 0 0;
    padding: 0 0 0;
    background: #EAEAEA;
    z-index: 2;
}
.section3 .frame {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: url(/cms/corp/brands/healthyon/common/img/img003.jpg);
    background-size: 120%;
    background-position: center;
    text-align: center;
    opacity: 0;
}
.section3b {
    display: none;
}
.section3 .unit1 {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 30%;
    width: 60%;
}
.section3 .unit1_box1 {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    opacity: 0;
}
.section3 .sec3_unit1_box1_h2 {
    margin: 0 0 1%;
    font-size: 63px;
    font-size: var(--fs63_pc);
    font-weight: bold;
}
.section3 .sec3_unit1_box1_p {
    font-size: 36px;
    font-size: var(--fs36_pc);
}
.section3 .sec3_unit1_box2 {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: 100%;
    margin: 1% auto 0;
    padding: 5% 0 0;
    background: url(/cms/corp/brands/healthyon/common/img/sec3-04.svg) no-repeat;
    background-position: center top;
    background-size: 58%;
    opacity: 0;
}
.section3 .sec3_unit1_item1 {
    width: 40%;
    color: #C80A50;
}
.section3 .unit1_box1_by {
    width: 10%;
    height: auto;
}
.section3 .sec3_unit1_item2 {
    width: 40%;
    color: #1E1E87;
}
.section3 .sec3_unit1_item3 {
    width: 40%;
    color: #231815;
}

/* 8つの症状 */
.section3 .unit2 .box2 .item-container,
.section3b .unit2 .box2 .item-container {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}
.section3 .unit2 .box2 .item-container.red,
.section3b .unit2 .box2 .item-container.red {
    color: rgb(193, 0, 58);
}
.section3 .unit2 .box2 .item-container.blue,
.section3b .unit2 .box2 .item-container.blue {
    color: rgb(0, 0, 62);
}
.section3 .unit2 .box2 .item,
.section3b .unit2 .box2 .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    width: 30vw;
    height: 30vw;
    margin: 3vw;
    padding: 4vw;
    background: #fff;
}
.section3 .unit2,
.section3b .unit2 {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 1480px;
    height: 100vh;
    margin: 30% 0 0;
    opacity: 0;
}
.section3 .sec3_unit2_box1,
.section3b .sec3_unit2_box1 {
    width: 100%;
    max-width: 1920px;
}
.section3 .unit2 .box1 h2,
.section3b .unit2 .box1 h2 {
    margin: 1% 0 2%;
    font-size: 60px;
    font-size: var(--fs60_pc);
}
.section3 .sec3_unit2_box1_h2,
.section3b .sec3_unit2_box1_h2 {
    margin: 4% 0 1%;
    font-size: 54px;
    font-size: var(--fs54_pc);
    font-weight: bold;
}
.section3 .sec3_unit2_box1_p,
.section3b .sec3_unit2_box1_p {
    font-size: 33px;
    font-size: var(--fs33_pc);
}
.section3 .sec3_unit2_icon_all {
    margin: 2% auto 1%;
    width: 64%;
}
.section3 .sec3_unit2_box2,
.section3b .sec3_unit2_box2 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    margin: 0 0 0;
}
.section3 .sec3_unit2_item,
.section3b .sec3_unit2_item {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 0 0 14%;
    padding: 10%;
    background: rgb(255, 255, 255);
    border-radius: 5%;
    transform: translateZ(0);
    box-shadow: 1em 1em 1em 0 rgba(0, 0, 0, .3);
}
.section3 .sec3_unit2_item-title,
.section3b .sec3_unit2_item-title {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}
.section3 .sec3_unit2_item1_icon,
.section3b .sec3_unit2_item1_icon {
    width: 28%;
}
.section3 .sec3_unit2_item2_icon,
.section3b .sec3_unit2_item2_icon {
    width: 36%;
}
.section3 .sec3_unit2_item3_icon,
.section3b .sec3_unit2_item3_icon {
    width: 24%;
}
.section3 .sec3_unit2_item4_icon,
.section3b .sec3_unit2_item4_icon {
    width: 28%;
}
.section3 .sec3_unit2_item5_icon,
.section3b .sec3_unit2_item5_icon {
    width: 24%;
}
.section3 .sec3_unit2_item6_icon,
.section3b .sec3_unit2_item6_icon {
    width: 29%;
}
.section3 .sec3_unit2_item7_icon,
.section3b .sec3_unit2_item7_icon {
    width: 24%;
}
.section3 .sec3_unit2_item8_icon,
.section3b .sec3_unit2_item8_icon {
    width: 28%;
}
.section3 .sec3_unit2_item_h3,
.section3b .sec3_unit2_item_h3 {
    margin: 2% 0 0;
    line-height: 1.1;
    font-size: 25px;
    font-size: var(--fs25_pc);
}
.section3 .sec3_unit2_item_h3 > span,
.section3b .sec3_unit2_item_h3 > span {
    display: block;
    margin: 0 0 3%;
    font-size: 50px;
    font-size: var(--fs50_pc);
    font-weight: bold;
}
.section3 .sec3_unit2_item_p,
.section3b .sec3_unit2_item_p {
    margin: 5% 0 0;
    line-height: 1.9;
    font-size: 27px;
    font-size: var(--fs27_pc);
}
@media screen and (max-width:834px) {
    .section3 {
        position: relative;
        height: 100vh;
        margin: -100vh 0 0;
        z-index: 3;
    }
    .section3 .frame {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        position: relative;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        text-align: center;
        background-image: url(/cms/corp/brands/healthyon/common/img/sec3bk_sp.jpg);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center center;
        z-index: 4;
        opacity: 1;
    }
    .section3 .unit1 {
        position: relative;
        top: 0;
        width: 100%;
        opacity: 1;
    }
    .section3 .unit1_box1 {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        align-content: center;
        opacity: 1;
    }
    .section3 .sec3_unit1_item1 {
        width: 100%;
    }
    .section3 .sec3_unit1_box1_p {
        font-size: 17px;
    }
    .section3 .item3 .sec3_unit1_box1_p {
        text-align: left;
    }
    .section3 .item3 .sec3_unit1_box1_h2 {
        margin-right: 5%;
    }
    .section3 .unit1_box1_by {
        width: 16%;
        margin: 8% auto 8%;
    }
    .section3 .sec3_unit1_item2 {
        width: 100%;
    }
    .section3 .sec3_unit1_box2 {
        background: none;
        opacity: 1;
    }
    .section3 .sec3_unit1_item3 {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
        margin: 5% auto 0;
    }
    .section3 .sec3_unit2_box2 {
        flex-direction: column;
        align-items: center;
    }
    .section3 .unit2 .box2 .item-container {
        width: 94%;
        margin: 0 0 0;
    }
    .section3 .unit2 .box2 .item {
        width: 100%;
        height: 94vw;
        margin: 0 0 7%;
    }
    .section3 .sec3_unit2_item-title {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }
    .section3 .sec3_unit2_item_h3 {
        margin: 2% 0 0 3%;
    }

    /*
     * section3b
     * -------------------------------*/
    .section3 .unit2 {
        display: none;
    }
    .section3b {
        display: block;
        position: relative;
        height: 100%;
        margin: -100vh 0 0;
        padding: 0 0 100vh;
        background-color: #EAEAEA;
        z-index: 5;
    }
    .section3b .frame {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
        justify-content: center;
        position: relative;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #EAEAEA;
        background-image: url(/cms/corp/brands/healthyon/common/img/sec3bbk_sp.jpg);
        background-size: 100%;
        background-position: center;
        text-align: center;
        z-index: 6;
        opacity: 0;
    }
    .section3b .unit2 {
        top: 10vh;
        height: auto;
        margin: 0 0 0;
        opacity: 1;
    }
    .section3b .unit2 .box1 h2 {
        margin: 12% 0 2% 0.5em;
        font-size: 26px;
        text-align: center;
    }
    .section3b .sec3_unit2_box1_p {
        text-align: center;
    }
    .section3b .sec3_unit2_box1 {
        opacity: 1;
    }
    .section3b .sec3_unit2_icon_all {
        width: 60%;
        margin: 8% auto 0;
    }
    .section3b .sec3_unit2_box2 {
        flex-direction: column;
        margin: 5% auto 0;
        opacity: 1;
    }
    .section3b .item-container {
        display: flex;
        flex-direction: column;
    }
    .section3b .item {
        height: 50vh;
        margin: 1vw;
        background: rgb(255, 255, 255);
    }
    .section3b .unit2 .box2 .item-container {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: center;
    }
    .section3b .unit2 .box2 .item {
        width: 94%;
        height: 94vw;
    }
    .section3b .unit2 .box2 .item-container.red {
        color: #C80A50;
    }
    .section3b .unit2 .box2 .item-container.blue {
        color: #1E1E87;
    }
    .section3b .unit2 .box2 .item {
        padding: 2vw;
    }
    .section3b .sec3_unit2_item-title {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
        justify-content: center;
    }
    .section3b .unit2 .item .icon {
        margin-right: 5%;
    }
    .section3b .sec3_unit2_item_h3 {
        text-align: left;
    }
}


/*
 section4
================================ */
.section4 {
    position: relative;
    height: 100vh;
    margin: -100vh 0 0;
    padding: 0 0 0;
    background: rgb(255, 255, 255);
    z-index: 6;
}
.section4 .frame {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_01_a.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center 30%;
    text-align: center;
    opacity: 0;
}
.section4 .parts1 {
    position: absolute;
    top: 10vh;
    right: 0;
    width: 30vw;
    font-size: 45px;
    font-weight: bold;
    opacity: 0;
}
.section4 .sec4_parts1 {
    position: absolute;
    top: 20vh;
    right: 5%;
    font-size: 62px;
    font-size: var(--fs62_pc);
    font-weight: bold;
    opacity: 1;
}
#preloadedImages {
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_01_a.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_01_b.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_01_c.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_02_a.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_02_b.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_02_c.jpg);
    background-image: url(/cms/corp/brands/healthyon/common/img/panel_03.jpg);
}
.section4 .frame.panel1a {
    background: url(/cms/corp/brands/healthyon/common/img/panel_01_a.jpg) no-repeat;
    background-size: 100%;
    background-position: center -100%;
    transition: all 0.3s;
}
.section4 .frame.panel1b {
    background: url(/cms/corp/brands/healthyon/common/img/panel_01_b.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .frame.panel1c {
    background: url(/cms/corp/brands/healthyon/common/img/panel_01_c.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .frame.panel2a {
    background: url(/cms/corp/brands/healthyon/common/img/panel_02_a.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .frame.panel2b {
    background: url(/cms/corp/brands/healthyon/common/img/panel_02_b.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .frame.panel2c {
    background: url(/cms/corp/brands/healthyon/common/img/panel_02_c.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .frame.panel3 {
    background: url(/cms/corp/brands/healthyon/common/img/panel_03.jpg) no-repeat;
    background-size: 100%;
    background-position: center 30%;
    transition: all 0.3s;
}
.section4 .unit1 {
    position: absolute;
    top: 0;
    right: -75%;
    width: 50vw;
    height: 100vh;
    background: #F0F0F0;
}
.section4 .unit1 .box1,
.section4 .unit1 .box2,
.section4 .unit1 .box3 {
    position: absolute;
    top: 10vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 10vh 0 0;
}
.section4 .unit1 .box1 .parts2,
.section4 .unit1 .box2 .parts3,
.section4 .unit1 .box3 .parts4 {
    opacity: 0;
}
.section4 .item {
    position: absolute;
    top: 30vh;
    font-size: 18px;
    text-align: center;
}
.section4 .item .text1 {
    font-weight: bold;
}
.section4 .item1,
.section4 .item2,
.section4 .item3 {
    opacity: 0;
}
.section4 .box1 .item1 .text1 {
    color: #C80A50;
}
.section4 .box1 .item2 .text1 {
    color: #55AFA0;
}
.section4 .box1 .item3 .text1 {
    color: #1E1E87;
}
.section4 .box2 .item1 .text1 {
    color: #C80A50;
}
.section4 .box2 .item2 .text1 span.red {
    color: #C80A50;
}
.section4 .box2 .item2 .text1 span.blue {
    color: #1E1E87;
}
.section4 .box2 .item3 .text1 {
    color: #1E1E87;
}
.section4 .sec4_unit1_box1,
.section4 .sec4_unit1_box2,
.section4 .sec4_unit1_box3 {
    width: 100%;
}
.section4 .sec4_box1_parts2_text1 {
    margin: 1% 0 2%;
    text-align: center;
    font-size: 54px;
    font-size: var(--fs54_pc);
    font-weight: bold;
}
.section4 .sec4_box1_parts2_text2 {
    text-align: center;
    font-size:26px;
    font-size: var(--fs26_pc);
}
.section4 .sec4_box1_item {
    margin: 0 auto 0;
}
.section4 .sec4_box1_item3 {
    margin: 0 auto 0;
}
.section4 .sec4_item_img {
    width: 17%;
    margin: 0 0 2%;
}
.section4 .sec4_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.section4 .sec4_unit1_box2_item {
    margin: 0 auto 0;
}
.section4 .unit1_box_item_text1 {
    margin: 1% 0 2%;
    text-align: center;
    font-size: 36px;
    font-size: var(--fs36_pc);
    font-weight: bold;
}
.section4 .unit1_box_item_text2 {
    margin: 0 0 5%;
    line-height: 1.9;
    text-align: center;
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section4 .sec4_unit1_box2_parts3 {
    margin: 6% auto 3%;
    text-align: center;
    font-size: 54px;
    font-size: var(--fs54_pc);
    font-weight: bold;
}
.section4 .sec4_unit1_box3 {
    display: flex;
}
.section4 .sec4_unit1_box3_parts4 {
    margin: 3% auto 6%;
    text-align: center;
    font-size: 54px;
    font-size: var(--fs54_pc);
    font-weight: bold;
}
.section4 .sec4_unit1_box3_flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 1% 0 9%;
}
.section4 .sec4_unit1_box3_item {
    margin: -2% auto 0;
    width: 65%;
}
.section4 .sec4_unit1_box3_item_img {
    width: 25%;
    margin: 0 0 0;
}
.section4 .sec4_unit1_box3_item_text1 {
    margin: -2% 0 3%;
    text-align: left;
    font-size: 48px;
    font-size: var(--fs48_pc);
    color: #E95A24;
}
.section4 .sec4_unit1_box3_item_text2 {
    text-align: left;
    font-size: 26px;
    font-size: var(--fs26_pc);
}
.section4 .sec4_unit1_box_note {
    margin: -4% 0 6%;
    font-size: 20px;
    font-size: var(--fs20_pc);
}
@media screen and (max-width:834px) {
    .section4 {
        position: relative;
        height: 100vh;
        margin: -250vh 0 0;
        padding: 0 0 0;
        background: rgb(255, 255, 255);
        z-index: 6;
    }
    .section4 .parts1 {
        margin: 0 0 0 0.5em;
        font-size: 39px;
        font-weight: bold;
        opacity: 1;
    }
    .section4 .frame {
        height: 125vh;
        overflow: hidden;
        background-position: center 50%;
        background-size: 200%;
        opacity: 1;
    }
    .section4 .frame.panel1a {
        background-position: center 50%;
        background-size: 142%;
    }
    .section4 .frame.panel1a {
        background: url(/cms/corp/brands/healthyon/common/img/panel_01_a_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel1b {
        background: url(/cms/corp/brands/healthyon/common/img/panel_01_b_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel1c {
        background: url(/cms/corp/brands/healthyon/common/img/panel_01_c_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel2a {
        background: url(/cms/corp/brands/healthyon/common/img/panel_02_a_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel2b {
        background: url(/cms/corp/brands/healthyon/common/img/panel_02_b_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel2c {
        background: url(/cms/corp/brands/healthyon/common/img/panel_02_c_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .frame.panel3 {
        background: url(/cms/corp/brands/healthyon/common/img/panel_03_s.jpg) no-repeat;
        background-size: 142%;
        background-position: center 50%;
        transition: all 0.3s;
    }
    .section4 .sec4_parts1 {
        top: 14vh;
        right: auto;
        width: 100%;
    }
    .section4 .unit1 {
        right: auto;
        top: 98vh;
        width: 100%;
        background-color: rgb(240, 240, 240, .9);
    }
    .section4 .unit1 .box1,
    .section4 .unit1 .box2,
    .section4 .unit1 .box3 {
        top: 0;
        margin: 4vh auto 0;
    }
    .section4 .item {
        top: 138%;
    }
    .section4 .sec4_box1_item {
        top: 100%;
    }
    .section4 .sec4_box1_item {
        top: 100%;
    }
    .section4 .sec4_box1_item.sec4_box1_item3 {
        top: 112%;
    }
    .section4 .sec4_unit1_box2_item {
        top: 126%;
    }
    .section4 .sec4_unit1_box2_item3 {
        top: 134%;
    }
    .section4 .sec4_item_img {
        width: 20%;
    }
    .section4 .unit1 .box1 .parts2 {
        margin: 2% auto 6%;
    }
    .section4 .sec4_unit1_box2_parts3 {
        margin: 2% auto 3%;
    }
    .section4 .sec4_unit1_box3_parts4 {
        margin: 2% auto 3%;
    }
    .section4 .sec4_unit1_box3_flex-box {
        justify-content: center;
        align-items: center;
    }
    .section4 .sec4_unit1_box3_item {
        top: 132%;
        width: 75%;
    }
    .section4 .sec4_unit1_box3_parts4 {
        font-size: 25px;
    }
    .section4 .sec4_unit1_box3_item_img {
        width: 25%;
        margin-right: 10%;
    }
    .section4 .sec4_unit1_box3_item_text2 {
        font-size: 12px;
    }
    .section4 .sec4_unit1_box_note {
        margin-left: 0.5em;
        font-size: 11px;
    }
}

/*
 section5
================================ */
.section5 {
    position: relative;
    margin: -150vh 0 0;
    padding: 0 0 0;
    pointer-events: none;
    z-index: 9;
}
.section5 .unit1 {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    opacity: 0;
}
.section5 .unit1 .text1 {
    margin: 0 0 0.5%;
    line-height: 1.3;
    text-align: center;
    font-size: 108px;
    font-size: var(--fs108_pc);
    font-weight: bold;
}
.section5 .unit1 .text2 {
    margin: 2vh 0 0;
    line-height: 1.7;
    text-align: center;
    font-size: 36px;
    font-size: var(--fs36_pc);
}
.section5 .unit2 {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    height: 100vh;
    opacity: 1;
}
.section5 .sec5_unit2 {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto 0;
}
.section5 .sec5_unit2_img {
    width: 70%;
}
.section5 .sec5_unit2_img img {
    display: block;
    width: 100%;
    height: auto;
}
.section5 .sec5_unit2_text3 {
    margin: 4% 0 0;
    text-align: center;
    font-size: 27px;
    font-size: var(--fs27_pc);
}
@media screen and (max-width:834px) {
    .section5 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        position: relative;
        height: 100vh;
        margin: -30vh 0 0;
        padding: 20vh 0 0;
        background: #fff;
        z-index: 9;
        opacity: 1;
    }
    .section5 .unit1 {
        height: auto;
        margin: 0 0 5vh;
        opacity: 1;
    }
    .section5 .sec5_unit2_img {
        width: 80%;
        margin: 0 5% 0 0;
    }
    .section5 .unit1 .text1 {
        margin-left: 0.5em;
        font-size: 34px;
        opacity: 1;
    }
    .section5 .unit1 .text2 {
        margin-left: 0.5em;
        font-size: 17px;
        opacity: 1;
    }
    .section5 .sec5_unit2 {
        height: auto;
    }
    .section5 .sec5_unit2_text3 {
        margin: 13% 0 0;
        font-size: 16px;
    }
    .section5 .sec5_unit2_text3 span {
        display: inline-block;
        margin-left: 0.5em;
    }
}


/*
 section6
================================ */
.section6 {
    position: relative;
    margin: -30vh 0 0;
    padding: 0 0 0;
    z-index: 7;
    pointer-events: none;
    opacity: 1;
}
.section6 .frame {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url(/cms/corp/brands/healthyon/common/img/0527-1_catalog_25.png) no-repeat;
    background-size: 100%;
    background-position: center 40%;
    text-align: center;
    opacity: 0;
}
.section6 .frame {
    background-position: center 31%;
}
.section6 .unit1 {
    opacity: 0;
}
.section6 .sec6_unit1 {
    margin: 0 0 0;
}
.section6 .sec6_unit1_text1 {
    margin: 0 0 0.5%;
    line-height: 1.28;
    text-align: center;
    font-size: 108px;
    font-size: var(--fs108_pc);
    font-weight: bold;
}
.section6 .sec6_unit1_text2 {
    line-height: 1.7;
    text-align: center;
    font-size: 36px;
    font-size: var(--fs36_pc);
}
@media screen and (max-width:834px) {
    .section6 {
        margin: 0 0 0;
        z-index: 9;
        opacity: 1;
    }
    .section6 .frame {
        background-size: 500%;
        background-position: 39% 48%;
        opacity: 1;
    }
    .section6 .unit1 {
        margin: -7% 0 0;
        opacity: 1;
    }
    .section6 .sec6_unit1_text1 {
        margin-left: 0.5em;
        font-size: 38px;
    }
    .section6 .sec6_unit1_text2 {
        font-size: 17px;
    }
}


/*
 section7
================================ */
.section7 {
    position: relative;
    margin: -100vh 0 0;
    padding: 100vh 0 0;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
}
.section7 .unit1 {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
/*style*/
.section7 .section-inner {
    width: 100%;
    max-width: 1376px;
    margin: 7% auto 0;
}
@media screen and (max-width:1920px) {
    .section7 .section-inner {
        width: 90%;
    }
}
.section7 .products-contaner {
    width: 100%;
    margin: 0 0 4%;
}
.section7 .product-summary {
    width: 90%;
    margin: 0 auto;
}
.section7 .item-label {
    display: flex;
}
.section7 .item-label img {
    display: block;
}
.section7 .product-summary {
    display: flex;
}
.section7 .box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
}
.section7 .box-header {
    width: 90%;
    margin: 0 0 3%;
    border-bottom: 1px solid #000;
    text-align: center;
}
.section7 .box-header h3 {
    text-align: center;
    font-size: 38.2762px;
    font-size: var(--fs38x_pc);
    font-weight: normal;
}
.section7 .box-contents {
    justify-content: center;
    width: 80%;
}
.section7 .box-left {
    width: 60%;
    margin: 0 0 0;
    text-align: center;
}
.section7 .box-left img {
    width: 100%;
    height: auto;
}
.section7 .products-contaner .external {
    width: 80%;
    margin: 3% 0 6%;
}
.section7 .products-contaner .external img {
    width: auto;
    height: auto;
}
.section7 .products-contaner .external.manual {
    margin: 6% 0 0;
}
.section7 .products-contaner .product-detail .external {
    margin: 3% auto 6%;
}
.section7 .products-contaner .box3 .external {
    width: 30%;
    margin: 1% auto 3%;
}
.section7 .box-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35%;
    margin: 0 0 0 5%;
}
.section7 .box-bottom {
    position: relative;
    display: flex;
    align-items: flex-end;
}
.section7 .product-image {
    width: auto;
    min-width: 120px;
    max-width: 50%;
}
.section7 .product-image > img {
    display: block;
    width: 100%;
    height: auto;
}
.section7 .box-bottom .made-in {
    position: relative;
    bottom: 4.25%;
    width: fit-content;
    margin: 0 0 0 7%;
    padding: 0.25em 0.75em 0.15em;
    border: 1px solid #000;
}
.section7 .box-right h2 {
    margin: -5% 0 2%;
    font-size: 65px;
    font-size: var(--fs65_pc);
}
.section7 .box-right .item {
    align-items: flex-start;
    margin: 0 0 6%;
    text-align: left;
}
.section7 .item .size {
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .item .tax {
    display: inline-block;
    width: 2.75em;
    font-size: 24px;
    font-size: var(--fs24_pc);
    font-weight: bold;
}
.section7 .item .price {
    font-size: 35px;
    font-size: var(--fs35_pc);
    font-weight: bold;
}
.section7 .product-detail {
    margin: 15% 0 1%;
}
.section7 .table_hl2601 {
    display: flex;
}
.section7 .table_ii1001 {
    text-align: center;
}
.section7 .table_hl2602 {
    display: flex;
}
.section7 .table_ii2002 {
    text-align: center;
}
.section7 .product-summary .model-info {
    display: flex;
    /* align-items: center; */
    align-items: flex-start;
    margin: 0 0 5%;
}
.section7 .product-summary .model-mun {
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-summary .model-color {
    margin: 0 0 0 1em;
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-summary .model-color .smaller.block {
    display: block;
}
.section7 .product-summary .model-color .smaller-note {
    display: block;
    font-size: .5em;
}
.section7 .product-detail .model-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0;
}
.section7 .product-detail .model-mun {
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-detail .model-color {
    margin: 0 0 0 1em;
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-detail .box-contents {
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}
.section7 .product-detail .box-contents .box-left {
    width: 39%;
}
.section7 .product-detail .box-contents .box-right {
    width: 46%;
    margin: 0 0 0 0;
}
.section7 .product-detail h3.model-num {
    font-size: 34px;
    font-size: var(--fs34_pc);
    font-weight: bold;
}
.section7 .product-detail .model-color {
    margin: 0 0 0 1em;
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-detail .model-name {
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .product-detail .box-contents .size {
    margin: 0 0 4%;
    font-size: 20px;
    font-size: var(--fs20_pc);
}
.section7 .product-detail .box-contents .size > p > span {
    margin: 0 0.5em 0;
    vertical-align: middle;
}
.section7 .product-detail .box-contents .size > p > span.tax {
    margin: 0 0 0 0;
    font-size: 16px;
    font-size: var(--fs16_pc);
}
.section7 .product-detail .box-contents .size > p > span.price {
    display: inline-block;
    margin: 1% 0 0 .25em;
    font-size: 34px;
    font-size: var(--fs34_pc);
}
.section7 .product-detail .item-label {
    margin: 4% 0 0 0;
}
.section7 .product-detail .item-label img {
    display: block;
    margin: 0 5% 0 0;
}
.section7 .box-right .item-description > p {
    text-align: left;
    font-size: 17px;
    font-size: var(--fs17_pc);
}
.section7 .box2 {
    margin: 8% 0 5%;
}
.section7 .box2 .box-header h3 {
    font-size: 40px;
    font-size: var(--fs40_pc);
    font-weight: bold;
}
.section7 .box2 .box-header .note {
    margin: 1% 0 2%;
}
.row {
    display: flex;
    font-size: 26px;
    font-size: var(--fs26_pc);
}
.section7 .th {
    width: 18%;
    margin: .5em;
}
.section7 .th .smaller {
    font-size: 20px;
    font-size: var(--fs20_pc);
}
.section7 .td {
    width: 70%;
    margin: .5em;
}
.section7 .td .smaller {
    font-size: 20px;
    font-size: var(--fs20_pc);
}
.section7 .row.col4 .td {
    width: 25%;
}
.section7 .box3 {
    margin: 8% 0 5%;
}
.section7 .box3 .box-header {
    margin: 0 0 2%;
    padding: 0 0 1%;
}
.section7 .box3 .box-header h3 {
    margin: 0 0 0;
    font-size: 34px;
    font-size: var(--fs34_pc);
    font-weight: bold;
    color: #595757;
}
.section7 .box3 .box-header h3.model-num {
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .box3 .box-header .text {
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .box3 .box-header .text .smaller {
    font-size: 17px;
    font-size: var(--fs17_pc);
}
.section7 .product-detail .box3 .box-contents .size > p {
    margin: 1.5% 0 0;
    line-height: 1;
}
.section7 .product-detail .box3 .box-contents .size > p > span.tax {
    margin: 0 0.5em 0 0;
}
.section7 .product-detail .box3 .box-contents .size > p > span.price {
    margin: 0 0 0;
}
.section7 .product-detail .box1 .box-header {
    margin: 0 0 2%;
    padding: 0 0 1%;
}
.section7 .product-detail .box2 .box-contents {
    width: 90%;
}
.section7 .note3 {
    margin: 2% 0 2%;
    text-align: center;
    font-size: 22px;
    font-size: var(--fs22_pc);
}
.section7 .notice {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 10% 0 0;
    text-align: center;
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .notice .box {
    margin: 0 0 7%;
    line-height: 1.9;
    font-size: 24px;
    font-size: var(--fs24_pc);
}
.section7 .notice .title {
    position: relative;
    display: flex;
    justify-content: center;
    font-size: 40.2976px;
    font-size: var(--fs40x_pc);
}
.section7 .notice .title2 {
    font-size: 36px;
    font-size: var(--fs36_pc);
}
.section7 .notice .title span {
    display: block;
}
.section7 .notice .title .notice-icon {
    position: relative;
    top: -0.4em;
    width: 2em;
    margin: 0 0.4em 0 0;
}
.section7 .notice .title .notice-text {
    margin: 0;
}
.section7 .notice .title .notice-icon img {
    display: block;
    width: 100%;
    height: auto;
}
.section7 .text11 {
    margin: 5% 0 2%;
}
.section7 .text13 {
    width: 58%;
}
.section7 .text15 {
    width: 58%;
}
@media screen and (max-width:834px) {
    .section7 {
        margin: 10% 0 0;
        padding: 0 0 0;
        opacity: 1;
    }
    .section7 .section-inner {
        width: 100%;
    }
    .section7 .box-left {
        width: 100%;
    }
    .section7 .box-right {
        display: flex;
        align-items: center;
        width: 100%;
        margin: 2% 0 0 0;
    }
    .section7 .product-summary {
        flex-direction: column;
        width: 100%;
    }
    .section7 .box-top {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .section7 .box-bottom {
        align-items: center;
        flex-direction: column;
    }
    .section7 .product-image {
        max-width: 120px;
    }
    .section7 .box-right h2 {
        margin: 1% 0 2%;
        font-size: 45px;
        font-size: var(--fs45_sp);
    }
    .section7 .box-header {
        margin: 0 0 5%;
    }
    .section7 .item .price {
        font-size: 28px;
        font-size: var(--fs28_sp);
    }
    .section7 .item .size {
        font-size: 19px;
        font-size: var(--fs19_sp);
    }
    .section7 .item .tax{
        font-size: 18px;
        font-size: var(--fs18_sp);
    }
    .section7 .box-bottom .made-in {
        bottom: 0;
        margin: 10% 0 0 0;
    }
    .section7 .product-detail .box-contents {
        width: 100%;
    }
    .section7 .product-detail .box-contents .size {
        width: 100%;
        font-size: 20px;
        font-size: var(--fs20_sp);
    }
    .section7 .product-detail .box-contents .size > p > span.tax {
        font-size: 16px;
        font-size: var(--fs16_sp);
    }
    .section7 .product-detail .box-contents .size > p > span.price {
        font-size: 34px;
        font-size: var(--fs34_sp);
    }
    .section7 .box2 .box-header h3 {
        font-size: 38px;
        font-size: var(--fs38_sp);
    }
    .section7 .box2 .box-header .note {
        font-size: 20px;
        font-size: var(--fs20_sp);
    }
    .section7 .table_hl2601 {
        flex-direction: column;
    }
    .section7 .product-detail .box-contents .box-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
    }
    .section7 .product-detail .box-contents .box-right {
        width: 90%;
    }
    .section7 .box-right .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    .section7 .box-right .item .text-container {
        display: block;
    }
    .section7 .box-right .item-description > p {
        text-align: center;
        font-size: 17px;
        font-size: var(--fs17_sp);
    }
    .section7 .item-label {
        justify-content: center;
    }
    .section7 .box2 {
        margin: 20% 0 5%;
    }
    .section7 .box_spec_sp {
        width: 84%;
        margin: 0 auto 0;
    }
    .section7 .th {
        width: 37%;
        font-size: 18px;
        font-size: var(--fs18_sp);
    }
    .section7 .th .smaller {
        font-size: 18px;
        font-size: var(--fs18_sp);
    }
    .section7 .td {
        width: 63%;
        font-size: 23px;
        font-size: var(--fs23_sp);
    }
    .section7 .row.col4 .td {
        width: 63%;
    }
    .section7 .box3 {
        margin: 20% 0 10%;
    }
    .section7 .box3 .box-header {
        margin: 0 0 5%;
    }
    .section7 .box3 .box-header h3 {
        font-size: 34px;
        font-size: var(--fs34_sp);
    }
    .section7 .products-contaner .external {
        width: 80vw;
    }
    .section7 .products-contaner .product-summary .external {
        margin: 6% auto 0;
    }
    .section7 .products-contaner .product-summary .item .external {
        margin: 3% auto 0;
    }
    .section7 .products-contaner .product-detail .external {
        margin: 3% auto 4%;
    }
    .section7 .products-contaner .box3 .external {
        width: 80vw;
        margin: 3% auto 6%;
    }
    .section7 .product-detail .box1 .box-header {
        margin: 0 0 5%;
    }
    .section7 .product-detail .model-color {
        font-size: 17px;
        font-size: var(--fs17_sp);
    }
    .section7 .box3 .box-header h3.model-num {
        font-size: 24px;
        font-size: var(--fs24_sp);
    }
    .section7 .table_hl2602 {
        flex-direction: column;
    }
    .section7 .product-detail .item-label img {
        margin: 5% 0 0 0;
    }
    .section7 .product-detail .item-label img:first-child {
        margin-right: 5%;
    }
    .section7 .product-detail .spacer {
        width: 90%;
        height: 1px;
        margin: 10% auto;
        border-top: 1px solid #000;
    }
    .section7 .note3 {
        width: 90%;
        margin: 10% auto;
        letter-spacing: -0.05em;
        font-size: 17px;
        font-size: var(--fs17_sp);
    }
    .section7 .notice {
        width: 90%;
        margin: 10% auto 10%;
    }
    .section7 .notice .title {
        font-size: 34px;
        font-size: var(--fs34_sp);
    }
    .section7 .notice .box {
        font-size: 17px;
        font-size: var(--fs17_sp);
        letter-spacing: -0.05em;
    }
    .section7 .notice .title2 {
        font-size: 30px;
        font-size: var(--fs30_sp);
    }
    .section7 .text13 {
        width: 100%;
    }
    .section7 .text15 {
        width: 100%;
    }
}

/* shop link */
.shop-list-link {
    width: 58%;
    margin: 0 auto 100px;
    pointer-events: all;
}
.shop-list-link a {
    width: 100%;
    height: auto;
    padding: 1.5em;
    border: 1px solid #000;
    text-align: center;
    font-size: 22px;
    font-size: var(--fs22_pc);
}
.shop-list-link a {
    display: block;
    width: 100%;
    text-decoration: none;
    color: #000;
    transition: .4s;
    box-sizing: border-box;
}
.shop-list-link a:hover {
    background: #F0F0F0;
}
.shop-list-link img {
    margin: 0 0 0 .2em;
}
@media screen and (max-width:834px) {
    .shop-list-link {
        width: 90%;
    }
}


/*
 parts
================================ */
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}

.external {
    position: relative;
    z-index: 99;
    margin: 6% 0 0;
}
.section5 .external {
    display: flex;
    justify-content: space-between;
    margin: 2% auto 0;
    width: 80%;
}
.external a {
    position: relative;
    display: block;
    z-index: 99;
    pointer-events: all;
    cursor: pointer;
    width: 100%;
    height: auto;
    padding: .875em 2.5em .775em 1.5em;
    border: 1px solid #000;
    box-sizing: border-box;
    text-decoration: none;
    text-align: center;
    font-size: 22px;
    font-size: var(--fs22_pc);
    color: #000;
    transition: .3s;
}
.section5 .external a {
    width: 48%;
}
.section5 .external a::after {
    position: absolute;
    top: calc(50% - 0.925em);
    right: 0.75em;
    content: "";
    width: 1.85em;
    height: 1.85em;
    background-image: url(/cms/corp/brands/healthyon/common/img/ico_out.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
}
.external a:hover {
    background: #F0F0F0;
}
.external .newtab {
    margin: 0 0 0 0.5em;
}
@media screen and (max-width:834px) {
    .section5 .external {
        display: block;
        margin: 4% auto 0;
        width: 80%;
    }
    .section5 .external a {
        margin: 0 auto 4%;
        width: 100%;
    }
}

/* scroll */
.scroll-btn {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100px;
}
.scroll-btn p {
    display: block;
    width: 100%;
    height: auto;
    font-size: 14px;
    font-size: var(--fs14_pc);
    animation: pathmove 2.6s ease-out infinite;
}
.scroll-btn P img {
    display: block;
    width: 100%;
    height: auto;
}
@keyframes pathmove{
	0%{
		height: 0;
		top: 0;
		opacity: 0;
	}
	30%{
		height: 3vh;
		opacity: 1;
	}
	100%{
		height: 0;
		top: 3vh;
		opacity: 0;
	}
}
@media screen and (max-width:834px) {
    .scroll-btn {
        bottom: 20vh;
        width: 14%;
    }
}

/* loading */
.loading {
    width: 100vw;
    height: 100vh;
    transition: all 1s;
    background-color: #FFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    opacity: 1;
    visibility: visible;
}
.loading.is-active {
    opacity: 0;
    visibility: hidden;
}
.loading-animation {
    width: 100vw;
    height: 100vh;
    transition: all 2s;
    background-color: #efefef;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
}
.loading-animation .image-container {
      width: 5vw;
      height: auto;
}
.loading-animation.is-active {
    opacity: 1;
    visibility: visible;
}
@media screen and (max-width:640px) {
    .loading-animation .image-container {
        width: 16vw;
  }
}