@charset "UTF-8";
/*
body, html { font-size: 10px; }
@media screen and (min-width: 576px) and (max-width: 768px) { body, html { font-size: 12px; } }
@media screen and (min-width: 769px) and (max-width: 992px) { body, html { font-size: 16px; } }
@media screen and (min-width: 993px) and (max-width: 1200px) { body, html { font-size: 16px; } }
@media screen and (min-width: 1201px) { body, html { font-size: 20px; } }
*/

*{
	box-sizing: border-box;
}

/*カルーセルについて*/
.carousel-item{		
	object-fit: cover;
}

.carousel-caption {
	color: black !important; /* 必要に応じて色を指定 */
}
.carousel-caption {
	background-color:rgb(255, 255, 255,0.8); /* 白色, 50%の透明度 */
	padding: 15px; /* 適宜パディングを調整 */
	border-radius:50%; /* 角を丸くする（オプション） */
}

.logo-name {
  max-width: 200px;
}
.logo-icon {
  max-width: 60px;
}


.title{
	margin-top: 100px;
}

.top_title{
	/*padding-top: 40px;*/
	background-position: 0px 10px;  /* 左上から右に0px, 下に10px */
	background-size: 500px;
	background-image: url(../images/softycolordots_1.png);
	background-repeat: repeat-x;
	background-color: rgb(203, 247, 232);
}

.img_pos{
	padding-top: 150px;
}

.feature {
  background-image: url("../images/colorful.png");
}

#side_links {
    padding: 10px;
    margin-right: 20px;
    list-style: none; /* リストのデフォルトのマーカーを削除 */
}

#side_links .nav-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

#side_links .link-text {
    margin-left: 8px; /* アイコンとテキストの間の余白を追加 */
}

/* 独自のCSS/SCSSファイル */
.custom-font-size {
  /* デフォルト (xs/sm未満) */
  font-size: 1.8rem;
  font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
}

/* Medium (md) 以上でサイズ変更 */
@media (min-width: 768px) {
  .custom-font-size {
    font-size: 1.5rem; /* 24px相当 */
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  }
}

/* Large (lg) 以上でさらにサイズ変更 */
@media (min-width: 992px) {
  .custom-font-size {
    font-size: 1.5rem; /* 32px相当 */
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
  }
}

.font_1 {
	font-size: 1.2rem;
}
  
.font_2 {
	font-size: 1.0rem;
}

.font_3{
	font-size: 0.8rem;
}

.font_4 {
	font-size: 2.0rem;
}
.font_5 {
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
	font-size: 2rem;	
	font-weight: bold; /* 太字 */
	display: inline-block; /* テキスト幅に合わせる */
	position: relative;   /* 擬似要素の基準にする */
}

.font_colorRED::after {
	content: "";
	display: block;
	width: 20%; /* テキスト幅の120% */
	height: 10px; /* ボーダーの太さ */
	background: rgb(90, 10, 17); /* 下線の色 */
	border-radius: 9999px; /* 両端を丸くする。数値は大きめに */
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* 中央揃え */
	bottom: -5px; /* テキストからの距離（調整可） */
  
}
.font_colorGREEN::after {
	content: "";
	display: block;
	width: 20%; /* テキスト幅の120% */
	height: 10px; /* ボーダーの太さ */
	background: rgb(1, 185, 17); /* 下線の色 */
	border-radius: 9999px; /* 両端を丸くする。数値は大きめに */
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* 中央揃え */
	bottom: -5px; /* テキストからの距離（調整可） */
  
}

.font_5XX::after {
	content: "";
	display: block;
	width: 20%; /* テキスト幅の120% */
	height: 10px; /* ボーダーの太さ */
	background: rgb(1, 185, 17); /* 下線の色 */
	border-radius: 9999px; /* 両端を丸くする。数値は大きめに */
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* 中央揃え */
	bottom: -5px; /* テキストからの距離（調整可） */
  
}

.font_6 {
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
	font-size: 1.4rem;	
	font-weight: bold; /* 太字 */
	display: inline-block; /* テキスト幅に合わせる */
	position: relative;   /* 擬似要素の基準にする */
}

.font_6::after {
	content: "";
	display: block;
	width: 120%; /* テキスト幅の120% */
	height: 8px; /* ボーダーの太さ */
	background: rgb(1, 185, 17); /* 下線の色 */
	border-radius: 9999px; /* 両端を丸くする。数値は大きめに */
	position: absolute;
	left: 50%;
	transform: translateX(-50%); /* 中央揃え */
	bottom: -5px; /* テキストからの距離（調整可） */
  
}
.font_7 {
	font-size: 2.2rem;
	font-weight: bold; /* 太字 */
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "游ゴシック体", sans-serif;
}
.text_area {
  margin-left: 30px;
}

/*3つの要素の横並び*/
.flex-container {
    display: flex; /* フレックスボックスを有効にする */
    justify-content: space-between; /* 要素の間にスペースを均等に配置 */
    align-items: center; /* 要素を縦方向の中央に揃える */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* コンテナを中央に配置 */
}

.flex-item {
    background-color: #f0f0f0;
    padding: 20px;
    width: 30%; /* 各要素の幅を30%に設定 */
    text-align: center;
    box-sizing: border-box; /* パディングを含めたサイズを計算 */
}
.col {
	font-family: 'Arial', sans-serif; /* ここでフォントファミリーを指定 */
}

.fa-2xl {
	font-size: 2em; /* アイコンのサイズを調整 */
}
.link-text {
	font-size: 16px; /* フォントサイズを調整 */
	font-family: Arial, sans-serif; /* フォントファミリーを指定 */
	color: #333; /* フォントの色を変更 */
	margin-left: 5px; /* アイコンと文字の間隔を調整 */
	font-weight: normal; /* フォントを標準に設定 */
}
#page_top {
	display: none; /* 最初は非表示 */
	background-color: #e13bfb; /* 薄い紫色 */
	border: none; /* 枠線を消す */
	color: white; /* アイコンの色 */
	border-radius: 50%; /* ボタンを丸くする */
	font-size: 32px; /* フォントサイズ */
	width: 48px; /* ボタンの幅 */
    height: 48px; /* ボタンの高さ */
    position: fixed; /* 画面に固定 */
    right: 20px; /* 画面の右端からの距離 */
    bottom: 20px; /* 画面の下端からの距離 */
	cursor: pointer;
    display: flex; /* アイコンの中央揃え */
    align-items: center; /* アイコンの中央揃え */
    justify-content: center; /* アイコンの中央揃え */
}
  
#page_top:hover {
	background-color: #f815f8; /* ホバー時の色を少し濃くする */
}
.copyright {
	padding-top: 10px;
	padding-bottom: 30px;
	background-color: rgb(203, 247, 232);
} 
  
.footer_color{
	background-image: url(../images/softycolordots_1.png);
	background-repeat: repeat-x;
	background-color: rgb(203, 247, 232);
}


.footer_image{
	background-image: url(../images/softycolordots_1.png);
	background-repeat: repeat-x;
	background-color: rgb(203, 247, 232);
} 

.nav-list-style .font_2{
	list-style-type: none;
}