@charset "Shift_JIS";

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.mt40{margin-top:40px;}

#Contents p {
font-size: 100%;
/*margin-bottom: 16px;*/
}

#PageTitle{
background:linear-gradient(60deg, #A1DEF5, #A1F5C3);
padding:30px 16px;
}

h1{
max-width:1275px;
margin:0 auto;
font-size:30px;
font-weight:bold;
text-align:center;
position:relative;
}

h1:after{
position:absolute;
content:'';
left:50%;
transform:translateX(-50%);
border-bottom:3px solid;
border-image:linear-gradient(60deg, #63C88C, #64ABC8) 1;
bottom:-10px;
width:40px;
}

.dropcap:first-letter{
float:left;
line-height:1;
margin-right:8px;
font-size:300%;
font-weight:bold;
color:#64ABC8;
}

.TextCenter{
text-align:center;
}

.heading{
font-weight:bold;
font-size:22px !important;
margin-bottom:16px;
}

.heading.ex01{
text-align:center;
position:relative;
}

.heading.ex01:after{
content:'';
position:absolute;
border:2px solid #64ABC8;
bottom:-10px;
width:40px;
left:50%;
transform:translateX(-50%);
}

p.ExamplesLink a:link,
p.ExamplesLink a:visited{
color:#17316D;
text-decoration:none;
}

p.ExamplesLink a:hover,
p.ExamplesLink a:active{
color:#17316D;
text-decoration:underline;
}

p.ExamplesLink.Newwin a:link::after,
p.ExamplesLink.Newwin a:visited::after{
content:'';
display:inline-block;
width:16px;
height:16px;
background-image:url(/products/it/lumada/images/icon_new_window_hd02.png);
background-size:contain;
vertical-align:middle;
margin:0px 6px;
}

p.ExamplesLink.Newwin a:hover::after, p.ExamplesLink.Newwin a:hover:active::after {
content:'';
display:inline-block;
width:16px;
height:16px;
background-image:url(/products/it/lumada/images/icon_new_window_hd02.png);
background-size:contain;
vertical-align:middle;
margin:0px 8px;
}

ul.LinkListStyle1.TextCenter{
text-align:center;
}

ul.LinkListStyle1.TextCenter a{
color:#17316D;
}

.TextMiddleBorder{
align-items: center;
display:flex;
font-weight:bold;
font-size:22px !important;
}

.TextMiddleBorder:after{
background:linear-gradient(to right, #A1F5C3 0%, #A1F5C3 5%, #E2E2E2 5%, #E2E2E2 100%);
content:'';
flex-grow:1;
height:1px;
margin-left:16px;
}

.contentsWidth{
padding:0 16px;
}

.Paragraph{
margin-top:70px;
}

.Paragraph02{
margin-top:40px;
}

.ReadMore{
position:relative;
}

.ReadMore:after{
content:"";
position:absolute;
bottom:-50px;
left:50%;
border:16px solid transparent;
border-top:16px solid #A1F5C3;
transform:translateX(-50%);
}

.ReadMore .RightBox{
display:table;
}

.ReadMore .ContentsCenter{
display:table-cell;
vertical-align:middle;
text-align:center;
}

.SideBySide{
display:flex;
}

.SideBySide.LeftBig .LeftBox{
flex:7;
}

.SideBySide.LeftBig .RightBox{
flex:3;
}

.SideBySide.RightBig .LeftBox{
flex:2;
}

.SideBySide.RightBig .RightBox{
flex:8;
}

.LeftBox{
margin-right:20px;
}

.LeftBox.TextCenter{
display:flex;
align-items:center;
}

.RightBox .ShadowGreen{
box-shadow:24px 16px #A1F5C3;
}

.RightBox .ShadowGreen img{
border-left:1px solid #E2E2E2;
border-top:1px solid #E2E2E2;
}

.BgGreen{
background-color:#A1F5C3;
margin-left:-100vw;
padding:20px 20px 20px 0;
display:flex;
align-items:center;
}

.BgGreen p{
margin-left:100vw;
}

.ButtonStyle1 a:link,
.ButtonStyle1 a:visited{
padding:8px 32px 8px 24px;
background-color:#fff;
border:1px solid #17316D;
border-radius:3px;
background-image:url(/products/it/lumada/images/icon_new_window_hd02.png);
background-repeat:no-repeat;
background-position:right 8px center;
background-size:16px 16px;
-moz-background-size: 16px 16px;
-webkit-background-size:16px 16px;
-o-background-size:16px 16px;
-ms-background-size:16px 16px;
word-break:break-all;
font-size:120%;
color:#17316D;
text-decoration:none;
}

.ButtonStyle1 a:hover,
.ButtonStyle1 a:active{
background-color:#17316D;
color:#fff;
background-image:url(/products/it/lumada/images/icon_new_window_hd03.png);
}

.YouTubeBox{
background:none;
text-align:center;
}

.ImgOnlyStyle .ModalYouTubeLink{
position:relative;
}

.ImgOnlyStyle .ModalYouTubeLink:before{
content:'';
position:absolute;
z-index: 1;
width: 50px;
height: 50px;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
background-color: #e60027;
opacity: .5;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}

.ImgOnlyStyle .ModalYouTubeLink:after {
content: "";
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
margin: -18px 0 0 -18px;
background-color: #e60027;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
}

.ImgOnlyStyle .ModalYouTubeLink span{
position:relative;
display:block;
}

.ImgOnlyStyle .ModalYouTubeLink span:after{
content: "";
position: absolute;
z-index: 2;
width: 0;
height: 0;
top: 50%;
left: 50%;
margin: -9px 0 0 -3px;
border-left: solid 9px #fff;
border-top: solid 9px transparent;
border-bottom: solid 9px transparent;
}



@media screen and (min-width: 995px) and (max-width: 1304px){
.ShadowGreen img{
width:initial;
}
}

@media screen and (max-width: 994px){
.ex-CanSBS994 .SideBySide{
display:block;
}

.ex-CanSBS994 .LeftBox{
margin-right:0;
}

.ex-CanSBS994:has(.BgGreen){
background-color:#A1F5C3;
padding:40px 0;
}

.ex-CanSBS994 .BgGreen{
width:initial;
margin:0 0 20px 0;
background:none;
padding:0;
}

.ex-CanSBS994 .BgGreen p{
margin:0;
}

.RightBox .ShadowGreen{
box-shadow:none;
}

.ShadowGreen img{
width:initial;
}
}

@media screen and (max-width: 767px){
h1{
font-size:24px;
}

.SideBySide{
display:block;
}

.LeftBox{
margin-right:0;
margin-bottom:20px;
}

.LeftBox.TextCenter{
display:initial;
}

.ReadMore .RightBox{
display:initial;
}

.ReadMore .RightBox .ContentsCenter{
display:initial;
}

.ReadMore .RightBox .ContentsCenter br{
display:none;
}

.heading.ex01{
margin-bottom:30px;
}

.TextMiddleBorder{
display:block;
}

.TextMiddleBorder:after{
display:block;
margin-left:0;
}
}