﻿ul.resp-tabs-list, p { margin:0; padding:0;}

.resp-tabs-list li {
 float:left; width:300px; margin:0 10px 0 0; padding:7px 10px 6px 20px;
 display:inline-block; cursor:pointer; text-align:center;
 color:#FFF; font-size:22px; font-weight:normal; list-style:none;
 border-radius:0; background-color:#D9A300;}
.resp-tabs-list li:first-of-type { width:320px; background:#444!important;}
.resp-tabs-list li:last-of-type { background:#85B200!important;}
.resp-tabs-list li.resp-tab-active {
 margin-bottom:0!important; padding:7px 15px 6px 15px!important;}
.resp-tabs-list li.resp-tab-active {}

.resp-tabs-container { clear:left; padding:0;}
.resp-tab-content { padding:20px; display:none;}

.resp-content-active, .resp-accordion-active { display:block;}

h2.resp-accordion {
 margin:0; padding:10px 15px; display:none; cursor:pointer; font-size:13px;
 border:1px solid #C1C1C1; border-top:0px solid #C1C1C1;}
h2.resp-tab-active {
 margin-bottom:0!important; padding:10px 15px!important;
 border-bottom:0px solid #C1C1C1!important;}
h2.resp-tab-title:last-child {
 border-bottom:12px solid #C1C1C1!important; background:blue;}

/*-----------Vertical tabs-----------*/

.resp-vtabs ul.resp-tabs-list { float:left; width:30%;}
.resp-vtabs .resp-tabs-list li {
 float:none; margin:0; padding:15px 15px!important; display:block; cursor:pointer;}
.resp-vtabs li.resp-tab-active {
 margin-right:-1px!important; padding:14px 15px 15px 14px!important;
 position:relative; z-index:1;
 border:1px solid #C1C1C1; border-right:none; background-color:#FFF;}
.resp-vtabs .resp-tabs-container {
 clear:none; float:left; width:68%; min-height:250px; padding:0;
 border-radius:4px; border:1px solid #C1C1C1; background-color:#FFF;}
.resp-vtabs .resp-tab-content { border:none;}

/*プラスアイコン*/
.resp-arrow:before, .resp-arrow:after {
 width:3px; height:17px; display:block; content:'';
 position:absolute; top:11px; right:21px;
 border-radius:0; background-color:#FFF;}
.resp-arrow:before { width:17px; height:3px; top:18px; right:14px;}

/*マイナスアイコン*/
h2.resp-tab-active span.resp-arrow:before {
 width:17px; height:3px; margin:0 0 0 -7px;
 display:block; content:''; border-radius:0; background-color:#FFF;}
h2.resp-tab-active span.resp-arrow:after { display:none;}

/*-----------Accordion styles-----------*/

h2.resp-tab-active {}
h2.resp-accordion:first-child { border-top:none!important;}
.resp-easy-accordion  h2.resp-accordion { display:block;}
.resp-easy-accordion .resp-tab-content { border:1px solid #EBE3D1;}
.resp-easy-accordion .resp-tab-content:last-child { border-bottom:1px solid #EBE3D1!important;}
.resp-tab-content-active { display:block;}
.resp-jfit { width:100%; margin:0;}

/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/

@media only screen and (max-width:1000px) {
.resp-tabs-list li { width:30%; padding:7px 3px 6px 5px; font-size:19px;}
.resp-tabs-list li.resp-tab-active { padding:7px 5px 6px 5px!important;}
.resp-tabs-list li:first-of-type { width:34.5%;}
}

@media only screen and (max-width:800px) {
ul.resp-tabs-list { display:none;}
h2.resp-accordion {
 display: block; position:relative; color:#FFF; font-size:18px; font-weight:normal;
 border:none; border-bottom:1px solid #EBE3D1; background:#D9A300!important;}
h2.resp-accordion:first-of-type { background:#444!important;}
h2.resp-accordion:last-of-type { border-bottom:none!important; background:#85B200!important;}
.resp-vtabs .resp-tabs-container {
 clear:none; float:none; width:100%; min-height:initial; border:none;}
.resp-accordion-closed { display:none!important;}
.resp-vtabs .resp-tab-content:last-child { border-bottom:1px solid #EBE3D1!important;}
}
