@charset "utf-8";


*,
:after,
:before {
    box-sizing: border-box
}

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

body {
    line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

nav ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: "";
    content: none
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: rgba(0, 0, 0, 0)
}

ins {
    text-decoration: none
}

ins,
mark {
    background-color: #ff9;
    color: #000
}

mark {
    font-style: italic;
    font-weight: 700
}

del {
    text-decoration: line-through
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0
}

input,
select {
    vertical-align: middle
}

li {
    list-style: none
}

button {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    appearance: none
}

main {
    display: block
}

.u-scrollAnim {
    transform: translateY(200px);
    opacity: 0;
    transition: opacity .6s, transform .6s cubic-bezier(0.025, 0.905, 0.31, 1.08)
}

.u-scrollAnim.-animated {
    transform: translateY(0) rotate(0) !important;
    opacity: 1
}

.u-hvralpha {
    transition: .2s ease-out opacity
}

@media(hover) {
    .u-hvralpha:hover {
        opacity: .7
    }
}

.ua-ie .u-hvralpha:hover {
    opacity: .7
}

.u-hvralpha.js-hover {
    opacity: .7
}

@media(hover) {
    .u-hvralpha.-alpha60:hover {
        opacity: .6
    }
}

.ua-ie .u-hvralpha.-alpha60:hover {
    opacity: .6
}

.u-hvralpha.-alpha60.js-hover {
    opacity: .6
}

@media screen and (max-width: 767px) {
    .u-onlypc {
        display: none
    }
}

@media screen and (min-width: 768px) {
    .u-onlysp {
        display: none
    }
}

@media screen and (max-width: 767px) {
    .u-onlypc-ranking {
        display: none
    }
}

.u-txtSub {
    vertical-align: sub;
    font-size: .6em
}

.u-txtSup {
    vertical-align: super;
    font-size: .6em
}

.c-bnrBox {
    padding: 3rem 0 5rem;
    background-color: #fff;
    position: relative;
    z-index: 2
}

.m-bnrBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}

.m-bnrBox .m-bnrBox-link:nth-child(1) {
    width: 12.5rem
}

.m-bnrBox .m-bnrBox-link:nth-child(2) {
    width: 10.85rem;
    margin-left: 3.5rem;
    margin-top: 1.4rem
}

.c-breadcrumb {
    padding: .8rem 1rem .9rem;
    background-color: #cbebfb;
    display: flex;
    align-items: center
}

.c-breadcrumb .c-breadcrumb-item {
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: .06em
}

.c-breadcrumb .c-breadcrumb-item+.c-breadcrumb-item {
    margin-left: 2.4rem;
    position: relative
}

.c-breadcrumb .c-breadcrumb-item+.c-breadcrumb-item::before {
    content: "";
    border-top: solid .05rem rgba(0, 0, 0, .2);
    border-right: solid .05rem rgba(0, 0, 0, .2);
    width: .55rem;
    height: .55rem;
    position: absolute;
    top: 50%;
    left: -1.6rem;
    transform: translateY(-50%) rotate(45deg)
}

.c-breadcrumb .c-breadcrumb-item.-reitouchokin {
    flex-shrink: 0
}

.c-breadcrumb .c-breadcrumb-item.-reitouchokin .c-breadcrumb-link {
    text-decoration: underline;
    text-decoration-thickness: .1rem;
    text-underline-offset: 10%
}

.c-breadcrumb .c-breadcrumb-item:last-child {
    margin-top: .1rem
}

.c-breadcrumb .c-breadcrumb-item:last-child::before {
    top: calc(50% - .05rem)
}

.c-breadcrumb .c-breadcrumb-link {
    margin-top: -0.1rem;
    color: #0a4994
}

.c-breadcrumb .c-breadcrumb-img {
    width: 1.45rem
}

.c-footer {
    margin-top: 8rem;
    padding-top: 3rem;
    padding-bottom: 3.2rem;
    background-color: #f7f6f6;
    position: relative;
    z-index: 2;
}

.c-footer .c-footer-logo {
    margin: 2.5rem auto 1.2rem;
}

.c-footer .c-footer-copyright {
    margin: 0 auto
}


li.m-footerNav-item {
    padding: 0.7rem 4rem;
}

li.m-footerNav-item a {
    text-decoration: none;
    color: #474747;
    font-family: sans-serif;
    letter-spacing: 0.1em;
    font-size: 13px;
    font-weight: 600;

}

.m-footer .m-footer-logo {
    width: 11.6rem
}

.m-footer .m-footer-copyright {
    width: 33.3rem;
    display: block
}

.c-header {
    position: fixed;
    top: 0;
    width: 37.5rem;
    /*box-shadow: 0px 1px 20px 0px rgba(0, 71, 99, .2);*/
    z-index: 200
}

.c-header .c-header-inner {
    padding: 1.1rem 2rem .8rem;
    display: flex;
    align-items: center;
    /*  background: #fff*/
}

.c-header .c-header-logo {
    display: block;
    width: 11.4rem
}

.c-header .c-header-logo.-preservation {
    width: 3.15rem;
    margin-left: auto;
    margin-right: 1.95rem
}

.c-header .c-header-menuBtn {
    width: 3.15rem;
    margin-left: auto;
    margin-right: 0;
}

.c-header .c-header-menuBtn[aria-expanded=false] .p-headerMenu-img.-open {
    display: block
}

.c-header .c-header-menuBtn[aria-expanded=false] .p-headerMenu-img.-close {
    display: none
}

.c-header .c-header-menuBtn[aria-expanded=true] .p-headerMenu-img.-open {
    display: none
}

.c-header .c-header-menuBtn[aria-expanded=true] .p-headerMenu-img.-close {
    display: block
}

@media(min-width: 768px) {
    .c-hero {
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: calc(100vw - 375px);
        height: 100vh
    }
}

.c-hero .c-hero-inner {
    position: absolute;
    width: 53.7rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

.c-hero .c-hero-ttl {
    width: 180px;
    margin: 0 auto 5rem;
}

.c-hero .c-hero-menu {
    width: min(35.2rem, 48.9384288747vh);
    margin: .5rem auto 10rem;
}

.c-hero .c-hero-menu.-current-underDire {
    width: min(46.1rem, 48.9384288747vh)
}

.m-heroList .m-heroList-item {
    background-color: rgba(222, 249, 255, .7);
    border-radius: .5rem;
    height: min(4.5rem, 4.7770700637vh)
}

.m-heroList .m-heroList-item a {
    display: block;
    width: 100%;
    height: 100%
}

.m-heroList .m-heroList-item.-under {
    position: relative
}

.m-heroList .m-heroList-item.-under a {
    padding: min(1.5rem, 1.5923566879vh) 0 min(1.5rem, 1.5923566879vh) min(3rem, 3.1847133758vh);
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.m-heroList .m-heroList-item.-under a::after {
    content: "";
    display: block;
    background: url(../img/icon_right_heroMenu.svg) no-repeat;
    background-size: contain;
    width: min(.6rem, .6369426752vh);
    height: min(1rem, 1.0615711253vh);
    position: absolute;
    top: 50%;
    right: min(2rem, 2.1231422505vh);
    transform: translateY(-50%)
}

.m-heroList .m-heroList-item.-under:not(:last-child) {
    margin-bottom: min(.4rem, .4246284501vh)
}

.m-heroList .m-heroList-item.-cooking img {
    width: min(15.2rem, 16.135881104vh)
}

.m-heroList .m-heroList-item.-ranking img {
    width: min(15rem, 15.923566879vh)
}

.m-heroList .m-heroList-item.-rescue img {
    width: min(20.3rem, 21.5498938429vh)
}

.m-heroList .m-heroList-item.-toast img {
    width: min(15.5rem, 16.4543524416vh)
}

.m-heroList .m-heroList-item.-onigiri img {
    width: min(17.6rem, 18.6836518047vh)
}

.m-heroList .m-heroList-item.-school img {
    width: min(14.5rem, 15.3927813163vh)
}

.m-heroList .m-heroList-item.-yasai img {
    width: min(25.7rem, 27.2823779193vh)
}

.m-heroList.-current-underDire .m-heroList-item.-top {
    width: 25%;
    height: min(33.9rem, 35.9872611465vh);
    margin-right: 1%;
    float: left;
    position: relative
}

.m-heroList.-current-underDire .m-heroList-item.-top a {
    padding-left: 4.2rem;
    padding-left: min(4.2rem, 4.4585987261vh)
}

.m-heroList.-current-underDire .m-heroList-item.-top a::after {
    content: "";
    display: block;
    background: url(../img/icon_left_heroMenu.svg) no-repeat;
    background-size: contain;
    width: min(.6rem, .6369426752vh);
    height: min(1rem, 1.0615711253vh);
    position: absolute;
    top: 50%;
    left: min(2rem, 2.1231422505vh);
    transform: translateY(-50%)
}

.m-heroList.-current-underDire .m-heroList-item.-top img {
    width: min(3.2rem, 3.3970276008vh);
    vertical-align: baseline;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.m-heroList.-current-underDire .m-heroList-item.-under {
    float: right;
    width: 74%
}

.c-menu {
    position: fixed;
    width: 37.5rem;
    height: 100%;
    top: 0;
    z-index: 130;
    padding-top: 6rem;
    padding-bottom: 3.4rem;
    transition: .5s opacity;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto
}

.c-menu.-open {
    opacity: 1;
    pointer-events: auto
}

.c-menu.-open .c-menu-inner {
    opacity: 1;
    transform: scale(1)
}

.c-menu .c-menu-bg {
    position: fixed;
    width: 37.5rem;
    height: 100vh;
    top: 5rem;
    margin-left: 0;
    background-color: #cbebfb;
    z-index: 110
}

.c-menu .c-menu-inner {
    margin: 0 auto;
    position: relative;
    z-index: 120;
    background-color: #fff;
    padding: .5rem 2.5rem 3.1rem;
    border-radius: 1em;
    width: 35.4rem;
    transition: opacity .5s, transform .5s;
    opacity: 0;
    transform: scale(0.95)
}

.c-menu .c-menu-list.-sub {
    padding-bottom: 2.5rem
}

.c-menu .c-menu-list.-sub .c-menu-item {
    padding-bottom: 0
}

.c-menu .c-menu-list.-sub .c-menu-item:not(:last-child) {
    margin-bottom: .5rem
}

.c-menu .c-menu-list.-sub .c-menu-item::after {
    content: none
}

.c-menu .c-menu-list .c-menu-item {
    position: relative
}

.c-menu .c-menu-list .c-menu-item::after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #d9ebf1;
    position: absolute;
    bottom: 0;
    left: 0
}

.c-menu .c-menu-list .c-menu-item.-top .c-menu-link {
    padding-top: 2.5rem
}

.c-menu .c-menu-list .c-menu-item.-top .c-menu-link img {
    width: 3.95rem
}

.c-menu .c-menu-list .c-menu-item.-topics .c-menu-link {
    padding-top: 2.5rem
}

.c-menu .c-menu-list .c-menu-item.-topics .c-menu-link img {
    width: 6rem
}

.c-menu .c-menu-list .c-menu-item .c-menu-link {
    display: block;
    padding-bottom: 2.5rem
}

.c-menu-list a {
    padding-top: 2.5rem;
    font-weight: bold;
    text-decoration: none;
    color: #222;
}

.c-menu .c-menu-list .c-menu-item .c-menu-link::before {
    content: "";
    display: block;
    width: .65rem;
    height: 1.05rem;
    background: url(../img/icon_right.svg) 0 0 no-repeat;
    position: absolute;
    right: 0
}

.c-menu .c-menu-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5rem
}

.c-menu .c-menu-logo .c-menu-logoLink {
    display: block
}

.c-menu .c-menu-logo .c-menu-logoLink:nth-child(1) {
    width: 7.2rem
}

.c-menu .c-menu-logo .c-menu-logoLink:nth-child(2) {
    width: 6.15rem;
    margin-left: 2.75rem;
    margin-top: .75rem
}

.c-modalWrap {
    display: none
}

.c-modal {
    position: fixed;
    top: 0;
    z-index: 1000
}

.c-modal .c-modal-bg {
    position: fixed;
    top: 0;
    z-index: -1
}

.c-modal .c-modal-inner {
    padding: 2rem 1.5rem;
    position: relative
}

.m-modal {
    height: 100%;
    transition: opacity .3s;
    opacity: 0;
    pointer-events: auto
}

.m-modal.-open {
    opacity: 1
}

.m-modal.-close {
    pointer-events: none
}

.m-modal .m-modal-bg {
    width: 37.5rem;
    height: 100%;
    background: rgba(0, 0, 0, .6)
}

.m-modal .m-modal-bg:hover {
    cursor: pointer
}

.m-modal .c-modal-wrapper {
    height: 100%;
    width: 100%;
    overflow-y: auto
}

.m-modal .m-modal-inner {
    width: 37.5rem
}

.m-modal .m-modal-inner .m-modal-closeBtn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 4.5rem;
    height: 4.5rem;
    z-index: 1100;
    box-shadow: 5px 8.66px 20px 0px rgba(0, 0, 0, .1);
    border-radius: 50%
}

.m-modal .m-modal-inner .m-modal-closeBtn:hover {
    cursor: pointer
}

.m-modal .m-modal-inner .m-modal-closeBtn.-hide {
    display: none
}

.m-modal .m-modal-inner .m-modal-closeBtn.-movie {
    width: 3rem;
    height: 3rem;
    top: -1.05rem;
    right: 0
}

.m-modal .m-modal-inner .m-modal-content {
    transform-origin: center 20%
}

.m-modal.-open-nomal {
    -ms-overflow-style: none
}

.m-modal.-open-movie {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    left: 0
}

@media screen and (min-width: 768px) {
    .m-modal.-open-movie .m-modal-bg {
        width: 100%
    }
}

.m-modal.-open-movie .c-modal-wrapper {
    width: 100%;
    padding: 3rem 0;
    overflow-y: auto;
    display: flex;
    align-items: center
}

.m-modal.-open-movie .m-modal-inner {
    padding: 3rem 0;
    max-width: 960px;
    width: 90%;
    margin: auto;
    position: relative
}

.m-modal.-open-movie .m-modalWrap-youtube {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%
}

.m-modal.-open-movie .m-modalWrap-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.m-modal.-open .m-modal-content {
    transform: scale(0.8);
    opacity: 0;
    animation: openModalContent .4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: .1s
}

.m-modal.-close .m-modal-content {
    animation: closeModalContent .4s forwards
}

@keyframes openModalContent {
    0% {
        transform: scale(0.8);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes closeModalContent {
    0% {
        transform: scale(1)
    }

    100% {
        transform: scale(0.8)
    }
}

.js-body-fixed {
    overflow-y: hidden;
    width: 100%
}

.m-modal-wrap .m-modal-ttlWrap {
    background: #25aded;
    border-radius: .5rem;
    padding: 2.5rem 0;
    margin-bottom: .5rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-ttl {
    margin: 0 auto;
    padding-bottom: 2.05rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-ttl.-riceBall {
    width: 20.5rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-ttl.-pizzaToast {
    width: 23.85rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-ttl.-miso {
    width: 15rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-img {
    margin: 0 auto
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-img.-riceBall {
    width: 15rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-img.-pizzaToast {
    width: 24.65rem
}

.m-modal-wrap .m-modal-ttlWrap .m-modal-img.-miso {
    width: 29.15rem
}

.m-modal-box {
    margin-bottom: .5rem;
    width: 34.5rem
}

.m-modal-box .m-modal-inner {
    background: #fff;
    border-radius: .5rem;
    border: .05rem solid #fff;
    padding: 1.95rem;
    margin-top: -0.4rem;
    width: 100%;
    position: relative
}

.m-modal-box .m-modal-inner .m-modal-img {
    margin-bottom: 2rem
}

.m-modal-box .m-modal-inner.-pizzaToast {
    padding: 0 2rem 2rem
}

.m-modal-box .m-modal-inner .m-modal-txt {
    line-height: 1.7;
    letter-spacing: .06em;
    font-size: 1.5rem
}

.m-modal-box .m-modal-inner .m-modal-txt:not(:last-child) {
    margin-bottom: 2rem
}

.m-modal-box .m-modal-inner .p-riceBallPoint-img {
    width: 24.8rem
}

.m-number-list .m-number-ttl {
    width: 1.95rem
}

.m-number-list .m-number-ttl.-num1 {
    width: 1.6rem
}

.m-number-list .m-number-ttl.-num2 {
    width: 1.85rem
}

.m-number-list .m-number-ttl.-num3 {
    width: 1.85rem
}

.m-number-list .m-number-ttl.-num4 {
    width: 2rem
}

.m-number-list .m-number-ttl.-num5 {
    width: 1.8rem
}

.m-number-list .m-number-ttl.-num6 {
    width: 1.9rem
}

.m-number-list .m-number-txt {
    line-height: 1.7;
    letter-spacing: .06em;
    font-size: 1.5rem;
    position: relative;
    padding-top: 1.5rem
}

.m-number-list .m-number-txt:last-child::after {
    content: none
}

.m-number-list .m-number-txt::after {
    content: "";
    display: block;
    background-image: url(../img/bg_bdr_dot.png);
    background-repeat: repeat;
    background-size: contain;
    width: 100%;
    height: .1rem;
    position: absolute;
    bottom: 0;
    left: 0
}

.m-number-list .m-number-txt:not(:last-child) {
    padding-bottom: 2rem;
    margin-bottom: 2rem
}

.m-number-list .m-number-txt.-recipe {
    padding-top: 0
}

.m-number-list .m-number-txt .m-number-img {
    margin-top: 1.75rem
}

.m-modalList .m-modalList-item {
    margin-left: 15px;
    list-style-type: disc;
    line-height: 1.7;
    letter-spacing: .06em;
    font-size: 1.5rem;
    padding-top: 1.65rem;
    padding-bottom: 1.5rem;
    position: relative
}

.m-modalList .m-modalList-item:last-child::before {
    content: none
}

.m-modalList .m-modalList-item::before {
    content: "";
    display: block;
    background-image: url(../img/bg_bdr_dot.png);
    background-repeat: repeat;
    background-size: contain;
    width: calc(100% + 14px);
    height: .1rem;
    position: absolute;
    bottom: 0;
    left: -14px
}

.m-modalList.-recipe .m-modalList-item {
    margin-left: 15px;
    list-style-type: disc;
    padding-bottom: 0
}

.m-modalList.-recipe .m-modalList-item:not(:first-child) {
    padding-top: 0
}

.m-modalList.-recipe .m-modalList-item::before {
    content: none
}

.m-modalList .u-modalList-recipe {
    display: inline-block;
    position: absolute;
    right: 0
}

.m-modalList .u-modalList-nest {
    margin-left: 0;
    list-style-type: none;
    font-size: 1.2rem;
    padding-top: 1.5rem;
    line-height: 1.75
}

.p-pageTop {
    position: fixed;
    bottom: 0;
    width: 4.65rem;
    margin-left: 32rem;
    opacity: 0;
    transition: opacity .5s;
    z-index: 100
}

.p-pageTop a {
    display: block
}

.p-pageTop a:hover {
    cursor: pointer
}

.p-pageTop.is-show {
    opacity: 1
}

.c-shareBox .c-shareBox-inner {
    padding: 3.05rem 0;
    background: #eaf8ff
}

.m-shareBox {
    display: flex;
    justify-content: center;
    align-items: center
}

.m-shareBox .m-shareBox-link {
    display: block
}

.m-shareBox .m-shareBox-link:nth-child(1) {
    width: 4.9rem
}

.m-shareBox .m-shareBox-link:nth-child(2) {
    width: 5rem;
    margin-left: 3rem
}

.c-techniqueChart {
    background: #25aded;
    position: relative;
    padding-top: 1.5rem;
    padding-bottom: 2rem
}

.c-techniqueChart.-bgImg::before {
    content: "";
    display: block;
    background: url(../../img/bg_pickup.png) 0 0 no-repeat;
    background-size: cover;
    width: 100%;
    height: 6.35rem;
    position: absolute;
    top: -2px;
    left: 0;
    transform: rotate(180deg)
}

.c-techniqueChart .c-techniqueChart-inner {
    margin-top: 11.1rem
}

.m-techniqueChart .m-btn {
    display: block;
    background-color: #6eb92b;
    border: #fff solid .3rem;
    border-radius: 90px;
    box-shadow: 14px 14px 7px 0px rgba(0, 0, 0, .1);
    width: 32.5rem;
    min-height: 9rem;
    padding: 2.25rem 0;
    position: relative;
    margin: -2.85rem auto 11.4rem;
    z-index: 20
}

.m-techniqueChart .m-btn::before {
    content: "";
    display: block;
    background: url(../img/img_technique.png) 0 0 no-repeat;
    background-size: contain;
    width: 100%;
    height: 8.1rem;
    position: absolute;
    top: -8.25rem;
    left: 0;
    pointer-events: none
}

.m-techniqueChart .m-btn::after {
    content: "";
    display: block;
    background: url(../img/icon_technique_right.png) 0 0 no-repeat;
    background-size: contain;
    width: .95rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    right: 2.5rem;
    transform: translateY(-50%)
}

.m-techniqueChart .m-btn .m-btn-txt {
    width: 20rem;
    z-index: 110;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.m-techniqueChart .m-btn.-chart {
    background-color: #eb6ca5;
    padding: 2rem 0;
    margin-top: -0.5rem;
    margin-bottom: 0
}

.m-techniqueChart .m-btn.-chart::before {
    content: "";
    display: block;
    background: url(../img/img_chart.png) 0 0 no-repeat;
    background-size: contain;
    height: 8.15rem;
    top: -7.8rem
}

.m-techniqueChart .m-btn.-chart::after {
    background: url(../img/ico_pdf.png) no-repeat;
    background-size: contain;
    width: 1.8rem;
    height: 2.35rem;
    right: 1.95rem
}

.m-techniqueChart .m-btn.-chart .m-btn-txt {
    width: 25.6rem;
    left: 2.05rem;
    transform: translate(0, -50%)
}

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

html {
    font-size: 62.5%
}

@media screen and (min-width: 768px) {
    html {
        font-size: 62.5%
    }
}

@media screen and (max-width: 767px) {
    html {
        font-size: 2.6666666667vw
    }
}

body {
    font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
    font-size: 1.6rem;
    color: #474747;
    font-feature-settings: "palt";
    /*background-color: #D1F5FF*/
}

@media screen and (min-width: 768px) {
    body {
        margin: 0 auto;
        overflow-x: hidden
    }
}

/*
@media screen and (min-width: 768px) {
    body:before {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-image: url(../img/img_bg_mvv20230301.png);
        background-position: center;
        background-repeat: repeat;
        background-size: 2000px 1441px;
        background-attachment: fixed
    }
}
*/

.u-clearfix::after {
    content: "";
    display: block;
    clear: both
}

.c-contents {
    max-width: 990px;
    margin: 0 auto;
    display: flex;
    justify-content: flex-end
}

@media screen and (max-width: 767px) {
    .c-contents {
        width: 37.5rem;
        display: block;
        overflow-x: hidden
    }
}

.contents-inner {
    width: 37.5rem;
    position: relative;
    box-shadow: 0px 0px 10px #0001;
}

.c-main {
    padding-top: 5rem;
    position: relative;
    z-index: 2;

}

[data-gtm-click] * {
    pointer-events: none
}

/*# sourceMappingURL=style.css.map */



@media screen and (min-width:480px) {

    /* 枠の太さ = 10px */
    /* 枠の色 = #f08d24*/

    html:before,
    html:after,
    body:before,
    body:after {
        content: "";
        background: #75b3db;
        position: fixed;
        display: block;
        z-index: 1;
    }

    /* 上 */
    html:before {
        height: 15px;
        width: 100vw;
        left: 0;
        top: 0;
    }

    /* 右 */
    html:after {
        width: 15px;
        height: 100vh;
        right: 0;
        top: 0;
    }

    /* 下 */
    body:before {
        height: 15px;
        width: 100vw;
        bottom: 0;
        left: 0;
    }

    /* 左 */
    body:after {
        width: 15px;
        height: 100vh;
        top: 0;
        left: 0;
    }

}



body{
    background-image: url(../../img/body_bg01.png);     /* 背景画像指定 */
    background-repeat: repeat;     
}