@charset "utf-8";
/* CSS Document */

/*【1】共通=====================================================================================================*/
body {
background-image: linear-gradient(90deg, #f5f5f5 1px, transparent 0), linear-gradient(#f5f5f5 1px, transparent 0);
background-size: 10px 10px;
}

.pc_only{display: none;}
.sp_only{display: block;}

.breadcrumb {
padding: 10px 10px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 10px;
}

.option-container{
width: 100%;
margin: 20px 0;
padding: 0 calc(5% - 8px) 20px;
box-sizing: border-box;
font-size: 14px;
}

.option-container h1 {
text-align: center;
font-size: 30px;
font-weight: 700;
line-height: normal;
margin: 0 0 24px 0;
}

.option-container h2 {
margin: 0 auto;
}

.option-container p {
margin : 0 1em 2em;
line-height: 1.5;
}


/*【2】ナビ部分=====================================================================================================*/
.nav{
background-color:#e7e7e7;
width: 100vw;
margin: 0 calc(50% - 50vw);
}

.nav .title{
position: relative;
display: block;
margin: 1em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
font-size: 16px;
background: var(--clr-third-black);
}

.nav .title:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid var(--clr-third-black);
}

.nav .title h3 {
margin: 0;
padding: 0;
text-align: center;
font-size: 16px;
color: #ffffff;
}

.nav nav{
text-align: center;
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 0 1em 1em;
box-sizing: border-box;
}

.nav nav ul{
margin: 0 ;
padding: 0 ;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
justify-content: space-between;
}

.nav nav li{
position: relative;
list-style: none;
display: block;
width: calc(100% / 2 - 5px);
margin: 10px 0;
font-size: 13px;
font-weight: 700;
line-height: 120%;
padding: 13px 0;
border: 2px solid #cccccc;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #FFFFFF;
box-sizing: border-box;
}

.nav nav ul li:nth-of-type(1){
border-left:2px solid #ddd;
}

.nav nav ul li:nth-of-type(6){
border-left:2px solid #ddd;
}

.nav nav ul li:nth-of-type(11){
border-left:2px solid #ddd;
}

.nav nav li:before {
position: absolute;
top: 0;
left: 0;
width: 5px;
height: 100%;
content: '';
-webkit-transition: all .3s;
transition: all .3s;
background: #ff0;
}

.nav nav li:hover{
transform: translate(0, 1px);
}

.nav nav a{
text-decoration: none;
color: var(--clr-second-blac);
display: block;
}

#item_01, #item_02, #item_03, #item_05, #item_06, #item_07, #item_08, #item_09, #item_10 {
padding-top: 150px;
margin-top: -150px;
}

/*【3】コンテンツ=====================================================================================================*/
.option_contents {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width:100%;
max-width:880px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
margin-bottom:50px;
}

.option_contents .item {
position: relative;
margin: 1.5em auto;
border: 2px solid #333;
box-shadow: 2px 2px 2px #ff0;
background-color: #fff;
}

.option_contents .item_contents {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
-webkit-box-align: start;
align-items: flex-start;
}

.option_contents .item img {
display: block;
width: 90%;
margin: 1.5em auto;
}

.option_contents .item .box {
display: block;
width: 90%;
margin: 0 1.5em 1.5em;
}

.option_contents .title {
border: 1px solid;
padding: 0.3em;
margin: 0 1em 0.5em;
text-align: center;
}

.option_contents .item h3 {
font-size: 2em;
margin: 0.5em 0.1em;
text-align: center;
}

.option_contents .item p {
padding: 0;
margin : 0 1em 1em;
line-height: 1.5;
}

.option_contents .btn {
position: relative;
z-index: 1;
display: block;
overflow: hidden;
margin: 0 1em 1em;
padding: 0.5em;
text-align: center;
text-decoration: none;
color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
background: var(--clr-second-black);
}

.option_contents .btn:hover {
transform: translate(0, 1px);
}

.option_contents ul {
padding: 0;
margin: 0 0 0 26px;
list-style: disc;
font-size: 13px;
}

.cart_btn {
width: 50px;
height: 50px;
line-height: 50px;
background-color: #ff0;
border-radius: 100vh;
border: solid 2px var(--clr-second-black);
text-align: center;
margin-right: 0.2em;
position: relative;
display: inline-block;
cursor: pointer;
}

.cart_btn .cp_tooltiptext {
position: absolute;
z-index: 1;
bottom: 100%;
visibility: hidden;
width: auto;
white-space: nowrap;
padding: 0 1em;
transition: opacity 1s;
text-align: center;
opacity: 0;
color: #ffffff;
border-radius: 6px;
background-color: #da3c41;
font-size: 15px;
}

.cart_btn .cp_tooltiptext::after {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
content: ' ';
border: 5px solid transparent;
border-top-color: #da3c41;
}

.cart_btn:hover .cp_tooltiptext {
visibility: visible;
opacity: 1;
}

.mark {text-align: center;}

.mark span {
	background: linear-gradient(transparent 70%, #ff0 70%);
	padding: 0.3em;
}

/*【4】ヘッダーアンカーリンク=====================================================================================================*/
.to-top-btn {
    width: 50px;
    height: 50px;
	line-height: 50px;
    background-color: var(--clr-black);
    position: fixed;
    z-index: 1000;
    bottom: 15px;
    right: 10px;
	border: solid 2px var(--clr-white);
	border-radius: 50%;
	padding: 0;
    text-align: center;
}	

.to-top-icon {
	color: var(--clr-white);
    margin: auto;
	display: inline-block;
    font-weight: bold;
	font-size: 1.5em;
    transform: rotate(270deg);
    }

/*==================================================================================================================================*/
/*TB*/
@media only screen and (min-width : 600px) {
	
/*【1】共通=====================================================================================================*/	
.pc_only{display: block;}
.sp_only{display: none;}

/*【2】ナビ部分=====================================================================================================*/

.nav {
width: 100%;
margin: 0 auto;
max-width: 800px;
}

.nav nav{
padding: 1em;
}

.nav nav ul{
justify-content: center;
}

.nav nav li{
width: calc(100% / 3 - 1em);
margin: 0.5em;
}

ul.parts_contents__cat-item li {
width:calc(100% /3 - 10px);
}

/*【3】コンテンツ=====================================================================================================*/
.option_contents .item img {
display: block;
width: 48%;
height: auto;
margin: 1em;
}
.option_contents .item > .box > p > img {
width: 100%;
margin: 1.5em 0;
}

.option_contents .item .box {
width: 46%;
margin: 1em 0.5em;
}

}

/*==================================================================================================================================*/
/*PC*/
@media only screen and (min-width : 1025px) {

/*【1】共通=====================================================================================================*/
.pc_only{display: block;}
.sp_only{display: none;}
	
.breadcrumb {
padding: 10px 15px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
row-gap: 10px;
}

.option-container{
max-width: 880px;
margin: 25px auto 40px;
padding: 0;
}

/*【2】ナビ部分=====================================================================================================*/

.nav {
width: 100%;
margin: 0 auto;
max-width: 990px;
}

.nav nav {
text-align: center;
width: 100%;
max-width: 850px;
margin: 0 auto;
padding: 0.5em 0 1em;
}

.nav nav li {
width: calc(100% / 5 - 1em);
}

/*【3】コンテンツ=====================================================================================================*/
.option_contents .item img {
display: block;
width: 48%;
height: auto;
}
.option_contents .item > .box > p > img {
width: 100%;
margin: 1.5em 0;
}

.option_contents .item .box {
width: 47%;
margin: 1em 0.5em;
}

}