<style>
@media screen and (min-width: 1046px) and (max-width: 1325px) {
.pc{
	display: none;
}

.smart{
	display: none;
}
}

.square_btn_z {
	font-size:1.2em;
	width:80%;
	max-width:300px;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	background: #c8e637;/*定期購読*/
	padding:0.5em;
	text-align: center;
	margin:1em;
	border-radius:10px;
  }

.square_btn_z:hover {
    background: #e6e637;/*定期購読*/
}
.square_btn_z a{
color: #FFF;
}


.square_btn_w {
	font-size:1.2em;
	width:80%;
	max-width:300px;
	font-weight: bold;
	text-decoration: none;
	background: #00d4d4;/*定額オンライン*/
	padding:0.5em;
	text-align: center;
	margin:1em;
	border-radius:10px;
  }

.square_btn_w:hover {
    background: #1ec7bb;/*定額オンライン*/
}
.square_btn_w a{
color: #FFF;
}

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

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  /*border-bottom: 3px solid #e3e3da;/*ベージュ*/
  background-color:#3f3f3f;/*#d9d9d9*/
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color:#fff;/*#565656*/
  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: 1em 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: #e3e3da;/*ベージュ*/
  color: #000;/*黒*/
}


.midashi{
	text-align: center;
	font-size: 160%;
	margin:30px 0;
	line-height:1.2em;
	clear:both;
}

/*=================== サービス・Q&A ===================*/
.cp_actab {
position: relative;
overflow: hidden;
width: 80%;
margin: 0 auto;
color: #363636;/*質問文字色*/
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-weight: bold;
line-height:2em;
position: relative;
display: block;
padding: 0.5em 3em 0.5em 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #e3e3da;/*質問背景色*/
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
background: #f5f4f2;/*回答背景色*/
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 100em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}

/*=================== お問い合わせ ===================*/

/*お問い合わせボタン*/
.toiawase_btn {
    display: inline-block;
    padding: 0.7em 1.2em;
    text-decoration: none;
    color: #8f8973;
    border: solid 2px #8f8973;
    border-radius: 3px;
    transition: .4s;
}

.toiawase_btn:hover {
    background: #8f8973;
    color: white;
}

/*=================== オンラインコンテンツ一覧 ===================*/
.club_slider{
    width:30%;
    float:none;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}

/*.club_slider{ 元の数値
    width:90%;
    max-width:300px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
}*/

 
.club_slider__content{
    min-width: 100%;
    animation: sliderAnime 20s ease-in-out infinite;/*スライダーのアニメーション20秒*/
}
  
  
@keyframes sliderAnime{
    0%{
 
    }
    6%{/*20秒の6%で位置は0*/
        transform: translateX(0);
    }
	10%{/*20秒の10%で位置を-100%移動する*/
        transform: translateX(-100%);
    }
	16%{
        transform: translateX(-100%);
    }
	20%{
        transform: translateX(-200%);
    }
	26%{
        transform: translateX(-200%);
    }
	30%{
        transform: translateX(-300%);
    }
	36%{
        transform: translateX(-300%);
    }
	40%{
        transform: translateX(-400%);
    }
	46%{
        transform: translateX(-400%);
    }
	50%{
        transform: translateX(-500%);
    }
	56%{
        transform: translateX(-500%);
    }
	60%{
        transform: translateX(-600%);
    }
	66%{
        transform: translateX(-600%);
    }
	70%{
        transform: translateX(-700%);
    }
	76%{
        transform: translateX(-700%);
    }
	80%{
        transform: translateX(-800%);
    }
	86%{
        transform: translateX(-800%);
    }
	90%{
        transform: translateX(-900%);
    }
	96%{
        transform: translateX(-900%);
    }	
    100%{
        transform: translateX(0);
    }
	
} 

 
.club_slider__img{
    max-width: 100%;
    min-width: 100%;
}

/*====================================================

                    スマホ表示

======================================================*/


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

.club_slider{
    width:90%;
    margin: 0 auto;
	float:none;
}

/*=================== サービス・Q&A ===================*/
.cp_actab {
position: relative;
overflow: hidden;
width: 90%;
margin: 0 auto;
color: #363636;/*質問文字色*/
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-weight: bold;
line-height: 2;
position: relative;
display: block;
padding: 0.5em 3em 0.5em 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #e3e3da;/*質問背景色*/
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
background: #f5f4f2;/*回答背景色*/
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 200em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
