@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&family=Noto+Sans+JP:wght@400;700&family=Work+Sans:wght@500;600&display=swap');
/*
Theme Name: Line Bank v0.1
Author: Ryo Kinoshita
Description: Line Bank v0.1
*/
/* =============================================================
    Reset and Utility.css
============================================================= */
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;box-sizing: border-box;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;width: 100%;}
h1, h2, h3, h4, h5, h6 {line-height: 1.4;}
img {vertical-align: middle; max-width:100%;height: auto;}
a:focus {outline:none;}

.clearfix {min-height: 1px;}
.clearfix:after {content: "."; display: block;clear: both;height: 0;visibility: hidden;}
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}
.both{clear:both;}

::-moz-selection {background:rgba(128, 128, 128, 0.2);}
::selection{background:rgba(128, 128, 128, 0.2);}

input[type="button"],input[type="submit"] {-webkit-appearance: none;}

/* =============================================================
    HTML,Body,Anchor
============================================================= */
:root {
    --siteWidth: 130rem;
    --singleWidth: 64rem;
    --pagetitle: 4.8rem;
    --title-1: 5rem;
    --title-1-pc: 8.4rem;
    --title-2: 2rem;
    --title-2-pc: 2.4rem;
    --title-3: 1.6rem;
    --sec-title: 3.2rem;
    --bgColor: #fff;
    --bgColorGray: #F5F5F5;
    --borderColor: #dfdfdf;
    --colorBlack: #0D0D0D;
    --colorWhite: #fff;
    --colorYellow: #fff100;
    --logo: 'Josefin Sans';
    --jpText: 'Noto Sans JP';
    --enText: 'Work Sans';
    --ls-p: .1em;
    --ls-jp-title: .05em;
}

html {
    font-size: 62.5%; /* 10px */
    font-family: "Work Sans","Noto Sans JP","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Verdana, Arial, "MS P Gothic", "MS Pゴシック", sans-serif;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -o-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    background-color: var(--bgColor);
    /*background: url(images/top_sp.png) no-repeat;*/
    font-size: 1.6em;
    line-height: 1.78;
    color: var(--colorBlack);
}
@media only screen and (min-width:768px) {
  body {
    font-size: 1.8em;
  }
}
body * {
    font-feature-settings : "palt";
    font-weight: 500;
}
body.fixed {
  width: 100%;
  height: 100%;
  position: fixed;
}
.wrapper {}

a:link,
a:visited {
  text-decoration: none;
  color: #222;
}
p {
  word-break: break-all;
  letter-spacing: .1em;
  margin-bottom: 2em;
}
/* =============================================================
    common
============================================================= */
.sec {
  padding: 0 2rem;
  margin-top: 5rem;
}
@media only screen and (min-width:768px) {
  .sec {
    margin-top: 10rem;
  }
}
.sec-inner {
  max-width: var(--siteWidth);
  margin-right: auto;
  margin-left: auto;
}
.en {
  font-family: var(--enText);
}
.ja {
  font-family: var(--jpText);
}
.title-1 {
  margin: 2rem 0 2.5rem;
  position: relative;
}
.title-1::before {
  background: var(--colorYellow);
  content: "";
  width: 4rem;
  height: .6rem;
  position: absolute;
  top: -1.5rem;
  left: 0;
}
.title-1 .en {
  font-size: var(--title-1);
  font-weight: 700;
  line-height: 1;
}
.title-1 .ja {
  font-size: var(--title-2);
  font-weight: 700;
  letter-spacing: var(--ls-jp-title);
}
.title-right {
  display: flex;
  justify-content: flex-end;
}
.title-center {
  display: flex;
  justify-content: center;
  position: relative;
  margin: auto;
}
.title-center::before {
  background-color: var(--colorBlack);
  content: "";
  width: 100%;
  height: .2rem;
  position: absolute;
  top: 35%;
}
.title-center .title-1 {
  background-color: var(--bgColor);
  padding: 0 2rem;
}
.title-center .title-1::before {
  left: 2rem;
}
@media only screen and (min-width:768px) {
  .title-1 {
    margin-bottom: 5.5rem;
  }
  .title-1 .en {
    font-size: var(--title-1-pc);
  }
  .title-1 .ja {
    font-size: var(--title-2-pc);
  }
}
.fl-title {
  font-size: var(--sec-title);
  font-weight: 700;
  margin-bottom: 2.5rem;
}
.fl-image {
  margin-bottom: 2.5rem;
}
.fl-contents {

}
@media only screen and (min-width:768px) {
  /* flex-box */
  .flex-box {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10%;
  }
  .flex-box-title {
    order: 1;
    width: 100%;
  }
  .flex-box-inner {
    max-width: 60rem;
    width: 45%;
    order: 2;
  }
  .flex-box-image {
    max-width: 63rem;
    width: 45%;
    order: 3;
  } 
  /* fl-box */
  .fl-box {
    display: flex;
    gap: 5rem;
  }
  .fl-image {
    margin-bottom: 0;
  }
}

a.button-1 {
  background: var(--colorBlack) url(svg/arrow4.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  color: var(--colorWhite);
  display: block;
  font-weight: 700;
  text-align: center;
  padding: 2.2rem 5.5rem 2.2rem 2.2rem;
  max-width: 38rem;
  max-height: 7rem;
  transition: .3s ease;
}
a.button-1:hover {
  background: var(--colorYellow) url(svg/arrow-black.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  color: var(--colorBlack);
}
a.button-2 {
  background: var(--colorBlack) url(svg/arrow4.svg) no-repeat right 3rem center / 2.1rem 1.2rem;
  color: var(--colorWhite);
  display: block;
  font-weight: 700;
  text-align: center;
  padding: 1.1rem;
  max-height: 5rem;
  transition: .3s ease;
}
a.button-2:hover {
  background: var(--colorYellow) url(svg/arrow-black.svg) no-repeat right 3rem center / 2.1rem 1.2rem;
  color: var(--colorBlack);
}
.center {
  margin: auto;
}
.mb100 {
  margin-bottom: 10rem;
}
.txt-center {
  text-align: center;
}
/* =============================================================
Header
============================================================= */
.header {
  background-color: var(--bgColor);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  transition: top .3s ease;
}
.header.hide {
  top: -9rem;
}
.header.active {
  background: var(--colorBlack);
  justify-content: space-between;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 3;
}
.logo {
  font-family: var(--logo);
  font-size: 2.8rem;
}
.header.active .logo a {
  color: var(--colorWhite);
}
/* gnav hamburger --------------- */
.gnav-trigger,
.gnav-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.gnav-trigger {
  appearance: none;
  background: none;
  border: 0.3rem solid #222;
  border-radius: 50%;
  cursor: pointer;
  width: 5rem;
  height: 5rem;
  position: relative;
  right: 0;
  top: 0;
  z-index: 3;
}
.gnav-trigger span {
  background-color: var(--colorBlack);
  border-radius: 4px;
  margin: auto;
  width: 16px;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
}
.gnav-trigger.active {
  border-color: var(--colorWhite);
}
.gnav-trigger.active span {
  background-color: var(--colorWhite);
}
.gnav-trigger span:nth-of-type(1) {
  top: 1.3rem;
}
.gnav-trigger span:nth-of-type(2) {
  top: 2.1rem;
}
.gnav-trigger span:nth-of-type(3) {
  bottom: 1.3rem;
}
.gnav-trigger.active span:nth-of-type(1) {
  transform: translateY(9px) rotate(-45deg);
}
.gnav-trigger.active span:nth-of-type(2) {
  opacity: 0;
}
.gnav-trigger.active span:nth-of-type(3) {
  transform: translateY(-7px) rotate(45deg);
}
.gnav-wrap {
  display: none;
}
.gnav-wrap.open {
  background: var(--colorBlack);
  display: block;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  z-index: 2;
}
.gnav-inner {
  padding: 2rem 2rem 10rem;
  margin: 8rem auto 0;
  max-width: 124rem;
  height: 100%;
  overflow: auto;
}
.gnav-inner .sitemap-nav > li > a {
  color: var(--colorWhite);
  display: block;
  font-size: 1.6rem;
  padding: 0.8rem 1rem;
  transition: .3s ease;
}
.gnav-inner .sitemap-nav > li > a:hover {
  color: var(--colorYellow);
}
.gnav-inner .sns {
  margin-top: 3rem;
}
.gnav-inner .icon-line,
.gnav-inner .icon-facebook,
.gnav-inner .icon-instagram,
.gnav-inner .icon-youtube {
  fill: var(--colorWhite);
  transition: .3s ease;
}
.gnav-inner .icon-line:hover,
.gnav-inner .icon-facebook:hover,
.gnav-inner .icon-instagram:hover,
.gnav-inner .icon-youtube:hover {
  fill: var(--colorYellow);
}
.header-nav {
  display: none;
}

@media only screen and (min-width:1350px) {
  .logo {
    font-size: 3.6rem;
  }
  .header {
    justify-content: flex-start;
  }
  .header-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: 4rem;
    max-width: 102rem;
    width: 70%;
  }
  .header-nav > li {
  }
  .header-nav > li > a {
    display: block;
    font-family: var(--jpText);
    font-size: 1.8rem;
    text-align: center;
    letter-spacing: var(--ls-p);
    transition: .3s ease;
    position: relative;
  }
  .header-nav > li > a:not(.contact)::before {
    background: var(--colorYellow);
    content: "";
    display: block;
    width: 0;
    height: .5rem;
    position: absolute;
    bottom: -.5rem;
    transition: .3s ease;
  } 
  .header-nav > li > a:hover::before {
    width: 100%;
  }
  .header-nav .contact {
    background: var(--colorBlack);
    border-radius: 10rem;
    color: var(--colorWhite);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    width: 20rem;
    height: 4.5rem;
  }
  .header-nav .contact:hover {
    background: var(--colorYellow);
    color: var(--colorBlack);
  }
  .header.active .header-nav {
    display: none;
  }
  .gnav-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15rem 2rem;
  }
  .gnav-inner .sitemap-nav > li > a {
    border-bottom: 0;
    font-size: 2rem;
    padding: 0;
  }
}
/* =============================================================
    home
============================================================= */

/* hero --------------- */

.hero {
  padding: 2rem 2rem 4.5rem;
  margin: 9rem auto 0;
}
.hero-title {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2em;
}
.hero-sub-title {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 0 1.6rem;
  position: relative;
  margin-top: 2rem;
}
.hero-sub-title::before,
.hero-sub-title::after {
  content: "";
  width: 0.1rem;
  height: 2.5rem;
  background: var(--colorBlack);
  position: absolute;
  right: auto;
  left: .5rem;
  top: -0.6rem;
  bottom: auto;
  transform: rotate3d(1, 1, 1, 60deg);
}
.hero-sub-title::after {
  right: .5rem;
  left: auto;
}
.hero-image {
  margin-top: 4.5rem;
  max-width: 77rem;
}
@media only screen and (min-width:768px) {
  .hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(----siteWidth);
  }
  .hero-text {
    width: 36%;
    order: 2;
    min-width: 37rem;
  }
  .hero-image {
    width: 60%;
    order: 1;
    margin: 0;
  }
  .hero-title {
    font-size: 5rem;
    line-height: 1.4;
    letter-spacing: var(--ls-jp-title)
  }
  .hero-sub-title {
    font-size: 1.8rem;
  }
  .hero-sub-title::before,
  .hero-sub-title::after {
    height: 2.8rem;
  }
}
@media only screen and (min-width:1350px) {
  .hero {
    padding: 10rem 0;
    justify-content: center;
    gap: 8rem;
    max-width: var(--siteWidth);
  }
  .hero-title {
    font-size: 7.6rem;
  }
  .hero-sub-title {
    font-size: 2.4rem;
  }
  .hero-sub-title::before,
  .hero-sub-title::after {
    height: 3.5rem;
  }
}

/* news --------------- */
.news-sec {
  background: var(--colorBlack);
  padding: 1.5rem 2rem;
  height: 9rem;
  position: relative;
}
.news-sec a {
  color: var(--colorWhite);
  letter-spacing: var(--ls-p);
}
.news-sec-inner {
  width: calc(100% - 5rem);
  max-width: var(--siteWidth);
}
.read-more {
  margin-bottom: 1rem;
}
.read-more a {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  letter-spacing: .1em;
}
.read-more a::after {
  background: #fff url(svg/arrow.svg) no-repeat center / 1.2rem 0.7rem;
  border-radius: 50%;
  content: "";
  display: block;
  margin-left: 1rem;
  width: 2.5rem;
  height: 2.5rem;
}
.news-list-txt {
  /*border-bottom: .1rem solid #fff;*/
  display: flex;
  align-items: center;
  font-family: var(--jpText);
  font-size: 1.4rem;
}
.news-list-date {
  font-family: var(--enText);
  margin-right: 1rem;
}
.news-list-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* slick */
.slick-prev,
.slick-next {
  background: transparent;
  border: none;
  cursor: pointer;
  color: transparent;
  display: block;
  font-size: 0;
  line-height: 0;
  outline: none;
  padding: 0;
  width: 5rem;
  height: 4.5rem;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  position: absolute;
  top: 0;
  right: 0;
}
.slick-next {
  background: url(svg/arrow2.svg) no-repeat center / 2.5rem 1.3rem;
  top: 2.3rem;
}
.slick-prev {
  background: url(svg/arrow3.svg) no-repeat center / 2.5rem 1.3rem;
  bottom: -2.2rem;
  top: auto;
}
#top-news.slick-slider {
  position: unset;
}

@media only screen and (min-width:1350px) {
  .news-sec {
    display: flex;
    height: 10rem;
  }
  .news-sec-inner {
    display: flex;
    margin: auto;
  }
  .read-more {
    min-width: 30rem;
    margin-right: 6rem;
    margin-bottom: 0;
  }
  .read-more a {
    font-size: 1.8rem;
  }
  .read-more a::after {
    width: 4rem;
    height: 4rem;
  }
  .news-sec a {
    font-size: 1.8rem;
  }
  #top-news.slick-slider {
    width: calc(100% - 41rem);
    position: relative;
  }
  .slick-next {
    top: 7px;
    right: -6rem;
  }
  .slick-prev {
    bottom: -47px;
    right: -6rem;
  }
}

/* about us --------------- */
@media only screen and (min-width:768px) {
  .sec-about {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10%;
  }
  .about-title {
    order: 1;
    width: 100%;
  }
  .title-1.about-title {
    margin-bottom: 4.5rem;
  }
  .sec-about-inner {
    max-width: 60rem;
    width: 45%;
    order: 2;
  }
  .sec-about-image {
    margin-top: -10rem;
    max-width: 63rem;
    width: 45%;
    order: 3;
  } 
}
/* voice --------------- */
.sec-voice {
  background: linear-gradient(180deg,#ffffff 0%,#ffffff 7%,#f5f5f5 7%,#f5f5f5 95%,#ffffff 95%,#ffffff 100%);
  position: relative;
  z-index: 1;
}
.sec-voice::before {
  content: "";
  position: absolute;
  display: block;
  background: url(svg/wavetop2.svg) no-repeat bottom center / 100%;
  width: 100%;
  height: 19rem;
  top: -12rem;
  left: 0;
  transform: translateY(1px);
  z-index: -1;
}
.sec-voice::after {
  content: "";
  position: absolute;
  display: block;
  background: url(svg/wavebottom.svg) no-repeat bottom center / 100%;
  width: 100%;
  height: 19rem;
  bottom: -3rem;
  left: 0;
  transform: translateY(1px);
  z-index: -1;
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.voice-list > li {
  margin-bottom: 3.5rem;
  width: 48%;
}
.voice-list::after{
  content:"";
  display: block;
  width: 48%;
}
.voice-list > li > a {
  display: block;
  letter-spacing: var(--ls-p);
}
.voice-image {
  margin: 0 auto 1rem;
  width: 100%;
  max-width: 16rem;
  position: relative;
}
.voice-image::before {
  background: url(svg/voiceicon.svg) no-repeat center / 2.4rem 2.3rem;
  content: "";
  display: block;
  width: 2.4rem;
  height: 2.3rem;
  position: absolute;
  top: -1.7rem;
  right: 0;
}
.voice-image-inner {
  border-radius: 50%;
  overflow: hidden;
}
.voice-image-inner img {
  object-fit: cover;
  width: 16rem;
  height: 16rem;
}
.voice-title {
  font-weight: 700;
  margin-bottom: 1rem;
}
.voice-area {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}
.voice-point {
  background-color: var(--colorWhite);
  border: 1px solid;
  display: inline-block;
  font-size: 1.4rem;
  padding: .5rem;
}
@media only screen and (min-width:768px) {
  .sec-voice {
    background: linear-gradient(180deg,#ffffff 0%,#ffffff 20%,#f5f5f5 20%,#f5f5f5 83%,#ffffff 83%,#ffffff 100%);
    padding-bottom: 6rem;
  }
  .voice-list li {
    width: 33.3%;
  }
  .voice-list::after {
    content: "";
    display: block;
    width: 33.3%; 
    height: 0;
  }
  .sec-voice {
  }
  .sec-voice::before {
    background: url(svg/wavetop2.svg) no-repeat top center / 100%;
    min-height: 19rem;
    height: 35rem;
    top: 0rem;
  }
  .sec-voice::after {
    background: url(svg/wavebottom.svg) no-repeat bottom center / 100%;
    min-height: 19rem;
    height: 35rem;
  }
  .voice-list > li > a {
    border: .8rem solid transparent;
    padding: 5.8rem 3rem 3rem 3rem;
    transition: .3s ease;
  }
  .voice-list > li > a:hover {
    border: .8rem solid var(--colorYellow);
  }
}
/*background wave only*/
@media only screen and (min-width:769px) and (max-width:1350px) {
  .sec-voice {
    background: linear-gradient(180deg,#ffffff 0%,#ffffff 10%,#f5f5f5 10%,#f5f5f5 92%,#ffffff 92%,#ffffff 100%);
  }
}
/* service --------------- */

.sevice-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: auto;
}
.sevice-box-inner {
  width: 100%;
  max-width: 60rem;
  margin: auto;
}
.sevice-box-inner:not(:last-child) {
  margin-bottom: 4rem;
}
.service-image {
  display: block;
  margin: auto;
  max-height: 21.5rem;
}
.service-title .ja {
  font-size: var(--title-2);
  font-weight: 700;
  letter-spacing: var(--ls-jp-title);
  margin-bottom: 2rem;
}
.sevice-number {
  color: var(--colorYellow);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
}
.sevice-number span {
  font-size: 4.8rem;
  font-weight: 700;
}
.service-text {
  margin-bottom: .5rem;
}

@media only screen and (min-width:768px) {
  .sevice-box-inner {
    width: 48%;
  }
  .service-image {
    max-height: 29.5rem;
  }
  .service-title .ja {
    font-size: 3.2rem;
  }
  .service-text {
    font-size: 1.8rem;
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width:1350px) {
  .sevice-box {
    justify-content: center;
  }
  .sevice-box-inner:nth-child(2n) {
    margin-left: 10rem;
  }
}

/* column --------------- */
.column-title-wrap {
  border-top: 0.2rem solid var(--colorBlack);
  padding-top: 5rem;
}
.column-discription {
  margin-bottom: 4.5rem;
}
.column-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.column-box-inner { 
  margin-bottom: 3.5rem;
  width: 48%;
}
.column-image {

}
.column-title .ja {
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: var(--ls-jp-title);
  margin: 1rem 0;
}
.column-date {
  font-size: 1.6rem;
  font-family: var(--jpText);
}
@media only screen and (min-width:768px) {
  .column-title-wrap {
    padding-top: 10rem;
    display: flex;
    align-items: center;
    column-gap: 7rem;
  }
  .column-discription {
    margin-bottom: 3rem;
  }
  .column-box::after{
    content:"";
    display: block;
    width: 33%;
  }
  .column-box-inner { 
    border: 0.8rem solid transparent;
    padding: 3rem;
    width: 33.3%;
    transition: .3s ease;
  }
  .column-box-inner:hover {
    border: 0.8rem solid var(--colorYellow);
  }
}

/* =============================================================
    page title
============================================================= */
.page-title {
  background: var(--colorBlack);
  color: var(--colorWhite);
  text-align: center;
  padding: 7rem 2rem;
  margin: 9rem 0 2rem;
  max-height: 25rem;
  position: relative;
}
.page-title .ja {
  font-size: var(--sec-title);
  font-weight: 700;
  margin-bottom: 2rem;
}
.page-title .en {
  font-size: var(--title-2);
  font-weight: 700;
}
.breadcrumbs-wrap {
  padding: 0 2rem;
}
.breadcrumbs {
  font-size: 1.2rem;
  margin: auto;
  max-width: var(--siteWidth);
}
.breadcrumbs > span {
  letter-spacing: var(--ls-p);
}
@media only screen and (min-width:768px) {
  .page-title .ja {
    font-size: var(--pagetitle);
  }
}

/* =============================================================
    contact area
============================================================= */
.sec-contact {
  background: var(--colorBlack);
  color: var(--colorWhite);
  text-align: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  position: relative;
}
.contact-title {
  line-height: 1.6;
  margin-bottom: 2rem;
}
.contact-title .en {
  font-size: 4rem;
  font-weight: 700;
}
.contact-title .ja {
  font-size: 1.8rem;
  font-weight: 700;
}
a.button-white {
  background: var(--colorWhite) url(svg/arrow-black.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  color: var(--colorBlack);
  display: block;
  font-weight: 700;
  text-align: center;
  padding: 2.2rem 5.5rem 2.2rem 2.2rem;
  margin: auto;
  max-width: 38rem;
  max-height: 7rem;
  transition: .3s ease;
}
a.button-white:hover {
  background: var(--colorYellow) url(svg/arrow-black.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  color: var(--colorBlack);
}
a.button-white:not(:last-child) {
  margin-bottom: 2rem;
}
.pagetop-button {
  background: var(--colorWhite) url(svg/arrow-top.svg) no-repeat center / .8rem 1.6rem;
  border: .3rem solid var(--colorBlack);
  border-radius: 50%;
  width: 4.2rem;
  height: 4.2rem;
  position: absolute;
  top: -2.1rem;
  right: 2rem;
}
.pagetop-button:hover {
  cursor: pointer;
}

@media only screen and (min-width:768px) {
  .sec-contact {
    margin-top: 14rem;
    padding: 6rem;
  }
  a.button-white:not(:last-child) {
    margin-bottom: 0;
  }
  .contact-inner {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--siteWidth);
    margin: auto;
  }
  .contact-title {
    margin-bottom: 6rem;
  }
  .contact-title .en {
    font-size: 6rem;
    line-height: 1.2;
  }
  .contact-title .ja {
    font-size: 2rem;
    line-height: 1.2;
  }
  a.button-white {
    font-size: 2rem;
    width: 48%;
    max-width: 63rem;
    max-height: 8rem;
  }
  .pagetop-button:hover {
    cursor: pointer;
  }
}
/* =============================================================
    footer
============================================================= */

.footer-inner {
  padding: 2rem 2.5rem;  
}
.sub-title {
  font-size: 1.5rem;
  font-weight: 700;
}
.copyright {
  background: var(--colorBlack);
  padding: .5rem 2rem;
  text-align: center;
}
.copyright .en {
  color: var(--colorWhite);
  font-size: 1.2rem;
}
.sns {
  display: flex;
  justify-content: space-between;
  width: 15.5rem;
  margin-top: 2rem;
}
.sns li {

}
.sns > li > a {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
}
.footer-nav-wrap {
  display: none;
}
.footer-nav-wrap .sns {
  display: none;
}
@media only screen and (min-width:768px) {
  .footer-inner {
    display: flex;
    max-width: var(--siteWidth);
    margin: auto;
    padding: 3rem 2.5rem;
  }
  .footer-nav-wrap {
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    max-width: 74rem;
    width: 65%;
  }
  .sitemap-nav {
    line-height: 2.2;
  }
  .sitemap-nav > li {

  }
  .sitemap-nav > li > a {
    font-size: 1.4rem;
    font-family: var(--jpText);
    font-weight: 700;
  }
  .sitemap-nav > li > a.sub {
    font-weight: 500;
  }
  .sns {
    margin-top: 3rem;
  }
}

/* =============================================================
    single/category
============================================================= */
.single-wraper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.single-content {
  width: 100%;
}
.single-title {
  font-size: var(--sec-title);
  font-weight: 700;
  margin-bottom: 6rem;
}
.single-info {
  font-size: 1.8rem;
  margin-bottom: 2.5rem;
}
.single-date {
  margin-right: 1.5rem;
}
.cat-name {
  border: .1rem solid var(--colorBlack);
  padding: .6rem 1.5rem;
}
.single-pagenation {
  border-top: 0.1rem solid var(--borderColor);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 5rem;
  padding-bottom: 10rem;
  margin: auto;
  max-width: var(--siteWidth);
}
a.prev-link,
a.next-link {
  color: var(--colorWhite);
  display: block;
  font-weight: 700;
  text-align: center;
  max-width: 38rem;
  max-height: 7rem;
  width: 45%;
  transition: .3s ease;
}
a.prev-link {
  background: var(--colorBlack) url(svg/arrow-prev-white.svg) no-repeat left 3rem center / 2.5rem 2.5rem;
  padding: 2.2rem 2.2rem 2.2rem 5.5rem;

}
a.prev-link:hover {
  background: var(--colorYellow) url(svg/arrow-prev-black.svg) no-repeat left 3rem center / 2.5rem 2.5rem;
  color: var(--colorBlack);
}
a.next-link {
  background: var(--colorBlack) url(svg/arrow4.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  padding: 2.2rem 5.5rem 2.2rem 2.2rem;

}
a.next-link:hover {
  background: var(--colorYellow) url(svg/arrow-black.svg) no-repeat right 3rem center / 2.5rem 2.5rem;
  color: var(--colorBlack);
}

/* single voice */
.single-voice {
  max-width: 84rem;
  margin: auto;
}
.single-default {

}
.single-voice-acf {

}
.voice-question {
  border-bottom: .1rem solid var(--colorBlack);
  margin-bottom: 3.5rem;
}
.voice-question dt {
  border-top: .1rem solid var(--colorBlack);
  background: var(--bgColorGray);
  font-size: var(--title-2);
  font-weight: 700;
  padding: 1.4rem 1.5rem;
}
.voice-question dt::before {
  color: var(--colorYellow);
  content: "Q.";
  display: inline-block;
  font-size: var(--sec-title);
  font-family: var(--enText);
  font-weight: 700;
  line-height: 1;
  margin-right: 1rem;
}
.voice-question dd {
  padding: 1.5rem;
  font-weight: 700;
}
.voice-question dd p {
  font-weight: 700;
}
.voice-question dd p:last-child {
  margin-bottom: 0;
}
/* sidebar */
.sidebar {
  width: 100%;
}
.sidebar-title {
  border-top: .1rem solid var(--colorBlack);
  border-bottom: .1rem solid var(--colorBlack);
  font-size: var(--title-2-pc);
  font-weight: 700;
  text-align: center;
  padding: 2rem;
  margin-bottom: 4rem;
}
.latest-list li {
  border-bottom: .1rem solid var(--borderColor);
  margin-bottom: 4rem;
}
.latest-image-box {
  margin-bottom: 2.5rem;
}
.latest-title {
  font-size: 1.8rem;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.8;
  letter-spacing: .1em;
  overflow: hidden;
  margin-bottom: 2.5rem;
  transition: .3s ease;
}
.latest-list a:hover .latest-title {
  color: var(--colorYellow);
}
.latest-info {
  font-size: var(--title-3);
  margin-bottom: 4rem;
}
.latest-date {
  margin-right: 2.5rem;
}
.latest-cat-name {
  border: .1rem solid var(--colorBlack);
  padding: .7rem 1.5rem;
}
.sidebar-title-2 {
  font-size: var(--title-2-pc);
  font-weight: 700;
  margin-bottom: 1.5rem;
}
.sidebar-category {
  background: var(--bgColorGray);
  padding: 3rem;
  margin-bottom: 5rem;
}
.sidebar-cat-list li:not(:last-child) {
  margin-bottom: 1rem;
}
.sidebar-cat-list li a {
  background: var(--bgColor);
  border: .1rem solid var(--colorBlack);
  display: inline-block;
  font-size: 1.8rem;
  padding: 0 1.5rem;
  transition: .3s ease;
}
.sidebar-cat-list li a:hover {
  background: var(--colorYellow);
}
.monthly-list {
  background: url(svg/arrow-bottom-black.svg) no-repeat center right 2.5rem / 1.3rem .8rem;
  padding: 1.1rem 1rem;
  font-size: 1.8rem;
  border-radius: 0.3rem;
  width: 100%;
  appearance: none;
}
/* category */
.post-list li {
  border-bottom: .1rem solid var(--bgColorGray);
}
.post-list li a {
  border: .8rem solid var(--bgColor);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 2.5rem;
  transition: .3s ease;
}
.post-list li a:hover {
  border-color: var(--colorYellow);
}
.post-image-box {
  margin-bottom: 2.5rem;
  width: 100%;
}
.post-content {
  width: 100%;
}
.post-info {
  font-size: 1.8rem;
}
.post-date {
  margin-right: 2.5rem;
}
.post-cat-name {
  border: 0.1rem solid var(--colorBlack);
  padding: 0.6rem 1.5rem;
}
.post-title {
  font-size: var(--title-2-pc);
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.8;
  letter-spacing: .1em;
  overflow: hidden;
  transition: .3s ease;
}
.post-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  margin-bottom: 0;
}
.column-cat-list-wrap {
  background: var(--bgColorGray);
  padding: 3.4rem 3rem 2.4rem 3rem;
  margin: 2rem 0;
}
.column-cat-list {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--siteWidth);
  margin: auto;
}
.column-cat-list:not(:last-child) {
  margin-right: 3rem;  
}
.column-cat-list li {
  margin-right: 3rem;
  margin-bottom: 1rem;
}
.column-cat-list li a {
  background: var(--bgColor);
  border: .1rem  solid var(--colorBlack);
  font-size: 1.8rem;
  padding: .4rem 2rem;
  transition: .3s ease;
}
.column-cat-list li a:hover {
  background: var(--colorYellow);
}
.first-txt {
  border-width: 0 0.1rem 0 0;
  border-color: var(--colorBlack);
  border-style: solid;
  font-weight: 700;
  padding-right: 2rem;
}
/*pagenation*/
.pagenation {
  margin-top: 10rem;
}
.pagenation ul {
  font-size: var(--title-2-pc);
  font-family: var(--jpText);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
}
.pagenation li {
  margin: 0 0.5rem;
}
.pagenation li.active {
  margin: 0 0.5rem;
}
.pagenation li a {
  color: #ccc;
}
.pagenation li a,
.pagenation li.active {
  font-weight: bold;
  display: block;
  text-align: center;
  padding: 1rem;
  width: 5rem;
  transition: .3s ease;
}
.pagenation li.next a,
.pagenation li.prev a {
  width: 8rem;
}
.pagenation li a:hover {
  background: var(--colorYellow);
  color: var(--colorBlack);
}
.pagenation-icon {
  transition: .3s ease;
}
.pagenation li a:hover .pagenation-icon {
  fill: var(--colorBlack);
}
@media only screen and (min-width:768px) {
  .single-content {
    width: 67%;
    max-width: 86rem;
  }
  .single-pagenation {
    padding: 10rem 0 0 0;
  }
  /*single voice */
  .voice-question dt {
    font-size: var(--title-2-pc);
    padding: 2.4rem 3rem;
  }
  .voice-question dt::before {
    font-size: var(--pagetitle);
    line-height: 1;
    margin-right: 1rem;
  }
  .voice-question dd {
    padding: 3.3rem;
  }
  /* sidebar */
  .sidebar {
    width: 27%;
    max-width: 35rem;
  }
  /* category */
  .post-list li a {
    padding: 5rem;
  }
  .post-image-box {
    margin-bottom: 0;
    width: 29%;
  }
  .post-content {
    width: 66%;
  }
  .post-title {
    font-size: var(--sec-title);
  }

  .column-cat-list-wrap {
    margin: 10rem 0;
  }
}
/* =============================================================
    page service
============================================================= */
.plan-title {
  border-top: .1rem solid var(--colorBlack);
  border-bottom: .1rem solid var(--colorBlack);
  font-size: var(--sec-title);
  font-weight: 700;
  letter-spacing: var(--ls-jp-title);
  padding: 3rem 0;
  margin-bottom: 3rem;
}
.recommendation {
  border-top: .1rem solid var(--colorBlack);
  border-bottom: .1rem solid var(--colorBlack);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.recommendation-title {
  background-color: var(--bgColorGray);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--title-2);
  font-weight: 700;
  padding: 2.5rem;
  width: 100%;
}
.recommendation-contents {
  padding: 2.5rem;
}
.check-list {
  font-size: var(--title-2);
}
.check-list li {
  background: url(svg/icon-check.svg) no-repeat left center / 2.3rem 2.3rem;
  letter-spacing: var(--ls-p);
  padding-left: 4.3rem;
}
.two-col-table {
  display: flex;
  flex-wrap: wrap;
}
.two-col-table dt {
  background-color: var(--bgColorGray);
  border-top: 0.1rem solid var(--colorBlack);
  display: flex;
  align-items: center;
  padding: 1.5rem 2.5rem;
  width: 100%;
}
.two-col-table dd {
  border-top: 0.1rem solid var(--colorBlack);
  padding: 3rem 2.5rem;
  width: 100%;
}

.other-plan {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2%;
}
.other-plan-inner {
  width: 49%;
}
.other-plan-image {
  border: 0.1rem solid var(--colorBlack);
  padding: 5%;
  margin-bottom: 1.5rem;
  width: 100%;
}
.other-plan-image.uniform-height {
  padding: 1% 5%;
}
.other-plan-title {
  font-weight: 700;
  padding: 0 2rem;
}
@media only screen and (min-width:768px) {
  .recommendation-title {
    font-size: var(--title-2-pc);
    padding: 5rem;
    width: 30rem;
  }
  .recommendation-contents {
    padding: 5rem;
    width: calc(100% - 30rem);
  }
  .check-list {
    font-size: var(--title-2-pc);
  }
  .two-col-table {
    border-bottom: 0.1rem solid var(--colorBlack);
  }
  .two-col-table dt {
    padding: 3rem 5rem;
    width: 30rem;
  }
  .two-col-table dd {
    padding: 3rem 5rem;
    width: calc(100% - 30rem);
  }
  .other-plan {
    gap: 2rem 0.5%;
  }
  .other-plan-inner {
    max-width: 24%;
  }
  .other-plan-inner a {
    transition: .3s ease;
  }
  .other-plan-inner a:hover {
    color: var(--colorYellow);
  }
}

/* =============================================================
    page about
============================================================= */
.about-greeting-image {
  text-align: center;
  margin-bottom: 6rem;
}
.about-greeting .title-1 {
  margin-bottom: 4.5rem;
}
.text-center {
  border-bottom: 0.1rem solid var(--colorBlack);
  padding: 0 2rem 3rem;
}
.feature-list-box {
  margin-bottom: 8rem;
}
.feature-list-image {
  text-align: center;
  margin-bottom: 2rem;
  width: 100%;
}
.feature-list-contents {
  width: 100%;
}
.feature-list-title {
  font-size: var(--sec-title);
  font-weight: 700;
  margin-bottom: 4.5rem;
}

.feature-list-2nd {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.feature-list-2nd-box {
  width: 100%;
}
.feature-list-2nd-box:not(:last-child) {
  margin-bottom: 5rem;
}
.feature-list-2nd-title {
  font-weight: bold;
  font-size: var(--title-2-pc);
}
.feature-list-2nd-image {
  display: block;
  margin: 0 auto 2rem;
  width: 80%;
}
@media only screen and (min-width:768px) {
  .text-center {
    padding: 0 4rem 6rem;
  }
  .feature-list-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 13rem;
  }
  .feature-list-image {
    width: 56rem;
  }
  .feature-list-contents {
    padding: 3rem 9rem;
    width: 74rem;
  }
  .feature-list-box:nth-child(even) .feature-list-image {
    order: 2;
  }
  .feature-list-box:nth-child(even) .feature-list-contents {
    order: 1;
  }

  .feature-list-2nd-box {
    width: 30%;
  }
  .feature-list-2nd-image {
    margin-bottom: 2.5rem;
    width: 100%;
  }
}
/* =============================================================
    page privacy
============================================================= */
.privacy-txt {
  max-width: 100rem;
  margin-right: auto;
  margin-left: auto;
}
.privacy {
  max-width: 80rem;
  margin: auto;
}
.privacy dt {
  font-size: var(--title-2-pc);
  font-family: var(--jpText);
  font-weight: bold;
  margin-bottom: 2rem;
}
.privacy dd {
  margin-bottom: 4rem;
}
.privacy ol {
  list-style: decimal;
  margin: 0 0 2em 1.5em;
}
/* =============================================================
    Company
============================================================= */
.company {
	max-width:130rem;
	margin:0 auto;
}
.company .sec-inner {
	width:130rem;
	max-width:100%;
	margin:0 auto;
}
.company .company-box {
	width:80rem;
	max-width:100%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	font-size:20px;
}
.company table{
  width: 100%;
  border-collapse: collapse;
}
.company table tr{
  border-bottom: solid 2px white;
}
.company table tr:last-child{
  border-bottom: none;
}
.company table th{
  position: relative;
  text-align: left;
  width: 30%;
  background-color: #333;
  color: white;
  padding: 20px 0 20px 40px;
}
.company table th:after{
  display: block;
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  top:calc(50% - 10px);
  right:-10px;
  border-left: 10px solid #333;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.company table td{
  text-align: left;
  width: 70%;
  padding: 20px 0 20px 40px;
}
.company table tr:nth-child(odd) {
  background-color: #eee;
}
@media screen and (max-width:480px) {
	.company .company-box {
		font-size:16px;
	}
	.company table th,
	.company table td {
		display: block;
		width: 100%;
	}
	.company table th:after {
		display: none;
	}
	.company table th{
		padding: 10px 0 10px 20px;
	}
	.company table td{
		padding: 10px 0 10px 40px;
	}
}