@charset "utf-8";
body{
background-color: #E9F4F7;
}
sup {
  font-size: 75%;          /* 文字を少し小さくする（サイズはお好みで調整してください） */
  line-height: 0;          /* 行の高さへの影響をゼロにする（ここが一番重要！） */
  position: relative;      /* 元の場所を基準にして動かせるようにする */
  top: -0.5em;             /* 見た目だけ上にズラす */
  vertical-align: baseline;/* デフォルトの「上にズレる」仕様を一旦リセット */
}
sup{
color: #CF0033;
}
h2 a, h2 sup a{
color: #fff;
text-decoration: none;
}
h2 a:hover, h2 sup a:hover{
color: #ffff00;
}
.wide, .col_1{
max-width: 1024px;
margin: 0 auto;
}
.flex_box{
display: flex;
flex-wrap: wrap;
}
#top_fv {
  background-image: url("https://www.shuraku.co.jp/images/bg_fv.png");
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
}
h1{
padding: .5em 0 0;
border-bottom: 1px solid #333;
font-weight: bold;
font-size: 2.4em;
margin-bottom: .5em;
}
.j-list .flex_box, .col_1.flex_box{
justify-content: space-between;
}
.j-list .flex_box .col_4{
width : calc(98% / 4) ;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #fff;
margin-bottom: .5em;
}
.j-list .flex_box .col_4 img{
width: 100%;
height: auto;
border-radius: 6px 6px 0 0;
}
.j-list .flex_box .col_4.empty{
border: none;
background-color: transparent;
}
.j-list .flex_box .col_4 a{
display: block;         /* インライン要素からブロック要素に変更 */
width: 100%;            /* 横幅を親要素に合わせる */
height: 100%;           /* 高さを親要素に合わせる */
text-decoration: none;  /* リンクの下線を消す（必要に応じて） */
color: inherit;         /* 文字色を親要素から引き継ぐ（必要に応じて） */
}
.j-list .flex_box .col_4 a:hover{
background-color: #00A6B4; /* ホバー時の背景色（お好みの色に変更してください） */
color:#fff;
border-radius: 6px;
}
/* ① 通常時の画像の設定 */
.hover-img {
  /* ふわっと変化させるための設定（0.3秒かけて変化） */
  transition: opacity 0.3s ease; 
}
/* ② マウスが乗った時（ホバー時）の設定 */
.hover-img:hover {
  /* 不透明度を下げる（0.0が完全透明、1.0が不透明） */
  opacity: 0.7; 
  /* マウスカーソルを「指のマーク」にする（リンク画像の場合におすすめ） */
  cursor: pointer; 
}
.item_box a, .flex_box.col_3 a{
text-decoration: none;
color: #333;
}
.item_box a:hover, .flex_box.col_3 a:hover{
text-decoration: none;
color: #333;
}
.item_box h3:hover, .flex_box.col_3 h3:hover{
text-decoration: none;
color: #ffff00;
}
.j_series .flex_box img{
width: 100%;
height: auto;
}
.j_series .flex_box .column_3, .jinsei .flex_box .column_3{
width : calc(97% / 3) ;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: .5em;
}
.j_series .flex_box h3{
background-color: #517d99;
border-radius: 6px 6px 0 0;
font-size: 17px;
color: #fff;
margin: 0;
padding: .5em;
font-weight: normal;
}
/* 全体の枠組み */
.product-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* 商材ごとのカードデザイン */
.product-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 30px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.product-title {
  font-size: 1.4rem;
  color: #333;
  margin-top: 0;
  margin-bottom: 16px;
  border-bottom: 2px solid #0056b3; /* テーマカラーに合わせて変更してください */
  padding-bottom: 8px;
}

.description {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

/* 手数料のテキストを目立たせる */
.fee-text {
  font-size: 1.1rem;
  color: #d9534f; /* 赤色で強調 */
  background-color: #fdf2f2;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}

/* -----------------------------
   アコーディオン（詳細部分）のデザイン
----------------------------- */
.seo-accordion {
  margin-top: 10px;
}

/* 開閉ボタンのデザイン */
.accordion-btn {
  display: block;
  padding: 12px 16px;
  background-color: #f8f9fa;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  text-align: center;
  position: relative;
  transition: background-color 0.3s;
}

.accordion-btn:hover {
  background-color: #e2e6ea;
}

/* ボタンの右側に矢印(▼)をつける */
.accordion-btn::after {
  content: "▼";
  position: absolute;
  right: 16px;
  font-size: 0.8rem;
  transition: transform 0.3s;
}

/* 開いた時は矢印を上(▲)に向ける */
.seo-accordion[open] .accordion-btn::after {
  transform: rotate(180deg);
}

/* デフォルトの三角形マークを消す（ブラウザ対応） */
.accordion-btn::-webkit-details-marker {
  display: none;
}

/* 開いた中身のデザイン */
.accordion-content {
  padding: 20px;
  background-color: #fafafa;
  border: 1px solid #eee;
  border-top: none;
  border-radius: 0 0 4px 4px;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #555;
}
.sp{
display: none;
}
.kantogen{
width: 1024px;
padding: 1.5em;
margin: 1.5em auto;
border: 1px solid #fff;
background-color: #fff;
}
.right_comment_box p, .comment_box p {
  margin: 0;
  padding: 0 0 1em;
}
.link_btn a {
  padding: 0.5em 0;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background-color: #25acfd;
  margin-bottom: 0.5em;
  position: relative;
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 4px 0 #227cdd;
  border-radius: 3px;
  margin-top: -5px;
}
.movie_box img, .container_box img{
width: 100%;
height: auto;
}
.navi{
background-color: #0a568e;
padding: .5em 0;
text-align: center;
color: #fff;
}
.navi a{
color: #fff;
}
.navi a:hover{
color: #ffff00;
text-decoration: none;
}
.container_box{
max-width: 1024px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 24px;
margin: 1.5em auto;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.container_box h2, .container_box h3{
background-color: #01b4b8;
text-align: center;
color: #fff;
margin-bottom: .75em;
padding: .25em 0;
font-size: 1.8em;
}
.container_box h3{
font-size: 1.2em;
margin-bottom: 0;
}
.container_box .flex_box{
justify-content: space-between;
}
.container_box .flex_box.col_3.center{
justify-content: center;
}
.container_box .flex_box.col_3 div, .container_box .flex_box.col_5 div, .kaidai .flex_box.col_3 div{
width : calc(98% / 3) ;
border: 1px solid #ccc;
border-radius: 6px;
margin: 0 0 .75em;
text-align: center;
padding: .35em;
}
.container_box .flex_box.col_5 div{
width : calc(98% / 5) ;
margin-top: .25em;
}
.flex_box.col_4 div{
width : calc(97% / 4) ;
margin-top: .25em;
}
.flex_box.col_3.center div{
margin: .25em .5%;
}
.container_box .flex_box.col_5 div.rest{
border-radius: 3px;
margin: .25em 0;
}
.container_box .flex_box.col_4 div.rest{
border: 1px solid #ccc;
padding: .35em;
border-radius: 3px;
margin: .25em 0;
text-align: center;
}
p.sell{
margin-top: -5px;
font-size: 1.1em;
}
p.sell span.cost{
color: #ED023C;
font-size: 1.6em;
font-weight: 700;
padding: 0;
margin: 0;
}
p.market{
text-align: center;
background-color: #F2EDE9;
color: #111111;
margin: 0 auto .5em;
}
p.sub_title {
position: relative;
display: inline-block;
padding: 0 55px;
font-size: 1.4em;
font-weight: 700;
margin-top: .25em;
}

p.sub_title:before, p.sub_title:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 45px;
  height: 1px;
  background-color: black;
}

p.sub_title:before {
  left:0;
}
p.sub_title:after {
  right: 0;
}
.center{
text-align: center;
}
.hitokoto{
  background: rgba(215, 253, 205, 0.61);
  margin: 2em 0;
  padding: 25px 25px 12px 25px;
  border-radius: 10px;
}

.hitokoto-circle1{
  font-size: 16px;
  line-height: 1.5;
  position: absolute;
  margin-top: -37px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle1:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:before{
  content: "";
  position: absolute;
  top: 100%;
  margin-left: -12px;
  border: 5px solid transparent;
  border-top: 10px solid #4caf50;
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}

.hitokoto-circle2{
  position: absolute;
  font-size: 16px;
  line-height: 1.5;
  margin-top: -37px;
  margin-left: 40px;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto-circle2:after{
  content: "と";
  position: absolute;
  margin-top: .2em;
  font-weight: bold;
  color: #fff;
  background-color:#4caf50;
  border-radius: 50%;
  text-align: center;
  width: 24px;
  height: 24px;
}

.hitokoto p{
  margin: 0;
  padding: 0 0 .5em 0;
}
.button-3 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
    background-color: #ff8000;
    color: #fff;
    font-weight: 600;
    font-size: 1em;
text-decoration: none;
}

.button-3::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.button-3:hover {
    background-color: #ef7000;
}
/* 左上タイトル付きボックス */
.box-title-topleft {
  --box-color: #ccc; /* 基本色 */
  margin: 2em auto 1em; /* 外側余白 */
  position: relative; /* タイトル基準 */
  border: 1px solid var(--box-color); /* 枠線 */
  border-radius: 3px; /* 角丸 */
  width: 100%; /* 最大幅 */
background-color:#f8f9fa;
}

.box-title-topleft .box-title {
  background: var(--box-color); /* 背景 */
  color: #000; /* 文字色 */
  font-size: 1rem;
font-weight: 700;
  line-height: 1.8;
  padding: 0.2em 1em; /* 内側余白 */
  position: absolute; /* 左上固定 */
  top: -0.7em;
  left: 0.7em; /* 位置 */
  display: inline-block; /* 内容幅 */
  border-radius: 3px; /* 角丸 */
  max-width: calc(100% - 2em); /* 幅調整 */
  white-space: nowrap; /* 折返しなし */
  overflow: hidden; text-overflow: ellipsis; /* 省略 */
}

.box-title-topleft .box-content {
  padding: 2.5em 1.5em 1em; /* タイトル分の余白 */
}

/* 段落の余白なし */
.box-title-topleft p { margin: 0; }
div.l_contents{
width: 33%;
}
.right_comment_box .box-title-topleft{
margin-top: .5em;
}
div.l_contents div.item_box{
width :100%;
border: 1px solid #ccc;
border-radius: 6px;
margin: 1em 0;
text-align: center;
padding: .35em;
}
div.r_contents{
width: 65%;
}
.r_contents .flex_box{
display: flex;
justify-content: space-between;
}
.r_contents .flex_box .col_2{
display: flex;
align-items: center; /* 子要素の中で垂直中央 */
width : calc(98% / 2) ;
border: 1px solid #ccc;
border-radius: 6px;
text-align: center;
padding: .5em;
}
.r_contents .flex_box .col_2 div{
width: 100%;
}
.hr-dots {
  border: 0;
  height: 11px;
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hr-dots::before {
  content: '•••';
  font-size: 2em;
  letter-spacing: .75em;
  opacity: .75;
}
.item_box p.sell{
padding-top: 5px;
}
.foot_title{
background-color: #517d99;
padding-top: 10px;
}
.foot_title p{
text-align: center;
font-size: 1.4em;
color: #fff;
border-bottom: 1px solid #fff;
width: 1024px;
margin: 0 auto .25em;
}
.footer_box{
background-color: #517d99;
padding-bottom: 70px;
}
.footer_box ul.ft_list{
width : calc(92% / 3) ;
font-size: 15px;
text-align: left;
}
.footer_box ul.ft_list li{
color: #fff;
border-bottom: 1px dotted #fff;
margin-bottom: 5px;
}
.footer_box ul.ft_list li.none{
list-style: none;
}
.footer_box ul.ft_list li a{
color: #fff;
text-decoration: none;
}
.footer_box ul.ft_list li a:hover{
color: #ffff00;
}
.page-top-btn {
  position: fixed;     /* 画面上の特定の位置に固定 */
  bottom: 30px;        /* 画面下端からの距離 */
  right: 30px;         /* 画面右端からの距離 */
  width: 60px;         /* ボタンの幅 */
  height: 60px;        /* ボタンの高さ */
  background-color: #333; /* ボタンの背景色（お好みの色に変更してください） */
  color: #fff;         /* 矢印（文字）の色 */
  text-decoration: none;  /* リンクの下線を消す */
  border-radius: 50%;     /* ボタンを綺麗な丸型にする */
  display: flex;          /* 矢印を上下左右の中央に配置するための設定 */
  justify-content: center;
  align-items: center;
  font-size: 20px;     /* 矢印のサイズ */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影をつけて浮遊感を出す */
  transition: opacity 0.3s, transform 0.3s; /* ホバーした時のアニメーション時間 */
  z-index: 1000;       /* 他のコンテンツより手前（上）に表示させる */
}

/* マウスカーソルを乗せたとき（ホバー時）のスタイル */
.page-top-btn:hover {
  background-color: #555;      /* 背景色を少し明るくする */
  transform: translateY(-3px); /* 少しだけ上にフワッと浮く動き */
}
.container_box .flex_box.col_3 div.empty, .flex_box.col_3 div.empty{
border: none;
}
p.r_txt{
text-align: right;
}
.rest{
position: relative;
background-color: #ffffff; /* 元の背景色 */
  
  /* 変化を滑らかにする（0.2秒かけて変化） */
transition: background-color 0.2s ease;
}
.rest:hover{
background-color: #f5f5f5; /* ホバー時の背景色 */
}
.link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 768px){
.sp{
display: block;
}
.j-list .flex_box .col_4{
width : calc(98% / 3) ;
}
.container_box .flex_box.col_3 div, .container_box .flex_box.col_5 div, .kaidai .flex_box.col_3 div, div.l_contents, div.r_contents {
  width: 100%;
}
.flex_box.col_4 div {
  width: calc(97% / 3);
  margin-top: .25em;
}

}