@charset "utf-8";

*	{
    font-family: "Noto Sans JP", sans-serif;
}

.sp {
    display: none;
}

html    {
    overflow-x: hidden;
}
.text-center    {
    text-align: center;
}

.text-left  {
    text-align: left;
}

.text-right  {
    text-align: right;
}

picture:has(img)    {
    display: flex;
}

h1,h2,h3,h4,h5,h6,p,th,td,dd,dt,li,span	{
    line-height: 180%;
    font-weight: 500;
    color: #000000;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 144%;
/*	font-feature-settings: "palt";*/
}

h1,h2,h3,h4,h5,h6,strong,b	{
    font-family: "Noto Sans JP","Archivo Narrow", sans-serif;
    font-weight: bold;
    letter-spacing: 0.2vw;
    font-feature-settings: "palt";
}
a   {
    transition: all 0.2s linear;
}
a:hover   {
    transform: translateY(-5px);
    opacity: 0.85;
}

.medium {
    font-weight: 500;
}

.fs24   {
    font-size: 1.25vw;
}

.fs36   {
    font-size: 1.875vw;
}

.fs38   {
    font-size: 1.979vw;
}

.fs40   {
    font-size: 2.08vw;
}

.fs42   {
    font-size: 2.18vw;
}

.fs64   {
    font-size: 3.33vw;
}

.fs70   {
    font-size: 3.65vw;
}

.fs96   {
    font-size: 5vw;
}

.fs110   {
    font-size: 5.73vw;
}

.white  {
    color: white;
}

#key    {
    width: 100vw;
    aspect-ratio: 128/229;
    background-image: url(../images/key_back.png);
    background-size: contain;
    background-position: center top;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.webp #key  {
    background-image: url(../images/key_back.webp);
}

#key .logo  {
    display: block;
    aspect-ratio: 236/189;
    background-image: url(../images/logo.png);
    background-size: auto 100%;
    background-position: right bottom;
    width: 36.875vw;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    text-indent: -9999px;
}

.webp #key .logo  {
    background-image: url(../images/logo.webp);
}

#key .keyimg    {
    display: block;
    width: 80.1vw;
    margin-top: 11.4vw;
}

#key .img1  {
    display: block;
    position: absolute;
    width: 20.83vw;
    top: 107.1vw;
    right: 11.66vw;
}

#key .img2  {
    display: block;
    position: absolute;
    width: 70.37vw;
    bottom: -8.8vw;
    left: 13.07vw;
}

#key .videolink  {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 31.25vw;
    height: 31.25vw;
    top: 115.67vw;
    left: 15.1vw;
    background-image: url(../images/key_videolink_img.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 50%;
    border: 5px solid white;
}

.webp #key .videolink  {
    background-image: url(../images/key_videolink_img.webp);
}

#key .videolink img {
    width: 6.25vw;
}

#companypicsec   {
    position: relative;
    z-index: 0;
    margin-top: -32.24vw;
    margin-bottom: -39vw;
}

#companypicsec img   {
    width: 100%;
}

/* main */

main   {
    position: relative;
    z-index: 1;
}

main:after  {
    content: "";
    width: 68.8vw;
    height: calc(100% - 11.35vw);
    background-image: url(../images/main_back.png);
    background-repeat: repeat-y;
    background-size: 100% auto;
    position: absolute;
    top: 11.35vw;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 9;
}

.webp main:after  {
    background-image: url(../images/main_back.webp);
}

main section  {
    background-size: 100% auto;
    background-position: center top;
}

main section:not(:first-of-type)    {
    margin-top: -32.24vw;
    margin-bottom: -32.24vw;
}    

.contentblock   {
    position: relative;
    z-index: 10 !important;
}

.contentblock h1,
.contentblock p    {
    line-height: 216%;
}

main #sec1  {
    position: relative;
    background-color: transparent;
    width: 100%;
    height: 97.61vw;
}

main #sec1:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #00A7FF;
    position: absolute;
    top: 16.8vw;
    left: 0;
    transform: skewY(-17.73deg);
    z-index: -1;
}

main #sec1:after    {
    content: "";
    display: block;
    width: 100vw;
    height: 104%;
    background-image: url(../images/sec1_bgimg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: 0.8vw;
    left: 0;
    z-index: 0;
}

.webp main #sec1:after  {
    background-image: url(../images/sec1_bgimg.webp);
}

main #sec1 .sec1_img1   {
    width: 84.58vw;
    position: absolute;
    left: 13.333vw;
    top: 0;
    z-index: 2;
}

main #sec1 .contentblock    {
    top: 31vw;
} 

main #sec2  {
    position: relative;
    width: 100%;
    height: 124.48vw;
}

main #sec2:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #49D4DE;
    position: absolute;
    top: 24.4vw;
    left: 0;
    transform: skewY(17.869321deg);
    z-index: -1;
}

main #sec2 .contentblock,
main #sec3 .contentblock,
main #sec5 .contentblock,
main #sec6 .contentblock,
main #sec7 .contentblock,
main #sec8 .contentblock,
main #sec10 .contentblock    {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
main #sec2 .contentblock    {
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

main #sec2 .contentblock h1  {
    font-weight: 900;
    line-height: 4.37vw;
    order: 2;
    display: inline-block;
    position: relative;
    left: 25.93vw;
    top: -2.6vw;
    z-index: 3;
}

main #sec2 .contentblock picture:has(.sec2_img1)    {
    order: 1;
}

main #sec2 .contentblock picture:has(.sec2_img2)    {
    order: 3;
}

main #sec2 .contentblock .sec2_img1 {
    position: relative;
    order: 1;
    width: 74.27vw;
    left: 9.58vw;
}

main #sec2 .contentblock .sec2_img2 {
    position: relative;
    order: 3;
    width: 78.07vw;
    left: 10.78vw;
    top: -2.6vw;
}

main #sec3  {
    position: relative;
    width: 100%;
    height: 103.8vw;
}

main #sec3:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #F54584;
    position: absolute;
    top: 15.7vw;
    left: 0;
    transform: skewY(17.4deg);
    z-index: -1;
}

main #sec3:after    {
    content: "";
    width: 75vw;
    height: 133.33vw;
    position: absolute;
    right: 0;
    top: -20.93vw;
    background-image: url(../images/sec3_back2.png);
    background-size: contain;
    background-position: right top;
    background-repeat: no-repeat;
}

.webp main #sec3:after    {
    background-image: url(../images/sec3_back2.webp);
}

main #sec3 .contentblock h1,
main #sec3 .contentblock h1 span:not(.fs36)  {
    font-weight: 900;
    line-height: 3.125vw;
    order: 2;
    position: relative;
    display: inline-block;
    margin: 1.3vw auto;
}

main #sec3 .contentblock picture:has(.sec3_img1)    {
    order: 1;
}

main #sec3 .contentblock .sec3_img1 {
    position: relative;
    order: 1;
    width: 82.4vw;
    left: 6.77vw;
    margin-top: -9.8vw;
}

main #sec3 .contentblock .infoflex  {
    display: flex;
    order: 3;
    width: 66.88vw;
    align-self: center;
    gap: 2.34vw;
}

main #sec3 .contentblock .sec3_img2 {
    width: 24.93vw;
}

main #sec4  {
    position: relative;
    width: 100%;
    height: 159.53vw;
}

main #sec4:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #00A7FF;
    position: absolute;
    top: 15.65vw;
    left: 0;
    transform: skewY(-17.4deg);
    z-index: 0;
}

main #sec4 .contentblock .sec4_img1 {
    position: relative;
    width: 80.93vw;
    left: 14.11vw;
    margin-top: -4.5vw;
}

main #sec4 .contentblock .sec4_img2 {
    position: relative;
    width: 64.27vw;
    left: 14.58vw;
    margin-top: -6.92vw;
}

main #sec4 .contentblock .sec4_img3 {
    position: relative;
    width: 65.25vw;
    left: 19.21vw;
    margin-top: 0.3vw;
}

main #sec4 .contentblock .vehicle1 {
    display: block;
    position: absolute;
    width: 20.83vw;
    left: 14.47vw;
    top: 57.86vw;
}

main #sec4 .contentblock .vehicle2 {
    display: block;
    position: absolute;
    width: 18.9vw;
    left: 70.57vw;
    margin-top: -9.875vw;
}

main #sec5  {
    position: relative;
    width: 100%;
    height: 134.84vw;
}

main #sec5:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #F9D41A;
    position: absolute;
    top: 15.65vw;
    left: 0;
    transform: skewY(-17.4deg);
    z-index: 0;
}

main #sec5:after    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-image: url(../images/sec5_bgimg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.webp main #sec5:after  {
    background-image: url(../images/sec5_bgimg.webp);
}

main #sec5 .contentblock picture:has(.sec5_img1)    {
    order: 1;
}

main #sec5 .contentblock .sec5_img1 {
    position: relative;
    width: 89.64vw;
    left: 4.11vw;
    margin-top: -14.53vw;
    order: 1;
}

main #sec5 .contentblock h1  {
    font-weight: 900;
    line-height: 3.125vw;
    position: relative;
    display: inline-block;
    order: 2;
    align-self: center;
    margin-top: 2.34vw;
}

main #sec5 .contentblock h1 span    {
    font-weight: 900;
}

main #sec5 .contentblock .sec5_voices   {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 1.04vw;
    margin-top: 3.9vw;
    position: relative;
    left: 16.4vw;
}

main #sec5 .contentblock .sec5_voices .flex {
    display: flex;
    align-items: center;
    gap: 1.5625vw;
}

main #sec5 .contentblock .sec5_voices .flex:nth-child(2n)   {
    flex-direction: row-reverse;
}

main #sec5 .contentblock .sec5_voices .flex dt img  {
    position: relative;
    height: 5.68vw;
}

main #sec5 .contentblock .sec5_voices .flex:nth-child(4) dt img  {
    top: -0.7vw;
}

main #sec5 .contentblock .sec5_voices .flex:nth-child(1) dt img,
main #sec5 .contentblock .sec5_voices .flex:nth-child(5) dt img,
main #sec5 .contentblock .sec5_voices .flex:nth-child(8) dt img {
    top: -0.4vw;
}

main #sec5 .contentblock .sec5_voices .flex dd  {
    line-height: 133.33%;
    background-color: #fff;
    padding: 1.04vw 2.86vw;
    border-radius: 9999px;
    position: relative;
    border: 3px solid #FF7300;
}

main #sec5 .contentblock .sec5_voices .flex dd:before,
main #sec5 .contentblock .sec5_voices .flex dd:after{
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    left: -0.9vw;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color:  transparent white transparent transparent;
    border-width: 0.5vw 1.04vw 0.5vw 0;
    z-index: 3;
}


main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:before,
main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:after  {
    right: calc(-1vw + 3px);
    left: auto;
    transform: scale(-100%, 100%);
}

main #sec5 .contentblock .sec5_voices .flex dd:before   {
    border-color: transparent #FF7300 transparent transparent;
    left: -1vw;
    z-index: 2;
    zoom: 1.16;
}

main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:before   {
    right:  -1vw;
    z-index: 2;
}

main #sec5 .contentblock .sec5_img2 {
    position: absolute;
    width: 21.66vw;
    left: 62.29vw;
    margin-top: 38.54vw;
}

main #sec5 .contentblock .vehicle2 {
    position: absolute;
    display: block;
    width: 18.9vw;
    top: 71.3vw;
    left: 75.68vw;
}

main #sec5 .contentblock .sec5_img3 {
    position: absolute;
    width: 19.48vw;
    left: 0;
    top: 99vw;
}

main #sec6  {
    position: relative;
    width: 100%;
    height: 130.94vw;
}

main #sec6 .contentblock h1  {
    order: 2;
    font-weight: 900;
    line-height: 100%;
    position: relative;
    display: inline-block;
    margin-top: -4.84vw;
    left: 17.66vw;
}

main #sec6:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #49D4DE;
    position: absolute;
    top: 15.6vw;
    left: 0;
    transform: skewY(17.4deg);
    z-index: 0;
}

main #sec6 .contentblock picture:has(.sec6_img1)    {
    order: 1;
    align-self: flex-end;
}

main #sec6 .contentblock picture:has(.sec6_img2)    {
    order: 3;
}

main #sec6 .contentblock .sec6_img1 {
    order: 1;
    align-self: flex-end;
    position: relative;
    width: 89.64vw;
    right: 0;
    margin-top: -5.41vw;
}

main #sec6 .contentblock .sec6_img2 {
    order: 3;
    position: relative;
    width: 73.9vw;
    left: 16.04vw;
    margin-top: 1.5625vw;
}

main #sec6 .contentblock .vehicle2 {
    position: absolute;
    display: block;
    width: 15.26vw;
    top: 41.28vw;
    left: 66.28vw;
    z-index: 2;
}

main #sec7  {
    position: relative;
    width: 100%;
    height: 190.73vw;
}

main #sec7:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #FFD112;
    position: absolute;
    top: 15.6vw;
    left: 0;
    transform: skewY(-17.4deg);
    z-index: 0;
}

main #sec7:after    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-image: url(../images/sec7_bgimg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.webp main #sec7:after  {
    background-image: url(../images/sec7_bgimg.webp);
}

main #sec7 .contentblock picture:has(.sec7_img1)    {
    order: 1;
}

main #sec7 .contentblock picture:has(.sec7_img2)    {
    order: 3;
}

main #sec7 .contentblock picture:has(.sec7_img3)    {
    order: 3;
}

main #sec7 .contentblock picture:has(.vehicle1)    {
    order: 4;
}

main #sec7 .contentblock .sec7_img1 {
    order: 1;
    position: relative;
    width: 75.05vw;
    left: 9.17vw;
    margin-top: 7.34vw;
}

main #sec7 .contentblock .sec7_img2 {
    order: 2;
    position: relative;
    width: 81.3vw;
    left: 17.08vw;
    margin-top: -11.98vw;
    z-index: 2;
}

main #sec7 .contentblock .sec7_img3 {
    order: 3;
    position: absolute;
    width: 36.875vw;
    right: 0;
    bottom: -32.24vw;
    z-index: 1;
}

main #sec7 .contentblock .vehicle1 {
    order: 4;
    display: block;
    position: absolute;
    width: 20.83vw;
    left: 63.85vw;
    top: 1.93vw;
}

main #sec8  {
    position: relative;
    width: 100%;
    height: 140.625vw;
}

main #sec8:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 50vw);
    background-color: #00AAFF;
    position: absolute;
    top: 15.6vw;
    left: 0;
    transform: skewY(-17.4deg);
    z-index: 0;
}

main #sec8 .contentblock picture:has(.sec8_img1)    {
    order: 1;
}

main #sec8 .contentblock picture:has(.sec8_img2)    {
    order: 3;
}

main #sec8 .contentblock .sec8_img1 {
    order: 1;
    position: relative;
    width: 85.47vw;
    left: 4.01vw;
    margin-top: -3.125vw;
    z-index: 1;
}

main #sec8 .contentblock .sec8_img2 {
    order: 3;
    position: relative;
    width: 57.4vw;
    left: 23.18vw;
    margin-top: -1vw;
}

main #sec8 .contentblock p  {
    order: 2;
    line-height: 200%;
    position: relative;
    left: 16.93vw;
    margin-top: -1vw;
}

main #sec8 .contentblock .vehicle2 {
    display: block;
    position: absolute;
    width: 18.38vw;
    left: 15.47vw;
    top: 46.03vw;
}

main #sec9  {
    position: relative;
    background-size: 100% auto !important;
    width: 100%;
    height: auto;
    padding-bottom: 32.24vw;
}

main #sec9:before    {
    content: "";
    display: block;
    width: 100vw;
    height: calc(100% + 20vw);
    background-image: url(../images/sec9_bgimg.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: polygon(0 0, 100% 32.24vw, 100% 100%, 0 100%);
}

main #sec9:after    {
    content: "";
    display: block;
    width: 100vw;
    height: 80%;
    background-image: linear-gradient(90deg, #f6ce21, #f0b500);
    background-position: center bottom;
    background-repeat: repeat-y;
    background-size: 100% auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
}

main #sec9 .contentblock    {
    position: relative;
    z-index: 2;
}
main #sec9 .contentblock .sec9_img1 {
    order: 1;
    position: relative;
    width: 93.44vw;
    left: 5.83vw;
    margin-top: 5.78vw;
    z-index: 1;
}

main #sec9 .contentblock dl {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 62.9vw;
    left: 18.23vw;
}

main #sec9 .contentblock dl dt,
main #sec9 .contentblock dl dd  {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
main #sec9 .contentblock dl dt {
    margin-bottom:  3.65vw;
    
}

main #sec9 .contentblock dl dt .imgarea img,
main #sec9 .contentblock dl dd .imgarea img {
    width: 100%;
}

main #sec9 .contentblock dl dt > p,
main #sec9 .contentblock dl dd > p  {
    flex: 1;
    border-radius: 0.88vw;
}

main #sec9 .contentblock dl dt  {
    cursor: pointer;
    gap: 1.302vw;
}

main #sec9 .contentblock dl dt .imgarea  {
    display: block;
    width: 12.81vw;
}

main #sec9 .contentblock dl dt .imgarea img {
    margin-top: -1.875vw;
}
main #sec9 .contentblock dl dt > p  {
    background-color: #DE3151;
    line-height: 150%;
    display: flex;
    align-items: center;
    min-height: 7.29vw;
    padding: 2.08vw 2.08vw;
    position: relative;
}

main #sec9 .contentblock dl dt > p:before{
    content: "";
    position: absolute;
    bottom: 0;
    top: 0;
    left: -3.4vw;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color:  transparent #DE3151 transparent transparent;
    border-width: 0.5vw 3.5vw 0.5vw 0;
    z-index: 3;
}

main #sec9 .contentblock dl dt > p .plusbutton    {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: auto;
    right: 2.6vw;
    background-image: url(../images/sec9_minus.png);
    background-size: 1.61vw auto;
    background-position: center center;
    background-repeat: no-repeat;
    width: 1.61vw;
    height: 1.61vw;
}

.webp main #sec9 .contentblock dl dt > p .plusbutton    {
    background-image: url(../images/sec9_minus.webp);
}

main #sec9 .contentblock dl dt > p .plusbutton img    {
    display: block;
    width: 1.61vw;
    height: 1.61vw;
    opacity: 1;
    transition: all 0.2s ease-in;
}

main #sec9 .contentblock dl dt.open > p .plusbutton img    {
    opacity: 0;
}
main #sec9 .contentblock dl dd  {
    flex-direction: row-reverse;
    gap: 4.69vw;
    margin-top: -1.82vw !important;
    opacity: 0 !important;
    transition: opacity 0.5s linear;
    padding-top: 1.82vw !important;
    position: relative;
    top: -1.82vw;
    padding-bottom: 3.28vw;
}

main #sec9 .contentblock dl dt.open + dd    {
    opacity: 1 !important;
}
main #sec9 .contentblock dl dd .imgarea  {
    display: block;
    width: 9.375vw;
}

main #sec9 .contentblock dl dd .imgarea img {
    margin-top: -1.82vw;
}
main #sec9 .contentblock dl dd > p  {
    background-color: #fff;
    position: relative;
    padding: 1.3vw;
    line-height: 191.6%;
}

main #sec9 .contentblock dl dd > p:before{
    content: "";
    position: absolute;
    bottom: auto;
    top: 3.4vw;
    right: -3.4vw;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color:  transparent transparent transparent #fff;
    border-width: 0.5vw 0 0.5vw 3.5vw;
    z-index: 3;
}

main #sec10  {
    position: relative;
    width: 100%;
    height: 60.41vw;
    z-index: 4;
}

main #sec10:before    {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background-color: #182987;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    clip-path: polygon(0 32.24vw, 100% 0, 100% 100%, 0 100%);
}

main #sec10 .contentblock   {
    height: 100%;
}
main #sec10 .contentblock a:has(.sec10_action_button) {
    order: 1;
    display: block;
    position: absolute;
    width: 86.3vw;
    left: 3.33vw;
    bottom: 7.29vw;
    z-index: 1;
    display: block;
    margin-top: 0;
}

main #sec10 .contentblock .sec10_action_button   {
    width: 86.3vw;
}

main #sec10 .contentblock .copyright    {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 7.29vw;
    position: absolute;
    bottom: 0;
    left: 0;
}

@media screen and (max-width: 834px)    {
    
    section    {
        overflow-x: clip;
        overflow-y: visible;
    }

    .pc {
        display: none !important;
    }

    .sp {
        display: block;
    }
    
    .sp_fs12    {
        font-size: 3.05vw;
    }
    .sp_fs14    {
        font-size: 3.625vw;
    }
        
    .sp_fs15    {
        font-size: 3.753vw;
    }
    
    .sp_fs16    {
        font-size: 4vw;
    }
    
    .sp_fs18    {
        font-size: 4.58vw;
    }
    
    .sp_fs22    {
        font-size: 5.6vw;
    }

    .sp_fs24    {
        font-size: 6.11vw;
    }

    .sp_fs32    {
        font-size: 8.14vw;
    }
    
    .sp_fs40    {
        font-size: 10.18vw;
    }
    
    br.sp,.sp.inline {
        display: inline-block;
    }
    
    .sp.flex    {
        display: flex;
    }

    #key    {
        aspect-ratio: auto;
        height: 178.88vw;
        background-image: url(../images/key_back_sp.png);
    }
    
    .webp #key    {
        background-image: url(../images/key_back_sp.webp);
    }

    #key .logo  {
        width: 42.75vw;
        background-image: url(../images/logo_sp.png);
    }
    
    .webp #key .logo  {
        background-image: url(../images/logo_sp.webp);
    }

    #key .keyimg    {
        width: 90.84vw;
        margin-top: 34.6vw;
    }
    
    #key .img1  {
        width: 19.08vw;
        top: 121.88vw;
        right: 12.28vw;
    }
    
    #key .img2  {
        width: 48.35vw;
        bottom: auto;
        top: 141vw;
        left: 30.02vw;
    }

    #key .videolink  {
        width: 38.18vw;
        height: 38.18vw;
        top: 139.95vw;
        left: 5.09vw;
    }
    
    #key .videolink img {
        width: 7.63vw;
    }
    
    main:after  {
        width: 89.82vw;
        top: 1.53vw;
        height: calc(100% - 1.53vw);
    }
    
    main section:not(:first-of-type)    {
        margin-top: -31.3vw;
        margin-bottom: -31.3vw;
    }    
    
    main #sec1 .sec1_img1   {
        width: 96.18vw;
        position: absolute;
        left: 3.81vw;
        top: -9.41vw;
        z-index: 2;
    }
    main #sec1  {
        height: 199vw;
    }
    
    main #sec1:before    {
        top: 15vw;
    }
    
    main #sec1:after    {
        top: -1vw;
    }

    main #sec1 .contentblock    {
        top: 35.11vw;
    }
    
    main #sec2  {
        height: 250.89vw;
    }

    main #sec2:before    {
        top: 15vw;
    }

    main #sec2 .contentblock .sec2_img1_sp  {
        position: relative;
        width: 100%;
        top: -14.25vw;
    }
    
    main #sec3:after    {
        display: none;
    }
    
    main #sec3 .contentblock .sec3_img1 {
        width: 89.82vw;
        left: 7.89vw;
        margin-top: -10.69vw;
    }

    main #sec3  {
        height: 193.62vw;
    }

    main #sec3 .contentblock h1    {
        line-height: 130%;
        margin: 6.36vw auto 4.36vw;
    }

    main #sec3 .contentblock .infoflex  {
        flex-direction: column-reverse;
        width: 89.82vw;
        gap: 2.29vw;
    }
    
    main #sec3 .contentblock p  {
        line-height: 171.43%;
    }
    
    main #sec3 .contentblock .sec3_img2 {
        width: 79.13vw;
    }
    
    main #sec4  {
        height: 341.47vw;
    }

    main #sec4 .contentblock .sec4_img1 {
        width: 95.92vw;
        left: 1.27vw;
        margin-top: 15.52vw;
    }

    main #sec4 .contentblock .sec4_img2 {
        width: 100vw;
        left: 0;
        margin-top: 2.29vw;
    }

    main #sec4 .contentblock .vehicle1 {
        width: 25.44vw;
        margin-top: 0;
        top: 169.72vw;
        left: 6.1vw;
    }

    main #sec4 .contentblock .sec4_img3 {
        width: 100vw;
        left: 0;
        margin-top: 4.33vw;
    }

    main #sec5  {
        height: 347.58vw;
    }

    main #sec5:after  {
        background-image: url(../images/sec5_bgimg_sp.png);
        top: 4vw;
    }

    .webp main #sec5:after  {
        background-image: url(../images/sec5_bgimg_sp.webp);
    }        

    main #sec5 .contentblock h1,
    main #sec5 .contentblock h1 span     {
        text-align: left;
        line-height: 10.18vw;
        margin-top: -19.34vw;
        left: 5.08vw;
        align-self: flex-start;
    }
    
    main #sec5 .contentblock .sec5_img1 {
        width: 100vw;
        left: 0;
        margin-top: -17.3vw;
    }

    main #sec5 .contentblock .sec5_img2 {
        width: 22.39vw;
        left: 70.23vw;
        margin-top: 0;
        top: 46.56vw;
    }
    
    main #sec5 .contentblock .vehicle2 {
        width: 12.62vw;
        left: 81.93vw;
        top: 215vw;
    }
    
    main #sec5 .contentblock .sec5_voices   {
        width: 89.82vw;
        left: 5.08vw;
        gap: 5.08vw;
        margin-top: 5.08vw;
    }
    main #sec5 .contentblock .sec5_voices .flex {
        gap: 5.06vw;
    }

    main #sec5 .contentblock .sec5_voices .flex dt img  {
        height: 13.74vw;
    }
    
    main #sec5 .contentblock .sec5_voices .flex:nth-child(1) dt img,
    main #sec5 .contentblock .sec5_voices .flex:nth-child(5) dt img,
    main #sec5 .contentblock .sec5_voices .flex:nth-child(8) dt img   {
        
    }
    main #sec5 .contentblock .sec5_voices .flex:nth-child(1) dt img {
        height: 12.72vw;
    }

    main #sec5 .contentblock .sec5_voices .flex:nth-child(2) dt img {
        height: 13.68vw;
    }

    main #sec5 .contentblock .sec5_voices .flex:nth-child(3) dt img {
        height: 14.16vw;
    }

    main #sec5 .contentblock .sec5_voices .flex:nth-child(5) dt img {
        height: 14vw;
    }

    main #sec5 .contentblock .sec5_voices .flex:nth-child(6) dt img {
        height: 13.42vw;
    }
    
    main #sec5 .contentblock .sec5_voices .flex:nth-child(7) dt img {
        height: 11.27vw;
    }
    
    main #sec5 .contentblock .sec5_voices .flex:nth-child(8) dt img {
        height: 13.09vw;
    }
    
    main #sec5 .contentblock .sec5_voices .flex dd  {
        border-radius: 3.05vw;
        padding: 2vw 5vw;
        line-height: 157.14%;
        border-width: 1.5px;
    }
    
    main #sec5 .contentblock .sec5_voices .flex dd:before,
    main #sec5 .contentblock .sec5_voices .flex dd:after{
        left: calc(-2.44vw + 0.5px);
        border-width: 1.27vw 2.54vw 1.27vw 0;
    }
    
    
    main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:before,
    main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:after  {
        right: calc(-2.44vw + 0.5px);
        transform: scale(-100%, 100%);
    }
    
    main #sec5 .contentblock .sec5_voices .flex dd:before   {
        border-color: transparent #FF7300 transparent transparent;
        left: -3vw;
        zoom: 1.16;
    }
    
    main #sec5 .contentblock .sec5_voices .flex:nth-child(2n) dd:before   {
        right:  -3vw;
    }
    
    main #sec6  {
        height: 190.2vw;
    }

    main #sec6 .contentblock h1 {
        left: 5.08vw;
        margin-top: 0;
        line-height: 125%;
    }
    
    main #sec6 .contentblock .sec6_img1 {
        width: 89.82vw;
        left: 5.08vw;
        margin-top: -2.03vw;
    }
    
    main #sec6 .contentblock .sec6_img2 {
        width: 100vw;
        left: 0vw;
        margin-top: 2.54vw;
    }
    
    main #sec6 .contentblock .vehicle2 {
        width: 18.21vw;
        left: 76.24vw;
        top: 45.29vw;
    }

    main #sec7  {
        height: 318.32vw;
    }
    
    main #sec7:after    {
        background-image: url(../images/sec7_bgimg_sp.webp);
    }
    
    
    .webp main #sec7:after  {
        background-image: url(../images/sec7_bgimg_sp.webp);
    }
    main #sec7 .contentblock .sec7_img1 {
        width: 93.45vw;
        left: 3.31vw;
        margin-top: 51.4vw;
    }
    
    main #sec7 .contentblock .sec7_img2 {
        width: 100vw;
        left: 0vw;
        margin-top: -15.27vw;
    }
    
    main #sec7 .contentblock .sec7_img3 {
        width: 54.71vw;
        left: 45.29vw;
        bottom: -38.42vw;
    }
    
    main #sec7 .contentblock .vehicle1 {
        width: 19.08vw;
        left: 5.85vw;
        top: 106.87vw;
    }
    
    main #sec8  {
        height: 264.65vw;
    }

    main #sec8 .contentblock .sec8_img1 {
        width: 94.91vw;
        left: 5.09vw;
        margin-top: 7.63vw;
    }

    main #sec8 .contentblock p  {
        width: 89.82vw;
        left: 5.08vw;
        line-height: 157.12%;
        margin-top: 6.87vw;
    }
    
    main #sec8 .contentblock .sec8_img2 {
        width: 92.37vw;
        left: 3.68vw;
        margin-top: 1.53vw;
    }
    
    main #sec8 .contentblock .vehicle2 {
        width: 22.39vw;
        left: 5.09vw;
        top: 91.09vw;
    }
    
    main #sec9 .contentblock .sec9_img1 {
        width: 94.91vw;
        left: 5.09vw;
        margin-top: -10.68vw;
    }

    main #sec9 .contentblock dl {
        width: 89.82vw;
        left: 5.08vw;
        margin-top: 3.05vw;
    }

    main #sec9 .contentblock dl dt  {
        gap: 2.04vw;
    }
    
    main #sec9 .contentblock dl dt .imgarea {
        width: 18.26vw;
    }

    main #sec9 .contentblock dl dt > p  {
        padding: 2.24vw 3.31vw;
        line-height: 116.66%;
        min-height: 10.43vw;
    }
    
    main #sec9 .contentblock dl dd  {
        gap: 6.62vw;
        margin-top: -5.85vw !important;
        padding-top: 5.85vw !important;
        padding-bottom: 4.77vw;
    }

    main #sec9 .contentblock dl dd .imgarea {
        width: 13.38vw;
    }
    
    main #sec9 .contentblock dl dd .imgarea img {
        margin-top: -5.85vw;
    }
    
    main #sec9 .contentblock dl dd > p  {
        padding: 1.4vw 1.93vw 1.2vw;
        line-height: 157.12%;
    }
    
    main #sec9 .contentblock dl dt > p:before{
        left: -5vw;
        border-width: 1.04vw 5.1vw 1.04vw 0;
    }

    main #sec9 .contentblock dl dd > p:before{
        top: 5vw;
        right: -5vw;
        border-width: 1.04vw 0 1.04vw 5.1vw;
    }
    
    main #sec9 .contentblock dl dt    {
        margin-bottom: 4.58vw;
    }
    
    main #sec9 .contentblock dl dt > p .plusbutton,
    main #sec9 .contentblock dl dt > p .plusbutton img    {
        width: 2.31vw;
        height: 2.31vw;
        background-size: 2.31vw auto;
    }
    
    main #sec10  {
        height: 113.99vw;
    }

    main #sec10 .contentblock a:has(.sec10_action_button)   {
        width: 100vw;
        left: 0;
        bottom: 16.28vw;
    }

    main #sec10 .contentblock .sec10_action_button  {
        width: 100vw;
    }
    
    main #sec10 .contentblock .copyright    {
        height: 13.74vw;
        margin-bottom: 2.54vw;
    }
}