@charset "utf-8";
/* CSS Document */

/* brand-color 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.kbm-blue1{color:#00a0ea;}
.kbm-blue2{color:#023d58;}
.kbm-yellow1{color:#ffbd49;}
.kbm-yellow2{color:#ffbd49;}
.k-back{background:#00a0ea; color:#fff}

.kbm-blue-back1{color:#00a0ea;}
.kbm-blue-back2{color:#023d58;}
.kbm-yellow1-back1{color:#ffbd49;}

/* font 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.fb{font-weight:bold;}

.fs12{font-size:12px; font-size:1.2rem;}
.fs14{font-size:14px; font-size:1.4rem;}
.fs16{font-size:16px; font-size:1.6rem;}

@media (max-width:767px){
.fs18{font-size:16px; font-size:1.6rem;}
.fs20{font-size:18px; font-size:1.8rem;}
.fs22{font-size:18px; font-size:1.8rem;}
.fs24{font-size:20px; font-size:2.0rem;}
.fs26{font-size:20px; font-size:2.0rem;}
.fs28{font-size:22px; font-size:2.2rem;}
.fs30{font-size:24px; font-size:2.4rem;}
.fs32{font-size:26px; font-size:2.6rem;}
}

@media (min-width:768px){
.fs18{font-size:18px; font-size: calc(1.6rem + ((1vw - 0.768rem) * 0.1736));}/* 16px~18pxで可変*/
.fs20{font-size:20px; font-size: calc(1.8rem + ((1vw - 0.768rem) * 0.1736));}/* 18px~20pxで可変*/
.fs22{font-size:22px; font-size: calc(1.8rem + ((1vw - 0.768rem) * 0.3472));}/* 18px~22pxで可変*/
.fs24{font-size:24px; font-size: calc(2rem + ((1vw - 0.768rem) * 0.3472));}/* 20px~24pxで可変*/
.fs26{font-size:26px; font-size: calc(2rem + ((1vw - 0.768rem) * 0.5208));}/* 20px~26pxで可変*/
.fs28{font-size:28px; font-size: calc(2.2rem + ((1vw - 0.768rem) * 0.5208));}/* 22px~28pxで可変*/
.fs30{font-size:30px; font-size: calc(2.4rem + ((1vw - 0.768rem) * 0.5208));}/* 24px~30pxで可変*/
.fs32{font-size:32px; font-size: calc(2.6rem + ((1vw - 0.768rem) * 0.5208));}/* 26px~32pxで可変*/
}

@media (min-width:1920px) {
.fs18{font-size:18px; font-size:1.8rem;}
.fs20{font-size:20px; font-size:2.0rem;}
.fs22{font-size:22px; font-size:2.2rem;}
.fs24{font-size:24px; font-size:2.4rem;}
.fs26{font-size:26px; font-size:2.6rem;}
.fs28{font-size:28px; font-size:2.8rem;}
.fs30{font-size:30px; font-size:3.0rem;}
.fs32{font-size:32px; font-size:3.2rem;}
}

.ls2{letter-spacing:2px;}
.ls3{letter-spacing:3px;}
.ls5{letter-spacing:5px;}
.ls10{letter-spacing:10px;}

.lh100{line-height:100%;}
.lh110{line-height:110%;}
.lh120{line-height:120%;}
.lh130{line-height:130%;}
.lh140{line-height:140%;}
.lh150{line-height:150%;}
.lh160{line-height:160%;}
.lh170{line-height:170%;}
.lh180{line-height:180%;}
.lh190{line-height:190%;}
.lh200{line-height:200%;}

/* margin 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.mt-6{margin-top:60px;}
.mb-10{margin-bottom:100px;}
.pb-10{padding-bottom:100px;}

/* midashi 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.title-1 {
    font-size:26px;/* IE8以下とAndroid4.3以下用フォールバック */
	font-size: calc(1.6rem + ((1vw - 0.01rem) * 0.5236));/* 16px~26pxで可変*/
}

.midashi-fs32{
    font-size:32px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2.0rem + ((1vw - 0.01rem) * 0.6283));/* 20px~32pxで可変*/
}

.title-2 {
    font-size: 24px;/* IE8以下とAndroid4.3以下用フォールバック */
    font-size: calc(2rem + ((1vw - 0.01rem) * 0.2094));/* 20px~24pxで可変*/
}

.midashi-img{
	height:40px; padding:0 5px 10px 5px;
}
.midashi-mark{
	height:24px; padding:0 5px 5px 0;
}

.headline1 {
  border-bottom: solid 3px skyblue;
  position: relative;
  line-height:200%;
}

.headline1:after {
  position:absolute;
  content: " ";
  display: block;
  border-bottom: solid 3px #ffc778;
  bottom: -2.5px;
  width: 25%;
}

.headline2 {
  border-bottom:dotted 1px #333;
  position: relative;
  padding-bottom:10px;
  margin-bottom:10px;
}

@media (max-width:767px){
.mark2{height:20px; height:2.0rem; padding:0 5px 5px 0;}
}

@media (min-width:768px){
.mark2{height:24px; height: calc(2rem + ((1vw - 0.768rem) * 0.3472)); padding:0 5px 5px 0;}/* 20px~24pxで可変*/
}

@media (min-width:1920px) {
.mark2{height:24px; height:2.4rem; padding:0 5px 5px 0;}
}

@media (max-width:767px){
.mark2-32{height:26px; height:2.6rem; padding:0 5px 5px 0;}
}

@media (min-width:768px){
.mark2-32{height:32px; height:calc(2.6rem + ((1vw - 0.768rem) * 0.5208));}/* 26px~30pxで可変*/
}

@media (min-width:1920px) {
.mark2-32{height:32px; height:3.2rem; padding:0 5px 5px 0;}
}



@media (min-width: 1200px) {/* 1200px以上*/

.midashi-img{
	height:40px; padding:0 5px 10px 5px;
	}
.midashi-mark{
	height:24px; padding:0 5px 5px 0;
}
}

@media screen and (max-width: 640px) {/* 640px以下*/
.midashi-img{
	height:34px; padding:0 5px 10px 5px;
	}
.midashi-mark{
	height:22px; padding:0 5px 5px 0;
}
}

.midashi-mark2{
	position:absolute;
	z-index:10;
}
.mop{
	height:50px; padding:0; margin:0;
}
@media screen and (max-width: 769px) {
.mop{
	height:35px; padding:0; margin:0;
}
}
.mop2{
	height:20px; padding:0; margin:0;
}

.bbc1s{border-bottom:1px #CCCCCC solid;}

/* other 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.back-wrap {
  overflow: hidden;
}
.back-carb {
  background:#fff;
  border-bottom-left-radius: 1000px 200px;
  border-bottom-right-radius: 1000px 200px;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
}

.pb-3px{padding-bottom:3px;}
.w-line{border:5px solid #fff;}

.balloon2-top {
  position: relative;
  display: inline-block;
  margin:1em 0;
  padding: 20px;
  min-width: auto;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #ffbd49;
  box-sizing: border-box;
  border-radius:10px;
}

.balloon2-top:before {
  content: "";
  position: absolute;
  top: -23px;
  left: 50%;
  margin-left: -15px;
  border: 11px solid transparent;
  border-bottom: 12px solid #FFF;
  z-index: 2;
}

.balloon2-top:after {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -17px;
  border: 14px solid transparent;
  border-bottom: 14px solid #ffbd49;
  z-index: 1;
}

.balloon2-top p {
  margin: 0;
  padding: 0;
}

.seksl{
	color:#FFF;
	text-align:center;
	font-size:12px;}

.white-box{margin:15px 15px 5px 15px;}

.sti{
	font-size:12px;
	padding:10px 0 0px 0;
	margin:0px;
	color:#CCC;
	text-align:left;
	}

.sr{
	max-width:100%;
	padding:15px 15px 0 15px;
	box-sizing:border-box;
	display:block;
	background:#fff;
	border-radius:10px 10px 0 0;
}

.sr2{
	max-width:100%;
	padding:15px;
	box-sizing:border-box;
	display:block;
	background:#fdf0eb;
	border-radius:0 0 10px 10px;
}

.sr3{
	max-width:100%;
	margin:0px;
	padding:15px 15px 0 15px;
	box-sizing:border-box;
	display:block;
	background:#fff;
	border-radius:10px 10px 0 0;
}

.stih3{
	font-weight:bold;
	text-align:left;
	padding:25px 0 10px 0;
	margin-bottom:5px;
	color:#333;
	}

.stih4{
	font-weight:bold;
	text-align:left;
	padding:10px 0 10px 0;
	margin-bottom:5px;
	color:#333;
	}

.stip{
	padding:0px 0 20px 0;
	margin:0px;
	color:#333;
	text-align:left;
	}

.sse{
	font-size:12px;
	color:#ccc;
}

.bg-scroll-sm {
  height: 350px;
  overflow-y: scroll;
  margin-bottom:10px;
  border:1px #CCCCCC solid;
  border-radius:4px;
}

.imgp{
	margin:0 auto;
	margin-bottom:10px;
	text-align:center;}

.inb{
	color:#FFF;
	padding:0px;
	line-height:157%;
	text-align:left;}

.slider a:hover{
	background-color:#00a0ea;
	text-decoration:none;}


/* first-view 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.kv{
  height: 60vh;
  width:100%;
  top:155px;
  display: flex;
  justify-content: center;
  align-items: center;
  position:absolute;
}

.kv .main-logo{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.kv .main-copy{
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.kv .sub-copy{
  color: #fff;
  font-size: 16px;
  text-align: center;
}

/* video 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.video{
  width: 100%;
  height: 60vh;
  background: url("../img/contact-back.jpg") no-repeat center/cover;
  position:relative;
  top:0;
  left: 0;
  overflow: hidden;
  z-index: -1;
  border-bottom:#ffbd49 solid 5px;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(17,17,17,0.00);
  background-image: radial-gradient(#fff 30%, transparent 31%), radial-gradient(#fff 30%, transparent 31%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  /* kv */
  .kv{
    min-width: 960px;
  }

  .kv .main-copy{
    font-size: 26px;
  }

  .kv .sub-copy{
    font-size:18px;
  }

  .video{
    min-width: 960px;
  }
}

@media screen and (max-width: 769px) {
.kv{
  height: 100dvh;
  width:100%;
  top:0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
}
	
.video{
  width: 100%;
  height: 100dvh;
  background: url(../img/kv-alternative.jpg) no-repeat center/cover;
  position:relative;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}
}

/* ソート機能 
–––––––––––––––––––––––––––––––––––––––––––––––––– */

h4 {
	font-size: 21px;
	border-radius: 5px;
	margin: 0 auto;
	text-align: center;
	color: white;
	font-weight: 700;
	padding: 3px 0;
	padding-bottom:20px;
	color:#333;
}

.courses li {
	margin: 0;
}

.courses a {
	font-size: 16px;
	text-decoration: none;
}

.courses span {
	display: block;
	font-size: .75em;
	font-style: italic;
	position: relative;
	top: 5px;
}

.multi {
	display: inline;
	top: 0;
	left: 3px;
}

.programs,
.courses {
	margin:0;
}

.programs {
	font-size: 0;
	margin-bottom: 15px;
}

.programs button {
	outline: none;
	margin-bottom: 0;
	background:#0480b9;
	width: 49.75%;
	height: auto;
	font-weight: normal;
	border: 1px solid #ededed;
	color: #fff;
	font-size: 14px;
	padding: 4px 0;
	text-shadow: 0px 0px 0px #2f6627;
}

.programs button:last-child{
	outline: none;
	margin-bottom: 0;
	background:#0480b9;
	width:100%;
	height: auto;
	font-weight: normal;
	border: 1px solid #ededed;
	color: #fff;
	font-size: 14px;
	padding: 4px 0;
	text-shadow: 0px 0px 0px #2f6627;
	}

.programs button:hover {
	background: #023d58;
}

.programs button.programs-filter-btn-active,
.programs button.programs-toggle-btn-active,
.programs button.programs-sort-btn-active {
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
	background: #023d58;
	color:#fff;
}

.programs2 {
	font-size: 0;
	margin-bottom: 15px;
}

.programs2 button {
	outline: none;
	margin-bottom: 0;
	background:none;
	width:auto;
	height: auto;
	font-weight: normal;
	border: 1px solid #ccc;
	color: #333;
	font-size: 12px;
	padding:5px 10px 5px 10px;
	letter-spacing:2px;	
}

.programs2 button:hover {
	background: #6a92ce;
	color:#fff;
}

.programs2 button.programs2-filter-btn-active,
.programs2 button.programs2-toggle-btn-active,
.programs2 button.programs2-sort-btn-active {
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
	background: #3a9fbf;
	color: white;
}

ul.courses {
	margin-bottom: 30px;
	margin-left:0;
	padding-left:0;
	font-size: 0;
}

ul.courses li {
	text-align:left;
	font-size:14px;
	display:inline-block;
	vertical-align:top;
	letter-spacing:2px;
}

.works-box{
	margin-bottom:30px;
	top;0;
}

.courses a {
	display: block;
	height:auto;
	margin-top:30px;
	padding-top:0px;
	background: whitesmoke;
	color: black;
	border: 1px solid white;
	transition: all .4s ease;
}

.courses a:hover {
	background: #99cfe0;
}

.style-p{padding-top:10px; margin:0; font-size:14px; text-align:center;}

.picbox {/*親div*/
  position: relative;/*相対配置*/
  }

span.t-seisou{border:1px solid #fee9c4; font-style:normal; font-size:10px; color:#fee9c4; padding:5px 5px 5px 5px; margin:5px 0 5px 10px; line-height:100%;}
.w-time{padding:0px 0px 0px 0; margin:0; font-size:10px; text-align:right; color:#fff; line-height:100%; position:absolute; right:10px;}

.w-title{padding:10px 0 5px 10px; margin:0; font-size:14px; font-weight:bold; text-align:left; color:#333; border-bottom:1px dotted #ccc;}
.b-line{position:absolute; bottom:0; width:100%; background-color:rgba(4,128,185,0.70); padding:0; margin:0;}
.w-lead{padding:5px 10px 10px 10px; margin:0; font-size:12px; text-align:left; line-height:150%; color:#666; letter-spacing:1.5px;}

.box{background:#fff;}

.p, .p a {
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: center;
}


/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

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

	.courses a {
		background: #EBEBEB;
		border: none;
	}

	.programs {
		margin-bottom: 0;
	}

	.programs button {
		width: 19.8%;
		margin-bottom: 15px;
	}

    .programs button:last-child{
		width: 20%;
		margin-bottom:15px;
	}

}

/* ソート機能 ここまで */

 /* ソート機能
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.maxwidth{max-width:1170px;}

.heback1 {
  background-color:#fff;
  width:100%;
  text-align: left;
  margin: 0 auto;
}

.site-header {
  background-color:#fff;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  padding: 5px;
  position:relative;
  transition: padding.5s, background-color.5s; /* 背景色と高さをじんわり変更 */
  width: 100%;
  z-index:100;
}
/* ファーストビューを過ぎたあとのヘッダー */
.site-header.transform {
  background-color:#f5f5f5;
  padding:5px; /* 高さ変更 */
}

@media (max-width:1004px) {
.site-header {
  background-color: rgba(255,255,255,.0);
  padding:0px 0;
  position:fixed;
}
/* ファーストビューを過ぎたあとのヘッダー */
.site-header.transform {
  background-color: rgba(255,255,255,.8); /* 背景色変更 */
  padding-bottom:20px; /* 高さ変更 */
}
}

.right-bar {
	color:#333;
	float:right;
	padding:25px 0 0 0;
	margin:0;
}

@media (max-width:1004px) {
.right-bar {
	color:#333;
	float:right;
	padding:25px 0 0 0;
	margin:0;
}
}

.navbar-toggler {
    border-color: rgba(0,0,0,0);
}

.banzai{font-size:30px;}
.day{font-size:12px; color:#666; letter-spacing:2px; padding:0; margin:0;}
.border-dot{border-bottom:1px dotted #ccc;}

.works-sub {
  position: relative;
  padding: 1.5rem 2rem;
  margin-bottom:20px;
  color: #fff;
  border-radius: 10px;
  background: #ffbd49;
}

.works-sub:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #ffbd49 transparent transparent transparent;
}

.works-sub2 {
  position: relative;
  padding: 1.5rem 2rem;
  margin-bottom:20px;
  color: #fff;
  border-radius: 10px;
  background: #0480b9;
}

.works-sub2:after {
  position: absolute;
  bottom: -9px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #0480b9 transparent transparent transparent;
}

.faq {
    background: #f5f5f5;
    padding:10px;
    margin-bottom:10px;
	text-align:left;
}

.faq-subtitle {
  font-size:24px;
}

.faq-header {
  background-color:none;
  font-size:16px;
}

.faq-header h4{text-align:left; padding:0px 10px 10px 15px; margin:0;}

.faq-header a{
  color: #333333;
  background-color:none;
  text-decoration: none;
  font-size:16px;
}

.faq-header a:hover{
  color: #666;
  background-color:none;
  text-decoration: none;
}

.faq-footer {
  text-align:center;
}

.faq {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: none;
  background-clip: border-box;
  border-radius:none;
}

.faq-body {
    font-size: 14px;
    color: #333;
    border: 1px #ccc solid;
	background:#fff;
    padding: 15px;
    margin:10px;
}

.maru-waku3{width:100%; background: #fff; font-size: 16px; color: #333; padding:30px; border-radius:15px; border:#c6d4d9 double 4px;}
.maru-waku3 span{margin:0 10px 0 0; padding:0; border-left: 3px solid #336699;}

h3.flow-title{font-size:22px; font-weight:bold; padding-bottom:5px; line-height:130%; text-align:left; color:#023d58; letter-spacing:2px;}

.flow-number{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 3%;
  flex-flow: column; 
  vertical-align: top;
  background-color:#023d58;
  height:32px;
  width:32px;
  color:#fff;
}

p.flow-p{font-size:16px; padding:0; margin:0; text-align:left;}
p.price{font-size:16px; padding:0 0 10px 0; margin:0 0 10px 0; border-bottom:1px dotted #333; text-align: center;}

.flow-arrow{font-size:32px;}

.portfolio-item img{width:70%;}
@media (max-width: 980px) {
.portfolio-item img{width:60%;}
}

.underline-y{background:linear-gradient(transparent 60%, #ff6 60%);}

ol.service{
  color:#333;
  counter-reset: count 0;
  line-height:170%;
}

ol.service li.service2{
 font-size:14px;
}

ol.service {
  counter-reset: my-counter;
  list-style:disc;
  padding-left:15px;
  margin: 0;
}
li.service2 {
  font-size: 14px;
  line-height:180%;
  padding-left:0px;
  position: relative;
}
li.service2:before {
  background-color: #fff;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18px;
  width: 18px;
  color: #333;
  font-size: 70%;
  line-height:180%;
  position: absolute;
  top:3px;
  left: 0;
}

.reason {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  border: 2px solid #023d58;
  background: #fff;
}

.reason:before,
.reason:after {
  position: absolute;
  content: '';
}

.reason:before {
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 80px;
  border: 2px solid #023d58;
  border-radius: 50%;
  background: #fff;
}

.reason:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
}

.reason i {
  font-size: 30px;
  font-size: 3rem;
  color:#ffbd49;
  line-height: 60px;
  position: absolute;
  z-index: 1;
  top: -40px;
  left: calc(50% - 40px);
  width: 80px;
  height: 60px;
  text-align: center;
}

.reason span {
  position: relative;
  z-index: 1;
}

.waku-border{border:3px double #ccc; padding:15px 15px 0 15px; margin-bottom:20px;}
.waku-beta{background:#fff; padding:15px; margin-bottom:20px;}

.srex{
	max-width:100%;
	margin:15px 15px 5px 15px;
	box-sizing:border-box;
	display:block;}


.stiex{
	font-size:12px;
	padding:10px 0 0px 0;
	margin:0px;
	color:#CCC;
	text-align:left;
	}

.stiex2{
	font-size:14px;
	text-align:left;
	padding:0px 0 5px 0;
	margin-bottom:5px;
	color:#FFF;
	}