@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #383e45;
  font-size: 0.9rem;
}
a {
  text-decoration: none;
  color:#695C98;
  font-weight: bold;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}

/* span用　フォントサイズ　*/
.s10 {
	font-size: 10px;
}
.s11 {
	font-size: 11px;
}
.s12 {
	font-size: 12px;
}
.s14 {
	font-size: 14px;
}
.s16 {
	font-size: 16px;
}
.s18 {
	font-size: 18px;
	line-height: 1;
}
.s20 {
	font-size: 20px;
}
.s30 {
	font-size: 30px;
}
.bold {
	font-weight: bold;
}

/* span用　色　*/

.red {
	color: #E93434;
}
.black {
	color: #000000;
}
.blue {
	color: #09C;
}

/* span用　フォントウエイト　*/

.bold {
	font-weight: bold;
}

dd{
    margin-top: 5px;
    margin-left: 5px;
    line-height: 1.5;    
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {

body {
    background-color: #fff;
    color: #383e45;
    font-size: 0.9rem;
	font-family: '游ゴシック Medium', sans-serif;
  }

/* サイト全体のコンテンツ幅を設定 */
.container {
    max-width: 600px;
    margin: 0 auto;
  }
  /* 中のコンテンツ部分の最大幅を設定 */
  .headerinner {
    max-width: 600px;
    margin: 0 auto;
  }

/*-------------------------------------------
ヘッダー
-------------------------------------------*/
 
.header_button {
	float: right;
	width: 100px;
	margin:0;
}
.header_button a img {
	display: block;
	width: 100%;
    margin-bottom: 3px;
}

.container2{
    maring-top:100px;
    text-align: center;
    }

.popularword{
    text-align: center;
    font-size:13px;         
    }
    
.featured{
    margin-top:20px;
    text-align: center;
    }
    
.featured h2{
    color:#000; 
    }
    
.newotoku{
	margin:5px 0px;
}

.category{
    margin-top: 20px;
    clear: both;
    }    

.category h3{
 border-bottom: 1px solid #666666;
 background-image: url(https://www.pcjungle.jp/img/sma-image/category-btn.jpg);
 background-size: 20px 20px;
 background-repeat: no-repeat;
 padding: 0px 0px 0px 24px;
    }
.category ul{
    padding: 3px;
    display: flex;
    align-content:space-between;
    }
.category li{
	width: calc(33% - 8px);
	margin: 1px;
	padding: 3px;
	font-size: 0.6rem;
	font-weight: 800;
	}
	
.category li a{
	text-decoration: none;
	color:#000;
	display: block;
	text-align: center;
	border: 1px solid #000;
	padding:8px 6px;
}
	
.category li a:hover{
	opacity: 0.5;
	}
	
.yosan h3{
 border-bottom: 1px solid #666666;
 background-image: url(https://www.pcjungle.jp/img/sma-image/yosan-btn.jpg);
 background-size: 20px 20px;
 background-repeat: no-repeat;
 padding: 0px 0px 0px 24px;       
    }
.yosan ul{
    padding: 3px;
    display: flex;
    align-content:space-between;
    }
.yosan li{
	width: calc(33% - 8px);
	margin: 1px;
	padding: 3px;
	font-size: 0.6rem;
	font-weight: 800;
	}
	
.yosan li a{
	text-decoration: none;
	color:#000;
	display: block;
	text-align: center;
	border: 1px solid #000;
	padding:8px 6px;
}
	
.yosan li a:hover{
	opacity: 0.5;
	}

.youto h3{
 border-bottom: 1px solid #666666;
 background-image: url(https://www.pcjungle.jp/img/sma-image/yosan-btn.jpg);
 background-size: 20px 20px;
 background-repeat: no-repeat;
 padding: 0px 0px 0px 24px;       
    }
.youto ul{
    padding: 3px;
    display: flex;
    align-content:space-between;
    }
.youto li{
	width: calc(33% - 8px);
	margin: 1px;
	padding: 3px;
	font-size: 0.5rem;
	font-weight: 800;
	}
	
.youto li a{
	text-decoration: none;
	color:#000;
	display: block;
	text-align: center;
	border: 1px solid #000;
	padding:8px 6px;
}
	
.youto li a:hover{
	opacity: 0.5;
	}
	

.other h3{
	border-bottom: 1px solid #666666;
	background-image: url(https://www.pcjungle.jp/img/sma-image/category-btn.jpg);
	background-size: 20px 20px;
	background-repeat: no-repeat;
	padding: 0px 0px 0px 24px;
    }
.other ul{
    padding: 3px;
    display: flex;
    align-content:space-between;
    }
.other li{
	width: calc(33% - 8px);
	margin: 1px;
	padding: 3px;
	font-size: 0.8rem;
	font-weight: 800;
	}
	
.other li a{
	text-decoration: none;
	color:#000;
	display: block;
	text-align: center;
	border: 1px solid #000;
	padding:8px 6px;
}
	
.other li a:hover{
	opacity: 0.5;
	}
    

.goriyoguide h3{
 border-bottom: 1px solid #666666;       
    }
.goriyoguide ul{
    padding: 1px;
    display: flex;
    align-content:space-between;
    }
.goriyoguide li{
	width: calc(33% - 3px);
	margin: 1px;
	padding: 2px;
	}

.line-2 h3{
 border-bottom: 1px solid #666666;
 background-image: url(https://www.pcjungle.jp/img/sma-image/yosan-btn.jpg);
 background-size: 20px 20px;
 background-repeat: no-repeat;
 padding: 0px 0px 0px 24px;       
    }
.line-2 ul{
    padding: 3px;
    display: flex;
    align-content:space-between;
    }
.line-2 li{
	width:calc( 48% - 15px);
	margin:5px;
	padding:10px;
	}



/*20230705追加　slick スクエアスライダー
---------------------------------------------------------------------------*/

/*------ スライダーの横幅 ------*/
.slider{
  width: 100%;
  margin:0 auto;
}

/*------ スライダー画像 ------*/
.slider img{
	width:100%;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}

/*---------- ドット ----------*/
.slider .slick-dots{
	bottom:-35px;/*上下の位置を変える*/
	right:105px;/*左に寄せたいときはleft,右に寄せたいときはright*/
	width:auto;/*width:100％のままだと中央のまま。autoにすると、左右に位置を変更できる*/
  }   
    

/* 20230920 新検索フォームデザイン start */
    
.search-form-003 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #767d83;
    border-radius: 3px;
}

.search-form-003 input {
    width: 250px;
    height: 35px;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    
}

.search-form-003 input::placeholder{
    color: #767d83;
}

.search-form-003 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 20px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.search-form-003 button::after {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cpath%20d%3D%22M23.7%2020.8%2019%2016.1c-.2-.2-.5-.3-.8-.3h-.8c1.3-1.7%202-3.7%202-6C19.5%204.4%2015.1%200%209.7%200S0%204.4%200%209.7s4.4%209.7%209.7%209.7c2.3%200%204.3-.8%206-2v.8c0%20.3.1.6.3.8l4.7%204.7c.4.4%201.2.4%201.6%200l1.3-1.3c.5-.5.5-1.2.1-1.6zm-14-5.1c-3.3%200-6-2.7-6-6s2.7-6%206-6%206%202.7%206%206-2.6%206-6%206z%22%20fill%3D%22%23767d83%22%3E%3C%2Fpath%3E%20%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    content: '';
}    
    
/* 20230920 新検索フォームデザイン end   */
    
    
    
/*パンくずリストスマホ用の設定 start */
#breadcrumb_sp {
	display: block;
	clear: both;
	font-size: 11px;
	line-height: 120%;
	margin-top:1em;
}
#breadcrumb_sp li {
	float: left;
	padding: 1px 3px;
	text-decoration: none;
	color: #333;
}
#breadcrumb_sp li:after {
	content: "＞";
	margin-left:1em;
}
ul#breadcrumb_sp li:last-child:after {
	content: '';
}
/*パンくずリストスマホ用の設定　end */

    
/* 固定ページ用設定　*/    
/* wrapper_sp　start*/    
.wrapper_sp{
    max-width: 460px;
    margin: 0 auto;
    }
/* wrapper_sp　end*/  
    
.section-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 30px;
  text-align: center;
}
   
.section-title_l {
    padding:0 .4em .2em;
    border-bottom: 3px dotted #2589d0;
    background-color: #ffffff;
    color: #333333;
}
    
.section-title_l_bl {
    padding:0 .4em .2em;
    border-bottom: 3px dotted #2589d0;
    background-color: #ffffff;
    color: #2589d0;
}
     
/*20230824 商品詳細テーブル （会社概要 /info/company 修正用）
---------------------------------------------------------------------------*/
.info3 {
	width: 100%;
}
.info3, .info3 td, .info3 th {
    border-collapse: collapse;
	border: 1px solid #eaeaea;	/*テーブルの枠線の幅、線種、色*/
	line-height: 200%;
}
/*テーブル内の左側の見出し部分*/
.info3 th {
	width: 100px;
	padding: 2px 5px;
	text-align: center;
	background-color: #f8f8f8;	/*背景色*/
	color: #202020;
	font-size: 13px;
	font-weight: lighter;

}
/*テーブル内の右側*/
.info3 td {
	padding: 2px 5px;
	font-size: 13px;
}
    
/* 230907　FAQ カテゴリボタン　start　 */

.list2{
  display: flex;
}

.list2 > div {
  width: 50%;
}

.button-002 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:90%;
    margin:0 auto;
    padding: .9em 2em;
    border: none;
    border-radius: 5px;
    background-color: #d02525;
    color: #fff;
    font-weight: 300;
    font-size: 0.75em;
}

.button-002:hover {
    background-color: #d02525;
    text-decoration: none;
}
 
/* 230907　FAQ カテゴリボタン　end　 */   

    
/* トップページ　お問い合わせボタン start */
.button-003 {
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
    margin:0 auto;
    padding: .7em 2em;
    border: none;
    border-radius: 10px;
    background-color: #636363;
    color: #fff;
    font-weight: 500;
    font-size: 1.2em;
}

.button-003:hover {
    opacity: 0.5;
    text-decoration: none;
}
/* トップページ　お問い合わせボタン end */    
    
    
.inner{
    max-width:500px;
    margin: 0 auto;
    } 
    
.step{
    margin-top: 15px;
    }

  /*20230623 追加　ランクの説明ページ用*/
.rankmaintitle{
	text-align: left;
	background: #fff;
	font-size: 20px;
	color: #000000;
}
.ranktitle1{
    display:inline-block;
	letter-spacing: 5px;
	color: white;
	font-weight:300;
	height: 18px;
	background: #f86815;/*背景色*/
  	padding: 3px 20px 7px 25px;/*文字まわり（上下左右）の余白*/
}

.ranktitle2{
    display:inline-block;
	letter-spacing: 5px;
	color: white;
	font-weight:300;
	height: 18px;
	background: #f8d703e5;/*背景色*/
  	padding: 3px 20px 7px 25px;/*文字まわり（上下左右）の余白*/
}

.ranktitle3{
    display:inline-block;
	letter-spacing: 5px;
	color: white;
	font-weight:300;
	height: 18px;
	background: #a9a9a9;/*背景色*/
  	padding: 3px 20px 7px 25px;/*文字まわり（上下左右）の余白*/
}

.wrapper_sp dd{
    margin-top: 5px;
    margin-left: 5px;
    line-height: 1.5;      
}
 
/*ご利用ガイド　アコーディオンメニュー ▼枠線付き（ご注文からお届けまでの流れ：STEP4） start*/
.accordion-002 {
    max-width: 500px;
    margin-bottom: 7px;
    border: 2px solid #2589d0;
    border-radius: 5px;
}

.accordion-002 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2214%22%20style%3D%22fill%3A%232589d0%3B%22%2F%3E%0A%3C%2Fsvg%3E');
    background-position: right calc(2em - 7px) center;
    background-size: 22px;
    background-repeat: no-repeat;
    color: #2589d0;
    font-weight: 600;
    cursor: pointer;
}

.accordion-002 summary::-webkit-details-marker {
    display: none;
}

.accordion-002 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 5px;
    height: 5px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion-002[open] summary::after {
    transform: rotate(225deg);
}

.accordion-002 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion-002[open] p {
    transform: none;
    opacity: 1;
}
/*ご利用ガイド　アコーディオンメニュー ▼枠線付き（ご注文からお届けまでの流れ：STEP4） end*/

/*ご利用ガイド　小見出し（h3)：左線 start*/
.heading-001 {
    padding: .1em .7em;
    border-left: 4px solid #2589d0;
    color: #333333;
}
/*ご利用ガイド　小見出し（h3)：左線 end*/

/*ご利用ガイド　▼「注意事項」コード start*/
    
.box-005 {
    max-width: 500px;
    margin: 0 auto;
    border: 2px solid #f06060;
    border-radius: 5px;
    color: #333333;
}

.box-005 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #f06060;
    font-weight: 600;
    vertical-align: top;
}

.box-005 svg {
    padding-right: 4px;
}

.box-005 p {
    margin: 0;
    padding: 0 1.5em 1em;
}

/*ご利用ガイド　▼「注意事項」コード start*/
    
    
button {
  margin: 20px;
  outline: none;
}
.custom-btn {
  width: 130px;
  height: 40px;
  padding: 10px 25px;
  border: 2px solid #000;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

/* 1 */
.btn-1 {
  transition: all 0.3s ease;
}
.btn-1:hover {
   box-shadow:
   -7px -7px 20px 0px #fff9,
   -4px -4px 5px 0px #fff9,
   7px 7px 20px 0px #0002,
   4px 4px 5px 0px #0001;
}

/*  スマホフッター start */
    
#footer .content {
  background-color: #616c70;
  display: flex;
  justify-content: flex-start;
  padding-top: 10px;
}
 
#footer .item {
  width:50%;
  margin:10px 10px 0px 10px;
  }

.item ul{
    margin-left: -30px;
    text-decoration: none;
    font-size:0.8em;
    }

.item a{
        color:white;
        font-weight: 300;
    }

.footer-002 {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 25px 10px 10px;
    background-color: #616c70;
}

.footer-002__logo {
    width: 130px;
    height: 30px;
}

.footer-002__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.5em;
    list-style-type: none;
    margin: 0 0 .5em;
    padding: .5em;
}

.footer-002__sns-icon {
    width: 21px;
    height: 21px;
}

.footer-002__copyright {
    margin: 0;
    text-align: center;
    color: #ffffffb3;
    font-weight: 200;
    font-size: .8em;
}    
    
/*　スマホフッター end　*/
    
    
/* 230921 FAQ 大見出し スマホ用　*/

/* summary ▶表示がブラウザで消えなかった場合 */    
summary {
  display: block;
  list-style: none;
}

/* summary ▶表示が一部ブラウザで消えなかった場合は以下も追記 */
summary::-webkit-details-marker {
  display:none;
}    
    
.faqheading-001 {
    width:400px;
	font-size: 18px;
	background: #FFF;
	text-align: left;
    padding: 0 .7em;
    border-left: 5px solid #75bbff;
    color: #333333;
    display:table-cell;
    vertical-align:middle;
}

.faq-title{
    font-size: 13px;
    padding-left:10px;

}

.faq-inner1 span::before {
    content: ">";
    font-size:13px;
    color:#808080;
    margin-right: 10px;
}

/* 230921　FAQ　スマホ用 start　 */ 
   
.qa-001_sp {
    max-width: 480px;
    margin-bottom: 7px;
    border: 1px solid #d6dde3;
    border-radius: 5px;
}

.qa-001_sp summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 4em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-001_sp summary::before,
.qa-001_sp p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-001_sp summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-001_sp summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-001_sp[open] summary::after {
    transform: rotate(225deg);
}

.qa-001_sp p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin-left: 35px;
    padding: .3em 1.75em 1.5em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-001_sp[open] p {
    transform: none;
    opacity: 1;
}

.qa-001_sp p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
    margin-left: -34px;
    margin-top:3.5px;
}
/* 230906　FAQ　デザイン変更　end　 */
    
/* 230922 品質管理（konpo）ページ　修正　*/
    
#konpo_sp {
	max-width: 450px;
	margin: 5px;    
    }

#konpo_sp tr td {
    vertical-align:top;
    width:60%;
    }  
    
/*20230922 品質管理ページ　メモアイコン（大）start*/
.box-007 {
    max-width: 500px;
    margin: 0 auto;
    border: 2px solid #ffb36b;
    border-radius: 5px;
    color: #333333;
}

.box-007 div {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -13px;
    left: 10px;
    margin: 0 7px;
    padding: 0 8px;
    background: #fff;
    color: #ffb36b;
    font-weight: 600;
    vertical-align: top;
}

.box-007 svg {
    padding-right: 4px;
}

.box-007 p {
    margin: 0;
    padding: 0 1.5em 1em;
}
/*20230922 品質管理ページ　メモアイコン（大）end*/

/*20230922 品質管理ページ　吹き出し風（下線のみ）start*/

.heading-021 {
    position: relative;
    padding: .5em .7em .4em;
    border-bottom: 3px solid #2589d0;
    color: #333333;
}

.heading-021::before,
.heading-021::after {
    position: absolute;
    left: 30px;
    bottom: -15px;
    width: 30px;
    height: 15px;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
}

.heading-021::before {
    background-color: #2589d0;
}

.heading-021::after {
    bottom: -11px;
    background-color: #fff;
}
/*20230922 品質管理ページ　吹き出し風（下線のみ）end*/