.comparison{
    line-height: 1;
    font-size: 0.9rem;
     overflow-x: scroll;
}



.table {
    margin-bottom: 30px;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    color: #353535;
    width: 200px;
  height: 400px;
  white-space: nowrap;
  object-fit: inherit;
}
.table thead {
    background: #999;
    color: #fff;
    width: 150px;
}

.table th,
.table td {
    border: 1px solid #ccc;
    padding: 10px;
     flex-shrink: 0;
}

.table tr:nth-child(2n) td {
    background-color: #fafafa;
}

.table th:nth-child(2),
.table td:nth-child(2) {
    border-left: 5px solid #EF8633;
    border-right: 5px solid #EF8633;
}

.table tr:first-child th:nth-child(2) {
    position: relative;
    border-top: 15px solid #EF8633;
    background-color: #EF8633;

}


.table tr:last-child td:nth-child(2) {
    border-bottom: 5px solid #EF8633;
}


.table::-webkit-scrollbar {
  height: 14px; /* スクロールバーの高さ */
}
 
.table::-webkit-scrollbar-thumb {
  background: #d2b48c; /* ツマミの色 */
  border-radius: 7px; /* ツマミ両端の丸み */
}
 
.table::-webkit-scrollbar-track {
  background: #f5deb3; /* トラックの色 */
  border-radius: 7px; /* トラック両端の丸み */
}
.star{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    color: #353535;
}

.star thead {
    background: #efefef;
}

.star th,
.star td {
    border: 1px solid #ccc;
    padding: 10px;
}

.table td:last-child,
.table td:nth-child(2) {
  line-height: 1.6;
}

.comparison-lead{
  margin: 0 0 16px;
  font-size: 0.95em;
  opacity: 0.9;
}

.comparison-table .is-service{
  font-weight: 600;
}

.comparison-table th.is-service{
    border-bottom: 5px solid #EF8633;

}

.about{
    margin: 0;
padding: 30px 0px;
        display: grid;
    place-content: center;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-position: center;
    z-index: 0;

}


.about{
text-align: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: auto;
}
.about h2{
    text-align: left;
  color: #3c3c3c;
  font-size: 1.7rem;
  margin: 40px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  font-weight: 600;
}
.about h2::before{
    white-space: nowrap;
    position: absolute;
    top: -50px;
    left:-30px;
    color: #faf29b;
    font-size: 3rem;
    text-transform: uppercase;
    content: 'IITOKORO';
    z-index: -1;
}
.container4 {
  padding: 20px 0;

    background-size: cover;
    position: relative;
    display: flex;
        flex-direction: column;

    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    z-index: 0;

}

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border: 2px solid rgba(255, 255, 255, .3);
    background: rgba(232, 255, 255, .5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, .37);
    background-clip: border-box;
    border: 0;
    border-radius: 0.5rem;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transition: .5s;
    width: 80%;
}


.card-image {
    margin: 2rem;
    width: 180px;
    height: 180px;
    object-fit:cover;
}



.card-box {
    padding: 1rem;
    color: #333;
    text-align: center;
}

.card-title {
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold;
}

.card-description {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.comparison h2{
     position: relative;
    padding: 0.5rem 0 2rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    background: linear-gradient(90deg, #b2d5de 0% 50%, #353535 50%);
    background-repeat: no-repeat;
    background-size: 4rem 0.2rem;
    background-position: bottom;
    color: #353535;
    text-align: center;
}


.ghost-button {
  display: block; /* ブロック要素指定 */
  width: 240px; /* 横幅を240pxに */
  box-sizing: border-box; /* 要素の幅と高さの計算にパディングとボーダーを含める */
  padding: 1rem 1rem; /* パディングを1remに */
  margin: 20px auto; /* 上下のマージンを20px、左右のマージンを自動で中央揃えに */
  border: 2px solid #222222; /* 細い境界線 */
  background-color: transparent; /* 背景色を透明に */
  color: #000000 !important; /* テキスト色 */
  font-weight: bold; /* テキストを太字に */
  border-radius: 4px; /* 角の丸み */
  text-align: center; /* テキストを中央配置に */
  transition: all 0.1s ease; /* 背景色と境界線の色の変化にアニメーションを設定 */
}

.ghost-button:hover {
  background-color: #222222; /* ホバー時の背景色 */
  color: white !important; /* ホバー時のテキスト色 */
}

.price-title h2{
    text-align: left;
  color: #3c3c3c;
  font-size: 1.7rem;
  margin: 40px;
  font-weight: 500;
  text-transform: uppercase;
  position: relative;
  font-weight: 600;
}
.price-title h2::before{
    white-space: nowrap;
    position: absolute;
    top: -50px;
    left:-30px;
    color: #faf29b;
    font-size: 3rem;
    text-transform: uppercase;
    content: 'ryoukin';
    z-index: 5;
}




.menu{
margin: 0;
padding: 10px;
	background-repeat: no-repeat;
  background-position: center;
	position: relative;
}
.menu::before {
  content: "";
  position: absolute;
  inset: 0;
      background-attachment: fixed;

  background-image: url(../images/back/kiiro.jpg);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  z-index: -1;
}

.menu image{
    opacity: 0.15; 
}

.menu i {
  font-size: 2.2rem;
  margin-bottom: 12px;
  color: #7172ac; 
}
.menu a{
text-decoration: none;

}

.l-wrapper_06 {
padding: 50px;
  margin: 20px auto;
  width:90vw;
  gap:20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 320px);
  gap: 10px 20px;
  justify-content: center;
}


.card_06 {
  
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px #ccc;
}

.card-img_06 {
  border-radius: 5px 5px 0 0;
  max-width: 50%;
  height: 50px;
}
.card-content_06 {
  padding: 8px 20px 20px;
}
.card-title_06 {
  font-size: 1.6em;
  color: #333;
  font-weight: 700;
}
.card-text_06 {
  color: #777;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 0.2em;
}

.card-link_06 a {
  text-decoration: none;
  color: #4f96f6;
  margin: 0 10px;
}
.card-link_06 a:hover {
  color: #6bb6ff;
}

.card-content_06 p {
  margin-bottom:0;
}

.click {
  margin-top: 10px;
margin-left :80%;
border-bottom: 3px solid #959595;
    padding: 0px;
display: inline;

}

.card-content_06:hover{
   
    box-shadow: 0 8px 32px 0 #353535;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
}

.container6{
  display: flex;
  ;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 60px;
}