/* --------------------------------------------------
 top
--------------------------------------------------- */
.hero{ position: sticky; top: 0; z-index: -1;}
.hero .inner{ position: relative; width: 100vw;}
.hero video{ width: 100%;}

.content{ position: relative; z-index: 10; background: #212121;}

.lead{ text-align: center;}
.lead dt{ font-weight: 700; font-size: 2.777777778vw;}
.lead dd{ margin: 2em 0 0; line-height: 1.75;}

@media screen and (max-width: 768px){
    .lead dt{ font-size: 4.266666667vw;}
    .lead dd{ text-align: left;}
}

section{ position: relative; padding: 10.41666667vw; border-bottom: 0.069444444vw solid;}
section h2{ margin: 0 -10.41666667vw; text-align: center; letter-spacing: .1em; font-weight: 700; font-size: 2.777777778vw;}
section > p{ margin: 2em 0 0; line-height: 1.75;}
section h2 + p,
section .cap{ text-align: center;}
section h3{ position: relative; margin: 6.944444444vw 0 0; padding: 0 0 0 1em; letter-spacing: .1em; font-weight: 500; font-size: 2.083333333vw;}
section h3:before{ position: absolute; top: 50%; left: 0; width: 0.416666667vw; height: 100%; border-radius: 0.208333333vw; background: #c8c2af; content: ""; transform: translate(0,-50%);}

@media screen and (max-width: 768px){
    section{ padding: 12vw 8vw; border-bottom: 0.266666667vw solid;}
    section h2{ margin: 0 -8vw; font-size: 4.266666667vw;}
    section h2 + p,
    section .cap{ text-align: left;}
    section h3{ margin: 12vw 0 0; font-size: 4.266666667vw;}
    section h3:before{ width: 1.066666667vw; border-radius: 0.533333333vw;}
}

.flex{ display: flex; margin: 6.944444444vw 0 0; width: 100%; justify-content: space-between;}
.flex > *{ width: calc(50% - 2.083333333vw);}

@media screen and (max-width: 768px){
    .flex{ margin: 8vw 0 0;}
    .flex > *{ width: calc(50%);}
}

.list-point{ margin: 6.944444444vw 0 0;}
.list-point > li{ position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 0 0 0 13.88888889vw; height: 6.944444444vw; color: #212121; justify-content: center;}
.list-point > li:after{ position: absolute; top: 0; left: 0; z-index: 1; width: 0; height: 100%; border-radius: 0.694444444vw; background: #c8c2af; content: "";}
.list-point > li + li{ margin: 1.736111111vw 0 0;}
.list-point .number{ position: absolute; top: 50%; left: 3.472222222vw; z-index: 2; letter-spacing: normal; font-weight: 700; font-style: italic; font-size: 11.11111111vw; font-family: "Roboto Mono"; transform: translate(0,-50%);}
.list-point .detail{ position: relative; z-index: 2;}
.list-point .detail p{ display: flex; font-weight: 700; font-size: 2.430555556vw; line-height: 1.25; align-items: baseline;}
.list-point .detail p span{ margin: 0 0 0 .5em; font-size: 1.388888889vw;}

@media screen and (max-width: 768px){
    .list-point{ margin: 8vw 0 0;}
    .list-point > li{ padding: 0 0 0 16vw; height: 12vw;}
    .list-point > li:after{ border-radius: 1.333333333vw;}
    .list-point > li + li{ margin: 2.666666667vw 0 0;}
    .list-point .number{ left: 2.666666667vw; font-size: 18.13333333vw;}
    .list-point .detail p{ display: flex; flex-direction: column; font-size: 3.2vw; line-height: 1.5;}
    .list-point .detail p span{ font-size: 2.133333333vw;}
}

.video{ position: relative; margin: 6.944444444vw 0 0; width: 100%; aspect-ratio: 16 / 9;}
.video iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 768px){
    .video{ margin: 8vw 0 0;}
}

.list-exp{ display: flex; padding: 3.472222222vw 0 0; flex-wrap: wrap; justify-content: space-between;}
.list-exp > li{ position: relative; display: flex; margin: 1.666666667vw 0 0; padding: 2em 0 2em 5em; width: calc(100% / 3 - 0.833333333vw); border-radius: 0.694444444vw; background: #c8c2af; color: #212121; align-items: center;}
.list-exp > li:before{ position: absolute; top: 50%; left: 2.083333333vw; display: block; width: 3.472222222vw; height: 3.472222222vw; border-radius: 0.694444444vw; background: #212121; content: ""; transform: translate(0,-50%);}
.list-exp > li:after{ position: absolute; top: 34%; left: 2.5vw; width: 0.694444444vw; height: 0.694444444vw; border-radius: 100%; background: #f00; content: "";}

@media screen and (max-width: 768px){
    .list-exp{ padding: 5.333333333vw 0 0; font-size: 2.666666667vw;}
    .list-exp > li{ margin: 2.666666667vw 0 0; padding: .75em 0 .75em 2.5em; width: calc(50% - 1.333333333vw); border-radius: 1.333333333vw;}
    .list-exp > li:before{ left: 1.333333333vw; width: 4vw; height: 4vw; border-radius: 1.333333333vw;}
    .list-exp > li:after{ top: 35%; left: 2.133333333vw; width: 0.8vw; height: 0.8vw;}
}

/*
.list-exp2{ display: flex; margin: 1.666666667vw 0 0; justify-content: space-between;}
.list-exp2 > li{ width: calc(50% - 2.083333333vw);}
.list-exp2 .box{ padding: 1.5em; width: 100%; height: 100%; border: 0.138888889vw solid; border-radius: 0.694444444vw;}
.list-exp2 h4{ margin: 1em 0 0;}
.list-exp2 p{ margin: 1em 0 0; font-size: 1.041666667vw;}
.list-exp2 p.ext{ font-size: 0.833333333vw;}

@media screen and (max-width: 768px){
    .list-exp2{ margin: 5.333333333vw -8vw 0; width: 100vw; opacity: 0; transition: opacity 1s ease;}
    .list-exp2.slick-initialized{ opacity: 1;}
    .list-exp2 .slick-slide{ padding: 0 2vw; width: 84vw;}
    .list-exp2 .box{ min-height: 76vw; border: 0.4vw solid; border-radius: 1.333333333vw;}
    .list-exp2 h4{ margin: 1em 0 0; font-size: 2.666666667vw;}
    .list-exp2 p{ margin: 1em 0 0; font-size: 2.133333333vw;}
    .list-exp2 p.ext{ word-break: break-all; font-size: 2.133333333vw;}
}
*/

.list-exp2 > li{ display: flex; margin: 3.571428571vw 0 0; justify-content: space-between; align-items: center;}
.list-exp2 figure{ width: 50%;}
.list-exp2 .detail{ padding: 0 0 0 3.571428571vw; width: 50%;}
.list-exp2 h4{ font-size: 120%;}
.list-exp2 p{ margin: 1em 0 0; font-size: 80%; line-height: 1.75;}
.list-exp2 .ext{ font-size: 70%;}

@media screen and (max-width: 768px){
    .list-exp2 > li{ flex-direction: column-reverse; margin: 8vw 0 0; justify-content: flex-start; align-items: flex-start;}
    .list-exp2 > li + li{ margin: 12vw 0 0;}
    .list-exp2 figure{ width: 100%;}
    .list-exp2 .detail{ padding: 0 0 4vw; width: 100%;}
    .list-exp2 h4{ padding: 0 0 .5em; border-bottom: 1px solid; font-size: 120%;}
    .list-exp2 p{ margin: 1em 0 0; font-size: 90%; line-height: 1.75;}
    .list-exp2 .ext{ font-size: 70%;}
}

.img2{ position: relative; margin: 6.944444444vw -10.41666667vw 0;}
.slide2{ opacity: 0; transition: opacity 1s ease;}
.slide2.slick-initialized{ opacity: 1;}
.slide2 .slick-slide{ position: relative; width: auto; height: 28.125vw;}
.slide2 .slick-slide img{ width: auto; height: 28.125vw;}
.slide2 .line{ position: absolute; bottom: 1.041666667vw; left: 50%; color: #fff; text-align: center; font-family: "Roboto Mono"; transform: translate(-50%,0);}

@media screen and (max-width: 768px){
    .img2{ margin: 8vw -8vw 0;}
    .slide2 .slick-slide{ width: 68vw; height: auto;}
    .slide2 .slick-slide img{ width: 100%; height: auto;}
}

.img3{ position: relative; margin: 6.944444444vw -10.41666667vw 0;}
.img3 ul{ display: flex; flex-wrap: wrap;}
.img3 ul > li{ width: calc(100% / 3);}

@media screen and (max-width: 768px){
    .img3{ margin: 8vw -8vw 0;}
    .img3 ul > li{ width: calc(100% / 3);}
}

.feature{ display: flex; margin: 6.944444444vw 0 0; padding: 3.472222222vw 6.944444444vw; border-radius: 0.694444444vw; background: #c8c2af; color: #212121; line-height: 2; align-items: center;}
.feature dt{ display: flex; padding: 1.041666667vw 6.944444444vw 0 0; white-space: nowrap; font-weight: 700; line-height: 1;}
.feature dd{ padding: 1.041666667vw 0 1.041666667vw 3.472222222vw; border-left: 0.069444444vw solid #212121;}
.feature ul li{ position: relative; padding: 0 0 0 3.472222222vw;}

@media screen and (max-width: 768px){
    .feature{ flex-direction: column; margin: 8vw 0 0; padding: 8vw 4vw; border-radius: 1.333333333vw; align-items: flex-start;}
    .feature dt{ padding: 0 0 4vw;}
    .feature dd{ padding: 4vw 0 0; border-top: 0.266666667vw solid; border-left: none;}
    .feature ul{ margin: 0 0 0 1.4em;}
    .feature ul li{ padding: 0; list-style: disc; font-size: 2.666666667vw; line-height: 1.5;}
    .feature ul li + li{ margin: 1em 0 0;}
}

.btn{ margin: 5.208333333vw 0 0;}
.btn a{ position: relative; display: flex; overflow: hidden; margin: 0 auto; width: 27.77777778vw; height: 4.861111111vw; border: 0.138888889vw solid; border-radius: 2.430555556vw; align-items: center; justify-content: center;}

@media screen and (max-width: 768px){
    .btn{ margin: 8vw 0 0;}
    .btn a{ width: 60vw; height: 10.66666667vw; border: 0.4vw solid; border-radius: 5.333333333vw;}
}

table{ margin: 6.944444444vw 0 0; width: 100%; border: 0.069444444vw solid #c8c2af; font-size: 1.25vw;}
table th{ padding: 1.041666667vw; border: 0.069444444vw solid #c8c2af; white-space: nowrap;}
table td{ padding: 1.041666667vw 2.083333333vw; border: 0.069444444vw solid #c8c2af;}
table tbody th{ background: #e6dfc9; color: #212121;}
table tbody td{ background: #fff; color: #212121;}

@media screen and (max-width: 768px){
    table{ margin: 8vw 0 0; border: 0.266666667vw solid #c8c2af; font-size: 2.666666667vw;}
    table th{ padding: 2.666666667vw; border: 0.266666667vw solid #c8c2af;}
    table td{ padding: 2.666666667vw; border: 0.266666667vw solid #c8c2af;}
}

.price{ display: flex; flex-direction: column; margin: 3.472222222vw 0 0; padding: 3.472222222vw 0; border-radius: 0.694444444vw; background: #fff; color: #212121; justify-content: center; align-items: center;}
.price > div{ display: flex; font-weight: 500; font-size: 2.083333333vw; align-items: baseline;}
.price small{ font-size: 1.388888889vw;}
.price .del{ position: relative; padding: 0 .5em;}
.price .del:after{ position: absolute; top: 50%; left: 50%; width: 100%; height: 0.138888889vw; background: #212121; content: ""; transform: translate(-50%,-50%);}
.price .strong{ color: #f00;}
.price > p{ margin: 1em 0 0; text-align: center;}

@media screen and (max-width: 768px){
    .price{ margin: 4vw 0 0; padding: 4vw 0; border-radius: 1.333333333vw;}
    .price > div{ font-size: 3.2vw;}
    .price small{ font-size: 2.133333333vw;}
    .price .del:after{ height: 0.266666667vw;}
    .price > p{ margin: 1em 0 0; padding: 0 2em; text-align: left; font-size: 2.666666667vw;}
}

.list{ padding: 1em 0 0;}
.list > li{ position: relative; margin: 1em 0 0; padding: 0 0 0 1em;}
.list > li:before{ position: absolute; top: .7em; left: 0; width: 0.347222222vw; height: 0.347222222vw; border-radius: 100%; background: #c8c2af; content: "";}

@media screen and (max-width: 768px){
    .list > li:before{ top: .7em; left: 0; width: 1.333333333vw; height: 1.333333333vw;}
}

.list-media{ margin: 6.944444444vw 0 0;}
.list-media > li{ margin: 1.736111111vw 0 0;}
.list-media > li:first-child{ margin: 0;}
.list-media > li a{ position: relative; display: flex; padding: 0 0 0 2em;align-items: baseline; }
.list-media > li a:after{ position: absolute; top: 50%; left: 0; width: 0.694444444vw; height: 0.694444444vw; border: 0.138888889vw solid #c8c2af; border-bottom: none; border-left: none;  content: ""; transform: translate(0,-50%) rotate(45deg);}
.list-media > li time{ width: 20%;}

@media screen and (max-width: 768px){
    .list-media{ margin: 8vw 0 0;}
    .list-media > li{ margin: 4vw 0 0;}
    .list-media > li:first-child{ margin: 0;}
    .list-media > li a{flex-direction: column; padding: 0; }
    .list-media > li a:after{ content: none;}
    .list-media > li time{ width: 100%;}
}

.company{ margin: 6.944444444vw 0 0; line-height: 1.75;}
.company:after{ display: block; clear: both; content: "";}
.company dt{ float: left; clear: left; padding: 2.083333333vw; width: 20%; border-top: 0.138888889vw solid #c8c2af; font-weight: 700;}
.company dd{ margin: 0 0 0 20%; padding: 2.083333333vw 0 2.083333333vw 2.083333333vw; width: calc(100% - 20%); border-top: 0.138888889vw solid #c8c2af;}
.company dd p + p{ margin: 1em 0 0;}
.company dt.first,
.company dd.first{ padding: 0 30px 30px; border: none;}
.company ul{ display: flex; margin: 0 0 0 1.2em; font-size: 1.111111111vw; line-height: 2; flex-wrap: wrap;}
.company ul li{ width: 50%; list-style: disc;}
.company ul li:last-child{ list-style: none;}

@media screen and (max-width: 768px){
    .company{ margin: 8vw 0 0; font-size: 3.2vw;}
    .company dt{ float: none; clear: none; padding: 4vw 0 0; width: 100%; border-top: 0.4vw solid #c8c2af;}
    .company dd{ margin: 0; padding: 0 0 4vw; width: 100%; border-top: none;}
    .company dd p{ margin: 1em 0 0;}
    .company dt.first,
    .company dd.first{ padding: 0;}
    .company dd.first{ padding: 0 0 4vw;}
    .company ul{ flex-direction: column; margin: 1em 0 0 1.2em; font-size: 2.666666667vw; line-height: 1.75;}
    .company ul li{ width: 100%; list-style: disc;}
    .company ul li:last-child{ list-style: none;}
}

.act1{ opacity: 0;}
.fadeIn1{ animation: fadeIn1 2s cubic-bezier(0.33, 1, 0.68, 1) forwards;}
 
@keyframes fadeIn1 {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

.fadeIn2:after{ animation: fadeIn2 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;}
 
@keyframes fadeIn2 {
    0% { width: 0;}
    100% { width: 100%;}
}