/******************/
/*** 共通の設定 ***/
/******************/

/***カスタムプロパティ***/
:root {
    /*本文の横幅*/
    --max-width: 1280px;
    /*テキストカラー*/
    --main-color: rgba(48, 47, 48, 1);
    --main-color-white: rgba(252, 252, 252, 1);
    --main-color-red: rgba(220, 20, 60, 1);
    /*フォントファミリー*/
    --font-family-GothicDuex-R: 'GothicDuex-R';
    --font-family-GothicDuex-RE: 'GothicDuex-RE';
    --font-family-GothicDuex-HDL_E: 'GothicDuex-HDL_E';
    --font-family-NotoSansJP-Regular: 'Noto Sans JP-Regular';
    --font-family-NotoSansJP-Black: 'Noto Sans JP-Black';
    /*汎用色*/
    --color-white: rgba(252, 252, 252, 1.0); /*白*/
    --color-red: rgba(244, 67, 54,1.0); /*赤*/
    --color-pink: rgba(233, 30, 99,1.0); /*ピンク*/
    --color-purple: rgba(156, 39, 176,1.0); /*紫*/
    --color-deeppurple: rgba(103, 58, 183,1.0); /*深紫*/
    --color-indigo: rgba(63, 81, 181,1.0); /*インディゴ*/
    --color-blue: rgba(33, 150, 243,1.0); /*青*/
    --color-lightblue: rgba(3, 169, 244,1.0); /*水色*/
    --color-cyan: rgba(0, 188, 212,1.0); /*シアン*/
    --color-teal: rgba(0, 150, 136,1.0); /*ティール（青緑）*/
    --color-green: rgba(76, 175, 80,1.0); /*緑*/
    --color-lightgreen: rgba(139, 195, 74,1.0); /*黄緑*/
    --color-lime: rgba(205, 220, 57,1.0); /*ライム*/
    --color-yellow: rgba(255, 235, 59,1.0); /*黄*/
    --color-amber: rgba(255, 193, 7,1.0); /*琥珀*/
    --color-orange: rgba(255, 152, 0,1.0); /*オレンジ*/
    --color-deeporange: rgba(255, 87, 34,1.0); /*濃いオレンジ*/
    --color-brown: rgba(121, 85, 72,1.0); /*茶*/
    --color-gray: rgba(158, 158, 158,1.0); /*灰*/
    --color-bluegray: rgba(96, 125, 139,1.0); /*ブルーグレー*/
    --color-black: rgba(48, 47, 48,1.0); /*黒*/
    --color-turquoise: rgba(26, 188, 156,1.0); /*ターコイズ*/
    --color-greensea: rgba(46, 204, 113,1.0); /*エメラルド*/
    --color-peterriver: rgba(52, 152, 219,1.0); /*ピーターリバー*/
    --color-amethyst: rgba(155, 89, 182,1.0); /*アメシスト*/
    --color-wetasphalt: rgba(52, 73, 94,1.0); /*濡れたアスファルト*/
    --color-greensea: rgba(22, 160, 133,1.0); /*グリーンシー*/
    --color-nephritis: rgba(39, 174, 96,1.0); /*ネフライト*/
    --color-belizehole: rgba(41, 128, 185,1.0); /*べリゼホール*/
    --color-wisteria: rgba(142, 68, 173,1.0); /*藤*/
    --color-midnightblue: rgba(44, 62, 80,1.0); /*ミッドナイトブルー*/
    --color-sunflower: rgba(241, 196, 15,1.0); /*ヒマワリ*/
    --color-carrot: rgba(230, 126, 34,1.0); /*キャロット*/
    --color-alizarin: rgba(231, 76, 60,1.0); /*アリザリン（茜）*/
    --color-clouds: rgba(236, 240, 241,1.0); /*雲*/
    --color-concrete: rgba(149, 165, 166,1.0); /*コンクリート*/
    --color-mandarin: rgba(243, 156, 18,1.0); /*ダイダイ*/
    --color-pumpkin: rgba(211, 84, 0,1.0); /*カボチャ*/
    --color-pomegranate: rgba(192, 57, 43,1.0); /*ザクロ*/
    --color-silver: rgba(189, 195, 199,1.0); /*銀*/
    --color-asbestos: rgba(127, 140, 141,1.0); /*石綿*/
    --color-patina: rgba(64, 122, 82,1.0); /*パティナ*/
}

.hide {
    display: none!important;
}

html {
    font-size: 62.5%;
    overflow-x : hidden;
    overflow-y : auto;
    font-family: "GenJyuuGothicL-Medium";
}

body {
    margin: 0px;
    font-size: 1.6rem;
    background: var(--color-white);
    overflow-x : hidden;
    overflow-y : auto;
    font-family: 'Noto Sans JP';
}

/***文書全体の基本設定***/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, ol, ul, li,
abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 500;
    font-family: 'GenJyuuGothicL-Medium.ttf', 'Noto Sans JP-Regular', 'Yu Gothic', 'Meiryo', 'ヒラギノ角ゴ', 'sans-seif';
    /*ブロック要素の大きさにborderとpaddingの大きさを含めるようにする設定*/
    box-sizing: border-box;
    /*フォントのプロポーショナルメトリクス（自動カーニング）を有効にする設定*/
    font-feature-settings: "palt" 1;
    /*そのままだと窮屈に見えるので1pxだけ文字間を広げる*/
    letter-spacing: 1px;
    vertical-align: baseline;
    /*行頭禁則対応*/
    word-break: normal;
    line-break: strict;
}

a {
    text-decoration: none;
    color: var(--main-color);
}

a:hover{
    filter: brightness(0.66);
}

p {
    background: var(--color-clouds);
    padding: 1rem 4rem;
    border-radius: 1rem;
    margin-bottom: 2rem;
    box-shadow: 1px 1px 4px var(--color-bluegray);
}

img {
    /* box-shadow: 1px 1px 4px var(--color-bluegray); */
}

h2 {
    background: var(--color-greensea);
    margin: 0 0 1rem 0;
    padding: 1rem 3rem;
    border-radius: 1rem;
    color: var(--main-color-white);
    font-weight: 700;
    border-left: 1rem solid var(--color-amber);
    box-shadow: 1px 1px 4px var(--color-bluegray);
}

h3 {
    background: var(--color-turquoise);
    border-radius: 1rem;
    padding: 0.5rem 3rem;
    border-left: 1rem solid var(--color-sunflower);
    margin: 0 0 1rem 0;
    color: var(--main-color-white);
    font-weight: 700;
    box-shadow: 1px 1px 4px var(--color-bluegray);
}

.rounded {
    border-radius: 1rem;
}

/***ラッパー***/
.wrapper {
    display: block;
    width: 100%;
    /* max-width: 720px; */
    margin: 0;
}

/*** コンテナ ***/
.container {
    display: flex;
    margin: 0 0 8rem 0;
}

/*** メイン ***/
main {
    margin: 1rem 0.5% 1rem 1rem;
    padding: 0;
    width: 72%;
    line-height: 150%;
    color: var(--main-color);
    font-family: "メイリオ", "Meiryo", "AR丸ゴシック体E", "HG丸ｺﾞｼｯｸM-PRO", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "sans-serif";
    text-align: left;
}

/*** サイドバー ***/
.sidebar {
    margin: 0 1% 1rem 0.5%;
    padding: 1rem; 
    width: 25%
}

/* モーダルウィンドウ */
#modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9000;
}

#modal_content {
    position: fixed;
    width: auto;
    height: 66%;
    -webkit-transform: translate(50%, 25%);
    transform: translate(50%, 25%);
    z-index: 9999;
}

.modal_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(48, 47, 48, 0.66);
}

/**************************/
/*** ヘッダーのスタイル ***/
/**************************/

/*ヘッダーの設定*/
.header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: var(--main-color-black);
    height: 25rem;
    text-align: center;
    background: var(--color-white);
    z-index: 9000;
    transition: 250ms;
    overflow: hidden;
}

.header .header_title {
    position: absolute;
    top: 0;
    text-align: left;
    width: 50%;
    margin: 1rem 0 0 1rem;
    filter: drop-shadow(1px 1px 2px black);
}

.header_logo {
    width: 100%;
}

.header .header_info {
    position: absolute;
    top: 17rem;
    right: 0;
    width: 33%;
    margin: 0 1rem 0 0;
    text-align: right;
}

.header .header_info img {
    width: 100%;
}

.header_subpage {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: var(--main-color-black);
    height: 8rem;
    text-align: center;
    background: var(--color-greensea);
    z-index: 9000;
    transition: 250ms;
    display: flex;
}

.header_subpage .header_title {
    text-align: left;
    display: block;
    width: 50%;
}

.header_subpage .header_logo {
    width: 100%;
    position: inherit;
    right: 0;
    bottom: 0;
    text-align: left;
    height: 8rem;
}

.header_subpage .header_info {
    width: 50%;
    position: inherit;
    right: 0;
    bottom: 0;
    text-align: right;
}

.header_subpage .header_info img {
    height: 6rem;
    margin: 1rem 0;
    padding: 0 2rem;
}

nav {
    height: 6rem;
}

nav ul {
    display: flex;
    margin: 1rem;
    padding: 0;
    width: 100%;
    list-style: none;
}

nav ul a {
    width: inherit;
}

nav ul li {
    border-radius: 1rem;
    border-bottom: 0.5rem solid var(--color-silver);
    margin: 0.5rem;
    /* width: calc((100% - (2rem + (1rem * 5)))/ 6); */
    height: 5rem;
    background: var(--color-wetasphalt);
    font-family: 'uVeiwRdisplay R';
    font-size: 2.1rem;
    font-weight: 700;
    transition: 250ms;
    text-align: center;
    padding: 1rem;
    font-size: 2rem;
    color: var(--main-color-white);
    width: calc(100% - 2rem);
}

nav ul li:first-child {
    margin-left: 0;
}

nav ul li:last-child {
    margin-right: 0;
}

nav ul li:hover {
    filter: brightness(0.8);
}

nav ul li a {
    color: var(--main-color-white);
}

nav ul .selected {
    border-bottom: none;
    border-top: var(--color-asbestos);
    color: var(--color-black);
    background: var(--color-silver);
}

/*トップバナー部分スクロールする画像*/
.loop_wrap {
    display: flex;
    height: 25rem;
    overflow: hidden;
    z-index:1;
  }

      .loop_wrap img {
          width: 25rem;
          height: 25rem;
      }

      .loop_wrap ul {
          display: flex;
      }

      .loop_wrap li {
          /*
          width: 25rem;
              */        
      }

      .loop_wrap div, li, ul {
          overflow: visible;
          display: flow-root;
      }

  @keyframes loop {
    0% {
      transform: translateX(1000%); /* x=(画像の枚数/2)*100 */
    }
    to {
      transform: translateX(-1000%); /* x=-(画像の枚数/2)*100 */
    }
  }

  @keyframes loop2 {
    0% {
      transform: translateX(0);
    }
    to {
      transform: translateX(-1000%); /* x=-(画像の枚数)*100 */
    }
  }

  .loop_wrap img:first-child {
    animation: loop 24s -12s linear infinite;
  }

  .loop_wrap img:last-child {
    animation: loop2 24s linear infinite;
  }

  .loop_wrap:hover ul {
    /*animation-play-state: paused;*/
  }

/**************************/
/*** バナーのスタイル ***/
/**************************/
.banner_square_small {
    width: calc(25% - 1rem);
    border-radius: 1rem;
    box-shadow: 1px 1px 4px var(--color-bluegray);
}

.banner_square {
    width: calc(50% - 1rem);
    border-radius: 1rem;
    box-shadow: 1px 1px 4px var(--color-bluegray);
}


.banner_rectangle {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 1px 1px 4px var(--color-bluegray);
}

/**************************/
/*** フッターのスタイル ***/
/**************************/
footer {
    height: fit-content;
    padding: 1rem;
    background: var(--color-teal);
    color: var(--main-color-white);
    height: 18rem;
}

footer a {
    border-radius: 1rem;
    color: var(--main-color-white);
}

footer a:hover {
    filter: brightness(0.66);
}

.footer_wrapper {
    display: flex;
}

.footer_leftside {
    width: 25%;
}

.footer_rightside {
    width: 75%;
}

.footer_rightside ul {
    display: inline-block;
    list-style: none;
}

.footer_rightside ul li {
    float: left;
    width: 16rem;
    height: 4rem;
}

/*** コピーライト部分 ***/
.copyright {
    text-align: center;
    color: var(--main-color-white);
    font-weight: 700;
}

.tell_us {
    width: 100%;
    height: 8rem;
    background: var(--color-nephritis);
    bottom: 0;
    position: fixed;
    text-align: center;
}
.tell_us img {
    margin: 1rem auto;
    height: 6rem;
}

/*************/
/*** index ***/
/*************/

/* スライドショー */
.slideshow {
    width: 100%;
    height: auto;
}

/* 新着情報 */
.whats_new {
    width: calc(100% -2rem);
    height: auto;
    margin: 1rem;
}

/* メニューリスト */
.menu_list ul {
    display: inline-block;
    list-style: none; 
}

.menu_list li {
    float: left;
    width: 12rem;
    height: 20rem;
}

/* アイテムリスト */
.item_list ul {
    display: inline-block;
    list-style: none;
    /* padding: 0 1.5rem; */
}

.item_list li {
    float: left;
    width: 16rem;
    height: 4rem;
    background: var(--color-clouds);
    margin: 0.5rem;
    border-radius: 1rem;
    text-align: center;
    padding: 1rem;
}

.item_list img {
    width: 8rem;
    height: 8rem;

}

/**************************/
/*** ハンバーガーメニュー ***/
/**************************/
#hamburger {
    display: none;
}

/***************/
/*** サイドバー ***/
/***************/
.side_banner {
    transition: 250ms;
}

.side_banner:hover {
    filter: brightness(0.66);
}

.side_banner img {
    border-radius: 1rem;
    width: 100%;
}

.sidebar_flow {
    margin: 2rem 0;
    background: var(--color-clouds);
    border-radius: 1rem;
    box-shadow: 1px 1px 4px var(--color-bluegray);
    padding: 1rem;
}

/***************/
/*** 買取品目 ***/
/***************/

/* 買取品目テーブル */
.table_item {
    margin: 0 0 2rem 0;

}

.table_item th {
    border-radius: 4px 0 0 4px;
    padding: 1rem;
    background: var(--color-lime);
}

.table_item td {
    border-radius: 0 4px 4px 0;
    padding: 1rem;
    background: var(--color-clouds);
}

/***********/
/*** FAQ ***/
/***********/

/* リスト */
.faq{
    background: #F6F6F6;
    padding: 1em;
    border-radius: 1em;
  }
  .faq dt{
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px dotted;
    font-weight: bold;
  }
  .faq dt:before{
    content: "Q";
    font-weight: normal;
    background: #cc0000;
    color: #fff;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.6;
    text-align: center;
    display: inline-block;
    border-radius: 1em;
    margin-right: .5em;
  }
  .faq dd{
    margin-bottom: 2em;
  }
  .faq dd:last-child{
    margin-bottom: 0;
  }

/***************/
/*** 会社概要 ***/
/***************/

/* テーブル */
.kaisha {
width: 100%;
margin: 0 0 2rem 0;
}

.kaisha th,
.kaisha td {
border: 1px solid #ccc;
padding: 20px;
}

.kaisha th {
font-weight: bold;
background-color: #dedede; 
}

@media screen and (max-width: 767px) {
.kaisha,
.kaisha tr,
.kaisha td,
/* .kaisha th {display:block;} */
.kaisha th {width:auto;}
}

/*********************/
/***長さ指定用クラス***/
/*********************/
/***パーセント***/
.w_5per {width: 5%;}
.w_10per {width: 10%;}
.w_15per {width: 15%;}
.w_20per {width: 20%;}
.w_25per {width: 25%;}
.w_30per {width: 30%;}
.w_35per {width: 35%;}
.w_40per {width: 40%;}
.w_45per {width: 45%;}
.w_50per {width: 50%;}
.w_55per {width: 55%;}
.w_60per {width: 60%;}
.w_65per {width: 65%;}
.w_70per {width: 70%;}
.w_75per {width: 75%;}
.w_80per {width: 80%;}
.w_85per {width: 85%;}
.w_90per {width: 90%;}
.w_95per {width: 95%;}
.w_100per {width: 100%;}

/***vw***/
.w_5vw {width: 5vw;}
.w_10vw {width: 10vw;}
.w_15vw {width: 15vw;}
.w_20vw {width: 20vw;}
.w_25vw {width: 25vw;}
.w_30vw {width: 30vw;}
.w_35vw {width: 35vw;}
.w_40vw {width: 40vw;}
.w_45vw {width: 45vw;}
.w_50vw {width: 50vw;}
.w_55vw {width: 55vw;}
.w_60vw {width: 60vw;}
.w_65vw {width: 65vw;}
.w_70vw {width: 70vw;}
.w_75vw {width: 75vw;}
.w_80vw {width: 80vw;}
.w_85vw {width: 85vw;}
.w_90vw {width: 90vw;}
.w_95vw {width: 95vw;}
.w_100vw {width: 100vw;}

/***rem***/
/***vw***/
.w_5rem {width: 5rem;}
.w_10rem {width: 10rem;}
.w_15rem {width: 15rem;}
.w_20rem {width: 20rem;}
.w_25rem {width: 25rem;}
.w_30rem {width: 30rem;}
.w_35rem {width: 35rem;}
.w_40rem {width: 40rem;}
.w_45rem {width: 45rem;}
.w_50rem {width: 50rem;}
.w_55rem {width: 55rem;}
.w_60rem {width: 60rem;}
.w_65rem {width: 65rem;}
.w_70rem {width: 70rem;}
.w_75rem {width: 75rem;}
.w_80rem {width: 80rem;}
.w_85rem {width: 85rem;}
.w_90rem {width: 90rem;}
.w_95rem {width: 95rem;}
.w_100rem {width: 100rem;}

/*********************/
/***高さ指定用クラス***/
/*********************/
/***パーセント***/
.h_5per {height: 5%;}
.h_10per {height: 10%;}
.h_15per {height: 15%;}
.h_20per {height: 20%;}
.h_25per {height: 25%;}
.h_30per {height: 30%;}
.h_35per {height: 35%;}
.h_40per {height: 40%;}
.h_45per {height: 45%;}
.h_50per {height: 50%;}
.h_55per {height: 55%;}
.h_60per {height: 60%;}
.h_65per {height: 65%;}
.h_70per {height: 70%;}
.h_75per {height: 75%;}
.h_80per {height: 80%;}
.h_85per {height: 85%;}
.h_90per {height: 90%;}
.h_95per {height: 95%;}
.h_100per {height: 100%;}

/***vh***/
.h_5vh {height: 5vh;}
.h_10vh {height: 10vh;}
.h_15vh {height: 15vh;}
.h_20vh {height: 20vh;}
.h_25vh {height: 25vh;}
.h_30vh {height: 30vh;}
.h_35vh {height: 35vh;}
.h_40vh {height: 40vh;}
.h_45vh {height: 45vh;}
.h_50vh {height: 50vh;}
.h_55vh {height: 55vh;}
.h_60vh {height: 60vh;}
.h_65vh {height: 65vh;}
.h_70vh {height: 70vh;}
.h_75vh {height: 75vh;}
.h_80vh {height: 80vh;}
.h_85vh {height: 85vh;}
.h_90vh {height: 90vh;}
.h_95vh {height: 95vh;}
.h_100vh {height: 100vh;}

/***rem***/
.h_5rem {height: 5rem;}
.h_10rem {height: 10rem;}
.h_15rem {height: 15rem;}
.h_20rem {height: 20rem;}
.h_25rem {height: 25rem;}
.h_30rem {height: 30rem;}
.h_35rem {height: 35rem;}
.h_40rem {height: 40rem;}
.h_45rem {height: 45rem;}
.h_50rem {height: 50rem;}
.h_55rem {height: 55rem;}
.h_60rem {height: 60rem;}
.h_65rem {height: 65rem;}
.h_70rem {height: 70rem;}
.h_75rem {height: 75rem;}
.h_80rem {height: 80rem;}
.h_85rem {height: 85rem;}
.h_90rem {height: 90rem;}
.h_95rem {height: 95rem;}
.h_100rem {height: 100rem;}

/***背景色***/
.bg_white       {background: var(--color-white)!important;}
.bg_red         {background: var(--color-red)!important;}
.bg_pink        {background: var(--color-pink)!important;}
.bg_purple      {background: var(--color-purple)!important;}
.bg_deeppurple  {background: var(--color-deeppurple)!important;}
.bg_indigo      {background: var(--color-indigo)!important;}
.bg_blue        {background: var(--color-blue)!important;}
.bg_lightblue   {background: var(--color-lightblue)!important;}
.bg_cyan        {background: var(--color-cyan)!important;}
.bg_teal        {background: var(--color-teal)!important;}
.bg_green       {background: var(--color-green)!important;}
.bg_lightgreen  {background: var(--color-lightgreen)!important;}
.bg_lime        {background: var(--color-lime)!important;}
.bg_yellow      {background: var(--color-yellow)!important;}
.bg_amber       {background: var(--color-amber)!important;}
.bg_orange      {background: var(--color-orange)!important;}
.bg_deeporange  {background: var(--color-deeporange)!important;}
.bg_brown       {background: var(--color-brown)!important;}
.bg_gray        {background: var(--color-gray)!important;}
.bg_bluegray    {background: var(--color-bluegray)!important;}
.bg_black       {background: var(--color-black)!important;}
.bg_turquoise   {background: var(--color-turquoise)!important;}
.bg_emerald     {background: var(--color-emerald)!important;}
.bg_peterriver  {background: var(--color-peterriver)!important;}
.bg_amethyst    {background: var(--color-amethyst)!important;}
.bg_wetasphalt  {background: var(--color-wetasphalt)!important;}
.bg_greensea    {background: var(--color-greensea)!important;}
.bg_nephritis   {background: var(--color-nephritis)!important;}
.bg_belizehole  {background: var(--color-belizehole)!important;}
.bg_wisteria    {background: var(--color-wisteria)!important;}
.bg_midnightblue {background: var(--color-midnightblue)!important;}
.bg_sunflower   {background: var(--color-sunflower)!important;}
.bg_carrot      {background: var(--color-carrot)!important;}
.bg_alizarin    {background: var(--color-alizarin)!important;}
.bg_clouds      {background: var(--color-clouds)!important;}
.bg_concrete    {background: var(--color-concrete)!important;}
.bg_mandarin    {background: var(--color-mandarin)!important;}
.bg_pumpkin     {background: var(--color-pumpkin)!important;}
.bg_pomegranate {background: var(--color-pomegranate)!important;}
.bg_silver      {background: var(--color-silver)!important;}
.bg_asbestos    {background: var(--color-asbestos)!important;}
.bg_patina      {background: var(--color-patina)!important;}