@charset "utf-8";

html, body{height: 100%;}

body{
background-color:#fff;
text-align:center;
font-size:16px;	
font-family: 游ゴシック, YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, sans-serif;
font-family: arial, Helvetica, "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}
.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}
@media only screen and (max-width:767px){
.is-fixed {
  position: relative;
}
}


#head{
text-align:center;
padding:4px;
background-color:#000;
font-size:12px;
color:#fff;
position:relative;
}
@media only screen and (max-width:767px){
#head{
display: none;
}
}

#head i{
font-size:18px;
}

#head_inner{
width:1200px;
margin:0 auto;
}


#head_summery{
float:left;
width:50%;
text-align:left;
}

#head_link{
float:right;
width:50%;
text-align:right;
padding-right:12px;
}


header{
width: 100%;
height:84px !important;
}

#head_link a{
font-size:12px;
color:#fff;
padding:2px 35px;
border:#eee solid 1px;
border-radius:15px;
margin-left:15px;
text-decoration:none;
}


#head_link a:hover{
text-decoration:none;
background-color:#3fa7af;
border:#3fa7af solid 1px;
}


header .fixbar {
position: absolute;
width:100%;
background-color:rgba(255,255,255,0.8);
box-shadow:0px 0px 4px;
box-shadow: 0px 0px 4px #ddd;
-webkit-box-shadow: 0px 0px 4px #ddd;
-moz-box-shadow: 0px 0px 4px #ddd;
border-bottom:1px solid #ddd;
}
@media only screen and (max-width:767px){
header .fixbar {
height:60px !important;
box-shadow:none;
border:none;
}
}

@media only screen and (max-width:767px){
header{
height:60px !important;

}
}


header.fixed .fixbar {
position:relative;
z-index: 2;
}
@media only screen and (max-width:767px){
header.fixed .fixbar {
position: fixed;
top: 0px;
}
}

.drawer-container {
width: 1200px !important;
}
@media only screen and (max-width:767px){
.drawer-container {
width: 100% !important;
border-top: #111 solid 5px;
}
}

.drawer-nav{
background-color:rgba(255,255,255,0.0) !important;
}

.drawer-navbar .drawer-navbar-header{
background-color:rgba(255,255,255,0.0) !important;
font-family: 'hannari',"Hiragino Mincho ProN", "HGP明朝E","ヒラギノ明朝 ProN W3", "メイリオ",Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 border-bottom:none !important;
}

.drawer-navbar .drawer-brand {
padding-top:12px;
}

.drawer-navbar .drawer-navbar-header a img{
padding-top:9px;
}
@media only screen and (max-width:767px){
.drawer-navbar .drawer-navbar-header a img{
max-width:110px;
padding-top:10px;
}

.drawer-open .drawer-navbar .drawer-navbar-header a img{
opacity: 0.2;
 filter: alpha(opacity=20);
 -moz-opacity: 0.2;
}
}


.drawer-navbar {
 border-bottom:none !important;
}

.drawer-brand img{
max-height:70px;
height:auto;
vertical-align: top;
max-width: 100%;
width /***/:auto;
}
@media only screen and (max-width:767px){
#panel-btn{
display: inline-block;
    width: 48px;
    height: 48px;
    margin: 10px 0 10px;
    border-radius: 50%;
	border: #999 1px solid;
    background: #fff;
    padding: 14px 6px 4px 6px;
    border-radius: 4px;

    position: absolute;
    top: 3px;
    right: 12px;
    position: fixed;
    z-index: 999;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}



#panel-btn span {
    font-size: 11px;
    display: block;
}
.menulabel {
    margin-top: 12px;
	color:#333;
}

.drawer-open #panel-btn{
    background:none;
	border:none;
}
}


header#pcmenu{
height:84px !important;
    width: 100%;
    background-color: rgba(255,255,255,1.0);
    box-shadow: 0px 0px 4px;
    border-bottom: 1px solid #ddd;
}
@media only screen and (max-width:767px){
header#pcmenu{
display:none;
}
}

#pcmenu_inner{
width:1200px;
margin:0 auto;
}

#pcmenu_ttl{
float:left;
 width: 300px;
 padding-top: 9px;
 text-align: left;
 padding-right: .75rem;
    padding-left: .75rem;
}

#pcmenu_menu{
float:right;
 width: 900px;
 text-align: right;
}

#pcmenu_menu li{
float:left;

}






nav{
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}


nav li a{
text-align: center;
color: #fff;
text-decoration: none !important;
font-size: 15px !important;
padding: 12px 18px !important;
}

nav ul.drawer-menu a:hover{
text-decoration: none;
}
@media only screen and (max-width:767px){
nav ul.drawer-menu a:hover{
    background-color: transparent !important;
}
}

nav ul.drawer-menu ul.drawer-dropdown-menu a:hover{
text-decoration: none;
background-color:#fff !important;
}

a.drawer-menu-item,
div.drawer-menu-item{
position: relative;
  display: block;
  transition: .3s;
}

a.drawer-menu-item::before{
  position: absolute;
  content: '';
  width:0;
  height: 4px;
  background-color:#da4453;
  transition: .3s;
    -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
   top: 81px;
  left: 50%;

}

@media only screen and (max-width:767px){
a.drawer-menu-item::before{
background:none;
display:none;
}
}

a.drawer-menu-item:hover::before{
  width: 100%;
}
@media only screen and (max-width:767px){
a.drawer-menu-item:hover::before{
  width: auto;
  display:none;
}
}

li.current{
border-top:#da4453 4px solid;
}




#mainImage {
width: 100%;
height:500px !important;
background-size:cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(images/1.jpg);
position: relative;
}

@media only screen and (max-width:767px){
#mainImage{
background:none;
margin:0px auto;
height:auto !important;
}
}


#inner{
width:1200px;
margin:0 auto;
position: relative;
}


@media only screen and (max-width:767px){
#inner{
height:auto;
width:100%;
margin-bottom:0px;
}
}


h1 {
position: absolute;
top: 160px;
left: 22%;
width: 56%;
line-height: 1.0;
padding: 35px;
margin: 0;
text-align: center;
background-color: rgba(255,255,255,0.6);
font-size: 36px;
z-index: 1;
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
h1 {
position:relative;
top:0%;
left:0%;
width:100%;
margin:0 auto;
font-size:24px;
background-color: rgba(63,167,175,0.8);
color:#fff;
display:block;
padding:10px 10px;
line-height:1.4;
}
}
@media only screen and (max-width:420px){
h1 {
font-size:20px;
padding:12px 10px;
}
}
@media only screen and (max-width:340px){
h1 {
font-size:18px;
}
}

#mainImage_sp{
display: none;
}
@media only screen and (max-width:767px){
#mainImage_sp{
display:block;
margin-top:8px;
}

#mainImage_sp img{
width:100%;
}
}

#mainpict_contact a{
background-color:#9ed151;
color:#000;
position:absolute;
top:60px;
left:60px;
width: 120px;
height: 120px;
-webkit-border-radius: 60px;/* width,heightの半分 */
-moz-border-radius:60px;
border-radius: 60px;
background-color:#9ed151;/* 円の色 */
padding-top:28px;
text-align:center;
display:block;
text-decoration:none;
z-index: 9999;
font-size:12px;
font-family: "ヒラギノ角ゴPro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight:bold;
line-height:1.2;
letter-spacing:-0.1em
}
		
#mainpict_contact a:hover{
background-color:#6eb700
}




h1 span{
display:block;
font-size: 16px;
margin-top:15px;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
font-weight:normal;
}

@media only screen and (max-width:767px){
h1 span{
font-size: 14px;
margin-top:4px;
}
}



#news{
width:100%;
background-color:#eee;
padding:8px;
font-size:13px;
}
@media only screen and (max-width:767px){
#news{
padding:4px;
font-size:12px;
margin-bottom:25px;
}
}

#news_inner{
width:1160px;
margin:0 auto;
text-align: left;
}
@media only screen and (max-width:767px){
#news_inner{
width:89%;
text-align: left;
}
}

#pan{
width:1160px;
margin:6px auto;
text-align:left;
font-size:14px;
}

#pan a{
text-decoration: none;
}

@media only screen and (max-width:767px){
#pan{
width:89%;
margin:8px auto;
font-size:12px;
}
}


#konna{
width:960px;
margin:60px auto 70px;
}


@media only screen and (max-width:767px){
#konna{
width:89%;
margin:20px auto 60px;
}
}



#konna_inner{
overflow:hidden;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
#konna_inner{
margin-bottom:20px;
}
}


#top_midashi {
margin:0 auto 25px;
text-align: left;
color: #bc1e3f;
font-size:28px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
letter-spacing: -1px;
line-height: 1.6;
background-image: url(images/my.png);
background-repeat: no-repeat;
padding:10px 0 0 70px;
height:67px;
width:800px;
}

@media only screen and (max-width:767px){
#top_midashi {
margin-bottom:18px;
font-size:21px;
padding:20px 0 0 70px;
line-height: 1.5;
width:100%;
}
}
@media only screen and (max-width:662px){
#top_midashi {
margin-bottom:18px;
font-size:19px;
padding:20px 0 0 70px;
line-height: 1.5;
width:100%;
}
}
@media only screen and (max-width:602px){
#top_midashi {
padding:4px 0 0 70px;
}
}

@media only screen and (max-width:420px){
#top_midashi {
font-size:18px;
padding:4px 0 0 70px;
}
}



h3.top_sub{
padding: 0px 0px 25px 0px;
font-size: 26px;
font-family: 'ヒラギノ角ゴ Pro W6','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
text-align: left;
color:#333;
}

@media only screen and (max-width:1200px){
h3.top_sub{
font-size: 24px;
padding:0;
text-align: center;
}
}




#konna_l{
float:left;
width:560px;
padding:10px 10px 0 0;
}

@media only screen and (max-width:767px){
#konna_l{
width:80%;
float:none;
padding:0;
margin:0 auto 10px;
}
}
@media only screen and (max-width:420px){
#konna_l{
width:100%;
}
}



#konna_r{
float:right;
width:400px;
padding:0 0 0 ;
}

@media only screen and (max-width:767px){
#konna_r{
width:100%;
float:none;
padding:0 10px;
}
}




.button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] {
background: #da4453;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
height: auto;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}


.button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
background: #3d4145;
color: #fff;
text-decoration: none;
}


.hissu{
background-color:#da4453;
color:#fff;
font-size:12px;
padding:0px 6px;
margin-left:8px;
font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";
border-radius:4px;
position: absolute;
right:0;
top:15px;

}


/* ----------------------------------------------------------------*/




#top_service{
background-color:#f5f5f5;
width:100%;
padding:70px 0;
}
@media only screen and (max-width:767px){
#top_service{
padding:35px 0 50px 0;
}
}

.boutou_text{
margin-bottom:20px;
}
@media only screen and (max-width:767px){
.boutou_text{
width:70%;
margin:0 auto 30px;
text-align:left;
}
}
@media only screen and (max-width:420px){
.boutou_text{
width:88%;
margin:0 auto 30px;
text-align:left;
}
}


#top_service h2,
#top_portfolio h2,
#info h2{
font-size:36px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#top_service h2, #top_portfolio h2, #info h2{ 
width:90%;
margin:0 auto 20px;
font-size:28px;
}
}




#top_service h3{
text-align: center;
font-size:16px;
}


#top_service i{
color:#3fa7af;
}


#top_service_inner,
.top_service_inner{
overflow:hidden;
width:1080px;
margin:0 auto;
}

@media only screen and (max-width:767px){
#top_service_inner,
.top_service_inner{
width:70%;
}
}
@media only screen and (max-width:420px){
#top_service_inner,
.top_service_inner{
width:88%;
}
}


.top_service_l{
float:left;
padding:30px 20px;
width:360px;
text-align:left;
}
@media only screen and (max-width:767px){
.top_service_l{
width:100%;
padding:0;
margin-bottom:30px;
}
}

.top_service_m{
float:left;
padding:30px 20px;
width:360px;
text-align:left;
}
@media only screen and (max-width:767px){
.top_service_m{
width:100%;
padding:0;
margin-bottom:30px;
}
}

.top_service_r{
float:right;
padding:30px 20px;
width:360px;
text-align:left;
}
@media only screen and (max-width:767px){
.top_service_r{
width:100%;
padding:0;
margin-bottom:40px;
}
}


#top_service i {
color: #3fa7af;
}


a.toplink{
display:block;

border-radius: 12px;
padding:8px;
line-height:1.0;

}


a:hover.toplink{

text-decoration:none;
}

/* ----------------------------------------------------------------*/


#top_kokorogake{
width:100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e9f3f4+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e9f3f4 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#e9f3f4 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#e9f3f4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e9f3f4',GradientType=0 ); /* IE6-9 */
padding:80px 0;
}


#top_kokorogake_inner{
width:1200px;
margin:0px auto 30px;
background-image: url(images/top_kokoro.png);
background-repeat: no-repeat;
background-position: bottom;
position:relative;
height:225px;
}


#top_kokorogake_inner h2{
position: absolute;
top:78px;
left:168px;
font-size: 36px;
font-weight: 600;
}

#top_kokorogake h2 span {
    display: block;
    font-size: 12px;
    color: #555;
    font-weight: normal;
}


#top_kokorogake ul{
padding:25px 0 0 620px;
}

#top_kokorogake li{
text-align:left;
font-weight:bold;
font-size:18px;
margin-bottom:4px;
}

.maru1{
color:#8ecdd2;
margin-right:8px;
font-size:26px;
}

.maru2{
color:#9cc52b;
margin-right:8px;
font-size:26px;
}



#top_portfolio{
width:1200px;
margin:0 auto;
padding:70px 0 100px 0;
}
@media only screen and (max-width:767px){
#top_portfolio{
padding:40px 0;
width:88%;
}
}

.top_portfolio_inner{
overflow:hidden;
}

.top_portfolio_list{
width:300px;
float:left;
padding:20px;
}

@media only screen and (max-width:767px){
.top_portfolio_list{
max-width:340px;
margin:0 auto 20px;
float:none;
padding:0px;
}
}

#top_portfolio h2 span,
#top_service h2 span,
#info h2 span{
display:block;
font-size:12px;
color:#555;
font-weight:normal;
font-family: arial, Helvetica, "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}



#top_portfolio img{
width:100%;
height:auto;
}


#top_portfolio .portfolio-item-meta {
padding: 18px 0;
}


/* Portfolio Content */
#top_portfolio-wrapper { margin-top: 36px; }
#top_portfolio-wrapper .columns { margin-bottom: 36px; }


.portfolio-item .item-wrap {
overflow: hidden;
border-radius: 3px;
   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.portfolio-item .item-wrap a {
position: relative;
display: block;
}


/* overlay */
.portfolio-item .item-wrap .overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
border-radius: 3px 3px 0 0;
background:url(images/overlay.png) repeat;
}


.portfolio-item .item-wrap .link-icon {
display: block;
color: #fff;
font-size: 40px;
line-height: 40px;
text-align: center;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
position: absolute;
top: 50%;
left: 50%;
margin-left: -18.5px;
margin-top: -20px;
}


.portfolio-item .item-wrap img {
vertical-align: bottom;
border-radius: 3px 3px 0 0;
}


.portfolio-item .portfolio-item-meta {
padding: 18px 0;
}


.portfolio-item .portfolio-item-meta h5 a {
font: 14px/18px notosans-bold, sans-serif;
color: #11ABB0;
margin:0px 8px;
text-align:center;
text-decoration:none;
}


.portfolio-item .portfolio-item-meta h5 a:hover{
text-decoration:none;
}


.portfolio-item .portfolio-item-meta p {
font: 12px/18px notosans-regular, sans-serif;
color: #c6c7c7;
margin:8px 8px 0px 8px;
color: #999;
}


/* on hover */
.portfolio-item:hover .item-wrap {
background-color: #3A3434;
}

.portfolio-item:hover h5 a {
color: #fff !important;
}

.portfolio-item:hover .overlay {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}

.portfolio-item:hover .link-icon {
opacity: 1;
-moz-opacity: 1;
filter:alpha(opacity=100);
}



/* ----------------------------------------------------------------*/

#top_voice{
width:100%;
background-color:#f2f2f2;
}

#top_voice_inner{
width:1200px;
margin:0 auto;
position:relative;
text-align: left;
padding:70px 0;
}
@media only screen and (max-width:767px){
#top_voice_inner{
width:89%;
padding:35px 0;
}
}

#top_voice h2{
position: absolute;
top:20px;
left:535px;
}
@media only screen and (max-width:767px){
#top_voice h2{
font-size:24px;
text-align:center;
margin-bottom:15px;
position: relative;
left:0;
top:0;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}
}



#top_voice_l{
float:left;
width:534px;
}
@media only screen and (max-width:767px){
#top_voice_l{
float:none;
width:100%;
margin-bottom:30px;
border-bottom:#bbb solid 1px;
padding-bottom:25px;
}
}


#top_voice_l_name{
background-image: url(images/pict_okabe.jpg);
background-repeat: no-repeat;
background-position: top left;
padding:55px 0 0 190px;
height:203px;
margin-bottom:25px;
}
@media only screen and (max-width:767px){
#top_voice_l_name{
background-position: top center;
padding:220px 0 0 0;
height:auto;
text-align: center;
}
}


#top_voice_r{
float:right;
width:584px;
padding-left:50px;
}
@media only screen and (max-width:767px){
#top_voice_r{
float:none;
width:100%;
padding-left:0;
}
}


#top_voice_r_name{
background-image: url(images/pict_tachimoto.jpg);
background-repeat: no-repeat;
background-position: top left;
padding:55px 0 0 190px;
height:203px;
margin-bottom:25px;
}
@media only screen and (max-width:767px){
#top_voice_r_name{
background-position: top center;
padding:220px 0 0 0;
height:auto;
text-align: center;
}
}

.top_voice_ttl{
font-size:21px;
margin-bottom:25px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
.top_voice_ttl{
font-size:19px;
text-align:left;
}
}

.top_voice_name{
font-size:14px;
}





/* ----------------------------------------------------------------*/


#footer_contact{
width:100%;
padding:70px;
background-color:#3FA7AF;
background-position: 0 0, 10px 10px;
background-size: 10px 10px;
}
@media only screen and (max-width:767px){
#footer_contact{
padding:40px 0px;
}
}

#footer_contact a{
display:block;
width:500px;
color:#fff;
text-decoration:none;
font-size:24px;
border:#fff solid 2px;
margin:0 auto;
padding:30px 30px 22px 30px;
background-color:#3FA7AF;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}

@media only screen and (max-width:767px){
#footer_contact a{
width:80%;
font-size:18px;
padding:30px 20px;
}
}


#footer_contact a:hover{
background-color:rgba(255,255,255,0.3);
}

#contact_time{
font-size:13px;
text-align:center;
font-weight:normal;
}


footer{
background-color:#000;
width:100%;
padding:60px 0 80px;
color:#999;
font-size:14px;
margin:0 auto;
}
@media only screen and (max-width:767px){
footer {
padding:30px 0 40px;
}
}



#fotter_in{
width:1200px;
margin:0 auto;
text-align:left;
overflow:hidden;
}

@media only screen and (max-width:767px){
#fotter_in {
width: 100%;
}
}


#fotter_in ul{
overflow:hidden;
margin-top:20px;
}
@media only screen and (max-width:767px){
#fotter_in ul {
margin-bottom:20px;
}
}


#fotter_in li{
float:left;
font-size:14px;
margin-right:20px;
}
@media only screen and (max-width:767px){
#fotter_in li {
width:100%;
margin-right:0;
border-bottom:#333 solid 1px;
padding:8px;
float:none;
}
}

#fotter_in li a{
color:#999;
font-size:14px;

}


#footer_link{
float:left;
width:50%;
padding-top:40px;
}

#footer_link_k{
float:left;
width:50%;
}
@media only screen and (max-width:767px){
#footer_link,#footer_link_k {
width:100%;
float:none;
text-align:center;
}
}

#footer_logo{
float:right;
width:50%;
text-align:right;
padding-right:20px;
padding-left:50px;
padding-top:0px;
font-size:16px;
}
@media only screen and (max-width:767px){
#footer_logo{
width:86%;
float:none;
padding-right:0;
padding-left:0;
text-align:center;
padding-top:15px;
margin:0 auto 20px;
}

#footer_logo img{
max-width:140px;
}
}

/* ----------------------------------------------------------------*/


#k_mainImage{
height:240px;
width:100%;
}


@media only screen and (max-width:767px){
#k_mainImage{
height:auto;
}
}



#k_ttl_outline{
position:relative;
background-image:url(images/k_pict_ttl01.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
width:100%;
}



#k_ttl_service{
background-image:url(images/k_pict_ttl03.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}

#k_ttl_flow{
background-image:url(images/k_pict_ttl04.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}


#k_ttl_portfolio{
background-image:url(images/k_pict_ttl07.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}


#k_ttl_price{
background-image:url(images/k_pict_ttl02.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}

#k_ttl_qa{
background-image:url(images/k_pict_ttl08.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}

#k_ttl_contact{
background-image:url(images/k_pict_ttl06.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height:240px;
position:relative;
}

@media only screen and (max-width:767px){
#k_ttl_service,
#k_ttl_outline,
#k_ttl_portfolio,
#k_ttl_flow,
#k_ttl_qa,
#k_ttl_koushine,
#k_ttl_price,
#k_ttl_support,
#k_ttl_contact{
margin-top:8px;
background:none;
height:auto;
}
}


#k_ttl_inner{
width:1200px;
margin:0 auto;
position:relative;
}
@media only screen and (max-width:767px){
#k_ttl_inner{
width:100%;
}
}



#k_mainImage h1 span{
display:block;
margin-bottom:12px;
}
@media only screen and (max-width:767px){
#k_mainImage h1 span{
margin-bottom:6px;
}
}

#k_ttl_qa h1,
#k_ttl_portfolio h1,
#k_ttl_service h1,
#k_ttl_flow h1,
#k_ttl_contact h1,
#k_ttl_price h1{
position: absolute;
font-size:32px;
width:700px;
top:68px;
left:250px;
line-height: 1.0;
background-color: rgba(255,255,255,0);
}

@media only screen and (max-width:767px){
#k_ttl_qa h1,
#k_ttl_portfolio h1,
#k_ttl_service h1,
#k_ttl_flow h1,
#k_ttl_contact h1,
#k_ttl_price h1{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #159abb;
font-size:21px;
line-height: 1.2;
color:#333;
width:80%;
}
}

#k_ttl_outline h1{
position: absolute;
font-size:32px;
width:700px;
top:47px;
left:250px;
line-height: 1.0;
background-color: rgba(255,255,255,0);
}

@media only screen and (max-width:767px){
#k_ttl_outline h1{
position: absolute;
top: 47%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #159abb;
font-size: 21px;
line-height: 1.2;
color: #333;
width: 80%;
}
}
/* ----------------------------------------------------------------*/


nav#subnavi{
width:100%;
background-color:#53b0b7;
font-size:16px;
text-align:center;
color:#fff;
}
@media only screen and (max-width:767px){
nav#subnavi{
display:none;
}
}

nav#subnavi a{
padding:2px 30px;
text-align:center;
color:#fff;
display: inline-block;
margin:6px;
border-radius:4px;
}

nav#subnavi a:hover{
background-color:#6cc2c9;
}

/* ----------------------------------------------------------------*/

#feeling01{
background-color:#f6f4ee;
padding:50px 0;
}
@media only screen and (max-width:767px){
#feeling01{
padding:0 0 25px 0;
margin-bottom:0px;
}
}

#feeling01_in,
#feeling02_in{
width:940px;
margin:0px auto;
text-align:left;
line-height:1.875;
}
@media only screen and (max-width:767px){
#feeling01_in,
#feeling02_in{
width:89%;
text-align:left;
line-height:1.7;
}
}


#feeling01_in_bg{
width:940px;
background-image: url(images/feeling_pict01.png);
background-repeat:no-repeat;
background-position: bottom right;
padding:15px 0 30px 0;
}
@media only screen and (max-width:767px){
#feeling01_in_bg{
width:100%;
background-image: url(images/feeling_pict01.png);
background-repeat:no-repeat;
background-position: bottom center;
background-size:220px;
padding:30px 0 200px 0;
}
}

#feeling01 h2,
#feeling02 h2,
#feeling03 h2{
color:#444;
font-size:28px;
text-align:center;
margin-bottom:60px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#feeling01 h2{
font-size:19px;
margin-bottom:30px;
}
}

#feeling01 h2 span{
background-image:url(images/underline01.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-bottom:8px;
}
@media only screen and (max-width:767px){
#feeling01 h2 span{
background: none;
}
}



#feeling01_in p,
#feeling02_in p,
#feeling03_in p{
margin-bottom:32px;

}


#feeling02{
background-color:#f3f8f9;
padding:65px 0;
background-image:url(images/feeling_pict02.png);
background-repeat:no-repeat;
background-position: bottom right;
}
@media only screen and (max-width:767px){
#feeling02{
padding:32px 0 100px 0;
margin-bottom:0px;
background-size:contain;
}
}


#feeling02 h2{
color:#444;
font-size:28px;
text-align:center;
margin-bottom:60px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#feeling02 h2{
font-size:19px;
margin-bottom:30px;
}
}

#feeling02 h2 span{
background-image:url(images/underline02.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-bottom:8px;
}
@media only screen and (max-width:767px){
#feeling02 h2 span{
background: none;
}
}


#feeling03{
background-color:#f3edeb;
padding:65px 0 40px 0;
background-image: url(images/feeling_pict03.jpg);
background-repeat:no-repeat;
background-position:bottom left;
}
@media only screen and (max-width:767px){
#feeling03{
padding:30px 0 70px 0;
margin-bottom:0px;
background-size:250px;
}
}

#feeling03_in_bg{
width:1000px;
padding:10px 0px;
}
@media only screen and (max-width:767px){
#feeling03_in_bg{
width:89%;
margin:0px auto;
}
}

#feeling03_in{
width:1000px;
margin:0px auto;
text-align:left;
line-height:1.875;
}

@media only screen and (max-width:767px){
#feeling03_in{
width:100%;
}
}


#feeling03 h2{
color:#444;
font-size:28px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
text-align:center;
margin-bottom:60px;
}

@media only screen and (max-width:767px){
#feeling03 h2{
font-size:19px;
margin-bottom:30px;
}
}



#feeling03 h2 span{
background-image:url(images/underline03.gif);
background-repeat: repeat-x;
background-position: bottom;
padding-bottom:8px;
}
@media only screen and (max-width:767px){
#feeling03 h2 span{
background: none;
}
}


#feeling03 .feeling_text{
padding:10px 30px;
background-color:rgba(243,237,235,0.5)
}

@media only screen and (max-width:767px){
#feeling03 .feeling_text{
padding-left:0px;
padding:10px 0px;
background-color:rgba(243,237,235,0)
}
}

#shomei{
text-align:right;
padding-right:90px;
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
font-weight:bold;
}
@media only screen and (max-width:767px){
#shomei{
padding-right:0px;
text-align:right;
font-weight:normal;
}
}

.min{
font-size:20px;
}
@media only screen and (max-width:767px){
.min{
font-size:18px;
}
}

/* ----------------------------------------------------------------*/



#outline01{
padding:60px 0 70px 0;
width:1000px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#outline01{
padding:35px 0;
width:89%;
}
}


#outline02{
padding:70px 0;
width:1000px;
margin:0 auto;
}

@media only screen and (max-width:767px){
#outline02{
padding:35px 0;
width:89%;
margin:0 auto;
}
}



#outline01 h2,
#outline02 h2{
position: relative;
padding-bottom: .8em;
border-bottom: 5px solid #333333;
text-align:center;

color: #222;
font-size: 28px;
margin-bottom:70px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#outline01 h2,
#outline02 h2{
padding-bottom: .4em;
border-bottom: 5px solid #333333;
font-size: 21px;
margin-bottom:35px;
}
}


.biko{
text-align:center;
}
@media only screen and (max-width:767px){
.biko{
text-align:left;
}
}


#name{
font-size: 24px;
margin-bottom: 25px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}
@media only screen and (max-width:767px){
#name{
font-size:18px;
text-align: center;
}
}


#name span{
font-size: 14px;
}


/* ----------------------------------------------------------------*/


.price_basic{
margin-bottom:60px;
}
@media only screen and (max-width:767px){
.price_basic{
margin-bottom:35px;
}
}


#price h2,
#portfolio h2{
position: relative;
padding-bottom: .6em;
border-bottom: 5px solid #333333;
text-align:center;
color: #222;
font-size: 26px;
margin-bottom:60px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}
@media only screen and (max-width:767px){
#price h2,
#portfolio h2{
padding-bottom: .4em;
border-bottom: 5px solid #333333;
font-size: 21px;
margin-bottom:35px;
}
}



#price h2:after,
#portfolio h2:after{
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: 1;
  content: '';
  width: 30%;
  height: 5px;
  background-color: #3fa7af;
}


#top_portfolio_single h2{
position: relative;
  padding-bottom: .6em;
  border-bottom: 3px solid #333333;
  text-align:left;
  font-weight:bold;
  color: #222;
 font-size: 24px;
 margin-bottom:70px;
 padding-left:20px;
}
@media only screen and (max-width:767px){
#top_portfolio_single h2{
padding-bottom: .4em;
border-bottom: 5px solid #333333;
font-size: 21px;
margin-bottom:35px;
}
}

#outline01 h2:after,
#outline02 h2:after{
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: 1;
  content: '';
  width: 30%;
  height: 5px;
  background-color: #3fa7af;
}

#top_portfolio_single h2:after{
  position: absolute;
  bottom: -3px;
  left: 0;
  z-index: 1;
  content: '';
  width: 30%;
  height: 3px;
  background-color: #3fa7af;
}



div.society_list dl{
width:100%;
overflow:hidden;
border-bottom:1px solid #ccc;
border-top:none;
margin-bottom:40px;
text-align: left;
}


div.society_list dt{
width:22%;
float:left;
padding:15px;
border-top:1px solid #ddd;
}
@media only screen and (max-width:767px){
div.society_list dt{
width:100%;
float:none;
padding:15px 4px 4px 4px;
font-weight:bold;
}
}


div.society_list dd{
margin-left:22%; 
padding:15px;
border-top:1px solid #ddd;
background:#fff;
}
@media only screen and (max-width:767px){
div.society_list dd{
margin-left:0; 
padding:4px 4px 15px 4px;
border-top:none;
}
}


.society_list p{
padding-top:6px;
font-size:14px;
color:#555;
}


div.society_list dd:after{
clear:both;
}


div.society_list dt {
position: relative;
}


#map{
width:100%;
}

#prof{
width:1200px;
}
@media only screen and (max-width:767px){
#prof{
width:100%;
}
}

#shirouchi{
float:left;
width:211px;
margin-right:50px;
margin-left:20px;
margin-bottom:20px;
}
@media only screen and (max-width:767px){
#shirouchi{
float:none;
width:100%;
margin-right:0px;
margin-left:0px;
margin-bottom:0px;
}

#shirouchi img{
max-width:170px;
text-align:center;
margin-bottom:10px;
}
}

.prof_text,
.text{
float:right;
width:919px;
text-align: left;
}
@media only screen and (max-width:767px){
.prof_text,
.text{
float:none;
width:100%;
}
}

.text,
.prof_text{
text-align: left;
line-height: 1.875;
}


.text p,
.prof_text p{
margin-bottom:32px;
}




#hp,
#koushin{
width:1200px;
margin:80px auto;
}
@media only screen and (max-width:767px){
#hp,
#koushin1{
width:89%;
margin:40px auto;
}
}


#support{
width:100%;
background-image: url(images/case_bg.jpg);
background-position: right top;
background-repeat: no-repeat;


}
@media only screen and (max-width:767px){
#support{
background-size:75%;
}
}

#support_inner{
width:1200px;
margin:0 auto;
padding-top:80px;
}
@media only screen and (max-width:767px){
#support_inner{
width:89%;
padding-top:50px;
}
}


.entry-description h4{
font-size:21px;
margin-bottom:30px;
border-left:#53b0b7 solid 8px;
padding-left:12px;
text-align:left;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
.entry-description h4{
font-size:18px;
}
}


.entry-description ul{
margin-bottom:60px;
}

.entry-description li{
margin-bottom:12px;
text-align: left;
line-height:1.5;
}

.entry-description li i {
color: #65b9bf;
margin-right:8px;
}

.entry-description p{
margin-bottom:45px;
text-align:left;
}
@media only screen and (max-width:767px){
.entry-description p{
margin-bottom:30px;
}
}

#portfolio_single{
padding:40px 0 70px 0;
}
@media only screen and (max-width:767px){
#portfolio_single{
padding:20px 0 35px 0;
}
}

#portfolio_single_inner{
width:1100px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#portfolio_single_inner{
width:89%;
}
}

#portfolio_single_inner h2{
margin-bottom:40px;
padding:12px 18px;
background-color:#65b9bf;
color:#fff;
text-align:left;
border-radius:6px;
line-height: 1.4;
position: relative;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#portfolio_single_inner h2{
margin-bottom:25px;
padding:8px;
font-size: 18px;
border-radius:2px;
line-height:1.1;
text-align: center;

}

#portfolio_single_inner h2:before{/*疑似要素*/
}
}

#portfolio_single_inner h2 span{
font-size:16px;
font-family: arial, Helvetica, "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
margin:0 8px;
}
@media only screen and (max-width:767px){
#portfolio_single_inner h2 span{
font-size:12px;

font-family: arial, Helvetica, "Hiragino Kaku Gothic ProN", "Meiryo", "MS PGothic", sans-serif;
}
}

#portfolio_single_r{
float:right;
width:640px;
padding-left:40px;
}
@media only screen and (max-width:767px){
#portfolio_single_r{
float:none;
width:100%;
padding:0;
margin-bottom:40px;
}
}


#portfolio_single_l{
float:left;
width:460px;
}
@media only screen and (max-width:767px){
#portfolio_single_l{
float:none;
width:100%;
}
}


#port_summery{
text-align:left;
margin-bottom:60px;
padding:20px;
background-color:#f3f3f3;
}
@media only screen and (max-width:767px){
#port_summery{
margin-bottom:30px;
padding:3%;
}
}


#portfolio-meta-list{
padding:20px;
border:#bbb solid 1px;
text-align:left;
margin-bottom:50px;
}
@media only screen and (max-width:767px){
#portfolio-meta-list{
padding:3%;
margin-bottom:30px;
}
}

#top_portfolio{
margin-bottom:0px;
}


.portfolio-meta-list li{
margin-bottom:24px;
}


.portfolio-meta-list li span{
font-weight:bold;
display:block;
}




.item-wrap a img{
}


/* ▼こころがけ-------------------------------------------------------------*/


.kokorogake01{
padding:60px 0 40px 0;
}
@media only screen and (max-width:767px){
.kokorogake01{
padding:40px 0 35px 0;
}
}


.kokorogake_inner01{
width:1200px;
margin: 0 auto;
overflow: hidden;
}
@media only screen and (max-width:767px){
.kokorogake_inner01{
width:89%;
}
}


.kokorogake03{
margin: 0 auto;
padding:90px 0 80px 0;
}
@media only screen and (max-width:767px){
.kokorogake03{
padding:45px 0 40px 0;
}
}


.kokorogake_pict01{
float:left;
width:604px;
padding:0 0 0 27px;
}
@media only screen and (max-width:767px){
.kokorogake_pict01{
float:none;
width:100%;
max-width:340px;
padding:0;
text-align:center;
margin:0 auto;
}
}

.kokorogake_text01{
float:right;
text-align:left;
width:596px;
padding:80px 8px 8px 8px;
line-height:1.875;
}
@media only screen and (max-width:767px){
.kokorogake_text01{
float:none;
width:100%;
padding:0;
line-height:1.8;
}
}



.kokorogake_pict03{
float:left;
width:604px;
padding:20px 0 0 27px;
}
@media only screen and (max-width:767px){
.kokorogake_pict03{
float:none;
width:100%;
max-width:340px;
padding:0;
text-align:center;
margin:0 auto;
}
}

.kokorogake_text03{
float:right;
text-align:left;
width:596px;
padding:30px 8px 8px 8px;
line-height:1.875;
}
@media only screen and (max-width:767px){
.kokorogake_text03{
float:none;
width:100%;
padding:0;
}
}



.kokorogake02{
position: relative;
overflow: hidden;
padding:80px 0;
background: #f3f8f9;
}
@media only screen and (max-width:767px){
.kokorogake02{
padding:40px 0;
}
}

.kokorogake_inner02{
width:1200px;
margin: 0 auto;
overflow: hidden;
}
@media only screen and (max-width:767px){
.kokorogake_inner02{
width:89%;
margin:0 auto;
}
}


.kokorogake_text02{
float:left;
text-align:left;
width:603px;
padding:25px 0px 0px 27px;
line-height:1.875;
}
@media only screen and (max-width:767px){
.kokorogake_text02{
float:none;
width:100%;
padding:0;
}
}



.kokorogake_pict02{
float:right;
width:597px;
padding:0px 72px 0px 0;
}
@media only screen and (max-width:767px){
.kokorogake_pict02{
float:none;
width:100%;
max-width:340px;
padding:0;
text-align:center;
margin:0 auto;
}
}


.kokorogake04{
position: relative;
overflow: hidden;
padding:60px 0;
background: #f3f8f9;
}
@media only screen and (max-width:767px){
.kokorogake04{
padding:30px 0;
}
}



.kokorogake_inner04{
width:1200px;
margin: 0 auto;
overflow: hidden;
}
@media only screen and (max-width:767px){
.kokorogake_inner04{
width:89%;
margin:0 auto;
}
}


.kokorogake_text04{
float:left;
text-align:left;
width:603px;
padding:80px 0px 0px 27px;
line-height:1.875;
}
@media only screen and (max-width:767px){
.kokorogake_text04{
float:none;
width:100%;
padding:0;
}
}


.kokorogake_pict04{
float:right;
width:597px;
padding:20px 72px 0px 0;
}
@media only screen and (max-width:767px){
.kokorogake_pict04{
float:none;
width:100%;
max-width:340px;
padding:0;
text-align:center;
margin:0 auto;
}
}


/* ▼-ホームページ制作------------------------------------------------------------*/

.bg_blue{
background-color: #f3f8f9;
width:100%;
padding:60px 0 70px;
position: relative;
}
@media only screen and (max-width:767px){
.bg_blue{
padding:30px 0 35px;
}
}

.hp_boutou{
background-image: url(images/pict_kentou.gif);
background-repeat: no-repeat;
background-position: right bottom;
width:1200px;
margin:0 auto;
text-align: left;
padding:20px 30px;
}
@media only screen and (max-width:767px){
.hp_boutou{
background:none;
width:89%;
padding:0px 0px 10px 0px;
text-align: center;
}
}


.hp_boutou h2{
background-image:url(images/mark_hp.gif);
background-repeat: no-repeat;
text-align: left;
padding:0 0 0 120px;
}
@media only screen and (max-width:767px){
.hp_boutou h2{
background: none;
text-align:center;
padding:0;
}
}

.hp_boutou p{
width:600px;
text-align: left;
}
@media only screen and (max-width:767px){
.hp_boutou p{
width:100%;
}
}


.hp_ya {
width: 0;
height: 0;
border-top: 50px solid #f3f3f3;
border-right: 100px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid transparent;
margin:0 auto;
}
@media only screen and (max-width:767px){
.hp_ya {
border-top: 30px solid #f3f3f3;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
border-left: 50px solid transparent;
}
}



#hp h2,
.bg_blue h2{
text-align:left;
line-height:1.7;
color:#333;
font-size:28px;
margin-bottom:40px;
}
@media only screen and (max-width:767px){
#hp h2,
.bg_blue h2{
font-size:18px;
font-weight:bold;
margin-bottom:25px;
text-align: center;
}
}


#hp h2 i,
#koushin h2 i{
font-size:36px;
margin-right:15px;
}


#hp h3,
#koushin h3,
#hp3 h3{
font-size:26px;
font-weight:bold;
padding-top:8px;
margin-bottom:25px;
}
@media only screen and (max-width:767px){
#hp h3,
#koushin h3,
#hp3 h3{
font-size:19px;
text-align:center;
line-height:1.4;
}
}


#hp3 h3 span{
font-size:60px;
color:#3fa7af;
}
@media only screen and (max-width:767px){
#hp3 h3 span{
font-size:42px;
}

#wakariyasui h3{
line-height:1.2;
}
}

#hp p,
#koushin p,
#hp3 p{
line-height: 1.875;
margin-bottom:32px;
}
@media only screen and (max-width:767px){
#hp p,
#koushin p,
#hp3 p{
text-align:left;
}

#hp p.space0,
#koushin p.space0,
#hp3 p.space0{
margin-bottom:0px;
}
}

#wakariyasui{
width:100%;
background-color:#f3f3f3;
padding:60px 90px;
}
@media only screen and (max-width:767px){
#wakariyasui{
padding:30px 0 20px 0;
}
}


#hp3{
width:1200px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#hp3{
width:89%;
}
}

#hp3 ul:after{
clear:both;
content:"";
display: block;
}



#hp3 li{
float:left;
width:33.3%;
}
@media only screen and (max-width:767px){
#hp3 li{
float:none;
width:100%;
}

#hp3 li img{
max-width:180px;
}

#hp3 li p{
text-align:center;
}
}

#shiru_l{
float:left;
width:600px;
}
@media only screen and (max-width:767px){
#shiru_l{
float:none;
width:100%;
}
}

#shiru_r{
float:right;
width:600px;
text-align: left;
padding:20px;
}
@media only screen and (max-width:767px){
#shiru_r{
float:none;
width:100%;
padding:25px 0 0 0;
}
}


#hp_kadai{
background-color:#f3f8f9;
padding:62px 50px;
width:100%;
margin:0px auto 80px;
background-image: url(images/magic.jpg);
background-position: right bottom;
background-repeat: no-repeat;
}
@media only screen and (max-width:767px){
#hp_kadai{
padding:30px 20px 100px 20px;
width:100%;
margin:0 auto 60px;
background-size:250px;

}
}


#hp_kadai_inner{
width:1200px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#hp_kadai_inner{
width:100%;
margin:0 auto;
}
}

#hp_kadai_l{
float:left;
width:50%;
}
@media only screen and (max-width:767px){
#hp_kadai_l{
display: none;
}
}

#hp_kadai_r{
float:right;
width:50%;
padding:0 20px;
}
@media only screen and (max-width:767px){
#hp_kadai_r{
float:none;
width:100%;
text-align: center;
padding:0;
}
}


#kadai_midashi{
font-size:42px;
font-weight:bold;
text-align:left;
margin-bottom:12px;
padding-top:12px;
}
@media only screen and (max-width:767px){
#kadai_midashi{
font-size:24px;
font-weight:bold;
text-align:center;
margin-bottom:0px;
padding-top:0px;
}
}

#kadai_midashi span{
color:#3fa7af;
}



.okyakusama{
margin-bottom:20px;
text-align: left;
}
@media only screen and (max-width:767px){
.okyakusama{
text-align:center;
font-size:15px;
}
}



#hp_kadai h3{
text-align:left;
font-size:18px;
margin-bottom:50px;
}
@media only screen and (max-width:767px){
#hp_kadai h3{
text-align:center;
margin-bottom:30px;
font-size:14px;
}
}

#hp_kadai_r li{
text-align:left;
}
@media only screen and (max-width:767px){
#hp_kadai_r li{
margin-bottom:15px;
line-height:1.5;
}
}


#hp_kadai_r li i{
color:#65b9bf;
margin-right:4px;
}


#tutaeru{
font-size:24px;
font-weight:bold;
background-image:url(images/maru.gif);
background-repeat: no-repeat;
height:207px;
padding:80px 0 0 0;
}
@media only screen and (max-width:767px){
#tutaeru{
font-size:18px;
font-weight:bold;
background-size:contain;
height:auto;
padding:40px 0 40px 0;
}
}


#portfolio{
width:1200px;
margin:0 auto 60px;
overflow: hidden;  
height: auto;
border-bottom:#ddd solid 1px;
}
@media only screen and (max-width:767px){
#portfolio{
width:89%;
margin:0 auto 40px;
}

}


#portfolio ul{
    margin:0 0 10px;
}

#portfolio li{
width:400px;
padding:20px;
float:left;
margin-bottom:20px;
}
@media only screen and (max-width:767px){
#portfolio li:nth-child(odd){
float:none;
width:49%;
display: inline-block;
padding:0;
padding-right:1%;
vertical-align: top;
margin-bottom:10px;
}

#portfolio li:nth-child(even){
float:none;
width:49%;
display: inline-block;
padding:0;
padding-left:1%;
vertical-align: top;
margin-bottom:10px;
}

}


#price{
width:1200px;
margin:60px auto;
overflow:hidden;
}
@media only screen and (max-width:767px){
#price{
width:89%;
margin:30px auto;
}
}

#price_text{
text-align:center;
margin-bottom:60px;
}
@media only screen and (max-width:767px){
#price_text{
text-align:left;
margin-bottom:30px;
}
}


.price_box01,.price_box02,.price_box03 {
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
float:left;
display: block;
width:31%;
margin-bottom:20px;
}
@media only screen and (max-width:767px){
.price_box01,.price_box02,.price_box03{
float:none;
width:100%;
}
}

.price_box04{
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
float:left;
display: block;
width:100%;
margin-bottom:80px;
}
@media only screen and (max-width:767px){
.price_box04{
margin-bottom:50px;
}
}

.price_box01{
margin-right:3.5%;
}


.price_box02{
margin-right:3.5%;
}


.price_box01 .box-title,
.price_box02 .box-title,
.price_box03 .box-title {
font-size: 1.2em;
padding: 10px;
text-align: center;
color: #FFF;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
width:100%;
}
@media only screen and (max-width:340px){
.price_box01 .box-title,
.price_box02 .box-title,
.price_box03 .box-title {
font-size: 1.0em;
}
}

.price_box01 .box-title{
background-color:#e6bd62;
}

.price_box02 .box-title{
background-color:#58b6bd;
}


.price_box03 .box-title{
background-color:#ea775c;
}

.price_box03 .box-title{

}

.price_box01 li i{
color: #e6bd62;
margin-right: 4px;
}

.price_box02 li i{
color: #65b9bf;
margin-right: 4px;
}


.price_box03 li i{
color: #ea775c;
margin-right: 4px;
}



.pricetext {
padding:40px 25px 35px 25px;
margin: 0;
text-align:center;
}
@media only screen and (max-width:767px){
.pricetext {
padding:20px 15px 25px 15px;
}
}

.pricetext .pricearea{
font-size:18px;
font-family:Arial,'ヒラギノ角ゴ Pro','游ゴシック体', 'Yu Gothic', 'YuGothic',  'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif;
font-weight:bold;
margin-bottom:4px;
}


.pricetext .pricearea span{
font-size:34px;
margin-left:8px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}


.pricetext .price_summery{
margin-bottom:25px;
font-size:14px;
}


.pricetext .price_boxtext{
background-color:#fff;
padding:8px 15px;
margin-bottom:25px;
text-align:left;
font-size:15px;
}


.pricetext .price_boxli{
font-size:15px;
width:85%;
margin:0 auto;
text-align:left;
}


.box-title{
overflow: hidden;
}


.box-title01{
width:33.333%;
background-color:#e6bd62;
float:left;
font-size: 1.2em;
padding: 10px;
text-align: center;
color: #FFF;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}


.box-title02{
width:33.333%;
background-color:#58b6bd;
float:left;
font-size: 1.2em;
padding: 10px;
text-align: center;
color: #FFF;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}


.box-title03{
width:33.333%;
background-color:#ea775c;
float:left;
font-size: 1.2em;
padding: 10px;
text-align: center;
color: #FFF;
font-weight: bold;
}


.price_basic h3{
padding:8px;
background-color:#f3f3f3;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
margin-bottom: 15px;
}

.price_l{
float:left;
width:48%;
margin-bottom:80px;
}
@media only screen and (max-width:767px){
.price_l{
float:none;
width:100%;
padding:0;
margin-bottom:0px;
}
}


.price_r{
float:right;
width:48%;
padding:0;
margin-bottom:80px;
}
@media only screen and (max-width:767px){
.price_r{
float:none;
width:100%;
padding:0;

}
}

#price_basic_all{
width:100%;
margin-bottom:100px;
}

.price_basic dl{
margin: 0;
padding: 0;
width:100%;
overflow: hidden;
line-height:1.5;
font-size:15px;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
.price_basic dl{
margin-bottom:35px;
}
}

.price_basic dt{
width:60%;
float:left;
padding:12px 4px;
border-bottom:1px solid #ddd;
text-align: left;
}
@media only screen and (max-width:767px){
.price_basic dt{
width:100%;
float:none;
padding:12px 4px;
text-align: left;
border-bottom:none;
}
}



.price_basic dd{
margin-left:40%; 
padding:12px 4px;
border-bottom:1px solid #ddd;
background:#fff;
text-align: right;
}
@media only screen and (max-width:767px){
.price_basic dd{
margin-left:0; 
padding:0px 4px 12px 4px;;
background:#fff;
text-align: right;
}
}

.box,
.box4{
background:#f3f3f3;
border:#e0e0e0 solid 1px;
position:relative;
width:100%;
margin:40px 0%;
padding: 35px 55px;
}
@media only screen and (max-width:767px){
.box{
background:#f3f3f3;
border:#e0e0e0 solid 1px;
position:relative;
width:100%;
margin:40px 0%;
padding: 25px 20px;
}

.box4{
background:#f3f3f3;
border:#e0e0e0 solid 1px;
position:relative;
width:100%;
margin:40px 0% 20px 0%;
padding: 25px 20px;
}
}



.tape1,
.tape2,
.tape3,
.tape4{
color:#fff;
position: absolute;
top: -0.75em;
background-color: rgba(255,255,255,.4);
border-left:2px dotted rgba(0,0,0,.1);
border-right:2px dotted rgba(0,0,0,.1);
box-shadow:0 0 5px rgba(0,0,0,0.2);
transform: rotate(-12deg);
background:rgba(63,167,175,1.0);
width:21%;
height:25%;
position:absolute;
top:-18%;
left:36%;
padding-top:6px;
text-align:center;
font-size:19px;
}
@media only screen and (max-width:767px){
.tape1,
.tape2,
.tape3,
.tape4{
width: 60%;
height: 14%;
top: -6%;
left: 20%;
padding-top:0px;
line-height:1.2;
transform: none;
}
}


.tape1{background:rgba(63,167,175,1.0);}
.tape2{background:rgba(234,119,92,1.0);}
.tape3{background:rgba(230,189,98,1.0);}
.tape4{background:rgba(63,132,175,1.0);}

.tape1 span,
.tape2 span,
.tape3 span,
.tape4 span{
font-size:30px;
margin-left:2px;
font-weight:bold;
}


.box h4,
.box4 h4{
font-size:24px;
text-align:center;

margin-bottom:15px;
margin-top:12px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
.box h4,
.box4 h4{
font-size:18px;
margin-top:20px;
}
}

.box h4 span#point1{
color:rgba(63,167,175,1.0);
font-size:30px;
}

.box h4 span#point2{
color:rgba(234,119,92,1.0);
font-size:30px;
}

.box h4 span#point3{
color:rgba(221,165,40,1.0);
font-size:30px;
}

.box4 h4 span#point4{
color:rgba(63,132,175,1.0);
font-size:30px;
}
@media only screen and (max-width:767px){
.box h4 span#point1,
.box h4 span#point2,
.box h4 span#point3,
.box h4 span#point4{
font-size:24px;
line-height:1.2;
}
}

#koushin .box p,
#koushin .box4 p{
margin-bottom:0;
}




#koushin{
overflow: hidden;
}


#support h2{
text-align: center;
font-size:30px;
position: relative;
padding-bottom: .6em;
line-height: 1.7;
color: #444;
margin: 0 auto 30px;
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#support h2{
padding-bottom: .4em;
font-size: 24px;
margin-bottom:50px;
position: relative;
text-align:center;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
}

#support_boutou{
background-image: url(images/support_bg.jpg);
background-repeat: no-repeat;
padding:45px 0 0 40px;
text-align: left;
height:247px;
margin-bottom:30px;
line-height:1.9;
}


.support_case{
float:left;
width:46%;
text-align: left;
margin:2%;
}
@media only screen and (max-width:767px){
.support_case{
float:none;
width:100%;
}
}

.support_dan:after{
content:"";
display:block;
clear:both;
}

.support_case h4{
font-size:24px;
margin-bottom:15px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
.support_case h4{
font-size:18px;
padding-left:4px;
}
}

.support_case h4 span{
display: inline-block;
}

.support_case h4 i{
color:#e6bd62;
font-size:36px;
}
@media only screen and (max-width:767px){
.support_case h4 i{
font-size:32px;
}
}

.support_kadai{
margin-bottom:15px;
padding:8px;
}
@media only screen and (max-width:767px){
.support_kadai{
padding:8px 4px;
}
}


.support_kaiketu{
background-color:#f9f5ec;
padding:20px;
margin-bottom:35px;
}

.box800{
width:800px;
margin:0 auto;
}
@media only screen and (max-width:767px){
.box800{
width:89%;
margin:0 auto;
}
}

/* ---------------------------------------------- */
#koushin {
width:1200px;
margin: 0px auto 90px;
}
@media only screen and (max-width:767px){
#koushin {
width: 89%;
}
}

.koushin_inner{
overflow:hidden;
}

.koushin_boutou {
    background-image: url(images/pict_hitotu.gif);
    background-size: 280px;
    background-repeat: no-repeat;
    background-position: right bottom;
    width: 1180px;
    margin: 0 auto;
    text-align: center;
    padding: 20px 30px 0px 140px;
}
@media only screen and (max-width:767px){
.koushin_boutou{
width:89%;
padding:0px 0px 10px 0px;
background:none;
}
}

.koushin_boutou p {
    text-align: left;
    width: 720px;
    padding-left: 80px;
}
@media only screen and (max-width:767px){
.koushin_boutou p{
width:100%;
padding-left: 0px;
}
}
@media only screen and (max-width:340px){
.koushin_boutou p img{
width:100%;
max-width:150px;
text-align:center;
float:none !important;
display:block;
margin:0 auto;
}
}

.koushin_boutou h2 {
    background-image: url(images/mark_koushin.png);
    background-repeat: no-repeat;
    background-position: 80px 0;
    text-align: left;
    padding: 0 0 0 200px;
	font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}

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

.koushin_boutou img{
max-width:100%;
text-align:center;
width:160px;
margin-bottom:12px;
}
}


@media only screen and (max-width:360px){
.koushin_boutou h2,
.hp_boutou h2{
font-size:17px;
}
}

.koushin_ya {
width: 0;
height: 0;
border-top: 50px solid #f7f2eb;
border-right: 100px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid transparent;
margin:0 auto;
}
@media only screen and (max-width:767px){
.koushin_ya {
border-top: 30px solid #f7f2eb;
border-right: 50px solid transparent;
border-bottom: 30px solid transparent;
border-left: 50px solid transparent;
}
}


.koushinpoint_l{
float:left;
width:600px;
padding:20px 20px 0px 10px;
}
@media only screen and (max-width:767px){
.koushinpoint_l{
float:none;
width:100%;
padding:0;
}
}


.koushinpoint_r{
float:right;
width:600px;
padding:20px 10px 0px 20px;
}
@media only screen and (max-width:767px){
.koushinpoint_r{
float:none;
width:100%;
padding:0;
}
}


#koushin h2{
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
font-size:28px;
text-align:center;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
#koushin h2 {
font-size: 20px;
margin-bottom: 0px;
margin-top:-15px;
line-height:1.0;
}
}



#koushin h2 span{
color: #3fa7af;
}

#koushin_price{
width:1200px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#koushin_price{
width:89%;
}
}

#koushin_koe{
background-color:#f7f7f7;
padding:80px 30px 0px 30px;
margin-bottom:80px;
}
@media only screen and (max-width:767px){
#koushin_koe{
padding:35px 0px 0px 0px;
margin-bottom:60px;
}
}




.koushin_koe_inner{
width:960px;
margin:0 auto 100px;
}
@media only screen and (max-width:767px){
.koushin_koe_inner{
width:89%;
margin:0 auto 60px;
}
}

#koushin_koe h3{
font-size:22px;
margin-bottom:30px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#koushin_koe h3{
font-size:20px;
margin-bottom:25px;
}
}

#koushin_koe p.name{
font-size:14px;
}
@media only screen and (max-width:767px){
#koushin_koe p.name{
margin-bottom:25px;
}
}

.koushin_koe_l{
float:left;
width:165px;
}
@media only screen and (max-width:767px){
.koushin_koe_l{
float:none;
width:100%;
}

.koushin_koe_l img{
max-width:165px;
text-align:center;
}
}

.koushin_koe_r{
float:right;
width:750px;
text-align:left;
}
@media only screen and (max-width:767px){
.koushin_koe_r{
float:none;
width:100%;
}
}



/* ここでまとめて横長の長方形を作ります */
div.ribbon {
 display: inline-block;
 color: #FFFFFF;
  font-size: 21px;
  font-weight:bold;
  line-height: 38px;
 margin:0 0 25px 0;
 position: relative;
 width:350px;
 text-align: center;
}
@media only screen and (max-width:767px){
div.ribbon {
 width:70%;
  font-size:18px;
   margin:0 0 35px 0;
}
}

/* それぞれの長方形のbefore（前）とafter（後ろ）に大きさゼロの要素を作ります */
div.ribbon:before, div.ribbon:after {
 content: "";
 border-style: solid;
 border-width: 0;
 position: absolute;
 width: 0;
 height: 0;
}

div.ribbon {
 background-color: #59C9CE;
}




div.ribbon:before, div.ribbon:after {
 top: 6px;
 z-index: -15;
}
div.ribbon:before {
 border-color: #4BB5B9 #4BB5B9 #4BB5B9 transparent;
 border-width: 19px;
 left: -25px;
}
div.ribbon:after {
 border-color: #4BB5B9 transparent #4BB5B9 #4BB5B9;
 border-width: 19px;
 right: -25px;
}



/* ---------------------------------------------- */




div.contact_list dl{
width:100%;
overflow:hidden;
border-bottom:1px solid #ccc;
border-top:none;
margin-bottom:40px;
text-align: left;
}


div.contact_list dt{
width:28%;
float:left;
padding:15px;
border-top:1px solid #ddd;
}
@media only screen and (max-width:767px){
div.contact_list dt{
width:100%;
float:none;
padding:15px 4px 4px 4px;
font-weight:bold;
}
}


div.contact_list dd{
margin-left:28%; 
padding:15px;
border-top:1px solid #ddd;
background:#fff;
}
@media only screen and (max-width:767px){
div.contact_list dd{
margin-left:0; 
padding:4px 4px 15px 4px;
border-top:none;
}
}


.contact_list p{
padding-top:6px;
font-size:14px;
color:#555;
}


div.contact_list dd:after{
clear:both;
}


div.contact_list dt {
position: relative;
}





input{
padding:8px;
}


.tipped {
color: #999999;
}

#error li{
color:#d3172a;
}



input.submit{
width: 260px;
color: #FFF;
padding: 12px 0;
cursor: pointer;
font-size: 16px;
margin: 0 auto;
border:none;
border-radius:0px;
background: #da4453;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
color: #fff;
padding: 12px 24px;
border: none;
cursor: pointer;
height: auto;
-webkit-appearance: none;

}


input.backbutton{
width: 130px;
color: #FFF;
cursor: pointer;
font-size: 16px;
margin: 0 auto;
border:none;
border-radius:0px;
background: #fff;
display: inline-block;
text-decoration: none;
letter-spacing: 0;
color: #333;
padding: 12px 24px;
border:#333 solid 1px;
cursor: pointer;
height: auto;
-webkit-appearance: none;

}
@media only screen and (max-width:767px){
input.backbutton{
width: 260px;
}
}

input, textarea, select {
font-size: 15px;
background-color: #fff;
border: solid 1px #cccccc;
}




input[type="checkbox"] {
border: 1px solid #aaaaaa;
vertical-align: -8px;
-webkit-appearance: none;
position: relative;
margin-right: 5px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
width: 24px;
height: 24px;
background: #e2e2e2;
background: -webkit-gradient(
 linear, left top, left bottom,
 color-stop(0.00, #ffffff),
 color-stop(1.00, #e2e2e2)
 );
background: linear-gradient(
 to bottom,
 #ffffff 0%,
 #e2e2e2 100%
 );
}



input[type="checkbox"]:checked {
background: #c67188;
border: 1px solid #9a3e58;
}


input[type="checkbox"]:checked:before {
position: absolute;
left: 1px;
top: 15px;
display: block;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
content: "";
width: 10px;
height: 4px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: right center;
}


input[type="checkbox"]:checked:after {
display: block;
position: absolute;
left: 8px;
top: 15px;
content: "";
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
width: 16px;
height: 4px;
background: #ffffff;
-webkit-transform: rotate(-53deg);
-webkit-transform-origin: left center;
}





/* 角丸の入力欄になる */
input[type="text"],
textarea {
border:1px solid #ccc; /* 入力欄枠の色 */
padding: 8px;
-moz-border-radius: 5px; /* Gecko角丸 */
-webkit-border-radius: 5px; /* Webkit角丸 */
width:100%;
}


/* 入力欄にフォーカスした時の枠の色 */
input[type="text"]:focus,
textarea:focus,
input[type="text"]:hover,
textarea:hover {
border: 1px solid #ccc;
background-color: #f2f2f2;
padding:8px;
}

#contact{
padding:50px 20px 70px 20px;
}
@media only screen and (max-width:767px){
#contact{
padding:30px 20px;
}
}


#contact p{
text-align:center;
}
@media only screen and (max-width:767px){
#contact p{
text-align:left;
}
}


#contact_inner{
width:1000px;
margin:0 auto 80px;
}
@media only screen and (max-width:767px){
#contact_inner{
width:89%;
margin:0 auto 40px;
}
}


@media only screen and (max-width:767px){
#copy{
font-size:12px;
}
}




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


header .fixbar {
 position:relative;
}
header.fixed .fixbar {
 position:relative;
}

main{
width:100%;
}


.drawer-overlay {
background-color: rgba(0,0,0,.7);
}
.drawer-menu-item {
    color: #fff;
}
.drawer-navbar .drawer-brand {
    padding-top:6px;
	padding-left:0 !important;
}

a.drawer-brand{
font-size:28px;
}



.drawer-toggle span.letter {
display: block;
font-size: 11px;
padding: 16px 18px 0 1px;
}

}



a.toplink,
span.toplink{
display:block;
border-radius: 12px;
padding:8px;
line-height:1.0;
color:#333;
text-decoration:none;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
font-size:18px;
}

a:hover.toplink{
text-decoration:none;
}




.support_boutou{
background-image: url(images/pict_support.gif);
background-repeat: no-repeat;
background-position: left;
width:1050px;
margin:0 auto;
text-align:center;
height:360px;
padding:20px 30px;
}
@media only screen and (max-width:767px){
.support_boutou{
background:none;
width:89%;
height:auto;
}
}
.support_boutou p{
text-align:left;
padding-left: 262px;
}
@media only screen and (max-width:767px){
.support_boutou p{
text-align:left;
padding-left:0px;
}
}
@media only screen and (max-width:767px){
.support_boutou{
background:none;
width:89%;
padding:0px 0px 10px 0px;
}
}


.support_boutou h2{
text-align: left;
padding:20px 0 0 260px;
margin-bottom:30px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}


.support_boutou p{

}
@media only screen and (max-width:767px){
.support_boutou p{
width:100%;
}
}


@media only screen and (max-width:767px){
.support_boutou h2,
.koushin_boutou h2,
.hp_boutou h2{
background:none;
padding:0 0 0 0px;
text-align: center;
  position: relative;
  line-height: 1.4;
  padding: 0.5em;
  font-weight:normal;
  font-size:21px;
  margin-bottom:20px;
  }
   
.support_boutou h2:before, 
.koushin_boutou h2:before,
.hp_boutou h2:before{/*疑似要素*/

}

}






ul.accordion{display:none}
@media only screen and (max-width:767px){ul.accordion{display:block;}}
ul.accordion { width:100%;padding:1px; font-size:14px;}
@media only screen and (max-width:767px){
ul.accordion { background:#333;}
}

ul.accordion a { display:block; padding:10px 12px; background-position:95% center; background-repeat:no-repeat; text-decoration:none; color:#333;font-size:14px !important;transition: color .3s;}
@media only screen and (max-width:767px){
ul.accordion a { color:#fff;}
}

ul.accordion a:hover{background-color:#fff;display:block;color:#da4453;}


ul.accordion span { display:block; padding:10px 12px; background-position:95% center; background-repeat:no-repeat; color:#333; font-weight:bold;}
ul.accordion ul { display:none;position: absolute;left:10}
ul.accordion > li { background-color:#fff;border-bottom:#ccc 1px solid;cursor:pointer;}
@media only screen and (max-width:767px){
ul.accordion > li { background-color:#222;border-bottom:#333 1px solid;cursor:pointer;}
}

ul.accordion > li:last-child { background-color:#fff;border-bottom:none;cursor:pointer;}
@media only screen and (max-width:767px){
ul.accordion > li:last-child { background-color:#222;border-bottom:none;cursor:pointer;}
}


ul.accordion > li > p { background-color:#f1e6db;cursor:pointer;}
ul.accordion > li > p span { background-image:url(images/open.png);}
ul.accordion > li > p span.open { background-image:url(images/close.png);}
ul.accordion > li > ul > li { background:#f3f3f3; border-bottom:1px solid #ddd;}

ul.accordion > li > ul > li > p { background:#ddd;}
ul.accordion > li > ul > li > a { background:url(images/hyouji.png) no-repeat 95% center;}
ul.accordion > li > ul > li > ul > li { background:#FFF; border-bottom:1px dotted #888;}
ul.accordion > li > ul > li > ul > li:last-child { border:none;}

.drawer-dropdown-menu-item{
    line-height: 1.5rem !important;
	font-weight:normal !important;
}
.drawer-navbar .menu_livepix {
   width:203px !important;
}
.drawer-navbar .menu_hp {
   width:173px !important;
}
@media only screen and (max-width:767px){
.drawer-navbar .drawer-dropdown-menu {
   width:100% !important;
}
}

.drawer-open .accordion,
.drawer-close .accordion{
    display: none;
}

@media only screen and (max-width:767px){
#topcontrol img{
width:41px !important;
height:41px !important;
}

li#spmenu_contact{
background: #da4453;
display: block;
text-decoration: none;
letter-spacing: 0;
color: #fff;
border: none;
cursor: pointer;
height: auto;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
width:180px;
margin:10px auto;
}
}

#footer_blog a{
display:block;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
  text-align: center;
  background-color: #000;
}

#footer_blog a:hover{
  background-color:#333;
  text-decoration:none;
}

#footer_logo li{
border-bottom:1px solid rgba(96,147,150,0.4);
display:block;
text-align: left;
width:100%;
padding:8px;
}

#footer_logo li a{
color: #11ABB0;
font-size:16px;
}

#footer_blog{
margin-bottom:12px;
}

.thumbnail{
text-align:center;
margin-bottom:15px;
}

.thumbnail img {
  border-radius: 130px;
  height: 260px;
  width: 260px;
  border:#ddd solid 1px;
}


#qa{
width:960px;
margin:60px auto 130px;
}
@media only screen and (max-width:767px){
#qa{
width:89%;
margin:30px auto 85px;
}
}

#qa dl{
margin-bottom:20px;
border-bottom:#ccc solid 1px;
}



#yes_no{
width:1200px;
margin:70px auto 70px;
overflow:hidden;
}
@media only screen and (max-width: 767px){
#yes_no{
width:89%;
margin:35px auto;
}
}


#dekiru{

}

#dekiru h3,
#yaranai h3,
#qa h3{
font-size:22px;
margin-bottom:25px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}

#yaranai{
padding:20px;
}
@media only screen and (max-width: 767px){
#yaranai{
padding:0;
}

#yaranai h3 span{
display:none;
}
}



#portfolio_sp {
    width: 1200px;
    margin: 0 auto 80px;
    overflow: hidden;
    height: auto;
}
@media only screen and (max-width: 767px){
#portfolio_sp {
    width: 89%;
    margin: 0 auto 40px;
}
}

#portfolio_sp ul{
    margin:0 0 10px;
}

#portfolio_sp li{
width:33.333%;
padding:20px;
float:left;
margin-bottom:20px;
}
@media only screen and (max-width:767px){
#portfolio_sp li:nth-child(odd){
width:49%;
display: inline-block;
padding:0;
padding-right:1%;
vertical-align: top;
margin-bottom:10px;
}

#portfolio_sp li:nth-child(even){
float:none;
width:49%;
display: inline-block;
padding:0;
padding-left:1%;
vertical-align: top;
margin-bottom:10px;
}

}


h5.portSp{
font: 15px/18px notosans-bold, sans-serif;
color: #11ABB0;
margin: 18px 8px 0px 8px;
text-align: center;
}


#portfolio_sp li p {
font: 12px/18px notosans-regular, sans-serif;
margin: 8px 8px 18px 8px;
color: #999;
}

#portfolio_sp h2{

margin-bottom:30px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#portfolio_sp h2{
font-size:20px
}
}

#portfolio_sp h2 i{
color:#58b6bd;
font-size:42px;
margin-right:12px;
}

.portfolio-item-meta h5 i{
margin-left:10px;
}






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

/*タブのスタイル*/
.tab_item {
  width: calc(100%/2);
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  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;
}
.tab_item:hover {
  opacity: 0.75;
}

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

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 100px 0;
  clear: both;
  overflow: hidden;
}


/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#koushin:checked ~ #koushin_content {
  display: block;
}

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








#flow{
width:1000px;
margin:40px  auto 70px;
}
@media only screen and (max-width:767px){
#flow{
width:89%;
margin:20px  auto 30px;
}
}


.flow_step{
overflow:hidden;
background: linear-gradient(to top, #999, #999) repeat-y 25px/1px;
}


@media only screen and (max-width:767px){
.flow_step{
width:100%;
background: linear-gradient(to top, #999, #999) repeat-y 20px/1px;
}
}

.flow_step div.step_number {
position: relative;
display: inline-block;
margin: 14px 0 10px 0;
padding: 0 5px;
width:50px;
height:50px;
line-height: 50px;
vertical-align: middle;
text-align: center;
color: #FFF;
font-size: 30px;
font-weight: bold;
background:#3FA7AF;
border-radius: 50%;
box-sizing: border-box;
float:left;
}

@media only screen and (max-width:767px){
.flow_step div.step_number {
width:40px;
height:40px;
line-height: 40px;
font-size: 24px;
}
}


.flow_step div.step_number:before{
content: "";
position: absolute;
bottom: -18px;
left: 50%;
margin-left: -12px;
border: 12px solid transparent;
border-top: 15px solid #3FA7AF;;
z-index: 0;
}



.flow_step div.step{
float:left;
width:240px;
text-align:left;
font-size:18px;

padding:25px 0 0 10px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;

}
@media only screen and (max-width:767px){
.flow_step div.step{
float:none;
width:100%;
margin-left:40px;
padding: 20px 0 0 10px;
}
}

.flow_step div.step_detail{
float:right;
text-align:left;
width:710px;
padding:22px 0 30px 0;

}
@media only screen and (max-width:767px){
.flow_step div.step_detail{
float:none;
padding:12px 0 30px 0;
margin-left:48px;
width:auto;
}
}



#port_navi{


}

#port_navi a{
margin:45px auto 35px;
    display: block;
    border: #3fa7af solid 1px;
    border-radius: 25px;
    padding: 12px;
    line-height: 1.0;
    background-color: #fff;
    color: #333;
    text-decoration: none;
	width:250px
}


#port_navi a:hover{
background-color:#3fa7af;
color:#fff;
text-decoration:none;
}




#seo{
margin-bottom:80px;
}
@media only screen and (max-width:767px){
#seo{
width:89%;
margin:0  auto 50px;
}
}
#seo h2{
position: relative;
    padding-bottom: .6em;
    text-align: center;
    font-size: 30px;
    line-height: 1.7;
    color: #444;
    margin:0 auto;
	width:1200px;
	font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#seo h2 {
    padding-bottom: .4em;
    font-size: 26px;
	width:100%;
}
}

 #seo h2:after{
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 1;
    content: '';
    width: 30%;
    height: 5px;
}


#seo h3{
font-size:22px;
margin-bottom:35px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#seo h3{
font-size:18px;
}

#seo div{
text-align:left;
}
}


#qa h2{
font-size:28px;
margin-bottom:35px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
#qa h2{
font-size:26px;
margin-bottom:35px;
}

}



.kansou{
background-color:#f5f3ee;
padding:30px;
margin-bottom:40px;
}
@media only screen and (max-width:767px){
.kansou{
padding:18px;
}
}

.kansou h4{
border-left:none;
padding-left:0;
margin-bottom:25px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}

.kansou h4 i{
margin-right:8px;
font-size:26px;
color:rgba(230,189,98,1.0);
}

.kansou p{
margin-bottom:0;
}


.message{
border: #eee solid 1px;
padding: 15px;
color: #da4453;
width: 860px;
margin: 0 auto;
background-color: #f5f5f5;
}
@media only screen and (max-width:767px){
.message{
width:100%;
}
}


#koushin_news{
padding:25px;
text-align:center;
font-weight:bold;
border:#ddd solid 1px;
background-color:#fff;
color:#A43C3E;
width:900px;
margin:0px auto 30px;
}

@media only screen and (max-width:767px){
#koushin_news{
width:90%;
padding:15px;
text-align:left;
font-size:14px;
}
}






#shusei_boutou{
background-color:#f3f8f9;
width:100%;
padding:80px 0;
}
@media only screen and (max-width:767px){
#shusei_boutou{
padding:20px 0 60px 0;
}
}


#shusei_boutou h2{
font-size:36px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
text-align: center;
background-image: url(images/shusei_midashi_bg.gif);
background-repeat: repeat-x;
height:36px;
line-height:1.0;
width:1200px;
margin:0 auto 50px;
position: relative;
}
@media only screen and (max-width:767px){
#shusei_boutou h2 {
    width: 90%;
    height: auto;
	background:none;
    padding-top: 20px;
    margin-bottom: 30px;
    font-size: 22px;
}
}
#shusei_boutou h2:before{
position: absolute;
top: 40%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
backround-color:#f3f8f9;
}


#shusei_boutou h2 span {
position: relative;
z-index: 0;
display: inline-block;
margin: 0 2.5em;
padding: 0 1em;
background-color: #f3f8f9;
text-align: left;
}
@media only screen and (max-width:767px){
#shusei_boutou h2 span {
margin:0;
padding:0;
}
}

#shusei_summery{
font-size:24px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
text-align: center;
line-height:1.7;
margin:0 auto 60px;
width:90%;
}
@media only screen and (max-width:767px){
#shusei_summery{
font-size:18px;
margin:0 auto 30px;
}
}



.f18{
font-size:18px;
}
@media only screen and (max-width:767px){
.f18{
font-size:14px;
}
}

.f24{
font-size:24px;
}
@media only screen and (max-width:767px){
.f24{
font-size:18px;
}
}

.f30{
font-size:30px;
}
@media only screen and (max-width:767px){
.f30{
font-size:26px;
}
}


.f36{
font-size:36px;
}
@media only screen and (max-width:767px){
.f36{
font-size:28px;
}
}

.f60{
font-size:60px;
}
@media only screen and (max-width:767px){
.f60{
font-size:32px;
}
}

.pink{
color:#ea3207;
}

#shuseiBox{
position: relative;
width:840px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#shuseiBox{
width:88%;
margin:0 auto;
}
}

#shuseiKaishou{
background-color:#66c1aa;
width:840px;
color:#fff;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
text-align: center;
font-size:36px;
padding:20px;
}
@media only screen and (max-width:767px){
#shuseiKaishou{
width:100%;
font-size:22px;
padding:8px 0px
}
}

#shuseiBox_inner{
margin:0 auto;
width:840px;
padding: 30px 40px 30px 40px;
background-color: #fff;
}
@media only screen and (max-width:767px){
#shuseiBox_inner{
width:100%;
padding: 12px;
}
}


@media only screen and (max-width:767px){
#shuseiBox_inner ol{
margin:0;
padding:12px 12px 20px 20px;
}
}


#shuseiBox_inner li{
font-size:20px;
font-weight:bold;
text-align:left;
margin-bottom:12px;
}
@media only screen and (max-width:767px){
#shuseiBox_inner li{
font-size:16px;
font-weight:bold;
margin-bottom:20px;
}
}

#kaishou{
width:100%;
background-color:#f7f2eb;
padding:80px 0 70px 0;
}
@media only screen and (max-width:767px){
#kaishou{
padding:20px 0 70px 0;
}
}

#kaishou_inner{
position:relative;
width:860px;
margin:0 auto;
}
@media only screen and (max-width:767px){
#kaishou_inner{
width:88%;
}
}

#shusei_ya{
position:absolute;
left:40%;
top:-135px;
}
@media only screen and (max-width:767px){
#shusei_ya{
top:-115px;
}
}


#shuseiWaku {
padding: 25px;
border: 3px solid #f2ad35;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
background-color:#fff;
font-weight:bold;
text-align:center;
font-size:18px;
margin:0 auto 70px;
width:780px;
}
@media only screen and (max-width:767px){
#shuseiWaku {
width:100%;
padding:20px 15px;
font-size:16px;
text-align: left;
margin:0 auto 50px;
}
}



.tukaeru{
text-align:center;
margin-bottom:90px;

}
@media only screen and (max-width:767px){
.tukaeru{
text-align:left;
margin:0 auto 50px;
width:92%;
}
}




#shuseiBlock1{
position:relative;
width:830px;
margin:0 auto 130px;
}
@media only screen and (max-width:767px){
#shuseiBlock1{
width:100%;
margin:0 auto 60px;
}
}



#shuseiBlock2{
position:relative;
width:830px;
margin:0 auto 80px;
}
@media only screen and (max-width:767px){
#shuseiBlock2{
width:100%;
margin:0 auto 50px;
}
}

#shuseiBlock1 h3,
#shuseiBlock2 h3{
font-size:24px;
font-family:  "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
text-align: left;
margin-bottom:25px;
}
@media only screen and (max-width:767px){
#shuseiBlock1 h3,
#shuseiBlock2 h3{
font-size:18px;
margin-bottom:12px;
text-align: center;
line-height:1.5;
}
}


#shuseiBlock1 h3 span,
#shuseiBlock2 h3 span{
font-size:36px;
color:#ea775c;
}
@media only screen and (max-width:767px){
#shuseiBlock1 h3 span,
#shuseiBlock2 h3 span{
font-size:26px;
}
}

#shuseiBlock2 h3{
padding-left:250px;
}
@media only screen and (max-width:767px){
#shuseiBlock2 h3{
padding-left:0px;
}
}

#shuseiBlock1_text{
width:580px;
text-align: left;
}
@media only screen and (max-width:767px){
#shuseiBlock1_text{
width:94%;
margin:0 auto;
}
}

#shuseiBlock2_text{
width:580px;
text-align: left;
margin-left:250px;
}
@media only screen and (max-width:767px){
#shuseiBlock2_text{
width:94%;
margin-left:0;
margin:0 auto;
}
}

#shuseiBlock1_pict{
position: absolute;
top:0;
right:0;
}
@media only screen and (max-width:767px){
#shuseiBlock1_pict{
position: relative;
margin-bottom:12px;
}
}

#shuseiBlock2_pict{
position: absolute;
top:-30px;
left:0;
}
@media only screen and (max-width:767px){
#shuseiBlock2_pict{
position: relative;
top:0px;
margin-bottom:12px;
}
}

#help img{
width:400px;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
#help img{
max-width:400px;
width:300px;
}
}


#qa_form{
width:100%;
margin:0 auto;
padding:80px 0 80px 0;
 background-color: #f3f8f9;
}
@media only screen and (max-width:767px){
#qa_form{
width:100%;
margin:0 auto;
padding:50px 0 80px 0;
}
}





.price_basic h2,
#koushin_koe h2,
#price_basic h2,
#qa_form h2{
font-size: 30px;
margin-bottom: 60px;
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro",'Sawarabi Mincho',"ＭＳ Ｐ明朝","MS PMincho",serif;
}
@media only screen and (max-width:767px){
.price_basic h2,
#koushin_koe h2,
#price_basic h2,
#qa_form h2{
font-size: 26px;
margin-bottom: 40px;
}
}


#qa_form dd{
background: none;
}


.name{
text-align:center;

}

.name a{
text-decoration:none;
color:#333;
}

.name a:hover{
text-decoration:underline;
}

.name{
line-height:1.3;

}

.name span{
font-size:12px;
display:block;
margin:8px 0;
}



#qa dl{
margin-bottom:20px;
width:1060px;
}
@media only screen and (max-width:1199px){
#qa dl{
width:100%;
}
}


#qa dl dt{
display:block;
width:100%;
cursor:pointer;
background:url(images/mark_sankaku.gif) no-repeat;
background-position:right 30px bottom 50%;
padding:8px;
}
@media only screen and (max-width:1199px){
#qa dl dt{
padding:6px 20px 6px 2px;
background-position:right 10px top 50%;
background-size:18px;

}
}


#qa dl dd{
width:100%;
display:none;
padding:8px 45px 8px 8px;	
margin-bottom:20px;
}




#qa dl dd p,
#qa dl dt p{
text-align: left;
}


@media only screen and (max-width:1199px){
#qa dl dd{
padding:6px 6px 6px 2px;
}
#qa dl dd img{
margin:10px 20px 30px 0;
float:none;
text-align:center;
}
}


@media only screen and (max-width:767px){
#qa dl dd p,
#qa dl dt p{
padding-top:0px;
}
}


#qa dl dt.active{
background:url(images/mark_sankaku2.gif) no-repeat;
background-position:right 30px bottom 50%;
}
@media only screen and (max-width:1199px){
#qa dl dt.active{
background-position:right 10px bottom 50%;
background-size:18px;
}
}


#faq .faq-contents {
display: none; 
}


#qa dl dt > *{
display: table-cell;
vertical-align: top;
}


#qa dl dd > * {
display: table-cell; 
vertical-align: top;
}


#qa dl dt > span > span,
#qa dl dd > span > span {
border-radius: 50%;
font-weight: bold;
color: #fff;
text-align: center;
font-family: 'Open Sans', sans-serif;
display: block; 
}


#qa dl dt > span span {
color: #495d2f; 
}


#qa dl dt .text {
font-weight: bold; 
}


#qa dl dd > span span {
color:#6f4528; 
}


#qa dl dd a {
display: inline-block;
margin-top: 5px; 
}


#qa dl dd .ex_mail {
display: block;
margin: 0;
padding-top: 15px;
margin-left: 40px;
border: none; 
}


#qa dl dd .ex_mail li {
padding-top: 5px;
padding-bottom: 5px;
border: none;
margin: 0;
word-break: break-all; }


#qa dl dt > span,
#qa dl dd > span {
width: 46px; }
@media only screen and (max-width:767px){
#qa dl dt > span,
#qa dl dd > span {
width:22px; }
}


#qa dl dt > span span,
#qa dl dd > span span {
margin-right:10px;
}
@media only screen and (max-width:767px){
#qa dl dt > span span,
#qa dl dd > span span {
margin-right:2px;;
}
}

#qa dl dt > span span img,
#qa dl dd > span span img{
width:24px;
}


#qa dl dt {
margin-bottom: 10px; } 
@media only screen and (max-width:767px){
#qa dl dt {
margin-bottom: 20px; } 
}