a {
transition: 0.3s;
}
a:hover {
opacity: 0.5;
}
.link_product_page {
display: block;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 0.6666666667vw;
gap: 0.6666666667vw;
text-decoration: none;
width: 13.3333333333vw;
height: 3.3333333333vw;
font-size: 0.9333333333vw;
}
@media screen and (max-width:1024px) {
.link_product_page {
width: 51.2820512821vw;
height: 12.8205128205vw;
font-size: 3.5897435897vw;
padding: 2.5641025641vw;
gap: 2.5641025641vw;
}
}
.link_product_page span {
font-weight: 700;
font-size: 0.9333333333vw;
line-height: 1.3333333333vw;
}
@media screen and (max-width:1024px) {
.link_product_page span {
font-size: 3.5897435897vw;
}
}
.link_product_page span.polygon {
width: 0.7333333333vw;
height: 0.8666666667vw;
-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: 2.8205128205vw;
height: 3.3333333333vw;
}
}
#mv-area {
width: 100%;
height: 46.6666666667vw;
margin-top: 100px;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-chat/mv-bg-pc.png);
background-size: cover;
position: relative;
}
@media screen and (max-width:1024px) {
#mv-area {
height: 179.4871794872vw;
background-position: center center;
margin-top: 80px;
}
}
#mv-area #mv-inner-area {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.6666666667vw;
position: absolute;
width: 60vw;
height: 34.4666666667vw;
left: 18.6666666667vw;
top: 5.2666666667vw;
color: #fff;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area {
width: 94.8717948718vw;
height: auto;
position: inherit;
left: inherit;
align-items: center;
margin: 0 auto;
}
}
#mv-area #mv-inner-area #mv-inner-header {
font-weight: 700;
font-size: 3.3333333333vw;
line-height: 5.1333333333vw;
}
#mv-area #mv-inner-area #mv-inner-header .media_break {
display: none;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area #mv-inner-header {
font-size: 7.6923076923vw;
line-height: 12.8205128205vw;
text-align: center;
display: block;
}
#mv-area #mv-inner-area #mv-inner-header .media_break {
display: inline;
}
}
#mv-area #mv-inner-area #mv-inner-icons {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 2vw 0px 1.3333333333vw;
gap: 1.3333333333vw;
}
#mv-area #mv-inner-area #mv-inner-icons img {
width: 8.3333333333vw;
height: 8.3333333333vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area #mv-inner-icons {
padding: 5.1282051282vw 0;
gap: 2.5641025641vw;
width: 100%;
}
#mv-area #mv-inner-area #mv-inner-icons img {
width: 100%;
height: 100%;
}
}
#mv-area #mv-inner-area #mv-inner-discription {
font-size: 1.2vw;
line-height: 2.2666666667vw;
font-weight: 400;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area #mv-inner-discription {
font-size: 4.1025641026vw;
line-height: 6.6666666667vw;
text-align: center;
}
}
#mv-area #mv-inner-area #mv-inner-link {
display: flex;
align-items: flex-start;
padding: 2.6666666667vw 0px 0px;
gap: 1.3333333333vw;
width: 28vw;
height: 6vw;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area #mv-inner-link {
flex-direction: column;
gap: 5.1282051282vw;
padding-top: 5.1282051282vw;
width: 100%;
height: auto;
align-items: center;
}
}
#mv-area #mv-inner-area #mv-inner-link .link_product_page {
border: 1px solid #e6b1ff;
}
@media screen and (max-width:1024px) {
#mv-area #mv-inner-area #mv-inner-link .link_product_page {
border: 0.5128205128vw solid #e6b1ff;
}
}
#mv-area #mv-inner-area #mv-inner-link .link_product_page span {
color: #e6b1ff;
}
#mv-area #mv-inner-area #mv-inner-link .link_product_page span.polygon {
background: #e6b1ff;
}
#mv-area #mv-image-back {
position: absolute;
width: 37.2666666667vw;
height: 21.5333333333vw;
left: 50.6666666667vw;
top: 17.6vw;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-chat/pc/imagemac.png);
background-size: cover;
background-repeat: no-repeat;
}
@media screen and (max-width:1024px) {
#mv-area #mv-image-back {
top: 144.1025641026vw;
width: 100%;
height: 57.6923076923vw;
left: inherit;
}
}
#mv-area #mv-image-back #mv-image-front {
position: absolute;
width: 28.3333333333vw;
height: 17.8666666667vw;
left: 12%;
top: 5.7%;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-chat/pc/mask.svg);
background-size: cover;
}
@media screen and (max-width:1024px) {
#mv-area #mv-image-back #mv-image-front {
width: 76.1051282051vw;
height: 48.0205128205vw;
top: 5.5%;
}
}
.content-wide {
width: 100%;
height: 60.1333333333vw;
background-image: url(//mkt-corp.japan-ai.co.jp/wp/wp-content/themes/japan_ai/images/page-chat/mv-bg-pc.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1333333333vw;
}
@media screen and (max-width:1024px) {
.content-wide {
height: 551.5384615385vw;
}
}
.content-wide .content-header {
width: 97.8666666667vw;
padding: 4vw 0 2.6666666667vw 0;
color: #fff;
}
@media screen and (max-width:1024px) {
.content-wide .content-header {
width: 94.8717948718vw;
padding: 15.3846153846vw 0 10.2564102564vw 0;
}
}
.content-wide .content-header .line {
border: 0.2vw solid #fff;
}
@media screen and (max-width:1024px) {
.content-wide .content-header .line {
border: 0.7692307692vw solid #fff;
}
}
.content-wide .content-main {
width: 74vw;
height: 36vw;
display: flex;
flex-wrap: wrap;
gap: 1.3333333333vw;
}
@media screen and (max-width:1024px) {
.content-wide .content-main {
width: 95.3846153846vw;
gap: 5.1282051282vw;
height: auto;
}
}
.content-wide .content-main .content-tile {
width: 17.4666666667vw;
height: 17.3333333333vw;
background: rgba(255, 255, 255, 0.3);
display: flex;
flex-direction: column;
}
@media screen and (max-width:1024px) {
.content-wide .content-main .content-tile {
width: 100%;
height: 66.6666666667vw;
}
}
.content-wide .content-main .content-tile .tile-header {
padding: 2vw 0.6666666667vw 1.3333333333vw;
display: flex;
gap: 0.6666666667vw;
align-items: center;
}
@media screen and (max-width:1024px) {
.content-wide .content-main .content-tile .tile-header {
padding: 7.6923076923vw 2.5641025641vw 5.1282051282vw;
box-sizing: border-box;
gap: 2.5641025641vw;
margin: 0 auto;
}
}
.content-wide .content-main .content-tile .tile-header .tile-header-text {
font-weight: 700;
color: #fff;
line-height: 1.7333333333vw;
font-size: 1.2vw;
}
@media screen and (max-width:1024px) {
.content-wide .content-main .content-tile .tile-header .tile-header-text {
font-size: 4.6153846154vw;
line-height: 6.6666666667vw;
}
}
.content-wide .content-main .content-tile .tile-body {
padding: 0.6666666667vw;
line-height: 1.7333333333vw;
font-size: 0.9333333333vw;
color: #fff;
}
@media screen and (max-width:1024px) {
.content-wide .content-main .content-tile .tile-body {
padding: 2.5641025641vw;
font-size: 3.5897435897vw;
line-height: 6.6666666667vw;
}
}
.content-wide .content-footer {
padding: 4vw 0.6666666667vw 5.3333333333vw;
color: #fff;
font-size: 1.4666666667vw;
font-weight: 700;
line-height: 2.1333333333vw;
text-align: center;
}
.content-wide .content-footer.sp {
display: none;
}
.content-wide .content-footer.pc {
display: block;
}
@media screen and (max-width:1024px) {
.content-wide .content-footer {
padding: 15.3846153846vw 2.5641025641vw 20.5128205128vw;
font-size: 5.641025641vw;
line-height: normal;
}
.content-wide .content-footer.sp {
display: block;
}
.content-wide .content-footer.pc {
display: none;
}
}
.content-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content-header h3 {
font-weight: 700;
font-size: 2vw;
line-height: 2.8666666667vw;
margin-bottom: 0.8vw;
}
@media screen and (max-width:1024px) {
.content-header h3 {
font-size: 7.6923076923vw;
line-height: 11.0256410256vw;
margin-bottom: 3.0769230769vw;
}
}
.content-header h3.chat {
font-weight: 700;
font-size: 2vw;
line-height: 2.8666666667vw;
margin-bottom: 0.8vw;
color: #fff;
}
@media screen and (max-width:1024px) {
.content-header h3.chat {
font-size: 7.6923076923vw;
line-height: 11.0256410256vw;
margin-bottom: 3.0769230769vw;
color: #fff;
}
}
.content-header h3 .media_break {
display: none;
}
@media screen and (max-width:1024px) {
.content-header h3 {
text-align: center;
display: block;
}
.content-header h3.m-top {
padding-top: 41.0256410256vw;
}
.content-header h3 .media_break {
display: inline;
}
}
.content-header .line {
width: 4.3333333333vw;
}
@media screen and (max-width:1024px) {
.content-header .line {
width: 16.6666666667vw;
}
}
.content-smart {
width: 85.1333333333vw;
margin: 0 auto;
}
@media screen and (max-width:1024px) {
.content-smart {
width: 94.8717948718vw;
}
}
.content-smart.xs {
width: 74vw;
}
@media screen and (max-width:1024px) {
.content-smart.xs {
width: 94.8717948718vw;
}
}
.content-smart.xs .content-header {
padding: 4vw 0 4vw 0;
}
@media screen and (max-width:1024px) {
.content-smart.xs .content-header {
width: 87.1794871795vw;
text-align: center;
padding: 15.3846153846vw 0 15.3846153846vw 0;
margin: 0 auto;
}
}
.content-smart .content-header {
padding: 5.3333333333vw 0 2.6666666667vw 0;
}
@media screen and (max-width:1024px) {
.content-smart .content-header {
padding: 20.5128205128vw 0 10.2564102564vw;
margin-top: 20.5128205128vw;
}
}
.content-smart .content-header .line {
border: 0.2vw solid #000;
}
@media screen and (max-width:1024px) {
.content-smart .content-header .line {
border: 0.7692307692vw solid #000;
}
}
.content-smart .content-list {
width: 63.3333333333vw;
margin: 0 auto;
margin-bottom: 5.3333333333vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-list {
width: 94.8717948718vw;
margin-bottom: 20.5128205128vw;
}
}
.content-smart .content-list > :last-child {
border-bottom: 1px solid #000;
}
.content-smart .content-list .content-list-inner {
display: flex;
flex-direction: column;
padding-bottom: 1.3333333333vw;
}
.content-smart .content-list .content-list-inner .content-list-header {
padding: 1.3333333333vw 0;
border-top: 1px solid #000;
font-size: 1.6vw;
font-weight: 700;
}
@media screen and (max-width:1024px) {
.content-smart .content-list .content-list-inner .content-list-header {
padding: 5.1282051282vw 0;
font-size: 6.1538461538vw;
}
}
.content-smart .content-list .content-list-inner .content-list-text {
font-size: 1.3333333333vw;
line-height: 2.4vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-list .content-list-inner .content-list-text {
font-size: 5.1282051282vw;
line-height: 9.2307692308vw;
}
}
.content-smart .content-column {
display: flex;
flex-direction: column;
gap: 4vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column {
gap: 15.3846153846vw;
}
}
.content-smart .content-column .content-inner {
display: flex;
gap: 2vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner {
flex-direction: column;
}
}
.content-smart .content-column .content-inner:nth-child(even) {
flex-direction: row-reverse;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner:nth-child(even) {
flex-direction: column;
}
}
.content-smart .content-column .content-inner .content-thumb {
max-width: 26.652vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner .content-thumb {
width: 100%;
max-width: inherit;
margin-bottom: 7.6923076923vw;
}
}
.content-smart .content-column .content-inner .content-text {
display: flex;
flex-direction: column;
gap: 1.3333333333vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner .content-text {
gap: 5.1282051282vw;
}
}
.content-smart .content-column .content-inner .content-text .content-inner-header {
line-height: 2.2666666667vw;
font-weight: 700;
font-size: 1.4666666667vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner .content-text .content-inner-header {
line-height: 8.7179487179vw;
font-size: 5.641025641vw;
}
}
.content-smart .content-column .content-inner .content-text .content-inner-body {
line-height: 2.2666666667vw;
font-size: 1.2vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-column .content-inner .content-text .content-inner-body {
line-height: 8.7179487179vw;
font-size: 4.641025641vw;
}
}
.content-smart .content-row {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 0px 0px 4vw;
gap: 3.3333333333vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-row {
flex-direction: column;
gap: 12.8205128205vw;
}
}
.content-smart .content-row .content-inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 2vw;
width: 19.3333333333vw;
height: 22vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-row .content-inner {
width: 100%;
height: auto;
gap: 7.6923076923vw;
}
}
.content-smart .content-row .content-inner img {
width: 18.6666666667vw;
margin-bottom: 2vw;
}
@media screen and (max-width:1024px) {
.content-smart .content-row .content-inner img {
width: 100%;
}
}
.content-smart .content-row .content-inner .content-text {
display: flex;
flex-direction: column;
gap: 1.3333333333vw;
align-items: center;
}
@media screen and (max-width:1024px) {
.content-smart .content-row .content-inner .content-text {
gap: 5.1282051282vw;
}
}
.content-smart .content-row .content-inner .content-text .content-text-header {
font-weight: 700;
font-size: 1.6vw;
line-height: 2.3333333333vw;
text-align: center;
color: #000000;
}
@media screen and (max-width:1024px) {
.content-smart .content-row .content-inner .content-text .content-text-header {
font-size: 6.1538461538vw;
line-height: normal;
}
}
.content-smart .content-row .content-inner .content-text .content-text-discription {
font-size: 0.9333333333vw;
line-height: 1.3333333333vw;
text-align: center;
}
@media screen and (max-width:1024px) {
.content-smart .content-row .content-inner .content-text .content-text-discription {
font-size: 3.5897435897vw;
line-height: normal;
}
}
.under-linkArea {
display: flex;
width: 100%;
justify-content: center;
gap: 4vw;
margin-top: 2vw;
margin-bottom: 5.3333333333vw;
}
@media screen and (max-width:1024px) {
.under-linkArea {
margin-top: 7.6923076923vw;
margin-bottom: 20.5128205128vw;
gap: 15.3846153846vw;
flex-direction: column;
align-items: center;
}
}
.under-linkArea .link_product_page {
border: 1px solid #828282;
width: 20vw;
height: 3.3333333333vw;
}
@media screen and (max-width:1024px) {
.under-linkArea .link_product_page {
border: 0.5128205128vw solid #828282;
width: 76.9230769231vw;
height: 12.8205128205vw;
}
}
.under-linkArea .link_product_page span {
color: #000;
}
.under-linkArea .link_product_page span.polygon {
background: #000;
}
.inquiry-area {
margin-top: 7.2vw;
padding-bottom: 6.6666666667vw;
width: 100%;
background: rgba(228, 202, 244, 0.13);
display: flex;
flex-direction: column;
align-items: center;
gap: 4.0666666667vw;
}
@media screen and (max-width:1024px) {
.inquiry-area {
margin-top: 27.6923076923vw;
padding-bottom: 25.641025641vw;
}
}
.inquiry-area .inquiry-header {
font-size: 2vw;
font-weight: 700;
line-height: 1.3333333333vw;
padding-top: 4.6666666667vw;
}
@media screen and (max-width:1024px) {
.inquiry-area .inquiry-header {
padding-top: 17.9487179487vw;
font-size: 7.6923076923vw;
line-height: 10.2564102564vw;
width: 69.2307692308vw;
text-align: center;
}
}
.inquiry-area .link_product_page {
background: #fff;
border: 1px solid #828282;
color: #000;
}
.inquiry-area .link_product_page .polygon {
background: #000;
}
#download-area {
width: 100%;
background: #000;
}
#download-area .content-header {
padding: 4vw;
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-chat/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;
}