/* OVER THE SUN × Drive Onコラボ */

@media only screen and (min-width:768px){
main .over-the-sun_driveon .--sp{display: none!important;}
main .over-the-sun_driveon .--wrapper{margin: 0 auto; max-width: 1440px; position: relative;}
main .over-the-sun_driveon .--inner{position: relative;}
main .over-the-sun_driveon #kv .title,
main .over-the-sun_driveon #kv .mv,
main .over-the-sun_driveon #kv .logo,
main .over-the-sun_driveon #kv .subtitle,
main .over-the-sun_driveon #kv .lead,
main .over-the-sun_driveon #kv .date,
main .over-the-sun_driveon #kv .note{position: absolute;}
main .over-the-sun_driveon #kv .title{width: 44.861%; top: 3.464%; left: 27.361%;}
main .over-the-sun_driveon #kv .mv{width: 68.472%; top: 9.052%; left: 15.694%;}
main .over-the-sun_driveon #kv .logo{width: 18.888%; top: 45.032%; left: 40.555%;}
main .over-the-sun_driveon #kv .subtitle{width: 51.770%; top: 53.202%; left: 24.097%;}
main .over-the-sun_driveon #kv .lead{width: 100%; top: 63.039%; left: 0%; text-align: center; font-size: clamp(13px, 1.2857vw, 18px); font-weight: bold; line-height: 1.8;}
main .over-the-sun_driveon #kv .date{width: 38.090%; top: 91.241%; left: 31.25%;}
main .over-the-sun_driveon #kv .note{width: 100%; top: 95.130%; left: 0%; text-align: center;  font-size: clamp(10px, 0.8571vw, 12px);}

main .over-the-sun_driveon #personality .--wrapper{background: #fff; /*background: #fffcd6;*/ aspect-ratio: 1440/360; display: flex; align-items: center;}
main .over-the-sun_driveon #personality ul{display: flex; flex-wrap: wrap; list-style: none; padding: 40px 0; margin: 0 auto; gap: calc(5.482% - 30px); max-width: 912px; justify-content:center;}
main .over-the-sun_driveon #personality ul li{display: flex; width: calc(50% - 25px); box-sizing: border-box; padding: 15px;}
main .over-the-sun_driveon #personality ul li .img{flex-shrink: 0; margin-right: 20px; width: 106px;}
main .over-the-sun_driveon #personality ul li .img img{max-width: 100%; height: auto; display: block;}
main .over-the-sun_driveon #personality ul li .text{flex-grow: 1;}
main .over-the-sun_driveon #personality ul li .text h3{font-size: clamp(14px, 1.2857vw, 18px); font-weight: bold; margin-bottom: 0.7em;}
main .over-the-sun_driveon #personality ul li .text p{font-size: clamp(12px, 1.07145vw, 14px); line-height: 1.6;}

main .over-the-sun_driveon #watch h2{max-width:940px; margin:0 auto; padding: 50px 20px 40px 20px;}
main .over-the-sun_driveon #watch ul{display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0 0 70px 0; margin: 0 auto; max-width: 1000px; gap: 9%; background: url(../img/watch_line.webp) 0 1%/100% auto no-repeat;}
main .over-the-sun_driveon #watch ul li{width: calc((100% - (9% * 2)) / 3); box-sizing: border-box; text-align: center; padding: 0 15px;}
main .over-the-sun_driveon #watch ul li h3 img{width:87.6%; height: auto;}
main .over-the-sun_driveon #watch ul li h3 span{padding: 1em 0 0.5em 0; display: block; font-size: clamp(14px, 1.4286vw, 20px); font-weight: bold;}

main .over-the-sun_driveon #intro .--wrapper{background: #fffcd6; display: flex; align-items: center;}
main .over-the-sun_driveon #intro .--wrapper:before{background: #da0915; position: absolute; top:0; right:0; content:''; width:50%; height: 100%;}
main .over-the-sun_driveon #intro ul{display: flex; flex-wrap: wrap; list-style: none; padding: 20px 0; margin: 0 auto; gap: calc(5.482% - 30px); max-width: 1000px; justify-content: center; position: relative; z-index: +1;}
main .over-the-sun_driveon #intro ul li{width: calc(50% - 25px); box-sizing: border-box; padding: 15px; display: flex; flex-direction: column; align-items: center;}
main .over-the-sun_driveon #intro ul li h3{width: 100%; font-size: clamp(13px, 1.2857vw, 18px); margin-top: 0; margin-bottom: 15px; padding: 0 5px;box-sizing: border-box;}
main .over-the-sun_driveon #intro ul li h3 strong{font-size: clamp(22px, 1.8571vw, 26px); display: block;}
main .over-the-sun_driveon #intro ul li .box{display: flex; align-items: flex-start; width: 100%;}
main .over-the-sun_driveon #intro ul li .box .img{flex-shrink: 0; margin-right: 20px; width: 35%; margin-top: 0; margin-bottom: 0;}
main .over-the-sun_driveon #intro ul li .box .img img{max-width: 100%; height: auto; display: block;}
main .over-the-sun_driveon #intro ul li .box .text{flex-grow: 1;}
main .over-the-sun_driveon #intro ul li .box .text p{font-size: clamp(12px, 1.07145vw, 14px); line-height: 1.6; font-weight: bold;}
main .over-the-sun_driveon #intro ul li .box .text p.note{color:#717171; padding-top: 1em;}
/*main .over-the-sun_driveon #intro ul li:nth-child(1) h3{color:#da0915;}*/
main .over-the-sun_driveon #intro ul li:nth-last-child(1) h3,
main .over-the-sun_driveon #intro ul li:nth-last-child(1) p{color:#fff;}

main .over-the-sun_driveon .driveonTopCampaign{padding: 80px 0;}
main .over-the-sun_driveon .driveonTopCampaign::before{display: none;}
main .over-the-sun_driveon .driveonTopCampaign__button{margin-top: 8px;}

}

@media only screen and (max-width:767px){
main .over-the-sun_driveon .--pc{display: none!important;}
main .over-the-sun_driveon .--wrapper{position: relative;}
main .over-the-sun_driveon .--inner{position: relative;}
main .over-the-sun_driveon #kv img{width: 100%;}
main .over-the-sun_driveon #kv .title,
main .over-the-sun_driveon #kv .mv,
main .over-the-sun_driveon #kv .logo,
main .over-the-sun_driveon #kv .subtitle,
main .over-the-sun_driveon #kv .lead,
main .over-the-sun_driveon #kv .date,
main .over-the-sun_driveon #kv .note{position: absolute;}
main .over-the-sun_driveon #kv .title{width: 90.966%; top: 4.117%; left: 4.834%;}
main .over-the-sun_driveon #kv .mv{width: 100%; top: 9.117%; left: 0%;}
main .over-the-sun_driveon #kv .logo{width: 50.636%; top: 36.176%; left: 24.936%;}
main .over-the-sun_driveon #kv .subtitle{width: 87.786%; top: 45.588%; left: 6.106%;}
main .over-the-sun_driveon #kv .lead{width: 100%; top: 53.921%; left: 0%; text-align: center; font-size: clamp(14px, 3.7333vw, 18px); font-weight: bold; line-height: 1.8;}
main .over-the-sun_driveon #kv .date{width: 86.979%; top: 90.588%; left: 7.379%;}
main .over-the-sun_driveon #kv .note{width: 100%; top: 94.803%; left: 0%; text-align: center;  font-size: clamp(10px, 2.6667vw, 14px);}

main .over-the-sun_driveon #personality .--wrapper{background: #fff; /*background: #fffcd6;*/ display: flex; align-items: center;}
main .over-the-sun_driveon #personality ul{display: flex; flex-wrap: wrap; list-style: none; padding: 20px 0 30px 0; margin: 0;}
main .over-the-sun_driveon #personality ul li{display: flex; width: 100%; box-sizing: border-box; padding: 20px 5%;}
main .over-the-sun_driveon #personality ul li .img{flex-shrink: 0; margin-right: 20px; width: 106px;}
main .over-the-sun_driveon #personality ul li .img img{max-width: 100%; height: auto; display: block;}
main .over-the-sun_driveon #personality ul li .text{flex-grow: 1;}
main .over-the-sun_driveon #personality ul li .text h3{font-size: clamp(14px, 4.2667vw, 16px); font-weight: bold; margin-bottom: 0.7em;}
main .over-the-sun_driveon #personality ul li .text p{font-size: clamp(10px, 3.2vw, 12px); line-height: 1.6;}

main .over-the-sun_driveon #watch h2{margin:0 auto; padding: 20px 20px 40px 20px;}
main .over-the-sun_driveon #watch ul{display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0 0 60px 0; margin: 0 auto;}
main .over-the-sun_driveon #watch ul li{width: 73%; box-sizing: border-box; text-align: center; background: url(../img/watch_allow.webp) 50% calc(100% - 30px)/25% auto no-repeat; padding-bottom: calc(60px + 4%);}
main .over-the-sun_driveon #watch ul li:nth-last-child(1){background: none; padding-bottom: 0;}
main .over-the-sun_driveon #watch ul li h3 img{width:53.333%; height: auto; margin: 0 auto;}
main .over-the-sun_driveon #watch ul li h3 span{padding: 1em 0 0 0; display: block; font-size: clamp(16px, 5.3333vw, 20px); font-weight: bold;}

main .over-the-sun_driveon #intro .--wrapper{display: flex; align-items: center;}
main .over-the-sun_driveon #intro ul{display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 auto; gap: calc(5.482% - 30px); max-width: 1000px; justify-content: center; position: relative; z-index: +1;}
main .over-the-sun_driveon #intro ul li{width: 100%; box-sizing: border-box; padding: 25px 5%; display: flex; flex-direction: column; align-items: center;}
main .over-the-sun_driveon #intro ul li h3{width: 100%; font-size: clamp(13px, 4.2667vw, 16px); margin-top: 0; margin-bottom: 15px; padding: 0 5px;box-sizing: border-box;}
main .over-the-sun_driveon #intro ul li h3 strong{font-size: clamp(20px, 6.4vw, 24px); display: block;}
main .over-the-sun_driveon #intro ul li .box{display: flex; align-items: flex-start; width: 100%;}
main .over-the-sun_driveon #intro ul li .box .img{flex-shrink: 0; margin-right: 20px; width: 35%; max-width: 160px; margin-top: 0; margin-bottom: 0;}
main .over-the-sun_driveon #intro ul li .box .img img{max-width: 100%; height: auto; display: block;}
main .over-the-sun_driveon #intro ul li .box .text{flex-grow: 1;}
main .over-the-sun_driveon #intro ul li .box .text p{font-size: clamp(10px, 3.2vw, 12px); line-height: 1.6; font-weight: bold;}
main .over-the-sun_driveon #intro ul li .box .text p.note{color:#717171; padding-top: 1em;}
main .over-the-sun_driveon #intro ul li:nth-last-child(1) h3,
main .over-the-sun_driveon #intro ul li:nth-last-child(1) p{color:#fff;}
main .over-the-sun_driveon #intro ul li:nth-child(1) h3{color:#da0915;}
main .over-the-sun_driveon #intro ul li:nth-child(1){background: #fffcd6;}
main .over-the-sun_driveon #intro ul li:nth-child(2){background: #da0915;}

main .over-the-sun_driveon .driveonTopCampaign{}
main .over-the-sun_driveon .driveonTopCampaign::before{display: none;}
main .over-the-sun_driveon .driveonTopCampaign__button{margin-top: 8px;}

}