@charset "utf-8";
 @media screen and (max-width: 480px){ body { 
height:480px;
margin:0;
}   #head_box {
width: 100%;
height:auto;
margin: 0;
padding: 0;
clear:both;
}
#head_box_in {
width: 100%;
margin: 0;
padding: 0;
clear:both;
}
h2 img{
max-width:98%;
margin: 8px 1%;
}   #social_box{
display: none;
}   #top-navi-bg, .abc{
display: none;
}
#naviall{ display: none;}
#dro_navi {
display: block;
position: absolute;
top: 15px;
right: 15px;
z-index: 100;
}
#nav-dr { 
display: block;
}
.nav-unsh { display:none;}
#nav-op { 
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
#nav-op span, #nav-op span:before, #nav-op span:after {
position: absolute;
height: 3px;
width: 25px;
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-op span:before {
bottom: -8px;
}
#nav-op span:after {
bottom: -16px;
}
#nav-cl {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
#nav-con {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 90%;
max-width: 330px;
height: 100%;
background: #FCFCFC;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
#nav-in:checked ~ #nav-cl {
display: block;
opacity: .5;
}
#nav-in:checked ~ #nav-con {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
} #nav-con ul, #nav-con ul.children {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0;
text-align: left;
list-style-type: none;
box-sizing: border-box;
}
#nav-con ul li, #nav_clo{
width: 100%;
height: auto;
line-height: 60px;
padding: 0 16px 0 20px;
float: left; 
background: url(//cocoro-work.com/wp-content/themes/7th_formula/img/navi_line.png) bottom repeat;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
}
#nav_clo{
padding: 0;
font-weight: bold;
background: url(//cocoro-work.com/wp-content/themes/7th_formula/img/bbg.png) top repeat-x;
border: 3px #FFFFFF solid;
}
#nav_clo label{
float: right;
margin: 20px 10px auto auto;
}
#nav_clo span{
transform: translateY(7px) rotate(-45deg);
}
#nav_clo span:before {
opacity: 0;
}
#nav_clo span:after{
transform: translateY(-16px) rotate(90deg);
}
#nav-con ul li:last-child{	
border-bottom: 1px #EFEFEF solid;
}
#nav-con ul li .fa, #nav-con ul li .fas,
#nav-con ul li .fal, #nav-con ul li .fab{
margin-right: 8px;
}
#nav-con ul li ul li{
width: 100%;
margin: 0 0 0 0;
padding: 0 0 0 20px;
box-sizing: border-box;
}
#nav-con ul li ul li:last-child{	
border-bottom: none;
}
#nav-con ul li a{
display: block;
color: #333333;
text-decoration: none;
}
#nav-con ul li a:hover{
color: #FF8800;
text-decoration: none;
transition: 0.4s ease-in-out;
}   #banner_in {
width: 92%;
height:auto;
margin: 0 1%;
padding:0;
background:#FFF;
}
#banner_in img{
width:100%;
}   #site_dis p {
width: 96%;
}   #contents_in{
width:100%;
margin: 7px 0 0;
}   #wrapper3, #wrapper2r, #wrapper2l, #wrapper,#wrapperk3, #wrapperk2r, #wrapperk2l, #wrapperk1 {
width: 100%;
margin: 0;
padding: 10px 2% 0;
border: none;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}  #left_side {
width: 100%;
margin: 0;
font-size: 12px;
clear: both;
}
#right_side{
width: 100%;
margin: 0;
font-size: 12px;
clear: both;
}  #left_contents_frame{
width: 100%;
float: left;
}
#wrapper3 #center_box, #wrapperk3 #center_box {
width: 100%;
margin: 0;
padding: 0;
background: none;
float: right;
}
#wrapper3 #left_side, #wrapper3 #right_side, #wrapperk3 #left_side, #wrapperk3 #right_side{
width: 100%;
margin: 0;
font-size: 12px;
float: left;
}  #wrapper2l #center_box, #wrapperk2l #center_box {
width: 100%;
margin: 0 ;
padding: 0;
background: none;
float: right;
}  #wrapper2r #center_box, #wrapperk2r #center_box {
width: 100%;
margin: 0;
padding: 0;
border-radius: 10px;
float: left;
}  #wrapper #center_box, #wrapperk1 #center_box {
width: 100%;
margin: 0 auto;
padding: 0;
background: none;
} .title_area_bottom {
width: 90%;
padding: 0;
margin: 0;
}
.kanrenmenu_thumb ul li, .Kanrenmenu ul li {
width: 98%;
margin: 10px 1% 10px;
clear: both;
}
#new-content .info {
max-width: 70%;
height: 50px;
margin: 0px 0px 0px 10px;
padding: 0px;
text-align: left;
overflow: hidden;
float: left;
}  #left_side ul#eye_news li, #right_side ul#eye_news li{
height: auto;
padding: 0 2px 0 0;
background: none;
overflow: hidden;
}
#left_side #eye_news .sub_new_img , #right_side #eye_news .sub_new_img{
width: 76px;
height: 76px;
}
#left_side #eye_news .sub_new_img img, #right_side #eye_news .sub_new_img img{
width: auto;
height: 70px;
}
#left_side .sf_daca, #left_side .sf_daca a, #right_side .sf_daca, #right_side .sf_daca a {
max-height: 30px;
padding: 3px 0;
margin: 0 0 3px;
color: #333333;
border-bottom: 1px solid #DEDEDE;
width: 76%;
float: right;
}
#left_side #eye_news a p, #right_side #eye_news a p {
width: 76%;
max-height: 37px;
text-align: left;
color: #333;
margin: -40px 0px 0px;
line-height: 150%;
overflow: hidden;
float: right;
}
#footer_box_matome #eye_news .sub_new_img{
width: 74px;
height: 74px;
padding: 2px;
background: #FFFFFF;
border: none;
margin: 2px 0 5px 0;
overflow: hidden;
line-height: 100%;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#footer_box_matome #eye_news .sub_new_img img{
width: auto;
height: 70px;
padding: 0px;
border: none;
margin: 0;
float: left;
}
#footer_box_matome #eye_news a p{
width: 78%;
max-height: 34px;
text-align: left;
margin: -45px 0 0;
line-height: 140%;
overflow: hidden;
float: right;
}
#footer_box_matome .sf_daca, #footer_box_matome .sf_daca a {
max-height: 30px;
padding: 3px 0;
margin: 0;
width: 78%;
float: right;
}
@media screen and (max-width: 320px){
#left_side .sf_daca, #left_side .sf_daca a,
#right_side .sf_daca, #right_side .sf_daca a,
#footer_box_matome .sf_daca, #footer_box_matome .sf_daca a {
max-height: 30px;
padding: 3px 0;
margin: 0 2% 0 0;
width: 70%;
float: right;
}
#left_side #eye_news a p,
#right_side #eye_news a p,
#footer_box_matome #eye_news a p{
width: 70%;
max-height: 34px;
text-align: left;
margin: -45px 2% 0 0;
line-height: 140%;
overflow: hidden;
float: right;
}	
}  .econtent img.attachment-200x200, .econtent-none img.attachment-200x200 { 
width:50%;
float: left;
margin: 0 10px 10px 0;
}
.econtent-i img.attachment-200x200, .econtent-none-i img.attachment-200x200 { 
width:50%;
float: right;
margin: 0 0 10px 10px;
}  .date_time { 
font-size: 11px;
margin: 0 1%;
padding: 0;
text-align: left;
float: left;
}
.left_time { 
font-size: 11px;
margin: 0 0 0 1%;
padding: 0;
}
.no_day { 
margin: 0 1%;
text-align: left;
float: left;
}   #wp-calendar caption{
display:none;
}
#wp-calendar {
display:none;
}  #fix_box1, #fix_box2{
max-width: 480px;
width:100%;
margin: 10px 0 0;
padding: 0;
}
#tb{
background: #FFFFFF url(//cocoro-work.com/wp-content/themes/7th_formula/img/shadow_w.png) bottom repeart-x;
}
#tb input{
width: 80%;
}   #top_return{
display:none;
}   .mini_box {
width: 100%;
margin: -2px 0 10px;
}     #main_mail th.mail_t {
width: 100%;
padding: 12px 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float:left;
}
#main_mail td.mail_e {
width: 100%;
padding: 12px 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
float:left;
}   #mail_magazine {
width: 100%;
margin: 0;
padding: 0;
box-shadow: none;
}
#review {
width: 100%;
margin: 0;
padding: 0;
border: none;
background: none;
}
#mail_magazine_in {
width: 100%;
margin: 0;
padding: 20px 5%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#review_in {
padding: 20px 5%;
}
#widget_form p {
font-size: 14px;
line-height: 160%;
padding: 0 20px;
}
.opt-in br { display: none;}  #review_in img, #review_in iframe, #mail_magazine_in img, #mail_magazine_in iframe{
width: 100%;
margin: 0;
padding: 0;
display: block;
}  #mail_magazine .bullet3_body ul {
text-align: left;
margin: 0 20px;
padding: 0;
}
#mail_magazine .bullet3_body li, #mail_magazine .bullet3_body li:last-child{
font-size: 16px;
}  #mail_magazine h3#pp {
font-size: 14px;
text-align: left;
margin: 5px 0;
clear: both;
}
#mail_magazine #about-privacy {
width: 90%;
height: 70px;
overflow: auto;
font-size: 14px;
margin: 0 4% 2%;
padding: 10px 2%;
border: 2px solid #CCCCCC;
background-color: #FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
clear: both;
}
#mail_magazine #about-privacy p {
font-size: 12px;
line-height: 180%;
text-align: justify;
text-justify: inter-ideograph;
margin: 0;
padding: 5px 0;
}  #mail_magazine input, #widget_form input{
width: 100%;
height: auto;
display: block;
}
#review .easy_mode_button a {
width: 100%;
margin: 40px 0 20px;
}
#review .easy_mode_button a {
height: 70px;
line-height: 70px;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
padding: 0;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 3px #555;
display: block;
overflow: hidden;
background-size: 100% 100%;
clear: both;
}
#mail_magazine input.btn2, #mail_magazine input.btn, #mail_magazine input.btn3
#widget_form input.btn2, #widget_form input.btn, #widget_form input.btn3{
width: 100%;
height: 60px;
display: block;
}   .rankingvera .ra-img {
width: 80%;
margin:10px 10%;
padding:0;
clear:both;
}
#center_box .rankingvera table.graph2 {
width: 200px;
margin: 0;
padding: 0;
border-collapse: collapse;
}
.rankingverb .rb-img{
width:80%;
margin:0 10%;
padding: 0;
}
.rankingverc td.c_photo {
width:100%;
margin: 0;
clear:both;
}
.rankingverc .rc-img {
width:96%;
margin: 0 2% 10px;
padding: 10px 3%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.box_in_ranking_black a img {
width: 60%;
margin: 0px 20%;
padding: 0px;
float: left;
}
.box_in_ranking_black {
width: 98%;
padding: 5px 1% 10px;
margin: 0 1% 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
}