@charset "UTF-8";
/*------------- ! CAUTION ! ---------------
*  このcssはsassからコンパイルされたものです｡  *
------------------------------------------*/
/* reset
-------------------------------------------*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
figure {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  line-height: 1;
}

img {
  vertical-align: bottom;
}

br {
  letter-spacing: 0;
}

/* Jimdo Resets
-------------------------------------------*/
.j-text ul, .j-text ul li,
.j-textWithImage ul, .j-textWithImage ul li,
.j-htmlCode ul, .j-htmlCode ul li,
.j-text ol, .j-text ol li,
.j-textWithImage ol, .j-textWithImage ol li,
.j-htmlCode ol, .j-htmlCode ol li,
.j-table ul, .j-table ul li {
  margin: 0;
  padding: 0;
}

.j-text ul, .j-text ul li,
.j-textWithImage ul, .j-textWithImage ul li,
.j-htmlCode ul, .j-htmlCode ul li,
.j-table ul, .j-table ul li {
  margin-left: 5px;
  list-style-position: inside;
}

.j-text ul li,
.j-textWithImage ul li,
.j-htmlCode ul li,
.j-table ul li {
  margin-bottom: 10px;
}

.j-text ol li,
.j-textWithImage ol li,
.j-htmlCode ol li,
.j-table ol li {
  list-style: decimal;
  margin-left: 25px;
  margin-bottom: 5px;
}

.j-table table {
  width: 100%;
  border: 1px solid #B6B6B6;
  border-collapse: collapse;
  border-spacing: 0;
}

.j-table table th {
  padding: 15px;
  border: 1px solid #B6B6B6;
  background-color: #E6E6E6;
  text-align: left;
}

.j-table table td {
  padding: 15px;
  border: 1px solid #B6B6B6;
  background: #FFF;
}

/* init
-------------------------------------------*/
#toolBar {
  display: none;
}

html {
  font-size: 62.5%;
  background-color: #FFF;
}

body {
  font-family: Roboto, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "游 ゴシック", Yu Gothic, "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

/* site settings
-------------------------------------------*/
body {
  color: #000;
  font-size: 1.6em;
  line-height: 1.8;
}

.inner {
  position: relative;
  padding: 0 2.604vw;
}

a {
  color: #00608D;
}

a:hover {
  text-decoration: none;
  opacity: .7;
}

img {
  height: auto;
}

/* utility class
-------------------------------------------*/
.fl-r {
  float: right;
}

.fl-l {
  float: left;
}

.clear {
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.hover:hover,
.link--hover:hover {
  opacity: 0.7;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.uline,
.link--uline {
  text-decoration: underline;
}

.uline:hover,
.link--uline:hover {
  text-decoration: none;
}

.uline--r,
.link--noline {
  text-decoration: none;
}

.uline--r:hover,
.link--noline:hover {
  text-decoration: underline;
}

ul.list, .list--h, .list--hb, .list--flex {
  overflow: hidden;
  zoom: 1;
  list-style-type: none;
}

.list--h:after {
  content: "";
  clear: both;
  display: table;
}

.list--h > li {
  float: left;
}

.list--hb {
  letter-spacing: -.6em;
  text-align: center;
}

.list--hb > li {
  display: inline-block;
  letter-spacing: normal;
  vertical-align: middle;
}

.list--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

ul[class*="list1-"] {
  clear: both;
  overflow: hidden;
  zoom: 1;
}

ul[class*="list1-"] li {
  padding-right: 20px;
  float: left;
  line-height: 1.4;
}

.list1-2 li {
  width: 50%;
}

.list1-3 li {
  width: 33.3%;
}

.list1-4 li {
  width: 25%;
}

ol.list {
  counter-reset: li;
}

ol.list li {
  position: relative;
  margin-left: 1em;
}

ol.list li:before {
  content: counter(li);
  counter-increment: li;
  position: absolute;
  left: -1em;
  width: 1em;
  text-align: center;
}

/* style
-------------------------------------------*/
.contents h1 {
  position: relative;
  padding: 0 0 0 26px;
}

.contents h1::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  border-radius: 6px;
  background: #008BAB;
  content: "";
}

.contents h2 {
  padding-bottom: 17px;
  border-bottom: 1px dashed #BBB;
}

.contents h3 {
  position: relative;
  padding-left: 14px;
}

.contents h3::before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 4px;
  height: calc( 100% - 8px);
  border-radius: 2px;
  background: #008BAB;
  content: "";
}

.contents .lines-left,
.contents .lines-right {
  position: relative;
  padding: 15px;
  border-radius: 10px;
}

.contents .lines-left::before,
.contents .lines-right::before {
  border: 10px solid transparent;
  content: "";
}

.contents .lines-left {
  background: #FFF5B4;
}

.contents .lines-left::before {
  position: absolute;
  top: -40px;
  left: 2.6vw;
}

.contents .lines-right {
  background: #DCEBB4;
}

.contents .lines-right::before {
  position: absolute;
  top: -40px;
  right: 2.6vw;
}

.contents .back {
  padding: 2.083vw;
  border-radius: 5px;
  background: #E6E6E6;
}

.contents .j-calltoaction-link-style-1 {
  padding: 2.083vw 3.91vw;
  border-radius: 10px;
  box-sizing: border-box;
  background: #008BAB;
  color: #FFF;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: bold;
}

.contents .j-calltoaction-link-style-2 {
  padding: 2.61vw 6.25vw;
  border: 2px solid #008BAB;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFF;
  color: #008BAB;
  text-decoration: none;
  font-size: 3.646vw;
  font-weight: bold;
}

.contents .j-calltoaction-link-style-3 {
  padding: 3.91vw 6.25vw;
  border-radius: 6.51vw;
  box-sizing: border-box;
  background: #008BAB;
  color: #FFF;
  text-decoration: none;
  font-size: 3rem;
}

/*
layout
-------------------------------------------*/
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

#page .globalnavi .gsc-control-cse {
  padding: 0;
  border: none;
  background: transparent;
}

#page .globalnavi .gsc-search-box {
  margin: 0;
}

#page .globalnavi .gsc-input {
  padding: 0;
}

#page .globalnavi .gsc-input-box {
  overflow: hidden;
  width: 59.896vw;
  height: 7.8125vw;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

#page .globalnavi .gsc-input-box .gsib_a {
  padding: 0;
}

#page .globalnavi .gsc-input-box input {
  margin: 0 !important;
  padding: 1.97vw !important;
  font-size: 3.125vw;
}

#page .globalnavi .gsc-search-button {
  overflow: hidden;
  margin: 0;
}

#page .globalnavi .gsc-search-button input[type=image].gsc-search-button {
  width: 7.8125vw;
  height: 7.8125vw;
  padding: 2.60vw;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: #008BAB;
  vertical-align: bottom;
}

#page .side .gsc-control-cse {
  padding: 0 15px;
  border: none;
  background: transparent;
}

#page .side .gsc-input {
  padding: 0;
}

#page .side .gsc-input-box {
  overflow: hidden;
  border: none;
  box-sizing: border-box;
}

#page .side .gsc-search-button input[type=image].gsc-search-button {
  width: 40px;
  height: 40px;
  padding: 12px;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  background: #008BAB;
}

#page .side .gsib_a {
  padding: 0 4px;
}

.graylayer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
}

.header {
  position: relative;
  background: #FFF;
  z-index: 15;
}

.header .inner {
  padding: 2.60vw;
  border-bottom: 4px solid #008BAB;
}

.header__logo {
  float: left;
}

.header__logo a {
  display: block;
}

.header__logo__catch {
  line-height: 1;
  margin-top: 1.95vw;
  color: #008BAB;
  font-size: 2.60vw;
}

.header__expert {
  float: right;
  margin-top: 14px;
}

.header__apply {
  float: right;
  margin: 24px 10px 0 0;
}

.header__button {
  position: absolute;
  top: 2.6vw;
  right: 0;
}

.header__button a {
  display: block;
}

.header__button a img {
  width: 23.4375vw;
}

.globalnavi {
  position: absolute;
  top: calc(18.089vw + 4px);
  left: 0;
  width: 100%;
  background: #FFF;
  z-index: 10;
}

.globalnavi ul {
  margin: 0;
  -webkit-padding-start: 0;
}

.globalnavi ul > li {
  list-style: none;
  border-bottom: 1px solid #B3B3B3;
}

.globalnavi ul > li li:last-child {
  border-bottom: none;
}

.globalnavi ul > li a {
  display: block;
  padding: 2.60vw 5.86vw;
  color: #008BAB;
  font-size: 3.125vw;
  font-weight: bold;
  text-decoration: none;
}

.globalnavi ul > li a:first-letter {
  margin-left: -3.64vw;
  padding-left: 3.64vw;
  background: url(https://u.jimcdn.com/cms/o/s3a20e79d7411fdd5/userlayout/img/icon-arrow.png?t=1480563421) no-repeat 0 center/1.0417vw 1.5625vw;
}

.globalnavi ul > li a.current {
  background-color: #CCE5E5;
}

.globalnavi ul ul {
  margin-left: 20px;
}

.globalnavi__search {
  padding: 3.91vw 2.60vw;
  background: #CCE5E5;
}

.globalnavi__search__heading {
  display: inline-block;
  margin-right: 1.30vw;
  color: #008BAB;
  font-size: 3.91vw;
  vertical-align: middle;
}

.globalnavi__search__box {
  display: inline-block;
  width: 67.71vw;
  vertical-align: middle;
}

.globalnavi__close {
  text-align: center;
}

.globalnavi__close a {
  display: block;
  width: 100%;
  padding: 1.823vw 0;
  background: #008BAB;
}

.globalnavi__close img {
  display: inline-block;
  width: 10.55vw;
  vertical-align: middle;
}

.contents {
  margin-top: 2.60vw;
}

.contents .side {
  position: relative;
  z-index: 1;
}

.contents .side__globalnavi {
  margin-bottom: 30px;
}

.contents .side__globalnavi ul {
  margin: 0;
  -webkit-padding-start: 0;
}

.contents .side__globalnavi ul > li {
  list-style: none;
  border-bottom: 1px solid #B3B3B3;
}

.contents .side__globalnavi ul > li li:last-child {
  border-bottom: none;
}

.contents .side__globalnavi ul > li a {
  display: block;
  padding: 14px 0 14px 10px;
  color: #008BAB;
  text-decoration: none;
  font-weight: bold;
}

.contents .side__globalnavi ul > li a:first-letter {
  margin-left: -10px;
  padding-left: 10px;
  background: url(https://u.jimcdn.com/cms/o/s3a20e79d7411fdd5/userlayout/img/icon-arrow.png?t=1480563421) no-repeat 0 center/4px 6px;
}

.contents .side__globalnavi ul > li a.current {
  background-color: #CCE5E5;
}

.contents .side__globalnavi ul ul {
  margin-left: 20px;
}

.contents .side__cont__search {
  padding: 16px 0 10px;
  border-radius: 10px;
  background: #CCE5E5;
}

.contents .side__cont__search__heading {
  margin: 0 0 10px 10px;
  padding: 0;
  border: none;
  color: #008BAB;
  font-size: 2rem;
}

.contents .side__cont__sys__sitenext, .contents .side__cont__sys__jimdo, .contents .side__cont__sys__facebook {
  margin-top: 2.60vw;
  text-align: center;
}

.contents .side__cont__sys__sitenext img, .contents .side__cont__sys__jimdo img, .contents .side__cont__sys__facebook img {
  display: inline-block;
}

.contents .main {
  position: relative;
  z-index: 0;
}

.footer #contentfooter {
  color: #FFF;
}

.footer__expert {
  width: 39.0625vw;
  margin: 2.60vw auto 0;
}

.footer__expert img {
  width: 100%;
}

.footer #copyright {
  line-height: 1;
  margin-top: 10px;
  font-family: "HelvaticaNeve-Light", "Helvatica Neve Light", "Helvetica Neve", Helvetica, Arial;
}

@media only screen and (min-width: 48.0625em){
  .inner{
    width: 1024px;
    margin: 0 auto;
  }
  .sp{
    display: none;
  }
  .contents .lines-left,
  .contents .lines-right{
    min-height: 82px;
    padding: 15px 18px;
    box-sizing: border-box;
  }
  .contents .lines-left::before,
  .contents .lines-right::before{
    border-left-width: 20px;
    border-right-width: 20px;
  }
  .contents .lines-left{
    margin-left: 20px;
  }
  .contents .lines-left::before{
    position: absolute;
    top: 20px;
    left: -40px;
    border-right-color: #FFF5B4;
  }
  .contents .lines-right{
    margin-right: 20px;
  }
  .contents .lines-right::before{
    border-left-color: #DCEBB4;
    position: absolute;
    top: 20px;
    right: -40px;
  }
  .contents .back{
    padding: 15px;
  }
  .contents .j-calltoaction-link-style-1{
    padding: 10px 40px;
    font-size: 1.8rem;
  }
  .contents .j-calltoaction-link-style-2{
    padding: 10px 40px;
    font-size: 2.2rem;
  }
  .contents .j-calltoaction-link-style-3{
    padding: 10px 40px;
    font-size: 3rem;
  }
  #page .side .gsc-input-box{
    height: 40px;
    margin-top: -5px;
    padding: 7px 0;
  }
  .header .inner{
    padding: 16px 0;
  }
  .header__logo__catch{
    margin-top: 17px;
    font-size: .75em;
  }
  .contents{
    margin-top: 30px;
  }
  .contents .side{
    float: left;
    width: 300px;
  }
  .contents .side__cont__sys__sitenext, .contents .side__cont__sys__jimdo, .contents .side__cont__sys__facebook{
    margin-top: 10px;
  }
  .contents .main{
    float: right;
    width: 100%;
    margin-left: -300px;
    padding: 0 0 0 344px;
    box-sizing: border-box;
  }
  .footer{
    font-size: 1.2rem;
  }
  .footer #copyright{
    margin-top: 15px;
    font-size: 1.2rem;
  }
}

@media only screen and (max-width: 68.75em){
  .inner{
    width: 94%;
    margin-right: 0 auto;
  }
  .header__logo img{
    width: 49.09vw;
  }
  .header__expert{
    margin-top: 1.273vw;
  }
  .header__expert img{
    width: 16.364vw;
  }
  .header__apply{
    margin: 2.182vw 0.909vw 0 0;
  }
  .header__apply img{
    width: 22.723vw;
  }
}

@media only screen and (max-width: 48em){
  .pc{
    display: none;
  }
  .contents .lines-left,
  .contents .lines-right{
    margin-top: 20px;
  }
  .contents .lines-left::before,
  .contents .lines-right::before{
    border-top-width: 20px;
    border-bottom-width: 20px;
  }
  .contents .lines-left::before{
    border-bottom-color: #FFF5B4;
  }
  .contents .lines-right::before{
    border-bottom-color: #DCEBB4;
  }
  .contents .cc-m-hgrid-column{
    width: 100% !important;
  }
  .header__logo img{
    width: 70.3125vw;
  }
  .contents .side__cont__sys{
    margin: 14.323vw -2.604vw 0;
    padding: 9.765vw 9.635vw 9.375vw;
    background: #E6E6E6;
  }
  .contents .side__cont__sys__sitenext, .contents .side__cont__sys__jimdo{
    float: left;
    width: 39.0625vw;
  }
  .contents .side__cont__sys__sitenext img, .contents .side__cont__sys__jimdo img{
    max-width: 100%;
  }
  .contents .side__cont__sys__jimdo{
    margin-left: 1.60vw;
  }
  .footer{
    text-align: center;
  }
  .footer #contentfooter .leftrow, .footer #contentfooter .rightrow{
    width: 100%;
    text-align: center;
  }
}