@charset "utf-8";
/* CSS Document */
.lms .voice { background-image: none; }
.lms #main { height:675px; background-color:#E8E8E8; }
.lms #main .main { width:987px; margin:0 auto; position:relative; height:100%; }
.lms #main .main h2 { text-align:center; font-size:64px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#111; padding-top:70px; line-height:1; }
.lms #main .main h2 span { font-size:14px; font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; display:block; margin-top:1em; line-height:1; }
.lms #main .main .main1 { position:absolute; right:0; bottom:-50px; }
.lms #main .main .main2 { position:absolute; left:0; top:279px; }
.lms #main .main .logo { position:absolute; left:0; top: 575px; width: 200px;}
.lms #main .main .logo img { width: 100%; }

.lms section.box { padding:100px 0; position:relative; }
.lms section.box.spe { padding:100px 0 200px 0; }
.lms section.box.grey { background-color:#F6F6F6; }
.lms section.box.black1 { background-color:#333333; color:#FFF; }
.lms section.box.black2 { background-color:#424242; color:#FFF; }

.lms section.box.line:before { content:""; display:block; width:9px; height:74px; background-color:#FFCC33; top:-37px; left:50%; margin-left:-4.5px; position:absolute; } 
.lms .section { width:1000px; margin:0 auto; }
.lms .section h2 {text-align:center; font-weight:bold; margin-bottom:60px; }
.lms .section h2.title { font-size:32px; color:#111;
background-color:transparent;
 line-height:1.6; padding-bottom: 0;
}
.lms .section h2.title2 { font-size:43px; color:#111; line-height:1; }
.lms .section .goodDesign {font-size: 23px;color: #000;font-weight: bold;color: #ff2929 !important; }
.lms .section h2.title2 span { display:block; font-size:19px; margin-top:1em; }
.lms section.box.line p { text-align:center; line-height:2.2; color:#666; margin-bottom:60px; }
.lms section.box.black1 h2 { color:#F8BE00; }

.lms section.center { text-align:center; }
.lms .section h2.title2.lines { display:inline-block; }
.lms .section h2.title2.lines:after { content:""; display:block; border-width:2px; border-style:solid; margin-top:17px; }
.lms .black1 .section h2.title2.lines:after { background-color:#F8BE00;  }
.lms section.box.black2.arrow:before { content:""; display:block;
width: 0;
height: 0;
border-style: solid;
border-width: 27px 30.5px 0 30.5px;
border-color: #333333 transparent transparent transparent;
position:absolute; top:0; left:50%; transform:translateX(-50%); }

.lms section.box.black1.arrow:before { content:""; display:block;
width: 0;
height: 0;
border-style: solid;
border-width: 27px 30.5px 0 30.5px;
border-color: #424242 transparent transparent transparent;
position:absolute; top:0; left:50%; transform:translateX(-50%); }

.lms section.box.black2.arrow.arrows:before { content:""; display:block;
width: 0;
height: 0;
border-style: solid;
border-width: 27px 30.5px 0 30.5px;
border-color: #333333 transparent transparent transparent;
position:absolute; top:0; left:50%; transform:translateX(-50%); }


.lms .section h3 {text-align:center; font-weight:bold; margin-bottom:60px; font-size:22px; color:#111; }
.lms .section figure { text-align:center; }
.lms .black1 .section h3 { color:#FFF; }

.lms .voice {
	display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
   
   }
.lms .voice li { background-color:#F9BE00; 
-ms-flex-preferred-size: 235px;
               flex-basis: 235px;
			   max-width:235px;
			   
			   margin:0 10px;
 }
.lms .voice li img { width:100%; height:auto; }
.lms .voice li p { padding:20px; line-height:1.2; color:#111; }
.lms .voice li figure { line-height:0; position:relative; }
.lms .voice li figure:after { content:""; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 13px 7.5px;
border-color: transparent transparent #f9bf00 transparent;
 }
 
 .lms p.check { text-align:center; font-size:20px; font-weight:bold; margin-top:55px; color:#111; }
 .lms p.check:before { content:""; display:inline-block; width:34px; height:30px; background-image:url(../img/lms/check.png); background-repeat:no-repeat; background-size:contain; vertical-align:middle; margin-right:10px; }
 
 .lms #videoBox { width:690px; margin:0 auto; }
 .lms #videoBox p,.clm2 li p { margin:0; font-size:14px; color:#666; }
 .lms video { width:100%; }
 .lms #video1 {border:3px solid #000; }
 
 .lms .clm2,.lms .clm3 { width:844px; margin:50px auto 0 auto; 
 display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-pack: justify;
     -ms-flex-pack: justify;
   justify-content: space-between;
   }
   .lms .clm2 li { 
   -ms-flex-preferred-size: 412px;
               flex-basis: 412px;
			   max-width:412px;
   }
   .lms .clm3 li { 
   -ms-flex-preferred-size: 412px;
               flex-basis: 412px;
			   max-width:412px;
   }
   .lms section.box.line  .clm2 li p { line-height:1.3; margin-top:.7em; }
   
  /* .clm2.c2 { width:1092px;  }
   
   .clm2.c2 li { 
   -ms-flex-preferred-size: 533px;
               flex-basis: 533px;
			   max-width:533px;
   }*/
   .lms .clm2.c2 { margin-top:0; }
   .lms #section3Box {width:844px; margin:50px auto 0 auto; position:relative;  }
   
   .lms .f1 { background-color:#F9BE00; width:160px; height:160px; border-radius:50%; top:-104px; left:-30px; position:absolute; }
  .lms  section.box.line .f1 p { font-size:18px; color:#111; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-block; line-height:1.2; text-align:left; width:5em; font-weight:bold; }
   .lms section.box.line .f1 span { position:absolute; left:0; top:-22px;}
   
    .lms .f2 { background-color:#F9BE00; width:160px; height:160px; border-radius:50%; bottom:-71px; left:50%; position:absolute; transform:translateX(-50%); }
   .lms section.box.line .f2 p { font-size:18px; color:#111; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-block; line-height:1.2; text-align:left; width:6em; font-weight:bold; }
   .lms section.box.line .f2 span { position:absolute; right:0; bottom:-10px;}
   
   .lms .f3 { background-color:#F9BE00; width:160px; height:160px; border-radius:50%;  top:-104px; right:-30px; position:absolute; }
   section.box.line .f3 p { font-size:18px; color:#111; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-block; line-height:1.2; text-align:left; width:6em; font-weight:bold; }
   .lms section.box.line .f3 span { position:absolute; right:0; top:-22px;}
   
   .lms .section h4 { font-size:30px; color:#F8BE00; font-weight:bold; line-height:1; margin-bottom:30px; }
   .lms .section h4 em { margin-bottom:20px; display:block; }
   .lms .section h4 span { display:block; font-size:22px; color:#FFF; font-weight:normal; margin-bottom:.5em; }
   .lms section.box.arrow p span { font-weight:bold; font-size:120%; color:#F8BE00; }
   .lms sup { font-size:40%; vertical-align:top; }
   .lms section.box.arrow { padding-bottom:0; }
   .lms section.box.arrow p { color:#ccc; margin-bottom:0px; padding-bottom:50px; }
   .lms section.box.arrow figure.fr { width:620px; margin:0 auto; position:relative; }
   .lms section.box.arrow figure.fr:before { width:100%; height:100%; position:absolute; top:20px; left:20px; background-color:#FFF; opacity:.16; content:""; display:block; }
   .lms section.box.arrow figure.fr img { width:100%; height:auto; }
   .lms section.box.arrow figure.fr .arrow { bottom:38px; right:-31px; position:absolute; width:313px; height:auto; }
   
   .lms p.cur { font-size:10px; text-align:right; margin-top:25px; padding:0 15px; }
   
   .lms section.box.black2 .subSection { padding:45px 0; background-color:#494949; margin-top:65px; }
   .lms section.box.black1 .subSection { padding:45px 0; background-color:#303030; margin-top:65px; }
   
   .lms #video5 { width:290px; height:auto; }
   .lms #video6 { width:124px; height:auto; display:inline-block; margin:0 35px; }
   .lms .subFigure {display:inline-block; margin:0 35px; vertical-align:top;}
   .lms .subFigure img { width:120px; height:auto; }
   .lms .subFigure img:nth-child(1) { margin-right:10px; }
   .lms section.box.black1 .subSection .subFigure div { font-size:14px; margin-top:1em; color:#ccc; }
   .lms section.box.black2 .subSection div { display:inline-block; margin:0 12px; vertical-align:middle; height:178px;  }
   
   .lms .section2 { padding:60px 0; margin-bottom:5px; }
   .lms .section2.grey { background-color:#F6F6F6; }
   
   .lms .product { 
   display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-pack: center;
     -ms-flex-pack: center;
   justify-content: center;
   
  }
  
  .lms .product li { background-color:#FFF; 
  -ms-flex-preferred-size: 400px;
               flex-basis: 400px;
			   max-width:400px;
			   margin:0 15px;
  }
  .lms .product li a { display:block; text-decoration:none; }
  .lms .product li a:hover { text-decoration:none; }
  
  .lms section.box .caption { padding:30px; font-size:14px; color:#666; text-align:left; line-height:1.65; }
  .lms section.box .caption h5 { font-size:16px; color:#111; font-weight:bold; margin-bottom:.5em; }
  .lms section.box .caption p {font-size:14px; color:#666; text-align:left; line-height:1.65; margin:0; }
  
  .lms br.sp { display:none; }
  
  .pcOnliy { display:inline; }
  .spOnly { display:none; }
  
  .youtube {  margin:0 auto;
     position: relative;
     padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
     height: 0;
     overflow: hidden;
}
 
.youtube iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
  
  @media screen and (max-width:736px){
    .lms .section .goodDesign {font-size: 16px; }

	  .youtube {  }
	  .pcOnliy { display:none; }
  .spOnly { display:inline; }
  
	  .lms #main { overflow:hidden; height:auto; }
	.lms #main .main { width:100%; padding:15px; box-sizing:border-box; }  
	.lms #main .main h2 { font-size: 32px; padding-top: 0px; margin-bottom:.5em; }
	.lms #main .main h2 span {
    font-size: 10px; }
	.lms #main .main .main1 {
    position:static; margin-bottom:1em;}
	.lms #main .main .main1 img { width:120%; height:auto; margin-left:-20%; }
	.lms #main .main .main2 {
    position: static; background-color:#ddd; padding:30px; text-align:center; border-radius:.2em;}
    .lms #main .main .main2 img { width:90%; height:auto; }
    .lms #main .main .logo { display: none;}
	
	.lms section.box {
    padding: 40px 0;
}
.lms .section {
    width: auto;
	padding:0 15px;
}
.lms .section h2.title {
    font-size: 20px;
}
.lms br { display:none; }
.lms br.sp{ display:block; }
.lms .voice {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
	-ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.lms .voice li {margin:0;  margin-bottom:10px;
    -ms-flex-preferred-size: calc( 50% - 5px );
    flex-basis: calc( 50% - 5px );
    max-width: calc( 50% - 5px );
}
.lms .section h2 {
    margin-bottom: 20px;
}
.lms p.check {
    
    font-size: 16px;

    margin-top: 20px;

}
.lms p.check:before {
   
    width: 17px;
    height: 15px;
    
}
.lms section.box.line:before {
    
    width: 4.5px;
    height: 37px;
    
    top: -18.5px;
    left: 50%;
    margin-left: -2.25px;
    
}
.lms .section h2.title2 {
    font-size: 21px;
    
}
.lms .section h2.title2 span {

    font-size: 10px;

}
.lms #videoBox {
    width: 100%;
   
}
.lms section.box.line p {
 
    margin-bottom: 20px;
}
.lms .clm2 {
    width: auto;
    margin: 20px auto 0 auto;
    display: block;
}
.lms .clm2 li { margin-bottom:10px; max-width:100%; }


.lms .section h3 {
    
    margin-bottom: 20px;
    font-size: 18px;

}
.lms .section h3 + figure img { width:100%; height:auto; }
.lms section.box.spe {
    padding: 40px 0 80px 0;
}
.lms #section3Box {
    width: auto;
    margin: 110px auto 0 auto;
  
}
.lms .f1 { transform:scale(.7); transform-origin:0 50%;
   
    top: -104px;
    left: 0px;

}
.lms .f2 { transform-origin:100% 50%;
   
    bottom: auto;
	top:50%;
transform: translateX(0%) translateY(-50%) scale(.7); left:auto; right:-5px;
 
}
.lms .f3 {transform:scale(.7); transform-origin:0% 50%;
   
    top: auto;
	bottom:-71px;
    right: auto;
	left:0;

}
.lms section.box.arrow figure.fr { width:100%; }

.lms section.box.arrow figure.fr:before {
    
    top: 5px;
    left: 5px;
   
}
.lms section.box.arrow p {

    margin-bottom: 0px; padding-bottom:20px;
}
.lms p.cur {
 
    text-align: left;
    margin-top: 10px;
}

.lms section.box.black1 .subSection {
    padding: 20px 0;
 
} 

.lms .subFigure {
    margin-bottom:20px;
} 

.lms section.box.arrow figure.fr .arrow {
bottom:2.816901408450704vw;
width:41.20237212750185vw;
right:0;
}

.lms section.box.black2 .subSection div {
	margin-bottom:20px;
}

.lms section.box.black2 .subSection {
    padding: 20px 0; 

}
.lms .section h4 {
    font-size: 20px;
   
    margin-bottom: 20px;
}


.lms .section h4 span {
  
    font-size: 18px;
 
}

.lms .product {
    display: block;
}

.lms .product li {
  
    max-width: 100%;
    margin: 0 0px 10px 0;
}

.lms .section2 h3 img { width:auto; height:20px; }
.lms .product li img { width:100%; height:auto; }

.lms section.box p,section.box.line p { text-align:left; }

.lms .section2 {
    padding: 20px 0;
}

  }
  
 .lms .fadePoint { opacity:0; transform:translateX(20%);
 -moz-transition: all .6s ease .2s;
-webkit-transition: all .6s ease .2s;
-o-transition: all .6s ease .2s;
-ms-transition:all .6s ease .2s;
transition: all .6s ease .2s;
 }
 .lms .fadePoint.fade { opacity:1; transform:translateX(0%); }
 
 .lms section.box.line p strong { font-weight:bold; display:block; text-align:center; margin-bottom:.4em; }