@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.l-header__bar {
    background: black;
}

.follow-banner-group {
    position: fixed;
    right: 0px;
    top: 400px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;  /* 縦方向に並べる */
    align-items: center;
    gap: 5px;
/*     background: rgba(255, 255, 255, 0.9); */
    padding: 1px;
    border-radius: 10px;
/*     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
    z-index: 1000;
    width: auto;  /* 文字の長さに応じて調整 */
}

/* 各ボタンのスタイル */
.follow-banner-group .wp-block-group {
    width: 51px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;  /* アイコンとテキストを縦に並べる */
    align-items: center;
	margin-bottom: 2px !important;
	
}

/* ボタンのホバーエフェクト */
.follow-banner-group .wp-block-group:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

/* アイコンとテキストを縦一列に並べる */
.follow-banner-group .wp-block-group p {
    display: flex;
　　flex-direction: row;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;  /* 文字を縦書き（右→左） */
    text-orientation: upright;  /* 文字を正しい向きで表示 */
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
	gap: 15px;

}




/*↑ここまで追従バナー*/


.l-header__bar .c-catchphrase {
	width: auto;
}

#main_visual .swell-block-button__link:hover {
  color: black !important; /* テキストを黒に */
}

#main_visual .swell-block-button__link:hover svg path {
  fill: black !important; /* SVGアイコンの色を黒に */
}
/* topのボタンのスタイルを修正 */
.top-button-style a {
	background: white;
	color: black;
}

.swell-block-button .swell-block-button__link[data-has-icon] {
	width: 50%;
}
.chatwork-button .swell-block-button__link {
	width: 50%;
}
.wp-block-group .icon-chatwork {
    width: 15px;
    height: 15px;
}



h2.top-h2-style {
  background: none;
  color: black;
}
h2.top-h2-style::before {
  border-top: none;
  border-bottom: none;
}

.swell-block-fullWide__inner {
  z-index: auto !important;
}

.chatwork-button .swell-block-button__link {
  background-color: #f03748 !important;
  border-color: #f03748 !important;
  color: #ffffff !important; /* テキストを白に */
}


/*  事業内容スタイルここかから  */
/* .reasons-item-group {
    display: flex;
    justify-content: center;
} */

.item-heading {
    color: black;
    font-size: 20px;
    font-weight: 700;
    padding-top: 51.5px;
    padding-bottom: 19px;
    border-bottom: solid black 2px;
}

.item-heading-number {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    display: block;
	text-align: center;
    width: 68px;
    height: 68px;
    line-height: 58px;
    color: white;
    font-size: 31px;
    font-weight: 700;
    border: solid #fff 3px;
    border-radius: 50%;
    background-color: black;
    z-index: 10;
}

.item-header-group {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.reasons-items {
    position: relative;
    border: solid 1px black;
    border-radius: 10px;
/*     width: 350px !important; */
    padding: 0 20px 37.8px !important;
}

/*  事業内容ここまで  */


/*  料金スタイルここかから  */
.top-price-style-inner {
  display: flex;
  align-items: stretch;
}

.top-price-style {
  height: auto;
}

.marunage-plan-header {
	margin-bottom: 0px;
	border-radius: 8px;
}
.marunage-plan {
  transform: scale(1.02);
  transition: transform 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #f56a6a;
  border-radius: 8px;
}

.marunage-plan:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.roumu-plan {
	transform: scale(0.98);
}

/*  料金スタイルここまで  */

/* LINE QRコード 
.modal-content {
	background-color: red !important;
    position: relative !important;
    z-index: 9999 !important;
}*/

/* 共通スタイル：追従バナーの設定 */
.wp-block-group__inner-container {
  position: relative;
  z-index: 10;
}

/* TEL用バナー */
.follow-banner-tel {
  position: fixed;
  top: 150px; 
  width: 66px;
  padding: 25.5px 20.4px!important;
  right: 0;
  z-index: 30;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl; 
  text-orientation: upright;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.25s;
}

.follow-banner-tel a {
  text-decoration: none;
  color: inherit;
}
.swl-inline-icon {
  display: inline;	
}

/* お問い合わせ用バナー*/
.follow-banner-contact {
  position: fixed;
  top: 150px;
  width: 66px;
  padding: 25.5px 20.4px!important;
  right: 0;
  z-index: 20;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.25s;
}

.follow-banner-contact a {
  text-decoration: none;
  color: inherit;
}

/* chatwork用バナー */
.follow-banner-chatwork {
  position: fixed;
  top: 456px; 
  width: 66px;
  padding: 25.5px 20.4px!important;
  right: 0;
  z-index: 30;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl; 
  
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.25s;
}

.follow-banner-tel a {
  text-decoration: none;
  color: inherit;
}


/* LINE用バナー*/
.follow-banner-line {
  position: fixed;
  top: 338px;
  width: 66px;
  padding: 25.5px 20.4px!important;
  right: 0;
  z-index: 20;
  border-radius: 10px 0 0 10px;
  display: flex;
  align-items: center;
  gap: 0.5em;
  writing-mode: vertical-rl;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.1em;
  transition: opacity 0.25s;
  cursor:pointer
}

.follow-banner-line a {
  text-decoration: none;
  color: inherit;
}

/* ホバー時のスタイル */
.follow-banner-tel:hover,
.follow-banner-contact:hover,
.follow-banner-line:hover {
  opacity: 0.7;
}


/* ポップアップ */
/* モーダルをデフォルト非表示 */
#custom-modal {
    display: none; /* 初期状態では非表示 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* 背景を暗くする */
    overflow: hidden; /* 背景スクロールを防ぐ */
}

/* モーダルコンテンツのスタイル */
#custom-modal .modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-width: 90%;
    text-align: center;
	z-index: 10000;
}

/* 閉じるボタン */
#custom-modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

/* モーダルを表示するクラス */
#custom-modal.active {
    display: block;
}



@media (min-width: 960px) {
    .follow-banner-tel {
        display: none;
    }
}

/******************************/
/* モバイル用 */
@media (max-width: 959px) {
/*   .reasons-items {
	  width: calc(var(--clmn-w) - var(--swl-clmn-mrgn--x)) !important;
  } */
	.l-header__logo {
		display: none;
	}
  .access-info {
	padding: 1rem 1rem 1rem 1rem !important;
　}
	
  .wp-block-group.reasons-item-group > .wp-block-group__inner-container .swell-block-columns__inner {
    row-gap: 2.5rem !important;
  }
	
	.top-price-style {
  　　height: auto;
　　}

	.follow-banner-tel {
		top: 95px;
		width: 50px;
		margin-bottom: 0px;
	}
  	.follow-banner-contact {
		top: 246px;
		width: 50px;
		margin-top:5px;
	}  
	.follow-banner-line {
		top: 436px;
		width: 50px;
	}
	.follow-banner-chatwork {
		top: 563px;
		width: 50px;
	}
	
	.swell-block-button .swell-block-button__link[data-has-icon] {
		width: 95%;
	}
	.chatwork-button .swell-block-button__link {
		width: 95%;
    }

	.follow-banner-group .wp-block-group p {
        writing-mode: vertical-rl;
        text-orientation: upright;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        line-height: 1.8;
        min-width: 1em;
        max-width: 100%;
        margin: 0 auto;
    }




	


	
}