@charset "Shift_JIS";

.mt20{margin-top:20px;}

/*====================================

テキスト

====================================*/

#PageTitle .lead{
text-align:center;
}

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

h2{
position:relative;
display:block;
text-align:center;
font-size:180%;
background:none;
margin:0 0 60px 0;
padding:0;
  border-bottom: solid 3px #BAD1E0;
  box-sizing: border-box;
}

h2:before{
  content: "";
  position: absolute;
  bottom: -24px;
  left: 50%;
  margin-left: -15px;
  border: 12px solid transparent;
  border-top: 12px solid #FFF;
  z-index: 2;
}

h2:after{
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-top: 14px solid #BAD1E0;
  z-index: 1;
}

h3{
position:relative;
font-size:120%;
font-weight:bold;
color:#3584B9;
background-image:none;
padding:0 0 0 20px;
margin:0 0 20px 0;
}

h3:before{
position:absolute;
content:'';
border-left:3px solid #E6E6E6;
height:100%;
margin-left:-20px;
}
.Evaluation .TitleText{
    font-size: 140%;
    font-weight: normal;
    color: #333;
    margin-bottom: 10px;
}

.TextDetail{
margin-bottom:20px;
}

.name{
font-size:150%;
margin-right:16px;
white-space:nowrap;
}

.ruby{
font-size:12px;
margin-right:64px;
white-space:nowrap;
}

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::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;
}

.Evaluation .ButtonStyle1 a {
    padding: 12px 22px 12px 15px;
    margin-right: 0;
    margin-bottom: 0;
    border-radius: 4px;
    background-color: #fff;
    color: #17316D;
    border: 1px solid #17316D;
    background-image: url(/products/it/lumada/images/icon_s_arrow05.png);
    background-repeat: no-repeat;
    background-position: right 3% 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;
}

.Evaluation .ButtonStyle1 a:hover/*, p.ExamplesLink a:active */{
    background-color: #17316D;
    color: #fff;
    background-image: url(/image/jp/r1/icon/icon_link_right_l_white_hd.gif);
}

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

/*====================================

タイトルエリア

====================================*/

.TitleArea span{
display:block;
background: radial-gradient(#FFF, #EDF3F7);
width:100vw;
height:300px;
margin-bottom:-300px;
}

#PageTitle{
padding:30px 16px;
}

.CAXOs{
width:100%;
margin-top:20px;
text-align:center;
}

/*====================================

説明文エリア

====================================*/
.contentsWidth {
padding: 0 16px;
}

.DetailArea{
margin-top:80px;
}

.DetailArea.FirstItem{
margin-top:40px;
}

.BasicInfo{
display:flex;
align-items:center;
}

.DateListStyle2{
font-size:100%;
}

.DateListStyle2 img{
margin-left:0;
vertical-align:top;
}

.sec_info dl:not(:last-of-type){
margin-bottom:10px;
border-bottom:1px solid #BCBCBC;
padding-bottom:10px;
}

.sec_info dt.date{
font-size:90%;
}

.sec_info dd.category{
margin:0 0 0 8em;
}

.sec_info dd.topicsLink{
margin-left:16em;
}

.Background-gray{
background-color: #EFEFEF;
}

.Evaluation{
	padding: 40px 0;
}

.Evaluation .SideBySide{
	display: flex;
}

.Evaluation .SideBySide div:first-child{
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}

.Evaluation .TextArea{
	width: 100%;
margin-left:20px;
	padding-right: 0;
}

.Evaluation .ImgArea img{
	width:230px;
	height:auto;
}

.Evaluation .TextArea{
	display:table;
}

.Evaluation .TextArea p.TextStyle1{
	font-size: 100%;
}

.Evaluation .TextArea div{
	display: table-cell;
	vertical-align: middle;
}

.Evaluation .container{
	display: table;
}

.Evaluation .container p{
	display: table-cell;
	vertical-align: middle;
	padding-right: 20px;
}


/*====================================

グリッド

====================================*/

.Grid-table{
max-width:1275px;
display:grid;
grid-template-columns:280px 1fr 1fr;
}

.Grid-table:not(:last-of-type){
margin-bottom:60px;
}

.atem001{
grid-column:1 / 4;
grid-row:1;
}

.atem002{
grid-column:1;
grid-row:2 / 4;
}

.atem002 img{
border-radius:8px;
}

.atem003{
grid-column:2 /4;
grid-row:2;
place-content: center;
    display: grid;
    align-content: space-evenly;
    justify-content: start;
}

.atem004{
grid-column:2 /4;
grid-row:3;
}

/*====================================

レスポンシブ　767px以下

====================================*/
@media screen and (max-width: 767px){
.JS h2{
margin:0 0 60px 0;
}

h3{
padding-left:16px;
margin:0 0 24px 0 !important;
}

h3:before{
margin-left:-16px;
}

.name{
float:left;

}

.ruby{
padding-top:12px;
}

.job{
clear:both;
}

.SideBySide{
display:block;
}

.DetailArea{
margin-top:80px;
}
.LeftBox{
margin-bottom:24px;
}

.BasicInfo{
display:block;
}

.atem002{
grid-column:1;
grid-row:2 / 3;
}

.atem003{
grid-column:2 / 4;
grid-row:2;
display:grid;
align-items:center;
height:264px;
}

.atem004{
grid-column:1 / 4;
grid-row:4;
}

.sec_info dd.category{
margin-bottom:5px;
}

.sec_info dd.topicsLink{
margin-left:0;
}

.sec_info dd.topicsLink{
clear:both;
}

}

/*====================================

579px以下

====================================*/
@media screen and (max-width: 579px){
h3{
margin-bottom:24px;
}

.ButtonStyle1 a {
display: block;
}

.LeftBox{
margin:0 0 24px 0;
}

.LeftBox img{
width:100%;
}

.RightBox{
position:static;
}

.BasicInfo{
margin:0 0 16px 0;
position:static;
}

.Grid-table{
display:block;
}

.atem002{
margin-bottom:24px;
}

.atem002 img{
width:100%;
}

.atem003{
height:auto;
}

.sec_info dt.date{
float:left;
}

.Evaluation .SideBySide {
display: block;
}

.Evaluation .ImgArea img {
width: 100%;
}

.Evaluation .TextArea {
margin: 20px 0 0 0;
}
}