@charset "utf-8";
/*
Theme Name: Lightning Child by ZIUS_vor.6
Theme URI: 
Template: lightning
Description: Speeverホームページ作成サービス　ZIUS顧客専用 インスタ設定対応　Lightning　G3 Pro Unit用子テーマです。23_12
Author: ZIUSチーム
Tags: 
Version: 6
*/


/*ヘッダー　画像とテキスト横並び*/
.logo_to_text-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.logo_to_text {
  margin-right: 2%;
}

@media screen and (max-width: 991px){
.logo_to_text-area {
  justify-content: center;
}
}
	


/*　　テーブルデザイン
-------------------------------------------*/
.companyp tr:nth-of-type(2n+1) {
    background: rgba(115, 115, 115, 0.05);
}
@media screen and (max-width: 767px){
.companyp td:last-child {
    width: 100%;
  }
.companyp {
    width: 100%;
  }
.companyp th,   
.companyp td {
    display: block;
    width: 100%;
    text-align: center;
  }
.companyp th{
border-bottom: none;
border-top: 1px solid #e1e1e1;  
    }
}


/*　　お問い合わせフォーム デザインとモバイル
-------------------------------------------*/
.form-preset-block th {
  background-color: #f0f0f0;
  border-top: 1px solid #e1e1e1;
  border-left: 1px solid #e1e1e1;
}

.form-mobile-block p {
  margin-bottom: 0;
}

.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required {
  margin-bottom: 0;
}

.form-mobile-block tr {
  border: 1px solid #d5d5d5;
}

@media screen and (max-width: 767px){
.form-mobile-block-td:last-child {
  width: 100%;
}
	
.form-preset-block {
  width: 100%;
}
	
.form-mobile-block-th,
.form-mobile-block-td {
  display: block;
  width: 100%;
}
	
	
.form-mobile-block tr:first-child {
  border-top: 1px solid #333333;
}	

.form-mobile-block-th{
  border-bottom: none;
  border-top: none;  
}
	
.form-mobile-block-td:not(:last-child) {
  border-bottom: none;
}
	
.form-mobile-block-th:not(:first-child) {
  border-top: none;
}	
	
	
}

/*//////フッタープロフィールウィジェット///////////*/

.profile_widget {
    text-align: center;
}

.profile_widget h1 {
    border-bottom: none !important;
	font-size: 1.5rem !important;
	font-weight: 500 !important;
	margin-bottom: 0;
}


.profile_widget h1::after{
    border-bottom: none !important;	
}

.profile_widget_text{
	font-size: 14px !important;	
	margin-bottom: -2%;
}

.widget_media_image {
    text-align: center;
}


/*フッターマップ*/
#foot_map{
  position: relative;
  width: 100%;
  padding-top: 300px;
  overflow: hidden;
}
#foot_map iframe {
  position: absolute;
  top: -150px;
  left: 0;
  width: 100%;
  height: calc(100% + 150px + 150px);
  pointer-events: none;
}

.place-name {
    display: none;
}



/*LP用テーブル*/

.lp-corporation-t th, .lp-corporation-t td {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--vk-color-border-hr);
}

.t-title {
  width: 30%;
  text-align: center;
}

@media screen and (max-width: 457px){
	.t-title,.t-title td {
		display: block;
		width: 100%;
		text-align: center;
	}
	.t-title {
		border-bottom: none !important;
	}
}





/*トップページ　3PRカラーをキーカラー以外に 変更する場合はこの記述を消す*/
.home .prBlock_icon_outer{
    border:1px solid var(--vk-color-primary-vivid,#337ab7)!important;
}

.home .prBlock .prBlock_icon{
	color: var(--vk-color-primary,#2e6da4)!important;
}

/*トップページ　3PRカラーをキーカラーに ここまで*/




/*　　　インスタ用CSS
--------------------------*/

/* 投稿全体のスタイル */
.insta_list {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    justify-content: center;
    align-items: stretch;
}


/*カラム毎*/
.insta-item {
    position: relative;
    flex: 0 0 31%;
    overflow: hidden;
    border-radius: 8px;
    margin: 0 5px;
}

.inst-img {
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.insta-item img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: auto;
    transition: transform 0.3s;
}

.insta-item:hover img {
    transform: scale(1.05);
}

.caption-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.insta-item:hover .caption-overlay {
    opacity: 1;
}

.caption-text {
    color: white;
    padding: 10px;
    text-align: center;
    max-width: 80%;
}

.caption-icon {
    margin-top: 6%;
}


.inst-img.max-height {
  height: 344px;
}


/*ボタン*/

.insta-btn-area {
  margin-top: 2%;
  text-align: right;
}

/*-----------
　　ボタン1
------------*/
/*ボタンの下地*/
.btn-inst1{
  color: #FFF !important;/*文字・アイコン色*/
  border-radius: 7px;/*角丸に*/
  position: relative;
  display: inline-block;
  text-align: center;/*中身を中央寄せ*/
  font-size: 18px;/*文字のサイズ*/
  line-height: 50px;/*高さと合わせる*/
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;/*グラデーション①*/
  overflow: hidden;/*はみ出た部分を隠す*/
  text-decoration:none;/*下線は消す*/
  padding: 0 1%;
  font-weight: bold;
}

/*グラデーション②*/
.btn-inst1:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;/*全体を覆う*/
  height: 100%;/*全体を覆う*/
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}

.btn-inst1 .fa-instagram{/*アイコン*/
  font-size: 25px;/*アイコンサイズ*/
  position: relative;
  top: 4px;/*アイコン位置の微調整*/
}

.btn-inst1 span {/*テキスト*/
  display:inline-block;
  position: relative;
  transition: .5s
}

.btn-inst1:hover span{/*ホバーで一周回転*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}


/*-----------
　　ボタン2
------------*/

.btn-inst2 {
  display: inline-block;
  padding: 0.8em 3em;
/*  box-shadow: 0 5px 0 var(--vk-color-text-link-hover);*/
  border-radius: 60px;
  color: #fff !important;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
}

.btn-inst2:hover {
  box-shadow: none !important;
  transform: translateY(5px);
}


/*-----------
　　ボタン3
------------*/
.btn-inst3{
    /*矢印の基点とするためrelativeを指定*/
  position: relative;
    /*ボタンの形状*/
  border: 1px solid #555;
    padding: 8px 30px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #333;
    outline: none;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btn-inst3:hover{
  background:#333;
  color:#fff;
}

/*矢印と下線の形状*/
.btn-inst3::before{
  content:"";
    /*絶対配置で下線の位置を決める*/
  position: absolute;
  top:50%;
  right:-26px;
    /*下線の形状*/
  width:40px;
  height:1px;
  background:#333;
    /*アニメーションの指定*/
    transition: all .2s linear;
}

.btn-inst3::after{
  content:"";
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    top: 20%;
    right: -21px;
    /*矢印の形状*/
  width:1px;
  height:12px;
  background:#333;
    transform:skewX(45deg);
    /*アニメーションの指定*/
    transition: all .2s linear;
}

/*hoverした際の移動*/
.btn-inst3:hover::before{
  right:-30px;
}

.btn-inst3:hover::after{
  right:-25px;
}

/*-----------
　　ボタン4
------------*/
.btn-inst4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 0 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btn-inst4::before{
    content: '';/*絶対配置で下線の位置を決める*/
	position: absolute;
    bottom:-8px;
    left:8%;/*下線の形状*/    
    width: 92%;
    height: 1px;
	background:#333;/*アニメーションの指定*/
    transition: all .3s;
}

.btn-inst4::after{
    content: '';/*絶対配置で矢印の位置を決める*/
	position: absolute;
    bottom:-3px;
    right:0;/*矢印の形状*/    
    width: 15px;
    height:1px;
	background:#333;
    transform: rotate(35deg); /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btn-inst4:hover::before{
    left:13%;
}

.btn-inst4:hover::after{
    right:-5%;
}



/*-----------
　　ボタン5
------------*/

.btn-inst5 {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #555;
  padding: 10px 30px;
  text-align: center;
  outline: none;
  transition: ease .2s;
}

.btn-inst5 i {
  color: #333; /* アイコンの初期色を設定 */
  position: relative;
  z-index: 1; /* アイコンをテキストの下に配置 */
}

.btn-inst5 span {
  position: relative;
  z-index: 2; /* テキストをアイコンの上に配置 */
  color: #333; /* テキストの初期色を設定 */
}

.btn-inst5:hover i {
  color: #fff !important; /* ホバー時にアイコンの色を変更 */
}

.btn-inst5:hover span {
  color: #fff; /* ホバー時にテキストの色を変更 */
}

/* 背景が流れる（斜め） */
.bgskew::before {
  content: '';
  position: absolute;
  top: 0;
  left: -130%;
  background: #333;
  width: 120%;
  height: 100%;
  transform: skewX(-25deg);
  z-index: 0; /* 背景を一番下に配置 */
}

.bgskew:hover::before {
  animation: skewanime .5s forwards;
}

@keyframes skewanime {
  100% {
    left: -10%;
  }
}


/*SP表示*/


@media screen and (max-width: 1199px){
.inst-img.max-height {
  height: 288px;
}
}

@media screen and (max-width: 991px){
.inst-img.max-height {
  height: 214px;
}
.caption-text {
  max-width: 100%;
}
}

@media screen and (max-width: 767px){
.inst-img.max-height {
  height: 153px;
}

.insta-item {
  flex: initial;
  width: 45%;
}

.caption-text {
  font-size: 1.3vw;
}
}

@media screen and (max-width: 575px){
.inst-img.max-height {
  height: 28.6vw;
}
}

@media screen and (max-width: 415px){
.inst-img.max-height {
  height: initial;
}
	
.insta-item {
  flex: initial;
  width: 100%;
 }	
.caption-text {
  font-size: initial;
 }	
}