@charset "UTF-8";

/** 02.長谷川会計について
*** 03.採用情報
**/

/** 02.長谷川会計について
***************************************************************/
.com11{
  background-image: url(../img/com/title01.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 10% 0 3% 0;
}
.com11 h2{background:rgba(255,255,255,0.8); text-align: center; padding: 1.5% 0 2% 0;}

main{margin:5% 10%;}
@media screen and (max-width: 480px) {
  main{margin:5%;}
}

/**************************************/
.com121 h3,
.com13 h3{
  font-size: 2em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: left; /* 水平中心 */
  margin: 0 0 3% 0;
}
.com121 h3::after,
.com13 h3::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
.com121 h3::after,
.com13 h3::after {margin-left: 4.5%;}
/**************************************/
.com121{width: 60%; margin: 0 10% 0 0;}
.com121 h4{font-size: 1.2em; color: #0F215C;}
.com121 p{font-size: 0.9em;}
/**************************************/
.com13{margin: 10% 0 0 0;}

.container {
  max-width: 40%;
  width: 80%;
  margin: 0 auto;
}
.timeline-item {
  padding: 1px 2em 2em 8em;
  position: relative;
  color: rgba(0, 0, 0, 0.7);
  border-left: 2px solid rgba(0, 0, 0, 0.3);
}
.timeline-item p { font-size: 1rem; margin: 6px 0 0 0;}
.timeline-item::before {
  content: attr(date-is);
  position: absolute;
  left: 2em;
  font-weight: bold;
  top: 1em;
  display: block;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.785rem;
}
.timeline-item::after {
  width: 10px;
  height: 10px;
  display: block;
  top: 1em;
  position: absolute;
  left: -7px;
  border-radius: 10px;
  content: "";
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
}
.timeline-item:last-child {
  -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
     border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%;
}
/**************************************/
.com14, .com15{width: 50%; margin: 10% 0;}
.com14 h3,
.com15 h3{
  font-size: 2em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  margin: 0 0 3% 0;
  position: relative;
  line-height: 200%;
}
.com14 h3::before,
.com15 h3::before {
  position: absolute;
  border-bottom: 2px solid #274DA3;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  content: '';
}
/**************************************/
.com14 dl{display: flex; flex-wrap: wrap;}
.com14 dt{width: 30%; border-bottom: 1px dotted #999; line-height: 350%; letter-spacing: 2px; padding: 0 0 0 5%;}
.com14 dd{width: 70%; border-bottom: 1px dotted #999; line-height: 350%; margin: 0;}
.com14 li{line-height: 200%; margin: 0 0 0 -11%;}
.com151{display: flex; flex-wrap: wrap;}
.com151 ul{width: auto; margin: 0 auto; padding: 0;}
.com151 li{font-size: 0.9em; line-height: 230%; list-style: none;}
/**************************************/
.com16 h3{
  font-size: 2em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: left; /* 水平中心 */
  margin: 0 0 3% 0;
}
.com16 h3::after{
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
.com16 h3::after {margin-left: 4.5%;}
.com16 p{font-size: 0.9em; margin: 0;}
.com16 h4{
  font-size: 1.4em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  margin: 5% 0;
  position: relative;
  line-height: 200%;
}
.com16 h4::before{
  position: absolute;
  border-bottom: 2px solid #274DA3;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  content: '';
}
.com16 dl{width: 31.3%; float: left;}
  .com16 dl:first-child{margin: 0;}
  .com16 dl:nth-child(2){ margin: 0 3%;}
  .com16 dl:nth-child(3){margin: 0;}
  .com16 dl:nth-child(4){ margin: 0;}
  .com16 dl:nth-child(5){margin: 0 3%;}
  .com16 dl:nth-child(6){margin: 0;}
  .com16 dl:nth-child(7){ margin: 0;}
  .com16 dl:nth-child(8){margin: 0 3%;}
  .com16 dl:nth-child(9){margin: 0;}
  .com16 dl:nth-child(10){ margin: 0;}
  .com16 dl:nth-child(11){margin: 0 3%;}
  .com16 dl:nth-child(12){margin: 0;}
  #sp-fixed-menu li:nth-child(4){background: #092864;}
.com16 dt{
  border-bottom: solid 3px #cce4ff;
  position: relative;
  line-height: 220%;
  font-weight: 700;
}
.com16 dt:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 8px #5472cd;
  bottom: -8px;
  width: 30%;
}
.com16 dd{font-size: 0.9em; height: 60px; margin: 5% 0 5% 5%;}

/** 02.長谷川会計について（SP）************************************/
@media screen and (max-width: 480px) {
.com11 h2{font-size: 1em;}
.com12{display: block; margin: 15% 0 0 0;}
.com121{width: 100%;}
.com121 h3, .com13 h3{font-size: 1.2em;}
.com121 h3::after, .com13 h3::after {width: 50%;}
.com121 h3::after, .com13 h3::after {margin-left: 4.5%;}
.com121 h4{font-size: 1em;}
.com121 p{font-size: 0.8em;}
.com13{margin: 20% 0 0 0;}
.com13 .flex{display: block;}
.com121 h3,
.com13 h3{
  font-size: 1.3em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: left; /* 水平中心 */
  margin: 0 0 3% 0;
}
.com121 h3::after,
.com13 h3::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
.com121 h3::after,
.com13 h3::after {margin-left: 4.5%;}
.container {
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
}
.timeline-item {padding: 1px 1em 0.7em 7em;}
.timeline-item::before {font-size: 11px; top: 0.7em;}
.timeline-item::after{ top: 0.6em;}
.timeline-item p { font-size: 11px; margin: 6px 0 0 0;}

.com14sp{display: block;}
.com14, .com15{width: 100%; margin: 20% 0 0 0;}
.com14 h3{font-size: 1.3em;}
.com14 dt {font-size: 0.8em;}
.com14 dd{font-size: 0.8em;}
.com14 li{list-style: none; font-size: 10px; margin: 0 0 0 -23%;}
.com15 h3{font-size: 1.3em;}
.com151 ul{width: 100%;}
.com151 li{font-size: 0.8em;}
.com16{margin: 20% 0 0 0;}
.com16 h3{font-size: 1.3em;}
.com16 h4{font-size: 1em;}
.com16 p{font-size: 0.7em;}
.com16 dl{width: 100%;}
.com16 dt{font-size: 1em;}
.com16 dd{font-size: 0.8em;}
.com16 dl:first-child{margin: 0;}
.com16 dl:nth-child(2){margin: 0;}
.com16 dl:nth-child(3){margin: 0;}
.com16 dl:nth-child(4){margin: 0;}
.com16 dl:nth-child(5){margin: 0;}
.com16 dl:nth-child(6){margin: 0;}
.com16 dl:nth-child(7){margin: 0;}
.com16 dl:nth-child(8){margin: 0;}
.com16 dl:nth-child(9){margin: 0;}
.com16 dl:nth-child(10){margin: 0;}
.com16 dl:nth-child(11){margin: 0;}
.com16 dl:nth-child(12){margin: 0;}
}



/** 03.採用情報
***************************************************************/
.data01{display: flex; margin: 0; padding: 0;}
.data01 li{width: 50%; margin: 2%; list-style: none;}
.data02{display: flex; margin: 0; padding: 0;}
.data02 li{width: 33.3%; margin: 2%; list-style: none;}
.recruit{ margin: 10% 0 5% 0;}

.reqment{display: flex; flex-wrap: wrap;}
.reqmenttl{width: 45%; margin: 0 2.5%;}
.reqment dl{display: flex; flex-wrap: wrap;}
.reqment dt, .reqment dd{line-height: 150%; padding: 3%; font-size: 0.8em;}
.reqment dt{width: 30%; border-bottom: 1px solid #FFF; letter-spacing: 1px; background-color: #dee8ff; }
.reqment dd{width: 70%; border-bottom: 1px dotted #999; margin: 0;}
.entry01{
  text-align: center;
  margin: 3% 0;
  font-family: 'Noto Serif JP', serif;
}

@media screen and (max-width: 480px) {
  .reqment{display: block;}
  .reqmenttl{width: 100%; margin: 8% 0 20% 0;}
}

/** 04.ワンストップサービス
***************************************************************/
.svbt01{ margin-top: 5%;}
.svbt02{ margin-top: 2%;}
@media screen and (max-width: 480px) {
  .svbt01{ margin-top: 15px;}
  .svbt02{ margin-top: 5%;}
}

#kaisei h3,
.wp-block-group__inner-container h3{
  font-size: 1.6em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: left; /* 水平中心 */
  margin: 5% 0 1% 0;
}
#kaisei h3::after,
.wp-block-group__inner-container h3::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
#kaisei h3::after,
.wp-block-group__inner-container h3::after {margin-left: 4.5%;}
.sbox{background-color: #EBEBEB; margin: 0 0 3% 0; padding: 3%;}
.sbox li{margin:0 0 10px 3%;}

@media screen and (max-width: 480px) {
  .sbox{font-size: 0.8em;}
  .sbox li{margin:0 0 10px 8%;}
  #kaisei h3,
  .wp-block-group__inner-container h3{font-size: 1em;}
  #step{font-size: 0.8em;}
}


.svqa01 {padding: 0 0 10% 0;}
.svqa01 h3{margin: 10% 0 5% 0;}
.svqa01 ul{margin: 0; padding: 0;}
.svqa01 li{ list-style: none; padding: 2%; border-bottom: 1px dotted #CCC;}
.svqa01 li a{color: #196798;}
.post-q{
  font-size: 1.6em;
  font-weight: bold;
  background-color: #196798;
  color: #FFF;
  padding: 0 1% 8px 1%;
  border-radius: 5px;
  margin: 0 10px 0 0;
}

.svqa01 .post-date{ background-color: #196798; margin-right: 2%; color: #FFF; padding: 0.5%;}

/** 05.サービスについて
***************************************************************/
.svp01{padding: 0 !important;}
.svp02{padding: 2% !important;}






/** Option
***************************************************************/
.w3w{width: 33.3%;}
.w30t{width: 30.3%;}
.w30{width: 30%;}
.w50{width: 50%;}
.w1002{width: calc(100%/2); display: block; float: left;}

.title01{
  font-size: 2em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: left; /* 水平中心 */
  margin: 0 0 3% 0;
}
.title01::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
.title01::after {margin-left: 4.5%;}

.title02{
  font-size: 1.5em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.title02::before, .title02::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 25%;
}
.title02::before{margin-right: 4.5%;}
.title02::after{margin-left: 4.5%;}

.title03{
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem 1.3rem 130px;
  word-break: break-all;
  border-top: 3px solid #274DA3;
  font-size: 1.5em;
  color: #274DA3;
}

.title03 span {
  font-size: 40px;
  font-size: 2.8rem;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  padding: 3px 20px;
  color: #fff;
  background: #274DA3;
}

.title04 {
  color: #274DA3;
  position: relative;
  padding: 0.8rem 1rem;
  border-bottom: 3px solid #274DA3;
  background: #fff;
  font-size: 1.5em;
}

.title04:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #274DA3 transparent transparent transparent;
}

.title04:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

@media screen and (max-width: 480px) {
  .title01{font-size: 1.3em;}
  .title02{font-size: 1em; text-align: center;}
  .title03{font-size: 0.9em; padding: 0.8rem 2rem 1.3rem 60px; line-height: 120%;}
  .title03 span{ font-size: 1.3em; padding: 4% 10px;}
  .title04{font-size: 1.1em;}
}

/** Option Content part----
***************************************************************/
.mg5000{margin: 5% 0 0 0;}
.mg5030{margin: 5% 0 3% 0;}
.sum01a{width: 80%; text-align: center; background-color: #274DA3; color: #FFF; padding: 3%; margin: 0 auto;}
.sum01b{width: 80%; text-align: left; background-color: #EBEBEB; color: #000; padding: 3%; margin: 0 auto;}

.ptflex{display: flex;}
.point01, .point02, .point03, .point04{
  position: relative;
  padding: 1rem 2rem;
  text-align: center;
  color: #0075a9;
  background: #d8ecf5;
  width: 46%;
  margin: 2%;
  color: #000;
}
.point01:before,
.point02:before,
.point03:before,
.point04:before{
  font-family: 'Font Awesome 5 Free';
  font-size: 15px;
  font-size: 1.5rem;
  position: absolute;
  top: -44px;
  left: 0;
  line-height: 180%;
  padding: 0 1em;
  color: #fff;
  background: #0075a9;
}
.point01:before{ content: '\f0a4  理由その 1';}
.point02:before{ content: '\f0a4  理由その 2';}
.point03:before{ content: '\f0a4  理由その 3';}
.point04:before{ content: '\f0a4  理由その 4';}

.point01 h4,
.point02 h4,
.point03 h4,
.point04 h4{
  position: relative;
  padding: 1rem 2rem;
  border-bottom: 3px solid #274DA3;
  background: #f9f9f9;
  color: #000;
  text-align: left;
  height: 85px;
}
.point01 h4:before,
.point02 h4:before,
.point03 h4:before,
.point04 h4:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #274DA3 transparent transparent transparent;
}
.point01 h4:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.point01 h5,
.point02 h5,
.point03 h5,
.point04 h5{
  position: relative;
  padding-left: 4em;
}
.point01 h5 span,
.point02 h5 span,
.point03 h5 span,
.point04 h5 span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 2rem;
  color: #fff;
  background: #274DA3;
}
.point01 h5 span:after,
.point02 h5 span:after,
.point03 h5 span:after,
.point04 h5 span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #274DA3;
}
.pointsub{
  text-align: left;
  margin-left: 30%;
  font-size: 0.8em;
}

/************/
.box30, .box31, .box32 {
  margin: 2em 0;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 33.3%;
}
.box40, .box41, .box42{
  margin: 2em auto;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 80%;
}

.box30 .box-title, .box31 .box-title, .box32 .box-title{
  font-size: 1.2em;
  padding: 3%;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box40 .box-title, .box41 .box-title, .box42 .box-title {
  font-size: 1.2em;
  padding: 1%;
  text-align: center;
  color: #FFF;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.box30 .box-title{background: #6C9819;}
.box31 .box-title{background: #971A40;}
.box32 .box-title{background: #196798;}
.box40 .box-title{background: #6C9819;}
.box41 .box-title{background: #971A40;}
.box42 .box-title{background: #196798;}
.box30 p, .box31 p, .box32 p, .box40 p, .box41 p, .box42 p {padding: 15px 20px; margin: 0;}


/************/

.wp-block-table table{}
.wp-block-table th{background: #196798;; color: #FFF;}
.wp-block-table th,
.wp-block-table td{padding: 1%; font-size: 0.8em;}

/************/
@media screen and (max-width: 480px) {
  .sum01a, .sum01b{font-size: 0.8em; width: 100%; text-align: left;}


  .ptflex, .ptflex{display: block;}
  .point01, .point02, .point03, .point04{width: 100%; margin: 20% 0; padding: 0.1em 1em;}
  .point01 h4,
  .point02 h4,
  .point03 h4,
  .point04 h4{ height: auto; font-size: 0.8em;}
  
  .point01 dd,
  .point02 dd,
  .point03 dd,
  .point04 dd{margin: 0; font-size: 0.8em; text-align: left;}
  .pointsub{margin-left: 33% !important;}
  .point01 h5 span,
  .point02 h5 span,
  .point03 h5 span,
  .point04 h5 span { padding: 0.5rem 1rem;}

  .box30, .box31, .box32, .box40, .box41, .box42{width: 100%; font-size: 0.8em;}
}

/** Option Button
***************************************************************/
.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-c {
  font-size: 1.6rem;
  position: relative;
  padding: 0.5rem 3rem 1rem 5rem;
  color: #fff;
  background: #6C9819;
  -webkit-box-shadow: 0 5px 0 #6C9819;
  box-shadow: 0 5px 0 #6C9819;
  width: 50%;
}

a.btn-c span {
  font-size: 0.8rem;
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5em;
  padding: 0.2rem 0.5rem;
  color: #6C9819;
  border-radius: 4px;
  background: #fff;
}

a.btn-c:before {
  font-family: "Font Awesome 5 Free";
  font-size: 1.8rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - 0.7rem);
  left: 1.5rem;
  margin: 0;
  padding: 0;
  content: "\f30b";
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

a.btn-c:hover {
  -webkit-transform: translate(0, 3px);
  transform: translate(0, 3px);
  color: #fff;
  background: #6C9819;
  -webkit-box-shadow: 0 2px 0 #2c9d60;
  box-shadow: 0 2px 0 #2c9d60;
}

a.btn-c:hover:before { left: 2rem;}

@media screen and (max-width: 1480px) {
  a.btn-c {font-size: 1.2em;}
}
@media screen and (max-width: 480px) {
  a.btn-c {font-size: 1.2em; width: 100%;}
}

/*****************************************************************/
.cta_btn09 {
  font-weight: bold; /* 文字の太さ */
  text-align: center;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 1.5em;
  text-align: left;
}
.cta_btn09 a{opacity: 1;}

.cta_btn09-contact, .cta_btn09-tel {
  color: #fff; /* 文字色 */
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 2em 1.5em 2em 3.8em;
  width: 100%; /* ボタン幅 */
  max-width: 40%; /* 最低ボタン幅 */
  transition: 0.3s;
  box-shadow: 1px 1px 10px #333;
  font-size: 0.9em;
}

.cta_btn09-contact {background: #00395F; /* お問い合わせボタン色 */}
.cta_btn09-tel {background: #4D9BC1; /* 電話ボタン色 */}

.cta_btn09-contact::before, .cta_btn09-tel::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 40%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: cover;
}
.cta_btn09-contact::before {
  width: 40px;
  height: 40px;
  background-image: url(../img/arrow01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.cta_btn09-tel::before {
  width: 40px;
  height: 40px;
  background-image: url(../img/arrow01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.cta_btn09 .copy_txt {
  line-height: 1;
  display: block;
  padding: 0.5em 0.5em 0.6em 0.5em;
  background: #fff; /* 下文字背景色 */
  font-size: 0.6em; /* 下文字サイズ */
  font-weight: normal;
  margin: 10px 0 0 0;
}

.cta_btn09-contact .copy_txt {color: #00395F; /* 下文字色 */}
.cta_btn09-tel .copy_txt {color: #4D9BC1; /* 下文字色 */}

.cta_btn09 img { width: 1em; margin-right: 0.5em;}

/* マウスオーバーした際のデザイン */
.cta_btn09-contact:hover,
.cta_btn09-tel:hover { transform: scale(1.05);}

@media screen and (max-width: 480px) {
  .cta_btn09{display: block; font-size: 1em; }
  .cta_btn09-contact, .cta_btn09-tel{width: 100%; padding: 1em 1em 1em 4em; display: block; max-width: 100%;}
  .cta_btn09 .copy_txt{margin: 5px 0 0 0;}
  .cta_btn09-contact::before, .cta_btn09-tel::before{top: 50%; left: 20px; width: 30px; height: 30px;}
}
/*****************************************************************/
.cta_btn11 {
  font-weight: bold; /* 文字の太さ */
  text-align: center;
  align-items: center;
  display: block;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 1em;
  text-align: left;
}
.cta_btn11 a{opacity: 1;}

.cta_btn11-contact, .cta_btn11-tel {
  color: #fff; /* 文字色 */
  position: relative;
  display: block;
  text-decoration: none;
  padding: 1em 1em 1em 4em;
  width: 100%; /* ボタン幅 */
  max-width: 100%; /* 最低ボタン幅 */
  transition: 0.3s;
  box-shadow: 1px 1px 10px #333;
}

.cta_btn11-contact {background: #00395F; /* お問い合わせボタン色 */}
.cta_btn11-tel {background: #4D9BC1; /* 電話ボタン色 */}

.cta_btn11-contact::before, .cta_btn11-tel::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background-repeat: no-repeat;
  background-size: cover;
  width: 30px;
  height: 30px;
}

.cta_btn11-contact::before {
  width: 30px;
  height: 30px;
  background-image: url(../img/arrow01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.cta_btn11-tel::before {
  width: 30px;
  height: 30px;
  background-image: url(../img/arrow01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.cta_btn11 .copy_txt {
  line-height: 1;
  display: block;
  padding: 0.5em 0.5em 0.6em 0.5em;
  background: #fff; /* 下文字背景色 */
  font-size: 0.6em; /* 下文字サイズ */
  font-weight: normal;
  margin: 5px 0 0 0;
}

.cta_btn11-contact .copy_txt {color: #00395F; /* 下文字色 */}
.cta_btn11-tel .copy_txt {color: #4D9BC1; /* 下文字色 */}

.cta_btn09 img { width: 1em; margin-right: 0.5em;}

/* マウスオーバーした際のデザイン */
.cta_btn11-contact:hover,
.cta_btn11-tel:hover { transform: scale(1.05);}

.svbt11{ margin-top: 15px;}
.svbt12{ margin-top: 5%;}


/** Option Flow----
***************************************************************/
.flow_design07 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  margin: 0 auto;
}

.flow07 {padding-left: 0; width: 100%;}
.flow07 > li { list-style-type: none; display: flex;}
.flow07 > li:not(:last-child) { margin: 0 0 50px;}

.flow07 > li .icon07 {
  width: 90px;
  box-sizing: border-box;
  padding: 20px 10px 10px;
  font-weight: bold;
  color: #FFF;
  text-align: center;
  background: #196798;
  border-radius: 5px 5px 0 0;
  position: relative;
  line-height: 125%;
  margin: 0;
}
.flow07 > li .icon07::after {
  content: ' ';
  width: 0;
  height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-top: 20px solid #196798;
  position: absolute;
  bottom: -20px;
  left: 0;
}

.flow07 > li dl {padding: 0 0 0 30px; width: calc(100% - 100px);}

.flow07 > li dl dt {
  padding: 0 0 5px;
  margin: 0 0 15px;
  font-size: 1.5em;
  font-weight: bold;
  border-bottom: 4px solid #CCCCCC;
  position: relative;
}
.flow07 > li dl dt::after {
  content: '';
  width: 20%;
  height: 4px;
  position: absolute;
  bottom: -4px;
  left: 0;
  background-color: #196798
}

.flow07 > li dl dd {margin: 0; font-size: 0.8em;}

.flow100{background-color: #EBEBEB; padding: 5%; width: 100% !important;}

@media screen and (max-width: 480px) {
  .flow_design07{width: 100%;}
  .flow07 > li .icon07{font-size: 0.8em; width: 70px;}
  .flow07 > li .icon07::after{
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
  }
  .flow07 > li dl dt{font-size: 1em;}
  .flow07 > li dl dd {font-size: 0.7em;}
}


/** 100.Content Topics
***************************************************************/
/** Archives ****/
.topics{padding: 8% 0 5% 0;}

.topicslist{ width:50%; margin: 10% 0 5% 0; z-index: 1;}
.topicsside{ width:350px; margin:0 0 0 2%;}
.topicslist header{padding: 10px; position: absolute;}
.topicslist h1{ font-size: 1.5em !important;}
.topicslist h2 a{ color:#FFF;}
.topicslist article{ margin:0 0 10% 0;}

/** Post ****/
.topics article{ width:50%;}
.topics aside{ width:350px; margin:0 0 0 5%;}

.entry-header{margin:0; padding: 0; width: 50%; position: absolute;}
.entry-header h2 {
  font-weight: bold;
  padding: 0.5em 4em 0.5em 2em;
  color: #fff;
  position: relative;
  height:auto;
  font-size: 1.2em;
}
.entry-header h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #20578D;
  transform: skew(-20deg);
  z-index: -1;
}
.entry-header h2::after {
  content: '';
  position: absolute;
  border-left: 20px double #fff;
  height: 100%;
  top: 0;
  right: 50px;
  transform: skew(-20deg);
}
.entry-content{ margin:80px 5% 8% 5%;}

@media screen and (max-width: 480px) {
  .topicslist{width: auto; margin: 60px 0 0 0;}
  .topics{padding: 30px 0 0 0; display: block;}
  .topics article{ width:100%;}
  .entry-header{width: 100%;}
  .entry-content{padding: 90px 0 0 0;}
  .topicslist h2 a{font-size: 14px;}
  .topicslist article{font-size: 12px;}
  .entry-header h2{font-size: 14px;}
  
.topics aside{ width:auto;}
}


/** Widgets ****/
.widget, .widget_block{ margin-bottom:15%;}
.topics aside h3,
.topicsside aside h3 {
  font-weight: bold;
  font-size:1em;
  padding: 0.1em 1.5em;
  margin-left: 5px;
  margin-right: 5px;
  outline: 3px solid #20578D;
  outline-offset: 5px;
  background: linear-gradient(-45deg, transparent 0 20px, #fff 20px calc(100% - 20px), transparent calc(100% - 20px)),
              repeating-linear-gradient(-45deg, #20578D 0 2px, #fff 2px 6px);
}
.topics aside ul,
.topicsside aside ul{padding:0}
.topics aside li,
.topicsside aside li{
	font-size:0.9em;
	border-bottom:1px dotted #4c9ac0;
	line-height:3em;
	padding:0;
	margin:0;
	list-style:none;
}

.topics aside li a,
.topicsside aside li a{
  position: relative;
  display: block;
  color: #000;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1em;
  padding:0 10px;
}

.topics aside li a::after,
.topicsside aside li a::after{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
  width: 0.4em;   /* arrow size */
  height: 0.4em;  /* arrow size */
  border-top: 1px solid #808080;  /* thickness, color */
  border-right: 1px solid #808080;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
    transition: .3s;
}
.topics aside li a:hover,
.topicsside aside li a:hover{ color:#4c9ac0}
.topics aside li a:hover::after,
.topicsside aside li a:hover::after{right: 15px;}



/************************************/
/** Widget Parts ***********************
************************************/
.wid10{
  background-image: url(../img/sec60.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 1.5% 5% 5% 5%;
  text-align: center;
  margin: 0 0 5% 0;
}
.wid10 h3{
  font-size: 1.5em;
  letter-spacing: 1px;
  display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
}
.wid10 h3::before, .wid10 h3::after {
  border-top: 2px solid #274DA3;
  content: "";
  width: 2em;
}
.wid10 h3::before{margin-right: 4.5%;}
.wid10 h3::after{margin-left: 4.5%;}
.wid10 a{
  display: block;
  height: 50px;
  line-height: 4em;
  box-shadow: 10px 10px 15px -10px #333;
  margin: 3%;
  background-color: #F8F8F8;
  color: #000;
  font-weight: 700;
  font-size: 0.8em;
  text-align: left;
  text-indent: 10%;
  text-shadow: #FFF 1px 0 10px, 0 0 5px #FFF;
}
.wid10 ul{padding: 0;}
.wid10 li{list-style: none; width: 50%; float: left;}
.wid10 p{margin: 0 0 5% 0; font-size: 0.6em;}

.navigation{margin: 5%;}

/************************************/
/** Contact Form Parts ***********************
************************************/
.Form {
  margin-top: 80px;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}
@media screen and (max-width: 480px) {.Form { margin-top: 40px;}}
.Form-Item {
  border-top: 1px solid #ddd;
  width: 100%;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px) {
  .Form-Item {
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 16px;
    padding-bottom: 16px;
    flex-wrap: wrap;
  }
}
.Form-Item:nth-child(10) {border-bottom: 1px solid #ddd;}
.Form-Item-Label {
  width: 100%;
  max-width: 248px;
  font-weight: bold;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label {
    max-width: inherit;
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
.Form-Item-Label.isMsg {margin-top: 8px; margin-bottom: auto;}
@media screen and (max-width: 480px) {.Form-Item-Label.isMsg { margin-top: 0;}}
.Form-Item-Label-Required {
  border-radius: 6px;
  margin-right: 8px;
  padding: 5px;
  width: 40px;
  display: inline-block;
  text-align: center;
  background: #5bc8ac;
  color: #fff;
  font-size: 10px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Label-Required {
    border-radius: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    width: 32px;
    font-size: 10px;
  }
}
.Form-Item-Input {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 2%;
  padding-left: 1em;
  padding-right: 1em;
  height: 40px;
  flex: 1;
  width: 90%;
  max-width: 410px;
  background: #eaedf2;
  font-size: 14px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Input {
    margin-left: 0;
    margin-top: 18px;
    height: 40px;
    flex: inherit;
    font-size: 14px;
  }
}
.Form-Item-Textarea {
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-left: 20px;
  padding-left: 1em;
  padding-right: 1em;
  height: 216px;
  flex: 1;
  width: 100%;
  max-width: 430px;
  background: #eaedf2;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Item-Textarea {
    margin-top: 18px;
    margin-left: 0;
    height: 200px;
    flex: inherit;
    font-size: 15px;
  }
}
.Form-Btn {
  border-radius: 6px;
  margin: 32px auto 0 auto;
  padding: 0 0 20px 0;
  width: 280px;
  display: block;
  letter-spacing: 0.05em;
  background: #5bc8ac;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
@media screen and (max-width: 480px) {
  .Form-Btn {
    margin-top: 24px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 160px;
    font-size: 16px;
  }
  .Form-Item P{margin: 0;}
}


/** PC SHORT screen ***********************
************************************/
@media screen and (max-width: 1280px) {

}



/** TABLET screen ***********************
************************************/
@media screen and (max-width: 820px) {

}
@media screen and (min-width: 820px) {

}
/** SP screen ***********************
************************************/
@media screen and (max-width: 480px) {
  /************/
  
}