@charset "UTF-8";
/* CSS Document */
/*googlefont*/
@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');/*slider 筆記体太文字*/
@import url('https://fonts.googleapis.com/css2?family=Domine&display=swap');/*ロゴ*/
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;400&display=swap');/*タイトル*/
/*--------------------
使用カラー
-----------------------*/
.bg-head {
	background:linear-gradient(-180deg,#66bcd5,#d5e7eb,#dee9eb);
}
/*ブルー: #6DC1FF*/
.tex-blue{color:#3BABFD !important;}
.tex-black{color:#000 !important;}
.tex-dark-blue{color:#224B8B !important;}
/*--------------------
個別設定
-----------------------*/
.card-hover:hover,card-active:hover{background-color:rgba(139,19,56,0.8);}
.card-active{background-color:rgba(139,19,56,0.6) !important;}
.twitter-timeline{
	background-color:rgba(255,255,255,0.4) !important;
	padding:3em !important;
	margin:3em 0 !important;
}
.link-wide{color:#000;}
.link-wide:hover{
	color:#999;
	letter-spacing:0.2em;
}
.dot-line{
	border:1px dashed rgba(0,0,0,0.15);
	width:80%;
	margin:0 auto;
}
/*--------------------
ボタン設定
-----------------------*/
.main-btn{
	background-color: #224B8B !important;
	color: #fff !important;
}
.main-btn:hover {
  border: 1px solid #224B8B;
  background-color:#fff !important;
  color: #224B8B !important;
}
.sub-btn{
	background-color: #8B1338 !important;
	color: #fff !important;
}
.sub-btn:hover {
  border: 1px solid #8B1338;
  background-color:#fff !important;
  color: #8B1338 !important;
}
/*--------------------
フォント
-----------------------*/
.font-satisry{font-family: 'Satisfy', cursive;}/*筆記体・太字・英数字*/
.font-mont{font-family: 'Montserrat', sans-serif;}
.font-domine{font-family: 'Domine', serif;}
.tex-red{color:#8B1338;}
.font-ral{font-family: 'Raleway', sans-serif;}
/*--------------------
見出しの設定
-----------------------*/
.heading-main{/*見出しの下に短いボーダー*/
	font-weight:700;
	position: relative;
	display: inline-block;
	margin-bottom: 0.6em;
}
.heading-main:before {
	content: '';
	position: absolute;
	bottom: -12px;
	display: inline-block;
	width: 150px;
	height: 1px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #6DC1FF;
	border-radius: 2px;
}
.heading-main-white{/*見出しの下に短いボーダー*/
	font-weight:700;
	position: relative;
	display: inline-block;
	margin-bottom: 0.6em;
}
.headding-main-white:before {
	content: '';
	position: absolute;
	bottom: -12px;
	display: inline-block;
	width: 80px;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #fff;
	border-radius: 2px;
}
/*——　文字の右にライン　——*/
.title-border-right {
display: flex;
align-items: center;
}
.title-border-right:after {
border-top: 1px solid;
content: "";
flex-grow: 1;
}
.title-border-right:after {
margin-left: 1rem;
}
/*左側に縦ライン*/
.left-line {
  padding: 0.1em 0.5em;/*上下 左右の余白*/
  color: #494949;
  background: transparent;
  border-left: solid 5px #71BEEA;
}
/*--------------------
背景設定
-----------------------*/
.bg-trance-white{background:rgba(255, 255, 255, 0.3);}
.bg-trance-white2{background:rgba(255, 255, 255, 0.8);}
.bg-trance-black{background:rgba(0, 0, 0, 0.3);}
.bg-trance-black-dark{background:rgba(0, 0, 0, 0.7);}
.bg-black{background-color:#000;}
.bg-half-gray{background:linear-gradient(90deg,#eee 0%,#eee 40%,#fff 40%,#fff 100%);}
.bg-stripe-light {
  background-image:
  repeating-linear-gradient(
    90deg,
    #eee ,
    #eee 1px,
    #f8f9fa 1px,
    #f8f9fa 180px
  );
}
/*--------------------
price用
-----------------------*/
.pricing{transition: all 0.8s ease;}
.pricing:hover{top:-10px;}
.pricing ul {
    margin: 0;
    padding: 0; }
.pricing ul li {
      list-style: none;
      padding: 10px 20px; }
.pricing ul li:nth-child(odd) {
        background: #F7F7F7; 
}

.hover-pricing:hover{
	border-color:#8B1338 !important;
}
.pricing-btn{
	position:absolute;
	bottom:-20px;
	left:50%;
	transform: translateX(-50%);
}
/*--------------------
swipe js　設定
-----------------------*/
.swiper-container{
	text-align: center;
}
.swiper-container .swiper-slide img{
	max-width: 100%;
	height: auto;
}
.swiper-pagination-bullet-active {
  background-color: #fff !important;
}
/*--------------------
ずらす画像設定
-----------------------*/
.img-shift {
  padding-left: 0;
  position: relative;
  margin-right: 30px;
  }
.img-shift:before {
  background:linear-gradient(-45deg, #ABDAEC,#E6F3F6, #fff);
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  z-index: -1;
  right: -30px;
  bottom:-30px;
}

.img-shift-left {
  margin-left: 10px;
  position: relative;
  margin-right: 30px;
  }
.img-shift-left:before {
  background:linear-gradient(-45deg,#fff,#ABDAEC,#E6F3F6);
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  z-index: -1;
  left: -20px;
  bottom:-30px;
}