*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
.slider{
	
    margin: 10px auto;
    width: 85%;
}
.slide{
	position: relative;
}
.slide__link{
	color: #fff;
	text-align: center;
}
.slide img{
	height: auto;
	width: 100%;
}
.slide__content-wrap{
	left: 50%;
	position: absolute;
	top: 50%;
}
.slide__content{
	display: block;
	opacity: 0;
	transform: translate(-50%,20%);
	transition: 0s;
}
.slide__content.on{
	opacity: 1;
	transform: translate(-50%,-50%);
	transition: .5s;
}
.slide__title{
	font-size: 48px;
}
/*slick setting
.slick-prev:before,
.slick-next:before{
    color: #000;
}
*/

/*slide下部文言　2019/10/18追加 */
.slick-slide {
  position: relative;
}
.slick-slide .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: calc(100%);
  padding: 10px;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 16px;
  opacity: 0;
  transition: .3s ease;
}
.slick-current .caption {
  opacity: 1;
  transition-delay: .5s;
}


/* loginMenu 2019.10.18追加
------------------------------------------ */

@media screen and (min-width: 0em) and (max-width:56.25em){
	.loginMenu { display: none;}
	.search { display: none;}
	.shohin1 { display: none;}
	.img1 { display: none;}
	.smh1 { display: none;}
	.loanMenu { display: none;}
	.footerH { display: none;}
	.mainmenu1 { display: none;}
	.saiMenu { display: none;}
	.youtube1{ display: none;}

}
/*and (max-width:56.25em){
	.loanMenu { display: none;}
}*/

@media screen and (min-width:56.25em){
	.shohin2 { display: none;}
	.smh2 { display: none;}
	.hakodentaku2 { display: none;}
	.home2 { display: none;}
	.note2 { display: none;}
	.loginMenu2 { display: none;}
	.smh3 { display: none;}
	.UnderMenu1 { display: none;}
	.youtube2{ display: none;}
}

.loginMenu {
  position: absolute;
  /*margin: 250px auto 0 0;*/
  width: 100%;
  top: 130px;
  left: 250px;
}



.loginMenu__list {
  position: relative;
  display: table;
  width: auto;
  margin-right: auto;
  min-width: 264px;
  z-index: 520;
}

.loginMenu__list > li a {
  min-width: 248px;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
}

.loginMenu__list > li a img {
  display: block;
  max-width: 100%;
}

.loginMenu__list > li a:hover {
  opacity: .7;
}

.loginMenu__list > li a span {
  font-size: 1.8rem;
}

.loginMenu__bg {
  padding: 8px;
  background-color: rgba(255,64,61,.70);
}

.loginMenu__bg1 {
  padding: 8px;
  background-color: rgba(71,136,255,.70);
}


.loginMenu__open {
  display: block;
  margin-top: 10px;
}

.loginMenu__kojin {
  list-style: none;	
  width: 350px;
}

.loginMenu__hojin, .loginMenu__operation {
  list-style: none;
  width: 350px;
  margin-top: 6px;
}

.loginMenu__kojin {
  list-style: none;	
  width: 350px;
}


.Menu__youtube, {
  list-style: none;
  width: 560px;
  
}

.loginMenu__cord {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
  background-color: #fff;
  width: 264px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*smh*/
.loginMenu1 {
	text-align: center;
	display: block;
    padding: 5px;              /* 余白指定 */	
}


.loginMenu__list1 {
  text-align: center;
  position: relative;
  display: table;
  width: 100%;
  margin-right: auto;
  min-width: 50%;
  margin:0 auto;
  z-index: 520;
}

.loginMenu__list1 > li a {
  min-width: 80%;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin:0 auto;
  text-decoration: none;
}

.loginMenu__list1 > li a img {
  display: block;
  margin:0 auto;
  max-width: 90%;
}

.loginMenu__list1 > li a:hover {
  opacity: .7;
}

.loginMenu__list1 > li a span {
  font-size: 1.8rem;
}

.loginMenu__bg3 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(255,0,0,0.69);
}

.loginMenu__bg4 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(28,62,255,0.69);
}


.loginMenu__open1 {
  display: block;
  margin-top: 10px;
}

.loginMenu__kojin1 {
  margin:0 auto;
  list-style: none;	
  width: 90%;
}

.loginMenu__hojin1, .loginMenu__operation1 {
  margin:0 auto;
  list-style: none;
  width: 90%;
  margin-top: 6px;
}


.loginMenu__cord1 {
  margin:0 auto;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
  background-color: #fff;
  width: 90%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*smh end*/
/*Login Menu End*/

/*Loan menu*/
.loanMenu {
  position: absolute;
  /*margin: 50px auto 0 660px;*/
  width: 70%;
  top: 400px;
  /*left: 660px;*/
  left: 660px;
}
.loanMenu1 {
  list-style: none;
  width: 350px;
  margin-top: 6px;
}



.loanMenu__list {
  position: relative;
  display: table;
  width: auto;
  margin-right: auto;
  min-width: 264px;
  z-index: 520;
}

.loanMenu__list > li a {
  min-width: 248px;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
}

.loanMenu__list > li a img {
  display: block;
  max-width: 100%;
}

.loanMenu__list > li a:hover {
  opacity: .7;
}

.loanMenu__list > li a span {
  font-size: 1.8rem;
}

.loanMenu__bg {
  padding: 8px;
  background-color: rgba(255,64,61,.70);
}



.loanMenu__open {
  display: block;
  margin-top: 10px;
}

.loanMenu__1 {
  list-style: none;	
  width: 500px;
}


.loanMenu__cord {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
/*  padding: 10px;*/
  padding-bottom:10000px;
  background-color: #fff;
  width: 264px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


/*saiyou Menu End*/

/*saiyou menu*/
.saiMenu {
  position: absolute;
  /*margin: 50px auto 0 660px;*/
  width: 70%;
  top: 254px;
  /*left: 660px;*/
  left: 390px;
}
.saiMenu1 {
  list-style: none;
  width: 350px;
  margin-top: 6px;
}



.saiMenu__list {
  position: relative;
  display: table;
  width: auto;
  margin-right: auto;
  min-width: 264px;
  z-index: 520;
}

.saiMenu__list > li a {
  min-width: 248px;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #fff;
  text-decoration: none;
  display: block;
}

.saiMenu__list > li a img {
  display: block;
  max-width: 100%;
}

.saiMenu__list > li a:hover {
  opacity: .7;
}

.saiMenu__list > li a span {
  font-size: 1.8rem;
}

.saiMenu__bg {
  padding: 8px;
  background-color: rgba(0,128,0,.70);
}



.saiMenu__open {
  display: block;
  margin-top: 10px;
}

.saiMenu__1 {
  list-style: none;	
  width: 500px;
}


.saiMenu__cord {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
/*  padding: 10px;*/
  padding-bottom:10000px;
  background-color: #fff;
  width: 264px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/*saiyou Menu End*/


/*smh-menu */
.Menu__list {
  text-align: center;
  position: relative;
  display: table;
  width: 100%;
  margin-right: auto;
  min-width: 50%;
  margin:0 auto;
  z-index: 520;
}

.Menu__list > li a {
  min-width: 80%;
  position: relative;
  font-weight: 700;
  text-align: center;
  color: #fff;
  margin:0 auto;
  text-decoration: none;
}

.Menu__list > li a img {
  display: block;
  margin:0 auto;
  max-width: 90%;
}

.Menu__list > li a:hover {
  opacity: .7;
}

.Menu__list > li a span {
  font-size: 1.8rem;
}

.Menu__bg1 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(255,64,61,.70);
}

.Menu__bg2 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(71,136,255,.70);
}

.Menu__bg3 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(71,136,255,.70);
}
.Menu__bg4 {
  margin:0 auto;
  padding: 8px;
  background-color: rgba(71,136,255,.70);
}

.Menu__open {
  display: block;
  margin-top: 10px;
}

.Menu__koza {
  margin:0 auto;
  list-style: none;	
  width: 90%;
}

.Menu__yokin, .Menu__yushi, .Menu__kessai {
  margin:0 auto;
  list-style: none;
  width: 90%;
  margin-top: 6px;
}

.Menu__cord {
  margin:0 auto;
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 10px;
  background-color: #fff;
  width: 90%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/*smh-menu end*/



.search {
 width: 443px;
 text-align:  center;
 margin: 0 0 0 auto;
 z-index: -9999999999;
 pading: 10px;

}


/*==========
上に戻るボタン
===========*/
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
	z-index:9999991;
}
.pagetop a {
    display: block;
    text-decoration: none;
    padding: 5px 10px;
    opacity: 0.8;
}
.pagetop a:hover {
    display: block;
    text-decoration: none;
    padding:5px 10px;
    opacity: 1;
}
.inq_pagetop {
    bottom: 80px !important;
}
/*
@media screen and (max-width: 768px) {
    .is_display {
        display: none !important;
    }
}
*/
.under_line_red{
	background:linear-gradient(transparent 85%, #ff6f6f 90%);
	font-weight:bold;
}

.under_line_blue{
	background:linear-gradient(transparent 85%, #6f79ff 90%);
	font-weight:bold;
}

.color_box_blue{
	padding: 0.5em;
	margin: 1em 0;
	background: #cde4ff;
}



.msr_h102 {
  background: #FF3333;
  box-sizing: border-box;
  color: #FFFFFF;
  font-size: 30px;
  /*margin-bottom: 30px;*/
  padding: 8px 10px;
  position: relative;
  width: 100%;
}

/* h1青の三角形 */
.msr_h102:before {
  border: 10px solid transparent;
  border-top: 10px solid #FF3333;
  content: "";
  height: 0;
  left: 10px;
  position: absolute;
  top: 100%;
  width: 0;
}
.msr_h202 {
  border-bottom: 2px solid #FF3333;
  box-sizing: border-box;
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 20px;
  padding: 7px 0 2px 0;
}

/*ボタンCSS*/
.btn-wrap
{
    margin-top: 20px;
}

@media screen and (max-width: 767px)
{
    .btn-wrap
    {
        margin-top: 10px;
    }
}



/*お知らせ*/
/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 120px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 97%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
  width: calc(100%/3);
  height: 50px;
  border-bottom: 3px solid #09F;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #09F;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #09F;
  color: #fff;
}

.smh2 {
  background-image: url("../../../common/image/smh2.jpg");
  background-position:top;
  background-repeat:no-repeat; 
  width: 100%;
}
.home2 {
  background-image: url("../../../common/image/home2.jpg");
  background-position:top;
  background-repeat:no-repeat; 
  width: 100%;
}
.note2 {
  background-image: url("../../../common/image/note2.jpg");
  background-position:top;
  background-repeat:no-repeat; 
  width: 100%;
}
.hakodentaku2 {
  background-image: url("../../../common/image/hakodentaku2.jpg");
  background-position:top;
  background-repeat:no-repeat; 
  width: 100%;
}

/*smh用ボタン*/
.flat.border {
  position: relative;
  text-align: center;
  /* 中央揃え */
  display: block;
  margin: 0 auto;
  /* 幅の指定 */
  width: 100%;
  max-width: 90%;
  box-sizing: border-box;
  padding: 20px;
  /* 色の指定 */
  background: linear-gradient(135deg, #ffd900, #09F);
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  transition: 0.3s;
  border: 2px solid #09F;
  background: #FFF;
  color: #09F;
}

.flat.border:hover {
  background: #09f;
  color: #fff;
}
.flat.border:active, .flat.border:focus {
  top: 2px;
}


a.cp_btn {
	display: block;
	position: relative;
	width: auto;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	/*border:1px solid #8BC34A;*/
	background: #09F;
	overflow: hidden;
	z-index: 1 !important;
}
a.cp_btn:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-90%) translateY(-5%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
}
a.cp_btn:hover {
	color: #da3c41;
}
a.cp_btn:hover:after {
	height: 250%;
	opacity: 1;
}
a.cp_btn:active:after {
	height: 350%;
	opacity: 1;
}

/*smh1 IB用ボタン*/
.flat1.border1 {
  position: relative;
  text-align: center;
  /* 中央揃え */
  display: block;
  margin: 0 auto;
  /* 幅の指定 */
  width: 100%;
  max-width: 90%;
  box-sizing: border-box;
  padding: 10px;
  /* 色の指定 */
  background: linear-gradient(135deg, #ffd900, #09F);
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  transition: 0.3s;
  border: 2px solid #F00;
  background: #fff;
  color: #F00;
}
.flat1.border1:hover {
  background: #F00;
  color: #fff;
}
.flat1.border1:active, .flat1.border:focus {
  top: 2px;
}


a.cp_btn1 {
	display: block;
	position: relative;
	width: auto;
	padding: 0.8em;
	text-align: center;
	text-decoration: none;
	color: #fff;
	/*border:1px solid #8BC34A;*/
	background: #F00;
	overflow: hidden;
	z-index: 1 !important;
}
a.cp_btn1:after {
	content:"";
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 100%;
	background : #fff;
	opacity: 0;
	transform: translateX(-90%) translateY(-5%) rotate(45deg);
	transition: 0.3s;
	z-index: -1;
}
a.cp_btn1:hover {
	color: #da3c41;
}
a.cp_btn1:hover:after {
	height: 250%;
	opacity: 1;
}
a.cp_btn1:active:after {
	height: 350%;
	opacity: 1;
}


.s1fd{
	background-image:url(../../../common/image/91.png);
	background-repeat: no-repeat;
}
.side-category{
	list-style-type:none;text-align: center;
	}
@media screen and (max-width:768px){
	.side-category{
		padding-left: 5%;
	}
}
.side-sub{
	padding-bottom:10px;
	min-width: 180px;
	display: inline-block;
	vertical-align: top;
	text-align: left;
}
@media screen and (max-width:768px){.side-sub{min-width: 160px;}}
.side-category-child{
	list-style-type:none;
	margin-left:5%;
	}
.side-sub-title{
	color:#666;
	font-size:17px;
	margin:5px 0 2px;
	}
.side-sub-title:first-letter {font-size: 1.5em;}
.side-sub-title:after {content: "";display: block;height: 2px;width: 60%;background: -webkit-linear-gradient(left, #40bfa0 0%,#fef785 82%,#f37b7b 100%);
/*background: linear-gradient(to right, #40bfa0 0%,#fef785 82%,#f37b7b 100%);*/
}


/* 17322 フッターお問い合わせボタン */
#CONTACT_BTN {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 65px;
	line-height: 65px;
	text-align: center;
    z-index: 9999999;
}
#CONTACT_BTN > span {
	background-color: #f99;
	display: block;
}
#CONTACT_BTN > span > span {
	font-size: 12px;
}

#LP_BNR #bnrInr{
	width: 220px;
    margin-bottom: 20px;
}


#LP_BNR #bnrInr a:hover {
	filter: Alpha("opacity=80");opacity:0.8;
	text-decoration: none;
}

/*=====================
170329
=====================*/


#CONTACT_BTN {
	background-color: rgba(0, 0, 0, 0.6);
	display: block;
	height: auto;
	padding: 15px;
}


#CONTACT_BTN input:hover{
	cursor: pointer;
}

#CONTACT_BTN .l_btn{
	float: left;
	margin-right: 0;
}

#CONTACT_BTN .r_btn{
	float: right;
}

#CONTACT_BTN .l_btn,
#CONTACT_BTN .r_btn {
     width: 48%;
}

#CONTACT_BTN .r_btn a:hover,
#CONTACT_BTN .l_btn a:hover,
#CONTACT_BTN .r_btn input:hover,
#CONTACT_BTN .l_btn input:hover{
	filter: Alpha("opacity=80");opacity:0.8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	text-decoration: none;}


#CONTACT_BTN .l_btn a,
#CONTACT_BTN .l_btn input {
    line-height: 35px;
    padding-top: 5px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: none;
    color: #fff;
    font-weight: bold;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", sans-serif;
}

#CONTACT_BTN .r_btn a,
#CONTACT_BTN .r_btn input {
    line-height: 35px;
    padding-top: 5px;
    display: inline-block;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border: none;
    color: #fff;
    font-weight: bold;
    font-family: "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", sans-serif;
}

/*相談をする*/
#CONTACT_BTN a.consultation,
#CONTACT_BTN input.consultation{
    /*width: auto;*/
    display: block;
    background: #9fc24d;
    box-shadow: 0 3px #4d6a29;
    -moz-box-shadow: 0 3px #4d6a29;
    -webkit-box-shadow: 0 3px #4d6a29;
    -o-box-shadow: 0 3px #4d6a29;
    -ms-box-shadow: 0 3px #4d6a29;
    border-bottom: 1px solid #9fc24d;
/*    background: #ff7c7c;
    box-shadow: 0 3px #cb4848;
    -moz-box-shadow: 0 3px #cb4848;
    -webkit-box-shadow: 0 3px #cb4848;
    -o-box-shadow: 0 3px #cb4848;
    -ms-box-shadow: 0 3px #cb4848;
    border-bottom: 1px solid #ff7c7c; */
    font-size: 16px;
}

/*マニュアル*/
#CONTACT_BTN a.inexperience,
#CONTACT_BTN input.inexperience{
    /*width: auto;*/
    display: block;
    /*background: #3e7eb6;*/
    /*background: #ff943e;2023.9.6	*/
	background: #fa5aad;
    /*box-shadow: 0 3px #fd7e00;*/
	box-shadow: 0 3px #cc4792;
	-moz-box-shadow: 0 3px #cc4792;
    -webkit-box-shadow: 0 3px #cc4792;
    -o-box-shadow: 0 3px #cc4792;
    -ms-box-shadow: 0 3px #cc4792;	
    /*-moz-box-shadow: 0 3px #fd7e00;
    -webkit-box-shadow: 0 3px #fd7e00;
    -o-box-shadow: 0 3px #fd7e00;
    -ms-box-shadow: 0 3px #fd7e00;*/
    /*box-shadow: 0 3px #0a4a82;
    -moz-box-shadow: 0 3px #0a4a82;
    -webkit-box-shadow: 0 3px #0a4a82;
    -o-box-shadow: 0 3px #0a4a82;
    -ms-box-shadow: 0 3px #0a4a82;*/
    border-bottom: 1px solid #cc4792;
    font-size: 16px;
}

#CONTACT_BTN  .center{
	/*width: 670px;*/
	width: 760px;
	margin: 0 auto;
}

.sp_only{
	display: none;
}

@media (max-width: 768px) {

	#CONTACT_BTN {
    height: auto;
    line-height: 65px;
		padding: 0px;
}
	#CONTACT_BTN .l_btn,
	#CONTACT_BTN .r_btn {
	     /*width: 150px; */
			width: 45%;
			padding: 10px 12px;
	}
	.sp_only{
		display: block;
	}

	#CONTACT_BTN .r_btn a,
	#CONTACT_BTN .l_btn a,
	#CONTACT_BTN .r_btn input,
	#CONTACT_BTN .l_btn input{
		font-size: 14px;
		line-height: 18px;
		padding: 10px 5px 8px;
		/*padding-bottom: 2px;*/
	}

	#CONTACT_BTN .r_btn input,
	#CONTACT_BTN .l_btn input{
		min-height: 55px;
	}

	#CONTACT_BTN  .center{
		width: 100%;
		margin: 0 auto;
		/*padding: 20px 0px;*/
	}

	#CONTACT_BTN .l_btn{
		padding-right: 0;
	}

	#CONTACT_BTN .r_btn{
		padding-left: 0;
	}
}

/*=====================
170404
=====================*/
/*下部のナビゲーション調整用*/
@media (min-width: 769px) {
	.fotter_mb{
		margin-bottom: 70px;
	}
}
@media (max-width: 768px) {
	.fotter_mb{
		margin-bottom: 75px;
	}
}

/*=====================
170411abeadd
=====================*/
#bnrInr{
z-index: 2;
position: static;
}
#SP_CONT{
z-index: 1;
position: relative;
}
@media (max-width: 768px) {
	#SP_CONT{
		z-index: inherit;
		position: inherit;
	}
}


/* Acordion Faq */

.tab {
  /*padding: 0px 10px 0px 10px;*/
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}
/*p[class]{*/
/*
.checkbox-input{
  display: none;
}
.checkbox-parts{
  padding-left: 20px;
  position:relative;
  margin-right: 20px;
}
.checkbox-parts::before{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid #999;
  border-radius: 4px;
}
.checkbox-input:checked + .checkbox-parts{
  color: #d01137;
}
.checkbox-input:checked + .checkbox-parts::after{
  content: "";
  display: block;
  position: absolute;
  top: -5px;
  left: 5px;
  width: 7px;
  height: 14px;
  transform: rotate(40deg);
  border-bottom: 3px solid #d01137;
  border-right: 3px solid #d01137;
}
*/
/*
input {*/

.checkbox1 {
  position: absolute;
  opacity: 0;
  z-index: -1;
}

label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #000;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
  background-color: #9ba0a3;
}

.tab-content {
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
  color: #000;
}

.tab-content p {
  margin: 1em;
}
/* :checked */
input:checked ~ .tab-content {
  max-height: 100%;
}
/* Icon */
label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
input[type=checkbox] + label::after {
  content: url(https://www.masushin.jp/common/image/sankaku1.png);
  /*content: "->";*/
}
input[type=checkbox]:checked + label::after {
  transform: rotate(90deg);
}
input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 50px;
  margin: auto;
  position: relative;
  background-color: #2c3e50;
  z-index: 7;

  li {
    float: left;
    width: 25%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  a {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none;
    position: relative;
    font-size: 18px;
    z-index: 9;
  }
}

a.active {
  background-color: #e74c3c;
  pointer-events: none;
}

li.slider12 {
  width: 25%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #e74c3c;
  z-index: 8;
  transition: left .4s, background-color .4s;
}

.menu li:nth-child(1):hover,
.menu li:nth-child(1):focus,
.menu li:nth-child(1):active {
  & ~ .slider12 {
    left: 0;
    background-color: #e74c3c;
  }
}


.menu li:nth-child(2):hover,
.menu li:nth-child(2):focus,
.menu li:nth-child(2):active {
  & ~ .slider12 {
    left: 25%;
    background-color: #e74c3c;
  }
}

.menu li:nth-child(3):hover,
.menu li:nth-child(3):focus,
.menu li:nth-child(3):active {
  & ~ .slider12 {
    left: 50%;
    background-color: #e74c3c;
  }
}

.menu li:nth-child(4):hover,
.menu li:nth-child(4):focus,
.menu li:nth-child(4):active {
  & ~ .slider12 {
    left: 75%;
    background-color: #e74c3c;
  }
}