@charset "UTF-8";
/* CSS Document */
/* font 
---------------------------------*/
/*
font_select{
font-family: proxima-nova, 'Noto Sans JP',sans-serif;
font-family: "Kozuka Gothic Pro", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
font-family: 'Noto Serif JP', serif;
}
*/

/* Clearfix
---------------------------------*/
.clearfix {
  min-height: 1px;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clear { clear:both; }

.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.font-zero{
	font-size:0;
}

/*-------------アニメーション--------------------*/
/* 遅延表示 */
.appear {
	transform-origin:center top;
	animation:show 2s both;
}
span.appear {display:block;}
.d1 {animation-delay:1.0s;}
.d2 {animation-delay:1.5s;}
.d3 {animation-delay:2.0s;}
.d4 {animation-delay:4s;}
.d6 {animation-delay:6s;}
.d8 {animation-delay:8s;}
.d10 {animation-delay:10s;}
.d12 {animation-delay:12s;}
@keyframes show {
	0% {
		transform:translate(0,0);
		opacity:0;
		text-shadow:0 0 0 #000;
	}
	50% {
		text-shadow:0 0 0.5em #000;
	}
	100% {
		transform:translate(0,0);
		opacity:1;
		text-shadow:none;
	}
}

/* インアウトエフェクト */
.fadein{
    animation: fadeIn 4s ease 0s 1 normal;
    -webkit-animation: fadeIn 4s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.animation {
}
.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInLeft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration: 1s;
 -webkit-animation-name: fadeInLeft;
 animation-name: fadeInLeft;
 visibility: visible !important;
}
@-webkit-keyframes fadeInLeft {
 0% { opacity: 0; -webkit-transform: translateX(-500px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes fadeInLeft{
 0% { opacity: 0; -webkit-transform: translateX(-500px); -ms-transform: translateX(-500px); transform: translateX(-500px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

.fadeInRight {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration: 1s;
 -webkit-animation-name: fadeInRight;
 animation-name: fadeInRight;
 visibility: visible !important;
}
@-webkit-keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInRight {
 0% { opacity: 0; -webkit-transform: translateX(500px); -ms-transform: translateX(500px); transform: translateX(500px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

/* Zoom In #1 */
.zoom{
	overflow:hidden;
}
.zoom img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.zoom:hover img {
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
	cursor:pointer;
	opacity:0.5;
}


/*-------------------------
    標準フォーマット
--------------------------*/
.p2 {
}
.p2 .fv_sec {width: 100%;height: 350px;background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/main_image.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;position: relative;}
.p2 .fv_sec .title_logo {position: absolute;width: 14%;top: 37%;left: 4%;}
.p2 .fv_sec .wrap {margin: 0 auto;width: 80%;text-align: center;padding-top: 100px;}
.p2 .fv_sec .wrap .name {color: #fff;font-size: 20px;line-height: 1.5;font-weight: 500;margin: 0;}
.p2 .fv_sec .wrap .main_title {margin: 0;font-size: 30px;color: #fff;border: 1px solid #fff;display: inline-block;margin-top: 20px;line-height: 1.5;padding: 8px 4%;font-weight: 600;letter-spacing: 1.7px;}
.p2 .lead_sec {position: relative;background-color: #ffeb3b;padding-top: 50px;padding-bottom: 50px;}
.p2 .lead_sec .sub_image {position: absolute;left: 3%;width: 33%;top: -52%;}
.p2 .lead_sec .wrap {margin: 0 auto;width: 80%;max-width: 550px;text-align: center;}
.p2 .lead_sec .wrap .name {margin: 0;font-size: 30px;font-weight: 600;line-height: 1.5;}
.p2 .lead_sec .wrap .sub_name {margin: 0;font-size: 16px;font-weight: 500;line-height: 1.5;}
.p2 .content_sec {padding-top: 80px;}
.p2 .content_sec .s_sec {padding-top: 65px;padding-bottom: 65px;position:relative;}
.p2 .content_sec .s_sec .sub_image02 {
	position:absolute;
	right: 10%;
	top: 0;
	width: 17%;
}

.p2 .content_sec .s_sec:nth-child(even){
	background-color: #f9f7f7;
}
.p2 .content_sec .s_sec .wrap {margin: 0 auto;width: 90%;max-width: 1080px;}
.p2 .content_sec .s_sec .wrap .wrap_name {font-size: 24px;line-height: 1.5;font-weight: 500;color: #005bb9;margin-bottom: 40px;padding-left: 26px;position: relative;}
.p2 .content_sec .s_sec .wrap .wrap_name:before {
	content:"";
	position:absolute;
	background-color: #005bba;
	width:15px;
	height:100%;
	left:0;
	top:0;
}
.p2 .content_sec .s_sec .wrap .s_wrap {
}
.p2 .content_sec .s_sec .wrap .s_wrap .comment {font-size: 14px;line-height: 1.8;margin-bottom: 35px;margin-top: 35px;}
.p2 .content_sec .s_sec .wrap .s_wrap .comment.half {width: 65%;margin-left: 0;}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box {
    display: inline-block;
    width: 47%;
    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    margin-top: 40px;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image_name {font-size: 14px;font-weight: 500;/* border: 1px solid #000000; */text-align: center;width: 45%;padding: 2%;background-color: #fde300;top: -23px;right: 0px;position: absolute;border-radius: 2px;}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box:nth-child(even) .image_name{
	left: 0px;
	right: inherit;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image_name .relative {
	position:relative;
	display: block;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image_name .relative:before {
	content: "";
	position: absolute;
	width: 0;
	margin: 0 auto;
	height: 0;
	bottom: -28px;
	left: 0;
	right: 0;
	border-style: solid;
	border-width: 23px 10px 0 10px;
	border-color: #fde300 transparent transparent transparent;
	display:none;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image {line-height: 0;margin: 0;}

.next_sec {padding-top: 40px;padding-bottom: 40px;}
.next_sec .wrap {margin: 0 auto;width: 90%;max-width: 1080px;border-top: 1px solid #999;padding-top: 40px;}
.next_sec .wrap .btn_link {text-align: center;margin: 0 auto;max-width: 600px;}
.next_sec .wrap .btn_link  .s_link {font-size: 14px;font-weight: normal;line-height: 1.5;}
.next_sec .wrap .btn_link a {background-color: #ff5a00;color: #fff;padding: 19px 40px;font-size: 19px;text-decoration: none;display: block;line-height: 1.5;font-weight: 600;position: relative;transition: 0.5s;border-radius: 7px;}
.next_sec .wrap .btn_link a:before {
	content:"";
	position:absolute;
	width: 15px;
	height: 15px;
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/next_navi.png);
	background-position: center;
	background-size: 6px;
	background-repeat: no-repeat;
}
.next_sec .wrap .btn_link a:hover {
	background-color:#000;
}

.common_navi {background-color: #efefef;padding-top: 50px;padding-bottom: 50px;}
.common_navi .wrap {margin: 0 auto;width: 90%;max-width: 1080px;display: flex;flex-wrap: wrap;}
.common_navi .wrap .title_logo {width: 18%;}
.common_navi .wrap .navi_box {width: 18%;border-right: 1px solid #999;padding-right: 3%;padding-left: 3%;}
.common_navi .wrap .navi_box:last-child {
	border-right:none;
}
.common_navi .wrap .navi_box a {
	color:#7c7c7c;
	transition:0.5s;
	padding-right: 18px;
	display: block;
	position: relative;
}
.common_navi .wrap .navi_box a:before {
	content:"";
	position:absolute;
	width: 16px;
	height: 16px;
	right: 0;
	top: 3px;
	background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/link_navi.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 5px;
}
.common_navi .wrap .navi_box a:hover:before {
	background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/link_navi_on.png);
	transition:0.5s;
}
.common_navi .wrap .navi_box a:hover {
	color:#fe5a00;
}
.common_navi .wrap .navi_box .link {font-size: 14px;line-height: 1.5;}
.common_navi .wrap .navi_box .link  .s_link {font-size: 12px;}

.link_sec {
}
.link_sec .wrap {margin: 0 auto;background-color: #0086b9;padding-top: 50px;padding-bottom: 50px;}
.link_sec .wrap .name {margin: 0 auto;width: 90%;text-align: center;font-size: 25px;font-weight: 600;line-height: 1.5;color: #fff;}
.link_sec .link_area {position: relative;/* background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/link_back.jpg); */background-position: center;background-repeat: no-repeat;background-size: cover;}
.link_sec .link_area .navi {position: absolute;width: 230px;top: -93px;right: 20%;}
.link_sec .link_area .case_wrap {margin: 0 auto;padding-bottom: 60px;}
.link_sec .link_area .wrap_name {margin: 0 auto;width: 90%;max-width: 1080px;font-size: 20px;font-weight: bold;margin-bottom: 25px;line-height: 1.5;}
.link_sec .link_area .flex_box {margin: 0 auto;width: 90%;max-width: 1080px;display: flex;flex-wrap: wrap;}
.link_sec .link_area .flex_box .s_box {margin: 0 1.6%;width: 30%;margin-bottom: 40px;}
.link_sec .link_area .flex_box .s_box a .image {line-height: 0;transition:0.5s;}
.link_sec .link_area .flex_box .s_box a .name {margin: 0;margin-top: 18px;font-size: 14px;font-weight: 500;line-height: 1.6;transition:0.5s;}
.link_sec .link_area .flex_box .s_box a{
	color:#000;
	text-decoration: none;
	transition:0.5s;
	display:block;
}
.link_sec .link_area .flex_box .s_box a:hover .name{
	color:#fe5a00;
}
.link_sec .link_area .flex_box .s_box a:hover .image{
	opacity:0.8;
}
.link_sec .link_area .link_wrap {background-color: #ccc;padding-bottom: 70px;padding-top: 50px;background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/link_back.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.link_sec .link_area .link_wrap .wrap_name {
}
.link_sec .link_area .link_wrap .flex_box {
}
.link_sec .link_area .link_wrap .flex_box .s_box {
}
.link_sec .link_area .link_wrap .flex_box .s_box  .image {
}
.link_sec .link_area .link_wrap .flex_box .s_box  .name {
}

@media only screen and (max-width: 1025px) {

}
@media only screen and (min-width: 768px) {
 .sp{
 display: none;
 }
}
@media only screen and (max-width: 767px) {
.pc_tab{
 display: none;
}
.p2 .fv_sec {
    height: 500px;
    background-image: url(https://static.roland.com/jp/promos/keion_nisshi/keyboards/images/main_image_sp.jpg);
}
.p2 .fv_sec .wrap {
    margin: 0 auto;
    width: 90%;
    padding-top: 190px;
}
.p2 .fv_sec .wrap .main_title {
    font-size: 25px;
}
.p2 .lead_sec .sub_image {
    left: 3%;
    width: 80%;
    top: -161px;
}
.p2 .fv_sec .title_logo {
    position: absolute;
    width: 33%;
    top: 39px;
    left: 4%;
}
.p2 .lead_sec .wrap .name {
    font-size: 25px;
}
.p2 .content_sec {
    padding-top: 0px;
}
.p2 .content_sec .s_sec {
    padding-top: 50px;
    padding-bottom: 55px;
}
.p2 .content_sec .s_sec .wrap .wrap_name {
    font-size: 20px;
    padding-left: 19px;
}
.p2 .content_sec .s_sec .wrap .wrap_name:before {
    width: 8px;
}
.p2 .content_sec .s_sec .wrap .s_wrap .comment {
    font-size: 15px;
    margin-bottom: 30px;
    margin-top: 30px;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box {
    display: block;
    width: 87%;
    margin: 0 auto;
    margin-top: 40px;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image_name {
    font-size: 12px;
    width: 50%;
    padding: 2%;
}
.p2 .content_sec .s_sec .wrap .s_wrap .image_box .image_name .relative:before {
    bottom: -20px;
    border-width: 15px 5px 0 5px;
}
.p2 .content_sec .s_sec .sub_image02 {
    right: 7%;
    top: 95px;
    width: 17%;
    z-index: 1;
}
.p2 .content_sec .s_sec .wrap {
    width: 85%;
}
.p2 .content_sec .s_sec .wrap .s_wrap .comment.last_half {
	width:auto;
}

.next_sec .wrap .btn_link {
    text-align: left;
}
.next_sec .wrap .btn_link a {
    padding: 19px 40px;
    font-size: 15px;
    line-height: 1.5;
}

.common_navi .wrap {
    position: relative;
    padding-top: 70px;
}
.common_navi .wrap .title_logo {
    width: 95px;
    position: absolute;
    left: 0;
    top: 0;
}
.common_navi .wrap .navi_box {
    width: calc(44.0% - 1px);
    border-right: 1px solid #999;
    padding-right: 3%;
    padding-left: 3%;
}
.common_navi .wrap .navi_box.top {
    width: 94%;
    border-right: none;
    padding-right: 3%;
    padding-left: 3%;
    border-bottom: 1px solid #999;
    padding-bottom: 10px;
    margin-bottom: 18px;
}

.link_sec .wrap {
    padding-top: 40px;
    padding-bottom: 90px;
}
.link_sec .link_area .navi {
    width: 192px;
    top: -77px;
    right: 25%;
}
.link_sec .link_area {
}
.link_sec .link_area .case_wrap {
    padding-bottom: 30px;
}
.link_sec .link_area .flex_box .s_box {
    margin: 0 auto;
    width: 90%;
    margin-bottom: 30px;
}
}