@charset "utf-8";

/* common
---------------------------------------------*/
.explain        { padding: 60px 0 90px; }
.explain .inner { display: table; }
.explain h2,
.explain .lead  { display: table-cell; vertical-align: middle; }

.category-list                { position: relative; padding: 120px 0 100px; }
.category-list:nth-child(2n)  { background: #f3f9fb; }
.category-list h3             { position: absolute; top: 0; left: 0; width: 100%; padding-top: 35px; margin-bottom: 30px; text-align: center; }
.category-list h3:before      { content: ""; position: absolute; top: 0; left: 50%; width: 300px; height: 4px; margin-left: -150px; background: #215981; }
.category-list li a           { display: block; position: relative; }
.category-list li figure img  { width: 100%; }
.category-list li dt          { display: inline-block; position: relative; margin: 20px 0 10px; padding-right: 38px; color: #215981; font-size: 2.4rem; font-weight: bold; }
.category-list li dt:after    { content: ""; position: absolute; top: 50%; right: 0; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar_blue.png"); background-size: cover; }
.category-list li dd          { line-height: 1.75; }

.other                        { margin-top: 120px; }
.other p                      { font-size: 1.6rem; }
.other ul                     { margin-top: 35px; }
.other ul:after               { content: ""; display: block; clear: both; height: 0; }
.other ul > li                { float: left; width: calc((100% - 56px) / 3); margin: 28px 28px 0 0; background: #fff; font-size: 2.4rem; line-height: 1.25; }
.other ul > li:nth-of-type(1),
.other ul > li:nth-of-type(2),
.other ul > li:nth-of-type(3) { margin-top: 0; }
.other ul > li:nth-of-type(3n){ margin-right: 0; }
.other ul > li a              { display: table; position: relative; width: 100%; height: 100%; padding: 45px 55px 45px 20px; background: #00afcc; color: #fff; }
.other ul > li a:after        { content: ""; position: absolute; top: 50%; right: 20px; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar.png"); background-size: cover; }
.other ul > li a span         { display: table-cell; vertical-align: middle; }

/* index
---------------------------------------------*/
.index .anchor ul                       { display: flex; justify-content: center; margin-top: 40px; }
.index .anchor ul li                    { margin-right: 30px; }
.index .anchor ul li:nth-of-type(3n)    { margin-right: 0; }
.index .anchor ul li a                  { position: relative; display: block; background: #215981; color: #fff; font-size: 18px; width: 250px; padding: 15px 0; text-align: center; }
.index .anchor ul li a::after { content: ""; position: absolute; width: 10px; height: 10px; top: -7px; right: 20px; bottom: 0; margin: auto; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(135deg); }
.index .outline:after                   { content: ""; display: block; clear: both; height: 0; }
.index .outline figure                  { float: left; width: 408px; }
.index .outline dl                      { float: right; width: 844px; }
.index .outline dl .subtitle            { margin-bottom: 10px; color: #18b6d1; font-size: 2.2rem; font-weight: bold; }
.index .outline dt                      { font-size: 1.6rem; line-height: 1.7; }
.index .outline dd ul:after             { content: ""; display: block; clear: both; height: 0; }
.index .outline dd ul li                { display: table; float: left; width: calc((100% - 28px) / 2); margin: 28px 28px 0 0; background: #fff; font-size: 1.8rem; line-height: 1.25; }
.index .outline dd ul li:nth-of-type(2n){ margin-right: 0; }
.index .outline dd ul li a              { display: table-cell; position: relative; height: 100%; padding: 20px 60px 20px 20px; background: #00afcc; color: #fff; vertical-align: middle; }
.index .outline dd ul li a:after        { content: ""; position: absolute; top: 50%; right: 30px; width: 28px; height: 28px; margin-top: -14px; background: url("/assets/images/i_ar.png"); background-size: cover; }

@media (max-width: 767px) {
  .index .anchor ul { padding: 0 20px; margin-top: 20px; }
  .index .anchor ul li { width: calc(100% / 3); margin-right: 10px;}
  .index .anchor ul li a { width: 100%; font-size: 14px; padding: 7px 0; }
  .index .anchor ul li a::after { content: ""; position: absolute; width: 7px; height: 7px; top: -5px; right: 13px; bottom: 0; margin: auto; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(135deg); }
}


/* list
---------------------------------------------*/
.list .category-title          { margin-top: 60px; }
.list .category-title h2       { position: relative; margin-bottom: 45px; padding-bottom: 5px; border-bottom: 2px solid #ccc; color: #333; font-size: 3rem; font-weight: bold; }
.list .category-title h2:after { content: ""; position: absolute; bottom: -2px; left: 0; width: 200px; height: 2px; background: #0a4774; }
.list .category-list h3        { padding-top: 60px; }

.list .explain    { margin-top: 50px; padding: 0; }
.list .explain h2 { padding-right: 30px; }
.list h4          { position: relative; margin-bottom: 30px; padding-bottom: 5px; color: #215981; font-size: 2.4rem; font-weight: bold; }
.list h4:after    { content: ""; position: absolute; bottom: 0; left: 0; width: 70px; height: 1px; background: #0a4774; }

.list .category-list
 section:not(.explain)                { margin-top: 60px; }
.list .exp                            { line-height: 1.75; }
.list .exp:after                      { content: ""; display: block; clear: both; height: 0; }
.list .exp figure                     { float: left; width: 408px; }
.list .exp figure + dl                { float: right; width: 840px; font-size: 1.6rem; }
.list .exp figure img                 { width: 100%; }
.list .exp > dl > dt                  { margin-bottom: 15px; color: #18b6d1; font-size: 2.2rem; font-weight: bold; line-height: 1.5; }
.list .exp > dl > dt:not(:first-child){ margin-top: 30px; }
.list .exp > dl > dt span             { display: inline-block; margin-right: 10px; padding: 2px 10px; background: #215981; color: #fff; font-family: 'Roboto', sans-serif; font-size: 1.6rem; font-weight: 400; vertical-align: middle; }
.list .exp > dl > dd > dl             { margin-top: 30px; padding: 15px 20px; background: #f2f2f2; }
.list .exp > dl > dd > dl > dt        { margin-bottom: 5px; color: #333; font-size: 1.8rem; font-weight: bold; }

@media (max-width: 767px) {
/* common
---------------------------------------------*/
.explain       { padding: 0 0 25px; }
.explain .inner,
.explain h2,
.explain .lead { display: block; }

.category-list                { padding: 0 0 50px; }
.category-list h3             { position: relative; margin-bottom: 17px; padding-top: 15px; }
.category-list h3:before      { width: 150px; margin-left: -75px; }
.category-list li figure,
.category-list li dl          { float: none; width: auto; }
.category-list li dl          { margin-top: 15px; }
.category-list li dt          { margin: 0 0 5px; padding-right: 30px; font-size: 1.8rem; }
.category-list li dt:after    { width: 20px; height: 20px; margin-top: -11px; }

.other                        { margin-top: 60px; }
.other p                      { font-size: 1.1rem; }
.other ul                     { margin-top: 20px; }
.other ul > li                { width: calc((100% - 30px) / 2); margin: 15px 15px 0 0; font-size: 1.2rem; }
.other ul > li:nth-of-type(3) { margin-top: 15px; }
.other ul > li:nth-of-type(3n){ margin-right: 15px; }
.other ul > li:nth-of-type(2n){ margin-right: 0; }
.other ul > li a              { padding: 15px 30px 15px 10px; }
.other ul > li a:after        { right: 10px; width: 14px; height: 14px; margin-top: -7px; }

/* index
---------------------------------------------*/
.index .outline figure img       { width: 100%; }
.index .outline figure,
.index .outline dl               { float: none; width: auto; }
.index .outline dl .subtitle     { margin: 15px 0 0; font-size: 1.8rem; }
.index .outline dt               { margin-top: 5px; font-size: 1.4rem; line-height: 1.75; }
.index .outline dd ul li         { width: calc((100% - 14px) / 2); margin: 14px 14px 0 0; font-size: 1.2rem; }
.index .outline dd ul li a       { padding: 10px 30px 10px 10px; }
.index .outline dd ul li a:after { right: 10px; width: 14px; height: 14px; margin-top: -7px; }

/* list
---------------------------------------------*/
.list .category-title          { margin-top: 0; }
.list .category-title h2       { margin-bottom: 30px; border-width: 1px; font-size: 2rem; }
.list .category-title h2:after { bottom: -1px; width: 130px; height: 1px; }
.list .category-list h3        { padding-top: 40px; }

.list .explain    { margin-top: 40px; }
.list .explain h2 { padding-right: 0; }
.list h4          { margin-bottom: 15px; padding-bottom: 5px; font-size: 1.8rem; }
.list h4:after    { width: 35px; }

.list .category-list                  { font-size: 1.2rem; }
.list .category-list
 section:not(.explain)                { margin-top: 30px; }
.list .exp figure,
.list .exp figure + dl                { float: none; width: auto; font-size: 1.4rem; }
.list .exp figure                     { margin-bottom: 15px; }
.list .exp > dl > dt                  { margin-bottom: 10px; font-size: 1.8rem; }
.list .exp > dl > dt:not(:first-child){ margin-top: 15px; }
.list .exp > dl > dt span             { padding: 0 5px; font-size: 1.4rem; }
.list .exp > dl > dd > dl             { margin-top: 15px; padding: 10px 15px; }
.list .exp > dl > dd > dl > dt        { margin-bottom: 2px; font-size: 1.4rem; }
}