@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
*/

/*トップページ記事一覧*/
body {
background:
  linear-gradient(
    135deg,
    rgba(230, 238, 245, 0.55),
    rgba(240, 245, 255, 0.55),
    rgba(225, 232, 243, 0.55),
    rgba(210, 220, 235, 0.55),
    rgba(240, 230, 245, 0.55)
  ),
  #ffffff;

	font-family: "Lora","Noto Serif JP", serif;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.1em;
}

/* 初期状態：白黒 */
#post_slider .p-postList__thumb img,
#post_slider .p-postList__thumb--large img,
#post_slider .p-postList__thumb--square img {
  filter: grayscale(100%);
  transition: filter 0.4s ease, transform 0.3s ease;
}

/* 親要素に hover したらカラーに戻す */
#post_slider .p-postList__thumb:hover img,
#post_slider .p-postList__thumb--large:hover img,
#post_slider .p-postList__thumb--square:hover img {
  filter: grayscale(0%);
}
/* デフォルトのhover時の薄いフィルターをなくす*/
#post_slider .p-postList__link:hover .c-postThumb:before {
	opacity: 0 !important;
}

.p-postList__thumb a img,
.p-postList__thumb--large a img,
.p-postList__thumb--square a img {
  transition: filter 0.4s ease;
}

/* SWELL の強制 scale を上書きして無効化 */
.p-postList__link:hover .c-postThumb__img {
  transform: none !important;
}

/* --- メインビジュアルのスライダー全体の設定 --- */
#post_slider {
	padding-top: 100px;	/* WORKSセクションの上余白を上書き */
}

/* 記事スライダーのタイトルにアニメーションをつける */
/* 元のセレクタ：アニメーション関連を削除し、IDによる位置調整のみ担当 */
#post_slider .p-postSlider__title {
    /* ここにあった opacity, transform, animation は削除 */
    font-weight: 500;
    letter-spacing: 0.4em;
    
    /* 補足：SWELLのヘッダー追従等で被るのを防ぐため、
       スクロール位置の微調整もここに入れておくと安心です */
    scroll-margin-top: 120px;

	margin-bottom: 60px !important;	/* 0.75emを上書き */
}

/* 新しく作ったspanタグ：こちらを動かす */
#post_slider .p-postSlider__title .title-inner {
    display: inline-block; /* transformを効かせるために必須 */
    opacity: 0;
    transform: translateY(40px);
    animation: slideUp 0.8s ease-out forwards;
}

/* アニメーション定義（変更なし） */
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* スライダーの親要素の「はみ出し禁止」を解除 */
#post_slider .p-postSlider__inner {
    overflow: hidden;
}
#post_slider .p-postSlider__swiper {
    overflow: visible;
}
#post_slider .l-container {
	padding-left: 0 !important;	
	padding-right: 0 !important;	
	max-width: calc(var(--container_size, 0px))  !important;
	/*max-width: calc(min(var(--container_size, 0px), 100vw - var(--swl-pad_container, 0px) * 2 ))  !important;*/
}

/* --- スライダーの各アイテム（記事）の設定 --- */
#post_slider .p-postList__item {
    transition: transform 0.5s ease; /* 動きを滑らかにする */
}

/* --- ホバー時に上に浮かせる設定 --- */
#post_slider .p-postList__item:hover {
    transform: translateY(-20px); /* 上に20px移動 */
    z-index: 10; /* 他のスライドより手前に表示 */
}

.profile-img {
 margin-left: auto !important;
	margin-right: auto !important;
}
/* プロフィール画像にshadowをつける */
.avatar img {
	box-shadow: 0 6px 16px rgba(0,0,0,0.14);
}


/* 投稿ページのカードリンク設定 */
/* リンクカード全体のスタイル */
.double-img-card {
    display: block;
    text-decoration: none !important;
    color: #333;
    border: 1px solid #eee; /* 枠線 */
    border-radius: 8px; /* 角丸 */
    overflow: hidden;
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* カード全体の動き */
    max-width: 900px; /* カードの最大幅（お好みで調整） */
padding: 30px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 画像を横に2つ並べる設定 */
.card-images {
    display: flex;
    gap: 50px; /* 画像同士の隙間 */
    /*overflow: hidden;*/
	justify-content: center;
}

.card-images img {
    height: auto; /* 高さを揃える（必要に応じて調整） */
    object-fit: contain;
    transition: transform 0.5s ease; /* 画像アニメーションの速度 */
}

/* 左側（PC画像）の設定 */
.card-images img:first-child {
    width: 60%; /* PC画像を大きく（お好みで調整） */
    max-height: 500px; /* 縦に長くなりすぎないよう制限 */
}

/* 右側（スマホ画像）の設定 */
.card-images .card-img2 {
    width: 20%; /* スマホ画像を小さく（お好みで調整） */
    max-height: 400px; /* PCより少し低くするとバランスが良いです */
    align-self: flex-end; /* スマホ画像を下に揃える（中央なら center） */
}

/* タイトル部分の装飾 */
.card-title {
    padding: 15px;
    margin: 0;
    font-weight: bold;
    text-align: center;
    font-size: 0.9em;
}

/* --- アニメーションの設定 --- */

/* 1. マウスを乗せた時にカード全体が少し浮き上がる */
.double-img-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

/* --- 初期表示時のスライドインアニメーション定義 --- */

/* 左の画像用：右からスライドイン */
@keyframes slideInFromRight {
    0% {
        opacity: 0; /* 最初は透明 */
        transform: translateX(400px); /* 右に50pxずれた位置 */
    }
    100% {
        opacity: 1; /* 最後は不透明 */
        transform: translateX(0); /* 元の位置に戻る */
    }
}

/* 右の画像用：左からスライドイン */
@keyframes slideInFromLeft {
    0% {
        opacity: 0; /* 最初は透明 */
        transform: translateX(-200px); /* 左に50pxずれた位置 */
    }
    100% {
        opacity: 1; /* 最後は不透明 */
        transform: translateX(0); /* 元の位置に戻る */
    }
}

/* --- アニメーションを画像に適用 --- */

/* 左側（PC画像） */
.card-images img:first-child {
    opacity: 0; /* アニメーション開始前は隠しておく */
    /* アニメーション名、時間(0.8秒)、動き方(ease-out)、終了状態を維持(forwards) */
    animation: slideInFromRight 0.8s ease-out forwards;
    animation-delay: 0.4s; /* 少し遅れて開始（お好みで調整） */
}

/* 右側（スマホ画像） */
.card-images .card-img2 {
    opacity: 0; /* アニメーション開始前は隠しておく */
    animation: slideInFromLeft 0.8s ease-out forwards;
    animation-delay: 0.8s; /* PC画像よりさらに少し遅れて開始 */
}

#service,
#about,
#contact {
	font-weight: 500;
	letter-spacing: 0.3em;
	color: #333;
}

/* ============================================
   メインビジュアル タイトル & テキストのスタイル
   ============================================ */

/* --- 初期状態：テキストを隠しておく --- */
.p-mainVisual__slideTitle {
    opacity: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 10;
	font-size:38px;
	font-weight: 700;

	/* レスポンシブ表示の調整 */
	@media (max-width: 1200px) {
		font-size: 32px;
	}
	@media (max-width: 959px) {
		font-size: 28px;
	}
	@media (max-width: 380px) {
		font-size: 26px;
	}
}
.p-mainVisual__slideText {
    opacity: 0;
    position: absolute;
    left: 50%;
	top: 35%;
	transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 10;
	font-size:26px;
	font-weight: 700;

	/* レスポンシブ表示の調整 */
	@media (max-width: 1200px) {
		font-size: 24px;
	}
	@media (max-width: 959px) {
		font-size: 18px;
		top: 42%;
	}
	@media (max-width: 380px) {
		font-size: 16px;
	}
}

/* --- 1. タイトルの動き --- */
/* 中央に出現して、上に移動する */
.p-mainVisual.is-visible .p-mainVisual__slideTitle {
    animation: titleMoveUp 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes titleMoveUp {
    0% {
        opacity: 0;
        top: 55%; /* 出現位置（今のまま） */
        transform: translate(-50%, -50%) scale(0.9);
    }
    40% {
        opacity: 1;
        top: 50%; /* 中央 */
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        opacity: 1;
        top: 50%;
    }
    100% {
        opacity: 1;
        /* 最終位置 */
        top: 25%; 
/*         top: calc(42% - 100px);  */
        transform: translate(-50%, -50%) scale(1);
    }
}

/* --- 2. サブタイトルの動き --- */
/* .p-mainVisual__slideText {
    top: 30%;
}
 */
.p-mainVisual.is-visible .p-mainVisual__slideText {
    opacity: 1;
}

.p-mainVisual__slideText span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    /* 1.8s（タイトルの動きが終わる頃）から開始 */
    animation: charShow 0.5s ease-out forwards;
    animation-delay: calc(1.8s + (var(--char-index) * 0.08s));
}

@keyframes charShow {
    to {
        opacity: 1;
        transform: translateY(-20px);
    }
}

/* メインビジュアル内のリスト */
.p-blogParts.post_content{
    width: fit-content;
    position: absolute;
    left: 50%;
	top: 45%;
	transform: translateX(-47%);

	@media (max-width: 959px) {
	transform: translateX(-53%);
	}
}
.copy-fz{
	font-size: 18px !important;
	/* レスポンシブ表示の調整 */
	@media (max-width: 1200px) {
	font-size: 16px !important;
	}
	@media (max-width: 1100px) {
	font-size: 14px !important;
	}
}
.copy-sp-fz{
	font-size: 16px !important;
	/* レスポンシブ表示の調整 */
	@media (max-width: 600px) {
	font-size: 14px !important;
	}
	@media (max-width: 400px) {
	font-size: 12px !important;
	}
}

/* .u-mb-19 {
	margin-top: 200px;
}
 */
/* SWELL標準のタイトル周りの余白などをリセット */
.p-mainVisual__slideContents {
    display: block !important; /* flexを解除して絶対配置を安定させる */
}

/* --- ボタンのアニメーション設定 --- */

/* --- ボタンのアニメーション設定（出現のみ） --- */

/* 1. ボタンの初期状態（隠しておく） */
.p-mainVisual__slideBtn {
    opacity: 0; /* 透明にする */
    transform: scale(0.5); /* 最初は小さく */
	top: 25%;
}
/* 2. アニメーションの適用（.is-visibleが付いたら発火） */
.p-mainVisual.is-visible .p-mainVisual__slideBtn {
    /* btnAppear (拡大出現) のみを実行
       3.8秒待ってから、2.2秒かけてゆっくり表示し、そのままの状態を維持(forwards)
    */
    animation: btnAppear 2.2s cubic-bezier(0.34, 1.56, 0.64, 1) 3.8s forwards;
	 margin-top: 60px !important;
}

/* --- キーフレームの定義 --- */
/* ふわっと拡大して出現する動き */
@keyframes btnAppear {
    to {
        opacity: 1; /* 不透明にする */
        transform: scale(1); /* 元の大きさに戻す */
    }
}

/* （調整）ボタンがサブタイトルと近すぎる場合の余白調整 */
.p-mainVisual__slideBtn {
    margin-top: 60px; /* 必要に応じて調整してください */
}



/* 固定ページのできることセクション */
/* カラム自体の高さを揃え、中身を縦いっぱいに広げる設定 */
.swell-block-columns__inner .swell-block-column {
    display: flex;
    flex-direction: column;
}

/* キャプションボックスをカラムの高さに合わせる */
.swell-block-columns__inner .swell-block-column .cap_box {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* キャプションボックス内の本文エリアも広げて高さを維持する */
.swell-block-columns__inner .swell-block-column .cap_box_content {
    flex-grow: 1;
}


/*投稿カスタムフィールド*/
/* カード全体 */
.p-portfolio-card {
    margin-bottom: 3em;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.3s ease;
}
/* .p-portfolio-card__link {
    text-decoration: none !important;
    color: inherit !important;
    display: block;
}
 */
/* レイアウト */
.p-portfolio-card__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
}

/* 画像エリア：PCとスマホを並べる */
.p-portfolio-card__visual {
    flex: 1;
    min-width: 300px;
    border-radius: 8px;
    padding: 30px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
	background: #f9f9fa;
}
.pc-mock-wrapper {
    position: relative;
    width: 90%;
}

.pc-mock {
    width: 100%;
    height: auto;
    display: block;
/*     box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
}
.sp-mock {
    width: 28%; /* PC画像に対してのサイズ */
    height: auto;
    position: absolute;
    right: -5%;
    bottom: -10%;
/*     border: 3px solid #fff; */
    border-radius: 12px;
/*     box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
    z-index: 2;
}

/* テキストエリア */
.p-portfolio-card__body {
    flex: 1;
    min-width: 300px;
}
.p-portfolio-card__title {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0 0 15px 0 !important;
    padding-bottom: 10px;
    border-bottom: 2px solid #333;
}
.p-portfolio-card__list div {
    display: flex;
	align-items: center;
    /*padding: 8px 0;*/
    padding: 3px 0;
    border-bottom: 1px solid #eee;
}
.p-portfolio-card__list dt {
    width: 100px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #888;
}
.p-portfolio-card__list dd {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
}
.p-portfolio-card__concept {
    margin-top: 20px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}
.p-portfolio-card__btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 35px;
    background: #7ba4c8;
    color: #fff;
    border-radius: 2px;
	border: 2px solid #7ba4c8;
    font-size: 0.9rem;
    font-weight: bold;
	transition: all .3s cubic-bezier(0.5, 1, 0.89, 1);
}
.p-portfolio-card__btn:hover {
	background: #fff;
	color: #7ba4c8;
	transform: scale(1.1);
}

/* スマホ表示の調整 */
@media (max-width: 768px) {
    .p-portfolio-card__inner { padding: 20px; }
    .p-portfolio-card__visual { margin-bottom: 10px; }
    .sp-mock { right: 0; }
}
@media (max-width: 380px) {
	.p-portfolio-card__visual {
		min-width: 200px;
	}
	.p-portfolio-card__body {
		min-width: 200px;
	}
}

/* --- 初期表示時のスライドインアニメーション定義 --- */
/* 左の画像用：フェードインアップ */
@keyframes slowFadeInUp {
    0% {
        opacity: 0; /* 最初は透明 */
        transform: translateY(50px);
    }
    100% {
        opacity: 1; /* 最後は不透明 */
        transform: translateY(0); /* 元の位置に戻る */
    }
}

/* 右の画像用：左からスライドイン */
@keyframes slideInFromLeft {
    0% {
        opacity: 0; /* 最初は透明 */
        transform: translateX(-50px); /* 左に50pxずれた位置 */
    }
    100% {
        opacity: 1; /* 最後は不透明 */
        transform: translateX(0); /* 元の位置に戻る */
    }
}

/* mockup画像にアニメーションを適用 */
/* 左側（PC画像） */
.pc-mock {
    opacity: 0; /* アニメーション開始前は隠しておく */
    /* アニメーション名、時間(0.8秒)、動き方(ease-out)、終了状態を維持(forwards) */
    animation: slowFadeInUp 0.8s ease-out forwards;
    animation-delay: 0.6s; /* 少し遅れて開始（お好みで調整） */
}

/* 右側（スマホ画像） */
.sp-mock {
    opacity: 0; /* アニメーション開始前は隠しておく */
    animation: slideInFromLeft 0.8s ease-out forwards;
    animation-delay: 1.4s; /* PC画像よりさらに少し遅れて開始 */
}

/*BASIC認証*/
.p-portfolio-card__basic-auth-title{
	margin-top: 10px;
}
.p-portfolio-card__access-info {
	display: flex;
	justify-content: left;
	padding-left: 0 !important;
	gap: 20px;
}
.p-portfolio-card__access-info li {
	list-style: none;
	margin: 0 !important;
}

/*コンテンツ上部のマージンを上書きして狭くする*/
.post_content {
	margin-top:1em !important;
}
.single .l-content {
	padding-top: 10px !important;
}

/*タイトルとカテゴリを横並びにする*/
@media (min-width: 768px) {
    /* 1. タイトルブロックとカテゴリーブロックを横並びにする */
    .p-articleHead.c-postTitle,
    .p-articleMetas.-top {
        display: inline-flex;
        vertical-align: middle;
        align-items: baseline;
    }

    /* 2. タイトル側の調整 */
    .p-articleHead.c-postTitle {
        margin-bottom: 20px; /* 本文との余白 */
    }
    
    .c-postTitle__ttl {
        margin: 0 !important; /* タイトルの余白をゼロに */
        line-height: 1.2;
    }

    /* 3. カテゴリー側の調整 */
    .p-articleMetas.-top {
        margin-left: 20px !important; /* タイトルとの間隔 */
        margin-top: 0 !important;
        margin-bottom: 20px !important;
        border: none !important; /* SWELLのデフォルト線を消す（必要なら） */
    }

    /* 4. 日付の調整（タイトルのすぐ右にある場合） */
    .c-postTitle__date {
        margin-left: 10px;
        margin-right: 10px;
        order: 2; /* タイトル(0) -> 日付(2) -> カテゴリー(次のdiv) の順 */
    }
}
.c-categoryList:before {
	content: "" !important;
}

/* ====================================
   お問い合わせフォーム全体のスタイル
   ==================================== */

/* フォームフィールドの行設定（PC時は横並び、スマホは縦並び） */
.form-field {
  display: flex;
  flex-wrap: wrap;
  padding: 24px 0;
  align-items: center;
}

/* 最後の行の下線は消す */
.form-field:last-of-type {
  border-bottom: none;
}

/* --- ラベルエリア（左側） --- */
.form-field__head {
  width: 240px; /* ラベルの幅 */
  padding-right: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
	margin-bottom: 10px;
}

.form-field__label {
  font-weight: bold;
  font-size: 1rem;
  color: #333;
}

/* 必須タグのスタイル（指定色: #7ba4c8） */
.form-field__tag {
  background-color: #7ba4c8;
  color: #fff;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 10px;
  white-space: nowrap;
  font-weight: normal;
  line-height: 1.4;
}

/* --- 入力エリア（右側） --- */
.form-field__item {
  flex-grow: 1;
  width: 100%; /* スマホ用 */
}

/* CF7のテキスト入力・エリアの共通設定 */
.form-field__item input[type="text"],
.form-field__item input[type="email"],
.form-field__item textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 4px; /* 角丸 */
  background: #f9f9f9;
  font-size: 16px; /* スマホでズームされないサイズ */
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* テキストエリアの高さ */
.form-field__item textarea {
  height: 200px;
}

/* フォーカス時のスタイル（メインカラーで枠線を強調） */
.form-field__item input[type="text"]:focus,
.form-field__item input[type="email"]:focus,
.form-field__item textarea:focus {
  background: #fff;
  border-color: #7ba4c8;
  box-shadow: 0 0 0 2px rgba(123, 164, 200, 0.2); /* ふわっとした影 */
  outline: none;
}

/* --- プライバシーポリシー --- */
.form__privacy {
  text-align: center;
  margin: 20px 0 30px;
  font-size: 0.95rem;
}

/* --- 送信ボタン --- */
/* CF7のsubmitボタンのスタイル上書き */
input.wpcf7-submit.form-btn {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 160px;
  background-color: #7ba4c8;
  color: #fff;
/*   font-weight: bold; */
/*   font-size: 1.1rem; */
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
  box-shadow: 0 4px 10px rgba(123, 164, 200, 0.3);
}

input.wpcf7-submit.form-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px); /* ホバーで少し浮く */
}

/* ====================================
   スマホ対応（レスポンシブ）
   ==================================== */
@media screen and (max-width: 768px) {
  .form-field {
    padding: 20px 0;
  }

  /* テキストエリアの高さを少し調整 */
  .form-field__item textarea {
    height: 150px;
  }
}
/* --- 追加：CF7の自動挿入タグ対策 --- */
/* フォームフィールド内の余計なbrタグを消す */
.form-field br {
  display: none;
}

/* もしpタグで囲まれてしまった場合の対策 */
.form-field p {
  display: contents; /* 親要素のFlexbox設定を有効にするため、pタグの枠を無視させる */
  margin: 0;
}

/* プライバシーポリシーページ */
#top_title_area .c-pageTitle {
	text-align: center;
}

/* フッター部分は表示させない */
.p-articleFoot {
	display: none;
}

/* ============================================
   ABOUTセクションの文字アニメーション用
   ============================================ */
.message__text-flow {
  width: fit-content;
	padding-right: 30px;
	text-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
	font-size: 16px !important;
  /* ▼▼ 追加：日本語の改行ルールを厳格にする ▼▼ */
  line-break: strict;
  word-wrap: break-word;
  overflow-wrap: break-word;

	@media screen and (max-width: 400px) {
		font-size: 14px !important;
  	}
}

.char {
/*   display: inline-block; */
  display: inline;
  color: rgba(225, 232, 243);
  opacity: 0.8;
  transition:
    color 0.6s ease,
    opacity 0.6s ease;
}

/* アニメーション開始時に色を変更 */
.animate .char {
  color: #333;
  opacity: 1;
}

/*  ABOUTセクションのレスポンシブ対応 */
.about_list dt {
	font-size: 16px !important;

	@media screen and (max-width: 400px) {
		font-size: 14px !important;
  	}
}
.about_list dd {
	font-size: 16px !important;

	@media screen and (max-width: 400px) {
		font-size: 14px !important;
  	}
}

@media screen and (max-width: 768px) {
	.about_columns .swell-block-columns__inner {
		flex-direction: column;
		padding-left: 20px;
		
	}
	.about_columns .swell-block-column{
		margin-inline: auto;
	}
	.message__text-flow {
		padding-right: 0px;
	}
	
}
/* ABOUTの上部をデフォルト最大値(80px)より多めにとる */
.about_block {
	padding-top: 160px !important;
}

/* ============================================
   CONTACTセクションの見栄え、レスポンシブ対応
   ============================================ */
.form-field__label{
	font-size: 16px !important;

	@media screen and (max-width: 400px) {
		font-size: 14px !important;
  	}
}
.contact_block {
	padding-bottom: 0px !important;
}

/* ============================================
   SERVICEセクションの見栄え、レスポンシブ対応
   ============================================ */
.service_box {
	border-radius: 6px;
}

.service_text {
	font-size: 16px !important;

	@media screen and (max-width: 400px) {
		font-size: 14px !important;
  	}
}

/*  アイコンアニメーションを追加 */
.swl-inline-icon:after {
	display: flex;
    align-items: center;
	animation: bow 2s ease-in-out infinite;
}
@keyframes bow {
    90%,
    100% {
        transform: rotate(360deg);
    }
}