@charset "UTF-8";
/* CSS Document */

.br-sp {
  display: none;
}

.top-ul {
	margin-bottom: 0;
	padding-left: 0;
}

.top-list {
	font-size: 15px;
}

.top-sublist {
	font-size: 15px;
	margin-left: 1%;
}

.subttl {
	font-size: 16px;
	color: #000;
	margin-bottom: 1%;
}

.subttl2 {
	font-size: 16px;
	color: #000;
	margin-bottom: 0;
}

.gttl {
	font-size: 20px !important;

}

.gttl2 {
	font-size: 18px !important;

}

.dttxt {
	text-align: center;
	font-size: 20px;
	color: #E64552;
	padding: 1% 2%;
	border: 2px solid;
	width: 60%;
	margin: 0 auto;
	
}

.unline {
	background: linear-gradient(transparent 75%, yellow 30%);
    display: inline-block;
}

.tabttl {
	border-bottom: 0px !important;
}

.img-fix {
	margin-top: 1%;
	margin-right: auto;
	margin-left: auto;
	display: block;
	
}

.sizeBox {
    display:flex;
    justify-content: center;
    gap: 12%;
}

.sizeBox2 {
    display:flex;
    justify-content: center;
    gap: 19%;
}


.liSize {
	padding: 1% 3%;
	border:2px solid #24bbb7;
	border-radius: 7px;
	color: #24bbb7;
	font-weight: bolder;
}

.dsize {
    text-align: center;
    margin-bottom: 2%;
    font-weight: bolder;
    font-size: 17px;
}


/*タブ切り替え全体のスタイル*/
.tabs {
  margin-top: 1%;
  margin-bottom: 2%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 40px;
  background-color: #fff;
  width: 100%;
  /* border: 1px solid #d9d9d9; */
  margin-bottom: 2%;
}

.tabs2 {
  margin-top: 1%;
  margin-bottom: 2%;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 3%;
  background-color: #fff;
  width: 99%;
  border: 1px solid #d9d9d9;
  margin-bottom: 2%;
}


/*タブのスタイル*/
.tab_item {
  width: calc(99%/6);
  height: 50px;
  /* border-bottom: 3px solid #24bbb7; */
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
  border-collapse: collapse;
}

.tab_item2,.tab_item3,.tab_item4,.tab_item5,.tab_item6,.tab_item7 {
  width: calc(99.7%/3);
  height: 50px;
  border-bottom: 3px solid #24bbb7;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
}

.ptab_item,.ptab_item2,.ptab_item3,.ptab_item4,.ptab_item5 {
  width: calc(99%/5);
  height: 50px;
  /* border-bottom: 3px solid #24bbb7; */
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
}

.ptab_item2, .ptab_item3, .ptab_item4, .ptab_item5, .ptab_item6 {
  width: calc(99.8%/2);
  height: 50px;
  border-bottom: 3px solid #24bbb7;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
}

.htab_item,.htab_item2,.htab_item3,.htab_item4,.htab_item5 {
  width: calc(99.4%/6);
  height: 50px;
  /* border-bottom: 3px solid #24bbb7; */
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
}

.htab_item2,.htab_item3,.htab_item4,.htab_item5,.htab_item6,.htab_item7 {
  width: calc(99.7%/3);
  height: 50px;
  border-bottom: 3px solid #24bbb7;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  cursor: pointer;
  border-left: 1px solid #fff;
}

.tab_item:hover {
  opacity: 0.75;
}

.ptab_item:hover {
  opacity: 0.75;
}

.htab_item:hover {
  opacity: 0.75;
}

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

input[name="tab_item2"] {
  display: none;
}

input[name="tab_item3"] {
  display: none;
}

input[name="tab_item4"] {
  display: none;
}

input[name="tab_item5"] {
  display: none;
}

input[name="tab_item6"] {
  display: none;
}

input[name="tab_item7"] {
  display: none;
}

input[name="ptab_item"] {
  display: none;
}

input[name="ptab_item2"] {
  display: none;
}

input[name="ptab_item3"] {
  display: none;
}

input[name="ptab_item4"] {
  display: none;
}

input[name="ptab_item5"] {
  display: none;
}

input[name="ptab_item6"] {
  display: none;
}

input[name="htab_item"] {
  display: none;
}

input[name="htab_item2"] {
  display: none;
}

input[name="htab_item3"] {
  display: none;
}

input[name="htab_item4"] {
  display: none;
}

input[name="htab_item5"] {
  display: none;
}

input[name="htab_item6"] {
  display: none;
}

input[name="htab_item7"] {
  display: none;
}


/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding-top: 2%;
  clear: both;

}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#t140:checked ~ #t140_content,
#tssize:checked ~ #tssize_content,
#twmsize:checked ~ #twmsize_content,
#tmsize:checked ~ #tmsize_content,
#tlsize:checked ~ #tlsize_content,

#pall:checked ~ #pall_content,
#p140:checked ~ #p140_content,
#pssize:checked ~ #pssize_content,
#pmsize:checked ~ #pmsize_content,
#plsize:checked ~ #plsize_content,

#hall:checked ~ #hall_content,
#h140:checked ~ #h140_content,
#hssize:checked ~ #hssize_content,
#hwmsize:checked ~ #hwmsize_content,
#hmsize:checked ~ #hmsize_content,
#hlsize:checked ~ #hlsize_content,

#all2:checked ~ #all_content2,
#programming2:checked ~ #programming_content2,
#design2:checked ~ #design_content2,
#all3:checked ~ #all_content3,
#programming3:checked ~ #programming_content3,
#design3:checked ~ #design_content3,
#all4:checked ~ #all_content4,
#programming4:checked ~ #programming_content4,
#design4:checked ~ #design_content4,
#all5:checked ~ #all_content5,
#programming5:checked ~ #programming_content5,
#design5:checked ~ #design_content5,
#all6:checked ~ #all_content6,
#programming6:checked ~ #programming_content6,
#design6:checked ~ #design_content6,
#all7:checked ~ #all_content7,
#programming7:checked ~ #programming_content7,
#design7:checked ~ #design_content7,

#pall2:checked ~ #pall_content2,
#pprogramming2:checked ~ #pprogramming_content2,
#pdesign2:checked ~ #pdesign_content2,
#pall3:checked ~ #pall_content3,
#pprogramming3:checked ~ #pprogramming_content3,
#pdesign3:checked ~ #pdesign_content3,
#pall4:checked ~ #pall_content4,
#pprogramming4:checked ~ #pprogramming_content4,
#pdesign4:checked ~ #pdesign_content4,
#pall5:checked ~ #pall_content5,
#pprogramming5:checked ~ #pprogramming_content5,
#pdesign5:checked ~ #pdesign_content5,
#pall6:checked ~ #pall_content6,
#pprogramming6:checked ~ #pprogramming_content6,
#pdesign6:checked ~ #pdesign_content6,

#hall2:checked ~ #hall_content,
#hprogramming2:checked ~ #hprogramming_content2,
#hdesign2:checked ~ #hdesign_content2,
#hall3:checked ~ #hall_content3,
#hprogramming3:checked ~ #hprogramming_content3,
#hdesign3:checked ~ #hdesign_content3,
#hall4:checked ~ #hall_content4,
#hprogramming4:checked ~ #hprogramming_content4,
#hdesign4:checked ~ #hdesign_content4,
#hall5:checked ~ #hall_content5,
#hprogramming5:checked ~ #hprogramming_content5,
#hdesign5:checked ~ #hdesign_content5,
#hall6:checked ~ #hall_content6,
#hprogramming6:checked ~ #hprogramming_content6,
#hdesign6:checked ~ #hdesign_content6,
#hall7:checked ~ #hall_content7,
#hprogramming7:checked ~ #hprogramming_content7,
#hdesign7:checked ~ #hdesign_content7
{
  display: block;
}


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

.tabs input:checked + .tab_item2 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .tab_item3 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .tab_item4 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}


.tabs input:checked + .tab_item5 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .tab_item6 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .tab_item7 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item {
  background-color: #f80;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item2 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item3 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item4 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item5 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .ptab_item6 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item {
  background-color: #f80;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item2 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item3 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item4 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item5 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item6 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}

.tabs input:checked + .htab_item7 {
  background-color: #24bbb7;
  color: #fff;
  cursor: pointer;
}
.mov {
    position: relative;
}
.mov .yt_icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0.9;
}




/*SPCSSここから*/
@media screen and (max-width:767px) {

.br-pc {
    display: none;
}

.br-sp {
    display: inline-block;
}

.sp-none {
	display: none;
}

.tab_item {
	width: calc(98% / 6);
	height: 35px;
	line-height: 35px;
	
}

.ptab_item {
	width: calc(98% / 5);
	height: 35px;
	line-height: 35px;
}

.htab_item {
	width: calc(98% / 6);
	height: 35px;
	line-height: 35px;
}

.tab_item2,.tab_item3,.tab_item4,.tab_item5,.tab_item6,.tab_item7 {
	width: calc(99% / 3);
	height: 35px;
	line-height: 35px;
}

.ptab_item2,.ptab_item3,.ptab_item4,.ptab_item5,.ptab_item6,.ptab_item7 {
	width: calc(99% / 2);
	height: 35px;
	line-height: 35px;
}

.htab_item2,.htab_item3,.htab_item4,.htab_item5,.htab_item6,.htab_item7 {
	width: calc(99% / 3);
	height: 35px;
	line-height: 35px;
}

.dttxt {
	width: 95%;
	font-size: 17px;
	line-height: 24px;
}

.sizeBox {
	width: 90%;
	margin: 0 auto;
	margin-bottom: 3%;
}

.sizeBox2 {
	margin-bottom: 3%;
}

.gttl {
	font-size: 17px !important;
}

.liSize {
	line-height: 20px;
}
.dttxt small {
	font-size: 14px;
}

}
/*SPCSSここまで*/