@charset "UTF-8";
/* CSS Document */
body{
	background-color: #fff;
	font-family:"Century Gothic","sans-serif","A-OTF 秀英角ゴシック銀 Std";
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    min-width: 950px;
}
header{
    margin: 0 auto;
    min-width: 950px;
}
.header_back{
    width: 960px;
    margin: 0 auto;
}
.headertitle p{
    position: absolute;
    top: 5px;
    left:0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    font-size: 2vw;
}
.flex{
    display: flex;
}
.tab_container{
    padding-bottom: 1em;
    background-color: #fff;
    margin: 16% auto;
}
.type1{
    width: 960px;
    margin: 0 auto;
}
.type2{
margin: 0;
width: 100%;
}
.tab_item,
.tab_item_col{
    width: 150px;
    padding:10px 0;
    border-radius: 20px 20px 0 0;
    border-bottom: 2px solid #000;
    background-color: #FFB266;
    text-align: center;
    color: #000 ;
    display: block;
    font-weight: bold;
    transition: all 0.2s ease;
    margin: 1.5% 0.3%;
}
.tab_item{
    border:2px solid #000;
}
.sansu{
 background-color: #FFB266;
}
.rika{
 background-color: #59C7C9;
}
.eigo{
 background-color: #7BCAFF;   
}
.seikatsu{
 background-color: #ACDD26;
}
.returnTop{
    width: 105px;
    padding:14px 0;
    border-radius:0;
    transition: all 0.2s ease;
    margin: 0 0 0 22.4%;
    border: 0;
    background-color: #fff;
}
.tab5Top{
    margin: 0 0 0 5.7%;
}
.tab3Top{
    margin: 0 0 0 39%;
}
.tab_item{
    float: left;
}
.tab_item_col{
  width:22%;
  padding:15px 0;
  border-radius: 20px;
  font-size: 15px;
  line-height: 18px;
  margin: 1%;
  max-width: 1800px;
}

.tab_item:hover,
.tab_item_col:hover
{
    opacity: 0.75;
}
input[name="tab_item"],
input[name="a_tab_item"]
{
    display: none;
}
.tab_content {
    display: none;
    padding: 0;
    width: 960px;
}
.tab_content_in{
    display: none;
    padding: 0;
    width: 687px;
}
#tab1_content,
#tab2_content,
#tab3_content,
#tab4_content,
#tab5_content,
#tab6_content
{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top:11rem;
}
.tab_content p{
    text-align: left;
    font-size: 20px;
    margin: 1% 0 1%;
    padding:0 10px;
}
.tab_content_description{
    width: 100%;
}
.red{
    background: red;
    display: inline;
    width:50%;
}
.block{
    display: block;
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content, 
#tab6:checked ~ #tab6_content,
#tab7:checked ~ #tab7_content,
#tab8:checked ~ #tab8_content,
#tab9:checked ~ #tab9_content,
#tab10:checked ~ #tab10_content,
#tab11:checked ~ #tab11_content,
#tab12:checked ~ #tab12_content,
#tab13:checked ~ #tab13_content,
#tab14:checked ~ #tab14_content,
#tab15:checked ~ #tab15_content,
#tab16:checked ~ #tab16_content,
#tab17:checked ~ #tab17_content,
#tab18:checked ~ #tab18_content,
#tab19:checked ~ #tab19_content,
#tab20:checked ~ #tab20_content,
#tab21:checked ~ #tab21_content,
#tab22:checked ~ #tab22_content,
#tab23:checked ~ #tab23_content,
#tab24:checked ~ #tab24_content,
#tab25:checked ~ #tab25_content,
#tab26:checked ~ #tab26_content,
#tab27:checked ~ #tab27_content,
#tab28:checked ~ #tab28_content,
#tab29:checked ~ #tab29_content,
#tab30:checked ~ #tab30_content,
#tab31:checked ~ #tab31_content,
#tab32:checked ~ #tab32_content,
#tab33:checked ~ #tab33_content,
#tab34:checked ~ #tab34_content,
#tab35:checked ~ #tab35_content,
#tab36:checked ~ #tab36_content,
#tab37:checked ~ #tab37_content,
#tab38:checked ~ #tab38_content,
#tab39:checked ~ #tab39_content,
#tab40:checked ~ #tab40_content,
#tab41:checked ~ #tab41_content,
#tab42:checked ~ #tab42_content,
#tab43:checked ~ #tab43_content,
#tab44:checked ~ #tab44_content,
#tab45:checked ~ #tab45_content,
#tab46:checked ~ #tab46_content,
#tab47:checked ~ #tab47_content,
#tab48:checked ~ #tab48_content,
#tab49:checked ~ #tab49_content,
#tab50:checked ~ #tab50_content,
#tab51:checked ~ #tab51_content,
#tab52:checked ~ #tab52_content,
#tab53:checked ~ #tab53_content,
#tab54:checked ~ #tab54_content
{
    display: block;
}
.tab_container input:checked + .tab_item,
.tab_container input:checked + .tab_item_col{
    background-color: #28A13A;
    color: #fff;
}
.tab_container>label {
    position:relative;
}
.tab_container>.tab_content{
     position: absolute;
     top: 0;
     left: 28%;
}
.tab_container>.tab_content_in{
     position: absolute;
     top: 0;
     left: 28%;
}
.explanation_box{
    width: 640px;
    height: auto;
    padding:5% 2%;
    margin: 28px 10px;
    border:3px solid #28A13A;
    border-radius: 10px;
    position: relative;
}
.textBox P{
    font-size: 19px;
    line-height: 34px;
    margin: 0.2rem 0;
}

.title_box{
    position: absolute;
    top: -2.5rem;
    left:-1.5rem;
}
.title_img{
    position: relative;
}
.title_img img{
    width: 100%;
}
::-webkit-full-page-media, :future, :root .title_img img{
  width: 60%;
}
.sansuchara::after{
    content:url('../image/sansu/pencil.svg');
}
.rikachara::after{
    content:url('../image/rika/pencil.svg');
}
.eigochara::after{
    content:url('../image/eigo/pencil.svg');
}
.seikatsuchara::after{
    content:url('../image/seikatsu/pencil.svg');
     width: 72px!important;
}

.explanation_box::after{
  display: inline-block;
  width: 100px;
  height: 100px;
  position: absolute;
  right: -39px;
  bottom: -23px;
}
.tab_item_col {
padding: 10px 0;
    }
.content_img{
        width: 100%;
}
.content_img img{
    overflow:hidden;
}