a {
transition: 0.3s;
}
a:hover {
opacity: 0.5;
}
.media_break {
display: none;
}
.media_break.not {
display: block;
}
@media screen and (max-width:1024px) {
.media_break.not {
display: none;
}
}
@media screen and (max-width:1024px) {
.media_break {
display: block;
}
}
.link_product_page {
display: block;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 1.5972222222vw 3.6805555556vw;
gap: 0.6944444444vw;
text-decoration: none;
width: 21.875vw;
height: 4.7916666667vw;
}
@media screen and (max-width:1024px) {
.link_product_page {
width: 74.1176470588vw;
height: 16.2352941176vw;
padding: 5.4117647059vw 12.4705882353vw;
gap: 2.3529411765vw;
}
}
.link_product_page span {
font-weight: 400;
font-size: 1.5277777778vw;
}
@media screen and (max-width:1024px) {
.link_product_page span {
font-size: clamp(16px, 5.1764705882vw, 5.1764705882vw);
}
}
.link_product_page span.polygon {
width: 1.3194444444vw;
height: 1.5972222222vw;
-webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
@media screen and (max-width:1024px) {
.link_product_page span.polygon {
width: 4.4705882353vw;
height: 5.4117647059vw;
}
}
#mv-area {
width: 100%;
height: 45.6944444444vw;
margin-top: 120px;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-marketing/mv-bg-pc.png);
background-size: cover;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
gap: 4.5138888889vw;
}
@media screen and (max-width:1024px) {
#mv-area {
height: 163.2941176471vw;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-marketing/mv-bg-sp.png);
margin-top: 75px;
gap: 8.7058823529vw;
position: relative;
}
#mv-area::after {
content: "";
width: 100%;
height: 163.2941176471vw;
background: #000;
position: absolute;
opacity: 0.6;
z-index: 0;
}
}
#mv-area #mv-inner-header {
z-index: 1;
display: flex;
flex-direction: column;
color: #fff;
margin-top: 6.0416666667vw;
margin-left: 6.9444444444vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-header {
margin-top: 9.1764705882vw;
margin-left: initial;
align-items: center;
}
}
#mv-area #mv-inner-header .mv-description {
display: flex;
flex-direction: column;
gap: 0.6944444444vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-header .mv-description {
gap: 2.3529411765vw;
padding: 4.7058823529vw 0;
align-items: center;
}
}
#mv-area #mv-inner-header .mv-description .mv-description-large {
font-weight: 700;
font-size: 1.25vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-header .mv-description .mv-description-large {
font-size: clamp(16px, 4.9411764706vw, 4.9411764706vw);
}
}
#mv-area #mv-inner-header .mv-description .mv-description-small {
font-size: 1.25vw;
letter-spacing: 0.3125vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-header .mv-description .mv-description-small {
font-size: clamp(16px, 4vw, 4vw);
letter-spacing: 1.8588235294vw;
}
}
#mv-area #mv-inner-header .mv-description .mv-service-name {
padding: 2.0833333333vw 0;
font-size: 4.1666666667vw;
line-height: 5.5625vw;
font-weight: 600;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-header .mv-description .mv-service-name {
padding: 7.0588235294vw 0;
line-height: 18.7741176471vw;
font-size: clamp(16px, 16.4705882353vw, 16.4705882353vw);
text-align: center;
font-weight: normal;
}
}
#mv-area #mv-inner-link {
margin-left: 6.25vw;
display: flex;
align-items: center;
gap: 1.7361111111vw;
width: 45.4861111111vw;
height: 9.5138888889vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-link {
z-index: 1;
flex-direction: column;
gap: 5.8823529412vw;
padding: 8vw 0;
margin-left: initial;
width: 100%;
height: auto;
align-items: center;
}
}
#mv-area #mv-inner-link .link_product_page {
border: 0.1388888889vw solid #000;
border-radius: 3.4722222222vw;
background: #fff;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-link .link_product_page {
border: 0.4705882353vw solid #000;
border-radius: 11.7647058824vw;
}
}
#mv-area #mv-inner-link .link_product_page span {
color: #000;
}
#mv-area #mv-inner-link .link_product_page span.polygon {
background: #000;
}
h3.gradient {
display: inline-block;
font-size: 2.0833333333vw;
font-family: Noto Sans JP;
font-weight: 700;
text-align: center;
background: linear-gradient(90deg, #000000 0%, #0450C2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: normal;
margin-top: 3.8541666667vw;
margin-bottom: 1.5277777778vw;
}
@media screen and (max-width:1024px) {
h3.gradient {
font-size: clamp(16px, 7.5294117647vw, 7.5294117647vw);
line-height: 9.4117647059vw;
margin: initial;
padding-top: 7.0588235294vw;
}
}
h3.gradient:after {
content: "";
display: block;
height: 1px;
width: 85.6944444444vw;
background: #000;
margin: 0 auto;
margin-top: 1.1805555556vw;
margin-bottom: 1.1805555556vw;
}
@media screen and (max-width:1024px) {
h3.gradient:after {
margin-top: 7.0588235294vw;
margin-bottom: 4.9411764706vw;
width: 84.7058823529vw;
}
}
.about-japan-ai-marketing {
background: #464646;
padding: 1.9097222222vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing {
padding: 2.1176470588vw;
}
}
.about-japan-ai-marketing .about-inner {
background: #fff;
border-radius: 1.7361111111vw;
display: flex;
flex-direction: column;
align-items: center;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner {
border-radius: 5.8823529412vw;
}
}
.about-japan-ai-marketing .about-inner .description {
margin-bottom: 0.3472222222vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .description {
margin: 2.3529411765vw 3.2941176471vw 4.7058823529vw;
}
}
.about-japan-ai-marketing .about-inner .description p {
text-align: center;
line-height: 1.8097222222vw;
font-size: 1.1111111111vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .description p {
line-height: 5.6611764706vw;
font-size: clamp(16px, 4vw, 4vw);
}
}
.about-japan-ai-marketing .about-inner .features {
display: flex;
justify-content: space-between;
gap: 0.1388888889vw;
width: 76.3888888889vw;
margin-bottom: 3.53125vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features {
flex-direction: column;
gap: 2.3529411765vw;
width: initial;
margin-bottom: 16.2352941176vw;
margin-top: 7.0588235294vw;
}
}
.about-japan-ai-marketing .about-inner .features .feature {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.1111111111vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features .feature {
gap: 3.7647058824vw;
}
}
.about-japan-ai-marketing .about-inner .features .feature .number {
font-size: 1.3888888889vw;
font-weight: 700;
width: 2.7777777778vw;
height: 2.7777777778vw;
color: #fff;
background: linear-gradient(124.99deg, #000000 37.39%, #0450C2 100%);
display: flex;
justify-content: center;
align-items: center;
border-radius: 1.0416666667vw;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features .feature .number {
width: 14.1176470588vw;
height: 14.1176470588vw;
font-size: clamp(16px, 9.4117647059vw, 9.4117647059vw);
border-radius: 3.5294117647vw;
}
}
.about-japan-ai-marketing .about-inner .features .feature .thumb {
width: 20.8854166667vw;
height: 12.5vw;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features .feature .thumb {
width: 84.7058823529vw;
height: 59.2941176471vw;
}
}
.about-japan-ai-marketing .about-inner .features .feature .thumb img {
height: 100%;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features .feature .explanation {
margin-bottom: 14.1176470588vw;
}
}
.about-japan-ai-marketing .about-inner .features .feature .explanation p {
font-size: 0.9722222222vw;
line-height: 1.4409722222vw;
text-align: center;
}
@media screen and (max-width:1024px) {
.about-japan-ai-marketing .about-inner .features .feature .explanation p {
font-size: clamp(16px, 5.1764705882vw, 5.1764705882vw);
line-height: 7.4964705882vw;
}
}
.features-japan-ai-marketing .features-inner {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 9.7222222222vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner {
margin-bottom: 13.7176470588vw;
}
}
.features-japan-ai-marketing .features-inner .features-list {
display: flex;
flex-direction: column;
gap: 5.5555555556vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list {
gap: 8.1178823529vw;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5.4166666667vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set {
flex-direction: column;
gap: 1.1764705882vw;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set:nth-child(even) {
flex-direction: row-reverse;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set:nth-child(even) {
flex-direction: column;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set .thumb {
display: flex;
justify-content: flex-start;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set .thumb {
justify-content: center;
width: 89.4117647059vw;
height: 70.6470588235vw;
padding: 2.3529411765vw 0 0 0;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set .thumb .thumb-inner {
width: 17.3611111111vw;
padding: 0.6944444444vw;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set .thumb .thumb-inner {
width: 89.4117647059vw;
height: 66.3529411765vw;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set:nth-child(even) .thumb {
justify-content: flex-end;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set:nth-child(even) .thumb {
justify-content: center;
padding-left: inherit;
padding-right: inherit;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set .description {
height: 13.4722222222vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set .description {
width: initial;
height: auto;
margin: 0 5.2941176471vw;
text-align: center;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set .description h4 {
margin-bottom: 2.7777777778vw;
font-size: 1.7361111111vw;
line-height: 3.41875vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set .description h4 {
margin-bottom: 5.1764705882vw;
font-size: clamp(16px, 6.3529411765vw, 6.3529411765vw);
line-height: 9.2vw;
}
}
.features-japan-ai-marketing .features-inner .features-list .feature-set .description p {
font-size: 1.25vw;
line-height: 2.0972222222vw;
}
@media screen and (max-width:1024px) {
.features-japan-ai-marketing .features-inner .features-list .feature-set .description p {
font-size: clamp(16px, 5.1764705882vw, 5.1764705882vw);
line-height: 7.4964705882vw;
}
}
.inquiry-area {
width: 100%;
background: #404040;
display: flex;
flex-direction: column;
align-items: center;
}
.inquiry-area .inquiry-header {
color: #fff;
font-size: 2.5vw;
font-weight: 700;
line-height: 3.6201388889vw;
margin-top: 3.4722222222vw;
font-family: Noto Sans JP;
}
@media screen and (max-width:1024px) {
.inquiry-area .inquiry-header {
font-size: clamp(16px, 7.5294117647vw, 7.5294117647vw);
line-height: 10.9035294118vw;
margin-top: 14.1176470588vw;
text-align: center;
}
}
.inquiry-area .link_product_page {
margin: 3.4722222222vw 0 4.8611111111vw;
background: #fff;
border: 2px solid #000;
color: #000;
font-size: 1.5277777778vw;
line-height: 2.2125vw;
border-radius: 3.4722222222vw;
}
@media screen and (max-width:1024px) {
.inquiry-area .link_product_page {
margin: 11.7647058824vw 0 16.4705882353vw;
border-radius: 11.7647058824vw;
font-size: clamp(16px, 5.1764705882vw, 5.1764705882vw);
line-height: 7.4964705882vw;
}
}
.inquiry-area .link_product_page .polygon {
background: #000;
}
.faq {
margin-bottom: 5.5555555556vw;
}
@media screen and (max-width:1024px) {
.faq {
margin-bottom: 9.8823529412vw;
}
}
.faq .faq-inner {
display: flex;
flex-direction: column;
align-items: center;
}
.faq .faq-inner .faq-list {
display: flex;
flex-direction: column;
gap: 1.0416666667vw;
}
@media screen and (max-width:1024px) {
.faq .faq-inner .faq-list {
gap: 4.7058823529vw;
}
}
.faq .faq-inner .faq-list .faq-set {
background: #F9F9F9;
width: 68.6111111111vw;
padding: 2.0833333333vw 2.7777777778vw;
}
@media screen and (max-width:1024px) {
.faq .faq-inner .faq-list .faq-set {
width: initial;
margin: 0 5.2941176471vw;
padding: 5.6470588235vw 3.5294117647vw;
display: flex;
flex-direction: column;
gap: 4.7058823529vw;
}
}
.faq .faq-inner .faq-list .faq-set .question {
font-size: 1.5277777778vw;
line-height: 3.0166666667vw;
font-weight: 700;
margin-bottom: 1.3888888889vw;
}
@media screen and (max-width:1024px) {
.faq .faq-inner .faq-list .faq-set .question {
font-size: clamp(16px, 4.7058823529vw, 4.7058823529vw);
line-height: 6.8141176471vw;
margin-bottom: unset;
}
}
.faq .faq-inner .faq-list .faq-set .answer {
font-size: 1.25vw;
line-height: 1.8097222222vw;
}
@media screen and (max-width:1024px) {
.faq .faq-inner .faq-list .faq-set .answer {
font-size: clamp(16px, 3.7647058824vw, 3.7647058824vw);
line-height: 5.4517647059vw;
}
}
#download-area {
width: 100%;
background: #000;
}
#download-area .content-header {
padding: 4vw;
color: #fff;
}
#download-area .content-header h3 {
font-weight: 700;
font-size: 2vw;
line-height: 2.8666666667vw;
margin-bottom: 0.8vw;
color: #fff;
text-align: center;
}
@media screen and (max-width:1024px) {
#download-area .content-header h3 {
font-size: 7.6923076923vw;
line-height: 11.0256410256vw;
margin-bottom: 3.0769230769vw;
color: #fff;
}
}
@media screen and (max-width:1024px) {
#download-area .content-header {
padding: 15.3846153846vw 0;
}
}
#download-area .spacer {
padding-bottom: 6.6666666667vw;
height: 100px;
}
@media screen and (max-width:1024px) {
#download-area .spacer {
padding-bottom: 12.8205128205vw;
}
}
#download-area .download-document {
display: flex;
width: 74vw;
margin: 0 auto;
justify-content: center;
}
@media screen and (max-width:1024px) {
#download-area .download-document {
display: block;
width: 100%;
}
}
#download-area .download-document .about {
flex: 1;
color: #fff;
display: flex;
align-items: center;
flex-direction: column;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about {
display: block;
width: 100%;
margin-bottom: 15.3846153846vw;
}
}
#download-area .download-document .about .about-header {
margin-left: 3.2vw;
font-size: 2vw;
line-height: 3.0666666667vw;
text-align: center;
margin-bottom: 4.7333333333vw;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about .about-header {
margin-left: 0;
font-size: 7.6923076923vw;
line-height: 11.7948717949vw;
width: 100%;
margin-bottom: 18.2051282051vw;
}
}
#download-area .download-document .about .about-images {
margin-left: 3.2vw;
width: 29.2vw;
height: 21.1333333333vw;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-marketing/about.png);
background-size: cover;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about .about-images {
margin-left: 0;
width: 94.8717948718vw;
height: 68.6641025641vw;
margin: 0 auto;
}
}
#download-area .download-document .about .about-for {
width: 29.2vw;
margin-left: 3.2666666667vw;
margin-top: 2.5333333333vw;
margin-bottom: 1vw;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about .about-for {
width: 90.7692307692vw;
margin: 9.7435897436vw auto 3.8461538462vw;
}
}
#download-area .download-document .about .about-for .about-for-header {
font-weight: 700;
font-size: 1.3333333333vw;
line-height: 3.0666666667vw;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about .about-for .about-for-header {
font-size: 5.1282051282vw;
line-height: 11.7948717949vw;
margin-bottom: 3.8461538462vw;
}
}
#download-area .download-document .about .about-for .about-list {
display: flex;
gap: 0.6666666667vw;
font-size: 1.0666666667vw;
line-height: 3.0666666667vw;
font-weight: 700;
}
@media screen and (max-width:1024px) {
#download-area .download-document .about .about-for .about-list {
gap: 2.5641025641vw;
font-size: 4.1025641026vw;
line-height: 11.7948717949vw;
}
}
#download-area .download-document .form-area {
flex: 1;
}