@charset "UTF-8";
section { margin: 0 auto 100px;}

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

@media screen and (max-width:799px){
    section { margin-bottom: 60px;}
}
/**============================================================================================**/

/**============================================================================================**/
/* 商品画像・動画 */
#products1 { padding: 0 20px;}

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

h1 { display: inline;}
h1 + span { font-size: 16px; line-height: 1.0em;}

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

/**========================================**/
/* 画像・色 切替 */
input[type="radio"] {display: none;}
    
/* カラー */
#products1 label {
	display:inline-block; position: relative;
    margin: 5px 30px 0 0; padding: 55px 0 0;
	color: #6b6b6b; text-align: center; line-height:1.0em; text-decoration: underline;
    cursor: pointer;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}

#products1 label:hover { color: #53b4ba;}

/* カラーサークル */
#products1 label::before,
#products1 label::after {
    content: '';
    display: block; position: absolute; left: 50%;
    border-radius: 50%;
    transform: translateX(-50%);}

#products1 label::before { top: 3px; width: 40px; height: 40px;}
#products1 label::after { 
    top: 0; z-index: -1;
    width: 44px; height: 44px;
    border: solid 1px #fff;
    background: #fff;}
    
#products1 label[for="collar1"]::before { background:#ffff00;}
#products1 label[for="collar2"]::before { background:#0000ff;}
#products1 label[for="collar3"]::before { background:#008000;}
#products1 label[for="collar4"]::before { background:#00FFFF;}

/* カラーサークルに黒線追加 */
#collar1:checked ~ .m-0a label[for="collar1"]::after,
#collar2:checked ~ .m-0a label[for="collar2"]::after,
#collar3:checked ~ .m-0a label[for="collar3"]::after,
#collar4:checked ~ .m-0a label[for="collar4"]::after { border-color: #6b6b6b;}


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

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

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

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

/**============================================================================================**/
/* ギャラリー */
#products2 li { margin: 0 15px;}

/* slick */
#products2 .slick-list { 
    box-sizing: border-box; width: 100%; 
    padding: 0 15%;}

@media screen and (max-width:999px){
    #products2 li { margin: 0 10px;}
}

@media screen and (max-width:899px){
    #products2 .slick-list { padding: 0 22%;}
}

@media screen and (max-width:699px){
    #products2 .slick-list { padding: 0 15%;}
}

/* slick ドットナビゲーションボタン */
#products2 ul.slick-dots { margin: 20px 0 0; text-align: center;}
#products2 ul.slick-dots li {display: inline-block; margin: 0 5px 5px; padding: 0;}
#products2 ul.slick-dots button {
    display: block; 
    width:10px; height:10px; margin:0; padding: 0;
	border: none; border-radius: 5px; outline: 0;
	background: #cecece;
    text-indent: -9999px;}

#products2 .slick-dots li.slick-active button {background: #53b4ba;}

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

/**============================================================================================**/
/* 特徴 */
#products3 ul { padding: 0 60px;}
#products3 li { 
    box-sizing: border-box; margin: 0 15px; padding: 20px 15px;
    border: solid 1px #000; border-radius: 20px;}

@media screen and (max-width:799px){
    #products3 ul { padding: 0;}
    #products3 li { margin: 0 10px; padding: 15px 10px; border-radius: 20px; font-size: 14px;}

    #products3 .slick-list { padding: 0 20%;}
}

@media screen and (max-width:699px){
    #products3 .slick-list { padding: 0 14%;}
}

@media screen and (max-width:399px){
    #products3 li { margin: 0 6px; font-size: 13px;}
}

/**========================================**/
/* slickの高さ調整 */
.mako li { height: 970px;}
.manta li { height: 970px;}
.u1 li { height: 910px;}

@media screen and (max-width:1799px){
    .mako li { height: 950px;}
    .manta li { height: 950px;}
    .u1 li { height: 895px;}
}

@media screen and (max-width:1699px){
    .mako li { height: 925px;}
    .manta li { height: 945px;}
    .u1 li { height: 860px;}
}

@media screen and (max-width:1599px){
    .mako li { height: 910px;}
    .manta li { height: 925px;}
    .u1 li { height: 860px;}
}

@media screen and (max-width:1499px){
    .mako li { height: 910px;}
    .manta li { height: 905px;}
    .u1 li { height: 860px;}
}

@media screen and (max-width:1399px){
    .mako li { height: 850px;}
    .manta li { height: 875px;}
    .u1 li { height: 790px;}
}

@media screen and (max-width:1299px){
    .mako li { height: 960px;}
    .manta li { height: 960px;}
    .u1 li { height: 900px;}
}

@media screen and (max-width:1199px){
    .mako li { height: 940px;}
    .manta li { height: 945px;}
    .u1 li { height: 880px;}
}

@media screen and (max-width:1099px){
    .mako li { height: 910px;}
    .manta li { height: 925px;}
    .u1 li { height: 860px;}
}

@media screen and (max-width:999px){
    .mako li { height: 820px;}
    .manta li { height: 850px;}
    .u1 li { height: 765px;}
}

@media screen and (max-width:899px){
    .mako li { height: 770px;}
    .manta li { height: 800px;}
    .u1 li { height: 720px;}
}

@media screen and (max-width:799px){
    .mako li { height: 780px;}
    .manta li { height: 835px;}
    .u1 li { height: 795px;}
}

@media screen and (max-width:699px){
    .mako li { height: 840px;}
    .manta li { height: 845px;}
    .u1 li { height: 785px;}
}

@media screen and (max-width:599px){
    .mako li { height: 820px;}
    .manta li { height: 825px;}
    .u1 li { height: 745px;}
}

@media screen and (max-width:499px){
    .mako li { height: 740px;}
    .manta li { height: 775px;}
    .u1 li { height: 695px;}
}

@media screen and (max-width:399px){
    .mako li { height: 710px;}
    .manta li { height: 730px;}
    .u1 li { height: 635px;}
}

/**========================================**/
#products3 img { margin-bottom: 20px; border-radius: 20px;}

#products3 h3 { margin: 0 0 30px; text-align: center;}
#products3 h3 span {
    display: inline-block;
    padding: 5px 15px;
    border: solid 1px #53b4ba;
    color: #53b4ba; font-size: 16px; font-weight: 900; line-height: 1.0em;}

#products3 strong {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 100%; height: 80px; margin-bottom: 20px; 
    border-bottom: dashed 1px #9fa1a0;
    font-size: 25px; line-height: 1.4em;}

@media screen and (max-width:1599px){
    #products3 strong { font-size: 20px;}
}

@media screen and (max-width:999px){
    #products3 img { margin-bottom: 15px;}
    
    #products3 h3 span { padding: 5px 10px; font-size: 14px;}
    
    #products3 strong { height: 60px; margin-bottom: 10px; font-size: 16px;}
}

@media screen and (max-width:399px){
    #products3 strong { font-size: 14px;}
}

/**========================================**/
/* slick */
#products3 .slick-list { box-sizing: border-box; width: 100%;}


/* コントロールボタン */
#products3 .prev,
#products3 .next {
    display: block;
    position: absolute; top: 50%; z-index: 5;
    width: 30px; height: 60px;
    transform: translateY(-50%);}

#products3 .prev { left: 20px;}
#products3 .next { right: 20px;}

@media screen and (max-width:799px){
    #products3 .prev { left: 10px;}
    #products3 .next { right: 10px;}
}

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

/**============================================================================================**/
/* 仕様 */
#products4 { max-width: 1000px; padding: 0 20px;}

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

/**========================================**/
/* マニュアル */
#products4 .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;}

#products4 .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%);}

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

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

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

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

#products4 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);}

#products4 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,
#menu2:checked ~ .area2,
#menu3:checked ~ .area3 { margin-top: 15px; border-top: solid 1px #9fa1a0; opacity: 1;}

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

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

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

/* 基本情報（MAKO） */
#menu1:checked ~ #mako1 { max-height: 850px;}
#menu2:checked ~ #mako2 { max-height: 3000px;}
#menu3:checked ~ #mako3 { max-height: 850px;}

/* 使用方法（MAKO） */
#mako2 ul:not(.part3) { margin: 20px 0 40px;}

#mako2 .part1 li { margin: 5px 0 5px 1em; text-indent: -1em;}

#mako2 .part3 { margin-top: 20px;}
#mako2 .part3 li:not(:first-child) { margin-top: 20px;}
#mako2 .part3 p { margin-left: 1em; text-indent: -1em;}

/* セット内容（MAKO） */
#mako3 li { margin: 5px 0 5px 1em; text-indent: -1em;}


/* 基本情報（MANTA） */
#menu1:checked ~ #manta1 { max-height: 600px;}
#menu2:checked ~ #manta2 { max-height: 1000px;}


/* 基本情報（U1） */
#menu1:checked ~ #u1_1 { max-height: 350px;}
#menu2:checked ~ #u1_2 { max-height: 4000px;}

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

/**============================================================================================**/
/* FAQ（よくある質問）–  U1 */
#faq { max-width: 1000px; padding: 0 20px;}
#faq ul { border-bottom: solid 1px #9fa1a0;}

/* 開閉ボタン */
#faq input { display: none;}

#faq label {
    display: block; position: relative; 
    padding: 15px 0 15px 30px; 
    border-top: solid 1px #9fa1a0;
    font-size: 16px; font-weight: 600; line-height: 1.6em;}

#faq label::before {
    content: '＋';
    display: block; position: absolute; top: 15px; left: 5px;}

@media screen and (max-width:699px){
    #faq label { font-size: 14px;}
}

/* 表示・非表示エリア */
.area1,.area2,.area3,.area4,.area5 {
  overflow-y: hidden;
  max-height: 0; margin: 0; padding:0; 
  border:none; 
  opacity: 0; font-size: 14px; line-height: 1.6em;
  -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;}

/* アコーディオンをクリックした場合 */
#faq1:checked ~ .area1,
#faq2:checked ~ .area2,
#faq3:checked ~ .area3,
#faq4:checked ~ .area4,
#faq5:checked ~ .area5 { max-height: 170px; margin: 0 0 30px; opacity: 1;}

#faq1:checked ~ label[for="faq1"]::before,
#faq2:checked ~ label[for="faq2"]::before,
#faq3:checked ~ label[for="faq3"]::before,
#faq4:checked ~ label[for="faq4"]::before,
#faq5:checked ~ label[for="faq5"]::before { content: '－';}

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

/**============================================================================================**/
/* 購入 */
#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.05_kimata */