@charset "UTF-8";
/* CSS Document */

@import url('reset.css');
@import url('animate.css');
@import url('../splide/frontage-bold.css');
@import url('../font/frontage/frontage-bold/webfonts/frontage-bold.css');

body { color: #231814; line-height:1; padding: 0; position: relative; min-height: 100%; }
html { min-height: 100%; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
:focus-visible { outline-color: #C8AAFF; }
/* !font-size 16px default setting */
body { font-size: 16px; font-family: avenir-next-lt-pro, dnp-shuei-gothic-gin-std, Sans-Serif }
p, th, td, dt, dd { line-height: 1.88em; font-weight: 500; letter-spacing: 0.08em; font-feature-settings: "palt" 1; }
strong { font-family: avenir-next-lt-pro, dnp-shuei-gothic-gin-std, Sans-Serif !important; font-weight: 700; font-style: normal }
h1, h2, h3, h4, h5 { font-family: 'Frontage-Bold', dnp-shuei-gothic-gin-std, Sans-Serif; letter-spacing: 0; font-weight: 700; font-style: normal }

/* !clearfix */
hr { display: none; }
.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}
/* リストの高さ揃える  */
.list-flex { display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: flex-start;
}
/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}
img { vertical-align: bottom; }
button { color: #231815; padding: 0; border: none; appearance: none; background: none; cursor: pointer; }

.ts-larger { font-size: 1.12em !important }
.ts-smaller { font-size: 0.88em !important }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

.pc-none { display: none }
.sp-none { display: block }

/* !Links */
a { cursor: pointer !important }
a:link { color: #221815; text-decoration: none }
a:visited { color: #221815; text-decoration: none }
a:hover { color: #221815; text-decoration: underline }
a:active { color: #221815; text-decoration: none }
a.bdr:link, a.bdr:visited { border-bottom: solid 1px #222 }
a.bdr:hover { text-decoration: none; border-bottom: solid 2px #222 }

/* effects */
.fd, .fds { position: relative; opacity: 0; transition: 0.8s linear; }
.fd .reveal, .fds .reveal_ { transform: translateY(6vw); transition: 1s cubic-bezier(0.19, 1, 0.22, 1); }
.fd.is-active, .fds.is-active { opacity: 1; }
.fd.is-active .reveal, .fds.is-active .reveal_ { transform: translateY(0); }
.txtl { position: relative; opacity: 0; padding: 0; margin: 0; }
.cap { font-size: 14px }
.cap-s { font-size: 10px; line-height: 1.5 }

#loader { position: fixed; left: 50%; top: 50%; margin: -24px 0 0 -24px; z-index: 1001 }
.loader svg {
	fill: none;
	stroke: #231814;
	stroke-width: 8;
	stroke-linecap: round;
	stroke-dasharray: 230 230;
	animation: loader 1.2s infinite cubic-bezier(.4,0,.3,1), loading 1.2s infinite linear;
	vertical-align: middle;
}
@keyframes loader {
	from { stroke-dashoffset: 230; }
	to { stroke-dashoffset: -230; }
}
@keyframes loading {
	from { transform: none; }
	to { transform: rotate(360deg); }
}

#wrapper { position: relative; }
.content { position: relative; }

#header { position: fixed; left: 0; top: -64px; width: 100%; height: 64px; background: #dee0e0; text-align: center; z-index: 100; transition: all 0.2s }
#header.active { top: 0; }
.global-nav { margin: 0 auto }
.global-nav li { display: inline-block; }
.global-nav li a { display: block; font-size: 16px; font-weight: 800; line-height: 64px; letter-spacing: 0.08em; padding: 0 2.2vw }
.global-nav li a:hover { text-decoration: none; opacity: 0.5 }
.global-nav li a span { position: relative }
.global-nav li a span::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 4px; background: #231814; transition: all 0.2s }
.global-nav li.current a span::after { width: 100% }

#btn-menu { position: fixed; right: 0; top: 0; width: 100px; height: 90px; cursor: pointer; z-index: 100; display: none }
#btn-menu span { position: absolute; display: block; width: 50px; height: 2px; background: #1f1d1e; transition: all 0.2s }
#btn-menu span:nth-child(1) { left: 25px; top: 39px }
#btn-menu span:nth-child(2) { left: 25px; bottom: 39px }
#btn-menu:hover span { width: 60px; }
#btn-menu:not(.active):hover span:nth-child(1) { left: 20px; top: 39px }
#btn-menu:not(.active):hover span:nth-child(2) { left: 20px; bottom: 39px }
#btn-menu.active:hover span:nth-child(1) { left: 20px; top: 39px }
#btn-menu.active:hover span:nth-child(2) { left: 20px; bottom: 39px }
#btn-menu.active span:nth-child(1) { transform: rotate(45deg) scaleX(0.5); }
#btn-menu.active span:nth-child(2) { transform: rotate(-45deg) scaleX(0.5) translate(13px, -7px); }
#btn-menu.w span { background: #fff }

#mv { position: relative; background: #eeefef; opacity: 0.1; transition: opacity 1s linear }
#mv.is-active { opacity: 1 }
#mv p.cap-s { position: absolute; right: 1em; bottom: -3.5em; line-height: 1.5; text-align: right }
.news { margin-top: -40px }
.news h3 { font-size: 50px; line-height: 1em; margin-left: 6vw }
.news ul { padding: 4vw 6vw }
.news ul li { position: relative; padding-left: 200px }
.news ul li .date { position: absolute; left: 0; top: 0; font-size: 18px; font-weight: 700 }

#overview .sec-inner { position: relative; padding: 0 6vw 12vw }
#overview .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 18vw; height: 0; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
#overview.is-active .sec-inner::before { height: 100%; }
#overview .sec-inner h2 { position: relative; font-size: 60px; line-height: 1.25; text-align: right }
#overview .sec-inner h2 .ja { display: block; font-size: 24px; letter-spacing: 0.08em; text-align: left }
#overview .sec-inner p { width: 75%; margin-left: 25%; font-size: 18px }

#outline .sec-inner { position: relative; padding: 0 6vw 12vw }
#outline .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 120px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
#outline.is-active .sec-inner::before { width: 100%; }
#outline .sec-inner h2 { position: relative; font-size: 76px; line-height: 1; padding-top: 60px }
#outline .sec-inner h2 .ja { position: absolute; right: 0; top: 60px; font-size: 24px; letter-spacing: 0.08em  }
#outline .sec-inner h3 { font-size: 60px; line-height: 1; margin-bottom: 0.5em }
#outline .sec-inner h3 .ja { font-size: 20px; margin-left: 30px; letter-spacing: 0.08em }
#outline .sec-inner .outline { padding: 6vw }
#outline .sec-inner table { font-size: 18px }
#outline .sec-inner tr:nth-child(odd) { background: #f6f7f7 }
#outline .sec-inner th { padding: 30px 3vw; font-weight: 700; text-align: left; vertical-align: top; white-space: nowrap }
#outline .sec-inner td { padding: 30px 3vw 30px 0; }
#outline .sec-inner .travelling { padding: 0 6vw }
#outline .sec-inner .travelling h3 { font-size: 24px; margin-bottom: 0.5em }
#outline .sec-inner .travelling table { table-layout: auto; }
#outline .sec-inner .travelling th { width: 200px; font-size: 32px; font-family: 'Frontage-Bold', Sans-Serif;　letter-spacing: 0; }
#outline .sec-inner .travelling td { font-weight: 700; padding-top: 40px; }
#outline .sec-inner .travelling td .loc { display: inline-block; vertical-align: top; margin-right: 4em }
#outline .sec-inner .travelling td .period { display: inline-block; vertical-align: top; }
a.ico-blank { display: inline-block; position: relative; padding-right: 26px }
a.ico-blank::after { content:""; display: inline-block; position: absolute; right: 0; top: calc(50% - 9px); width: 18px; height: 18px; background: url("../img/ico_blank.png") no-repeat; background-size: contain }

#about .sec-inner { position: relative; padding: 0 6vw 12vw }
#about .sec-inner h2 { position: relative; font-size: 64px; line-height: 1; text-align: center }
#about .sec-inner h3 { position: relative; font-size: 24px; margin-bottom: 1em }
#about .sec-inner .about-box { border: solid 0 #eeefef; padding: 7vw 9vw; margin-top: -24px; transition: 1s }
#about.is-active .sec-inner .about-box { border: solid 3vw #eeefef; padding: 4vw 6vw; }
#about .sec-inner .pics { margin-top: 3vw }
#about .sec-inner .pics div.pic:nth-child(1) { width: 26.24% }
#about .sec-inner .pics div.pic:nth-child(2) { width: 35.8% }
#about .sec-inner .pics div.pic:nth-child(3) { width: 37.96% }
#about .sec-inner .pics .cap-s { padding: 1em 1em 0; line-height: 1.5 }

#highlights { position: relative; padding: 0 0 12vw }
#highlights h2 { position: absolute; right: 6vw; top: 60px; font-size: 76px; line-height: 1; width: auto; z-index: 10; }
#highlights h2 .ja { position: absolute; left: -6em; top: 0; font-size: 24px; letter-spacing: 0.08em }
#highlights .inner-block { position: relative; padding: 0 6vw }
#highlights .inner-block .num-bar { position: relative; font-size: 160px; font-weight: 700; color: #eeefef; line-height: 120px; z-index: 0 }
#highlights .inner-block .num-bar::after { content: ""; display: block; position: absolute; left: 230px; top: 0; width: 0; height: 120px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
#highlights .inner-block.is-active .num-bar::after { width: calc(100% - 230px); }
#highlights .inner-block .num-bar.r { text-align: right }
#highlights .inner-block .num-bar.r::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 120px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
#highlights .inner-block.is-active .num-bar.r::after { width: calc(100% - 230px); }
#highlights .inner-block h3 { font-size: 24px; margin-bottom: 1em }
#highlights .inner-block .text { padding-top: 6vw }
#highlights .inner-block .cap-s { padding: 1em 1em 0 }
#highlights .highlight-01 { padding: 0 0 3vw 6vw }
#highlights .highlight-01 .text { float: left; width: 28% }
#highlights .highlight-01 .image { float: right; width: 62%; margin: 3vw 4vw 0 0 }
#highlights .highlight-01 .cap-s { text-align: right; margin-right: 3vw }
#highlights .highlight-02 { padding-bottom: 3vw }
#highlights .highlight-02 .cfix { position: relative }
#highlights .highlight-02 .text { float: right; width: 43.33% }
#highlights .highlight-02 .image { float: left; width: 43.33%; margin: -60px 0 0 6vw }
#highlights .highlight-02 .image .cap-s { margin-top: -2em }
#highlights .highlight-03 { padding-bottom: 3vw }
#highlights .highlight-03 .text { float: left; width: 35% }
#highlights .highlight-03 .image { float: right; width: 67.5%; margin: -60px -6vw 0 0; padding-bottom: 3vw; position: relative; text-align: right }
#highlights .highlight-03 .image .pic-1 { display: inline-block; width: 38%; text-align: left }
#highlights .highlight-03 .image .pic-2 { position: absolute; left: 0; top: 13.6vw; display: inline-block; width: 62%; text-align: left }
#highlights .highlight-04 { padding-bottom: 4vw; z-index: 10 }
#highlights .highlight-04 .text { float: right; width: 38% }
#highlights .highlight-04 .image { float: left; width: 66%; margin: -60px 0 0 -6vw; position: relative }
#highlights .highlight-04 .image .pic-1 { display: inline-block; width: 68.98%; text-align: left }
#highlights .highlight-04 .image .pic-1 .cap-s { width: calc(6vw + 240px)}
#highlights .highlight-04 .image .pic-2 { position: absolute; right: 0; top: 17vw; display: inline-block; width: 58.86%; text-align: left }
#highlights .highlight-04 .image .pic-2 .cap-s { position: absolute; left: 106%; bottom: 20%; width: 100% }
#highlights .highlight-05 { z-index: 0 }
#highlights .highlight-05 .text { float: left; width: 32% }
#highlights .highlight-05 .image { float: right; width: 63.5%; position: relative; }
#highlights .highlight-05 .image .pic-1 { display: inline-block; width: 40%; margin-top: 6vw }
#highlights .highlight-05 .image .pic-2 { position: absolute; right: 0; top: -60px; display: inline-block; width: 52.35%; text-align: left }

#goods .sec-inner { position: relative; padding: 0 0 12vw }
#goods .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 120px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
#goods.is-active .sec-inner::before { width: 100%; }
#goods .sec-inner h2 { position: relative; font-size: 76px; line-height: 1; padding: 60px 0 0 6vw }
#goods .sec-inner h2 .ja { position: absolute; right: 6vw; top: 60px; font-size: 24px; letter-spacing: 0.08em }
#goods .sec-inner .goods-box { padding: 6vw 0 0 }
#goods .sec-inner .goods-box .goods-splide { float: left; width: 50% }
#goods .sec-inner .goods-box .goods-splide .cap { font-size: 12px; text-align: right; margin-top: 1em }
#goods .sec-inner .goods-box .goods-splide .splide-pagination { bottom: 0 }
#goods .sec-inner .goods-box .goods-splide .splide-page { background: #eeefef; opacity: 1; margin: 0 8px }
#goods .sec-inner .goods-box .goods-splide .splide-page.is-active { background: #221815; transform: none }
#goods .sec-inner .goods-box .text { float: left; width: calc(50% - 12vw); padding: 0 6vw }
#goods .sec-inner .goods-box .text h3 { font-size: 24px; line-height: 1.5; margin-bottom: 1em; font-family: avenir-next-lt-pro, dnp-shuei-gothic-gin-std, Sans-Serif; }
#goods .sec-inner .goods-box .text h3 span { display: block; font-size: 18px }
#goods .sec-inner .goods-box .text p.view-more { font-weight: 700; font-size: 14px; margin-top: 1em; }
#goods .sec-inner .goods-box .text p.view-more a { position: relative; display: inline-block; padding-right: 26px; }
#goods .sec-inner .goods-box .text p.view-more a::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/arw_down.png") no-repeat; background-size: contain ; position: absolute; right: 0; top: 4px; }
#goods .sec-inner .goods-box .text p.spec { font-size: 14px; margin-top: 2em; display: none }
#goods .sec-inner p.noted { margin-top: 2em; text-align: right; padding: 0 1em }

#footer { text-align: center }
#footer .fnav { width: 100%; padding: 24px 0; background: #eeefef;  }
#footer .fnav li { display: inline-block; border-right: solid 1px #231814 }
#footer .fnav li a { display: block; padding: 0 1em; }
#footer .fnav li:last-child { border: none }
#footer p.copyright { font-size: 14px; padding: 3vw 0 }

.big-title h2 { font-size: 56px; line-height: 1.5; margin-bottom: 1em }
.big-title h2 span.ja { font-size: 20px; margin-left: 1.5em }
.f-cont { margin: 100px 12vw 0 }
.f-cont h3 { font-size: 17px }
.f-cont h4 span.num { font-size: 28px }
.f-cont h4 { font-size: 16px }
.f-cont h5 { font-family: "Midashi Go MB1", Sans-Serif; margin: 1em 0 0.25em; }
.f-cont .block { padding: 1em }
.f-cont .block-bb { padding: 1em; margin-bottom: 1em; border-bottom: #c53a28 1px dotted }
.f-cont .block-bb h3 { font-size: 23px; }
.f-cont p { margin: 1em 0; font-weight: 400 }
.f-cont p span.num { font-size: 1.33em; font-weight: 500 }
.f-cont ul { margin: 0.5em 0 0 1.5em }
.f-cont ul li { font-weight: 400; margin: 0.5em 0; line-height: 1.5em }
.f-cont ol { margin: 0.5em 0 0 2em }
.f-cont ol li { list-style: decimal; font-weight: 400; margin: 0.5em 0; line-height: 1.5em  }
.f-cont ul.numbering { margin: 0.5em 0 0; padding-left: 3em }
.f-cont ul.numbering li { list-style: none; font-weight: 400; margin: 0.5em 0; text-indent: -3em }
.backto-top { margin: 8vw 6vw 6vw; font-size: 32px; font-weight: 700 }
.f-cont a:link, .f-cont a:visited { border-bottom: dotted 1px }
.f-cont a:hover { border-bottom: 0; text-decoration: none; opacity: 0.5 }
.f-cont strong { font-weight: bold }
.f-cont p.note { font-size: 14px; padding-left: 1em; text-indent: -1em }

.mt-0 { margin-top: 0 !important }
.mt-1 { margin-top: 1em !important }
.mt-2 { margin-top: 2em !important }
.mt-3 { margin-top: 3em !important }
.mt-4 { margin-top: 4em !important }
.mb-0 { margin-bottom: 0 !important }
.mb-1 { margin-bottom: 1em !important }
.mb-2 { margin-bottom: 2em !important }
.mb-3 { margin-bottom: 3em !important }
.mb-4 { margin-bottom: 4em !important }

@media screen and (max-width: 768px) {
    
    html, body { overflow-x: hidden; }
    
    body { font-size: 14px; }
    p, th, td, dt, dd { line-height: 1.66; }
    h1, h2, h3, h4, h5 { letter-spacing: 0; }
    
    .pc-none { display: block }
    .sp-none { display: none }
    
    .cap { font-size: 10px }
    .cap-s { font-size: 8px; line-height: 1.5 }
        
    #header { position: fixed; left: 100%; top: 0; width: 75%; height: 100vh; height: 100dvh; background: #dee0e0; text-align: center; z-index: 100; transition: all 0.4s cubic-bezier(0.86,0,0.07,1    ); }
    #header.is-open { left: 25%; }
    #header.active { top: 0; }
    .global-nav li { display: block; width: 100%; height: 16.66vh; }
    .global-nav li a { display: block; font-size: 16px; font-weight: 800; line-height: calc(16.66vh - 1px); letter-spacing: 0.08em; padding: 0; border-bottom: solid 1px #fff }
    #btn-menu { position: fixed; right: 0; top: 0; width: 60px; height: 42px; display: block }
    #other #btn-menu { display: none }
    #btn-menu span { position: absolute; display: block; width: 30px; height: 2px; background: #303030; transition: all 0.2s }
    #btn-menu span:nth-child(1) { left: 15px; top: 16px }
    #btn-menu span:nth-child(2) { left: 15px; bottom: 16px }
    #btn-menu:hover span { width: 30px; }
    #btn-menu:not(.active):hover span:nth-child(1) { left: 15px; top: 16px }
    #btn-menu:not(.active):hover span:nth-child(2) { left: 15px; bottom: 16px }
    #btn-menu.active:hover span:nth-child(1) { left: 15px; top: 16px }
    #btn-menu.active:hover span:nth-child(2) { left: 15px; bottom: 16px }
    #btn-menu.active span:nth-child(1) { transform: rotate(45deg) scaleX(0.6) translate(10px, 0); }
    #btn-menu.active span:nth-child(2) { transform: rotate(-45deg) scaleX(0.6) translate(10px, 0); }
    
    #mv { padding-top: 32px; }
    #mv p.cap-s { position: relative; right: inherit; bottom: inherit; line-height: 1.5; text-align: left; padding: 0.5em 1em }
    #mv p.cap-s br { display: none }
    
    .news { margin-top: 0 }
    .news h3 { font-size: 24px; line-height: 1em; margin-left: 3vw }
    .news ul { padding: 2vw 3vw 8vw }
    .news ul li { position: relative; padding-left: 120px }
    .news ul li .date { position: absolute; left: 0; top: 0; font-size: 14px }
    
    #overview .sec-inner { position: relative; padding: 0 3vw 12vw }
    #overview .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 14vw; height: 0; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
    #overview .sec-inner h2 { position: relative; font-size: 30px; line-height: 1.25; text-align: right; margin-bottom: 0.5em }
    #overview .sec-inner h2 .ja { display: block; font-size: 16px; letter-spacing: 0.08em; text-align: right; margin-top: 0.5em }
    #overview .sec-inner p { width: 80%; margin-left: 20%; font-size: 14px }
    
    #outline .sec-inner { position: relative; padding: 0 0 12vw }
    #outline .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 64px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
    #outline.is-active .sec-inner::before { width: 100%; }
    #outline .sec-inner h2 { position: relative; font-size: 36px; line-height: 1; padding-top: 36px }
    #outline .sec-inner h2 .ja { position: absolute; right: 0; top: 48px; font-size: 16px; letter-spacing: 0.08em  }
    #outline .sec-inner h3 { font-size: 30px; line-height: 1; margin-bottom: 0.5em; margin-left: 3vw }
    #outline .sec-inner h3 .ja { font-size: 15px; margin-left: 15px; letter-spacing: 0.08em }
    #outline .sec-inner .outline { padding: 6vw 0 }
    #outline .sec-inner table { font-size: 14px }
    #outline .sec-inner th { padding: 20px 3vw; }
    #outline .sec-inner td { padding: 20px 3vw 20px 0; }
    #outline .sec-inner .travelling { padding: 0 }
    #outline .sec-inner .travelling h3 { font-size: 16px; margin-bottom: 0.5em; margin-left: 3vw }
    #outline .sec-inner .travelling table { table-layout: auto; }
    #outline .sec-inner .travelling th { font-size: 18px; padding: 20px 3vw 0; display: block; }
    #outline .sec-inner .travelling td { font-weight: 700; padding: 0 3vw 20px; display: block; }
    #outline .sec-inner .travelling td .loc { display: inline-block; }
    #outline .sec-inner .travelling td .period { display: block; }

    
    #about .sec-inner { position: relative; padding: 0 0 12vw }
    #about .sec-inner h2 { position: relative; font-size: 32px; line-height: 1; text-align: center }
    #about .sec-inner h3 { position: relative; font-size: 16px; margin-bottom: 1em }
    #about .sec-inner .about-box { border: solid 0 #eeefef; padding: 10vw; margin-top: -16px; transition: 1s }
    #about.is-active .sec-inner .about-box { border: solid 6vw #eeefef; padding: 4vw; }
    #about .sec-inner .pics { margin-top: 6vw }
    #about .sec-inner .pics div.pic:nth-child(1) { width: 42.3% }
    #about .sec-inner .pics div.pic:nth-child(2) { width: 57.7% }
    #about .sec-inner .pics div.pic:nth-child(3) { width: 100%; margin-top: 3vw }
    #about .sec-inner .pics .cap-s { padding: 1em 1em 0; line-height: 1.5 }
    
    #highlights { position: relative; padding: 0 0 12vw; }
    #highlights h2 { position: absolute; right: 0; top: 36px; font-size: 36px; line-height: 1; width: auto; z-index: 10; }
    #highlights h2 .ja { position: absolute; left: inherit; right: 0; top: -1.5em; font-size: 16px; letter-spacing: 0.08em }
    #highlights .inner-block { position: relative; padding: 0 }
    #highlights .inner-block .num-bar { position: relative; font-size: 80px; font-weight: 700; color: #eeefef; line-height: 64px; z-index: 0; text-indent: -1vw }
    #highlights .inner-block .num-bar::after { content: ""; display: block; position: absolute; left: 90px; top: 0; width: 0; height: 64px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
    #highlights .inner-block.is-active .num-bar::after { width: calc(100% - 90px); }
    #highlights .inner-block .num-bar.r { text-align: right; text-indent: 0 }
    #highlights .inner-block .num-bar.r::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 64px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
    #highlights .inner-block.is-active .num-bar.r::after { width: calc(100% - 90px); }
    #highlights .inner-block h3 { font-size: 16px; margin-bottom: 1em; }
    #highlights .inner-block .text { padding-top: 6vw }
    #highlights .inner-block .cap-s { padding: 1em 1em 0 }
    #highlights .highlight-01 { padding: 0 0 6vw }
    #highlights .highlight-01 .text { float: none; width: auto; padding: 6vw 3vw 0 }
    #highlights .highlight-01 .image { float: none; width: auto; margin: 3vw 0 0; padding: 0 3vw }
    #highlights .highlight-01 .cap-s { text-align: left; margin-right: 0 }
    #highlights .highlight-02 { padding-bottom: 6vw }
    #highlights .highlight-02 .cfix { position: relative }
    #highlights .highlight-02 .text { float: none; width: auto; padding: 6vw 3vw 0 }
    #highlights .highlight-02 .image { float: none; width: 88%; margin: 3vw 6% 0 }
    #highlights .highlight-02 .image .cap-s { margin-top: -2em }
    #highlights .highlight-03 { padding-bottom: 6vw }
    #highlights .highlight-03 .text { float: none; width: auto; padding: 6vw 3vw 0 }
    #highlights .highlight-03 .image { float: none; width: 100%; margin: 3vw 0 0 0; padding-bottom: 0; position: relative; text-align: right }
    #highlights .highlight-03 .image .pic-1 { display: inline-block; width: 38%; text-align: left }
    #highlights .highlight-03 .image .pic-2 { position: absolute; left: 0; top: 15vw; display: inline-block; width: 62%; text-align: left }
    #highlights .highlight-04 { padding-bottom: 6vw; z-index: 10 }
    #highlights .highlight-04 .text { float: none; width: auto; padding: 6vw 3vw 0 }
    #highlights .highlight-04 .image { float: none; width: auto; margin: 3vw 0 0; position: relative }
    #highlights .highlight-04 .image .pic-1 { display: inline-block; width: 68.98%; text-align: left }
    #highlights .highlight-04 .image .pic-1 .cap-s { width: 60% }
    #highlights .highlight-04 .image .pic-2 { position: absolute; right: 0; top: 17vw; display: inline-block; width: 58.86%; text-align: left }
    #highlights .highlight-04 .image .pic-2 .cap-s { position: absolute; left: 10%; bottom: -6em; width: 90% }
    #highlights .highlight-05 { z-index: 0 }
    #highlights .highlight-05 .text { float: none; width: auto; padding: 6vw 3vw 3vw }
    #highlights .highlight-05 .image { float: none; width: auto; padding: 0 3vw; position: relative; }
    #highlights .highlight-05 .image .pic-1 { display: inline-block; width: 40%; margin-top: 0 }
    #highlights .highlight-05 .image .pic-2 { position: absolute; right: 0; top: 0; display: inline-block; width: 52.35%; text-align: left }
    
    #goods .sec-inner { position: relative; padding: 0 0 12vw }
    #goods .sec-inner::before { content: ""; display: block; position: absolute; left: 0; top: 0; width: 0; height: 64px; background: #eeefef; z-index: 0; transition: 1s cubic-bezier(0.23,1,0.32,1) }
    #goods .sec-inner h2 { position: relative; font-size: 36px; line-height: 1; padding: 36px 0 0 }
    #goods .sec-inner h2 .ja { position: absolute; right: 3vw; top: 48px; font-size: 16px; letter-spacing: 0.08em }
    #goods .sec-inner .goods-box { padding: 6vw 0 0 }
    #goods .sec-inner .goods-box .goods-splide { float: none; width: 100% }
    #goods .sec-inner .goods-box .goods-splide .cap { font-size: 10px; text-align: right; margin-top: 1em }
    #goods .sec-inner .goods-box .text { float: none; width: calc(100% - 12vw); padding: 6vw 6vw 0 }
    #goods .sec-inner .goods-box .text h3 { font-size: 20px; line-height: 1.5; margin-bottom: 1em; font-family: avenir-next-lt-pro, dnp-shuei-gothic-gin-std, Sans-Serif; }
    #goods .sec-inner .goods-box .text h3 span { display: block; font-size: 16px }
    #goods .sec-inner .goods-box .text p.view-more { font-weight: 700; font-size: 14px; margin-top: 1em; }
    #goods .sec-inner .goods-box .text p.view-more a { position: relative; display: inline-block; padding-right: 26px; }
    #goods .sec-inner .goods-box .text p.view-more a::after { content: ""; display: inline-block; width: 16px; height: 16px; background: url("../img/arw_down.png") no-repeat; background-size: contain ; position: absolute; right: 0; top: 4px; }
    #goods .sec-inner .goods-box .text p.spec { font-size: 14px; margin-top: 2em; display: none }
    
    #footer p.copyright { font-size: 12px; padding: 3vw 0 }
    
    #other .big-title h2 { font-size: 28px; }
    #other .big-title h2 span.ja { font-size: 14px; margin-left: 0; display: block; }
    .f-cont { margin: 40px 3vw 0 }
    .f-cont-inner { max-width: inherit; padding: 0 2vw; margin: 0 auto }
	.f-cont h3 { font-size: 14px }
	.f-cont h4 { font-size: 14px }
	.f-cont .block { padding: 1em 0 }
	.f-cont .block-bb { padding: 1em 0; margin-bottom: 1em; border-bottom: #c53a28 1px dotted }
	.f-cont .block-bb h3 { font-size: 17px; }
	.f-cont .block-bb img {width: 100% }
	.f-cont p { margin: 1em 0; font-weight: 400 }
	.f-cont ol { margin: 0.5em 0 0 2em }
	.f-cont ol li { list-style: decimal; font-weight: 400; margin: 0.5em 0 }
	.f-cont ul.numbering { margin: 0.5em 0 0;; padding-left: 3.2em }
	.f-cont ul.numbering li { font-weight: 400; margin: 0.5em 0; text-indent: -3.2em }
    .backto-top { margin: 6vw 3vw; font-size: 20px; }
    
    
}