@charset "UTF-8";
.clearfix:after {
content: " ";
display: block;
clear: both;
}
a {
text-decoration: none;
color: #ccc;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
a:hover {
opacity: 0.7;
}
img {
width: 100%;
height: auto;
outline: none;
border: none;
vertical-align: top;
}
body {
margin: 0;
padding: 0;
line-height: 1;
background-color: #ffffff;
color: #333333;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

@media (max-width: 640px) {
.pc {
display: none;
}

/* header */
header {
    width: 100%;
    height: 75px;
    background-color: #ffffff;
}
header .left p {
width: 100%;
    max-width: 100%;
    padding-top: 10px;
    padding-right: 15px;
    float: none;
    font-size: 8px;
    line-height: 1.4375;
    letter-spacing: 0.05em;
    padding-left: 15px;
    box-sizing: border-box;
}
header .left h1 {
    width: 65%;
    max-width: 250px;
    padding-top: 0px;
    padding-left: 0;
    float: none;
    margin: 0 auto 10px;
}
header .right {
display: none;
}

/* mainnav */
#mainnav .inner.clearfix {
    display: flex;
    flex-wrap: wrap-reverse;
}
	
#mainnav ul {
width: 64.8%;
margin: 0 auto;
padding: 10px 0;
}
#mainnav ul li.txt {
font-size: 10px;
text-align: center;
margin-bottom: 6px;
}
#mainnav .people,
#mainnav .button2 {
display: none;
}

/* trouble */
	#trouble .inner.clearfix {
    display: flex;
    flex-wrap: wrap-reverse;
}
#trouble h2 {
margin-bottom: 30px;
}
#trouble .left {
    margin-bottom: 45px;
    padding: 0 15px;
}
#trouble .right {
margin-bottom: 30px;
}

/* points */
#points h2 {
margin-bottom: 30px;
}
#points .block {
    margin-bottom: 25px;
    padding: 0 30px;
}
#points .fukidashi {
margin-top: 40px;
margin-bottom: 5px;
}

/*why*/
	.fukidashi {
    padding: 50px 15px 0;
}
#why {
width: 100%;
background-color: #dcf0f5;
padding-bottom: 50px;
}
#why .inner .left {
width: 85.333%;
margin: 0 auto;
    padding: 20px 0 55px;
}
#why .inner .left figure {
width: 59.375%;
margin: 0 auto;
padding: 0 0 25px;
}
#why .inner .left h3 {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
#why .inner .left .lead {
font-size: 12px;
font-weight: bold;
letter-spacing: -0.05em;
line-height: 1.25;
padding: 0 0 10px;
margin-bottom: 20px;
border-bottom: 1px solid #333333;
}
#why .inner .left .detail {
font-size: 14px;
line-height: 1.4615;
}
#why .inner .right {
width: 92%;
margin: 0 auto;
padding: 34px 0;
background-color: #ffffff;
border-radius: 20px;
}
#why .inner .right h3 {
width: 86.957%;
margin: 0 auto;
}
#why .inner .right p {
width: 76.812%;
margin: 0 auto;
font-size: 13px;
line-height: 2;
margin-top: 30px;
}

/* case */
#case {
padding-bottom: 50px;
}
#case h2 {
margin-bottom: 40px;
}
#case .block {
    padding: 0 30px;
    margin-bottom: 30px;
}
#case .block:last-child {
margin-bottom: 0;
}
#case .arrow {
 width: 34.667%;
 margin: 30px auto;
}
#case .attention {
 width: 85.333%;
 margin: 0 auto;
}


/*flow*/
#flow {
width: 100%;
background-color: #fbfcfc;
padding-bottom: 50px;
}
#flow h2 {
padding-bottom: 23px;
}

/*contact*/
#contact {
background-color: #ffffff;
}
#contact p {
 font-size: 16px;
 line-height: 1.5625;
 margin: 35px 0 !important;
 text-align: center;
}

/*pagetop*/
#pagetop {
width: 100%;
background-color: #ffffff;
text-align: center;
padding: 35px 0;
}
#pagetop a {
font-size: 14px;
color: #4fb2cf;
text-decoration: underline;
font-weight: bold;
}

/*footer*/
footer {
width: 100%;
background-color: #4fb2cf;
color: #ffffff;
text-align: center;
font-size: 11px;
line-height: 1.58333;
padding: 25px 0;
}
footer a {
 color: #ffffff;
}


}

@media (min-width: 641px) {
.left {
float: left;
}
.right {
float: right;
}
.sp {
display: none;
}

header {
width: 100%;
min-width: 1200px;
height: 99px;
background-color: #ffffff;
border-bottom: 1px solid #cccccc;
}
header .inner {
width: 960px;
margin: 0 auto;
padding: 0 120px;
}
header .inner p {
font-size: 10px;
margin: 10px 0;
}
header .inner h1 {
width: 353px;
height: auto;
}
header .inner .button {
width: 330px;
height: auto;
margin-top: 10px;
}

/*	 mainvisual */
#mainvisual {
width: 100%;
min-width: 1200px;
height: 520px;
background-image: url(../images/bg-mainvisual.jpg);
background-repeat: repeat-x;
}
#mainvisual .inner {
width: 1200px;
margin: 0 auto;
}

/*	mainnav*/
#mainnav {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
}
#mainnav .inner {
width: 969px;
margin: 0 auto;
padding: 0 122px 0 109px;
position: relative;
}
#mainnav .people {
width: 144px;
height: auto;
float: right;
margin-top: -23px;
}
#mainnav ul {
float: right;
	margin-right:10px;
}
#mainnav ul .txt {
font-family: 'ヒラギノ丸ゴ ProN W4', 'Hiragino Maru Gothic ProN', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 14px;
margin: 10px 0 10px 26px;
}
#mainnav ul .button {
width: 330px;
}
#mainnav .txt2 {
    width: 425px;
    height: auto;
    margin-left: 10px;
    float: left;
    margin-top: 18px;
}


/*trouble*/
#trouble {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
}
#trouble h2 {
width: 100%;
min-width: 1200px;
height: 125px;
background-image: url(../images/bg-trouble.png);
background-repeat: repeat-x;
}
#trouble h2 .inner {
width: 1200px;
margin: 0 auto;
padding: 0;
}
#trouble .inner {
width: 960px;
margin: 0 auto;
padding: 35px 0 90px;
}
#trouble .inner .left {
width: 505px;
margin-right: 20px;
	    margin-top: 50px;
}
#trouble .inner .right {
width:435px;
}
#trouble .attention {
 width: 950px;
 margin: 0 auto;
 padding-bottom: 60px;
}

/*points*/
#points {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
}
#points h2 {
width: 100%;
min-width: 1200px;
height: 125px;
background-image: url(../images/bg-trouble.png);
background-repeat: repeat-x;
}
#points h2 .inner {
width: 1200px;
margin: 0 auto;
padding: 0;
}
#points .inner {
width: 950px;
margin: 0 auto;
padding: 35px 0 20px;
}
#points .inner .block {
width: 304px;
margin-right: 19px;
float: left;
}
#points .inner .block:last-child {
margin-right: 0;
}
#points .fukidashi {
padding-top: 45px;
}

/*why*/
#why {
width: 100%;
min-width: 1200px;
background-color: #daeff5;
}
#why .inner {
width: 950px;
margin: 0 auto;
padding: 60px 0;
}
#why .inner .left {
width: 430px;
}
#why .inner .left figure {
width: 300px;
margin: 0 auto;
}
#why .inner .left h3 {
font-size: 20px;
font-weight: bold;
padding-left: 9px;
margin-top: 22px;
margin-bottom: 15px;
}
#why .inner .left .lead {
font-size: 16px;
font-weight: bold;
letter-spacing: -0.05em;
line-height: 1.25;
padding: 0 9px 10px;
margin-bottom: 15px;
border-bottom: 1px solid #333333;
}
#why .inner .left .detail {
font-size: 13px;
line-height: 1.4615;
padding: 0 9px;
}
#why .inner .right {
width: 420px;
margin-top: 10px;
background-color: #fff;
padding: 35px 40px;
border-radius: 20px;
}
#why .inner .right p {
font-size: 13px;
line-height: 2;
margin-top: 21px;
}

/*case*/
#case {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
}
#case h2 {
width: 100%;
min-width: 1200px;
height: 125px;
background-image: url(../images/bg-trouble.png);
background-repeat: repeat-x;
}
#case h2 .inner {
width: 1200px;
margin: 0 auto;
padding: 0;
}
#case .inner {
width: 950px;
margin: 0 auto;
padding: 55px 0 60px;
}
#case .inner .block {
width: 304px;
margin-right: 19px;
float: left;
}
#case .inner .block:last-child {
margin-right: 0;
}
#case .arrow {
 width: 262px;
 margin: 40px auto;
}

/*flow*/
#flow {
width: 100%;
min-width: 1200px;
background-color: #f8f8fa;
}
#flow h2 {
width: 100%;
min-width: 1200px;
height: 125px;
background-image: url(../images/bg-flow.png);
background-repeat: repeat-x;
}
#flow h2 .inner {
width: 1200px;
margin: 0 auto;
padding: 0;
}
#flow .inner {
width: 860px;
margin: 0 auto;
padding: 35px 0 60px;
}
#flow .inner .block {
width: 860px;
}
.fukidashi {
    width: 896px;
    margin: 0 auto;
    padding: 80px 0 0;
}
/*contact*/
#contact {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
}
#contact h2 {
width: 100%;
min-width: 1200px;
height: 140px;
background:#4fb2cf;
	position: relative;
}
	
	#contact h2::before {
		position: absolute;
		content:"";
width: 100%;
height: 1px;
background:#fff;
		top:10px;
}
		#contact h2::after {
		position: absolute;
		content:"";
width: 100%;
height: 1px;
background:#fff;
		bottom:10px;
}
#contact h2 .inner {
width: 1200px;
margin: 0 auto;
padding: 0;
}
#contact p {
 font-size: 22px;
 line-height: 1.4545;
 margin-bottom: 35px;
 text-align: center;
}
#contact .inner {
width: 930px;
margin: 0 auto;
padding: 35px 0 0;
}

/*pagetop*/
#pagetop {
width: 100%;
min-width: 1200px;
background-color: #ffffff;
text-align: center;
padding: 60px 0;
}
#pagetop a {
color: #4fb2cf;
text-decoration: underline;
font-weight: bold;
}

/*footer*/
footer {
width: 100%;
min-width: 1200px;
background-color: #4fb2cf;
color: #ffffff;
text-align: center;
font-size: 12px;
line-height: 1.58333;
padding: 22px 0;
}
footer a {
 color: #ffffff;
}


}