@charset "utf-8";
/* CSS Document */



.how_situetion{
width:100%;
background-color:#f3f8f9;
padding:68px 0 0px;
}


.box_okomari{
background-color:#fff;
text-align:center;
}

.box_okomari h3{
font-weight:900;
font-size:36px;
background-color:#41a7af;
text-align:center;
color:#fff;
padding:8px;
}
@media only screen and (max-width:1023px){
.box_okomari h3{
font-size:28px;
margin-bottom:20px;
}
}
@media only screen and (max-width:767px){
.box_okomari h3{
font-size:18px;
}
}


.box_okomari ul{
padding:60px 180px 80px 180px;
background-image:url(../images/pict_okomari.gif);
background-repeat:no-repeat;
background-position:right 117px top 40px;
text-align: left;
}
@media only screen and (max-width:1199px){
.box_okomari ul{
padding:5% 60px 80px 60px ;
background-position:right 60px top 40px;
}
}
@media only screen and (max-width:1023px){
.box_okomari ul{
background-size:160px;
}
}
@media only screen and (max-width:767px){
.box_okomari ul{
background:none;
padding:20px 20px 80px 20px;
max-width:500px;
margin:0 auto;
}
}


.box_okomari li{
font-size:18px;
font-weight:700;
margin-bottom:8px;
}
@media only screen and (max-width:1023px){
.box_okomari li{
font-size:16px;
}
}
@media only screen and (max-width:767px){
.box_okomari li{
line-height:1.5;
	margin-left: 1.4em;
	text-indent: -1.4em;
	margin-bottom:15px;
}
}


.box_okomari li::before{
font-family: "Font Awesome 5 Free";
content: "\f00c";
margin-right:8px;
color:#66c1aa;
}

span.mark_ya{
position:absolute;
bottom:40px;
left:50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}


.toku{
padding:150px 0px 10px;
position: relative;
overflow: inherit !important;
background-color:#f7f2eb;
width:100%;
}
@media only screen and (max-width:767px){
.toku{
padding:0px 0px 10px;
}
}



.fukidashi1 {
padding: 25px;
border: 3px solid #f2ad35;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
background-color: #fff;
font-weight: 700;
text-align: center;
font-size: 18px;
max-width: 800px;
position: absolute;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
top: -34px;
width: 80%;
}
@media only screen and (max-width:1023px){
.fukidashi1 {
font-size: 16px;
text-align: left;
position: relative;
}
}


.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;
}
}


.toku1{
position: relative;
overflow:hidden;
}


.toku2{
position: relative;
overflow:hidden;
}



h4.koushintoku{
font-size:30px;
font-weight: 700;
display: inline-block;
padding-bottom:15px;
}
@media only screen and (max-width:767px){
h4.koushintoku{
font-size:18px;
text-align: center;
display: block;
margin-bottom:20px;
}
}

h4.koushintoku span{
font-size:46px;
color:#ea775c;
font-weight: 700;
border-bottom: 2px solid #f2ad35;
}
@media only screen and (max-width:767px){
h4.koushintoku span{
font-size:28px;
}
}



.toku1 .imagebox{
float:right;
margin-left:30px;
}
@media only screen and (max-width:640px){
.toku1 .imagebox{
float:none;
margin-left:0px;
text-align: center;
}
}

.toku2 .imagebox{
float:left;
margin-right:30px;
margin-top:20px;
}
@media only screen and (max-width:640px){
.toku2 .imagebox{
float:none;
text-align: center;
margin-right:0px;
margin-top:0px;
}
}


.toku_text{

}

@media only screen and (max-width:1023px){
.toku_text{
text-align: left;
}
}
@media only screen and (max-width:640px){
.toku_text{
max-width: 480px;
margin: 0 auto 20px;
}
}



.text_hosoku{
font-size:12px;
margin-left:70px;
}
@media only screen and (max-width:640px){
.text_hosoku{
max-width: 480px;
margin: 0 auto;
}
}


.linkbox {
text-align: center;
}
a.but{
    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;
	margin:0 auto;
	transition : all 0.5s ease 0s;
}


a.but:hover {
background: #3d4145;
color: #fff;
text-decoration: none;

}






/* ここでまとめて横長の長方形を作ります */
div.ribbon {
 display: inline-block;
 color: #FFFFFF;
  font-size: 21px;
  font-weight:bold;
  line-height: 38px;
 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;
}

.koushin_inner {
overflow: hidden;
}
@media only screen and (max-width:1199px){
.koushin_inner {
max-width:800px;
margin:0 auto;
overflow: visible;
}
}



#point{
padding:0 0 100px;
}
@media only screen and (max-width:900px){
#point{
padding:0 0 200px;
}
}


#point h2{

font-size:28px;
text-align:center;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
#point  h2 {
font-size: 20px;
margin-bottom:60px;
margin-top:-15px;
line-height:1.0;
}
}

.f60 {
    font-size: 60px;
}

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


.koushinpoint_l{
float:left;
width:570px;
padding:20px 20px 0px 10px;
}
@media only screen and (max-width:1199px){
.koushinpoint_l{
float:none;
width:100%;
padding:0;
margin-bottom:80px;
}
}


.koushinpoint_r{
float:right;
width:570px;
padding:20px 10px 0px 20px;
}
@media only screen and (max-width:1199px){
.koushinpoint_r{
float:none;
width:100%;
padding:0;
margin-bottom:80px;
}
}



.box,
.box4{
background:#f3f3f3;
border:#e0e0e0 solid 1px;
position:relative;
width:100%;
margin:40px 0%;
padding: 35px 45px;
}
@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;
}
}
@media only screen and (max-width:580px){
.box p{
text-align:left;
}
}



.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 rgb(0 0 0 / 20%);
    transform: rotate(-12deg);
    background: rgba(63,167,175,1.0);
    width: 21%;
    height: 22%;
    position: absolute;
    top: -18%;
    left: 36%;
    /* padding-top: 6px; */
    text-align: center;
    font-size: 19px;
    line-height: 1.2;
}
@media only screen and (max-width:1199px){
.tape1,
.tape2,
.tape3,
.tape4{
width: 60%;
max-width: 200px;
height: auto;
top: 0%;
left: 50%;
padding-top: 0px;
line-height: 1.2;
transform: none;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}
}


.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;

}
@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;
}

.box 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;
}



#tantou{
max-width:1024px;
border:#ccc solid 1px;
padding:42px 70px;
margin:0 auto 100px;
width:86%;
position:relative;
}
@media only screen and (max-width:1023px){
#tantou{
padding:30px;
}
}

@media only screen and (max-width:640px){
#tantou{
padding:60px 30px;
}
}
@media only screen and (max-width:420px){
#tantou{
border:none;
padding:60px 0px 0px;
}
}

.tantou_midashi{
overflow:hidden;
margin-bottom:25px;
text-align: center;
position:relative;
}
@media only screen and (max-width:640px){
.tantou_midashi{
text-align: left;
}
}
.tantou_text{
text-align: left;
}


#tantou img{
float:left;
margin-right:20px;
}
@media only screen and (max-width:640px){
#tantou img{
width:120px;
}
#tantou .name img{
width:84px;
}
}


#tantou h2{
font-size:30px;
font-weight:900;
color:#3fa7af;
margin:30px 0 0px;
text-align: left;
}

#tantou h3{
font-size:18px;
font-weight:700;
text-align: left;
margin-bottom:30px;
}
@media only screen and (max-width:767px){
#tantou h2{
font-size:20px;
line-height:1.5;
}
#tantou h3{
font-size:16px;
line-height:1.5;
}
}
@media only screen and (max-width:640px){
#tantou h2{
margin:0px 0 4px
}
}



#mainpict_contact{
background-color:#da4453;
color:#fff;
position:absolute;
right: calc(50% - 460px);
width: 120px;
height: 120px;
-webkit-border-radius: 60px;/* width,heightの半分 */
-moz-border-radius:60px;
border-radius: 60px;
padding-top:28px;
text-align:center;
display:block;
text-decoration:none;
z-index:101;
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 span img{
z-index: 9999;
position:absolute;
top:-58px;
right:30px;
}

@media only screen and (max-width:1023px){
#mainpict_contact{
display: none
}
#mainpict_contact_sp{
background-color:#da4453;
color:#fff;
position:absolute;
top:75px;
right:10px;
width:80px;
height: 80px;
-webkit-border-radius: 40px;/* width,heightの半分 */
-moz-border-radius:40px;
border-radius: 40px;
padding-top:19px;
font-size:11px;
z-index:1;
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 span img,
#mainpict_contact_sp span img{
display:none;
}
}

.yura1{
font-size:48px;
}

.yura2{
font-size:30px;
}

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




#koe{
background-color:#f7f7f7;
width:100%;
padding: 100px 0;
position:relative;
}

#koe:before {
    display: block;
    content: "";
    position: absolute;
    top: 0px;
    left: 50%;
    width: 1px;
    height: 120px;
    background-color: #ccc;
}



#koe h2{
font-size: 30px;
text-align: center;
margin-bottom: 50px;
font-weight:700;
}
@media only screen and (max-width:767px){
#koe h2 {
font-size: 24px;
}
}


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


.koeBox1{
width:560px;
float:left;
}

.koe01{
width:100%;
margin-bottom:60px;
}


.koe02{
width:100%;
margin-bottom:60px;
}
@media only screen and (max-width:1199px){
.koe01,
.koe02{
width:90%;
float:none;
max-width:1000px;
margin:0 auto;
}
.koe01{
margin-bottom:80px;
}
}

@media only screen and (max-width:767px){
.koe01,
.koe02{
width:100%;
padding:20px 20px 60px;
background: #fff;
}
}



.koe_ttlBox{
overflow:hidden;
margin-bottom:40px;
background-color: #fff;
}
@media only screen and (max-width:767px){
.koe_ttlBox{
padding:30px 20px;
margin-bottom:0px;
}
}
.koe_ttlBox img{
float:left;
margin-right:36px;
}
@media only screen and (max-width:767px){
.koe_ttlBox img{
float:none;
margin-right:0px;
}
}

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

.koe_ttl{
padding-top:45px;
margin-bottom:35px;
font-weight:bold;
font-size:18px;
text-align: left;
}
@media only screen and (max-width:767px){
.koe_ttl{
text-align:center;
padding-top:35px;
text-align:left;
}
}



.koe_name{
line-heiht:2.0;
font-size:15px;
text-align: left;
}
@media only screen and (max-width:767px){
.koe_name{
text-align:center;
}
}

.koe_text{
text-align:left;
}


#koushin_price{
padding:80px 0;
width:90%;
margin:0 auto;
}

.price_list{
margin-bottom:40px;
}

.price_l{
float:left;
width:48%;
margin-bottom:50px;
}
@media only screen and (max-width:1199px){
.price_l{
float:none;
width:90%;
max-width:1000px;
padding:0;
margin:0px auto 30px;;
}
}


.price_r{
float:right;
width:48%;
padding:0;
margin-bottom:50px;
}
@media only screen and (max-width:1199px){
.price_r{
float:none;
width:90%;
max-width:1000px;
padding:0;
margin:0px auto 30px;;
}
}

#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;
border-bottom:1px solid #ddd;
}
@media only screen and (max-width:767px){
.price_basic dl{
margin-bottom:20px;
}
}

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

.price_basic dt{
width:60%;
float:left;
padding:15px 4px;
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:15px 4px;
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;
}
}

.price_basic h3 {
    padding: 8px;
    background-color: #f3f3f3;

    margin-bottom: 15px;
}


#koushin_flow{
background-color: #f3f8f9;
width: 100%;
padding: 90px 0;

background-repeat: no-repeat;
background-position: bottom 0 left 50px;
}

 @media only screen and (max-width:1400px){
 #koushin_flow{
background-size: 230px;
padding: 90px 0 160px 0;
}
}
 @media only screen and (max-width:768px){
 #koushin_flow{
background-color: #f3f8f9;
padding: 90px 0 300px 0;
background-size: 200px;
}
}

#koushin_flowinner{
    max-width: 1000px;
	width:90%;
    margin: 40px auto 70px;
}

@media only screen and (max-width:767px){
#koushin_flowinner{
margin: 40px auto 0px;
}
}


#koushin_flow h2,
.price_basic h2{
font-size: 30px;
text-align: center;
margin-bottom: 50px;
font-weight:700;
}
@media only screen and (max-width:767px){
#koushin_flow h2,
.price_basic h2{
font-size: 24px;
}
}
#koushin_flow h2 span{
color:#3fa7af;
}


#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:800px){
.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:24%;
text-align:left;
font-size:16px;
padding:25px 0 0 10px;
font-weight:bold;

}
@media only screen and (max-width:800px){
.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:69%;
padding:22px 0 50px 0;
}
@media only screen and (max-width:800px){
.flow_step div.step_detail{
float:none;
padding:12px 0 30px 0;
margin-left:48px;
width:auto;
}
}



#qa{
width:100%;
padding:80px 130px;
}

 @media only screen and (max-width:1199px){
#qa{
padding:80px 40px 50px 40px;
}
}
@media only screen and (max-width:767px){
#qa{
width:89%;
margin:0 auto;
padding:60px 0px;
}
}

#qa dl{
max-width:960px;
width:90%;
margin:0 auto;
}



#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 img{
margin:0px 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 top 15px;
background-size: 12px;
}
}


#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:4px;
margin-top:4px;
}
}

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

#qa dl dt {
margin-bottom: 10px; } 
@media only screen and (max-width:767px){
#qa dl dt {
margin-bottom: 10px; 
padding: 6px 25px 6px 2px;
background-position: right 10px top 15px;
background-size: 12px;
} 
} 


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



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





div.contact_list dl{
width:100%;
overflow:hidden;
border-bottom:1px solid #ccc;
border-top:none;
margin:0 auto 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:1023px){
div.contact_list dt{
float:none;
padding:15px 4px 4px 4px;
font-weight:bold;
max-width:960px;
width:80%;
margin:0 auto;
}
}
@media only screen and (max-width:767px){
div.contact_list dt{
width:98%;
}
}


div.contact_list dd{
margin-left:28%; 
padding:15px;
border-top:1px solid #ddd;

}
@media only screen and (max-width:1023px){
div.contact_list dd{
margin-left:0; 
margin:0 auto;
padding:4px 4px 15px 4px;
border-top:none;
max-width:960px;
width:80%;
}
}
@media only screen and (max-width:767px){
div.contact_list dd{
width:98%;
}
}

.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_inner{
max-width:1000px;
margin:0 auto 80px;
}
@media only screen and (max-width:767px){
#contact_inner{
width:89%;
margin:0 auto 40px;
}
}

.contact_list{
text-align:center;
}


.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;
}

.nini{
background-color:#5d73b3;
color:#d7d7d7;
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;
}



#qa h2,
#qa_form h2{
font-size: 30px;
text-align: center;
margin-bottom: 50px;
font-weight: 700;
}
@media only screen and (max-width:767px){
#qa h2, #qa_form h2 {
font-size: 24px;
}
}

#qa h2 span,
#qa_form h2 span{
color:#3fa7af;
}


.contact_before{
max-width:940px;
width:89%;
margin:0 auto 60px;
border:#da4453 solid 1px;
background-color:#fff;
padding:40px 40px 20px;
}
@media only screen and (max-width:767px){
.contact_before{
padding:20px 20px 10px;
}
}



.contact_before h3{
margin-bottom:20px;
font-size:18px;
text-align:center;
}

.contact_before ul{
margin-bottom:25px;
}

.contact_before li{
list-style: none;
list-style-position: outside;
position: relative;
padding-left: 1.8em;
}

.contact_before li span {
    color:#da4453;
    position: absolute;
    left: 0;
    top: 2px;
    margin: 0;
}

a.motto {
    background: #fff;
	border:#ccc solid 1px;
    display: block;
	width:200px;
    text-decoration: none;
    letter-spacing: 0;
    padding: 10px 18px;
    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;
    margin: 0 auto;
    transition: all 0.5s ease 0s;
	text-align: center;
	
}

a.motto:hover{
background-color: #da4453;
color:#fff;
border:none;
}


.year{
position: absolute;
right:30px;
top:-10px;
}
@media only screen and (max-width:900px){
.year{
    top: -150px;
    right: 50%;
    transform: translateX(50%);
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
}
}

@media only screen and (max-width:900px){
#tantou .year img{
margin-right:0;
}
}


#price_etc{
max-width:1200px;
margin:0 auto 40px;
text-align: center;
}

#price_etc h3{
background-color:#f3f3f3;
padding:8px;
}

.dot_ico{
color:#da4453;
display: inline-block;
font-size:7px;
vertical-align:middle;
}


.taiou_label{
display: inline-block;
font-size:13px;
background-color:#da4453;
color:#fff;
text-align:center;
padding:1px 10px;
margin-right:8px;
width:100px;
line-height:1.2;
}

.bg_g{
background-color:rgb(5 165 177);
}
.bg_y{
background-color:#ddb62f;
}
@media only screen and (max-width:767px){
.taiou_label{
display:block;
margin:20px 0 8px;
line-height:1.8;
}
}

.name img{
width:90px;
height:auto;
}
@media only screen and (max-width:767px){
.name img{
width:90px;
height:auto;
margin:8px;
}
}