@charset "UTF-8";
main { margin: 50px auto 0;}

h1 { font-size: 28px;}
h2 { 
    margin: 0 0 30px;
    font-size: 25px; text-align: center; line-height: 1.6em;}
    
/**============================================================================================**/

/**============================================================================================**/
#archive { max-width: 1220px; padding: 0 10px;}

#archive h1,
#archive p { text-align: center;}

#archive a img {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}
	
#archive a:hover { color: #53b4ba;}
#archive a:hover img { opacity: 0.5;}

#archive ul { font-size: 0;}
#archive li { 
    display: inline-block; 
    box-sizing: border-box; width: 33.33%; padding: 30px 10px;
    vertical-align: top;}

#archive h2 { 
    margin-top: 20px;
	font-size: 18px; font-weight: 500; line-height: 1.6em;
	font-family: "Noto Sans JP", sans-serif;
	font-style: normal; text-align: center;}

@media screen and (max-width:699px){
    #archive li { width: 50%;}

    #archive h2 { margin-top: 10px; font-size: 14px;}
}

/**============================================================================================**/

/**============================================================================================**/
#single { max-width: 1200px; padding: 0 20px;}
nav { margin: 0 0 10px;}


/* 商品画像・動画 */
#accessories1 { margin: 0 0 30px; padding: 0 0 50px; border-bottom: solid 1px #000;}
#accessories1 .w600 { max-width: 600px; margin: 0 auto 40px;}

/* 品名 */
#accessories1 .m-0a { max-width: 380px;}

/* 品番・金額 */
#accessories1 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 10px 0 0;}

/**========================================**/
/* 画像切替 */
input[type="radio"] {display: none;}
    
/* サムネイル */
#accessories1 label {
	display:inline-block;
    margin: 0 10px 10px 0;
    box-sizing: border-box; width: 100px; height: 100px;
    border: solid 1px #fff;
    cursor: pointer;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;}

#accessories1 label:hover { border-color: #53b4ba;}

/* 画像切替 */
.img1,.img2,.img3,.img4 {
    overflow: hidden;
    height: 0; opacity: 0;
	-webkit-transition: opacity 2.5s;
	transition: opacity 2.5s;}

#img1:checked ~ .img1,
#img2:checked ~ .img2,
#img3:checked ~ .img3,
#img4:checked ~ .img4 { height: auto; max-width: 600px; margin: 0 auto 40px; opacity: 1;}

#img1:checked ~ label[for="img1"],
#img2:checked ~ label[for="img2"],
#img3:checked ~ label[for="img3"],
#img4:checked ~ label[for="img4"] { border-color: #000;}

/* 動画 */
#accessories1 .posi-rlt { margin: 100px 0 0; padding: 55.95% 0 0;}
#accessories1 video {
    position: absolute; top: 0; right: 0;
    width: 100%; height: 100%;
    border-radius: 20px;}
/**============================================================================================**/

/**============================================================================================**/
/* 仕様 */
#accessories2 { max-width: 1000px; margin: 0 auto 100px; padding: 0 20px;}

#accessories2 h4 { margin-top: 20px; font-size: 16px; font-weight: 900;}
#accessories2 h5 { font-size: 14px; font-weight: 900;}

/**========================================**/
/* マニュアル */
#accessories2 .ta_c a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; width: 170px; height: 42px; margin: 0 auto; padding-right: 31px;
    border: solid 1px #000; 
    border-radius: 30px;
    font-size: 16px; line-height: 1.0em; text-decoration: none;}

#accessories2 .ta_c a::after {
    content: '';
    display: block; position: absolute; top: 50%; right: 10px;
    width: 30px; height: 30px;
    background: url("../wp-content/themes/asiwo2025/images/sitelink.webp");
    background-size: 100% auto;
    transform: translateY(-50%);}

#accessories2 .ta_c a:hover { opacity: 0.5;}

/**========================================**/
/* アコーディオン */
#accessories2 .accordion { 
    margin-top: 30px; padding: 20px; 
    border: solid 1px #000;
    font-size: 14px; line-height: 1.6em;}

/* 開閉ボタン */
#accessories2 input { display: none;}
    
#accessories2 label {
    display: block; position: relative; 
    padding: 0 5px; 
    font-size: 18px; line-height: 1.0em;}

#accessories2 label::before,
#accessories2 label::after {
    content: '';
    display: block; position: absolute; top: 50%;}

#accessories2 label::before {
    right: 8px;
    width: 10px; height: 10px; margin: -9px 0 0;
    border: solid #fff; border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

#accessories2 label::after {
    right: 0; z-index: -1;
    width: 30px; height: 30px; margin: -15px 0 0;
    border-radius: 50%;
    background: #53b4ba;}


/* 表示・非表示エリア */
.area1,.area2,.area3 {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; border:none; opacity: 0;
  -webkit-transition: max-height 0.5s;
  -moz-transition: max-height 0.5s;
  -ms-transition: max-height 0.5s;
  -o-transition: max-height 0.5s;
  transition: max-height 0.5s;}

/* アコーディオンをクリックした場合 */
#menu1:checked ~ .area1 { max-height: 200px; margin-top: 15px; border-top: solid 1px #9fa1a0; opacity: 1;}

#menu1:checked ~ label[for="menu1"]::before { margin: -4px 0 0; border-width: 3px 0 0 3px;}

/**========================================**/
/* 基本情報（共通） */
#accessories2 .area1 ul { margin-top: 20px;}
#accessories2 .area1 li { margin: 5px 0 5px 1em; text-indent: -1em;}
#accessories2 .area1 br { display: none;}
#accessories2 .area1 p { margin-left: 15px;}

@media screen and (max-width:499px){
    #accessories2 .area1 br { display: block;}
}

/**============================================================================================**/

/**============================================================================================**/
/* 購入 */
#shopping a:hover { opacity: 0.5;}

#shopping .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%; max-width: 670px; margin: 0 auto 20px;}


#shopping .flex a { margin-bottom: 20px;}

@media screen and (max-width:699px){
    #shopping img { max-width: 170px;}
 }

@media screen and (max-width:549px){
    #shopping .flex { max-width: 350px;}
 }

@media screen and (max-width:349px){
    #shopping .flex { max-width: 170px;}
 }

/* 法人・業者様向けお取引について */
#shopping .ta_c a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    box-sizing: border-box; width: 300px; height: 42px; margin: 0 auto; padding-right: 31px;
    border: solid 1px #000; 
    border-radius: 30px;
    font-size: 16px; line-height: 1.0em; text-decoration: none;}

#shopping .ta_c a::after {
    content: '';
    display: block; position: absolute; top: 50%; right: 10px;
    width: 30px; height: 30px;
    background: url("../wp-content/themes/asiwo2025/images/sitelink.webp");
    background-size: 100% auto;
    transform: translateY(-50%);}


/* LastUp2025.11.07_kimata */