/*

Theme Name: neotec

Theme URI:

Description:

Version: 1

Author: 2st planning Inc.

Author URI:

*/





/*------------ モーダルウィンドウ -----------*/

.md-btn {

  margin-top: 10px;

}

.md-btn_a {

  background: #f7f7f7;

  display: inline-flex;

  padding: 2px 22px;

  color: #575757;

  font-weight: bold;

  border-radius: 4px;

  border: solid 1px #575757;

}

.md-btn_a:hover {

  background: #000;

  color: #fff;

}

.modal-wrapper {

  z-index: 999;

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  padding: 40px 10px;

  text-align: center

}

.modal-wrapper:not(:target) {

  opacity: 0;

  visibility: hidden;

  transition: opacity .3s, visibility .3s;

}

.modal-wrapper:target {

  opacity: 1;

  visibility: visible;

  transition: opacity .4s, visibility .4s;

}

.modal-wrapper::after {

  display: inline-block;

  height: 100%;

  margin-left: -.05em;

  vertical-align: middle;

  content: ""

}

.modal-wrapper .modal-window {

  box-sizing: border-box;

  display: inline-block;

  z-index: 20;

  position: relative;

  width: 80%;

  padding: 30px 30px 15px;

  border-radius: 2px;

  background: #fff;

  box-shadow: 0 0 30px rgba(0, 0, 0, .6);

  vertical-align: middle

}

.modal-wrapper .modal-window .modal-content {

  max-height: 80vh;

  overflow-y: auto;

  text-align: left

}

.modal-overlay {

  z-index: 10;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  background: rgba(0, 0, 0, .8)

}

.modal-wrapper .modal-close {

  z-index: 20;

  position: absolute;

  top: 0;

  right: 0;

  width: 35px;

  color: #95979c !important;

  font-size: 20px;

  font-weight: 700;

  line-height: 35px;

  text-align: center;

  text-decoration: none;

  text-indent: 0

}

.modal-wrapper .modal-close:hover {

  color: #2b2e38 !important

}

/*------------------ Slick Slider ------------------*/

.slider {

  width: 94%;

  margin: 30px auto;

}

.slider img {

  height: auto;

  width: 100%;

}

/*slick setting*/

.slick-prev:before,

.slick-next:before {

    color: #575757 !important;

}

.slick-prev:before {

  content: '◀' !important;

}

.slick-next:before {

  content: '▶' !important;

}

/*------------------ ステップ（お問い合わせ）------------------*/

.stepBar {

  display: flex;

  max-width: 80%;

  position: relative;

  margin: 20px auto;

  text-align: center;

}

.stepBar li {

  font-size: 12px;

  list-style: none;

  position: relative;

  width: 33.333%;

}

.stepBar li:after {

  background: #e0e0e0;

  content: "";

  width: calc(100% - 24px);

  height: 4px;

  position: absolute;

  left: calc(-50% + 12px);

  top: 10px;

}

.stepBar li:first-child:after {

  display: none;

}

.stepBar li span {

  background: #e0e0e0;

  color: #ffffff;

  display: inline-block;

  height: 24px;

  margin-bottom: 5px;

  line-height: 24px;

  width: 24px;

  -moz-border-radius: 50%;

  -webkit-border-radius: 50%;

  border-radius: 50%;

}

.stepBar .visited:after {

  background: #e0e0e0;

}

.stepBar .visited span {

  background: #000;

  font-weight: bold;

  font-size: 14px;

}





/*-----------------------------------------------

トップページ各コンテンツ

-----------------------------------------------*/

/*------------------ スクロール誘導 ------------------*/

.scroll {

  padding-top: 150px;

}

.scroll a {

  position: absolute;

  bottom: 0;

  left: 46%;

  z-index: 2;

  display: inline-block;

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  text-decoration: none;

  padding-top: 60px;

  text-align: center;

  right: 48%;

  color: #fff;

  text-align: center;

  margin: 0 auto;

}

.scroll a span {

  position: absolute;

  top: 0;

  left: 50%;

  width: 30px;

  height: 50px;

  margin-left: -15px;

  border: 2px solid #fff;

  border-radius: 50px;

  box-sizing: border-box;

}

.scroll a span::before {

  position: absolute;

  top: 10px;

  left: 50%;

  content: '';

  width: 6px;

  height: 6px;

  margin-left: -3px;

  background-color: #fff;

  border-radius: 100%;

  -webkit-animation: sdb 2s infinite;

  animation: sdb 2s infinite;

  box-sizing: border-box;

}

@-webkit-keyframes sdb {

  0% {

    -webkit-transform: translate(0, 0);

    opacity: 0;

  }

  40% {

    opacity: 1;

  }

  80% {

    -webkit-transform: translate(0, 20px);

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@keyframes sdb {

  0% {

    transform: translate(0, 0);

    opacity: 0;

  }

  40% {

    opacity: 1;

  }

  80% {

    transform: translate(0, 20px);

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

/*------------------ 沿革のステップ------------------*/

.com-history {

  

}

.com-history .flow {

  position: relative;

}

.com-history .flow::before {

  content: "";

  width: 15px;

  height: 100%;

  background: #dee2e6;

  margin-left: -8px;

  display: block;

  position: absolute;

  top: 0;

  left: 50%;

}

.com-history .flow > li {

  position: relative;

}

.com-history .flow > li:not(:last-child) {

  margin-bottom: 36px;

}

.com-history .flow .com-right dl {

  padding-left: 50%;

  position: relative;

}

.com-history .flow .com-left dl {

  padding-right: 50%;

  position: relative;

  text-align: right;

}

.com-history .flow > li dl::before,

.com-history .flow > li dl::after {

  content: "";

  display: block;

  position: absolute;

  top: 15px;

}

.com-history .flow > li dl::before {

  width: 7px;

  height: 7px;

  margin-top: -3px;

  background: #6b90db;

  border-radius: 50%;

  left: 49.7%;

}

.com-history .flow .com-right dl::after {

  width: 50px;

  border-bottom: 1px dashed #999;

  position: absolute;

  left: 50%;

}

.com-history .flow .com-left dl::after {

  width: 50px;

  border-bottom: 1px dashed #999;

  position: absolute;

  right: 50%;

}

.com-history .flow .com-right dl dt {

  font-size: 20px;

  font-weight: 600;

  color: rgb(107,144,219);

  margin-bottom: 1vh;

  margin-left: 60px;

}

.com-history .flow .com-right dl dd {

  margin-left: 60px;

}

.com-history .flow .com-left dl dt {

  font-size: 20px;

  font-weight: 600;

  color: rgb(107,144,219);

  margin-bottom: 1vh;

  margin-right: 60px;

}

.com-history .flow .com-left dl dd {

  margin-right: 60px;

}

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

  .com-history .flow::before {

    left: 3%;

  }

  .com-history .flow .com-right dl {

    padding-left: 0%;

  }

  .com-history .flow > li dl::before {

    left: 1.7%;

  }

  .com-history .flow .com-right dl::after {

    left: 3%;

  }

  .com-history .flow .com-left dl {

    padding-right: 0;

    text-align: left;

  }

  .com-history .flow .com-left dl::after {

    right: 83%;

  }

  .com-history .flow .com-left dl dt {

    margin-right: unset;

    margin-left: 60px;

  }

  .com-history .flow .com-left dl dd {

    margin-right: unset;

    margin-left: 60px;

  }

}

/*-----------------------------------------------

お問い合わせフォーム

-----------------------------------------------*/

.cform tr {

  

}

.cform th {

	font-size: 14px;

	width: 20%; /*変なところで改行される場合はここの数字を変更します。*/

	border: solid 1px #d6d6d6;

	padding: 10px 0 10px 15px;

	font-weight: normal;

  background: #e9ecef;

}

.cform td {

	font-size: 14px;

	line-height: 150%;

	border: solid 1px #d6d6d6;

	padding: 10px 5px;

  background: #f8f9fa;

}

.cform {

	width: 100%;

	margin: auto;

}

.cform [type=submit] {

	display: inline-block;

	font-size: 20px;

	padding: 10px 30px;

	text-decoration: none;

	background: #ff8f00;

	color: #FFF;

	border-bottom: solid 4px #B17C00;

	border-radius: 3px;

}

.cform option,

.cform textarea,

.cform input[type=text],

.cform input[type=email],

.cform input[type=search],

.cform input[type=url] {

	width: 100%;

}

.required-srt {

	font-size: 8pt;

	padding: 5px;

	background: #ce0000;

	color: #fff;

	border-radius: 3px;

	margin-left: 0;

	vertical-align: middle;

}

.required-srt2 {

	font-size: 8pt;

	padding: 5px;

	background: #adb5bd;

	color: #fff;

	border-radius: 3px;

	margin-left: 0;

	vertical-align: middle;

}

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

	.cform th,

	.cform td {

		width: 100%;

		display: block;

		border-top: none;

	}

}

.submit-btn input {

	background: #00142c;

	width: 60%;

	max-width: 550px;

	min-width: 220px;

	margin: 30px auto;

	display: block;

	border: 1px #00142c solid;

	text-align: center;

	padding: 5px;

	color: #fff;

	transition: all 0.4s ease;

}

.submit-btn input:hover {

	background: #fff;

	color: #00142c;

}





/*------------------ セクション ------------------*/

.cta {

  padding-top: 60px;

  padding-bottom: 120px;

  background: linear-gradient( 135deg, #d4f9ff, #e9ecef, #a4d0ff);

}

.voice {

  margin-top: 40px;

  margin-bottom: 120px;

}



/*------------------ firstセクション ------------------*/

.first2{

  width: 100%;

  height: auto;

  background: url(../img/index/lp-bg.jpg) no-repeat center/cover;

  overflow: hidden;

  z-index: -1;

  padding-top: 180px;

    padding-bottom: 220px;

}

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

  .first2{

    min-width: 768px;

  }

}

.first2 .intro2 {

  

}

.first2 .intro2 h2 {

  font-size: 66px;

  line-height: 80px;

  font-weight: bold;

  display: inline-block;

  padding: 4px 20px;

  color: #f8f9fa;

  letter-spacing: 8px;

  margin-bottom: 6px;

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  text-shadow: 2px 2px 8px rgb(0 0 0 / 50%);

}

.first2 .intro2 h2 span {

  font-size: 38px;

  color: #575757;

  text-shadow: 2px 2px 8px #f8f9fa;

}

.first2 .intro2 p {

  color: #575757;

  font-size: 20px;

  font-weight: bold;

  margin-top: 16px;

  background: #ffffffb5;

  display: inline-block;

  padding: 6px 20px;

}

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

  .first2 .intro2 h2 {

    font-size: 58px;

  }

}

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

  .first2 .intro2 h2 {

    font-size: 34px;

    padding: 4px 12px;

    letter-spacing: 0px;

  }

  .first2 .intro2 h2 span {

    font-size: 26px;

  }

  .header {

    padding: 0;

  }

}



/*------------------ Slick Slider ------------------*/

.slider {

  width: 94%;

  margin: 30px auto;

}

.slider img {

  height: auto;

  width: 100%;

}

/*slick setting*/

.slick-prev:before,

.slick-next:before {

    color: #dee2e6 !important;

}

.slick-prev:before {

  content: '\f104'!important;

  font-family: "Font Awesome 5 Free"!important;

  display: block;

  text-align: center;

  margin-top: 6px;

  font-weight: 900;

}

.slick-next:before {

  content: '\f105'!important;

  font-family: "Font Awesome 5 Free"!important;

  display: block;

  text-align: center;

  margin-top: 6px;

  font-weight: 900;

}

.slider2 {

  width: 100%;

  padding-left: 0;

}

.slider2 li {

  margin: 0 8px;

}

.slider2 img {

  height: auto;

  width: 100%;

}

/*------------------ slide logo ------------------*/

.slide img {

  width: 70%;

  padding: 0 10px;

  padding-top: 20px;

}

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

  .slide img {

    padding: 10px 0;

    width: 80%;

  }

}



/*------------------ secondセクション ------------------*/

.second {

  margin: 60px 0;

  padding-bottom: 40px;

}

/*------------------ 数字カウントアップ ------------------*/

.count-box {

  text-align: center;

  background: linear-gradient( 135deg , #004188ad, #007bffad, #07f4ffad);

  border: solid 6px #fff;

  padding: 12px 16px;

  border-radius: 16px;

}

.count-box p {

  color: #ffe879;

  font-size: 60px;

  font-weight: bold;

  border: solid 4px #fff;

  border-radius: 12px;

  text-shadow: 2px 2px 3px #575757;

}

.count-box p:after {

  content: "%"

}

.count-box span {

  color: #ffe879;

  font-size: 22px;

  font-weight: bold;

  text-shadow: 2px 2px 3px #575757;

}

.count-read {

  text-align: center;

}

.count-read h3 {

  display: inline;

  font-size: 36px;

  font-weight: bold;

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  -webkit-background-clip: text;

  color: transparent;

}

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

  .count-read h3 {

    font-size: 24px;

  }

}



/*------------------ 斜め背景 ------------------*/

.third1 {

  background-color: #e5f1ff;

  -webkit-transform: skew(0deg, -3deg);

  position: relative;

}

.third1-1 {

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  -webkit-transform: skew(0deg,-3deg);

  position: relative;

  height: 6px;

}

.third1-2 {

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  -webkit-transform: skew(0deg,-3deg);

  position: relative;

  height: 6px;

  top: -2px;

}

.cta {

  padding-bottom: calc(14vw + 10px);  

  position: relative;

  overflow: hidden;

  background:linear-gradient( 135deg, #d4f9ff, #e9ecef, #a4d0ff);

  margin-top: 120px;

}

.cta::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  border-bottom: 10vw solid #fff;  /* 三角を白に */ 

  border-left: 100vw solid transparent;

}

.cta::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  border-bottom: 10vw solid #fff;   /* 三角を白に */ 

  border-right: 100vw solid transparent;

}

/*------------------ thirdセクション ------------------*/

.third-subtitle {

  font-size: 18px;

  font-weight: bold;

  margin-bottom: 0;

  color: #6c757d;

}

.third-title {

  font-size: 48px;

  margin: 0;

  margin-bottom: 16px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 2px 2px 6px #adb5bd;

}

.third-text {

  font-size: 18px;

  font-weight: bold;

  border-bottom: solid 2px #5282b5;

  display: inline-block;

  letter-spacing: 3px;

}

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

  .third-title {

    font-size: 31px;

  }

  .third-subtitle {

    font-size: 30px;

  }

  .third-subtitle {

    font-size: 14px;

  }

  .third-text {

    font-size: 16px;

  }

}

/*------------------ forthセクション ------------------*/

.forth {

  margin-bottom: 40px;

}

.forth-title2 {

  text-align: center;

  margin-top: -30px;

}

.forth-title2 h2 {

  font-size: 38px;

  margin: 0;

  margin-bottom: 0;

  font-weight: bold;

  color: #17a2b8;

  text-shadow: 2px 2px 6px #adb5bd;

  margin-top: 30px;

  margin-bottom: 30px;

}

.forth-title2 h2 span {

  font-size: 18px;

  font-weight: bold;

  color: #6c757d;

}

.forth-title22 {

  text-align: left;

  margin-top: -30px;

}

.forth-title22 h2 {

  font-size: 38px;

  margin: 0;

  margin-bottom: 0;

  font-weight: bold;

  color: #17a2b8;

  text-shadow: 2px 2px 6px #adb5bd;

  margin-top: 32px;

}

.forth-title22 h2 span {

  font-size: 18px;

  font-weight: bold;

  color: #6c757d;

}

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

  .forth-title2 h2 {

    font-size: 28px;

  }

  .forth-title22 h2 {

    font-size: 28px;

  }

}

.reason-box {

  height: 300px;

}

.reason-box img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  box-shadow: 0 0 6px #575757;

}

.reason-box img:hover {

  opacity: .6;

}

.reason-card {

  background: #fff;

  width: 90%;

  padding: 10px;

  position: absolute;

  top: 140px;

  left: 50%;

  transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  box-shadow: 0 0px 8px 1px #575757;

  text-align: center;

}

.reason-card:hover {

  background: #e9ecef;

}

.reason-card h3 {

  font-size: 26px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 2px 2px 6px #adb5bd;

  margin-bottom: 30px;

}

.reason-card h3:before {

  content: '';

  position: absolute;

  display: inline-block;

  width: 46px;

  height: 4px;

  left: 50%;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  background-color: #ffe879;

  border-radius: 2px;

  top: 60px;

}

.reason-card p {

  color: #575757;

}

.reason-box2 {

  height: 250px;

}

.reason-box2 img {

  width: 100%;

  height: 140px;

  object-fit: cover;

  box-shadow: 0 0 6px #575757;

}

.reason-box2 img:hover {

  opacity: .6;

}

.reason-card2 {

  background: #fff;

  width: 84%;

  padding: 10px;

  position: absolute;

  top: 90px;

  left: 50%;

  transform: translateX(-50%);

  -webkit-transform: translateX(-50%);

  -ms-transform: translateX(-50%);

  box-shadow: 0 0px 8px 1px #575757;

  text-align: center;

}

.reason-card2:hover {

  background: #e9ecef;

}

.reason-card2 h3 {

  font-size: 26px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 2px 2px 6px #adb5bd;

  margin-bottom: 30px;

}

.reason-card2 h3:before {

  content: '';

  position: absolute;

  display: inline-block;

  width: 46px;

  height: 4px;

  left: 50%;

  -webkit-transform: translateX(-50%);

  transform: translateX(-50%);

  background-color: #ffe879;

  border-radius: 2px;

  top: 60px;

}

.reason-card2 p {

  color: #575757;

}

.forth-point {

  padding: 15px;

  box-shadow: 0 0 8px #adb5bd;

  text-align: center;

}

.forth-point:hover {

  opacity: .6;

}

.forth-point h2 {

  font-size: 26px;

  margin: 0;

  margin-bottom: 16px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 2px 2px 6px #adb5bd;

}

.forth-point h2 span {

  font-size: 18px;

  font-weight: bold;

  color: #6c757d;

}

.forth-point img {

  width: 70%;

}

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

  .forth-point h2 {

    font-size: 22px;

  }

}

.point3-img1 {

  width: 100%!important;

  position: relative;

}

.point3-text1 {

  background: #000000b3;

  color: #fff;

  font-size: 20px;

  font-weight: bold;

  position: absolute;

  top: 50%;

  width: 94.4%;

  margin-bottom: 0;

  padding: 4px 0;

}

.point3-text2 {

  background: linear-gradient( 135deg, #d4f9ff, #e9ecef, #a4d0ff);

  color: #575757;

  font-size: 22px;

  font-weight: bold;

  padding: 12px 4px;

  border-radius: 8px;

  text-shadow: 2px 2px 6px #949494;

}

.point3-text2 span {

  font-size: 28px;

  color: #5282b5;

  margin-right: 4px;

}

.point3-rightbox {

  border: dashed 2px #5483b6;

  border-radius: 8px;

}

.point3-text3 {

  font-size: 20px;

  font-weight: bold;

  margin-top: 16px;

  border-bottom: solid 3px #5483b6;

  display: inline-flex;

  color: #575757;

}

.point3-text4 {

  color: #575757;

}

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

  .point3-text1 {

    font-size: 16px;

    width: 90.4%;

  }

  .point3-text2 {

    font-size: 16px;

  }

  .point3-text2 span {

    font-size: 26px;

  }

}

/*------------------ インタビュー ------------------*/

.voice-title {

  margin: 0 auto;

  text-align: center;

	margin-top: 0px;

}

.voice-title h2 {

  background: linear-gradient( 135deg, #004188ad, #007bffad, #07f4ffad);

  color: #fff;

  font-size: 36px;

  font-weight: bold;

  display: inline-block;

  padding: 60px 30px;

  text-decoration: none;

}

.voice-title h2 span {

  font-size: 26px;

  color: #ffe879;

}

.voice-box {

  box-shadow: 0 0 8px #adb5bd;

  padding: 12px 24px;

  margin-top: 10px;

  margin-bottom: 18px;

}

.voice-box:hover {

  opacity: .6;

}

.voice-box h3 {

  font-size: 22px;

  font-weight: bold;

  border-bottom: dashed 1px #adb5bd;

  text-shadow: 2px 2px 8px #adb5bd;

  color: #17a2b8;

  margin-bottom: 0px;

}

.voice-box img {

  

}

.voice-tag {

  font-size: 14px;

  color: #6c757d;

  text-align: right;

  text-decoration: none;

}

.voice-read {

  font-size: 20px;

  font-weight: bold;

  margin-bottom: 10px;

  color: #5282b5;

  text-decoration: none;

}

.voice-text {

  text-decoration: none;

}

.voice-text p {

  color: #575757;

  text-decoration: none;

}



/*------------------ fifth セクション ------------------*/

.fifth {

  margin-top: 80px;

  margin-bottom: 120px;

}

.flow-box {

  

}

.flow-box h2 {

  font-size: 26px;

  margin: 0;

  margin-bottom: 16px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 2px 2px 8px #adb5bd;

  text-align: center;

  margin-top: 20px;

  margin-bottom: 40px;

}

.flow-box h2 span {

  font-size: 18px;

  font-weight: bold;

  color: #ffe879;

  text-shadow: 0px 1px 6px #575757;

}

.flow-box img {

  width: 100%;

}

.flow-box img:hover {

  opacity: .6;

}

.flow-box p {

  color: #575757;

  margin: 8px 0;

}

.flow-box p:hover {

  opacity: .6;

}



/*------------------ 沿革のステップ------------------*/

.com-history {

  

}

.com-history .flow {

  position: relative;

  padding-left: unset;

}

.com-history .flow::before {

  content: "";

  width: 15px;

  height: 100%;

  background: #dee2e6;

  margin-left: -8px;

  display: block;

  position: absolute;

  top: 0;

  left: 50.3%;

}

.com-history .flow > li {

  position: relative;

  list-style: none;

}

.com-history .flow > li:not(:last-child) {

  margin-bottom: 36px;

}

.com-history .flow .com-right dl {

  padding-left: 50%;

  position: relative;

}

.com-history .flow .com-left dl {

  padding-right: 50%;

  position: relative;

  text-align: right;

}

.com-history .flow > li dl::before,

.com-history .flow > li dl::after {

  content: "";

  display: block;

  position: absolute;

  top: 15px;

}

.com-history .flow > li dl::before {

  width: 7px;

  height: 7px;

  margin-top: -3px;

  background: #6b90db;

  border-radius: 50%;

  left: 49.7%;

}

.com-history .flow .com-right dl::after {

  width: 50px;

  border-bottom: 1px dashed #999;

  position: absolute;

  left: 50%;

}

.com-history .flow .com-left dl::after {

  width: 50px;

  border-bottom: 1px dashed #999;

  position: absolute;

  right: 50%;

}

.com-history .flow .com-right dl dt {

  font-size: 20px;

  font-weight: bold;

  color: #fff;

  margin-bottom: 1vh;

  margin-left: 60px;

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  display: inline-block;

  padding: 2px 12px;

  border-radius: 6px;

}

.com-history .flow .com-right dl dd {

  margin-left: 60px;

}

.com-history .flow .com-left dl dt {

  font-size: 20px;

  font-weight: bold;

  color: #fff;

  margin-bottom: 1vh;

  margin-left: 60px;

  background: linear-gradient(135deg, #004188ad, #007bffad, #07f4ffad);

  display: inline-block;

  padding: 2px 12px;

  border-radius: 6px;

}

.com-history .flow .com-left dl dd {

  margin-right: 60px;

}

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

  .com-history .flow::before {

    left: 3%;

  }

  .com-history .flow .com-right dl {

    padding-left: 0%;

  }

  .com-history .flow > li dl::before {

    left: 1.7%;

  }

  .com-history .flow .com-right dl::after {

    left: 3%;

  }

  .com-history .flow .com-left dl {

    padding-right: 0;

    text-align: left;

  }

  .com-history .flow .com-left dl::after {

    right: 83%;

  }

  .com-history .flow .com-left dl dt {

    margin-right: unset;

    margin-left: 60px;

  }

  .com-history .flow .com-left dl dd {

    margin-right: unset;

    margin-left: 60px;

  }

}

/*------------------ 認定費用・料金 ------------------*/

.price-box1 {

  background: linear-gradient( 135deg, #004188ad, #007bffad, #07f4ffad);

  padding: 20px 40px;

  padding-bottom: 36px;

  position: relative;

  box-shadow: 0 0 8px #8c8c8c;

}

.price-name {

  color: #fff;

  font-size: 18px;

  text-align: center;

  padding-top: 30px;

}

.price-name span {

  

}

.price-main {

  color: #ffe879;

  font-size: 44px;

  font-weight: bold;

  text-align: center;

  border-right: solid 2px #fff;

  border-left: solid 2px #fff;

  line-height: 40px;

  height: 100%;

  padding-top: 5px;

}

.price-main span {

  font-size: 22px;

  color: #fff;

}

.price-text {

  color: #fff;

  font-size: 16px;

  text-shadow: 1px 1px 3px #6c757d;

  padding-top: 8px;

}

.price-text span {

  color: #ffe879;

  font-size: 22px;

  font-weight: bold;

}

.price-box2 {

  text-align: center;

  box-shadow: 0 0 8px #adb5bd;

}

.price-box2 h3 {

  font-size: 20px;

  font-weight: bold;

  color: #ffe879;

  padding: 12px 0;

  margin: 0;

  background: linear-gradient( 135deg, #004188ad, #007bffad, #07f4ffad);

}

.price-box2 p {

  font-size: 24px;

  font-weight: bold;

  color: #dc3545;

  padding: 8px 0;

  margin: 0;

  background: linear-gradient( 135deg, #cacaca, #ffffff, #cacaca);

}

.price-box3 {

  

}

.price-box3 p {

  

}

.menu-box {

  text-align: center;

}

.menu-box p {

  

}

.menu-list {

  display: flex;

  justify-content: center;

}

.menu-listbox {

  width: 360px;

  padding: 12px;

  position: relative;

  padding-bottom: 0;

  background: #f8f9fa;

}

.menu-listbox:hover {

  opacity: .6;

}

.menu-tag {

  font-size: 14px;

  font-weight: bold;

  text-align: right;

  color: #adb5bd;

  margin-bottom: 6px;

}

.menu-listbox img {

  width: 100%;

}

.menu-title {

  font-size: 18px;

  font-weight: bold;

  text-align: center;

  margin-top: 12px;

  margin-bottom: 6px;

  color: #5282b5;

}

.menu-subtitle {

  font-size: 14px;

  font-weight: bold;

  text-align: center;

  color: #adb5bd;

  margin-bottom: 0;

  margin-bottom: -16px;

}

.menu-number {

  font-size: 80px;

  font-weight: bold;

  text-align: center;

  margin-bottom: -26px;

  color: #dedede;

}

.menu-gray {

  background: #f1f1f1;

}

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

  .menu-list {

    display: block;

  }

}





/*------------------ CTA誘導------------------*/

.cta-btn1 {

  

}

.cta-btn1 .container2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.cta-btn1 .btn {

  position: relative;

  display: inline-block;

  width: 277px;

  height: 50px;

  font-size: 1em;

  font-weight: bold;

  line-height: 60px;

  text-align: center;

  text-transform: uppercase;

  background-color: transparent;

  cursor: pointer;

  text-decoration:none;

  font-family: 'Roboto', sans-serif;

  font-weight:900;

  font-size:17px;

  letter-spacing: 0.045em;

}

.cta-btn1 .btn svg {

  position: absolute;

  top: 0;

  left: 0;

}

.cta-btn1 .btn svg rect {

  //stroke: #EC0033;

  stroke-width: 4;

  stroke-dasharray: 353, 0;

  stroke-dashoffset: 0;

  -webkit-transition: all 600ms ease;

  transition: all 600ms ease;

}

.cta-btn1 .btn p{

  background: rgb(255,130,130);

  background: -moz-linear-gradient(left,  rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);

  background: -webkit-linear-gradient(left,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 20px;

  margin-top: -5px;

}

.cta-btn1 .btn:hover svg rect {

  stroke-width: 4;

  stroke-dasharray: 196, 543;

  stroke-dashoffset: 437;

}

.cta-btn2 {

  

}

.cta-btn2 .container2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.cta-btn2 .btn {

  position: relative;

  display: inline-block;

  width: 277px;

  height: 50px;

  font-size: 1em;

  font-weight: bold;

  line-height: 60px;

  text-align: center;

  text-transform: uppercase;

  background-color: transparent;

  cursor: pointer;

  text-decoration:none;

  font-family: 'Roboto', sans-serif;

  font-weight:900;

  font-size:17px;

  letter-spacing: 0.045em;

}

.cta-btn2 .btn svg {

  position: absolute;

  top: 0;

  left: 0;

}

.cta-btn2 .btn svg rect {

  //stroke: #EC0033;

  stroke-width: 4;

  stroke-dasharray: 353, 0;

  stroke-dashoffset: 0;

  -webkit-transition: all 600ms ease;

  transition: all 600ms ease;

}

.cta-btn2 .btn p{

  background: rgb(255,130,130);

  background: -moz-linear-gradient(left,  rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);

  background: -webkit-linear-gradient(left,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 20px;

  margin-top: -5px;

}

.cta-btn2 .btn:hover svg rect {

  stroke-width: 4;

  stroke-dasharray: 196, 543;

  stroke-dashoffset: 437;

}

.cta-btn3 {

  

}

.cta-btn3 .container2 {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

.cta-btn3 .btn {

  position: relative;

  display: inline-block;

  width: 277px;

  height: 50px;

  font-size: 1em;

  font-weight: bold;

  line-height: 60px;

  text-align: center;

  text-transform: uppercase;

  background-color: transparent;

  cursor: pointer;

  text-decoration:none;

  font-family: 'Roboto', sans-serif;

  font-weight:900;

  font-size:17px;

  letter-spacing: 0.045em;

}

.cta-btn3 .btn svg {

  position: absolute;

  top: 0;

  left: 0;

}

.cta-btn3 .btn svg rect {

  //stroke: #EC0033;

  stroke-width: 4;

  stroke-dasharray: 353, 0;

  stroke-dashoffset: 0;

  -webkit-transition: all 600ms ease;

  transition: all 600ms ease;

}

.cta-btn3 .btn p{

  background: rgb(255,130,130);

  background: -moz-linear-gradient(left,  rgba(255,130,130,1) 0%, rgba(225,120,237,1) 100%);

  background: -webkit-linear-gradient(left,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  background: linear-gradient(to right,  rgba(255,130,130,1) 0%,rgba(225,120,237,1) 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed',GradientType=1 );

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  font-size: 20px;

  margin-top: -5px;

}

.cta-btn3 .btn:hover svg rect {

  stroke-width: 4;

  stroke-dasharray: 196, 543;

  stroke-dashoffset: 437;

}

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

  .cta-btn1 .container2 {

    top: 20px;

  }

  .cta-btn2 .container2 {

    top: 80px;

  }

  .cta-btn3 .container2 {

    top: 140px;

  }

  .cta {

    padding-bottom: 280px;

  }

}



.cta h3 {

  text-align: center;

  font-size: 30px;

  font-weight: bold;

  color: #17a2b8;

  text-shadow: 0 2px 6px #adb5bd;

}

.cta .cta-text {

  text-align: center;

  margin-bottom: 30px;

  font-size: 20px;

  font-weight: bold;

  color: #5282b5;

  text-shadow: 0 2px 6px #dee2e6;

}