{% block main %}
<style>
.main_box_spr {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: auto;
height: auto;
display: flex;
margin-left: auto;
margin-right: auto;
background-color: ;
border-radius: px;
z-index: 9999;
position: relative;
background-size: cover;
}
.box_spr {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-image: url("https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/sm2025_top.png");
width: 100%;
text-align: center;
margin-top: px;
margin-left: auto;
margin-right: auto;
margin-bottom: px;
position: relative;
border-radius: px;
background-size: cover;
}
.box_spra {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: auto;
padding-left: 4%;
padding-right: 4%;
{#position: relative;#}/*sliderに重ねる場合使用*/
{#z-index: 9999;#}/*sliderに重ねる場合使用*/
}
.box_spr1 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
height: 40px;
margin-top: 6px;
margin-left: 5px;
margin-right: 5px;
border-radius: 6px;
z-index: 999;
}
.box_spr2 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
width: 100%;
margin-top: -20px;
margin-left: 3vw;
margin-right: 3vw;
}
.box_spr3 {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
background-color: ;
width: calc(118% / 2 - 5px);
min-width: 320px;
height: auto;
z-index: 1;
margin-bottom: 6%;
}
.box_spr4 {
/*background: linear-gradient(176deg,#00cccc 5%, #ffffff 15%, #ffffff 80%, #00cccc);*/
border-radius: 8px;
width: 340px;
height: 340px;
z-index: 1;
/*border: solid 1px #dcdcdc;*/
margin-bottom: 10px;
margin-top: 20px;
}
.box_spr5 {
background-color: ;
width: calc(100% / 6 - 2px);
height: auto;
max-height: 180px;
z-index: 9;
margin-top: 10px;
}
.box_spr6 {
width: 100%;
margin-bottom: 0px;
}
.box_spr7 {
width: 100%;
max-height: 300px;
border-radius: 6px;
margin: 0 auto;
position: absolute;
top: 0px;
}
.pexample_spr {
font-size: 16px;
color: #ffffff;
font-weight: 500;
height: auto;
margin-left: px;
text-align: center;
margin-top: 10px;
}
.pexample_spr2 {
font-size: 16px;
color: #000;
font-weight: 400;
height: auto;
margin-left: px;
text-align: center;
margin-top: 3px;
}
/*ビデオコントロール*/
video {
max-width: auto;
border-radius: 6px;
margin: 0 auto;
position: absolute;
top: 0px;
}
.slide-in4 {
margin-top: 2vw;
font-size: 26px;
font-weight: bold;
animation: slideIn 2s ease-out;
color: #66cdaa;
z-index: 9999;
text-align: center;
font-weight: 600;
/*-webkit-text-stroke: 0.2px #fff;
text-stroke: 0.2px #fff;*/
padding-left: 4%;
padding-right: 4%;
}
.slide-in5 {
font-size: 21px;
font-weight: bold;
animation: slideIn 2s ease-out;
color: #006666;
z-index: 9999;
text-align: center;
font-weight: 600;
margin-top: -2px;
}
.slide-in5a {
background-color: #fff;
border-radius: 25px;
border: solid 1px #006666;
font-size: 16px;
font-weight: bold;
animation: slideIn 2s ease-out;
color: #fff;
z-index: 9999;
text-align: center;
font-weight: 400;
margin-top: 10px;
margin-bottom: 10px;
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.fadeslide {
position: relative;
width: 320px;
height: 320px;
overflow: hidden;
z-index: 0;
}
.fadeslide div {
position: absolute;
top: 0;
left: 0;
}
.fadeslide div:nth-of-type(1) {
animation: fadeslide 60s 0s infinite both;
z-index: 12;
}
.fadeslide div:nth-of-type(2) {
animation: fadeslide 60s 5s infinite both;
z-index: 11;
}
.fadeslide div:nth-of-type(3) {
animation: fadeslide 60s 10s infinite both;
z-index: 10;
}
.fadeslide div:nth-of-type(4) {
animation: fadeslide 60s 15s infinite both;
z-index: 9;
}
.fadeslide div:nth-of-type(5) {
animation: fadeslide 60s 20s infinite both;
z-index: 8;
}
.fadeslide div:nth-of-type(6) {
animation: fadeslide 60s 25s infinite both;
z-index: 7;
}
.fadeslide div:nth-of-type(7) {
animation: fadeslide 60s 30s infinite both;
z-index: 6;
}
.fadeslide div:nth-of-type(8) {
animation: fadeslide 60s 35s infinite both;
z-index: 5;
}
.fadeslide div:nth-of-type(9) {
animation: fadeslide 60s 40s infinite both;
z-index: 4;
}
.fadeslide div:nth-of-type(10) {
animation: fadeslide 60s 45s infinite both;
z-index: 3;
}
.fadeslide div:nth-of-type(11) {
animation: fadeslide 60s 50s infinite both;
z-index: 2;
}
.fadeslide div:nth-of-type(12) {
animation: fadeslide 60s 55s infinite both;
z-index: 1;
}
@keyframes fadeslide {
0% { left: 0; opacity: 0; }
3% { left: 0; opacity: 1; }
6% { left: 0; opacity: 1; }
9% { left: 0; opacity: 0; }
10% { left: 100%; opacity: 0; }
100% { left: 100%; opacity: 0; }
}
summary {
display: block;
list-style: none;
cursor: pointer;
color: #ffffff;
}
summary::-webkit-details-marker {
display:none;
}
details {
margin: 0 auto;
margin-left: 0;
}
.cp_navi03 ul {
width: 260px;/*メニューの幅*/
margin-left: 20px;
margin: 0 auto;
padding: 0;
list-style-type: none;
background-color: #eeeeee;
border-radius: 4px 4px 4px 4px;
position: absolute;
}
.cp_navi03 li a {
display: block;
padding: 6px 16px;
text-decoration: none;
color: #000000;
transition: all .3s;
text-align: left;
}
.cp_navi03 li {
text-align: center;
}
.cp_navi03 li:last-child {
border-bottom: none;
}
.cp_navi03 li a.active {
margin: 0 auto;
margin-top: px;
color: #fff;
background-color: #1b2538;
border-radius: 4px 4px 0px 0px;
font-weight: 900;
}
.cp_navi03 li a:hover:not(.active) {
color: #ffffff;
background-color: #1b2538;
text-align: left;
}
.example_cp {
display: inline;
font-size: 3rem;
color: #ffffff;
}
.fit-picture_o {
width: 160px;
opacity: 0.6;
}
.fit-picture_n {
width: 40px;
margin-top: -2px;
}
</style>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="ナカトミ スポットクーラー">
<title>ナカトミヒーター</title>
<meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes"/>
</head>
<body>
<div class="main_box_spr">
<div class="box_spr">
<div class="box_spr1">
<details>
<summary>
<p class="example_cp">≡</p>
</summary>
<div class="cp_navi03">
<ul>
<li><a href="https://www.nakatomishop.com/products/list?category_id=76" class="active">新商品R32シリーズ</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1364">SAC-18</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1366">SAC-27HCS</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1351">SAC-30</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1352">SAC-30S</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1365">SPC-30WS</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1353">SPC-34</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1354">SAC-34S</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1367">SPC-30S(三相200V)</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1355">SPC-48S(三相200V)</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1356">SPC-68(三相200V)</a></li>
<li><a href="https://www.nakatomishop.com/products/detail/1369">SPC-100B(三相200V)</a></li>
<li><a href="https://www.nakatomishop.com/user_data/2025spop"><font size="2rem">適合オプション品の確認はこちらから</font></a></li>
</ul>
</div>
</details>
</div>
<div class="box_spra">
<div class="box_spr2">
<div class="box_spr3">
<div class="box_spr6">
<div class="slide-in4">環境に配慮したR32冷媒!全閉式ファンモーター搭載!プレミアムモデル
</div>
</div>
<div class="box_spr5">
<p class="pexample_spr">
<a href="https://www.nakatomishop.com/products/detail/1364">
<img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-18_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-18</p></p>
</div>
<div class="box_spr5">
<p class="pexample_spr">
<a href="https://www.nakatomishop.com/products/detail/1366">
<img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-27HCS_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-27HCS</p></p>
</div>
<div class="box_spr5">
<p class="pexample_spr">
<a href="https://www.nakatomishop.com/products/detail/1365">
<img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30WS_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SAC-30WS</p></p>
</div>
<div class="box_spr5">
<p class="pexample_spr">
<a href="https://www.nakatomishop.com/products/detail/1367">
<img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-30S_150_200.png" width="100%" alt=""></a><p class="pexample_spr2"><font color="red">NEW </font>SPC-30S</p></p>
</div>
<div class="box_spr5">
<p class="pexample_spr">
<a href="https://www.nakatomishop.com/products/detail/1369">
<img src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-100B_150_200.png" width="100%" alt=""></a><p class="pexample_spr2">
<font color="red">NEW </font>SPC-100B</p></p>
</div>
</div>
<div class="box_spr4">
<div class="fadeslide">
<div>
<a href="https://www.nakatomishop.com/products/detail/1364">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-18_SL2.png" width="320px" alt="スライドショー画像1"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1351">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30_SL2.png" width="320px" alt="スライドショー画像2"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1352">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30S_SL2.png" width="320px" alt="スライドショー画像3"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1365">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-30WS_SL2.png" width="320px" alt="スライドショー画像4"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1366">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-27HCS_SL2.png" width="320px" alt="スライドショー画像5"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1353">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34_SL2.png" width="320px" alt="スライドショー画像6"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1354">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SAC-34S_SL2.png" width="320px" alt="スライドショー画像7"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1367">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-30S_SL2.png" width="320px" alt="スライドショー画像8"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1355">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-48S_SL2.png" width="320px" alt="スライドショー画像9"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1356">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-68_SL2.png" width="320px" alt="スライドショー画像10"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/detail/1369">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/SPC-100B_SL2.png" width="320px" alt="スライドショー画像11"></a>
</div>
<div>
<a href="https://www.nakatomishop.com/products/list?category_id=15">
<img class="slidshow-img" src="https://nakatomishop.sakura.ne.jp/prod/merchandiseimage/25summer/OP_dct_300_300.png" width="320px" alt="スライドショー画像12"></a>
</div>
</div>
<script>
$(function(){
$(".slideshow-slide li").css({"position":"relative"});
$(".slideshow-slide li").hide().css({"position":"absolute"});
$(".slideshow-slide li:first").addClass("slide");
$(".slideshow-slide li:nth-child(2)").css({"display":"block"});
setInterval(function(){
var $active = $(".slideshow-slide li.slide");
var $next = $active.next("li").length?$active.next("li"):$(".slideshow-slide li:first");
var $nextnext = $next.next("li");
$active.fadeOut(0).removeClass("slide");
$next.show().addClass("slide");
$nextnext.css({"display":"block"});
},3000);
});
</script>
</div>
</div>
</div>
</div>
</div>
</body>
{% endblock %}