@charset "UTF-8";
/* ========================================
   全体設定
======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    font-family: "NotoSerifJP Regular";
    font-weight: 400;
    font-size: 16px;
    color: #565656;
}

body.cooling-page {
    overflow: hidden;
    padding-top: 0;
    background-image: url(https://cdn.shopify.com/s/files/1/0593/3613/0738/files/cool_it26_KV.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 0;
    background-attachment: fixed;
    background-position: center center;
    }

ul {
  list-style: none;
  padding-inline-start: 0;
}

a {
    text-decoration: none;
    color: inherit !important;

}

a:hover {
    text-decoration: none;
    opacity: 0.8;
}

/* ========================================
   固定背景
======================================== */
.cooling-bg {
}

/* ========================================
   中央コンテンツ
======================================== */
.center {
    margin: 60px auto 0;
    width: 60%;
    background-color: #fffdfd;
}

.cooling-container {
    /*position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;*/
    padding-bottom: 40px;
    margin: 0 auto !important;
    width: 40% !important;
    background-color: #fffdfd !important;
}

.cooling-content {
  width: 100%;
  /*max-width: 750px;*/
  background: #ffffff;
  min-height: 100vh;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.12);
}

/* 共通 */
.mt-10 {
    margin-top: -10px !important;
}

.mt_10 {
    margin-top: 10px !important;
}

.mt_20 {
    margin-top: 20px !important;
}

.mt_30 {
    margin-top: 30px !important;
}

.mt_50 {
    margin-top: 50px !important;
}

.mt_70 {
    margin-top: 70px !important;
}

.pt_130 {
	padding-top: 130px;
}

.mb_50 {
    margin-bottom: 50px !important;
}

/* 共通テキスト */
.text_c {
    text-align: center;
}

.text_12 {
    font-size: 12px;
}

/* 共通コンテンツ */
.center_con {
    padding-bottom: 0;
    background-color: #fffcf5;
    padding-top: 40px;
    margin: 0 auto 40px;
    width: 70%;
}

.cooling-content-btn {
    width: 70%;
    margin: 0 auto;
    padding: 5px 20px 60px;
}


/* =======================
   header
======================= */
video {
    max-width: 100%;
    border: 0;
    vertical-align: middle;
}
    
#header-con {
    background-color: #fffdfd;
    padding-bottom: 30px;
}

.function {
    display: flex;
    margin: 40px auto 0;
    gap: 20px;
}

.function img {
    width: 100%;
}

/* =========================
   COOLING ITEMS LINE UP
========================= */
.lineup-heading {
  position: relative;
  width: 100%;
  aspect-ratio: 750 / 250;
  overflow: hidden;
  padding-top: 40px;
}

.lineup-wave {
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  line-height: 0;
  margin-bottom: -1px;
}

.lineup-heading__title {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.06em;
    text-align: center;
    margin: 0;
    font-size: 38px;
    line-height: 45px;
    font-family: "Josefin Sans", sans-serif;
    font-weight: 700;
    color: #4c78b9;
    padding-top: 70px;
}

.lineup-heading__title span {
    display: block;
}

/* コンテンツ */
#lineup-content {
    background-image: url(https://cdn.shopify.com/s/files/1/0593/3613/0738/files/cool_it26_lineup_bg01.jpg);
    background-size: cover;
}
.lineup-inner {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 30px 30px 0;
}


/* グリッド */
.lineup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 70%;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px;
}

/* アイテム */
.lineup-item {
    display: block;
    transition: all 0.3s ease;
}

.lineup-item:hover {
    transform: translateY(-8px);
    opacity: 0.9;
}

.lineup-item img {
    width: 100%;
    display: block;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .3s ease, opacity .3s ease;
    justify-content: center;
}

.btn-a {
    background: #fff;
    border: 2px solid #4C78B6;
    color: #4C78B6 !important;
    margin: 30px auto 0;
    width: 90%;
    text-align: center;
}

#cooling-content-bnr {
    background-color: #fffcf5;
    padding: 40px 0;
    text-align: center;
}

#cooling-content-bnr img {
    width: 90%;
    box-shadow: rgba(0, 0, 0, .25) 1px 1px 5px;
}

/* =========================
        LINE UP
========================= */
.lineup-list {
    background-color: #fffcf5;
}

.coolingring .top-c {
    width: 100%;
    height: 16px;
    margin: 0 auto;
    background-color: #f4c6cc;
}

.coolingring img {
    width: 100%;
}

.text_dot {
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    text-underline-offset: 8px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    text-decoration-line: underline !important;
    text-decoration-color: #565656 !important;
    text-decoration-style: dotted !important;
    text-decoration-thickness: 2px !important;
}

/* === クールリング === */
.coolingring-2size {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color: #fffcf5;
    padding-top: 40px;
}

.coolingring-2size img {
    width: 26%;
    height: auto;
}

.size-grid{
    margin: 0 auto;
    width: 90%;
    background-color: #fffcf5;
    padding-bottom: 60px;
    display:flex;
    gap: 10px;
    justify-content: center;
}

.size-card{
    flex:1;
    border:1px solid #79aac7;
    padding: 0 16px 24px;
    position:relative;
}

.size-head{
	color: #63a0bc;
	font-size: 46px;
	text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
	background-color: #fffcf5;
	width: 30%;
    margin: -37px auto 0;
}

.size-head span{
    color: #63a0bc;
    font-size: 42px;
    text-align: center;
	font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    background-color: #fffcf5;
    padding: 0 10px;
}

.size-img{
    text-align:center;
    margin-bottom: 16px;
}

.size-img img{
    width:100% !important;
}

.size-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.info-row{
	display:flex;
	align-items:center;
	justify-content: center;
	gap:18px;
}

.label{
    min-width: 90px;
    background:#6da6c5;
    color:#fff;
    text-align:center;
    border-radius:999px;
    padding:10px 0;
    font-size:16px;
    font-weight:400;
    line-height:1;
}

.value{
    color:#6da6c5;
    font-size:16px;
    font-weight:400;
    line-height:1;
}

/* スライダー */
.design-sec{
    padding:0 20px;
    overflow:hidden;
}

.design-title-wrap{
    text-align:center;
    margin-bottom:60px;
}

.coolingring-design {
	text-align: center;
}

.coolingring-design img {
	width: 40%;
}

.design-slider-wrap{
	position:relative;
	/*max-width:1100px;*/
	margin: 10px auto 0;
	width: 90%;
}

.design-slider{
    overflow:hidden;
}

.design-track{
    display:flex;
    transition:transform .4s ease;
}

.design-item{
    flex:0 0 33.333%;
    text-align:center;
}

.design-item img{
    width:100%;
    max-width:250px;
}

/* =========================
  矢印ボタン
========================= */
.design-arrow{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width: 40px;
	height: 40px;
	border:none;
	background:none;
	cursor:pointer;
	z-index:10;
	padding:0;
}

/* 丸背景 */
.design-arrow::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#a9a7a3;
    transition:.3s;
}

/* 矢印 */
.design-arrow::after{
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	width: 7px;
    height: 7px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
	transform-origin:center;
}

/* 左 */
.design-arrow.prev{
    left:-40px;
}

.design-arrow.prev::after{
    transform:translate(-35%,-50%)
    rotate(-135deg);
}

/* 右 */
.design-arrow.next{
    right:-40px;
}

.design-arrow.next::after{
  transform:
    translate(-65%,-50%)
    rotate(45deg);
}

/* hover */
.design-arrow:hover::before{
    background:#292929;
}

/* ドット */
.design-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:40px;
}

.design-dot{
    width:20px;
    height:6px;
    background:#b8b8b8;
}

.design-dot.active{
    background:#000;
}

/* 下メモ */
.design-note, .design-note2 {
	margin: 60px auto 0;
    width: 75%;
    max-width: 550px;
	background:#dbeaf1;
	border:1px dashed #666;
	border-radius:24px;
	display:flex;
	align-items:center;
	gap:24px;
	padding: 12px 14px;
}

.design-note img{
	width: 12%;
	flex-shrink:0;
}

.design-note p, .design-note2 p {
    margin:0;
    color:#555;
    font-size:15px;
    line-height:1.7;
}

.design-note span{
    font-weight:700;
}

/* === クールリング用保冷バッグ === */
#coolingringscase .top-c {
    background-color: #b3d8d4;
}
.c-img-b {
	width: 70%;
	margin: 30px auto 0;
	background-color: rgba(179, 216, 212, .6);
    padding: 6px 6px 6px;
	border: 1px solid rgba(179, 216, 212, .6);
    border-radius: 16px;
}

.c-img-g {
	width: 70%;
	margin: 30px auto 0;
	background-color: rgba(202, 226, 119, .6);
    padding: 6px 6px 6px;
	border: 1px solid rgba(202, 226, 119, .6);
    border-radius: 16px;
    text-align: center;
}

.c-img-b img, .c-img-g img, .c-img-c img {
	width: 100%;
}

/* === 氷のう === */
#icepack .top-c {
    background-color: #cae277;
}

.buy-btn {
	text-align: center;
}

.btn-b {
    background: #4C78B6;
    border: 2px solid #4C78B6;
    border-radius: 30px;
    color: #fff !important;
    margin: 10px auto 0;
    width: 30%;
    text-align: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 14px;
    text-decoration: none;
    transition: background-color .3s ease, opacity .3s ease;
    justify-content: center;
}

/* === アイスハット ===*/
#icehat .top-c {
    background-color: #fce257;
}

.img-flex {
	display: flex;
    width: 95%;
    margin: 0 auto;
	gap:8px;
}

.img-flex-1 img, .img-flex-2 img, .img-flex-3 img {
	width: 100%;
}

.img-flex-2 img {
	background-color: #ebf6f9;
}

/* === アイスバック ===*/
#iceback .top-c {
    background-color: #95c3e2;
}

/* 自動スクロール */
.scene-auto{
    overflow:hidden;
    margin:60px 10px 0;
}

.scene-slider{
    overflow:hidden;
}

.scene-track{
    display:flex;
    transition:transform .7s ease;
}

.scene-item{
    flex:0 0 48%;
    padding:0 12px;
    box-sizing:border-box;
}

.scene-item img{
    width:100%;
    display:block;
}

/* ドット */
.scene-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:28px;
}

.scene-dot{
  width:20px;
  height:5px;
  background:#cfcfcf;
  transition:.3s;
}

.scene-dot.active{
  background:#222;
}

@keyframes sceneLoop{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

/* 取り付け方 */
.howto-sec{
    padding: 60px 0 0;
}

.howto-title{
  text-align:center;
  font-size:22px;
  color:#f28c57;
  margin-bottom:10px;
}

.howto-slider-wrap{
  position:relative;
  width:100%;
}

.howto-slider{
  overflow:hidden;
}

.howto-track{
  display:flex;
  transition:transform .4s ease;
}

.howto-item{
	flex: 0 0 40%;
	padding: 0 8px;
	box-sizing:border-box;
}

.howto-item img{
  width:100%;
  display:block;
}

.howto-item p{
  margin-top:20px;
  font-size:14px;
  line-height:1.8;
  color:#666;
}

/* 矢印 */
.howto-arrow{
	position:absolute;
	top:38%;
	transform:translateY(-50%);
	width: 40px;
	height: 40px;
	border:none;
	background:none;
	z-index:10;
	cursor:pointer;
    opacity: 0.9;
}

.howto-arrow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#aaa;
}

.howto-arrow::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:8px;
    height:8px;
    border-top:1px solid #fff;
    border-right:1px solid #fff;
    opacity: 0.9;
}

.howto-arrow.prev{
  left:0px;
}

.howto-arrow.prev::after{
  transform:translate(-35%,-50%) rotate(-135deg);
}

.howto-arrow.next{
  right:0px;
}

.howto-arrow.next::after{
  transform:translate(-65%,-50%) rotate(45deg);
}

/* hover */
.howto-arrow:hover::before{
  background:#292929;
}

.img-flex2 {
	display: flex;
    width: 85%;
    margin: 0 auto;
}

.img-flex-3 {
    width: 60%;
}

.design-note2 img {
    width: 20%;
    flex-shrink: 0;
}

.text-14 {
    width: 95%;
    margin: 20px auto 0;
    font-size: 14px;
    text-align: center;
}

/* =========================
   GALLERY
========================= */
.gallery-wrap{
  overflow:hidden;
  width:100%;
}

.gallery-slider{
  overflow:hidden;
}

.gallery-track{
  display:flex;
  transition:transform .5s ease;
}

.gallery-item{
  flex:0 0 40%;
  padding:0 12px;
  box-sizing:border-box;
}

.gallery-item img{
  width:100%;
  display:block;
}

/* ドット */
.gallery-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:24px;
}

.gallery-dot{
  width:20px;
  height:5px;
  background:#bdbdbd;
  transition:.3s;
}

.gallery-dot.active{
  background:#000;
}



/* === アイスマット ===*/
#icemat .top-c {
background-color: #6273ba;
}

.c-img-c {
    width: 90%;
    margin: 16px auto 0;
}

.text_w70 {
    text-align: center;
    width: 70%;
}

/* === リンクボタン ===*/
#link-footer {
    padding-top: 80px;
    padding-bottom: 90px;
}

.cool-btn-wrap{
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
    gap: 16px;
}

.cool-btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    border: 2px solid #4d79bd;
    color: #4d79bd !important;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.05em;
    transition: .3s;
    background-color: #fff;
}

/* 矢印 */
.cool-btn::after{
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #4d79bd;
  border-right: 2px solid #4d79bd;
  transform: translateY(-50%) rotate(45deg);
}

/* hover */
.cool-btn:hover{
  background: #4d79bd;
  color: #fff;
}

.cool-btn:hover::after{
  border-color: #fff;
}

.bnr_img {
    width: 70%;
    margin: 0 auto 0;
}

.bnr_img img {
    width: 100%;
    box-shadow: rgba(0, 0, 0, .25) 2px 2px 5px;
}

.top_re {
    color: #4c78b9;
    text-align: center;
    font-size: 15px;


    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    letter-spacing: 0.05em;
    transition: .3s;
    font-weight: 400;
}

/* 矢印 */
.top_re::after{
    content: "";
    position: absolute;
    right: 38%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid #4d79bd;
    border-right: 2px solid #4d79bd;
    transform: translateY(-40%) rotate(-45deg);
}

/* =========================
  開閉ボタン
========================= */
.floating-menu-btn{
position:fixed;
  right:20px;
  bottom:20px;
  z-index:9998;
  width:70px;
  height:70px;
  border:none;
  background:none;
  padding:0;
  cursor:pointer;
  transition:.3s;
}

/* 画像 */
.floating-menu-btn img{
  width:100%;
  display:block;
}

/* =========================
  メニュー本体
========================= */
.floating-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:36%;
    height:100vh;
    background:#f5f2eb;
    border:2px solid #4d79bd;
    z-index:9998;
    transition:.5s ease;
    box-sizing:border-box;
    padding:70px 40px;
    margin-top: 45px;
}

/* 開いた時 */
.floating-menu.active{
  right:0;
}

/* メニュー開いたら消す */
.floating-menu.active + .floating-menu-btn,
.floating-menu-btn.hide{
  opacity:0;
  visibility:hidden;
}

/* MENUボタン消す */
.floating-menu-btn.hide{
  pointer-events:none;
}

/* 非表示 */
.floating-menu-btn.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* =========================
  ナビ
========================= */
.floating-menu-nav{
  display:flex;
  flex-direction:column;
  gap:34px;
}

.floating-menu-nav a{
  color:#4d79bd;
  text-decoration:none;
  font-size:24px;
  font-weight:400;
  letter-spacing:.03em;
  transition:.3s;
}

.floating-menu-nav a:hover{
  opacity:.6;
}

/* =========================
  CLOSEボタン
========================= */
.floating-menu-close{
    position:absolute;
    right:30px;
    bottom:60px;
    width:62px;
    height:62px;
    border:2px solid #4d79bd;
    border-radius:50%;
    background:transparent;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    pointer-events:none;
}

/* メニュー開いたら表示 */
.floating-menu.active .floating-menu-close{
  opacity:1;
  visibility:visible;
}

/* × */
.floating-menu-close::before,
.floating-menu-close::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:24px;
  height:2px;
  background:#4d79bd;
}

.floating-menu-close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.floating-menu-close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* 表示 */
.floating-menu-close.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}



/* =========================
   SP
========================= */
@media screen and (max-width: 767px) {
    
/* ==============
　　中央コンテンツ
===============*/
.cooling-container {
    margin: 0 auto !important;
    width: 100% !important;
}
    
.cooling-content {
    width: 100%;
    max-width: fit-content;
}
    
.text_c {
    font-size: 12px;
    padding: 12px 20px;
    line-height: 20px;
}   
    

/* ==============
　　ヘッダー
===============*/
#header-con {
    padding-bottom: 0px;
}
.center {
    width: 80%;
}  
    
/* ==============
　　LINE UP
===============*/
.lineup-heading {
    aspect-ratio: 700 / 330;
}
    
.lineup-heading__title {
    font-size: 32px;
    padding-top: 80px;
}
    
#lineup-content {
    padding-top: 40px;
}
    
.cooling-lineup {
    padding-bottom: 50px;
  }

.lineup-inner {
    margin-top: -10px;
    padding: 0 15px;
  }

.lineup-grid {
    gap: 12px;
    width: 90%;
  }
    
.cooling-content-btn {
    width: 80%;
}
    
/* === クールリング ===*/
.coolingring-2size img {
	width: 40%;
}
    
.coolingring-design img {
	width: 70%;
}
	
.cool-size-sec{
    padding:50px 16px;
  }

.size-badge{
    width:150px;
    font-size:20px;
    padding:14px 0;
    margin-bottom:40px;
  }

.size-grid{
    gap:14px;
  }

.size-card{
    padding:0 12px 22px;
  }

.size-head {
    width: 30%;
	margin: -40px auto 0;
}
    
.size-head span{
    font-size:34px;
    padding:0 10px;
  }

.size-img img{
    width:95%;
  }

.info-row{
    flex-direction:column;
    align-items: center;
    gap:8px;
  }

.label{
    min-width:88px;
    font-size:14px;
    padding:8px 0;
  }

.value{
    font-size:16px;
  }

/* スライダー */
.design-sec{
    padding:0 16px;
  }

.design-title{
    width:300px;
    height:62px;
    font-size:24px;
  }

.design-slider-wrap{
    width:100%;
  }

.design-item{
  flex: 0 0 50%;
  padding: 0 5px;
  box-sizing: border-box;
}
	
.design-item img{
    width:100%;
  }

.design-arrow{
    width:40px;
    height:40px;
  }

.design-arrow::after{
	width: 6px;
	height: 6px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

.design-arrow.prev{
    left:-12px;
  }

.design-arrow.next{
    right:-12px;
  }
	
.design-dots{
    margin-top:25px;
    gap:8px;
  }

.design-note{
    margin: 20px auto 0;
    padding:18px;
    border-radius:18px;
    gap:14px;
	width: 85%;
  }

.design-note img{
    width:12%;
  }

.design-note p{
    font-size:15px;
    line-height:1.7;
  }
	
/* === クールリング用保冷バッグ === */
.c-img-b, .c-img-g {
	width: 90%;
}
		
/* === アイスバック === */
.scene-item{
    flex:0 0 68%;
    padding:0 8px;
  }

.scene-dot{
    width:28px;
    height:6px;
  }
	
.howto-item{
    flex:0 0 45%;
  }

.howto-title{
    font-size: 18px;
    margin-bottom: 10px;
}

.howto-item p{
    font-size:14px;
  }

.howto-arrow{
    width:40px;
    height:40px;
  }

.howto-arrow.prev {
    left:0;
  }

.howto-arrow.next {
    right:0;
  }

.howto-arrow::after {
    width:6px;
    height:6px;
}

.btn-b {
    width: 60%;
}
.img-flex-3 {
    width: 70%;
} 
.design-note2 img {
    width: 24%;
}
.design-note2 {
    gap: 10px;
    margin-top: 0 !important;
}
.img-flex2 {
    width: 95%;
}
   
.text_w70 {
    width: 80%;
}
.cool-btn-wrap {
    width: 90%;
}
.bnr_img {
    width: 90%;
}
    
.top_re::after {
    right: 30%;    
}
    
  .gallery-item{
    flex:0 0 68%;
    padding:0 8px;
  }

  .gallery-dots{
    gap:8px;
    margin-top:20px;
  }

  .gallery-dot{
    width:28px;
    height:6px;
  }

    
/*=== 追従メニュー ===*/
  .floating-menu{
    width: 100%;
    padding: 60px 40px;
    border-radius: 30px 0 0 0;
    margin-top: 50px;
}

  .floating-menu-nav{
    gap:30px;
  }

  .floating-menu-nav a{
    font-size:22px;
  }

 .floating-menu-close{
    right:20px;
    bottom:60px;
    width:60px;
    height:60px;
  }
    
  .floating-menu-btn{
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
  }
}