@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;500;700;900&display=swap');

/* LINK */
/* ----------------------------------------------------- */
/* global link*/
a:visited { color: #0f70d4; }
a:hover { color: #0f87e6; }
.main-contents a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #0f70d4;
}
  .main-contents a::after {
    position: absolute;
    bottom: 4px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #0f87e6;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
  }
    .main-contents a:hover::after {
      bottom: -1px;
      opacity: 1;
      visibility: visible;
    }
a:active { color: #0f87e6; }


/* general */
/* ----------------------------------------------------- */

.sp_only {
  display: none;
}
.pc_only {
  display: block;
}

@media screen and (max-width: 768px) {
  .sp_only {
    display: block;
  }
  .pc_only {
    display: none;
  }
}


html {
font-size:62.5%;/*pxだと10px;*/
font-family: 'Noto Sans JP', sans-serif;
}

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  background: #fff;
  font-size:1.8rem;/* 18px*/
  line-height: 2;
  color: #333;
}

h1 {
    font-size: 36px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.4rem + ((1vw - 0.64rem) * 2.1429));/* 24px~36pxで可変*/
    line-height: 1.3;
    color: #333;
    font-weight: 500;
}
h2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.64rem) * 0.7143));/* 20px~24pxで可変*/
    font-weight: 700;
    line-height: 1.3;
    color: #333;
}
h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

@media (min-width: 1200px) {/* 1200px以上*/
    h1 {
	font-size: 3.6rem;/* 36px*/
    }
    h2 {
        font-size: 2.4rem;/* 24px*/
    }
}
@media screen and (max-width: 768px) {/* 768px以下*/
    body{
      font-size: 1.6rem;
      line-height: 1.6;
      letter-spacing: -.6px;
    }
    h1{
        font-size: 2.4rem;/* 24px*/
        font-weight: 700;
    }
    h2 {
        font-size: 1.8rem;/* 20px*/
    }
    h3 {
        line-height: 1.5;
    }
  p {
        font-size: 1.4rem;
  }
}


/*
=======================================
  header
=======================================
*/

/*Layout*/

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 260px;
  height: 240px;
  background: #fff url('../images/logo_bg.png') no-repeat ;
  box-shadow:
    0 0 2.5px rgba(0, 0, 0, 0.057),
    0 0 6.1px rgba(0, 0, 0, 0.076),
    0 0 11.4px rgba(0, 0, 0, 0.086),
    0 0 19.8px rgba(0, 0, 0, 0.092)
}
  header .header-logo_mark {
    position: relative;
     height: 25px;
    margin: 20px 0 0 15px;
  }
    header .header-logo_mark img {
      position: absolute;
      top: 0;
      right: 10px;
      width: 32px;
      transition: .20s;
    }
  header .header_inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    margin: -12px 0 0;
  }
    header h1  {
      width: 240px;
      margin: 0 0 15px 10px;
    }
      header h1 img {
        width: 100%;
        margin: 0 0 10px;
        transition: .3s;
      }
      header h1 span {
        display: block;
        font-size: 12px;
        color: #474747;
        letter-spacing: -0.4px;
      }
  header .header-suzuki {
    width: 100%;
  }
    header .header-suzuki img {
      position: absolute;
      width: 125px;
      bottom: 1px;
      right: 0;
    }
    header .header-chiitan img {
        width: 60px;
      position: absolute;
      bottom: 1px;
      left: 15px;
    }


.is-animation {
  width: 260px;
  height: 115px;
  box-shadow:
    0 0 34.8px rgba(0, 0, 0, 0.1),
    0 0 74px rgba(0, 0, 0, 0.13);
  transition: .30s;
}
  header.is-animation .header-logo_mark {
    margin: 5px 0 0 25px;
  }
    header.is-animation .header-logo_mark img {
      position: relative;
      width: 24px;
  transition: .30s;
    }
  header.is-animation .header_inner {
    margin-top: 0;
  }
    header.is-animation h1  {
      width: 160px;
      margin: 16px 0 15px 14px;
  transition: .30s;
    }
      header.is-animation h1 img {
        margin: 0;
  transition: .30s;
      }
      header.is-animation h1 span {
        display: none;
       /* font-size: 8px;
        letter-spacing: -0.8px; */
      }
  header.is-animation .header-suzuki {
    width: 85px;
    transition: .30s;
  }
  header.is-animation .header-suzuki img {
    width: 85px;
  transition: .30s;
    }
  header.is-animation .header-chiitan, header.is-animation .header-chiitan img {
    display: none;
    }


.sp-menubtn {
	display: none;
}

.globalnavi {
}
  .globalnavi ul li {
  }
    .globalnavi ul li.upper_contents span a {
      display: block;
      position: relative;
      padding: 15px 0 15px 20px;
      background: url('../images/bg_g-nav1.png') no-repeat ;
      border-top: solid 1px #fff;
      border-bottom: solid 1px #fff;
      font-weight: 700;
      color: #0f70d4;
      transition: .60s;
    }
      .globalnavi ul li.upper_contents span a:hover {
        background: url('../images/bg_g-nav1_act.png') no-repeat ;
        color: #fff;
      }
        .globalnavi ul li.upper_contents span a::before { /* くの字の表示設定 */
          content: "";
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 18px;
          width: 8px;    /* くの字を山なりに見た時、左側の長さ */
          height: 8px;   /* くの字を山なりに見た時、右側の長さ */
          border-top: 2px solid #0f70d4;     /* くの字を山なりに見た時、左側の太さと色 */
          border-right: 2px solid #0f70d4;   /* くの字を山なりに見た時、右側の太さと色 */
          transform: rotate(45deg);    /* くの字の向き */
          transition: .20s;
        }
        .globalnavi ul li.upper_contents span a::after {
          position: absolute;
          bottom: -2px;
          left: 0;
          content: '';
          width: 100%;
          height: 2px;
          background: #0f70d4;
          transform: scale(0, 1);
          transform-origin: left top;
          transition: transform .3s;
         }
          .globalnavi ul li.upper_contents span a:hover::before {
            right: 8px;
            border-top: 2px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
            border-right: 2px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
         }
          .globalnavi ul li.upper_contents span a:hover::after {
            transform: scale(1, 1);
}

    .globalnavi ul li.upper_contents ul.lower_contetns {
      padding-left: 20px;
      background: #88cef7 ;
      font-size: 1.6rem;
      font-weight: 500;
      letter-spacing: -.5px;
      color: #fff;
      transition: .30s;
    }
      .globalnavi ul li.upper_contents ul.lower_contetns li a {
        display: block;
        position: relative;
        padding: 10px 0;
        border-bottom: solid 1px #fff;
        color: #fff;
      z-index: 3;
      }
        .globalnavi ul li.upper_contents ul.lower_contetns li a:hover {
          color: #0f87e6;
          transition: .30s;
        }
        .globalnavi ul li.upper_contents ul.lower_contetns li:last-child a {
          border-bottom: none;
        }
        .globalnavi ul li.upper_contents ul.lower_contetns li a::before { /* くの字の表示設定 */
          content: "";
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 18px;
          width: 8px;    /* くの字を山なりに見た時、左側の長さ */
          height: 8px;   /* くの字を山なりに見た時、右側の長さ */
          border-top: 2px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
          border-right: 2px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
          transform: rotate(45deg);    /* くの字の向き */
          transition: .20s;
        }
       .globalnavi ul li.upper_contents ul.lower_contetns li a::after {
         position: absolute;
         bottom: -2px;
         left: 0;
         content: '';
         width: 100%;
         height: 2px;
         background: #0f70d4;
         transform: scale(0, 1);
         transform-origin: left top;
         transition: transform .3s;
        }

          .globalnavi ul li.upper_contents ul.lower_contetns a:hover::before {
            right: 8px;
            border-top: 2px solid #0f87e6;     /* くの字を山なりに見た時、左側の太さと色 */
            border-right: 2px solid #0f87e6;   /* くの字を山なりに見た時、右側の太さと色 */
         }
          .globalnavi ul li.upper_contents ul.lower_contetns a:hover::after {
            transform: scale(1, 1);
         }

  .globalnavi ul li.g-nav_call {
  }
    .globalnavi ul li.g-nav_call a {
      display: block;
      position: relative;
      padding: 15px 0 15px 50px;
      background: #0f87e6 ;
      font-weight: 700;
      color: #fff;
      transition: .30s;
    }
      .globalnavi ul li.g-nav_call a:hover {
        background: #60b7f2 ;
        color: #fff;
      }
        .globalnavi ul li.g-nav_call a::after {
          font-family: "Font Awesome 5 Free";
          content: "\f0e0" ;
          font-weight: 900;
          margin: 17px auto 20px;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 20px;
          transition: .20s;
        }
        .globalnavi ul li.g-nav_call a::before { /* くの字の表示設定 */
          content: "";
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 18px;
          width: 8px;    /* くの字を山なりに見た時、左側の長さ */
          height: 8px;   /* くの字を山なりに見た時、右側の長さ */
          border-top: 2px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
          border-right: 2px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
          transform: rotate(45deg);    /* くの字の向き */
          transition: .20s;
        }
          .globalnavi ul li.g-nav_call a:hover::before {
            right: 8px;
         }

  .globalnavi ul li.g-nav_voice {
  }
  .globalnavi ul li.g-nav_voice span a {
    display: block;
    position: relative;
    padding: 15px 0 15px 20px;
    background: url('../images/bg_g-nav1.png') no-repeat ;
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    font-weight: 700;
    transition: .60s;
    color: #0f70d4;
    animation: voice_flashing 1s infinite;
  }
  @keyframes voice_flashing {
    0%, 49% {
      color: #0f70d4;
    }
    50%, 100% {
      color: #2eadd3;
    }
  }
  .globalnavi ul li.g-nav_voice span a:hover {
    background: url('../images/bg_g-nav1_act.png') no-repeat ;
    color: #fff;
    animation: none;
  }
  .globalnavi ul li.g-nav_voice span a::before { /* くの字の表示設定 */
    font-family: "Font Awesome 5 Free";
    content: "\f35d";
    font-weight: 900;
    margin: 17px auto 20px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 18px;
  }
  .globalnavi ul li.g-nav_voice span a::after {
    position: absolute;
    bottom: -2px;
    left: 0;
    content: '';
    width: 100%;
    height: 2px;
    background: #0f70d4;
    transform: scale(0, 1);
    transform-origin: left top;
    transition: transform .3s;
  }
  .globalnavi ul li.g-nav_voice span a:hover::after {
    transform: scale(1, 1);
  }

/* link*/
/* activ*/
body.about nav.globalnavi ul.globalnavi__inner li.upper_contents.aboutindex span a,
body.tax_accountant nav.globalnavi ul.globalnavi__inner li.upper_contents.tax_accountantindex span a,
body.labor_and_social_security_attorneyt nav.globalnavi ul.globalnavi__inner li.upper_contents.lassaindex span a,
body.founded nav.globalnavi ul.globalnavi__inner li.upper_contents.foundedindex span a,
body.contact_fee nav.globalnavi ul.globalnavi__inner li.upper_contents.contact_feeindex span a {
  background: #60b7f2 url('../images/bg_g-nav1_act.png') right 0 no-repeat ;
  border-top: solid 1px #0f70d4;
  border-bottom: solid 1px #0f70d4;
  font-weight: 700;
  color: #fff;
  transition: .60s;
}

.g_menu_active a {
 	position: relative;
	font-weight: bold;
  color: #78a519;
}

.g_menu_active a:before{
	content:'';
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width: 100%;
	height:10px;
	background-color:  #78a519;
	filter:alpha(opacity=70);
	opacity:0.70;
	box-shadow: 0px 3px 3px 3px #78a519 inset;
}
.g_menu_active_none a {
 	position: relative;
	font-weight: normal;
	color: #666;
}

.g_menu_active_none a:before{
	background-color:  #FFF;
	box-shadow: 0px 3px 3px 3px #FFF inset;
}


/* ヘッダーレスポンシブ */
@media screen and (max-width: 768px) {

header {
  width: 100%;
  height: 60px;
  top: 0;
  left: 0;
  background: #fff url('../images/logo_bg.png') right 60px top 0 no-repeat;
  background-size: 40% ;
  z-index: 20;
  box-shadow:
    none;
}
  header .header-logo_mark {
    margin: 15px 0 0 20px;
  }
    header .header-logo_mark img {
      position: relative;
      width: 35px;
    }
  header .header_inner {
    align-items: flex-start;
    flex-wrap: nowrap;
    height: 60px;
    margin: -38px 60px 0 50px;
    padding: 0;
  }
    header h1  {
      width: 205px;
      margin: 8px 0 0 5px;
    }
      header h1 img {
        margin: 0;
      }
      header h1 span {
        font-size: .75rem;
       font-weight: 500;
        letter-spacing: -1px;
        white-space: nowrap;
      }
  header .header-suzuki {
    position: relative;
    width: 56px;
    margin: 0 0 0 0;
    align-self: center;
    text-align: right;
  }
  header .header-suzuki img {
    position: relative;
    display: block;
    width: 100%;
    top: 0;
    right: 0;
    }
  header .header-chiitan, header.is-animation .header-chiitan img {
    display: none;
    }

.is-animation {
  width: 100%;
  height: 60px;
	display: block;
  opacity: 1;
}
  header.is-animation .header-logo_mark {
    margin: 15px 0 0 20px;
  }
    header.is-animation .header-logo_mark img {
      width: 35px;
    }
  header.is-animation .header_inner {
    align-items: flex-start;
    flex-wrap: nowrap;
    height: 60px;
    margin: -37px 60px 0 50px;
    padding: 0;
  }
    header.is-animation h1  {
      width: 205px;
      margin: 8px 0 0 5px;
    }
      header.is-animation h1 img {
        margin: 0;
      }
      header.is-animation h1 span {
        display: block;
        font-size: .75rem;
       font-weight: 500;
        letter-spacing: -1px;
        white-space: nowrap;
      }
  header.is-animation .header-suzuki {
    position: relative;
    width: 56px;
    margin: 0;
    align-self: center;
    text-align: right;
  }
  header.is-animation .header-suzuki img {
    position: relative;
    display: block;
    width: 100%;
    top: 0;
    right: 0;
    }


	.sp-menubtn {
		width: 60px;
    height: 60px;
		position: absolute;
    top: 0;
    right: 0;
		display: block;
		z-index: 999;
		border: none;
		background: #66ccff;
		cursor: pointer;
	}
    .sp-menubtn::after {
      position: absolute;
      left: 0;
      bottom:5px;
      content: 'MENU';
      display: block;
      width: 100%;
      color: #fff;
      font-size: 1.4rem;
      font-weight: 500;
      text-decoration: none;
      text-align: center;
      white-space: nowrap;
      transition: all .4s;
    }
      .sp-menubtn.active::after {
        content: 'CLOSE';
        bottom:5px;
  }
	.sp-menubtn span {
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-indent: 100%;
		width: 22px;
		height: 3px;
		background: #FFFFFF;
		position: absolute;
		transition: 0.2s;
		left: 50%;
		top: 35%;
	}
	.sp-menubtn span:nth-child(1) {
		transform: translate(-50%, -9px);
	}

	.sp-menubtn span:nth-child(2) {
		transform: translate(-50%, -50%);
	}
	.sp-menubtn span:nth-child(3) {
		transform: translate(-50%, 6px);
	}
	.sp-menubtn.active span {
		width: 25px;
		height: 2px;
	}
	.sp-menubtn.active span:nth-child(1) {
		transform: translate(-50%, 50%) rotate(45deg);
	}
	.sp-menubtn.active span:nth-child(2) {
		opacity: 0;
		left: 50%;
	}
	.sp-menubtn.active span:nth-child(3) {
		transform: translate(-50%, 50%) rotate(-45deg);
	}
	.globalnavi {
		position: fixed;
		top: 60px;
		left: 0;
		width: 100%;
		height: 100%;
		background: #b1e6fd;
		color: #FFFFFF;
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transition: opacity .6s ease, visibility .6s ease;
     z-index: 100;
	}
	.globalnavi.active{
		opacity:1;
		visibility: visible;
     z-index: 100;
	}
	.globalnavi__inner {
		display:block;
		height:auto;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
	}

  .globalnavi ul {
    width: 100%;
  }
  .globalnavi ul li {
    width: 100%;
  }
    .globalnavi ul li.upper_contents span a {
      background: url('../images/bg_g-nav1.png') right 0 no-repeat ;
    }
      .globalnavi ul li.upper_contents span a:hover {
        background: url('../images/bg_g-nav1.png') right 0 no-repeat ;
      }
          .globalnavi ul li.upper_contents span a:hover::after {
            transform: none;
}

    .globalnavi ul li.g-nav_call a {
      padding: 25px 0 25px 50px;
    }
        .globalnavi ul li.g-nav_call a::after {
          margin: 27px auto 20px;
        }
    .globalnavi ul li.g-nav_voice span a {
      background: url(../images/bg_g-nav1.png) right 0 no-repeat;
    }



/* --- 先頭合わせ --- */

#a-office,#a-staff,#a-event,#a-guideline,
#t-tax_saving,#t-analysis,#t-financing,#t-tax_audit,
#l-insurance,#l-payrol,#l-receip,#l-employment_egulation,
#f-point,#f-prcess,#f-price,
#c-support,#c-fee,#f-insurance,#c-payrol,#c-receipt,#c-founded {
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}

}



/* --- コンテナ --- */

.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #fff;
  text-align: center;
}

/* --- 左カラム（PC） --- */

.side-menu {
  display: flex;
  flex-flow: column;
  width: 260px; /* コンテナの幅 */
  margin-top: 240px;
  padding: 0;
  background: #b1e6fd;
  box-shadow:
    0 1.9px 2.5px rgba(0, 0, 0, 0.057),
    0 5px 6.1px rgba(0, 0, 0, 0.076),
    0 10.1px 11.4px rgba(0, 0, 0, 0.086),
    0 19.2px 19.8px rgba(0, 0, 0, 0.092),
    0 38.4px 34.8px rgba(0, 0, 0, 0.1),
    0 101px 74px rgba(0, 0, 0, 0.13);
  z-index: 2;
  text-align: left;
}
  header.is-animation .side-menu {
  height: 115px;
  transition: .10s;
}

.side-menu .side-sns {
      padding: 20px 20px 0;
}
  .side-menu .side-sns dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
    .side-menu .side-sns dt {
      width: 60%;
    }
    .side-menu .side-sns dd {
      width: 20%;
      margin-left: 20px;
    }
.side-menu .side-mascot {
      min-height: 343px;
      padding: 50px 20px;
      background: url('../images/bg_side_bottom.png') center bottom no-repeat ;
}


/* --- メインカラム --- */

.main-contents_wrapper {
  display: flex;
  flex-flow: column;
  width: calc(100% - 262px);
  margin: 0;
  padding: 0;
}
 .main-contents {
 }

/* コンテンツブロック */
.block_full {
  width: 100%;
  margin: 0 auto 120px;
  padding: 0;
}





@media screen and (max-width: 768px) {
.container {
    position: relative;
		min-width: 100%; /* コンテナの幅 */
		max-width: 100%; /* コンテナの幅 */
    margin-top: 60px;
	}
	.side-menu {
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
	}
	  header.is-animation .side-menu {
      height: 100%;
      transition: .10s;
}
        .side-menu .side-sns dl {
          justify-content: flex-start;
          flex-wrap: nowrap;
        }
          .side-menu .side-sns dt {
            width: 40%;
            color: #333;
          }
          .side-menu .side-sns dd {
            width: 10%;
            }
      .side-menu .side-mascot {
        padding-top: 50px;
        background: url('../images/bg_side_bottom_SP.png') right 0  bottom no-repeat ;
        background-size: cover;
        width: 100%;
        height: 50%;
      }

	.main-contents_wrapper {
		width: 100%;
	}
    .main-contents {
      padding: 0 10px;
    }
  .block_full {
		margin: 0 0 40px;
  }

}

/* アピールエリア */
#appeal_area {
  padding: 70px 0 85px;
  background: #d8f2fe url("../images/bg_appeal.png")  right bottom no-repeat;
}
  .contents_conversion {
    width: 960px; /* コンテナの幅 */
    margin: 0 auto; /* センタリング */
    padding: 0 2em;
    text-align: center;
}

  .box_underline02 h2.underline02_white {
    position:relative;
    display: inline-block;
    margin: 0 auto 1.8em;
    text-align:center;
    border-bottom:5px solid #fff;
    line-height: 2;
    font-weight: 700;
}
    .box_underline02 h2.underline02_white.f36 {
      padding:.4em 0 0;
      font-size: 3.6rem;
   }
    .box_underline02 h2.underline02_white.f24 {
    padding:.4em 0 ;
      font-size: 2.4rem;
   }
  .box_underline02 h2.underline02_white:before,
  .box_underline02 h2.underline02_white:after {
      border: solid transparent;
      content:'';
      height:0;
      width:0;
      pointer-events:none;
      position:absolute;
      top:100%;
      left:50%;
  }
    .box_underline02 h2.underline02_white:after {
      border-color: rgba(196, 236, 253, 0);
      border-top-width:30px;
      border-bottom-width:30px;
      border-left-width:15px;
      border-right-width:15px;
      margin-left: -15px;
      border-top-color:#d8f2fe;
    }
    .box_underline02 h2.underline02_white:before {
      border-color: rgba(255, 255, 255, 0);
      border-top-width:35px;
      border-bottom-width:35px;
      border-left-width:20px;
      border-right-width:20px;
      margin-left: -20px;
      margin-top: 5px;
      border-top-color:#fff;
    }

.box_underline02 h3 {
    height: 77px;
    margin-top: 1em;
    background: url("../images/bg_ribon_yellow.png")  top center no-repeat;
    font-size: 3.6rem;
    font-weight: 700;
  }
.wrapper_firsttime {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 30px;
}
  .wrapper_firsttime dl {
    position: relative;
    width: 32%;
    padding: 20px;
    background: #fff;
    z-index: 0;
  }
       .wrapper_firsttime dl:nth-of-type(n)::before {
         position: absolute;
         left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         font-family: "Font Awesome 5 Free";
         font-size: 6rem;
         font-weight: 900;
         color: #0f87e6;
          z-index: 1;
       }
       .wrapper_firsttime dl:nth-child(1)::before {
         top: 60px;
          content: "\f157" ;
        }
       .wrapper_firsttime dl:nth-child(2)::before {
          top: 60px;
          content: "\f4be" ;
        }
       .wrapper_firsttime dl:nth-child(3)::before {
          top: 70px;
          content: "\f590" ;
        }
    .wrapper_firsttime dt {
      height: 2em;
      display: flex;
      flex-flow: row;
      justify-content: center;
      font-size: 2.4rem;
      font-weight: 500;
      line-height: 1.3;
    }
    .wrapper_firsttime dd {
      position: relative;
      padding-top: 110px;
      text-align: left;
    }
.box_call {
  margin-top: 70px;
  background: #b1e6fd;
}
  .box_call h3 {
    height: auto;
		position:relative;
    padding: 15px 0;
    background: #389fec !important;
    font-size: 3.6rem;
    font-weight: 700;
    color: #fff;
  }
.wrapper_call {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  margin-top: 40px;
  background: #b1e6fd;
}
  .wrapper_call dl {
    position: relative;
    width: 450px;
    padding: 0 20px;
  }
       .wrapper_call dl:nth-child(1) {
          border-right: solid 2px #fff;
        }
         .wrapper_call dt {
           background: #fff;
           font-size: 2.4rem;
           font-weight: 500;
          }
         .wrapper_call dd {
           padding: 30px 0;
         }
           .wrapper_call dd.btn_call a  {
             width: 100%;
             display: block;
             position: relative;
             padding: 25px 0 ;
             background: #ffc848 ;
             font-size: 2.4rem;
             font-weight: 700;
             color: #fff;
             text-align: center;
             transition: .30s;
             border-radius: 100vh;
           }
             .wrapper_call dd.btn_call a:hover {
               background: #ffb730 ;
               color: #fff;
             }
             .wrapper_call dd.btn_call a::after {
               font-family: "Font Awesome 5 Free";
               content: "\f0e0" ;
               font-size: 2.8rem;
               font-weight: 900;
               margin: 22px auto;
               position: absolute;
               top: 0;
               bottom: 0;
               left: 75px;
               transition: .20s;
             }
             .wrapper_call dd.btn_call a::before { /* くの字の表示設定 */
               content: "";
               margin: auto;
               position: absolute;
               top: 0;
               bottom: 0;
               right: 50px;
               width: 14px;    /* くの字を山なりに見た時、左側の長さ */
               height: 14px;   /* くの字を山なりに見た時、右側の長さ */
               border-top: 3px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
               border-right: 3px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
               transform: rotate(45deg);    /* くの字の向き */
               transition: .20s;
             }
               .wrapper_call dd.btn_call a:hover::before {
                 right: 35px;
               }
           .wrapper_call dd.btn_phonecall a  {
              width: 100%;
              display: block;
              position: relative;
              padding-left: 30px;
              font-size: 4.8rem;
              font-weight: 900;
              text-align: center;
              line-height: 1.2;
              transition: .30s;
           }
             .wrapper_call dd.btn_phonecall a::after {
               font-family: "Font Awesome 5 Free";
               content: "\f095" ;
               font-size: 3.6rem;
               font-weight: 700;
                line-height: 1;
               color: #0f87e6;
               margin: 12px auto;
               position: absolute;
               top: 0;
               bottom: 0;
               left: 0;
               transition: .20s;
             }
           .wrapper_call dd.btn_phonecall p  {
             width: 100%;
             display: block;
             position: relative;
             padding-left: 30px;
             font-size: 2.4rem;
             font-weight: 500;
             text-align: center;
             transition: .30s;
           }

/* footer */
footer {
  border-top: solid 2px #eeeeee;
}

footer .box_foot-inquiry {
  width: 960px;
  margin: 0 auto;
  padding: 0 30px;
}
  footer .box_foot-inquiry dl {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin: 75px auto 55px;
      text-align: left;
  }
    footer .box_foot-inquiry dt {
      padding-right: 30px;
      font-size: 2rem;
      font-weight: 500;
      line-height: 1.6;
      letter-spacing: -.4px;
    }
    footer .box_foot-inquiry dd a {
      width: 300px;
      display: block;
      position: relative;
      padding: 12px 0 15px 80px;
      background: #0f87e6 ;
      font-size: 2.4rem;
      font-weight: 700;
      color: #fff;
      transition: .30s;
       border-radius: 100vh;
    }
      footer .box_foot-inquiry dd a:hover {
        background: #60b7f2 ;
        color: #fff;
      }
        footer .box_foot-inquiry dd a::after {
          font-family: "Font Awesome 5 Free";
          content: "\f0e0" ;
          font-size: 2.8rem;
          font-weight: 900;
          margin: 11px auto;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 30px;
          transition: .20s;
        }
        footer .box_foot-inquiry dd a::before { /* くの字の表示設定 */
          content: "";
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 40px;
          width: 14px;    /* くの字を山なりに見た時、左側の長さ */
          height: 14px;   /* くの字を山なりに見た時、右側の長さ */
          border-top: 3px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
          border-right: 3px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
          transform: rotate(45deg);    /* くの字の向き */
          transition: .20s;
        }
          footer .box_foot-inquiry dd a:hover::before {
            right: 25px;
         }

/* フッタエリア */
footer nav {
  padding: 2em 0;
  border-top: solid 2px #eeeeee;
}
  footer nav ul {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
  }
    footer nav li a {
      position: relative;
      display: flex;
      font-size: 2rem;
      font-weight: 500;
      letter-spacing: -.4px;
      color: #15539b;
    }
        footer nav li a:hover {
          bottom: 0;
          color: #0f87e6;
          transition: .30s;
        }
       footer nav li a::after {
         position: absolute;
         bottom: -4px;
         left: 0;
         content: '';
         width: 100%;
         height: 2px;
         background: #0f70d4;
         transform: scale(0, 1);
         transform-origin: left top;
         transition: transform .3s;
        }
          footer nav li a:hover::after {
            transform: scale(1, 1);
         }
      footer nav li:last-child {
        margin-right: 0;
      }

footer .box_foot {
  max-height: 180px;
  padding: 40px 0 50px;
  background: #0f6fd4;
  color: #fff;
  text-align: left;
}
  footer .box_foot ul {
    width: 960px; /* コンテナの幅 */
    margin: 0 auto; /* センタリング */
    padding: 0 30px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-end;
    line-height: 1.4;
  }
  footer .box_foot li.copyright {
    font-size: 1.4rem;
  }


/* pagetop */
#page_top {
  position: fixed;
  right: 2%;
  bottom: 130px;
  z-index: 1;
  text-indent: -999999px;
}
  #page_top a {
    width: 80px;
    height: 80px;
    position: relative;
    display: block;
    text-align: center;
    padding: 15px 30px;
    background: #b1e6fd;
    z-index: 2;
  }
    #page_top a::before {
      display: flex;
      content: "";
      margin: auto;
      position: absolute;
      top: calc(50% - 7.5px);
      right: calc(50% - 7.5px);
      width: 16px;    /* くの字を山なりに見た時、左側の長さ */
      height: 16px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 5px solid #0f6fd4;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 5px solid #0f6fd4;   /* くの字を山なりに見た時、右側の太さと色 */
      transform: rotate(310deg);    /* くの字の向き */
      z-index: 2;
    }
    #page_top a:hover {
      background: #60b7f2;
    }
      #page_top a:hover::before {
        border-top: 5px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
        border-right: 5px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
    }






@media screen and (max-width: 768px) {

/* アピールエリア */
#appeal_area {
  padding: 0 0 20px;
  background: #d8f2fe;
}
  .contents_conversion {
		width: 100%;
		padding: 0 15px;
  }
  .box_underline02 h2.underline02_white {
    margin: 0 auto 50px;
}
    .box_underline02 h2.underline02_white.f36 {
      padding:.4em 0 10px;
      font-size: 1.9rem;
   }
    .box_underline02 h2.underline02_white.f24 {
      padding:.4em 0 10px;
      font-size: 1.8rem;
      line-height: 1.4;
   }
.box_underline02 h3 {
    height: 40px;
    margin-top: 0;
     padding-top: 10px;
    background: url("../images/bg_ribon_yellow.png")  top center no-repeat;
    background-size: contain;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
  }

.wrapper_firsttime {
  display: block;
  margin-bottom: 0;
}
  .wrapper_firsttime dl {
    width: 300px;
    margin: 10px auto 20px;
    padding: 15px;
  }
       .wrapper_firsttime dl:nth-of-type(n)::before {
           top: 40px;
       }
    .wrapper_firsttime dt {
      font-size: 1.8rem;
      font-weight: 700;
    }
    .wrapper_firsttime dd {
      padding-top: 80px;
    }

.box_call {
  margin-top: 60px;
}
  .box_call h3 {
    height: auto;
    padding: 10px 0;
    font-size: 2.4rem;
    font-weight: 700;
  }

.wrapper_call {
  flex-flow: column;
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom:10px;
}
  .wrapper_call dl {
    width: 100%;
  }
       .wrapper_call dl:nth-child(1) {
          border-right: none;
        }
         .wrapper_call dt {
           padding: 0;
           font-size: 2rem;
          }
         .wrapper_call dd {
           padding: 15px 0;
         }
           .wrapper_call dd.btn_call a  {
             width: 95%;
            margin: 0 auto;
             padding: 15px 0 ;
             font-size: 2rem;
              letter-spacing: 1px;
          }
             .wrapper_call dd.btn_call a::after {
               font-size: 3.2rem;
               margin: 10px auto;
               left: 40px;
             }
             .wrapper_call dd.btn_call a::before { /* くの字の表示設定 */
               right: 40px;
             }
           .wrapper_call dd.btn_phonecall a  {
              padding-left: 10px;
              font-size: 3.2rem;
              letter-spacing: -1px;
           }
             .wrapper_call dd.btn_phonecall a::after {
               font-size: 2.4rem;
                left: 20px;
            }
           .wrapper_call dd.btn_phonecall p  {
             padding-left: 15px;
             padding-bottom: 20px;
             font-size: 1.6rem;
           }

/* footer */
footer {
  border-top: solid 2px #eeeeee;
  padding: 0;
}

footer .box_foot-inquiry {
  width: 100%;
  padding: 20px 0 0;
  text-align: center;
}
  footer .box_foot-inquiry dl {
    justify-content: center;
    align-items: center;
    flex-flow: column;
    margin: 20px auto 30px;
    padding: 0 10px;
  }
    footer .box_foot-inquiry dt {
      padding: 0 10px 1.5em;
      font-size: 1.6rem;
      letter-spacing: -.6px;
    }
    footer .box_foot-inquiry dd a {
      padding: 12px 0 15px 0;
      font-size: 1.8rem;
      text-align: center;
      letter-spacing: 1px;
    }
        footer .box_foot-inquiry dd a::after {
          font-size: 2rem;
          left: 40px;
        }

/* フッタエリア */
footer nav {
  padding: 0;
  border-top: solid 1px #ececec;
}
  footer nav ul {
    flex-flow: column;
  }
    footer nav li a {
      padding: 15px 0 15px 40px;
      border-bottom: solid 1px #ececec;
      font-size: 1.6rem;
      letter-spacing: -1px;
      text-align: left;
    }
        footer nav li a span {
          font-size: 1.4rem;
        }
        footer nav li a::before { /* くの字の表示設定 */
          content: "";
          margin: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 20px;
          width: 10px;    /* くの字を山なりに見た時、左側の長さ */
          height: 10px;   /* くの字を山なりに見た時、右側の長さ */
          border-top: 2px solid #c3d3e6;     /* くの字を山なりに見た時、左側の太さと色 */
          border-right: 2px solid #c3d3e6;   /* くの字を山なりに見た時、右側の太さと色 */
          transform: rotate(45deg);    /* くの字の向き */
          transition: .20s;
        }
      footer nav li:last-child {
        border-bottom: none;
      }

footer .box_foot {
  max-height: 200px;
  padding: 20px 0;
}
  footer .box_foot ul {
    width: 100%; /* コンテナの幅 */
    margin: 0 auto; /* センタリング */
    padding: 0 10px;
    display: block;
    font-size: 1.4rem;
    line-height: 1.4;
  }
  footer .box_foot li span {
    font-size: 1.6rem;
    font-weight: 700;
  }
  footer .box_foot li.copyright {
    padding: 30px 0 20px;
    font-size: 1.4rem;
  }


/* pagetop */
#page_top {
  bottom: 15px;
}
  #page_top a {
    width: 50px;
    height: 50px;
    padding: 15px;
  }
    #page_top a::before {
      top: calc(50% - 5px);
      right: calc(50% - 5px);
      width: 10px;    /* くの字を山なりに見た時、左側の長さ */
      height: 10px;   /* くの字を山なりに見た時、右側の長さ */
      border-top: 2px solid #0f6fd4;     /* くの字を山なりに見た時、左側の太さと色 */
      border-right: 2px solid #0f6fd4;   /* くの字を山なりに見た時、右側の太さと色 */
    }
      #page_top a:hover::before {
        border-top: 2px solid #fff;     /* くの字を山なりに見た時、左側の太さと色 */
        border-right: 2px solid #fff;   /* くの字を山なりに見た時、右側の太さと色 */
    }

}




/* 印刷対応 */
/* ----------------------------------------------------- */
@page {
  size: 210mm 297mm;
  margin: 15mm 22mm
}

@media print {
  body {
    -webkit-print-color-adjust: exact;
    width: 1300px;
    zoom: 0.8;
  }

  /* 改ページをいれる場合 */
  .new-page {
    page-break-before: always; /* 特定の場所で改ページを入れたいときの指定 */
  }


.side-menu, .nav_anchor { display: none; }

}