@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    list-style:none;
    text-decoration: none;
    vertical-align: baseline;
    font-weight: bold;
}
body {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    max-width: 2200px;
    margin: 0 !important;
    margin: auto !important;
    /* overflow-x: hidden; */
    font-size:1.1rem;
    letter-spacing: 0.3;
}
header,footer {
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}
img {
    max-width: 100%;
    border: 0px;
    vertical-align: bottom;
}
/* for modern brouser */
.cf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.cf {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .cf {
  height: 1%;
}
.cf {
  display: block;
}
a {
    text-decoration: none;
}
a:hover {
    opacity: 0.6;
    filter: alpha(opacity=60);
    -ms-filter: "alpha(opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}
.content-inner{
    max-width:960px;
    margin: 80px auto;
    padding: 0 1%;
}
.orange-btn,.green-btn {
    width: 48%;
    float: left;
    margin: 10px 1%;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.orange-btn{
    background-color: #ffa800;
}
.content-wrap .orange-btn {
    min-height: 101px;
}
.orange-btn a{
  width:100%;
  box-sizing: border-box;
  display: inline-block;
  color: #fff;
  font-size: 1.4rem;
  font-weight: bold;
  padding:20px 80px 20px 20px;
  text-align: center;
}
.green-btn{
  /* padding:20px 0; */
  color: #fff;
  background-color: #0EA027;
  font-size: 1.4rem;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  cursor:default;
}
.green-btn span {
    display: block;
    font-size: 1.1rem;
}
.green-btn a {
  text-decoration:none;
  color:#fff;
  padding: 20px;
  display: inline-block;
}
.orange-btn a{
  background: url(./images/btn-circle.png) no-repeat 93%;
}
.content-wrap .orange-btn a {
    line-height: 61px;
}
.orange-btn-area .read {
    text-align: center;
    width: 400px;
    margin: auto;
    font-size: 1.3rem;
    font-weight: bold;
    background-image: url(./images/balloon-l.png),url(./images/balloon-r.png);
    background-repeat: no-repeat;
    background-position: left,right;
}
.orange-btn-area {
    margin-top: 40px;
}
.orange-btn-area .read span {
    font-size: 2rem;
    margin-left: 5px;
    color: #da2e3a;
}
.text-img {
    text-align: center;
    /* margin: 0 1%; */
}
.title-inner {
    font-size: 1.5rem;
    text-align: center;
    background: url(./images/title.png);
    color: #fff;
    padding: 50px 0;
}
.title-inner .text-img {
    float: left;
    margin: 0;
    width: 20%;
}
.title-inner .content-inner {
    margin: 0 auto;
}
.box {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: solid 3px #5EADCA;
    width: 70%;
    margin: auto;
    padding: 3%;
}
.box p {
    text-align: center;
    margin-top: 20px;
}
h2 {
    padding: 0 1%;
}
h2 span {
    font-size: 3rem;
    color: #FFAC0B;
}




/*----------------------header----------------------------*/

header{
    padding: 8px 0;
    background:#f3f7f8;
}
header .content-inner{
    margin:0px auto;
}
header .logo {
    width: 120px;
    float: left;
}
header .orange-btn {
    float: right;
    width: 240px;
    margin: 0;
}
header .orange-btn a{
     background-size: 20px;
     font-size: 1rem;
     padding: 10px;
     background-image: url(./images/mail.png),url(./images/btn-circle.png);
     background-repeat: no-repeat;
     background-position: 7%,93%;
}
header .contact {
    float: right;
    margin-right: 10px;
    /* width: 50%; */
    /* text-align: right; */
}
header .contact dt {
    font-size: 0.8rem;
    float: left;
    text-align: right;
    /* margin-right: 10px; */
}
header .contact dd {
    font-weight:bold;
    font-size: 1.2rem;
    line-height: 40px;
    /* float: left; */
    padding-left: 140px;
}
/*----------------------/header----------------------------*/
h1 {
    padding: 30px;
    background: url(./images/mainv_back.jpg) no-repeat 50%;
    background-size: cover;
    text-align: center;
}
h1 img {
    width: 100%;
    max-width: 1000px;
}

/*----------------------.area-a----------------------------*/

.area-a .strong {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
}

/*----------------------/.area-a----------------------------*/

/*----------------------.area-b----------------------------*/
.recommen .text-area p {
    text-align: center;
    margin: 20px 0;
}
.area-b .recommen {
    margin: 80px 0;
}
.recommen .text-area p span {
    color: #5EADCA;
    font-size: 2rem;
    font-weight: bold;
}
.area-b .recommen .box li {
    background: url(./images/b-boxicon.png) no-repeat left;
    padding-left: 40px;
    padding-bottom: 5px;
    margin: 5px 0;
    border-bottom: solid 2px#5EADCA;
}
.area-b .point {
    margin: 30px 0;
}
.area-b .point li {
    float: left;
    width: 30%;
    margin-right: 3%;
    text-align: center;
}
.area-b .tighten {
    font-size: 2rem;
    text-align: center;
}
.area-b .tighten span {
    font-size: 3rem;
    color: #5EADCA;
}
/*----------------------/.area-b----------------------------*/

/*----------------------.area-c----------------------------*/
.area-c .point-detail .point-1 dl,.area-c .point-detail .point-3 dl{
    float: right;
    width: 67%;
}
.area-c .point-detail .point-1 .icon,.area-c .point-detail .point-3 .icon {
    float: left;
    width: 30%;
}
.area-c .point-detail .point-2 dl,.area-c .point-detail .point-4 dl{
    float: left;
    width: 67%;
}
.area-c .point-detail .point-2 .icon,.area-c .point-detail .point-4 .icon {
    float: right;
    width: 30%;
    text-align: right;
}
.area-c .point-detail li {
    border-bottom: solid 1px #ccc;
    margin-bottom: 50px;
    padding-bottom: 50px;
}
.area-c .point-detail li dt{
    padding-left: 65px;
    font-size: 2rem;
    border-bottom: solid 2px #1C4D8C;
    color: #1C4D8C;
    margin-bottom: 30px;
}
.area-c .point-detail .point-1 dt{
    background: url(./images/c-01-icon.png) no-repeat left;
}
.area-c .point-detail .point-2 dt{
    background: url(./images/c-02-icon.png) no-repeat left;
}
.area-c .point-detail .point-3 dt{
    background: url(./images/c-03-icon.png) no-repeat left;
}
.area-c .point-detail .point-4 dt{
    background: url(./images/c-04-icon.png) no-repeat left;
}
.area-c .point-detail dd {
    font-weight: normal;
}
.area-c .point-detail dd span {
    color: #FFAC0B;
}
/*----------------------/.area-c----------------------------*/


/*----------------------.area-d----------------------------*/
.area-d h2 {
    float: left;
    width: 70%;
    text-align: left;
    /* margin-left: 5%; */
    line-height: 152px;
}
.area-d li {
    width: 48%;
    margin: 1%;
    float: left;
}
.area-d ul {
    margin-bottom: 30px;
}

/*----------------------/.area-d----------------------------*/

/*----------------------.area-e----------------------------*/
.area-e h3 {
    text-align: center;
    width: 600px;
    margin: auto;
    font-weight: bold;
    background-image: url(./images/balloon-l.png),url(./images/balloon-r.png);
    background-repeat: no-repeat;
    background-position: left,right;
}
.area-e h3 span {
    font-size: 2rem;
    color: #FFA800;
    margin: 0 5px;
}
.area-e li {
    width: 33%;
    float: left;
}
.area-e ul {
    margin: 30px 0;
}
.area-e p {
    font-size: 1rem;
    font-weight: normal;
    width: 75%;
    margin: 30px auto;
}
.area-e .box {
    width: 100%;
    box-sizing: border-box;
    background: #f3f7f8;
}
.area-e h4 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 20px;
    color: #1C4D8B;
}

/*----------------------/.area-e----------------------------*/


/*----------------------.area-f----------------------------*/
.area-f li {
    background: url(./images/f-icon.png) no-repeat left top;
    padding-left: 45px;
    margin-bottom: 5px;
}
.area-f ul {
    width: 80%;
    margin: 30px auto;
}

/*----------------------/.area-f----------------------------*/

/*----------------------.area-g----------------------------*/
.area-g h2 {
    float: left;
    width: 76%;
    text-align: left;
    margin-left: 2%;
}
/*----------------------/.area-g----------------------------*/

/*----------------------.area-h----------------------------*/
.area-h h2 {
    float: left;
    width: 80%;
    text-align: left;
    margin-left: 2%;
}
section.area-h {
    background: url(./images/h_back.png);
    padding: 80px 0;
}

section.area-h .content-inner {
    margin: 0 auto;
}

.area-h h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
}

.area-h .text-area {
    float: right;
    width: 70%;
    font-size: 1.5rem;
}

.area-h .icon {
    width: 28%;
    margin-right: 2%;
    float: left;
}
.area-h .text-area span,.area-i .text-area span {
    font-size: 2rem;
    color: #FFA800;
}
/*----------------------/.area-h----------------------------*/

/*----------------------.area-i----------------------------*/
.area-i h3 {
    padding: 20px 50px;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 30px;
    text-align: center;
    background-color: #1c4e8c;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
}
.area-i .text-area {
    float: left;
    width: 70%;
    font-size: 1.5rem;
}

.area-i .icon {
    width: 28%;
    margin-left: 2%;
    float: right;
}
/*----------------------/.area-i----------------------------*/

/*----------------------.area-j----------------------------*/
.area-j li {
    width: 48%;
    margin: 0 1%;
    float: left;
}
/*----------------------/.area-j----------------------------*/

/*----------------------.area-k----------------------------*/
section.area-k {
    background: url(./images/h_back.png);
    padding: 80px 0;
}
.area-k .content-inner {
    margin: 0 auto;
}
/*----------------------/.area-k----------------------------*/

/*----------------------footer----------------------------*/
footer .logo {
    width: 250px;
    float: left;
}
footer .content-inner {
    margin: 0px auto;
}
footer .right-area {
    float: left;
}
footer {
    padding: 20px 1%;
    font-size: 1rem;
    color: #737373;
    background: #f3f7f8;
}
footer .right-area .contact dd {
    color: #FFA800;
    font-weight: bold;
    font-size: 1.2rem;
    width: 12em;
    padding-left: 130px;
    line-height: 38px;
}
footer .right-area .contact dd.tel-link a {
    color: #FFA800;
    font-weight: bold;
    font-size: 1.5rem;
}
footer .right-area .contact dt {
    font-weight: normal;
    float: left;
    font-size: 0.8em;
}
footer .right-area ul{
    clear: both;
}
footer .right-area ul li {
    font-weight: normal;
    float: left;
    margin: 10px 10px 10px 0;
    padding-right: 10px;
    border-right: solid 1px #737373;
}
footer .right-area ul li a{
    font-weight: normal;
    color: #737373;
}
footer .right-area .copy {
    font-size: 0.8rem;
    font-weight: normal;
    clear: both;
}
/*----------------------/footer----------------------------*/









@media screen and ( max-width: 768px) {
.orange-btn, .green-btn {
    width: auto;
    float: none;
}
.orange-btn a {
    padding:5px 50px 5px 20px;
}
.green-btn a{
  padding: 8px 50px 8px 20px;
}
.content-wrap .orange-btn {
     min-height: 0; 
}
.title-inner {
    font-size: 1.2rem;
}
.area-c .point-detail li dt {
    padding-left: 65px;
    font-size: 1.5rem;
}
.area-c .point-detail .point-1 dt {
    /*background: url(./images/c-01-icon.png) no-repeat left top;*/
    background-size: 45px;
}
.area-c .point-detail .point-2 dt {
    /*background: url(./images/c-01-icon.png) no-repeat left top;*/
    background-size: 45px;
}
.area-c .point-detail .point-3 dt {
    /*background: url(./images/c-01-icon.png) no-repeat left top;*/
    background-size: 45px;
}
.area-c .point-detail .point-4 dt {
/*    background: url(./images/c-01-icon.png) no-repeat left top;
*/    background-size: 45px;
}
.area-d h2 {
    line-height: 100px;
}
}

@media screen and ( max-width: 640px) {
header .orange-btn {
    /* display:none; */
}
.area-a .strong {
    font-size: 2rem;
}
.title-inner {
    font-size: 1.1rem;
}
h2 span {
    font-size: 2.5rem;
}
.box {
    width: 100%;
    box-sizing: border-box;
    padding: 3% 1%;
}
.area-b .tighten {
    font-size: 1.5rem;
}
.area-b .tighten span {
    font-size: 2.5rem;
}
.area-c .point-detail .point-1 .icon, .area-c .point-detail .point-3 .icon, .area-c .point-detail .point-2 .icon, .area-c .point-detail .point-4 .icon{
    width: 100%;
    float: none;
    text-align: center;
}
.area-c .point-detail .point-1 dl, .area-c .point-detail .point-3 dl, .area-c .point-detail .point-2 dl, .area-c .point-detail .point-4 dl {
    float: none;
    width: 100%;
}
.area-d h2 {
     line-height: normal; 
}
.area-d li {
    width: 100%;
    margin:0 0 30px 0;
    float: none;
    text-align: center;
}
.area-e h3 {
    width: 100%;
    box-sizing: border-box;
    padding: 0 45px;
}
.area-f ul {
    width: 100%;
}
section.area-h {
    padding: 50px 0;
}
.area-h h3 {
    font-size: 1.5rem;
}
.area-h .text-area {
    font-size: 1.2rem;
}
.area-h .text-area span, .area-i .text-area span {
    font-size: 1.5rem;
}
.area-i h3 {
    font-size: 1.5rem;
}
.area-i .text-area {
    font-size: 1.3rem;
}
.area-j li {
    width: 100%;
    text-align: center;
    float: none;
    margin: 0;
    margin-bottom: 30px;
}
footer .logo {
    width: 150px;
    margin-bottom: 10px;
}
}

@media screen and ( max-width: 480px) {
header .logo {
    width: 100px;
    float: left;
}
header .contact dd a{
    color: #ffa800;
}
h1 {
    padding:20px 10px;
}
.title-inner{
    text-align: left;
    padding: 30px 0;
    font-size: 1rem;
}
.area-a .text-img {
    width: 80%;
    margin: auto;
}
.area-e .title-inner,.area-j .title-inner{
    text-align: center;
}
h2 span {
    font-size: 1.5rem;
}
.orange-btn-area .read {
    width: 72%;
    background-image: url(./images/balloon-l.png),url(./images/balloon-r.png);
    background-size: 30px;
    font-size: 1.1rem;
}
.orange-btn a {
    font-size: 1.1rem;
    background-size: 30px;
}
.orange-btn-area .read span {
    font-size: 1.5rem;
}
.green-btn{
    /* background: url(./images/btn-circle-g.png)#0EA027 no-repeat 93%; */
    /* background-size: 30px; */
    pointer-events: auto;
    cursor:pointer;
}
.green-btn a{
  display: inline-block;
  width: 100%;
  color: #fff;
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  box-sizing: border-box;
  /*word-wrap: break-word*/
  background: url(./images/btn-circle-g.png)#0EA027 no-repeat 93%;
  background-size: 30px;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
}
.area-b .point li {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
}
.content-inner {
    margin: 50px auto;
}
.title-inner .text-img {
    float: none;
    margin: 0 auto;
    width: 25%;
    margin-bottom: 10px;
}
.area-d h2 {
    float: none;
     width: 100%; 
    text-align: center;
    box-sizing: border-box;
}
.recommen .text-area p{
    text-align: left;
    font-weight: normal;
}
.box p {
    text-align: left;
    font-weight: normal;
}
.area-b .tighten {
    font-size: 1rem;
    text-align: left;
}
.area-b .tighten span {
    font-size: 2rem;
}
.area-f li{
    font-weight: normal;
}
.area-g h2 {
    float: none;
     width: 100%; 
    margin-left: 0;
    box-sizing: border-box;
}
.area-h .text-area,.area-i .text-area {
    float: none;
    width: 100%;
    margin-bottom: 10px;
}
.area-h .icon,.area-i .icon {
    width: 50%;
    margin: 0 auto;
    float: none;
}
footer .right-area .contact dd {
     padding-left: 0px; 
}
footer .right-area .contact dt {
     float: none; 
}
}