@charset "utf-8";
*{margin: 0;padding: 0;}
body{font-family:"BIZ UDPGothic", "ヒラギノ角ゴ Pro W3", ”NotoSansCJKjp-Regular”, メイリオ, "ＭＳ Ｐゴシック", Osaka, Verdana, Arial, Helvetica, sans-serif;}

.spacer {
  height: 80px; /* 💻PC・タブレット用デフォルト */
}

/* 📱スマホ用（画面幅599px以下のとき） */
@media screen and (max-width: 599px) {
  .spacer {
    height: 40px; /* スマホでは少し狭く */
  }
}

.blue-bg {
  background-color: #eaf1ff; /* 淡い青 */
}

/* ページトップボタン */
#pagetop {/* レイアウト */position: fixed;right: 30px;bottom: 30px;z-index: 100;display: flex;align-items: center;justify-content: center;/* 見た目 */width: 60px;aspect-ratio: 1/1;background-color: white;border: solid #19288C 4px;border-radius: 50%;cursor: pointer;color: #19288C;/* デフォルトは非表示 */opacity: 0;visibility: hidden;transition: 0.5s;}
#pagetop:hover{background-color: #19288C;border: solid white 4px;outline: solid #19288C 4px;}
#pagetop:hover >.pagetop-arrow{height: 10px;width: 10px;border-top: 3px solid white;border-right: 3px solid white;transform: translateY(20%) rotate(-45deg);}
/* 矢印 */
.pagetop-arrow {height: 10px;width: 10px;border-top: 3px solid #19288C;border-right: 3px solid #19288C;transform: translateY(20%) rotate(-45deg);}
/* スクロールされたときに適用されるCSS */
#pagetop.visible {opacity: 1;visibility: visible;}

/* アコーディオン start----------- */
.more_comment{text-align: center;}
.more_comment >div >p{text-align: left;}
.more_comment input{display: none;}
.more_comment label{cursor: pointer;position: relative;margin: 0 auto;font-size: 15px;background-color: #19288C;color: white;padding: 20px 40px;border-radius: 50px;z-index: 4;transition: .0.5s all ;}
.more_comment label:hover{opacity: 0.8;}
.more_comment label::after{content: "▼クリックしてすべて表示▼";}
.more_comment input:checked ~label::after{content: "▲とじる▲";}
.readmore_com{position: relative;margin-bottom: 30px;max-height: 110px;overflow: hidden;transition: all 0.4s ease-in-out;}
.readmore_com::before{display: block;position: absolute;bottom: 0;left: 0;width: 100%;content: "";height: 50px;/*※グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);z-index: 3;}
.more_comment input:checked ~.readmore_com{max-height: 40em;transition: all 0.8s ease-in;}
.more_comment input:checked ~.readmore_com::before{display: none;}
@media screen and (min-width:600px) and (max-width:1199px){
.more_comment label{padding: 15px 20px;font-size: 13px;}
}
@media screen and (max-width:599px){
.more_comment label{padding: 15px 20px;font-size: 10px;}
.readmore_com{margin-bottom: 20px;}
.readmore_com::before{display: block;position: absolute;bottom: 0;left: 0;width: 100%;content: "";height: 30px;/*※グラデーションの色と高さ 高さはreadmoreのheight以下にすること*/background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 50%, #fff 100%);z-index: 3;}
}
/* ===== スマホでも .imp_color が抜けないように修正 ===== */
.readmore_com::before {
  pointer-events: none; /* グラデがクリックも干渉もしないように */
  mix-blend-mode: normal; /* ブレンドモードを通常にして色が薄くならないように */
}

.more_comment .imp_color {
  position: relative;
  z-index: 4; /* グラデより前に出す */
  color: #ff5100 !important;
  -webkit-text-fill-color: #ff5100 !important; /* Safari用対策 */
}
/* アコーディオン end------------- */

/* SPaccordion　start------------ */
.sp_accordion{text-align: center;}
.sp_accordion >div >p{text-align: left;}
.sp_accordion input{display: none;}
.sp_accordion label{box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgb(0 0 0 / 24%);padding: 20px 40px;border-radius: 50px;cursor: pointer;}
.sp_accordion label:hover{opacity: 0.8;box-shadow:inset -4px -4px 8px #fff,inset 4px 4px 8px rgb(0 0 0 / 24%);transition: .0.3s all ;}
.sp_accordion label::before{content: "展開してすべて読む";}
.sp_accordion input:checked ~label::before{content: "とじる";}
.sp_accordion .office_ev_comment{position: relative;margin-bottom: 25px;max-height: 300px;overflow: hidden;}
.sp_accordion .office_ev_comment::after{content: "・・・";position: absolute;left: 0px;top: 87%;width: 100%;font-size: 30px;z-index: 3;}
.sp_accordion .office_ev_comment::before{display: block;position: absolute;bottom: 0;left: 0;width: 100%;content: "";height: 50px;background: #FFE6D2;z-index: 3;font-size: 30px;}
.sp_accordion input:checked ~.office_ev_comment{max-height: 250em;margin-bottom: 40px;}
.sp_accordion input:checked ~.office_ev_comment::after{display: none;}
.sp_accordion input:checked ~.office_ev_comment::before{display: none;}
/* SPaccordion　end-------------- */

/* SPaccordion　start------------ */
.greeting{text-align: center;}
.greeting >div >p{text-align: left;}
.greeting input{display: none;}
.greeting label{box-shadow: -4px -4px 8px #fff, 4px 4px 8px rgb(0 0 0 / 24%);padding: 20px 40px;border-radius: 50px;cursor: pointer;}
.greeting label:hover{opacity: 0.8;box-shadow:inset -4px -4px 8px #fff,inset 4px 4px 8px rgb(0 0 0 / 24%);transition: .0.3s all ;}
.greeting label::before{content: "展開してすべて読む";}
.greeting input:checked ~label::before{content: "とじる";}
.greeting .office_greeting{position: relative;margin-bottom: 25px;max-height: 280px;overflow: hidden;}
.greeting .office_greeting::before{display: block;position: absolute;bottom: 0;left: 0;width: 100%;content: "";height: 50px;z-index: 3;font-size: 30px;}
.greeting input:checked ~.office_greeting{max-height: 250em;margin-bottom: 40px;}
.greeting input:checked ~.office_greeting::after{display: none;}
.greeting input:checked ~.office_greeting::before{display: none;}
/* SPaccordion　end-------------- */

/* 画面サイズごとの対応 */
@media screen and (min-width:1200px) {
    .tablet_only{display: none;}
    .smart_only{display: none;}
}
@media screen and (min-width:600px) and (max-width:1199px){
    .pc_only{display: none;}
    .smart_only{display: none;}
}
@media screen and (max-width:599px){
    .tablet_only{display: none;}
    .pc_only{display: none;}
}
/* ------------------ */

/* ------------------pcサイズレイアウトsta-------------------- */
@media screen and (min-width:1200px) {
    #hdset{position: sticky;width:100%;z-index: 999;top:0;background: #fff;}
    .blankbox{margin-bottom:7.2%;}
    .top_item{display: flex;justify-content: space-around;margin-top:5px;align-items: center;}
    .top_itembox1{width:50%;}
    .top_itembox2{width:40%;}
    h1{font-size: 1em; font-weight: normal;padding:0.5% 0 0 5%;}
    .section{width: 80%;margin: 1% auto 0;}
    
    h4{font-size: 1.5em;}
    ul{margin:0; padding: 0; list-style: none;}
    .container div{padding:10px 10px 20px;}
    .breadlist{display: flex;justify-content: flex-end;margin-top: 170px;width: 90%;}
    #kiyaku >.breadlist{display: flex;justify-content: flex-end;margin-top: 54px;width: 90%;font-size: 19px;}
    a{color: #1c1c1c;text-decoration: none;}
    a:hover,a:active{text-decoration: none;opacity: 0.7;transition: .0.3s all ;}
    .hamburger-menu_mobile{display:none}
    .tb{display: none;}
    .sp{display: none;}
    .pc{display: block;}

    /* ヘッダーの設定 */
    .navigation{display: flex;background:#fff;align-items: center;justify-content:center ;box-shadow:0 5px 5px -3px rgba(0,0,0,0.2);padding:5px;}
    .navigation_box_img{width: 20%;}
    .navigation_box_img img{width: 100%;}
    .navigation_box{width: 50%;padding: 0 1%;}
    .navigation_box nav{text-align: center;}
    .navigation_box nav ul{	list-style: none;display: flex;justify-content:space-around;}
    .navigation_box nav ul ul{display: block;}
    .navigation_box nav ul li a{display: block;text-decoration: none;color: #1c1c1c;padding:2rem 1.5rem;transition:all .3s;font-weight:bold;font-size: 100%;}
    .navigation_box nav ul li li a{padding:0;}
    .navigation_box nav ul li a:hover{color:#999;transition: .0.3s all ;}

    /* 検索ボックス */
    #tel_search{height: 40px;width: 125%;}
    .nav_search{display: grid;grid-template-columns: 75% 25%;height: 100%;width: 100%;}
    #tel_search form input[type="text"]{border: solid black 1px;background-color: white;}
    #tel_search form input[type="submit"]{border: none; background-color: #19288c;color: white;}

    /* スマートフォン用のhtmlを非表示 */
    .smartonly{display: none;}

    /* トップ画像 */
    #top_site{width: 65%;margin: 0 auto 0;}
    .top_page img{width: 100%;position: relative;z-index: -1;}
    .top_page h2{text-align: center;background-color: #19288c;color: white;font-size: 250%;padding: 25px;margin-top: -1%;}

    /* R&Rが提供するサービス一覧 */
    .service_image{margin: 40px 10% 80px 10%;display: grid;grid-template-columns: 33.3% 33.3% 33.3%;}
    .top_service{padding: 0 20px;border-right: dotted #737373 3px;text-align: center;}
    .top_service:last-child{border: none;}
    .top_service img{width: 100%;}
    .top_service a p{font-size: 17px;line-height: 1.3em; padding: 5px 10px;text-align: left;}
    .top_service a h4{font-size: 1.6em;line-height: 1.3em;font-weight: 900;padding: 5px 10px;}
    .service_image a{text-decoration: none;}

    /* 現場実績 */
    .achievement_box{margin: 5% 15% 0;width: 70%;height: 700px;}
    .achievement_box img{height: auto;width: 80%;}
    .readmore_content p{font-size: 117%;color: white;width: 46%;padding: 20px;position: relative;top: -310px;left: 550px;background-color: rgba(25, 40, 140, 0.9);border: solid #141E64 5px;border-radius: 10px 50px/50px 10px;}
    .readmore_content::before{content: '';display: inline-block;width: 800px;height: 600px;background-size: contain;background-image: url(img/IMG_0027.jpg);vertical-align: middle;}

    /* R&Rオススメ商品はこちら */
    #top_popular_item{margin: 5% 15% 0;width: 70%;}
    .popular_list{display: flex;display: grid;grid-template-columns: 50% 50%;}
    .popular_list li{width: 100%;}
    .popular_list li:after{content: '';background-color: #cccccc;width: 98%;height: 2px;display: block;margin-left: 1%;}
    .popular_list li a{display: grid;grid-template-columns: 50% 50%;text-decoration: none;padding: 5px;}
    .popular_list img{height: auto;width: 100%;border-radius: 10px 0 10px 0;z-index: 1;}
    .popular_list div{padding: 0 20px 0;display: grid;grid-template-rows: 40% 50% 10%;}
    .syouhin_price{color:rgba(255,0,0,0);transition: 0.5s;}

    .img_left_side img{grid-column: 1/2;z-index: 1;}
    .img_left_side div{grid-column: 2/3;overflow: hidden;}
    .img_left_side div .syouhin_id{display: none;z-index: -1;}
    .img_left_side div .syouhin_name{font-size: 120%;position: relative;left: -200px;color:rgba(0,0,0,0);transition: 0.5s;margin-top: 20px;z-index: -1;}
    .img_left_side div .syouhin_comment{font-size: 100%;position: relative;left: -200px;color:rgba(0,0,0,0);transition: 0.5s;z-index: -1;}
    .img_left_side div .syouhin_pr{text-align: right;font-size: 100%;position: relative;left: -200px;color:rgba(0,0,0,0);transition: 0.5s;z-index: -1;}
    .img_left_side div .syouhin_comment::after{transition: 0.5s;grid-column: 2/3;content: "詳細はこちら";font-size: 120%;position: absolute;left: 200px;color:rgba(0,0,0,1);width: 100%;z-index: -1;}
    .img_left_side a:hover{opacity: 0.8; filter: brightness(110%);.syouhin_comment::after{transition: 0.8s;position: absolute;left: 500px;color:rgba(0,0,0,0);}.syouhin_id{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_name{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_comment{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_pr{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_price{transition: 0.8s;color:rgba(255,0,0,1);position: relative;left: 0px;transition: .0.3s all ;}}

    .img_right_side img{grid-column: 2/3;z-index: 1;}
    .img_right_side div{grid-column: 1/2;z-index: -1;overflow: hidden;}
    .img_right_side .syouhin_id{display: none;z-index: -1;}
    .img_right_side .syouhin_name{font-size: 120%;position: relative;left: 200px;color:rgba(0,0,0,0);transition: 0.5s;margin-top: 20px;z-index: -1;}
    .img_right_side .syouhin_comment{font-size: 100%;position: relative;left: 200px;color:rgba(0,0,0,0);transition: 0.5s;z-index: -1;}
    .img_right_side .syouhin_pr{text-align: right;font-size: 100%;position: relative;left: 200px;color:rgba(0,0,0,0);transition: 0.5s;z-index: -1;}
    .img_right_side div .syouhin_comment::after{transition: 0.5s;grid-column: 1/2;content: "詳細はこちら";font-size: 120%;position: absolute;left: -200px;color:rgba(0,0,0,1);width: 100%;z-index: -1;}
    .img_right_side a:hover{opacity: 0.8; filter: brightness(110%);.syouhin_comment::after{transition: 0.8s;position: absolute;left: -500px;color:rgba(0,0,0,0);}.syouhin_id{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_name{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_comment{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_pr{transition: 0.8s;color:rgba(0,0,0,1);position: relative;left: 0px;}.syouhin_price{transition: 0.8s;color:rgba(255,0,0,1);position: relative;left: 0px;transition: .0.3s all ;}}

    /* R&Rが取り扱う商品カテゴリー_TOP */
    .category_box{font-size: 20px;text-align: center;display: grid;grid-template-columns: 25% 25% 25% 25%;width: 80%;margin: 5% auto 0;}
    .category_box img{height: auto;width: 70%;border-radius: 10px;}
    .category_box a{text-decoration: none;height: auto;margin: 5px 10px 15px 10px;padding: 20px;border-bottom: solid #19288c 2px;border-radius: 40px 0px;box-shadow: -5px -5px 15px 1px #D9D9D9;}

    /* R&Rレンタル尾道代表取締役より */
    #top_representative{margin: 13% 15% 0;width: 70%;}
    .ceo_commentright{position: relative;background: #95ccff;box-shadow: 0px 0px 0px 5px #95ccff;border: 2px dashed #fff;padding: 0.2em 0.5em;color: #333;margin-right: 40%;}
    .ceo_commentright p{margin: 0;padding: 30px;font-size: 110%;}
    .sample_box12_tape {width: 30%;height: 35px;margin: -30px 50% 0 10%;background: rgba(251, 234, 144, 0.5);opacity: 0.9;}
    .main_text{width: 75%;}

    .ceo_commentleft{position: relative;width: 35%;}
    .ceo_commentleft img{height: auto;width: 150%;position: absolute;top: -190px;left: 150%;z-index: 2;border: solid white 10px;box-shadow: 5px 5px 10px 1px #737373;}
    @media screen and (min-width:1200px) and (max-width:1500px) {
        .ceo_commentleft img{height: auto;width: 150%;position: absolute;top: -70px;left: 150%;z-index: 2;border: solid white 10px;box-shadow: 5px 5px 10px 1px #737373;}
    }


    
    /* 採用情報バナー */
#contract{
  width: 80%;
  margin: clamp(32px, 6vw, 96px) auto 0; /* ← 上の余白だけ増やす＆中央寄せ */
}
   .shipping_explanation li{ text-align:center; }
.shipping_explanation li img{ width:80%; height:auto; }




    /* お問い合わせ */
    #top_contact{margin: 2% 10% 5%;width: 80%;text-align: center;}
    #con_intro{line-height: 1.5;font-size: 20px;}
    .con_box{display: flex;justify-content: center;margin: 0 auto;}
    .con_btn{margin: 5% auto 6%;}
    .con_btn a{border:solid 4px #19288c;background: #19288c;padding: 3% 10%;font-size: 28px;color: #ffffff;font-weight: bold;text-decoration: none;}
    .con_btn a:hover{background: #ffffff;color: #000000;transition: background-color 1s;transition: .0.3s all ;}
    .con_btn a img{width: 26px;vertical-align: bottom;}
    .con_btn a:hover img{filter: invert(100%);transition: .0.3s all ;}
    .con_box div{background: #ff7700;margin: 0 2%;padding: 2%;width: 40%;}
    .con_box p:nth-child(1){font-weight: bold;color: #ffffff;border-bottom: solid 2px #ffffff;margin: 0px -8%;padding: 0px 0% 4%;font-size: 24px;}
    .con_box p:nth-child(2){color: #000000;font-size: 26px;background: #ffffff;padding: 4% 6%;margin: 6% auto;width: fit-content;border-radius: 60px;}
    .con_box p:nth-child(3){margin: 4% 0 2%;color: #ffffff;font-size: 20px;}
    .con_box p a{text-decoration: none;}
    
    /*---社内行事プランナー---*/
    #office_ev{margin: 0% 10% 0;width: 80%;}
    .office_ev_banner img{width: 100%;}
    .office_ev_btn{text-align: center;margin: 20px 0 110px;}
    .office_ev_btn p{display: flex;justify-content: center;align-items: center;color: #333333;font-size: 20px;}
    .office_ev_btn p::before,
    .office_ev_btn p::after {width: 2px;height: 40px;background-color: #000000;content: '';}
    .office_ev_btn p::before {transform: rotate(-35deg);margin-right: 30px;}
    .office_ev_btn p::after {transform: rotate(35deg);margin-left: 30px;}


    /*---footer設定---*/
    footer{background:#19288c;color:#fff;}
    .footer_container{justify-content: space-around;padding:40px 0;margin: 0 10% 0;width: 80%;display:grid;grid-template-columns: 33% 33% 34%;}
    .footer_contents{width:90%;margin: 0 10px 0 10px;}
    .footer_contents img{width:100%;}

    .footer_container div:nth-child(1) img{margin: 10px 0 20px;}
    .footer_container div:nth-child(1) p{margin: 10px 0 20px;}
    
    .footer_container div:nth-child(2) h4{margin: 10px 0 20px;}
    .footer_contents ul li a{text-decoration: none;color: #fff;}

    .group_box{display: grid;grid-template-columns: 50% 50%;margin-top: 10px;}
    .group_box li{padding: 5px;}
    .group_box img{width: 100%;}

    .footer_container div:nth-child(3) h4{margin: 10px 0 20px;}
    .footer_container div:nth-child(3) iframe{width: 100%;}


    /* 採用ページレイアウトsta------------------ */
    /* エントリーフォーム */
    .form_link{width: 1200px;height: 2800px;}
    
    /* 青の四角とアンカーリンクのCSS */
    .simplebox{width: 920px;height: 200px;background: #ebeaff;border: 2px solid #19288c;margin: 100px auto auto;}
    .simplebox p {text-align: center;font-size: 28px;padding: 17px 20px;line-height: 1.5;}
    nav {display: block;}
    .chapter ul {display: flex;justify-content: center;animation-name: RightToLeft;animation-duration: 0.8s;font-size: 1.5rem;width: 50%;margin: auto;padding: 20px 0 0 0;}
    .chapter ul p{font-size: 10px;}
    .chapter li {display: flex;text-align: center;width: 200px;}
    .chapter li a img {display: block;width: 200px;margin-bottom: 5px;margin: 0 auto;}

    /* エントリーボタン */
    .btn,a.btn,button.btn {user-select: none;vertical-align: middle;text-align: center;box-shadow: 0 8px 10px rgba(10,10,120,0.3);margin: 0 auto;font-size: 2rem;position: relative;color: #fff;}
    a.btn-svg {font-weight: 700;line-height: 54px;display: block;width: 274px; height: 64px;padding: 0;align-content: center;cursor: pointer;text-decoration: none;background-color: transparent;}
    a.btn-svg svg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    a.btn-svg svg rect {-webkit-transition: all 400ms ease;transition: all 400ms ease;stroke: #19288c;stroke-width: 2;stroke-dasharray: 200px, 16px;stroke-dashoffset: 70px;}
    a.btn-svg:hover svg rect {stroke-dashoffset: 284px;transition: .0.3s all ;}
    a.btn-svg span {color: #19288c;}

    /* 募集要項に関してのCSS */
    .bosyuu{padding: 3%;}
    .plu-job-table {width: 65%;margin-top: 20px;table-layout: fixed;margin: auto;}
    tr, td, thead, tfoot, tbody {margin: 0;padding: 0;}
    .plu-job-table th {background-color: #f4f4f4;width: 180px;font-weight: 700;border: 2px solid #efefef;}
    .text {margin: 0; padding: 0;font-size: 1rem;line-height: 1.78;vertical-align: top;}
    .head {padding: 1em;font-size: 1.2rem;}
    .plu-job-table table th, table td {border: 2px solid #efefef;padding: 1em 0;}
    .no-wrap-text, .text {line-height: 2em;margin: 0 1.5em;}
    

    /* 理念のところ */
    .desktoponly {position: relative;width: 60%;}
    .vijonarea02 {display: flex;display: -webkit-flex;width: 100%;flex-wrap: wrap;justify-content: space-around;/* border-bottom: solid 1px #eee; */padding-bottom: 2em;font-size: 14px;margin: auto;}
    .mainarea01{width: 20%;font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-you.png);background-size: 30%;background-repeat: no-repeat;}
    .mainarea02{width: 20%;font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-we.png);background-size: 30%;background-repeat: no-repeat;}
    .subarea {width: 80%;text-align: center;padding: 0.5em;-webkit-flex: 2;flex: 2;font-size: 1.1em;}
    .somebox01{font-size: 2rem; margin: auto; display: table; padding: 25px 0 0;}
    .somebox02{font-size: 2rem; margin: auto; display: table; padding: 25px 0 25px}
    .rinen_core{border: 2px groove #000000;padding: 10px;}
    .vijonarea{display: ruby-text;}

    #corevalue{margin: 5% 5% 0;width: 90%;text-align: center;}

    .corevalue ul{text-align: center;display: block;margin: 1em 0;}
    .corevalue h4{text-align: center;display: block;margin: 0.5em 0 1em 0;}
    
    .fancybox-overlay {position: absolute;top: 0;left: 0;overflow: hidden;display: none;z-index: 8010;background: url('js/ps/fancybox_overlay.png');}
    .fancybox-overlay-fixed { position: fixed; bottom: 0;right: 0;}
    .fancybox-lock .fancybox-overlay {overflow: auto;overflow-y: scroll;}
    .fancybox-opened .fancybox-title {visibility: visible;}
    .fancybox-title-float-wrap {position: absolute;bottom: 0;right: 50%;margin-bottom: -35px;z-index: 8050;text-align: center;}
    .fancybox-title-float-wrap .child {display: inline-block;margin-right: -100%;padding: 2px 20px;background: transparent; /* Fallback for web browsers that doesn't support RGBa */background: rgba(0, 0, 0, 0.8);-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;text-shadow: 0 1px 2px #222;color: #FFF;font-weight: bold;line-height: 24px;white-space: nowrap;}
    .fancybox-title-outside-wrap {position: relative;margin-top: 10px;color: #fff;}
    .fancybox-title-inside-wrap {padding-top: 10px;}
    .fancybox-title-over-wrap {position: absolute;bottom: 0;left: 0;color: #fff; padding: 10px;background: #000; background: rgba(0, 0, 0, .8);
    }

    /* コアバリューのCSS */
    .corevalue{width: 80%;margin: 0 10%;}
    .rinen{width: 100%;}
    .sum02{width: 100%;display: grid;grid-template-columns: 40% 60%;}
    .itembox02{width: 100%;grid-column: 1/2;}
    .itembox02 img{width: 80%;}
    .itembox03{width: 100%;grid-column: 2/3;}
    .itembox03 img{width: 100%;}
    .itembox03 ul{display: grid;grid-template-columns: 25% 25% 25% 25%;}
    .itembox03 li{margin: 1px;border: #737373 solid 1px;box-shadow: -4px 4px 8px rgba(0,0,0,0.3);border: 1px solid #fff;transition: 0.1s ease-in-out;}
    .itembox03 li:hover{box-shadow: -4px 4px 15px rgba(0,0,0,0.6);transform: scale(1.1,1.1);transition: .0.3s all ;}
    .itembox03 a:hover{opacity: 1; filter: brightness(100%);transition: .0.3s all ;}

    /* 採用フロー  */
    .flow{width: 80%;margin: 0 auto;padding: 3%; padding-left: 22%;border: 0; font-size: 100%; font: inherit;vertical-align: baseline;}
    .flow_box {display: flex;justify-content: space-between;padding: 0 0 2rem 0;margin: 0 0 2rem 0;}
    .flow_box .step {width: 20%;position: relative;text-align: center;}
    .flow_box .step p {color: #195DAA;font-size: 30px;font-size: 1.8rem;line-height: 1;}
    .flow_box .flow_main {flex: 1;padding: 0 0 0 2rem;border-left: 1px solid #ddd;}
    .flow_box .flow_main h4 {font-weight: bold;font-size: 20px;font-size: 1.5rem;margin: 0 0 1rem 0;}
    .flow p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;line-height: 1.5rem;}
    /* 採用ページレイアウトend------------------ */

    /* パンくずsta------------------ */
    .breadcast{display: flex; justify-content:right;}
    .breadcast li{font-weight: normal; font-size: 19px;}
    /* パンくずend------------------ */






 

    /* よくある質問 */
    #q-a_content{margin-top: 30px;}
    .q-a_main{width: 85%;margin: 20px auto;text-align: left;font-weight: normal;}
    .question{background-color: #CCE5FF;padding: 20px;font-size: 22px;margin: 20px 0;}
    .q{display: grid;width: 95%;grid-template-columns: 10% 90%;}
    .q >h5{color: white;background-color: #FF6666;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 auto;}
    .q >p{line-height: 50px;}
    .question >.a{display: grid;margin-top: 15px;padding-top: 15px;border-top: dotted #666666 5px;grid-template-columns: 10% 90%;}
    .a >h5{color: white;background-color: #6673FF;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 auto;}
    .a >p{line-height: 50px;}
    .a >p:nth-child(3){grid-column: 2/3;}
    .a >p >a{text-decoration: revert;color: revert;}
    .link_image{align-items: center;margin: 60px 0 0;}
    .link_image div{width: 80%;margin: 0 auto;display: flex;}
    .link_image img{width: 95%;height: auto;margin: 0 5px;}

    /* TOPコメント */
    #top_site >.more_comment{width: 826px;margin: 40px auto 0;text-align: center;}
    #top_site >.more_comment .readmore_com p{font-size: 17px;line-height: 30px;text-align: center;}
    #top_site >.more_comment .imp_color{font-size: 22px;color: rgb(237, 16, 215);}

    /* 社内行事プランナーコメント */
    .office_ev_content{width: 900px;margin: 30px auto 10px;padding: 40px 30px;position: relative;background-color: #FFE6D2;}
    .office_ev_content::before{border-bottom:50px solid transparent;border-left:50px solid #8796C8;content: '';display: block;position: absolute;top: 0px;left: 0px;}
    .office_ev_content::after{border-left:50px solid transparent;border-bottom:50px solid #8796C8;content: '';display: block;position: absolute;bottom: 0px;right: 0px;}
    .office_ev_comment p{font-size: 14px;line-height: 25px;margin: 20px 0;background-color: #FFFAFA;padding: 20px;border-radius: 20px;}
    .office_ev_comment p::first-letter{font-size: 20px;color: #ff5100;}

    /* 社内行事プランナーコメント */
    .office_greeting{width: 85%;margin: 0 auto 10px;padding:0;position: relative;font-size:1.1rem;line-height:1.4rem;}
    .office_greeting p{font-size: 14px;line-height: 25px;margin: 20px 0;background-color: #FFFAFA;padding: 20px;border-radius: 20px;}
    .office_greeting p::first-letter{font-size: 20px;color: #ff5100;}

    /* 現場実績new */
    #genba_achievement{width: 900px;margin: 0 auto;}
    .ach_img{text-align: center;width: 100%;margin: 30px auto 0;overflow: hidden;background-color: #E6E6E6;padding: 50px 0 10px;border-radius: 10px;position: relative;}
    .image_group{display: inline-flex;translate: -675px;transition: all 2s ease-in-out;}
    .not_animetion{transition: none;}
    .ach_img a{width: 450px;height: 340px;}
    .ach_img img{width: 60%;height: auto;margin: 70px 0;opacity: 0.5;box-shadow: 10px 10px 25px 0 rgba(0, 0, 0, 0.7);transition: all 0.5s ease-in-out;}
    .ach_img .center_image >img{width: 100%;height: auto;margin: 0 0;opacity: 1;transition: all 0.5s ease-in-out;} 
    .button_group{display: inline-block;text-align: center;margin: 30px 0 0;position: relative;}
    .position_button_group{display: flex;text-align: center;}
    .left_button{position: absolute;left: -290px;top: -240px;font-size: 60px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 30px;border-radius: 50px;}
    .right_button{position: absolute;right: -290px;top: -240px;font-size: 60px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 30px;border-radius: 50px;}
    .left_button,.right_button,.position_button{cursor: pointer;}
    .position_button{margin: 0 10px;}

    .ach_button{margin: 30px auto;text-align: center;}
    .ach_button a{display: inline-block;padding: 0.5em 1em;text-decoration: none;background: #668ad8;/*ボタン色*/color: #FFF;border-bottom: solid 4px #627295;border-radius: 3px;font-size: 30px;}
    .ach_button a:active{-webkit-transform: translateY(4px);transform: translateY(4px);/*下に動く*/border-bottom: none;/*線を消す*/}

    #genba_achievement >.comment_achievement .imp_color{font-size: 22px;}
    .comment_achievement{text-align: center;margin: 19px auto;font-size: 18px;width: 95%;position: relative;padding: 1.5em 1em;border: solid 2px #ffcb8a;border-radius: 3px 0 3px 0;}
    .comment_achievement::before,.comment_achievement::after{content: '';position: absolute;width:10px;height: 10px;border: solid 2px #ffcb8a;border-radius: 50%;}
    .comment_achievement::before{bottom:-12px;right:-12px;}
    .comment_achievement::after{top:-12px;left:-12px;}


/* 現場実績ブロック内の強調色を変更 */
#genba_achievement .comment_achievement .imp_color {
  color: #ff5100 !important;  /* 好きな色に変更してOK */
  font-weight: 700;            /* 太字のままにしたいなら残す。外したければ削除 */
}

/* strong / b を太字カラーにしたい場合（HTMLにあれば任意で）*/
#genba_achievement .comment_achievement strong,
#genba_achievement .comment_achievement b {
  color: #ff5100 !important;
}

}
/* ------------------pcサイズレイアウトend-------------------- */








/* ------------------タブレットサイズレイアウトsta-------------------- */
@media screen and (min-width:600px) and (max-width:1199px){
    #hdset{padding: 5px 0;background: #fff;position: sticky;z-index: 9999;top:0;}
    .blankbox{margin-bottom:7.2%;}
    h1{font-size: 0.8rem; font-weight: normal;padding:0.5% 0 0 5%;}
    .section{width: 80%;margin: 5% auto 0;}
    
    h4{font-size: 1.5em;}
    ul{margin:0; padding: 0; list-style: none;}
    a{color: #1c1c1c;text-decoration: none;}
    a:hover,a:active{text-decoration: none;opacity: 0.7;transition: .0.3s all ;}
    #kiyaku >.breadlist{display: flex;justify-content: flex-end;margin-top: 21px;width: 90%;font-size: 19px;}
    .hamburger-menu_mobile{display:none}
    .pc{display: none;}
    .sp{display: none;}
    .tb{display: block;}

    /* ヘッダーの設定 */
    .drawer_hidden {display: none;}
    .drawer_open {display: flex;height: 60px;width: 60px;justify-content: center;align-items: center;position: relative;z-index: 100;/* 重なり順を一番上にする */cursor: pointer;background: #19288c;}
    .drawer_open span,.drawer_open span:before,.drawer_open span:after {content: '';display: block;height: 3px;width: 25px;border-radius: 3px;background: #fff;transition: 0.5s;position: absolute;}
    .drawer_open span:before {bottom: 8px;}
    .drawer_open span:after {top: 8px;}
    #drawer_input:checked ~ .drawer_open span {background: rgb(255, 255, 255);}
    #drawer_input:checked ~ .drawer_open span::before {bottom: 0;transform: rotate(45deg);}
    #drawer_input:checked ~ .drawer_open span::after {top: 0;transform: rotate(-45deg);}
    .nav_content {width: 52%;;height: 100%;position: fixed;top: 0;left: 100%; /* メニューを画面の外に飛ばす */z-index: 99;background: #fff;transition: .5s;}
    .nav_list {list-style: none;}
    #drawer_input:checked ~ .nav_content {left: 50%;/* メニューを画面に入れる */background: #19288c;}
    .navigation{display: block;background:#fff;align-items: center;justify-content:center ;box-shadow:0 5px 5px -3px rgba(0,0,0,0.2);padding:5px;justify-content: space-around;}

    .navigation_box_img{width: 90%;}
    .navigation_box_img img{width: 100%;}
    .navigation_box{width: 15%;padding: 0 1%;}
    .navigation_box nav{text-align: center;}
    .navigation_box nav ul{	list-style: none;display: block;justify-content:space-around;}
    .navigation_box nav ul ul{display: block;}

    .navigation_box nav ul li a{display: block;text-decoration: none;color: #fff;padding:2rem 1.5rem;transition:all .3s;font-weight:bold;}
    .navigation_box nav ul li li a{padding:0;}
    .navigation_box nav ul li a:hover{color:#999;transition: .0.3s all ;}

    /* 検索ボックス */
    .navigation_box_tel{width:100%;display: flex;align-items: center;}
    #tel_search{height: 35px;width: 60%;margin-right: 10px;}
    .nav_search{display: grid;grid-template-columns: 60% 40%;height: 100%;width: 100%;}
    #tel_search form input[type="text"]{border: solid black 1px;background-color: white;text-align: center;-webkit-appearance: none;}
    #tel_search form input[type="submit"]{border: none; background-color: #19288c;color: white;-webkit-appearance: none;}

    /* パソコン用のhtmlを非表示 */
    .displayonly{display: none;}

    /* スマホ用のレイアウト表示 */
    .smartonly{display: flex;display: grid;grid-template-columns: 50% 50%;}

    /* トップ画像 */
    #top_site{width: 75%;margin: 0 auto 0;}
    .top_page img{width: 100%;position: relative;z-index: -1;}
    .top_page h2{text-align: center;background-color: #19288c;color: white;font-size: 150%;padding: 25px;margin-top: -1%;}



  /* R&Rが提供するサービス一覧（タブレット用） */
  .service_image{
    margin: 40px 8% 60px;
    display: block;          /* グリッドやめて1カラムに */
  }

  .top_service{
    margin: 0 0 40px;
    padding-bottom: 30px;
    border-bottom: dotted #737373 3px;
    text-align: center;
  }

  .service_image div:last-child{
    border-bottom: none;     /* 最後だけ線を消す */
  }

  .top_service img,
  .top_service a img{
    width: 100%;
    height: auto;
    display: block;
  }

  .top_service a{
    text-decoration: none;
    color: inherit;
  }

  .top_service a h4{
    font-size: 1.4rem;
    line-height: 1.4;
    font-weight: 900;
    padding: 8px 10px 4px;
    text-align: left;
  }

  .top_service a p{
    font-size: 0.95rem;      /* ≒15px くらい */
    line-height: 1.7;
    padding: 0 10px;
    margin: 4px 0 0;
    text-align: left;
  }


    /* 現場実績 */
    .achievement_box{margin: 5% 15% 0;width: 70%;}
    .achievement_image{display: block;}
    .achievement_image img{height: auto;width: 100%;}
    .readmore_content{padding: 20px;background: #fff;border-radius: 10px 50px/50px 10px;background-color: rgba(25, 40, 140, 0.9);border: solid 8px #19288c;text-align: left;margin-top: 20px;}
    .readmore_content p{color: white;font-size: 17px}

    /* R&Rオススメ商品はこちら */
    #top_popular_item{margin: 5% 15% 0;width: 70%;}
    .popular_list{display: grid;}
    .popular_list a:hover{opacity: 0.8; filter: brightness(110%);transition: .0.3s all ;}
    .popular_list li:last-child{border-bottom: none;}
    .popular_list img{height: auto;width: 100%;border-radius: 10px 0 10px 0;z-index: 1;}

    .popular_list li:nth-child(3){grid-row: 2/3;}
    .popular_list li:nth-child(7){grid-row: 6/7;}

    .img_left_side{margin-bottom: 20px;padding-bottom: 20px;border-bottom: solid #969696 2px;}
    .img_left_side a{display: grid;grid-template-columns: 40% 60%;}
    .img_left_side img{height: auto;width: 100%;}
    .img_left_side div{margin-left: 30px;display: grid;grid-template-rows: 30% 60% 10%;}
    .img_left_side .syouhin_id{display: none;}
    .img_left_side .syouhin_name{font-size: 20px;}
    .img_left_side .syouhin_comment{font-size: 15px;}
    .img_left_side .syouhin_pr{text-align: right;font-size: 15px;}
    .img_left_side .syouhin_price{color: red;}

    .img_right_side{margin-bottom: 20px;padding-bottom: 20px;border-bottom: solid #969696 2px;}
    .img_right_side{margin-bottom: 20px;}
    .img_right_side a{display: grid;grid-template-columns: 60% 40%;}
    .img_right_side img{height: auto;width: 100%;}
    .img_right_side div{margin-right: 30px;display: grid;grid-template-rows: 30% 60% 10%;}
    .img_right_side .syouhin_id{display: none;}
    .img_right_side .syouhin_name{font-size: 20px;}
    .img_right_side .syouhin_comment{font-size: 15px;}
    .img_right_side .syouhin_pr{text-align: right;font-size: 15px;}
    .img_right_side .syouhin_price{color: red;}

    /* R&Rが取り扱う商品カテゴリー_TOP */
    .category_box{font-size: 20px;text-align: center;display: grid;grid-template-columns: 50% 50%;width: 80%;margin: 5% auto 0;}
    .category_box img{height: auto;width: 70%;border-radius: 10px;}
    .category_box a{text-decoration: none;height: auto;margin: 5px 10px 15px 10px;padding: 20px;border-bottom: solid #19288c 2px;border-radius: 40px 0px;box-shadow: -5px -5px 15px 1px #D9D9D9;}

    /* R&Rレンタル尾道代表取締役より */
    #top_representative{margin: 5% 10% 0;width: 80%;}
    .ceo_commentleft{padding: 20px;text-align: center;margin-bottom: 30px;}
    .ceo_commentleft img{height: auto;width: 70%;border: solid white 10px;box-shadow: 5px 5px 10px 1px #737373;}
    .ceo_commentright{position: relative;background: #95ccff;box-shadow: 0px 0px 0px 5px #95ccff;border: 2px dashed #fff;padding: 0.2em 0.5em;color: #333;}
    .ceo_commentright p{margin: 0;padding: 30px;font-size: 110%;}
    .sample_box12_tape {width: 30%;height: 35px;margin: -30px 35% 0 35%;background: rgba(251, 234, 144, 0.5);opacity: 0.9;}

    /* 採用情報バナー */
    #contract{margin: 5% 10% 0;width: 80%;}
    .shipping_explanation li img{width: 100%;}







    /* お問い合わせ */
    #top_contact{margin: 2% 10% 5%;width: 80%;text-align: center;}
    #con_intro{line-height: 1.5;font-size: 2vw;}
    .con_box{display: flex;justify-content: center;margin: 0 auto;}
    .con_btn{margin: 6% auto 8%;}
    .con_btn a{border:solid 4px #19288c;background: #19288c;padding: 3% 6%;font-size: 3vw;color: #ffffff;font-weight: bold;text-decoration: none;}
    .con_btn a:hover{background: #ffffff;color: #000000;transition: background-color 0.3s}
    .con_btn a img{width: 23px;vertical-align: bottom;}
    .con_btn a:hover img{filter: invert(100%);transition: .0.3s all ;}
    .con_box div{background: #ff7700;margin: 0 2%;padding: 2%;width: 40%;}
    .con_box p:nth-child(1){font-weight: bold;color: #ffffff;border-bottom: solid 2px #ffffff;margin: 0px -8%;padding: 0px 0% 4%;font-size: 3vw;}
    .con_box p:nth-child(2){color: #000000;font-size: 2.6vw;background: #ffffff;padding: 4% 6%;margin: 6% auto;width: fit-content;border-radius: 30px;}
    .con_box p:nth-child(3){margin: 4% 0 2%;color: #ffffff;line-height: 1.5;font-size: 2vw;}
    .con_box p a{text-decoration: none;}

    /*---社内行事プランナー---*/
    #office_ev{margin: 4% 10% 0;width: 80%;}
    .office_ev_banner img{width: 100%;}
    .office_ev_btn{text-align: center;margin: 20px 0 90px;}
    .office_ev_btn p{display: flex;justify-content: center;align-items: center;color: #333333;font-size: 20px;}
    .office_ev_btn p::before,
    .office_ev_btn p::after {width: 2px;height: 40px;background-color: #000000;content: '';}
    .office_ev_btn p::before {transform: rotate(-35deg);margin-right: 30px;}
    .office_ev_btn p::after {transform: rotate(35deg);margin-left: 30px;}

   

    /*---footer設定---*/
    .container div{padding:10px 10px 20px;}
    footer{background:#19288c;color:#fff;}
    .footer_container{justify-content: space-around;padding:40px 0;margin: 0 10% 0;width: 80%;display:grid;grid-template-columns: 50% 50%;grid-template-columns: 50% 50%;}
    .footer_contents{width:90%;margin: 0 10px 0 10px;}
    .footer_contents:last-child{width:90%;margin: 20px 10px 0 10px;grid-column: 1/3;}
    .footer_contents img{width:100%;}

    .footer_container div:nth-child(1) img{margin: 10px 0 20px;}
    .footer_container div:nth-child(1) p{margin: 10px 0 20px;}
    
    .footer_container div:nth-child(2) h4{margin: 10px 0 20px;}
    .footer_contents ul li a{text-decoration: none;color: #fff;}

    .group_box{display: grid;grid-template-columns: 50% 50%;margin-top: 10px;}
    .group_box li{padding: 5px;}
    .group_box img{width: 100%;}

    .footer_container div:nth-child(3) h4{margin: 10px 0 20px;}
    .footer_container div:nth-child(3) iframe{width: 100%;}


    /* 採用ページレイアウトsta------------------ */
    /* 青の四角とアンカーリンクのCSS */
    .simplebox{width: 80%;height: 100%;background: #ebeaff;border: 2px solid #19288c;margin: 25px auto;line-height: 2.3rem;padding: 15px;}
    .simplebox p {text-align: center;font-size: 1.5rem;}
    nav {display: block;}
    .chapter ul {display: flex;justify-content: center;animation-name: RightToLeft;animation-duration: 0.8s;font-size: 1.2rem;width: 50%;margin: auto;padding: 20px 0 0 0;}
    .chapter ul p{font-size: 10px;}
    .chapter li {display: flex;text-align: center;width: 160px;}
    .chapter li a img {display: block;width: 160px;margin-bottom: 5px;margin: 0 auto;}

    /* 募集要項に関してのCSS */
    .bosyuu{padding: 3%;}
    .plu-job-table {width: 80%;margin-top: 20px;table-layout: fixed;margin: auto;}
    tr, td, thead, tfoot, tbody {margin: 0;padding: 0;}
    .plu-job-table th {background-color: #f4f4f4;width: 110px;font-weight: 700;border: 2px solid #efefef;}
    .text {margin: 0;padding: 0;font-size: 1rem;line-height: 1.78;vertical-align: top;}
    .head {padding: 0.7em;font-size: 1.1rem;line-height: 1.5rem;}
    .plu-job-table table th, table td {border: 2px solid #efefef;padding: 1em 0;}
    .no-wrap-text, .text {line-height: 2em;margin: 0 1.5em;}

    /* エントリーボタン */
    .btn,a.btn,button.btn{user-select: none;vertical-align: middle;text-align: center;box-shadow: 0 8px 10px rgba(10,10,120,0.3);margin: 0 auto;font-size: 2rem;position: relative;color: #fff;}
    a.btn-svg{font-weight: 700;line-height: 54px;display: block;width: 274px;height: 64px;padding: 0;align-content: center;cursor: pointer;text-decoration: none;background-color: transparent;}
    a.btn-svg svg{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    a.btn-svg svg rect {-webkit-transition: all 400ms ease;transition: all 400ms ease;stroke: #19288c;stroke-width: 2;stroke-dasharray: 200px, 16px;stroke-dashoffset: 70px;}
    a.btn-svg:hover svg rect {stroke-dashoffset: 284px;transition: .0.3s all ;}
    a.btn-svg span {color: #19288c;}

    /* 理念のところ */
    .desktoponly {position: relative;width: 60%;}
    .vijonarea02 {display: flex;display: -webkit-flex;width: 100%;flex-wrap: wrap;justify-content: space-around;/* border-bottom: solid 1px #eee; */padding-bottom: 2em;font-size: 14px;margin: auto;}
    .mainarea01{width: 20%;font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-you.png);background-size: 30%;background-repeat: no-repeat;}
    .mainarea02{width: 20%;font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-we.png);background-size: 30%;background-repeat: no-repeat;}
    .subarea {width: 80%;text-align: center;padding: 0.5em;-webkit-flex: 2;flex: 2;font-size: 1.1em;}
    .somebox01{font-size: 2rem; margin: auto; display: table; padding: 25px 0 0;}
    .somebox02{font-size: 2rem; margin: auto; display: table; padding: 25px 0 25px}
    .rinen_core{border: 2px groove #000000;padding: 10px;}
    .vijonarea{display: ruby-text;}

    #corevalue{margin: 5% 5% 0;width: 90%;text-align: center;}

    .corevalue{width: 80%;margin: 0 10%;}
    .rinen{width: 100%;}
    .sum02{width: 100%;display: grid;grid-template-columns: 40% 60%;}
    .itembox02{width: 100%;grid-column: 1/2;}
    .itembox02 img{width: 80%;}
    .itembox03{width: 100%;grid-column: 2/3;}
    .itembox03 img{width: 100%;}
    .itembox03 ul{display: grid;grid-template-columns: 25% 25% 25% 25%;}
    .itembox03 li{margin: 1px;border: #737373 solid 1px;box-shadow: -4px 4px 8px rgba(0,0,0,0.3);border: 1px solid #fff;transition: 0.1s ease-in-out;}
    .itembox03 li:hover{box-shadow: -4px 4px 15px rgba(0,0,0,0.6);transform: scale(1.1,1.1);transition: .0.3s all ;}
    .itembox03 a:hover{opacity: 1; filter: brightness(100%);transition: .0.3s all ;}

    .fancybox-overlay {position: absolute;top: 0;left: 0;overflow: hidden;display: none;z-index: 8010;background: url('js/ps/fancybox_overlay.png');}
    .fancybox-overlay-fixed {position: fixed;bottom: 0;right: 0;}
    .fancybox-lock .fancybox-overlay {overflow: auto;overflow-y: scroll;}
    .fancybox-opened .fancybox-title {visibility: visible;}
    .fancybox-title-float-wrap {position: absolute;bottom: 0;right: 50%;margin-bottom: -35px;z-index: 8050;text-align: center;}
    .fancybox-title-float-wrap .child {display: inline-block;margin-right: -100%;padding: 2px 20px;background: transparent; /* Fallback for web browsers that doesn't support RGBa */background: rgba(0, 0, 0, 0.8);-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;text-shadow: 0 1px 2px #222;color: #FFF;font-weight: bold;line-height: 24px;white-space: nowrap;}
    .fancybox-title-outside-wrap {position: relative;margin-top: 10px;color: #fff;}
    .fancybox-title-inside-wrap {padding-top: 10px;}
    .fancybox-title-over-wrap {position: absolute;bottom: 0;left: 0;color: #fff;padding: 10px;background: #000;background: rgba(0, 0, 0, .8);}

    /* 採用フロー */
    .flow{margin: 0 auto;padding: 3%;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
    .flow_box{display: flex;justify-content: space-between;padding: 0 0 0.8rem 0;margin: 0 0 0.8rem 0;}
    .flow_box .step{width: 20%;position: relative;text-align: center;padding-right: 10px;}
    .flow_box .step p {color: #195DAA;font-size: 1.5rem;line-height: 1;}
    .flow_box .flow_main {flex: 1;padding: 0 0 0 1rem;border-left: 1px solid #ddd;}
    .flow_box .flow_main h4 {font-weight: bold;font-size: 1.3rem;margin: 0 0 0.8rem 0;}
    .flow p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;line-height: 1.5rem;}
    /* 採用ページレイアウトend------------------ */

    /* パンくずsta------------------ */
    .breadcast{display: flex; justify-content:right;}
    .breadcast li{font-weight: normal; font-size: 17px;}
    /* パンくずend------------------ */






    /* よくある質問 */
    #q-a_content{margin-top: 30px;}
    .q-a_main{width: 90%;margin: 20px auto;text-align: left;font-weight: normal;}
    .question{background-color: #CCE5FF;padding: 20px;font-size: 20px;margin: 20px 0;}
    .q{display: grid;width: 95%;grid-template-columns: 20% 80%;}
    .q >h5{color: white;background-color: #FF6666;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 auto;}
    .q >p{line-height: 50px;}
    .question >.a{display: grid;margin-top: 15px;padding-top: 15px;border-top: dotted #666666 5px;grid-template-columns: 20% 80%;}
    .a >h5{color: white;background-color: #6673FF;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 auto;}
    .a >p{line-height: 50px;}
    .a >p:nth-child(3){grid-column: 2/3;}
    .a >p >a{text-decoration: revert;color: revert;}
    .link_image{align-items: center;margin: 60px 0 0;text-align: left;}
    .link_image div{width: 80%;margin: 0 auto;display: block;}
    .link_image img{width: 95%;height: auto;}
    .policy_img{max-width: 200px;}
    .mail_img{margin-top: 20px;}

    /* TOPコメント */
    #top_site >.more_comment{width: 100%;margin: 40px auto 0;text-align: center;}
    #top_site >.more_comment .readmore_com p{font-size: 16px;line-height: 30px;text-align: center;}
    #top_site >.more_comment .imp_color{font-size: 20px;}

    /* 社内行事プランナーコメント */
    .office_ev_content{margin: 30px auto 10px;padding: 40px;position: relative;background-color: #FFE6D2;}
    .office_ev_content::before{border-bottom:50px solid transparent;border-left:50px solid #8796C8;content: '';display: block;position: absolute;top: 0px;left: 0px;}
    .office_ev_content::after{border-left:50px solid transparent;border-bottom:50px solid #8796C8;content: '';display: block;position: absolute;bottom: 0px;right: 0px;}
    .office_ev_comment p{font-size: 13px;line-height: 25px;margin: 20px 0;background-color: #FFFAFA;padding: 20px;border-radius: 20px;}
    .office_ev_comment p::first-letter{font-size: 20px;color: #ff5100;}

    /* 社長あいさつ */
    .office_greeting{margin: 0 auto 10px;padding: 10px;position: relative;}
    .office_greeting p{font-size: 13px;line-height: 25px;margin: 20px 0;background-color: #FFFAFA;padding: 20px;border-radius: 20px;}
    .office_greeting p::first-letter{font-size: 20px;color: #ff5100;}

    /* 現場実績new */
    #genba_achievement{width: 600px;margin: 0 auto;}
    .ach_img{text-align: center;width: 100%;margin: 30px auto 0;overflow: hidden;background-color: #E6E6E6;padding: 50px 0 10px;border-radius: 10px;position: relative;}
    .image_group{display: inline-flex;translate: -575px;transition: all 2s ease-in-out;}
    .not_animetion{transition: none;}
    .ach_img a{width: 350px;}
    .ach_img img{width: 60%;height: auto;margin: 70px 0;opacity: 0.5;box-shadow: 10px 10px 25px 0 rgba(0, 0, 0, 0.7);transition: all 0.5s ease-in-out;}
    .ach_img .center_image >img{width: 100%;height: auto;margin: 0 0;opacity: 1;transition: all 0.5s ease-in-out;} 
    .button_group{display: inline-block;text-align: center;position: relative;}
    .position_button_group{display: flex;text-align: center;}
    .left_button{position: absolute;left: -140px;top: -185px;font-size: 40px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 25px;border-radius: 50px;}
    .right_button{position: absolute;right: -140px;top: -185px;font-size: 40px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 25px;border-radius: 50px;}
    .left_button,.right_button,.position_button{cursor: pointer;}
    .position_button{margin: 0 10px;}

    .ach_button{margin: 30px auto;text-align: center;}
    .ach_button a{display: inline-block;padding: 0.5em 1em;text-decoration: none;background: #668ad8;color: #FFF;border-bottom: solid 4px #627295;border-radius: 3px;font-size: 20px;}
    .ach_button a:active{-webkit-transform: translateY(4px);transform: translateY(4px);border-bottom: none;}

    #genba_achievement >.comment_achievement .imp_color{font-size: 20px;}
    .comment_achievement{text-align: left;margin: 20px 10px;font-size: 17px;position: relative;padding: 1.5em 1.2em;border: solid 2px #ffcb8a;border-radius: 3px 0 3px 0;}
    .comment_achievement::before,.comment_achievement::after{content: '';position: absolute;width:10px;height: 10px;border: solid 2px #ffcb8a;border-radius: 50%;}
    .comment_achievement::before{bottom:-12px;right:-12px;}
    .comment_achievement::after{top:-12px;left:-12px;}



/* 現場実績ブロック内の強調色を変更 */
#genba_achievement .comment_achievement .imp_color {
  color: #ff5100 !important;  /* 好きな色に変更してOK */
  font-weight: 700;            /* 太字のままにしたいなら残す。外したければ削除 */
}

/* strong / b を太字カラーにしたい場合（HTMLにあれば任意で）*/
#genba_achievement .comment_achievement strong,
#genba_achievement .comment_achievement b {
  color: #ff5100 !important;
}

}
/* ------------------タブレットサイズレイアウトend-------------------- */








/* ------------------スマホサイズレイアウトsta-------------------- */
@media screen and (max-width:599px){
    #hdset{padding: 5px 0;background: #fff;position: sticky;z-index: 9999;top:0;}
    .blankbox{margin-bottom:7.2%;}
    h1{font-size: 0.8rem; font-weight: normal;padding:0.5% 3% 0 3%;}
    .section{width: 80%;margin: 5% auto 0;}
    
    h4{font-size: 1.5em;}
    ul{margin:0; padding: 0; list-style: none;}
    a{color: #1c1c1c;text-decoration: none;}
    #kiyaku >.breadlist{display: flex;justify-content: flex-end;margin-top: 21px;width: 90%;font-size: 19px;}
    a:hover,a:active{text-decoration: none;opacity: 0.7;transition: .0.3s all ;}
    .hamburger-menu_mobile{display:none}
    .pc{display: none;}
    .tb{display: none;}
    .sp{display: block;}

    /* ヘッダーの設定 */
    .drawer_hidden {display: none;}
    .drawer_open {display: flex;height: 45px;width: 45px;justify-content: center;align-items: center;position: relative;z-index: 100;/* 重なり順を一番上にする */cursor: pointer;background: #19288c;}
    .drawer_open span,.drawer_open span:before,.drawer_open span:after {content: '';display: block;height: 3px;width: 25px;border-radius: 3px;background: #fff;transition: 0.5s;position: absolute;}
    .drawer_open span:before {bottom: 8px;}
    .drawer_open span:after {top: 8px;}
    #drawer_input:checked ~ .drawer_open span {background: rgb(255, 255, 255);}
    #drawer_input:checked ~ .drawer_open span::before {bottom: 0;transform: rotate(45deg);}
    #drawer_input:checked ~ .drawer_open span::after {top: 0;transform: rotate(-45deg);}
    .nav_content {width: 75%;;height: 100%;position: fixed;top: 0;left: 100%; /* メニューを画面の外に飛ばす */
    z-index: 99;background: #fff;transition: .5s;}
    .nav_list {list-style: none;}
    #drawer_input:checked ~ .nav_content {left: 25%;/* メニューを画面に入れる */background: #19288c;}
    .navigation{display: block;background:#fff;align-items: center;justify-content:center ;box-shadow:0 5px 5px -3px rgba(0,0,0,0.2);padding:5px;justify-content: space-around;}

    .navigation_box_img{width: 95%;}
    .navigation_box_img img{width: 100%;height: auto;}
    .navigation_box{width: 0;padding: 0;}
    .navigation_box nav{text-align: center;}
    .navigation_box nav ul{	list-style: none;display: block;justify-content:space-around;}
    .navigation_box nav ul ul{display: block;}

    .navigation_box nav ul li a{display: block;text-decoration: none;color: #fff;padding:2rem 1.5rem;transition:all .3s;font-weight:bold;}
    .navigation_box nav ul li li a{padding:0;}
    .navigation_box nav ul li a:hover{color:#999;transition: .0.3s all ;}

    /* 検索ボックス */
    .navigation_box_tel{width:100%;display: flex;align-items: center;}
    #tel_search{height: 35px;width: 70%;margin-right: 10px;}
    .nav_search{display: grid;grid-template-columns: 60% 40%;height: 100%;width: 100%;}
    #tel_search form input[type="text"]{border: solid black 1px;background-color: white;font-size: 8px;text-align: center;-webkit-appearance: none;}
    #tel_search form input[type="submit"]{border: none; background-color: #19288c;color: white;-webkit-appearance: none;}

    /* パソコン用のhtmlを非表示 */
    .displayonly{display: none;}

    /* スマホ用のレイアウト表示 */
    .smartonly{display: flex;display: grid;grid-template-columns: 50% 50%;}

    /* トップ画像 */
    #top_site{width: 90%;margin: 0 auto 0;}
    .top_page img{width: 100%;position: relative;z-index: -1;}
    .top_page h2{text-align: center;background-color: #19288c;color: white;font-size: 100%;padding: 25px;margin-top: -1%;}

    /* R&Rが提供するサービス一覧 */
    .service_image{margin: 40px 10% 10px 10%;display: block;}
    .service_image div:last-child{border-bottom: none;}
    .top_service{margin: 10px 15px 10px 15px;border-bottom: dotted #737373 3px;padding-bottom: 35px;text-align: center;}
    .top_service img{width: 100%;}
    .top_service a img {width: 100%;}
    .top_service a p{font-size: 14px;line-height: 1.3em; padding: 5px 10px;text-align: left;}
    .top_service a h4{font-size: 1.2rem;line-height: 1.3em;font-weight: 900;padding: 5px 7px;}
    .top_service a{text-decoration: none;}

    /* 現場実績 */
    .achievement_box{margin: 5% 15% 0;width: 70%;}
    .achievement_image{display: block;}
    .achievement_image img{height: auto;width: 100%;}
    .readmore_content{padding: 20px;background: #fff;border-radius: 10px 50px/50px 10px;background-color: rgba(25, 40, 140, 0.9);border: solid 8px #19288c;text-align: left;margin-top: 20px;}
    .readmore_content p{color: white;font-size: 15px;}

    /* R&Rオススメ商品はこちら */
    #top_popular_item{margin: 5% 15% 0;width: 70%;}
    .popular_list{display: grid;}
    .popular_list a:hover{opacity: 0.8; filter: brightness(110%);transition: .0.3s all ;}
    .popular_list li:last-child{border-bottom: none;}
    .popular_list img{height: auto;width: 100%;border-radius: 10px 0 10px 0;z-index: 1;}

    .popular_list li:nth-child(3){grid-row: 2/3;}
    .popular_list li:nth-child(7){grid-row: 6/7;}

    .img_left_side{margin-bottom: 20px;padding-bottom: 20px;border-bottom: solid #969696 2px;}
    .img_left_side a{display: grid;grid-template-columns: 40% 60%;}
    .img_left_side img{height: auto;width: 100%;}
    .img_left_side div{margin-left: 30px;display: grid;grid-template-rows: 40% 50% 10%;}
    .img_left_side .syouhin_id{display: none;}
    .img_left_side .syouhin_name{font-size: 15px;}
    .img_left_side .syouhin_comment{font-size: 12px;}
    .img_left_side .syouhin_pr{text-align: right;font-size: 12px;}
    .img_left_side .syouhin_price{color: red;}

    .img_right_side{margin-bottom: 20px;padding-bottom: 20px;border-bottom: solid #969696 2px;}
    .img_right_side{margin-bottom: 20px;}
    .img_right_side a{display: grid;grid-template-columns: 60% 40%;}
    .img_right_side img{height: auto;width: 100%;}
    .img_right_side div{margin-right: 30px;display: grid;grid-template-rows: 40% 50% 10%;}
    .img_right_side .syouhin_id{display: none;}
    .img_right_side .syouhin_name{font-size: 15px;}
    .img_right_side .syouhin_comment{font-size: 12px;}
    .img_right_side .syouhin_pr{text-align: right;font-size: 12px;}
    .img_right_side .syouhin_price{color: red;}

    /* R&Rが取り扱う商品カテゴリー_TOP */
    .category_box{font-size: 20px;text-align: center;display: grid;grid-template-columns: 50% 50%;width: 80%;margin: 5% auto 0;}
    .category_box img{height: auto;width: 70%;border-radius: 10px;}
    .category_box a{text-decoration: none;height: auto;margin: 5px 10px 15px 10px;padding: 20px;border-bottom: solid #19288c 2px;border-radius: 40px 0px;box-shadow: -5px -5px 15px 1px #D9D9D9;}

    /* R&Rレンタル尾道代表取締役より */
    #top_representative{margin: 5% 10% 0;width: 80%;}
    .ceo_commentleft{text-align: center;margin-bottom: 30px;}
    .ceo_commentleft img{height: auto;width: 90%;border: solid white 10px;box-shadow: 5px 5px 10px 1px #737373;}
    .ceo_commentright{position: relative;background: #95ccff;box-shadow: 0px 0px 0px 5px #95ccff;border: 2px dashed #fff;padding: 0.2em 0.5em;color: #333;}
    .ceo_commentright p{margin: 0;padding: 30px;font-size: 90%;}
    .sample_box12_tape {width: 30%;height: 35px;margin: -30px 35% 0 35%;background: rgba(251, 234, 144, 0.5);opacity: 0.9;}

    /* 採用情報バナー */
    #contract{margin: 5% 10% 0;width: 80%;}
    .shipping_explanation li img{width: 100%;}


    /* お問い合わせ */
    #top_contact{margin: 2% 10% 5%;width: 80%;text-align: center;}
    #con_intro{line-height: 1.5;font-size: 2.6vw;}
    .con_box{display: flex;justify-content: center;margin: 0 auto;}
    .con_btn{margin: 8% auto 12%;}
    .con_btn a{border:solid 4px #19288c;background: #19288c;padding: 5% 10%;font-size: 4vw;color: #ffffff;font-weight: bold;text-decoration: none;}
    .con_btn a:hover{background: #ffffff;color: #000000;transition: background-color 0.3s;}
    .con_btn a img{width: 23px;vertical-align: bottom;}
    .con_btn a:hover img{filter: invert(100%);transition: .0.3s all ;}
    .con_box div{background: #ff7700;margin: 0 2%;padding: 2%;width: 42%;}
    .con_box p:nth-child(1){font-weight: bold;color: #ffffff;border-bottom: solid 2px #ffffff;margin: 0px -8%;padding: 4% 0% 6%;font-size: 3.8vw;}
    .con_box p:nth-child(2){color: #000000;font-size: 3.4vw;background: #ffffff;padding: 4% 6%;margin: 8% auto;width: fit-content;border-radius: 30px;}
    .con_box p:nth-child(3){margin: 4% 0 2%;color: #ffffff;line-height: 1.5;font-size: 3vw;}
    .con_box p a{text-decoration: none;}

    /*---社内行事プランナー---*/
    #office_ev{margin: 0 10% 0;width: 80%;}
    .office_ev_banner img{width: 100%;}
    .office_ev_btn{text-align: center;margin: 20px 0 50px;}
    .office_ev_btn p{display: flex;justify-content: center;align-items: center;color: #333333;font-size: 12px;}
    .office_ev_btn p::before,
    .office_ev_btn p::after {width: 1px;height: 30px;background-color: #000000;content: '';}
    .office_ev_btn p::before {transform: rotate(-35deg);margin-right: 20px;}
    .office_ev_btn p::after {transform: rotate(35deg);margin-left: 20px;}

    /*---footer設定---*/
    footer{background:#19288c;color:#fff;}
    .footer_container{width:90%;justify-content: space-around;margin: 0 auto;padding:30px 0;}
    .footer_container{line-height:0.9rem;}
    .footer_contents{margin: 0 18px;}
    .footer_contents img{width:100%;}
    .footer_contents p{font-size: 15px;font-weight:bold;line-height: 1.3em;margin: 15px 0;}
    .footer_contents h4{font-size: 1rem;font-weight: bold;margin-bottom: 10px;margin-top: 40px;}
    .footer_contents a{line-height: 1.4em;color: #ffffff;text-decoration:none}
    .footer_contents ul{font-size: 12px;}
    .content_box{line-height: 1.4em;}
    .content_box li{line-height: 1.4em;font-size: 20px;margin-top: 5px;}
    
    .footer_contents iframe{width: 100% ;height: 55%;}


    /* 採用ページレイアウトsta------------------ */
    /* 青の四角とアンカーリンクのCSS */
    .simplebox{height: auto;background: #ebeaff;border: 2px solid #19288c;margin: auto;line-height: 1.5rem;margin: 5% 5% 0;width: 90%;}
    .simplebox p {text-align: center;font-size: 14px;padding: 17px 15px;}
    nav{display: block;}
    .chapter ul {display: flex;justify-content: center;animation-name: RightToLeft;animation-duration: 0.8s;font-size: 0.8rem;width: 50%;margin: auto;padding: 20px 0 0 0;}
    .chapter ul p{font-size: 10px;}
    .chapter li {display: flex;text-align: center;width: 100px;}
    .chapter li a img {display: block;width: 100px;margin-bottom: 5px;margin: 0 auto;}

    /* 募集要項に関してのCSS */
    .bosyuu{padding: 3%;}
    .plu-job-table {width: 100%;margin-top: 20px;table-layout: fixed;margin: auto;}
    tr, td, thead, tfoot, tbody {margin: 0;padding: 0;}
    .plu-job-table th {background-color: #f4f4f4;width: 110px;font-weight: 700;border: 2px solid #efefef;}
    .text {margin: 0;padding: 0;font-size: 0.8rem;line-height: 1.78;vertical-align: top;}
    .head {padding: 0.7em;font-size: 0.8rem;}
    .plu-job-table table th, table td {border: 2px solid #efefef;padding: 1em 0;}
    .no-wrap-text, .text {line-height: 2em;margin: 0 1.5em;}
    .accessmap{display: none;}

    /* エントリーボタン */
    .btn,a.btn,button.btn{user-select: none;vertical-align: middle;text-align: center;box-shadow: 0 8px 10px rgba(10,10,120,0.3);margin: 0 auto;font-size: 2rem;position: relative;color: #fff;}
    a.btn-svg{font-weight: 700;line-height: 54px;display: block;width: 274px;height: 64px;padding: 0;align-content: center;cursor: pointer;text-decoration: none;background-color: transparent;}
    a.btn-svg svg {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    a.btn-svg svg rect {-webkit-transition: all 400ms ease;transition: all 400ms ease;stroke: #19288c;stroke-width: 2;stroke-dasharray: 200px, 16px;stroke-dashoffset: 70px;}
    a.btn-svg:hover svg rect {stroke-dashoffset: 284px;transition: .0.3s all ;}
    a.btn-svg span {color: #19288c;}

    /* 理念のところ */
    .somebox01 {margin: 35px 20%;width: 60%;}
    .somebox02{margin: 35px 25%;width: 50%;}

    .rinen_core{border: 2px groove #000000;padding: 10px;margin: auto;font-size: 1.0rem;text-align: center;}

    .desktoponly {position: relative;width: 80%;margin: 0 10%;}
    .vijonarea02 {width: 100%;flex-wrap: wrap;justify-content: space-around;padding-bottom: 1em;font-size: 14px;}
    .mainarea01{font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;padding-bottom: 1rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-you.png);background-size: 30%;background-repeat: no-repeat;}
    .mainarea02{font-size: 1.5em;color: #222;font-family: Century Gothic;padding-top: 1.8em;padding-left: 5rem;padding-bottom: 1rem;-webkit-flex: 1;flex: 1;text-shadow: #fff 2px 2px 0px, #fff 0 2px 2px, #fff 1px 1px 0, #fff 0 1px 1px;background: url(img/en-we.png);background-size: 30%;background-repeat: no-repeat;}
    .subarea{display: none;}
    .vijonarea{display: ruby-text;}
    
    .corevalue{width: 80%;margin: 0 10%;}
    .rinen{width: 100%;}
    .sum02{width: 100%;display: grid;grid-template-rows: 45% 50%;}
    .itembox02{width: 100%;grid-row: 1/2;}
    .itembox02 img{width: 100%;}
    .itembox03{width: 100%;grid-row: 2/3;}
    .itembox03 img{width: 100%;}
    .itembox03 ul{display: grid;grid-template-columns: 25% 25% 25% 25%;}
    .itembox03 li{margin: 1px;border: #737373 solid 1px;box-shadow: -4px 4px 8px rgba(0,0,0,0.3);border: 1px solid #fff;transition: 0.1s ease-in-out;}
    .itembox03 li:hover{box-shadow: -4px 4px 15px rgba(0,0,0,0.6);transform: scale(1.1,1.1);transition: .0.3s all ;}
    .itembox03 a:hover{opacity: 1; filter: brightness(100%);transition: .0.3s all ;}

    .fancybox-overlay {position: absolute;top: 0;left: 0;overflow: hidden;display: none;z-index: 8010;background: url('js/ps/fancybox_overlay.png');}
    .fancybox-overlay-fixed {position: fixed;bottom: 0;right: 0;}
    .fancybox-lock .fancybox-overlay {overflow: auto;overflow-y: scroll;}
    .fancybox-opened .fancybox-title {visibility: visible;}
    .fancybox-title-float-wrap {position: absolute;bottom: 0;right: 50%;margin-bottom: -35px;z-index: 8050;text-align: center;}
    .fancybox-title-float-wrap .child {display: inline-block;margin-right: -100%;padding: 2px 20px;background: transparent; /* Fallback for web browsers that doesn't support RGBa */background: rgba(0, 0, 0, 0.8);-webkit-border-radius: 15px;-moz-border-radius: 15px;border-radius: 15px;text-shadow: 0 1px 2px #222;color: #FFF;font-weight: bold;line-height: 24px;white-space: nowrap;}
    .fancybox-title-outside-wrap {position: relative;margin-top: 10px;color: #fff;}
    .fancybox-title-inside-wrap {padding-top: 10px;}
    .fancybox-title-over-wrap {position: absolute;bottom: 0;left: 0;color: #fff;padding: 10px;background: #000;background: rgba(0, 0, 0, .8);}

    /* 採用フロー */
    .flow{margin: 0 auto;padding: 3%;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
    .flow_box{display: flex;justify-content: space-between;padding: 0 0 0.8rem 0;margin: 0 0 0.8rem 0;}
    .flow_box .step{width: 20%;position: relative;text-align: center;padding-right: 10px;}
    .flow_box .step p {color: #195DAA;font-size: 100%;line-height: 1;}
    .flow_box .flow_main {flex: 1;padding: 0 0 0 1rem;border-left: 1px solid #ddd;}
    .flow_box .flow_main h4 {font-weight: bold;font-size: 1.3rem;margin: 0 0 0.8rem 0;}
    .flow p{margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;line-height: 1.5rem;}
    /* 採用ページレイアウトend------------------ */

    /* パンくずsta------------------ */
    .breadcast{display: flex; justify-content:right;}
    .breadcast li{font-weight: normal; font-size: 15px;}
    /* パンくずend------------------ */





    /* よくある質問 */
    #q-a_content{margin-top: 30px;}
    .q-a_main{width: 90%;margin: 20px auto;text-align: left;font-weight: normal;}
    .question{background-color: #CCE5FF;padding: 20px;font-size: 16px;margin: 20px 0;}
    .q{display: block;width: 95%;}
    .q >h5{color: white;background-color: #FF6666;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 0;}
    .q >p{line-height: 25px;margin: 10px 0 0 20px;}
    .question >.a{display: block;margin-top: 15px;padding-top: 15px;border-top: dotted #666666 5px;}
    .a >h5{color: white;background-color: #6673FF;height: 50px;width: 50px;text-align: center;line-height: 50px;border-radius: 50px;margin: 0 0;}
    .a >p{line-height: 25px;margin: 10px 0 0 20px;}
    .a >p >a{text-decoration: revert;color: revert;}
    .link_image{align-items: center;margin: 60px 0 0;text-align: left;}
    .link_image div{width: 100%;margin: 0 auto;display: block;}
    .link_image img{width: 100%;height: auto;}
    .policy_img{max-width: 270px;}
    .mail_img{margin-top: 20px;}

    /* TOPコメント */
    #top_site >.more_comment{width: 95%;margin: 40px auto 60px;text-align: center;}
    #top_site >.more_comment .readmore_com p{font-size: 15px;line-height: 30px;text-align: left;}
    #top_site >.more_comment .imp_color{font-size: 18px;}
    
    /* 社内行事プランナーコメント */
    .office_ev_content{margin: 30px auto 10px;padding: 20px 20px 40px;position: relative;background-color: #FFE6D2;}
    .office_ev_content::before{border-bottom:50px solid transparent;border-left:50px solid #8796C8;content: '';display: block;position: absolute;top: 0px;left: 0px;}
    .office_ev_content::after{border-left:50px solid transparent;border-bottom:50px solid #8796C8;content: '';display: block;position: absolute;bottom: 0px;right: 0px;}
    .office_ev_comment p{font-size: 13px;line-height: 25px;margin: 20px 0;background-color: #FFFAFA;padding: 20px;border-radius: 20px;}
    .office_ev_comment p::first-letter{font-size: 17px;color: #ff5100;}

    /* 現場実績new */
    #genba_achievement{width: 350px;margin: 0 auto;}
    .ach_img{text-align: center;width: 100%;margin: 30px auto 0;overflow: hidden;background-color: #E6E6E6;padding: 35px 0 10px;border-radius: 10px;position: relative;height: 350px;}
    .image_group{display: inline-flex;translate: -450px;transition: all 2s ease-in-out;}
    .not_animetion{transition: none;}
    .ach_img a{width: 250px;}
    .ach_img img{width: 60%;height: auto;margin: 70px 0;opacity: 0.5;box-shadow: 10px 10px 25px 0 rgba(0, 0, 0, 0.7);transition: all 0.5s ease-in-out;}
    .ach_img .center_image >img{width: 100%;height: auto;margin: 0 0;opacity: 1;transition: all 0.5s ease-in-out;} 
    .button_group{display: inline-block;text-align: center;position: relative;margin-top: 50px;}
    .position_button_group{display: flex;text-align: center;}
    .left_button{position: absolute;left: 50px;top: -90px;font-size: 20px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 20px;border-radius: 50px;}
    .right_button{position: absolute;right: 50px;top: -90px;font-size: 20px;color: white;background-color: rgba(00, 00, 00, 0.7);padding: 15px 20px;border-radius: 50px;}
    .left_button,.right_button,.position_button{cursor: pointer;}
    .position_button{margin: 0 10px;}

    .ach_button{margin: 30px auto;text-align: center;}
    .ach_button a{display: inline-block;padding: 0.5em 1em;text-decoration: none;background: #668ad8;color: #FFF;border-bottom: solid 4px #627295;border-radius: 3px;font-size: 20px;}
    .ach_button a:active{-webkit-transform: translateY(4px);transform: translateY(4px);border-bottom: none;}

    #genba_achievement >.comment_achievement .imp_color{font-size: 17px;}
    .comment_achievement{text-align: left;margin: 20px 10px;font-size: 15px;position: relative;padding: 1.5em 1.2em;border: solid 2px #ffcb8a;border-radius: 3px 0 3px 0;}
    .comment_achievement::before,.comment_achievement::after{content: '';position: absolute;width:10px;height: 10px;border: solid 2px #ffcb8a;border-radius: 50%;}
    .comment_achievement::before{bottom:-12px;right:-12px;}
    .comment_achievement::after{top:-12px;left:-12px;}
}

/* 現場実績ブロック内の強調色を変更 */
#genba_achievement .comment_achievement .imp_color {
  color: #ff5100 !important;  /* 好きな色に変更してOK */
  font-weight: 700;            /* 太字のままにしたいなら残す。外したければ削除 */
}

/* strong / b を太字カラーにしたい場合（HTMLにあれば任意で）*/
#genba_achievement .comment_achievement strong,
#genba_achievement .comment_achievement b {
  color: #ff5100 !important;
}
/* ------------------スマホサイズレイアウトend-------------------- */




/* ===== Grid ===== */
/* SP: 1列 */
#sns.sns-fix .ig-embed-grid,
#sns.sns-fix .x-embed-grid{
  display:grid; gap:16px; justify-items:center; align-items:start;
  grid-template-columns:minmax(320px, 92vw);
}

/* TB: 2列 */
@media (min-width:768px) and (max-width:1199.98px){
  #sns.sns-fix .ig-embed-grid,
  #sns.sns-fix .x-embed-grid{
    gap:20px; grid-template-columns:repeat(2, minmax(320px, 1fr));
  }
}

/* PC: 3列×2行（数値はここだけで微調整） */
@media (min-width:1200px){
  #sns{ --igW: 320px; --igH: 360px; --gap: 18px; --igShift: -44px; }
  #sns.sns-fix .ig-embed-grid{
    gap:var(--gap); grid-template-columns:repeat(3, var(--igW));
    justify-items:center; align-items:start;
  }
}

/* ===== Instagram（iframe直指定：あなたのHTML構造に合わせる） ===== */
#sns.sns-fix .ig-item{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; box-sizing:border-box;
}
/* SP: 通常埋め込み */
#sns.sns-fix .ig-item > iframe{
  display:block; width:100%; height:auto; border:0; margin:0 auto; min-width:0;
}
/* TB: 写真だけ風（下UIトリム） */
@media (min-width:768px) and (max-width:1199.98px){
  #sns .ig-section .ig-item{ width:100%; max-width:520px; height:380px; overflow:hidden; }
  #sns .ig-section .ig-item > iframe{
    width:100%; height:760px; border:0; transform:translateY(0px); transform-origin:top center;
  }
}
/* PC: 写真だけ風（小さめカードで3×2に収める） */
@media (min-width:1200px){
  /* 念のための初期化（過去CSSの打ち消し） */
  #sns.sns-fix .ig-item{ width:auto; height:auto; overflow:visible; }
  #sns.sns-fix .ig-item > iframe{ min-width:0; max-width:none; transform:none; }

  /* 固定箱＋トリム */
  #sns.sns-fix .ig-item{ width:var(--igW); height:var(--igH); overflow:hidden; }
  #sns.sns-fix .ig-item > iframe{
    display:block; width:var(--igW); height:calc(var(--igH) * 1.8);
    margin:0 auto; border:0; transform:translateY(var(--igShift)); transform-origin:top center;
  }
}

/* ===== X（Twitter） ===== */
#sns.sns-fix .x-item{
  width:100%; max-width:520px; box-sizing:border-box;
  display:flex; justify-content:center; align-items:stretch;
  padding:8px; overflow:hidden; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
}
#sns.sns-fix .x-item .twitter-tweet{ margin:0 auto; width:100%; max-width:520px; }

/* PCでXもIG幅に揃える（任意） */
@media (min-width:1200px){
  #sns.sns-fix .x-item{ width:var(--igW); max-width:var(--igW); }
  #sns.sns-fix .x-item .twitter-tweet{ max-width:var(--igW); }
}

/* =========================
   SNSバナー（IG / X）サイズ調整：599px基準
   ※CSSの一番最後に置く
========================= */

/* 共通：バナー画像は中央寄せ＆余計な隙間防止 */
.center_banner img{
  display:block;
  height:auto;
  margin:0 auto;
}

/* ---------- SP：〜599px ---------- */
@media (max-width:599px){
  /* IG：https://r-and-r.jp/img/company_insta.jpg */
  .center_banner img[src*="company_insta.jpg"]{
    width: clamp(240px, 78vw, 380px) !important;
    max-width: none !important;
  }
  /* X：img/company_x.jpg */
  .center_banner img[src*="company_x.jpg"]{
    width: clamp(240px, 78vw, 380px) !important;
    max-width: none !important;
  }
}

/* ---------- TB：600〜1199.98px ---------- */
@media (min-width:600px) and (max-width:1199.98px){
  .center_banner img[src*="company_insta.jpg"]{
    width: clamp(360px, 48vw, 560px) !important;
    max-width: none !important;
  }
  .center_banner img[src*="company_x.jpg"]{
    width: clamp(360px, 48vw, 560px) !important;
    max-width: none !important;
  }
}

/* ---------- PC：1200px〜 ---------- */
@media (min-width:1200px){
  .center_banner img[src*="company_insta.jpg"]{
    width: clamp(520px, 45vw, 900px) !important;
    max-width: none !important;
  }
  .center_banner img[src*="company_x.jpg"]{
    width: clamp(520px, 45vw, 900px) !important;
    max-width: none !important;
  }
}


/* ==== 追加パッチ：PC(>=1200px) でIGを中央寄せ、Xも 3×2 に ==== */
@media (min-width:1200px){
  /* 共有変数（既存の値を使う） */
  #sns{ --igW: 320px; --igH: 360px; --gap: 18px; --igShift: 0px; }

  /* 1) グリッド自体を中央寄せ（左寄りに見えるのを解消） */
  #sns.sns-fix .ig-embed-grid{
    grid-template-columns: repeat(3, var(--igW)) !important;
    gap: var(--gap) !important;
    justify-content: center !important;   /* ← グリッド全体の中央寄せ */
    justify-items: center !important;     /* 各カードも中央 */
    align-items: start !important;
  }

  /* 2) X も IG と同じ 3×2 ＆中央寄せに */
  #sns.sns-fix .x-embed-grid{
    display: grid !important;
    grid-template-columns: repeat(3, var(--igW)) !important;
    gap: var(--gap) !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
  }
  /* Xカードの幅をIGと合わせる */
  #sns.sns-fix .x-item{
    width: var(--igW) !important;
    max-width: var(--igW) !important;
    box-sizing: border-box !important;
  }
  #sns.sns-fix .x-item .twitter-tweet{
    width: 100% !important;
    max-width: var(--igW) !important;
    margin: 0 auto !important;
  }
}

/* ===== SNS：スマホ見切れ防止（max-width: 767.98px）===== */
@media (max-width: 767.98px){
  /* セクション自体で横スクロールを封じる & 余白少し広め */
  #sns.sns-fix{ width:100% !important; overflow-x:hidden !important; }
  #sns.sns-fix .sns-inner{ padding:0 12px !important; overflow-x:hidden !important; }

  /* 1列グリッド & すべて中央寄せ */
  #sns.sns-fix .ig-embed-grid,
  #sns.sns-fix .x-embed-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    justify-items: center !important;
    align-items: start !important;
  }

  /* カード器は100%幅に固定 */
  #sns.sns-fix .ig-item,
  #sns.sns-fix .x-item{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Instagram：固定高さやtransformを全解除 → 幅100%で自動高さ */
  #sns .ig-section .ig-item{ height:auto !important; overflow:visible !important; }
  #sns .ig-section .ig-item > iframe{
    width:100% !important;
    height:auto !important;
    min-width:0 !important;
    max-width:none !important;
    transform:none !important;
    border:0 !important;
  }

  /* X（Twitter）：埋め込みの最大幅も100%に */
  #sns.sns-fix .x-item .twitter-tweet{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
}

/* ===== SNS：スマホ見切れ＆縦不足の最終パッチ ===== */
@media (max-width: 767.98px){
  /* セクション側で横スクロールを封じる */
  #sns.sns-fix{ width:100% !important; overflow-x:hidden !important; }
  #sns.sns-fix .sns-inner{ padding:0 12px !important; overflow-x:hidden !important; }

  /* 1列・中央寄せ。最小幅320pxの制約を外す（minmax→1fr） */
  #sns.sns-fix .ig-embed-grid,
  #sns.sns-fix .x-embed-grid{
    display:grid !important;
    grid-template-columns: 1fr !important;  /* ← min-width縛りを撤廃 */
    gap:14px !important;
    justify-items:center !important;
    align-items:start !important;
  }

  /* カード器は100%幅 */
  #sns.sns-fix .ig-item,
  #sns.sns-fix .x-item{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Instagram：transformや固定高さを完全解除＋“最低高さ”を持たせる */
  #sns .ig-section .ig-item{ height:auto !important; }
  #sns .ig-section .ig-item > iframe{
    display:block !important;
    width:100% !important;
    height:auto !important;
    /* 端末が細い時も潰れないよう最低高さを可変で確保（4:5目安） */
    min-height: clamp(420px, 125vw, 560px) !important;
    /* ↑ 画面幅が狭いほど少し高めに。420～560pxの範囲で自動調整 */
    max-width:none !important;
    min-width:0 !important;
    transform:none !important;
    border:0 !important;
  }

  /* 念のため、SNS内のiframe/画像は絶対にはみ出さない */
  #sns.sns-fix iframe, 
  #sns.sns-fix img{
    max-width:100% !important;
  }

  /* X（Twitter）側も100%幅に合わせる */
  #sns.sns-fix .x-item .twitter-tweet{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
  }
}

/* 列数はそのまま。例 */
.x-embed-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(1, minmax(320px,1fr));
}
@media (min-width: 768px){
  .x-embed-grid{ grid-template-columns: repeat(2, minmax(320px,1fr)); }
}
@media (min-width: 1080px){
  .x-embed-grid{ grid-template-columns: repeat(3, minmax(320px,1fr)); }
}

/* 余白が出ても見栄えを整える */
.x-item{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.twitter-tweet{ margin:0 auto !important; }

/* ラッパでクリッピングして高さ固定 */
.tweet-box{
  position: relative;
  height: 420px;             /* ←ここで見せたい高さを統一 */
  overflow: hidden;
  border-radius: 12px;
}


/* もっと見るボタン */
.tweet-more{
  position: absolute;
  left: 50%; bottom: 10px;
  transform: translateX(-50%);
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 9999px;
  background: #0f1419;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* 埋め込みの余白を詰める＆横幅安定 */
.tweet-box .twitter-tweet{ margin: 0 !important; }
.tweet-box iframe{ width: 100% !important; }

/* ====== カラー変数（好みで変更OK） ====== */
:root{
  --card-border: #668ad8;     /* 枠（フチ）の色：濃いネイビー */
  --card-shadow: rgba(30, 64, 175, .18);
  --btn-bg:      #2563eb;     /* ボタン色（ブルー） */
  --btn-bg-hov:  #19288c;     /* ボタンのホバー色 */
  --btn-text:    #ffffff;     /* ボタン文字色 */
}

/* ====== 枠をくっきりさせる（カード＋埋め込みラッパ） ====== */
.x-item{
  border: 2px solid var(--card-border);
  box-shadow: 0 6px 18px var(--card-shadow);
  border-radius: 14px;
  padding: 10px;
  background:#fff;
}

/* 埋め込みを切り抜く枠（tweet-box）も同じカラーで統一 */
.tweet-box{
  position: relative;
  height: 420px;              /* 見せたい高さ。必要に応じて調整 */
  overflow: hidden;
  border: 2px solid var(--card-border);
  border-radius: 12px;
  background: #fff;
}


/* 埋め込み余白＆幅補正 */
.tweet-box .twitter-tweet{ margin:0 !important; }
.tweet-box iframe{ width:100% !important; }

/* ====== もっと見るボタン（サイズUP＋視認性UP） ====== */
.tweet-more{
  position:absolute; left:50%; bottom:12px; transform:translateX(-50%);
  display:inline-block;
  padding: 10px 18px;                 /* ←少し大きく */
  font-size: 14px; font-weight: 700;  /* ←文字も見やすく */
  color: var(--btn-text);
  background: var(--btn-bg);
  text-decoration:none;
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
  border: 1px solid rgba(255,255,255,.35);
}
.tweet-more:hover{ background: var(--btn-bg-hov); }
.tweet-more:focus{
  outline: 2px solid #fff; outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .3);
}

/* ==== 外側の枠（.x-item）を消す ==== */
.x-item{
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* 下端フェード（グラデーション） -------------------- */
/* 背景色を変えたい場合はここだけ変える */
:root{ --tweet-bg: #fff; }

.tweet-box{
  position: relative;              /* ← 必須：重ねるための基準 */
  background: var(--tweet-bg);
}

/* 下から白へフェードするオーバーレイ（クリックの邪魔はしない） */
.tweet-box::after{
  content:"";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 140px;                   /* フェードの高さ（お好みで） */
  pointer-events: none;            /* ← 埋め込みの操作を妨げない */
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.88) 60%,
    var(--tweet-bg) 100%
  );
}

/* ボタンはフェードの上に表示 */
.tweet-more{
  position: absolute;
  left: 50%; bottom: 12px;
  transform: translateX(-50%);
  z-index: 2;                      /* ← フェードより上 */
}


/* SNS　end */



/* リスト体裁（そのまま使用OK） */
#topics .topics-list,
#topics .topics-source{ list-style:none; margin:0; padding:0; }
#topics .topics-list li{
  display:flex; gap:12px; align-items:baseline;
  padding:10px 12px; border-bottom:1px solid #e5e7eb;
}
#topics .topics-list li a{
  text-decoration:none; color:#111;
  transition: background .2s ease, border-color .2s ease, transform .08s ease;
}
#topics .topics-list li a:hover{ text-decoration:underline; }
#topics .topics-list time{ color:#6b7280; font-size:.9rem; white-space:nowrap; }

/* TOPICS：リスト幅を絞って中央に */
#topics{
  --topics-w: 1100px;   /* 上限幅（好みで 900～1200px くらい） */
  --topics-vw: 72vw;    /* 画面に対する相対幅 */
}
#topics .topics-list{
  width: min(var(--topics-w), var(--topics-vw));
  margin: 0 auto;               /* 中央寄せ */
}

/* 行の左右に少し余白をつけたい場合（任意） */
#topics .topics-list li{
  padding-left: 8px;
  padding-right: 8px;
}

/* タブレット以下はやや広めに（任意） */
@media (max-width: 820px){
  #topics{ --topics-vw: 88vw; }  /* 画面に合わせて自動で広がる */
}

/* TOPICS：行レイアウト */
#topics .topics-list .topic-item{
  display:flex;
  align-items:center;
  gap: 18px;
}

/* 日付を左に（先頭）、コメントを右に */
#topics .topic-item .t-date{ 
  order: 0;
  min-width: 10em;                 /* 桁ズレ防止 */
  color: #6b7280;                   /* うすめのグレー */
  font-variant-numeric: tabular-nums;
}
#topics .topic-item .t-text{
  order: 1;
  flex: 1;
}

/* ===== TOPICS 一式 ===== */

/* 見出しの下線はそのまま。本文を中央の細い帯に収める */
#topics .topics-live{
  width: min(1080px, 88vw);
  margin: 0 auto;
}

/* 1行スタイル：リンクでもプレーンでもOK */
#topics .topics-live .topic-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  line-height: 1.6;
  overflow: hidden;
}

/* —— 日付を必ず左側に（orderで先頭へ）。どのパターンでも拾えるように網羅 —— */
#topics .topic-item time,
#topics .topic-item .t-date,
#topics .topic-item .date{
  order: -1;                         /* ← 日付を先頭に */
  min-width: 11em;                   /* 幅を固定して桁ズレ防止 */
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 本文（リンク有り／無しの両対応） */
#topics .topic-item a,
#topics .topic-item .t-text,
#topics .topic-item span{
  flex: 1 1 auto;
  min-width: 0;                      /* 省略記号が効くように */
  color: #111827;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ホバー（リンクのみ反応） */
#topics .topic-item a:hover{
  text-decoration: underline;
}

#topics .topic-item.no-date::before{
  content:"";
  display:inline-block;
  width:11em;       /* 日付カラムと同じ幅 */
  flex:0 0 11em;
}

/* ▼トピックス：日付列を固定幅にして、本文の開始位置をそろえる */
#topics .topics-list{
  --date-col: 10.5em;                /* 日付カラムの幅：好みで調整（9.5–12emあたり） */
}

/* 各行を2カラム（左=日付 / 右=本文）のグリッドにする */
#topics .topics-list .topic-item{
  display: grid;
  grid-template-columns: var(--date-col) 1fr;  /* 左が固定幅、右が可変 */
  column-gap: 16px;
  align-items: baseline;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* 日付は左カラム */
#topics .topics-list .topic-item time{
  grid-column: 1;
  color: #6b7280;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 本文（リンク／テキスト）は右カラムに配置 */
#topics .topics-list .topic-item > a,
#topics .topics-list .topic-item > span,
#topics .topics-list .topic-item > .t-text{
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111827;
  text-decoration: none;
}

#topics .topics-list .topic-item > a:hover{
  text-decoration: underline;
}

/* スマホは少しゆったりめ（任意） */
@media (max-width: 820px){
  #topics .topics-list{ --date-col: 8.5em; }
}

/* ===== TOPICS：スマホ見切れ防止（max-width: 767.98px）===== */
@media (max-width: 767.98px){
  /* 見出しは今のまま全幅ラインでOK。本文帯だけ狭めて中央寄せ */
  #topics .topics-live{
    width:92vw !important;
    margin:0 auto !important;
  }

  /* 1行表示をやめて“縦2段”に。行間は少しゆったり */
  #topics .topics-live .topic-item{
    display:block !important;
    padding:10px 8px !important;
    line-height:1.7 !important;
    overflow:visible !important;
  }

  /* 日付は先頭の独立行（小さめ・薄い色） */
  #topics .topic-item time,
  #topics .topic-item .t-date,
  #topics .topic-item .date{
    display:block !important;
    order: -1 !important;
    min-width:0 !important;
    margin:0 0 4px !important;
    font-size:0.92rem !important;
    color:#6b7280 !important;
    white-space:normal !important;
  }

  /* 本文は折り返し可（省略記号を解除） */
  #topics .topic-item a,
  #topics .topic-item .t-text,
  #topics .topic-item span{
    display:block !important;
    flex: 1 1 auto !important;
    min-width:0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word !important; /* 長い英数にも強い */
  }
}

/* TOPICS　end */





/* === 検索の横に出る線を消す（親の枠線を外す）=== */
@media (min-width:1025px){
  #hdset .navigation.displayonly .nav_search{
    border:none !important;      /* ← これが“線”の正体 */
    gap:0 !important;
    height:32px;
    overflow:hidden;
  }
  /* 入力とボタンで一体風の枠線に */
  #hdset .navigation.displayonly .nav_search input[type="text"]{
    border:1px solid #000 !important;
    border-right:none !important;
    height:100%; padding:0 10px; box-sizing:border-box;
    width: clamp(100px, 10vw, 180px);   /* さらに少し細く */
    min-width: 100px;
  }
  #hdset .navigation.displayonly .nav_search input[type="submit"]{
    border:1px solid #000 !important;
    border-left:none !important;
    background:#0b2d86; color:#fff; height:100%;
    padding:0 12px; white-space:nowrap;
  }
}

/* === カテゴリ間の隙間をもう一段タイトに === */
@media (min-width:1025px){
  /* 余白：16→最小6pxまで自動縮小（今よりタイト） */
  #hdset .navigation.displayonly .navigation_box nav ul{
    gap: clamp(6px, 0.9vw, 16px) !important;
  }
  /* 文字サイズも少しだけ下げ幅を広げる */
  #hdset .navigation.displayonly .navigation_box nav ul li a{
    font-size: clamp(11.5px, 0.95vw, 15px) !important;
    letter-spacing: 0;
    padding: 0;
    white-space: nowrap;
    line-height: 1;
  }
  /* さらに詰めたい時の保険（小さい画面帯） */
  @media (max-width:1280px){
    #hdset .navigation.displayonly .navigation_box nav ul{ gap:8px !important; }
  }
  @media (max-width:1200px){
    #hdset .navigation.displayonly .navigation_box nav ul{ gap:6px !important; }
  }
}

/* === 検索ボックス：入力とボタンをピッタリ結合 === */
@media (min-width:1200px){
  #hdset .navigation.displayonly .nav_search{
    display:flex !important;          /* ← これが要！ */
    align-items:center !important;
    gap:0 !important;                  /* 余白ゼロ */
    height:32px;
    border:none !important;            /* 親の枠は持たせない */
    overflow:hidden;
  }

  /* 入力欄：右枠を消して角丸 左だけ */
  #hdset .navigation.displayonly .nav_search input[type="text"]{
    border:1px solid #000 !important;
    border-right:none !important;
    border-radius:4px 0 0 4px !important;
    height:100%; padding:0 10px; box-sizing:border-box;
    width: clamp(100px, 10vw, 180px);
    min-width:100px;
    background:#fff;
  }

  /* 送信ボタン：左枠を消して角丸 右だけ（念のため -1px 重ねる）*/
  #hdset .navigation.displayonly .nav_search input[type="submit"]{
    border:1px solid #000 !important;
    border-left:none !important;
    border-radius:0 4px 4px 0 !important;
    margin-left:-1px;                  /* サブピクセルの白筋対策 */
    height:100%; padding:0 12px; box-sizing:border-box;
    background:#0b2d86; color:#fff; font-weight:600;
    white-space:nowrap; cursor:pointer;
  }
  #hdset .navigation.displayonly .nav_search input[type="submit"]:hover{ opacity:.9; }
}










/* ================= SDGs セクション 基本 ================= */

#top_sdgs{
  width: 80%;
  margin: 0 auto;
}

/* 上のオレンジ枠ボックス */
.sdgs_com{
  text-align: center;
  margin: 30px auto 0;
  font-size: 18px;
  padding: 30px 20px;
  border: 2px solid #000;
  border-radius: 20px;

  /* アミ模様ナシでオレンジ背景 */
  background-image: none !important;
  background-color: #FFE6D2 !important;
}

/* 画像＋文章の2カラム本体 */
.sdgs_main_group{
  margin-top: 30px;
  display: grid;
  grid-template-columns: 40% 60%; /* 画像：文章 */
  column-gap: 48px;              /* ← ここが“横の余白” */
  align-items: flex-start;
}

.sdgs_image{
  text-align: center;
}

.sdgs_image img{
  width: 100%;
  height: auto;
  border: 1px solid #000;
}

.sdgs_image p{
  color: #4D4D4D;
  font-size: 12px;
  margin-top: 6px;
}

/* 右側テキストエリア */
.sdgs_com_group{
  margin: 40px 20px 0;
}

.sdgs_com_group > p{
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
}

/* 取り組みリスト */
.torikumi_li{
  margin: 10px 30px 0;
  padding-left: 1.2em;
  list-style: disc;
}

.torikumi_li li{
  margin: 18px 0;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.6;
}

/* 下線は消す（セクション限定・最優先） */
#top_sdgs .torikumi_li li p{
  text-decoration: none !important;
  margin: 0;
}
/* 1025～1199px：画像と文章の間を広めにとる */
@media (min-width: 1025px) and (max-width: 1199px){

  #top_sdgs{
    width: 90%;
  }

  #top_sdgs .sdgs_main_group{
    grid-template-columns: 36% 64%; /* 画像を少し細く、文章側を広く */
    column-gap: 56px;               /* ← ここを増やすと、さらに離れる */
  }
}
@media (max-width: 768px){

  #top_sdgs{
    width: 94%;
  }

  .sdgs_com{
    margin: 20px auto 0;
    font-size: 15px;
    padding: 16px 10px;
  }

  .sdgs_main_group{
    grid-template-columns: 1fr;  /* 1カラムに */
    row-gap: 24px;
    margin-top: 20px;
  }

  .sdgs_com_group{
    margin: 0 10px;
  }

  .sdgs_com_group > p{
    font-size: 18px;
  }

  .torikumi_li{
    margin: 12px 18px 0;
  }

  .torikumi_li li{
    font-size: 18px;
    margin: 10px 0;
  }
}


/* ───────── 健康宣言セクション 共通（スマホ〜） ───────── */

#top_kenkousengen{
  width: 90%;
  margin: 0 auto 40px;
}

#top_kenkousengen .kenkou_main_group{
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr;   /* スマホは縦並び */
  row-gap: 24px;
}

/* 左側：証明書画像 */
#top_kenkousengen .kenkou_image{
  text-align: center;
}

#top_kenkousengen .kenkou_image img{
  width: 100%;
  height: auto;
  border: 1px solid #000;
}

#top_kenkousengen .kenkou_image p{
  color: #4D4D4D;
  font-size: 12px;
}

/* 右側：チェックマーク＋本文 */
#top_kenkousengen .kenkou_com_group{
  display: grid;
  grid-template-columns: 24px 1fr;  /* 左：アイコン / 右：テキスト */
  grid-auto-rows: auto;
  column-gap: 10px;
  row-gap: 16px;
  margin: 0;
}

#top_kenkousengen .kenkou_com_group p{
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}

#top_kenkousengen .check_img{
  width: 24px;
  height: auto;
  align-self: start;   /* テキスト先頭行に揃える */
  margin-top: 2px;
}

/* 強調部分：色だけ赤、サイズ・太さは本文と同じに統一 */
#top_kenkousengen .kenkou_com_group .important{
  color: #D92C2C;
  font-weight: inherit;
  font-size: 1em;
  background: none;
  text-decoration: none;
}



/* ───────── 768px〜：画像と文章を横並び ───────── */

@media (min-width: 768px){

  #top_kenkousengen{
    width: 80%;
  }

  #top_kenkousengen .kenkou_main_group{
    /* 左：画像（最大360px）、右：文章 */
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }

  #top_kenkousengen .kenkou_com_group{
    margin-top: 6%;
    column-gap: 14px;
    row-gap: 20px;
  }

  #top_kenkousengen .kenkou_com_group p{
    font-size: 18px;
    line-height: 1.75;
  }

  #top_kenkousengen .check_img{
    width: 28px;
    margin-top: 4px;
  }
}



/* ───────── 1025〜1199px：さっき直した「詰まりゾーン」 ───────── */
/* 文章側を広めにとって、画像とのあいだも40pxあける */

@media (min-width: 1025px) and (max-width: 1199px){

  #top_kenkousengen{
    width: 90%;
    margin: 0 auto 60px;
  }

  #top_kenkousengen .kenkou_main_group{
    grid-template-columns: 36% 64%;  /* 画像を少し細く・文章広く */
    column-gap: 40px;                /* ← ここが「横の余白」 */
    align-items: start;
  }
}



/* ───────── 1200px〜：ワイドPC向け調整 ───────── */

@media (min-width: 1200px){

  #top_kenkousengen{
    width: 80%;
  }

  #top_kenkousengen .kenkou_com_group p{
    font-size: 21px;
  }

  #top_kenkousengen .check_img{
    width: 30px;
  }
}

/* ───────── 768〜1024pxだけ：画像を小さく、文字エリア広め ───────── */
@media (min-width: 768px) and (max-width: 1024px){

  /* 画像側の幅をちょっと細めにする（260px） */
  #top_kenkousengen .kenkou_main_group{
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: 36px;  /* 画像と文字のあいだの余白 */
  }

  /* 画像自体も260pxを上限にしておく */
  #top_kenkousengen .kenkou_image img{
    max-width: 260px;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* ─ PC幅だけ、証書画像のサイズをそろえる ─ */
@media (min-width: 1024px) {
  .rr-doc-img {
    display: block;
    width: 360px!important;      /* 好きな幅に調整してOK（320〜400pxくらい） */
    max-width: 100%;
    height: auto;
  }

  /* 念のため中央寄せしたい場合 */
  .kenkou_image,
  .sdgs_image {
    text-align: center;
  }
}

/* PCだけ：SDGs画像を右寄せ＋境目を中央に */
@media (min-width: 1024px){

  /* 画像と文字の境目をページ中央に */
  #top_sdgs .sdgs_main_group{
    grid-template-columns: 50% 50%;
  }

  /* 画像カラムを右寄せにする */
  #top_sdgs .sdgs_image{
    display: flex;
    justify-content: flex-end;   /* 右端に寄せる */
  }

  /* 画像はカラムいっぱいに広げない */
  #top_sdgs .sdgs_image img{
    width: auto;                 /* ← 100% を上書きする */
    max-width: 360px;            /* 好きな最大幅に調整してOK */
    display: block;
  }
}




/* PCだけ：健康宣言の証明書画像も右寄せ */
@media (min-width: 1024px){
  #top_kenkousengen .kenkou_main_group{
    grid-template-columns: 50% 50%;
  }

  #top_kenkousengen .kenkou_image{
    display: flex;
    justify-content: flex-end;
  }

  #top_kenkousengen .kenkou_image img{
    width: auto;
    max-width: 360px;
    display: block;
  }
}

/* ===== PC幅（1024px〜）調整 共通 ===== */
@media (min-width: 1024px){

  /* 1) 画像と文字の境目を中央寄りに（40% / 60%） */
  #top_kenkousengen .kenkou_main_group{
    grid-template-columns: 40% 60%;
  }

  #top_sdgs .sdgs_main_group{
    grid-template-columns: 40% 60%;
  }

  /* 2) 画像ブロックを「縦に積む flex」にして右寄せ */
  #top_kenkousengen .kenkou_image,
  #top_sdgs .sdgs_image{
    display: flex;
    flex-direction: column;      /* ← 画像の下にテキストが来る */
    align-items: flex-end;       /* ← 右寄せ */
  }

  /* 3) 画像はカラムいっぱいじゃなく、適度な固定幅にする */
  #top_kenkousengen .kenkou_image img,
  #top_sdgs .sdgs_image img{
    width: auto !important;      /* 既存の width:100% を上書き */
    max-width: 360px;            /* お好みで 320〜400px に調整OK */
    height: auto;
    display: block;
  }

  /* 4) 「クリックするとPDFが開けます」を下に＆右寄せ */
  #top_kenkousengen .kenkou_image p,
  #top_sdgs .sdgs_image p{
    margin-top: 6px;
    font-size: 12px;
    text-align: right;
  }
}

/* ===== SDGs：タイトルとリストの開始位置をそろえる ===== */
#top_sdgs .sdgs_com_group > p{
  margin: 0 0 12px;
}

#top_sdgs .torikumi_li{
  margin: 10px 0 0;        /* ← 左マージン30pxを消す */
  padding-left: 1.2em;     /* 箇条書き分だけ少しだけインデント */
}

/* ===== タブレット幅：健康宣言の画像とキャプション位置調整 ===== */
@media (min-width: 768px) and (max-width: 1023px){

  /* 画像ブロックを普通のブロック表示に戻して中央寄せ */
  #top_kenkousengen .kenkou_image{
    display: block !important;     /* 過去の flex 指定を上書き */
    text-align: center;            /* 画像も文字も中央揃え */
  }

  #top_kenkousengen .kenkou_image img{
    display: inline-block;
  }

  #top_kenkousengen .kenkou_image p{
    margin-top: 6px;
    text-align: center;
  }

  /* 画像と文章の真ん中のスキマを少し狭くする */
  #top_kenkousengen .kenkou_main_group,
  #top_sdgs .sdgs_main_group{
    column-gap: 20px;
  }
}

/* ===== PC幅（1024px〜）：同じく画像の下・真ん中に揃える＋スキマ調整 ===== */
@media (min-width: 1024px){

  #top_kenkousengen .kenkou_image{
    display: block !important;
    text-align: center;
  }

  #top_kenkousengen .kenkou_image img{
    display: inline-block;
  }

  #top_kenkousengen .kenkou_image p{
    margin-top: 6px;
    text-align: center;
  }

  /* 中央の空き幅を少しだけ狭く（健康宣言＋SDGs 共通） */
  #top_kenkousengen .kenkou_main_group,
  #top_sdgs .sdgs_main_group{
    column-gap: 24px;
  }
}

/* ===== R&R 健康宣言 ＋ SDGs レイアウト最終調整（PC幅用） ===== */
@media (min-width: 1024px) {

  /* セクション幅をそろえる */
  #top_kenkousengen,
  #top_sdgs {
    width: 80%;
    margin: 0 auto 40px;
  }

  /* 画像360px ＋ テキスト の2カラムを両方共通に */
  #top_kenkousengen .kenkou_main_group,
  #top_sdgs .sdgs_main_group {
    display: grid;
    grid-template-columns: 360px 1fr;  /* 左：画像／右：文章（共通） */
    column-gap: 32px;                  /* 真ん中のスキマ。狭くしたければ 24px などに */
    align-items: flex-start;
  }

  /* 左カラム：画像＋キャプションを縦並び＆中央寄せ */
  #top_kenkousengen .kenkou_image,
  #top_sdgs .sdgs_image {
    display: flex;
    flex-direction: column;   /* 上：画像／下：テキスト */
    align-items: center;      /* カラムの中央に寄せる（左右位置そろう） */
  }

  #top_kenkousengen .kenkou_image img,
  #top_sdgs .sdgs_image img {
    max-width: 360px;
    width: 100%;
    height: auto;
    display: block;
  }

  /* 「クリックするとPDFが開けます」を画像の真下・中央に */
  #top_kenkousengen .kenkou_image p,
  #top_sdgs .sdgs_image p {
    margin-top: 8px;
    font-size: 12px;
    text-align: center;
  }
}
/* ===== PC幅（1024px〜）：健康宣言とSDGsのレイアウトをそろえて中央寄りに ===== */
@media (min-width: 1024px){

  /* セクション自体の幅を少し細くして、中央寄せを強める */
  #top_kenkousengen,
  #top_sdgs{
    width: 50%;              /* ← 80% だと広めなので 70% に調整。お好みで 65〜75% にしてもOK */
    margin: 0 auto 40px;
  }

  /* 画像360px＋テキスト（残り）の2カラム。真ん中のスキマも少し狭くする */
  #top_kenkousengen .kenkou_main_group,
  #top_sdgs .sdgs_main_group{
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    column-gap: 24px;        /* ←ここが画像と文字の間の“真ん中の幅” */
    align-items: flex-start;
  }

  /* SDGsのオレンジ枠の文章の横幅を少し狭くして、中央にまとめる */
  #top_sdgs .sdgs_com{
    max-width: 900px;        /* ←行幅。もっとギュッとしたければ 800px とかにする */
    margin: 30px auto 0;     /* セクションの中で真ん中に配置 */
    text-align: center;      /* 中央揃えのままでOK */
  }
}

/* ───────── スマホ幅：健康宣言のPDF文言を画像の真下・中央にそろえる ───────── */
@media (max-width: 767px){

  /* 画像まわりはフツーのブロック要素に戻す */
  #top_kenkousengen .kenkou_image{
    display: block !important;
    text-align: center !important;
  }

  #top_kenkousengen .kenkou_image a{
    display: inline-block;
  }

  #top_kenkousengen .kenkou_image img{
    display: block;
    margin: 0 auto;
  }

  /* ← このpが右上に行っているので、強制的に「下の真ん中」に戻す */
  #top_kenkousengen .kenkou_image p{
    display: block;
    margin-top: 6px;
    text-align: center !important;
    float: none !important;
    position: static !important;
  }
}

/* 1025〜1392px：健康宣言・SDGs の画像を少し小さくする */
@media (min-width: 1025px) and (max-width: 1392px){

  /* 左カラムの幅自体を少し細くする */
  #top_kenkousengen .kenkou_main_group,
  #top_sdgs .sdgs_main_group{
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  }

  /* 画像の最大サイズも少し小さくする */
  #top_kenkousengen .kenkou_image img,
  #top_sdgs .sdgs_image img{
    max-width: 300px;   /* ← ここを 280px とかにするともっと小さくなる */
    width: 100%;
    height: auto;
  }
}



/* ========== h3 共通の基本スタイル ========== */
h3{
  font-size: 2rem;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  border: none;
  padding: 0;
  margin: 0 0 1.5em;
}

/* ========== SNS / TOPICS 用のリセット ========== */
#sns.sns-fix h3.sns-subtitle::before,
#topics .section h3::before{
  content: none !important;
}

/* ========== 下線つき見出しを全部ここで統一 ========== */
/* ※SNSはあとで個別に指定するのでここからは外す */
.section > h3,
#topics .section h3{
  position: relative;
  padding-bottom: 8px;
  margin: clamp(40px, 6vw, 64px) 0 16px;
}

/* 共通の青線（長さ・太さ・色をここだけで管理） */
.section > h3::after,
#topics .section h3::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: #3577CA;
}

/* ───────── SNS（Instagram 実績 / X 実績）の見出しを統一 ───────── */

/* 見出し本体 */
#sns.sns-fix h3.sns-subtitle{
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 80%;                          /* ← 線の長さを他と合わせたいならこのくらい */
  margin: clamp(40px, 6vw, 64px) auto 16px !important; /* 中央寄せ */
  padding: 0 0 8px !important;

  text-align: center;
  font-size: 2rem;
  line-height: 1.4;
  font-weight: 700;

  position: relative;
  border: none !important;
}

/* もともとの飾りを完全カット */
#sns.sns-fix h3.sns-subtitle::before{
  content: none !important;
}

/* 下の青線（長さ・太さは共通） */
#sns.sns-fix h3.sns-subtitle::after{
  content: "" !important;
  position: absolute;
  left: 0;
  right: 0;        /* 見出しの max-width(80%) いっぱい */
  bottom: 0;
  height: 4px;
  background: #3577CA;
}


/* SNSセクション内の横余白をゼロに（no-pad のときだけ） */
#sns.sns-fix .sns-inner.no-pad{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* 募集要項だけ、見出しの幅を 65% にして中央寄せ */
#youkou .section > h3{
  width: 90%;
  margin: clamp(40px, 6vw, 64px) auto 16px;  /* auto で左右中央寄せ */
}





/* 保護犬保護猫活動 */
#top_rescue {
  width: 80%;
  margin: 0 auto;
}

/* 想いの文章ブロック */
.rescue-message-section {
  text-align: center;
  margin: 30px 0 0;
  font-size: 18px;
  background: #FFE6D2;
  border-radius: 20px;
  border: 2px solid #000000;
  padding: 26px 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.rescue-message-text {
  line-height: 1.5;
}

/* 団体紹介全体 */
.rescue-org-section {
  position: relative;
  background-color: rgba(240, 250, 255, 0.7);
  padding: 40px 20px;
  border-radius: 10px;
  border: 2px dashed #90e0ef;
  margin-top: 40px;
  z-index: 1;
}

/* 協力団体のご紹介 見出しの白いボックス（中央寄せ版） */
.rescue-org-section h4{
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto 30px;
  padding: 8px 32px;
  font-size: 1.6em;
  font-weight: 700;
  color: #0077b6;
  text-align: center;
  background: rgba(255,255,255,0.96);
  border-radius: 9999px;
  box-shadow: 0 0 12px rgba(255,255,255,0.9);
  z-index: 2;
}

/* 団体紹介カード（PCベース） */
.rescue-org-card {
  display: flex;
  align-items: center;       /* 縦中央揃えにするなら center */
  gap: 24px;
  max-width: 900px;
  margin: 0 auto 40px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid #ade8f4;
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
}

/* 左カラム：写真＋QRを縦並び */
.rescue-org-media{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* メイン写真 */
.rescue-org-mainphoto{
  width: 180px;        /* ←ここを小さくしたいなら 200px などに変更 */
  max-width: 100%;
  height: auto;
}

/* QRコード */
.rescue-org-qr{
  width: 120px;
  max-width: 100%;
  height: auto;
}

/* 右側テキスト */
.rescue-org-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 縦方向で真ん中寄せ */
}

.rescue-org-name {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 10px;
  color: #0077b6;
}

.rescue-org-name a{
  color: inherit;
  text-decoration: none;
}
.rescue-org-name a:hover{
  text-decoration: underline;
}

.rescue-org-description p {
  font-size: 0.98em;
  color: #555;
  line-height: 1.9;
}

/* 背景画像群 */
.floating-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.floating-photo {
  position: absolute;
  border: 8px solid white;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  border-radius: 4px;
  width: 180px;
  opacity: 0.6;
  filter: saturate(1.05);
}

/* ========= スマホ幅（～767px） ========= */
@media (max-width: 767px){
  .rescue-org-card{
    flex-direction: column-reverse;   /* 文章 → 画像の順にする */
    align-items: center;
    padding: 20px 18px;
  }

  .rescue-org-description{
    width: 100%;
    margin-bottom: 16px;
  }

  .rescue-org-media{
    width: 100%;
    flex-direction: column;           /* 上：メイン写真 → 下：QR */
    align-items: center;
    gap: 12px;
  }

  .rescue-org-mainphoto{
    max-width: 280px;                 /* スマホでの上限サイズ */
    height: auto;
  }

  .rescue-org-qr{
    max-width: 150px;
    height: auto;
  }
}


/* ボタン画像（真ん中のやつ）のサイズ調整 */
.rescue-org-btn img {
  display: block;
  width: 200px;   /* 好きな大きさに調整してOK */
  height: auto;
}

/* 団体紹介カード内の縦位置を中央揃えに */
.rescue-org-card{
  align-items: center;         /* flex-start → center に上書き */
}


.rescue-org-description{
  display: flex;
  flex-direction: column;
  justify-content: center;     /* 縦方向の真ん中 */
}




@media screen and (min-width:1200px) {

  /* R&Rが提供するサービス一覧（PC用） */
  .service_image{
    margin: 40px 10% 80px;
    display: grid;

    /* 6列グリッドをつくって、
       1カード＝2列ぶん使うイメージ */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 60px;
  }

  .top_service{
    position: relative;      /* 縦線用 */
    margin: 0 20px;          /* カード同士のすき間 */
    padding: 0 0 40px;
    text-align: center;
    border: none;
  }

  .top_service img,
  .top_service a img{
    width: 100%;
    height: auto;
    display: block;
  }

  .top_service a{
    text-decoration: none;
    color: inherit;
  }

  .top_service a h4{
    font-size: 1.6rem;
    line-height: 1.3;
    font-weight: 900;
    margin: 12px 0 6px;
    text-align: left;
  }

  .top_service a p{
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    text-align: left;
  }

  /* ───────── グリッドの位置指定（ボウリング配置） ───────── */

  /* 上段3つ：左・中央・右 */
  .top_service:nth-child(1){ grid-column: 1 / span 2; grid-row: 1; }
  .top_service:nth-child(2){ grid-column: 3 / span 2; grid-row: 1; }
  .top_service:nth-child(3){ grid-column: 5 / span 2; grid-row: 1; }

  /* 下段2つ：中央寄せ（ボウリングのピンっぽく） */
  .top_service:nth-child(4){ grid-column: 2 / span 2; grid-row: 2; }
  .top_service:nth-child(5){ grid-column: 4 / span 2; grid-row: 2; }

  /* ───────── 縦の点線（上4本・下3本） ───────── */

  /* いったんリセット */
  .top_service::before,
  .top_service::after{
    content: none;
  }

  /* 左外側の線（上段左カード & 下段左カード） */
  .top_service:nth-child(1)::before,
  .top_service:nth-child(4)::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 3px dotted #737373;
    left: -20px;            /* カードから20px外に線 */
  }

  /* 右側の線：
     1…1と2の間
     2…2と3の間
     3…右外側
     4…4と5の間
     5…右外側 ＝ 合計：上4本 / 下3本
  */
  .top_service:nth-child(1)::after,
  .top_service:nth-child(2)::after,
  .top_service:nth-child(3)::after,
  .top_service:nth-child(4)::after,
  .top_service:nth-child(5)::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    border-right: 3px dotted #737373;
    right: -20px;           /* 左右の余白 20px + 20px の真ん中に線が来るイメージ */
  }
}


.kenkou_image{
  display:flex;
  justify-content:flex-end;
}


  /* ===================== 設営事例 ===================== */
  /* ===================== 基本カラー・サイズ変数 ===================== */
  :root {
    --title-size-pc: 30px;
    --date-size-pc: 18px;
    --title-size-sp: 22px;
    --date-size-sp: 14px;

    --nav-btn-size-pc: 44px;
    --nav-btn-size-sp: 38px;
    --nav-btn-bg: rgba(255,255,255,0.5);
    --nav-btn-bg-hover: rgba(255,255,255,0.7);
    --nav-btn-border: 2px solid #000;
    --nav-btn-shadow: 0 2px 12px rgba(0,0,0,.18);
    --nav-btn-backdrop: blur(2px);
    --prev-offset-pc: -60px;
    --next-offset-pc: -60px;
    --prev-offset-sp: 8px;
    --next-offset-sp: 8px;

    --viewer-maxwidth-pc: 800px;
    --viewer-maxwidth-sp: 92vw;
    --thumbs-cols-pc: 5;
    --thumbs-cols-900: 4;
    --thumbs-cols-sp: 3;
    --thumbs-gap: 12px;
    --thumbs-gap-sp: 10px;

    --row-line: #000;
    --muted: #000;
    --ink: #111;
    --line: #e6e9ef;
    --blue: #246bff;
    --card: #fff;
    --bg: #f7f8fb;
    --radius: 18px;
  }

  /* ===================== 共通設定 ===================== */
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  }
  .case { margin: 0; } /* gapで調整するので余白は0に */

  /* ===================== タイトル行 ===================== */
  .title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid var(--line);
    padding-bottom: 10px;
    gap: 12px;
  }
  .title-row h1 {
    font-size: var(--title-size-pc);
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .date { font-size: var(--date-size-pc); color: var(--muted); white-space: nowrap; }

  /* ===================== スライダー ===================== */
  .carousel { margin-top: 18px; position: relative; z-index: 0; overflow: hidden; }
  .viewer { position: relative; max-width: var(--viewer-maxwidth-pc); margin: 0 auto; }
  .viewer img { width: 100%; height: auto; display: block; object-fit: cover; }
  .nav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: var(--nav-btn-size-pc); height: var(--nav-btn-size-pc);
    border-radius: 50%; background: var(--nav-btn-bg); border: var(--nav-btn-border);
    display: grid; place-items: center; cursor: pointer; z-index: 2;
    box-shadow: var(--nav-btn-shadow); backdrop-filter: var(--nav-btn-backdrop);
  }
  .nav-btn:hover { background: var(--nav-btn-bg-hover); }
  .prev { left: var(--prev-offset-pc); }
  .next { right: var(--next-offset-pc); }
  .nav-btn svg { width: 22px; height: 22px; stroke: #000; }

  .dots { display: flex; gap: 8px; justify-content: center; margin: 10px 0 4px; }
  .dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; cursor: pointer; }
  .dot[aria-current="true"] { background: #0ea5e9; }

  .thumbs {
    display: grid;
    grid-template-columns: repeat(var(--thumbs-cols-pc),1fr);
    column-gap: var(--thumbs-gap); row-gap: var(--thumbs-gap);
    margin-top: 10px;
  }
  .thumb { aspect-ratio: 1; border: 1px solid var(--line); background: #f2f4f7; cursor: pointer; overflow: hidden; }
  .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width:900px){ .thumbs{ grid-template-columns: repeat(var(--thumbs-cols-900),1fr); } }

  

  /* ===================== 情報表 ===================== */
  .sheet { margin: 24px auto 0; max-width: var(--viewer-maxwidth-pc); border: none; background: transparent; }
  .row { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid var(--row-line); padding: 8px 0; }
  .row .hd { font-weight: 700; font-size: 15px; color: #000; }
  .row .bd { font-size: 15px; color: #000; }

  .sheet a.link { color: var(--blue); text-decoration: none; border-bottom: none; display: inline-block; padding-right: 6px; }
  .sheet a.link::before { content:'・'; margin-right: 6px; color:#000; }
  .list-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }

  /* ===================== スタッフコメント ===================== */
  .staff {
    display: grid; grid-template-columns: 100px 1fr; gap: 16px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 16px 20px; max-width: var(--viewer-maxwidth-pc); margin: 20px auto 0;
  }
  .face { width: 100px; height: 100px; border-radius: 50%; background: #eee; overflow: hidden; border: 1px solid var(--line); }
  .face img { width: 100%; height: 100%; object-fit: cover; }
  .staff .label { font-weight: 700; margin-bottom: 8px; font-size: 16px; }
  .muted { color: var(--muted); font-size: 15px; line-height: 1.7; }

  /* ===================== タブ（屋内／屋外） ===================== */
  .case-tabs{
    text-align:center; margin:22px 0 14px;
    position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 10px 0;
  }
  .tab-btn{
    padding:10px 22px; margin:0 8px; border:2px solid #133ea3; background:#fff; color:#133ea3;
    border-radius:999px; font-weight:700; cursor:pointer;
  }
  .tab-btn.active{ background:#133ea3; color:#fff; }

  .case-panel{ display:none; }
  /* アクティブなパネルは「上が新しい順」に表示（下に追加してOK） */
  .case-panel.active{
    display:flex;
    flex-direction:column-reverse;
    gap:56px;
  }

  /* 説明ブロックの黄色ボックス（角丸・幅小さめ） */
  .plan_case_intro {
    background: #fff9ed;
    border: 1px solid #f6e7c8;
    border-radius: 25px;
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
  }
.plan_case_intro {
  background: #fff9ed !important;
}



  /* スマホ調整 */
  @media (max-width:660px){
    .title-row{ flex-direction: column; align-items: flex-end; gap: 6px; }
    .title-row h1{
      font-size: var(--title-size-sp); white-space: normal; display:-webkit-box;
      -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow:hidden;
      align-self:flex-start; text-align:left;
    }
    .date{ font-size: var(--date-size-sp); text-align:right; margin-top:4px; }
    .viewer{ max-width: var(--viewer-maxwidth-sp); }
    .nav-btn{ width: var(--nav-btn-size-sp); height: var(--nav-btn-size-sp); }
    .prev{ left: var(--prev-offset-sp); }
    .next{ right: var(--next-offset-sp); }
    .thumbs{
      grid-template-columns: repeat(var(--thumbs-cols-sp),1fr);
      column-gap: var(--thumbs-gap-sp); row-gap: var(--thumbs-gap-sp);
    }
     /* 2列グリッドに変更 */
  .list-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ★ここが2列指定 */
    column-gap: 16px;  /* 横のすき間（お好みで調整OK） */
    row-gap: 10px;      /* 縦のすき間（お好みで調整OK） */
  }

  /* 幅100%指定を解除して、ふつうのブロック要素に戻す */
  .list-links a.link{
    width: auto;
    display: block;
  }
}

/* ===== サブ写真を中央寄せ＆5個で折り返し ===== */
.thumbs {
  display: flex;                 /* grid → flexに変更 */
  flex-wrap: wrap;               /* 折り返し有効 */
  justify-content: center;       /* 中央寄せ */
  gap: 10px;                     /* サムネイル間のすき間 */
  margin-top: 10px;
}

.thumb {
  width: 140px;                  /* サムネイルサイズ調整 */
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  background: #f2f4f7;
  cursor: pointer;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .thumb { width: 120px; }
}
@media (max-width: 660px) {
  .thumb { width: 100px; }
}



/* 箇条書きの丸を a でも span でも付ける */
.list-links .link::before {
  content: '・';
  margin-right: 6px;
  color: #000;
}

/* クリック不可＆黒文字にする用 */
.link.disabled {
  color: #333;
  text-decoration: none;
  pointer-events: none; /* クリック無効 */
  cursor: default;
}

:root{ --bg: #fff; } 


/* 設営事例ページ用の追加パッチ（そのページのCSSの一番下に） */
html body{
  font-family: "BIZ UDPGothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
               Meiryo, "ＭＳ Ｐゴシック", system-ui, "Noto Sans JP", sans-serif !important;
  font-weight: 400;
}

/* ========= タイトル行レイアウト再調整 ========= */

/* タブレット（661～1024px）：タイトルは2行までOK・日付は右側 */
@media (min-width: 661px) and (max-width: 1024px){
  #common_main .case > .title-row{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    gap:12px !important;
    max-width: var(--viewer-maxwidth-pc);
    margin:0 auto 8px;
    padding:0 0 6px;
    border-bottom:2px solid var(--line) !important;
  }

  #common_main .case > .title-row h1{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    line-height:1.4;
    white-space:normal !important;   /* ← 折り返しOK（2行でもOK） */
    overflow:visible !important;
    text-overflow:clip !important;   /* ← … で省略しない */
    font-size:var(--title-size-pc);
  }

  #common_main .case > .title-row .date{
    margin-left:auto;
    white-space:nowrap;
    font-size:var(--date-size-pc);
    color:var(--muted);
  }
}

/* PC（1025px以上）：タイトルは1行固定・…なし・日付右側 */
@media (min-width: 1025px){
  #common_main .case > .title-row{
    display:flex !important;
    align-items:baseline !important;  /* タイトルと日付の下をそろえる */
    justify-content:flex-start !important;
    gap:12px !important;
    max-width: var(--viewer-maxwidth-pc);
    margin:0 auto 8px;
    padding:0 0 6px;
    border-bottom:2px solid var(--line) !important;
  }

  #common_main .case > .title-row h1{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    line-height:1.4;
    white-space:nowrap !important;   /* ← 1行に固定 */
    overflow:visible !important;     /* ← はみ出しを隠さない */
    text-overflow:clip !important;   /* ← … で省略しない */
    font-size:var(--title-size-pc);
  }

  #common_main .case > .title-row .date{
    margin-left:auto;
    white-space:nowrap;
    font-size:var(--date-size-pc);
    color:var(--muted);
  }
}

/* ========= 事例タイトル＆日付 レイアウト調整 ========= */

/* 共通：タイトル行のベース（下線・幅） */
#common_main .case > .title-row{
  max-width: 1100px;                 /* PCは少し広めに */
  margin: 0 auto 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}

/* PC（1025px〜）：タイトル1行固定＋日付を右端に */
@media (min-width: 1025px){
  #common_main .case > .title-row{
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 24px !important;
  }

  #common_main .case > .title-row h1{
    flex: 1 1 auto !important;              /* できるだけ広く使う */
    font-size: clamp(20px, 2.4vw, 30px);
    white-space: nowrap !important;         /* 改行させない */
    overflow: visible !important;           /* 隠さない */
    text-overflow: clip !important;         /* 「…」をやめる */
  }

  #common_main .case > .title-row .date{
    margin-left: 16px !important;
    white-space: nowrap !important;         /* 日付も1行 */
    font-size: var(--date-size-pc);
  }
}

/* タブレット・スマホ（〜1024px）：タイトル2行までOK＋日付は右寄せ */
@media (max-width: 1024px){
  #common_main .case > .title-row{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 6px !important;
    max-width: 100%;
  }

  #common_main .case > .title-row h1{
    width: 100%;
    font-size: var(--title-size-sp);
    white-space: normal !important;         /* 改行OK */
    display: -webkit-box;
    -webkit-line-clamp: 2;                  /* 2行まで表示 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
  }

  #common_main .case > .title-row .date{
    font-size: var(--date-size-sp);
    white-space: nowrap !important;
    align-self: flex-end;
  }
}

/* ===== PCのウィンドウが狭いときだけ（重なり防止用） ===== */
@media (min-width: 900px) and (max-width: 1400px){
  /* タイトル行を縦並びにする */
  #common_main .case > .title-row{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* タイトルは折り返しOK（…にしない） */
  #common_main .case > .title-row h1{
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* 日付は右寄せのまま */
  #common_main .case > .title-row .date{
    margin-left: auto;
    white-space: nowrap;
  }
}

/* PCを狭くしたとき用：タイトルは1行、その下に日付を右寄せ表示 */
@media (max-width:1400px){

  #common_main .case > .title-row{
    display: flex !important;
    flex-direction: column !important;  /* タイトルの下に日付を配置 */
    align-items: flex-start !important;
    gap: 4px !important;
  }

  #common_main .case > .title-row h1{
    white-space: normal !important;     /* 必要なら改行OK（今のままでOKなら省略可） */
  }

  #common_main .case > .title-row .date{
    align-self: flex-end;               /* 自分だけ右端に寄せる */
    margin-left: auto;                  /* 右側に押し出す */
    text-align: right;
    white-space: nowrap;                /* 日付は折り返さない */
  }
}

/* ===== スマホ・タブレットで「使用商品」を2列にする ===== */
@media (max-width: 660px){
  /* 使用商品：2列レイアウト */
  .sheet .list-links{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
    column-gap: 7px;   /* 左右のすき間 */
    row-gap: 8px;       /* 上下のすき間（ここ増やすと行間が広がる） */
  }

  .sheet .list-links .link{
    width: auto !important;
    display: block;     /* 改行して縦に並べる */
  }

  /* クリック不可のspanも同じように扱う */
  .sheet .list-links .disabled{
    display: block;
  }
}

/* ===== スマホで「使用商品」を全幅＋2列にする ===== */
@media (max-width: 660px){

  /* シートのいちばん下の行（使用商品の行想定）を1列レイアウトに */
  .sheet .row:last-child{
    display: block;
  }

  /* 「使用商品」ラベルは上に来るだけ */
  .sheet .row:last-child .hd{
    margin-bottom: 8px;
  }

  /* 使用商品リストを、横幅いっぱい使った2列グリッドに */
  .sheet .row:last-child .list-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列 */
    column-gap: 12px;   /* 左右のすき間 */
    row-gap: 8px;       /* 上下のすき間（増やせばもっとゆとり） */
  }

  .sheet .row:last-child .list-links .link,
  .sheet .row:last-child .list-links .disabled{
    display: block;
    width: auto;
  }
}

@media (max-width: 660px){

  /* ここは前に書いたやつ（例） */
  .sheet .row.row-products .list-links{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 7px;   /* 上下の余白も少しゆったり */
  }

  /* ★文字サイズを少し小さくする */
  .sheet .row.row-products .list-links .link,
  .sheet .row.row-products .list-links .disabled{
    font-size: 12px;      /* ここを12〜14pxくらいでお好み調整してOK */
    line-height: 1.3;     /* 行間ちょい広めで読みやすく */
  }
}

/* スタッフコメントの幅を「使用商品」の表とそろえる */
.sheet,
.staff {
  max-width: 100%;        /* 親要素いっぱい使う */
  width: 100%;
  box-sizing: border-box; /* パディング込みで100%にする */
}

/* スマホの使用商品リンクをできるだけ1行に寄せる */
@media (max-width: 660px){
  .row .bd.list-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
    row-gap: 12px;
  }

  .row .bd.list-links .link {
    font-size: 11px;        /* ちょっと小さくする */
    line-height: 1.4;
    white-space: nowrap;    /* 折り返し禁止 */
  }

  .row .bd.list-links .link.disabled {
    font-size: 11px;
    white-space: nowrap;
  }
}





/* =========================
  PICKUP：下線〜バナーの隙間だけ詰める（ここだけ）
========================= */

/* PICKUP見出しの“下”だけ詰める（上は触らない） */
#my_body .section h3{
  margin-bottom: 25px !important; /* ←ここで調整（0〜16くらいで好み） */
}

/* h3直後の <br> が犯人なら無効化（他には影響しない） */
#my_body .section + br{
  display: none !important;
}

/* バナー側（#contract / ul）の上余白を潰す */
#my_body #contract,
#my_body .section + #contract,
#my_body .section + br + #contract{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#my_body #contract .shipping_explanation{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 画像をblockにして変な隙間防止 */
#my_body #contract .shipping_explanation img{
  display: block;
}

/* =========================
  PICKUPバナー：中央寄せ（#contract だけ）
========================= */
#my_body #contract .shipping_explanation{
  text-align: center !important;
  padding-left: 0 !important;   /* ulの左余白対策 */
  margin-left: 0 !important;
  list-style: none !important;
}

/* もし既存CSSで float してても無効化 */
#my_body #contract .shipping_explanation li{
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
}

/* クリック領域をそのまま中央に */
#my_body #contract .shipping_explanation a{
  display: inline-block !important;
}

/* 画像はブロックのままでも中央にできる */
#my_body #contract .shipping_explanation img{
  display: block !important;
  margin: 0 auto !important;
}


/* === SPだけ：IG/Xのカード幅を少し細くする === */
@media (max-width: 767.98px){
  /* 1列の“列幅”自体も細くしたい場合（おすすめ） */
  #sns.sns-fix .ig-embed-grid,
  #sns.sns-fix .x-embed-grid{
    grid-template-columns: minmax(0, 360px) !important; /* ←ここ */
    justify-content: center !important;
  }

  /* カード自体の最大幅も合わせて細く */
  #sns.sns-fix .ig-item,
  #sns.sns-fix .x-item{
    width: 100% !important;
    max-width: 290px !important; /* ←ここ */
    margin: 0 auto !important;
  }
}


/* カテゴリ画像：周囲10pxを表示しない（うっすら線対策） */
#top_category .category_box a li{
  overflow: hidden; /* はみ出た分を隠す */
}

#top_category .category_box a li img{
  display: block;
  width: 100%;
  margin: 0 auto 10px;
  clip-path: inset(1.5px);     /* ←端10pxをカット */
  transform: scale(1.00);     /* ←縮んで見えるのを防ぐ（好みで調整） */
  transform-origin: center;
}

/* スマホだけ：ヘッダー上部の長文(h1)を非表示 */
@media screen and (max-width: 559px){
  #hdset > h1{
    display: none !important;
  }
}