.am:before{
content: '@';
}

/* 汎用box
---------------------------------------------------- */
.wrapper .contents{
float:right;
width:720px;
margin:0;
padding:0px 0px 20px 0px;
}

.wrapper2 .contents{
width:960px;
margin:0;
padding:0px 0px 20px 0px;
}

.wrapper_full .contents{
width:960px;
margin:0 auto;
padding:0px 0px 20px 0px;
}

.wrapper_full .contents_full{
width:100%;
margin:0;
padding:0px 0px 20px 0px;
}

.wrapper .contents .contents_inner{

width:700px;
margin:20px 0px 0px 20px;
padding:0px 0px 20px 0px;
}

.wrapper .contents .contents_inner2{

width:720px;
margin:20px 0px 0px 0px;
padding:0px 0px 20px 0px;
}

.wrapper .contents .inner_sp{
width:700px;
margin:0px 0px 0px 20px;
}

.wrapper .contents .list_box{
overflow:hidden;
clear:both;
height:100%;
}

.wrapper .contents .contents_navi{
margin:20px 0px 0px 20px;
padding:0;
}

.wrapper .contents .contents_navi ul{
display:flex;
width:700px;
height:45px;
list-style:none;
border-top: 1px solid #d9d9d9;
border-left: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0px 0px 0px 0px;
padding:0;
}

.wrapper .contents .contents_navi ul li{
width:233px;
height:43px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.t_tit{
font-size:131%;
font-weight:bold;
line-height:1.7;
color:#505050;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.wrapper .contents .ilst{
margin:20px 0 0 0;
padding:0;
}

.wrapper .contents .ilst2{
margin:30px 0 0 0;
padding:0;
}

/* ご注文の流れ
---------------------------------------------------- */
.step-container {
    display: flex;
    width: 700px;
    height: 70px;
    border: 1px solid #d9d9d9;
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
  }

  .step-item {
    flex: 1;
    position: relative;
    display: flex;
  }

  /* リンクエリアを全体に広げる */
  .step-link {
    display: flex;
    flex-direction: column;
gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none; /* 下線を消す */
    background: #FFF;
    transition: background-color 0.2s;
    cursor: pointer;
  }

  /* hover時の背景色設定 */
  .step-link:hover {
    background-color: #f5f5f5;
  }

  /* STEP部分（上段） */
  .step-num {
display: block;
    font-size: 12px;
    font-weight: bold;
    color: #505050;
line-height: 1;  /* 余計な上下の余白を消す */
  margin: 0;       /* gapを使う場合は0にする */

  }

  /* テキスト部分（下段） */
  .step-txt {
display: block;
    font-size: 100%;
    font-weight: 500;
    color: #505050;
line-height: 1;  /* 余計な上下の余白を消す */
  }

  /* 矢印の形状 */
  .step-item:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 20px solid #FFF; /* 初期背景色 */
    z-index: 2;
    pointer-events: none; /* 矢印部分のクリックを下のリンクに通す */
    transition: border-left-color 0.2s;
  }

  /* ホバー時に矢印の色も変える */
  .step-item:hover:not(:last-child)::after {
    border-left-color: #f5f5f5;
  }

  /* 矢印の境界線 */
  .step-item:not(:last-child)::before {
    content: "";
    position: absolute;
    right: -21px;
    top: 0;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    border-left: 20px solid #d9d9d9;
    z-index: 1;
    pointer-events: none;
  }

  .step-item:not(:first-child) .step-link {
    padding-left: 15px;
  }

  /* アクティブ状態の例 */
  .step-item.active .step-link {
    background: #555;
  }
  .step-item.active .step-num,
  .step-item.active .step-txt {
    color: #fff;
  }
  .step-item.active::after {
    border-left-color: #555;
  }


#flow .flow_box{
width:700px;
height:100%;
border: 1px solid #d9d9d9;
margin:24px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow .flow_box .box{
width:698px;
height:100%;
min-height:210px;
margin:0px 0px 0px 0px;
padding:0px 16px 16px 16px;
}

#flow .flow_box h4{
background-color:#FFF;
width:100%;
height:24px;
font-size:108%;
font-weight:bold;
line-height:24px;
color:#505050;
margin:16px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow #step1 h4:before {
background-image:none;
content: "STEP1";
    display: inline-block;
    width: 120px;
    height: 24px;
    background-color: #b02817;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
}

#flow #step2 h4:before {
background-image:none;
content: "STEP2";
    display: inline-block;
    width: 120px;
    height: 24px;
    background-color: #b02817;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
}

#flow #step3 h4:before {
background-image:none;
content: "STEP3";
    display: inline-block;
    width: 120px;
    height: 24px;
    background-color: #b02817;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
}

#flow #step4 h4:before {
background-image:none;
content: "STEP4";
    display: inline-block;
    width: 120px;
    height: 24px;
    background-color: #b02817;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
}

#flow #step5 h4:before {
background-image:none;
content: "STEP5";
    display: inline-block;
    width: 120px;
    height: 24px;
    background-color: #b02817;
    color: #FFFFFF;
    text-align: center;
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
}

#flow .flow_box p.sum{
background:none;
font-size:123.1%;
font-weight:bold;
line-height:1.7;
color:#505050;
border:none;
margin:14px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow .flow_box p{
font-size:108%;
line-height:1.7;
color:#505050;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow .flow_box .box p.note{
font-size:100%;
line-height:1.8;
color:#505050;
margin:8px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow .flow_box .box .box_right{
width:698px;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#flow .flow_box .box .box_right ul{
display:flex;
justify-content: flex-end;
gap:12px;
width:666px;
height:100%;
margin:0;
padding:0;
}

#flow .flow_box .box .box_right ul li{
width:200px;
height:36px;
list-style:none;
margin:12px 0 0;
padding:0;
}

#flow .flow_box .box .box_right ul li a{
display:block;
width:198px;
height:34px;
font-size:108%;
line-height:34px;
color:#505050;
text-align:center;
text-decoration:none;
border: 1px solid #d9d9d9;
margin:0;
padding:0;
}

#flow .flow_box .box .box_right ul li a:hover{
background-color:#626262;
width:198px;
height:34px;
font-size:108%;
line-height:34px;
color:#FFF;
border:none;
}

.flow-line-arrow {
  position: relative;
  width: 698px;
  height: 25px;
  border-top: 1px solid #d9d9d9;
  margin: 0 auto;
}

/* 矢印の付け根部分のメインラインを隠すマスク */
.flow-line-arrow::before {
  content: "";
  position: absolute;
  top: -1px;      /* ボーダーに重ねる */
  left: 38px;     /* 指定の開始位置 */
  width: 80px;    /* 矢印の幅 */
  height: 1px;
  background-color: #ffffff; /* 背景色と同じにして線を消す */
  z-index: 1;
}

/* V字矢印のコンテナ */
.flow-line-arrow-v {
  position: absolute;
  top: 0;
  left: 38px;     /* 指定の開始位置 */
  width: 80px;
  height: 25px;
  z-index: 2;
}

/* V字の左斜め線 */
.flow-line-arrow-v::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;    /* 斜辺の長さ */
  height: 1px;
  background-color: #d9d9d9;
  transform-origin: left top;
  transform: rotate(32deg);
}

/* V字の右斜め線 */
.flow-line-arrow-v::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 47px;    /* 斜辺の長さ */
  height: 1px;
  background-color: #d9d9d9;
  transform-origin: right top;
  transform: rotate(-32deg);
}

/* 価格について
---------------------------------------------------- */
#price #p_calc .box{
overflow:hidden;
clear:both;
width:700px;
height:100%;
margin:10px 0px 0px 0px;
padding:0px 0px 10px 0px;
}

#price #p_calc .imgs_01{
margin:15px 0px 0px 0px;
padding:0px 0px 10px 0px;
}

#price #p_calc h4.note{
background:url(/common/img/m_icon_sq_01.gif);
background-position:11px center;
background-repeat:no-repeat;
background-color:#568aa3;
color:#FFF;
}

#price #p_calc h4.note2{
background:none;
font-size:116%;
line-height:1.7;
color:#505050;
padding:10px 0 15px 0;
}

#price #p_calc .box .s_box_left{
float:left;
width:350px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#price #p_calc .box .s_box_left p{
font-size:108%;
line-height:1.7;
color:#505050;
margin:0px 0px 0px 0px;
padding:0;
}

#price #p_calc .box .s_box_left p.note{
font-size:108%;
line-height:1.7;
color:#505050;
margin:4px 0px 0px 0px;
padding:0;
}

#price #p_calc .box .s_box_right{
float:right;
width:336px;
margin:0px 0px 0px 0px;
padding:0;
}

#price #p_calc .box .p_box_left{
float:left;
width:230px;
margin:10px 0px 0px 0px;
padding:0px 20px 0px 0px;
}

#price #p_calc .box .p_box_right{
float:right;
width:450px;
margin:10px 0px 0px 0px;
padding:0;
}

#price #p_calc .box .p_box_right h4{
background-color:#b02817;
width:440px;
height:29px;
font-size:93%;
line-height:29px;
color:#FFF;
margin:0;
padding:0px 0px 0px 10px;
}

#price #p_calc .box .p_box_right table{
width:450px;
height:170px;
border-left: 1px solid #d9d9d9;
margin:0;
padding:0;
}

#price #p_calc .box .p_box_right table th{
background-color:#f5f5f5;
width:auto;
height:27px;
font-size:93%;
font-weight:normal;
line-height:1.5;
text-align:center;
vertical-align:middle;
color:#505050;
border-right: 1px solid #d9d9d9;
border-bottom:none;
margin:0;
padding:0;
}

#price #p_calc .box .p_box_right table th.t_tit{
width:100px;
}

#price #p_calc .box .p_box_right table td{
width:auto;
font-size:93%;
line-height:1.5;
color:#505050;
text-align:center;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:0;
}

#price #p_price .box{
overflow:hidden;
clear:both;
width:700px;
height:100%;
margin:0px 0px 0px 0px;
padding:0;
}

#price #p_price .box .box_left{
float:left;
width:340px;
margin:15px 0px 0px 0px;
padding:0px 20px 0px 0px;
}

#price #p_price .box .box_right{
float:right;
width:340px;
margin:0;
padding:0;
}

#price #p_price .box .box_right p{
font-size:108%;
line-height:1.7;
color:#505050;
}

#price #p_camp ul{
overflow:hidden;
clear:both;
width:717px;
height:100%;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 3px;
}

#price #p_camp ul li{
float:left;
display:inline;
width:222px;
list-style:none;
margin:0px 0px 0px 17px;
padding:0;
}

#price #p_list h4{
margin:25px 0px 0px 0px;
}

#price #p_list table{
width:700px;
border-left: 1px solid #d9d9d9;
margin:0;
padding:0;
}

#price #p_list table th{
background-color:#f5f5f5;
width:auto;
height:27px;
font-size:93%;
font-weight:normal;
line-height:1.5;
text-align:center;
vertical-align:middle;
color:#505050;
border-right: 1px solid #d9d9d9;
border-bottom:none;
margin:0;
padding:0;
}

#price #p_list table th.t_item{
width:140px;
}

#price #p_list table th.t_clr{
width:100px;
}

#price #p_list table td{
width:auto;
height:43px;
font-size:93%;
line-height:1.5;
color:#505050;
text-align:center;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#price #p_list table td img{
width:120px;
height:120px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#price #p_list p.proviso{
font-size:108%;
line-height:1.7;
color:#505050;
margin:10px 0px 0px 0px;
padding:0;
}

#price #p_list p.n_txt{
font-size:77%;
line-height:1.6;
color:#505050;
margin:4px 0px 0px 0px;
padding:0;
}

/* 価格について 2
---------------------------------------------------- */
.calc_box{
            display: flex;
            align-items: center; 
            width: 700px;
            gap: 28px;
            margin: 20px auto;
            font-family: sans-serif;
        }

        .calc_box .inner_box {
            flex: 0 0 154px;
            width: 154px;
            border: 1px solid #dedede;
            box-sizing: border-box;
            position: relative;
        }

        .calc_box .inner_box img {
            width: 152px;
            height: 152px;
            display: block;
            object-fit: cover;
        }

        /* --- テキストエリアの設定 --- */
        .calc_box .text-area {
            height: 60px; /* 2行分＋αの適切な高さを確保 */
            display: flex;
            flex-direction: column;
            justify-content: center; /* 縦方向中央 */
            align-items: center;     /* 横方向中央 */
gap: 6px;
            text-align: center;
            padding: 4px;
            box-sizing: border-box;
        }

        /* 1行目の設定 */
        .calc_box .line-1 {
            font-size: 100%;
            font-weight: bold;
            display: block;
        }

        /* 2行目の設定 */
        .calc_box .line-2 {
            font-size: 93%;
            color: #666;
            display: block;
        }

        /* --- アイコン設定（前回の設定を維持） --- */
        .calc_box .inner_box:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 50%;
            right: -22px;
            transform: translateY(-50%);
            width: 16px;
            height: 16px;
        }

        .calc_box .inner_box:nth-child(1)::after,
        .calc_box .inner_box:nth-child(2)::after {
            background: 
                linear-gradient(#626262, #626262) center/100% 4px no-repeat,
                linear-gradient(#626262, #626262) center/4px 100% no-repeat;
        }

        .calc_box .inner_box:nth-child(3)::after {
            border-top: 4px solid #626262;
            border-bottom: 4px solid #626262;
            height: 8px;
        }

#price #p_print .box{
overflow:hidden;
clear:both;
width:700px;
height:100%;
margin:10px 0px 0px 0px;
padding:0px 0px 10px 0px;
}

#price #p_print .box h4{
background-color:#b02817;
width:700px;
height:40px;
font-size:108%;
font-weight:bold;
line-height:40px;
color:#FFF;
margin:10px 0 0;
padding:0px 0px 0px 10px;
}

#price #p_print .box h4.op_tit{
background-color:#17bbd6;
width:700px;
height:40px;
font-size:108%;
line-height:40px;
color:#FFF;
margin:10px 0 0;
padding:0px 0px 0px 10px;
}

#price #p_print .box h4 span{
font-size:93%;
margin:0 0 0 12px;
}

#price #p_print .box table.print_list{
table-layout: fixed;
width:700px;
border-left: 1px solid #d9d9d9;
margin:0;
padding:0;
}

#price #p_print .box table.print_list th{
background-color:#f5f5f5;
width:auto;
height:27px;
font-size:93%;
font-weight:normal;
line-height:1.5;
text-align:center;
vertical-align:middle;
color:#333;
border-right: 1px solid #d9d9d9;
border-bottom:none;
margin:0;
padding:5px 0;
}

#price #p_print .box table.print_list th.col_tit{
width:80px;
padding:10px 0;
}

#price #p_print .box table.print_list th.smp_tit{
width:130px;
}

#price #p_print .box table.print_list th.t_tit{

}

#price #p_print .box table.print_list td{
width:auto;
font-size:108%;
font-weight:bold;
line-height:1.5;
color:#333;
text-align:center;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:10px 0;
}

#price #p_print .box table.print_list td.sp_cel{
font-size:77%;
line-height:1.5;
padding:0;
}

#price #p_print .box table.print_list td.s_tit{
font-size:108%;
font-weight:normal;
padding:0;
}

#price #p_print .box table.print_list td.op_tit{
background-color:#f5f5f5;
font-size:108%;
font-weight:normal;
padding:0;
}

#price #p_print .box table.print_list td span{

font-size:77%;
font-weight:normal;
line-height:1.5;
padding:0 0 0 4px;
}

#price .box2{
width:720px;
}

#price .box2 .img_list3 ul{
overflow:hidden;
clear:both;
width:720px;
height:100%;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#price .box2 .img_list3 li{
float:left;
width:220px;
list-style:none;
margin:0px 0px 0px 20px;
padding:0;
}

#price .btm_btn{
margin:20px 0 0;
padding:0;
}


.wrapper .contents h4.note3{
background:none;
width:700px;
font-size:116%;
font-weight:bold;
line-height:1.7;
color:#505050;
border-top: 1px solid #eee;
margin:20px 0px 0px 0px;
padding:12px 0px 0px 0px;
}

#p_price .note3:first-of-type {
    border-top: none;
}

.wrapper .contents .note_box3{
display:flex;
gap:24px;
background:none;
width:700px;
margin:24px 0 0;
padding:0 0 12px;
}

.wrapper .contents .note_box3 p{
font-size:116%;
line-height:2.0;
margin:8px 0px 0px 0px;
padding:0;
}

.wrapper .contents .note_box3 p:first-child {
margin-top: 0;
}

.wrapper .contents .note_box3 .note_img{
margin:0;
padding:0;
}

#price #no_plate ul{
display:flex;
gap:20px;
width:700px;
height:100%;
list-style:none;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#price #no_plate ul li{
display:flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 12px;
text-align: center;
}

#price #no_plate ul.col2 li{
width:340px;
margin:0;
padding:0;
}

#price #no_plate ul.col2 li img{
width:340px;
margin:0;
padding:0;
}

#price #no_plate ul.col3 li{
width:220px;
margin:0;
padding:0;
}

#price #no_plate ul.col3 li img{
width:220px;
margin:0;
padding:0;
}


/* プリントについて
---------------------------------------------------- */

#print .list_box{
display:flex;
flex-wrap: wrap;
gap:20px;
margin:20px 0 0 0;
padding:0 0 0 20px;
}

#print .list_box .print_box3{
width:340px;
border: 1px solid #d9d9d9;
margin:0;
padding:8px;
}

#print .list_box .print_box3 img{
display: block;
width:322px;
margin:0;
padding:0;
}

#print .list_box .print_box3 h4{
background-color:#FFF;
width:322px;
font-size:108%;
font-weight:bold;
text-align:center;
line-height:1.6;
color:#505050;
margin:0;
padding:8px 0px 8px 0px;
}

#print .list_box .print_box3 p{
background-color:#FFF;
width:322px;
font-size:108%;
line-height:1.7;
color:#505050;
margin:0;
padding:8px 0 0;
}

#print .list_box .list li a{
margin:0;
padding:0;
}

/* 外枠のボックス */
.color-container {
  width: 700px;
  border: 1px solid #d9d9d9;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-sizing: border-box; /* paddingを含めた幅を700pxに固定 */
  margin-top: 20px;
}

/* 外枠のボックス：幅700px固定 */
.color-container {
  width: 700px;
  margin-top: 20px;
  padding: 8px;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* カラム間の横の隙間 */
  box-sizing: border-box;
}

/* 各カラーサンプルのまとまり（130px） */
.color-item {
  width: 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* カラーボックス：テキストを左上に配置 */
.color-box {
  width: 130px;
  height: 60px;
  display: block;       /* gridから変更 */
  padding: 8px 0 0 8px; /* 上8px、左8pxの余白 */
  font-weight: bold;
  font-size: 12px;
  box-sizing: border-box; /* paddingやborderを含めて130x60pxを維持 */
}

/* 特定のボックスに枠線を付けるためのクラス */
.border-on {
  border: 1px solid #d9d9d9;
}

/* カラー名テキスト：上下に余白を設定 */
.color-name {
  display: block;       /* spanをブロック化して上下marginを有効にする */
  width: 100%;
  padding-top: 8px;    /* ボックスとの間の隙間 */
  padding-bottom: 8px; /* 下の段との間の隙間 */
  font-size: 12px;
  color: #333;
  text-align: center;
  line-height: 1.2;
}

/* --- 個別のカラー指定 --- */
.c-21 {
  background-color: #FFF; /* 背景色 */
  color: #333;           /* 文字色 */
}

.c-22 {
  background-color: #000;
  color: #FFF;
}

.c-23 {
  background-color: #4b4a48;
  color: #FFF;
}

.c-24 {
  background-color: #c9c9c9;
  color: #333;
}

.c-25 {
  background-color: #cf0038;
  color: #FFF;
}

.c-26 {
  background-color: #e83227;
  color: #FFF;
}

.c-27 {
  background-color: #e73883;
  color: #FFF;
}

.c-28 {
  background-color: #f8c8d4;
  color: #333;
}

.c-29 {
  background-color: #ed6d00;
  color: #FFF;
}

.c-30 {
  background-color: #fcc900;
  color: #333;
}

.c-31 {
  background-color: #fff20b;
  color: #333;
}

.c-32 {
  background-color: #006134;
  color: #FFF;
}

.c-33 {
  background-color: #009b48;
  color: #FFF;
}

.c-34 {
  background-color: #cfe288;
  color: #333;
}

.c-35 {
  background-color: #002870;
  color: #FFF;
}

.c-36 {
  background-color: #0190dc;
  color: #FFF;
}

.c-37 {
  background-color: #6ec2ee;
  color: #333;
}

.c-38 {
  background-color: #641885;
  color: #FFF;
}

.c-39 {
  background-color: #5a2e13;
  color: #FFF;
}

.c-40 {
  background-color: #9e5b2e;
  color: #FFF;
}

.c-41 {
  background: linear-gradient(135deg, #f3f2f3, #c1c0c3);
  color: #333;
}

.c-42 {
  background: linear-gradient(135deg, #e3e19c, #bbb865);
  color: #333;
}

.c-43 {
  background-color: #fee6b8;
  color: #333;
}

.c-44 {
  background-color: #352f8f;
  color: #FFF;
}

.c-45 {
  background-color: #f2f033;
  color: #333;
}

.c-46 {
  background-color: #ff921c;
  color: #333;
}

.c-47 {
  background-color: #ff3484;
  color: #FFF;
}

.c-48 {
  background-color: #36d2ff;
  color: #333;
}

.c-49 {
  background-color: #a2f633;
  color: #333;
}

.c-50 {
  background-color: #f6ac0f;
  color: #333;
}

.c-51 {
  background-color: #aa1442;
  color: #FFF;
}

.c-52 {
  background-color: #52247c;
  color: #FFF;
}

.c-53 {
  background-color: #0087b6;
  color: #FFF;
}

.c-54 {
  background-color: #2a3c00;
  color: #FFF;
}

.c-55 {
  background-color: #f59e1d;
  color: #333;
}

.c-56 {
  background-color: #9ea2d1;
  color: #FFF;
}

.c-57 {
  background-color: #00a9a0;
  color: #FFF;
}

.c-58 {
  background-color: #659944;
  color: #FFF;
}

.c-59 {
  background-color: #23ac38;
  color: #FFF;
}

.c-60 {
  background-color: #fff68d;
  color: #333;
}

.c-61 {
  background-color: #f5bfa5;
  color: #333;
}

.c-62 {
  background-color: #e0e6f4;
  color: #333;
}

.c-63 {
  background-color: #b1dccb;
  color: #333;
}

.c-64 {
  background-color: #eaf3d8;
  color: #333;
}

.c-65 {
  background-color: #eed3b8;
  color: #333;
}

.c-66 {
  background-color: #f6e066;
  color: #333;
}

.c-67 {
  background-color: #f6ab8c;
  color: #333;
}

.c-68 {
  background-color: #ea8299;
  color: #333;
}

.c-69 {
  background-color: #adb6dd;
  color: #333;
}

.c-70 {
  background-color: #c4c88b;
  color: #333;
}

/* C-70まで同様に定義 */

/* 枠線が必要な時だけ使う共通クラス */
.border-on {
  border: 1px solid #d9d9d9;
  box-sizing: border-box; /* ボーダーを含めてもサイズが変わらないようにする */
}


#print #position .box h4{
background-color:#b02817;
width:320px;
height:32px;
font-size:108%;
font-weight:bold;
line-height:32px;
color:#FFF;
margin:0;
padding:0 0 0 10px;
}

#print #position .box table{
width:320px;
margin:0;
padding:0;
}

#print #position .box table th{
width:110px;
font-size:108%;
font-weight:normal;
line-height:1.5;
text-align:left;
vertical-align:top;
color:#505050;
border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:12px 8px 12px 8px;
}

#print #position .box table td{
width:190px;
font-size:108%;
line-height:1.5;
color:#505050;
border-right: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:12px 0px 12px 8px;
}

#print #position .box{
display:flex;
flex-wrap: wrap;
gap:20px;
width:700px;
height:100%;
margin:20px 0 0;
padding:0;
}

#print #position .box .box_left{
width:320px;
margin:0;
padding:0;
}

#print #position .box .box_right{
width:360px;
margin:0;
padding:0;
}

#print .btm_btn{
margin:20px 0 0;
padding:0;
}

#print #data h4{
background-color:#626262;
width:700px;
height:32px;
font-size:108%;
font-weight:bold;
line-height:32px;
color:#FFF;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 12px;
}

#print #data dl {
display: grid;
grid-template-columns: 180px 1fr; /* 左固定、右可変 */
}

#print #data dl dt{
display: flex;
flex-direction: column; /* 子要素（imgとspan）を縦に並べる */
align-items: center;    /* 左右方向の中央揃え */
justify-content: center; /* 上下方向の中央揃え */
font-size:108%;
line-height:1.5;
text-align:center;
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:16px 0px 16px 0px;
}

#print #data dl dd {
border-bottom: 1px solid #d9d9d9;
margin:0;
padding:16px 8px 16px 0px;
}

#print #data dl dd p{
font-size:108%;
line-height:1.8;
margin:8px 0 0;
padding:0;
}

#print #data dl dd p:first-child {
margin-top: 0;
}

#print #data dl dt span{
display:block;
margin:6px 0 0;
}

#print #data dl table{
width:auto;
border: none;
margin-top:6px;
padding:0;
}

#print #data dl table th{
font-size:108%;
font-weight:normal;
color:#505050;
text-align:left;
border: none;
margin:0;
padding:8px 0px 8px 0px;
}

#print #data dl table td{
font-size:108%;
color:#505050;
border: none;
margin:0;
padding:8px 0px 8px 12px;
}

/* 特定商取引法の表記
---------------------------------------------------- */
#transaction .contents h4{
background:url(/common/img/m_icon_sq_02.gif);
background-position:11px center;
background-repeat:no-repeat;
background-color:#f5f5f5;
width:675px;
height:29px;
font-size:auto;
line-height:29px;
color:#505050;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 25px;
}



/* アクセスマップ
---------------------------------------------------- */
.wrapper .contents h4.m_tit02{
background:url(/common/img/m_icon_sq_03.gif);
background-position:11px center;
background-repeat:no-repeat;
background-color:#dee9ef;
width:675px;
height:29px;
font-size:93%;
line-height:29px;
color:#505050;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 25px;
}

#company .contents .outline .box iframe{
width:680px;
height:498px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#company .contents .contents_inner .acs_box{
overflow:hidden;
clear:both;
height:100%;
}

#company .contents .contents_inner .acs_box img{
float:left;
width:209px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#company .contents .contents_inner .acs_box table{
float:right;
width:478px;
height:156px;
border-top: 1px solid #e3e3e3;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#company .contents .contents_inner .acs_box table th{
background-color:#f8f8f8;
width:135px;
text-align:center;
vertical-align:middle;
color:#505050;
border-left: 1px solid #e3e3e3;
border-right:none;
border-bottom: 1px solid #e3e3e3;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#company .contents .contents_inner .acs_box table td{
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
width:auto;
color:#505050;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 8px;
}



/* 汎用スタイル
---------------------------------------------------- */
.wrapper .contents h2{
width:700px;
margin:20px 0px 0px 20px;
padding:0;
}

.wrapper2 h2{
width:960px;
font-size:146.5%;
line-height:1.5;
color:#505050;
border-bottom: 1px solid #c6c6c6;
margin:20px 0px 0px 0px;
padding:0px 0px 8px 0px;
}

.wrapper .contents h3{
width:700px;
font-size:108%;
font-weight:bold;
line-height:1.5;
color:#505050;
border-bottom: 1px solid #cacaca;
margin:0px 0px 0px 0px;
padding:0px 0px 5px 0px;
}

.wrapper .contents h4{
background-color:#626262;
width:675px;
height:29px;
font-size:93%;
line-height:29px;
color:#FFF;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 25px;
}

p.s_tit{
margin:18px 0px 0px 0px;
padding:0;
}

p.s_tit2{
margin:30px 0px 0px 0px;
padding:0;
}

.contents .contents_inner p{
font-size:93%;
line-height:1.6;
color:#505050;
}

.contents .contents_inner p.intro{
font-size:116%;
line-height:1.7;
color:#505050;
margin:6px 0px 0px 0px;
padding:0;
}

.contents .contents_inner p.intro a{
color:#b12818;
text-decoration:underline;
}

.contents .contents_inner2 p{
font-size:93%;
line-height:1.6;
color:#505050;
}

.contents .contents_inner2 p.intro{
font-size:116%;
line-height:1.7;
color:#505050;
margin:6px 0px 0px 0px;
padding:0;
}

.contents .contents_inner2 p.intro a{
color:#b12818;
text-decoration:underline;
}

.wrapper .contents .p_top{
width:700px;
text-align:right;
margin:11px 0px 0px 20px;
padding:0;
}

.wrapper2 .contents .p_top{
width:960px;
text-align:right;
margin:11px 0px 0px 0px;
padding:0;
}

.wrapper .contents .lines h4{
background:none;
width:auto;
height:auto;
font-size:93%;
line-height:1.5;
color:#505050;
border-left: 5px solid #b02817;
margin:20px 0px 0px 0px;
padding:0px 0px 0px 6px;
}

.wrapper .contents .lines h4 a{
color:#505050;
text-decoration:none;
}

.wrapper .contents .lines h4 a:hover{
text-decoration:underline;
}

.wrapper .contents .lines .box{
overflow:hidden;
clear:both;
width:700px;
height:100%;
padding:0px 0px 10px 0px;
}

.wrapper .contents .lines .box img{
float:left;
width:222px;
margin:10px 18px 0px 0px;
padding:0px 0px 0px 0px;
}

.wrapper .contents .lines .box p{
float:right;
width:460px;
font-size:93%;
line-height:1.9;
color:#505050;
margin:10px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

.wrapper .contents h4.note{
background:url(/common/img/m_icon_sq_02.gif);
background-position:11px center;
background-repeat:no-repeat;

width:700px;
height:36px;
font-size:108%;
font-weight:bold;
line-height:36px;
color:#505050;
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
margin:24px 0px 0px 0px;
padding:0px 0px 0px 25px;
}

.wrapper .contents .note_box{
width:700px;
border-bottom: 1px solid #e3e3e3;
margin:0;
padding:12px 12px 12px 12px;
}

.wrapper .contents .note_box p{
font-size:108%;
line-height:1.8;
margin:0px 0px 6px 0px;
padding:0;
}

.wrapper .contents .note_img{
margin:0;
padding:0;
}

.wrapper .contents .note_btn{
margin:0;
padding:0;
}

.wrapper .contents .note_btn ul{
overflow:hidden;
clear:both;
width:700px;
height:100%;
margin:0;
padding:0;
}

.wrapper .contents .note_btn ul li{
float:left;
list-style:none;
margin:0;
padding:0;
}

.wrapper .contents .note_btn ul li.n_btn{
background-color:#fafafa;
padding:7px 7px 7px 0px;
}

/* アウトラインボックス
---------------------------------------------------- */
.wrapper .contents .outline{
width:682px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
margin:0;
padding:8px 8px 8px 8px;
}

.wrapper .contents .outline .box{
width:680px;
border: 1px solid #ebebeb;
margin:0;
padding:0;
}

.wrapper .contents .outline .box_cnct{
width:680px;
border-left: 1px solid #e3e3e3;
border-right: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
margin:0;
padding:0;
}

.wrapper .contents .outline p.s_tit{
width:680px;
margin:0;
padding:0;
}