/*リセットCSS*/
     .container, .container section, .container figure, .container div, .container img, .container table, .container ul, .container ol, .container a, .container p, .container h2, .container h3, .container h4 {
        width: 100%;
        margin: 0;
       padding: 0;
         transition: .5s ;
         font-weight: normal;
     }
      ul, ol {
         list-style-type: none;
         padding: 0;
     }
  figcaption {
        margin: 0;
       padding: 0;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    padding: 0;
    margin: 0;
}
     /*ここまでリセットCSS*/
     
     
     
    /* 項目下の空白（全）*/
     .container section {
         margin-bottom:8%;
     }
    /* 項目下の空白ここまで*/
    
    /*タイトル*/
     .title h1 {
         position: absolute;
         right: 2%;
         top: 0;
         color: #fff;
         font-size: 4.5em;
         font-weight: bold;
         text-shadow: 5px 5px 15px rgba(0, 0, 0, .5);
    }
    .container .lineup .item-grp .small {
    font-size: .7em;
        line-height: .5em;
        margin: 0;
        padding: 0;
        text-align: left;
    }
    
      .container .lineup .item-grp h3 .small {
            vertical-align: top;
    }

   .title h1 .small {
           font-size: .5em;
        line-height: .5em;
        margin: 0;
        padding: 0;
       display: block;
        text-align: right;
    }
    .title li {
         background: linear-gradient(#FF3822, #FF7E77, #FF3822);
         color: #FFF;
        padding: 2% 0;
         font-size: 1.7em;
        font-weight: bold;
        text-align: center;
        margin: 5% auto;
        border-radius: 5px;
       filter: drop-shadow(8px 8px 5px rgba(0, 0, 0, .5));
    }
      .title ul {
        position: absolute;
        left: 10%;    
        bottom: 3%;
        width: 30%;
    }
    .title {
        width: 100%;
        height: 576px;
        background: url("https://peaceup.itembox.design/item/common/img/HeatstrokeLP-01.jpg") no-repeat;
        background-size: 100%;
        background-position: 100% 80%;
        position: relative;
    }
    
   /* 導入*/


.container .main {
    position: relative;
    margin-top: 0;
}
    
 .container .intro .heatstroke {
        border:5px solid #B1CDE5;
     padding: 5% 0;
      font-size: 2.5em;
     font-weight: bold;
    }
    .container .intro .heatstroke p  {
        margin: 0 auto 5%;
        width: 95%;
         font-weight: bold;
    line-height: 1.2em;
    }
    .container .intro h2 {
        margin-bottom: 8%;
    }
       .container .about {
                font-size: 2em;
    }
.container .about {
        width: 90%;
        margin: 0 auto;
        text-align: center;
        line-height: 2em;
    font-weight: bold;
    margin:0 auto; 
    }
   .container  .intro {
       padding: 0;
    }


 
    /* ここまで導入*/
    
    /*導入・アイテム共通*/
    .container .item .item-img .img {
    border: 2px dashed #666;
    border-radius: 5px;
    width: 99%;
}
    .container .item .item-detail .bagcolor {
    border: 2px dashed #666;
    border-radius: 100%;
        clip-path: inset(0 0 0 0);
        width: 30%;
        display: inline-block;
        margin-right: 2%;
}
     .container .item .about {
        width: 65%;
        display: inline-block;
            font-weight: bold;
         font-size: 1.2em;
        line-height: 1.7em;
}
   .container #neck_cooler .about {
             display: block;
       margin: 0 auto;
    }
     .container .no-set .about {
     width: 80%;
    display:block;
    }   

    .container .item .item-detail {
        display: block;
        width: 100%;
        position: absolute;
        left: -5%;
        bottom:-30%;
        padding: 0;
        margin: 0 auto;
        font-size: 1.8em;
        line-height: 2em;
    }

   .container .intro .item .imgpic {
        display: block;
       margin: 10% auto;
    }
    
        .container .lineup .item  {
        position: relative;
        margin: 10% auto 35%;
    }
    

       .container .lineup .set-lineup {
        display: block;
        border-radius: 3px;
        font-size: 1.8em;
        line-height: 1.2em;
    }


    /*ここまで導入・アイテム共通*/
    /*ラインアップ*/

.container .lineup .item-grp figure figcaption .cool {
       color: #fff;
    text-shadow: 2px 2px 1px #939393 , 0px 3px 2px #939393 , -2px 2px 1px #939393 , 0px 3px 1px #939393 , 2px -2px 1px #939393 , 0px -3px 2px #939393 , -2px -2px 1px #939393 , -3px 0px 2px #939393;
    line-height: 1.3em;
    padding: 5%0;
        font-weight: unset;
    text-align: left;
    }
    
  .container .lineup #neck_ring figure figcaption img {
       display: block;
        width: 80%;
      margin: 0 auto;
    }
 .container .lineup #ice_vest figure {
        background: linear-gradient(#ffffff, #ffffff, #bfd6ea);
     margin-bottom: 10%;
    }
 .container .lineup #neck_ring figure {
        background: linear-gradient(#ffffff, #ffffff, #b1cde5);
     margin-bottom: 10%;
    }


    .container .lineup #neck_cooler h4,  .container .lineup #ice_vest h4 {
        color: #fff;
            font-size: 3em;
    text-align: center;
        margin: 0 auto -5%;
         text-shadow: 1px 1px 0px #57b2e4, 2px 2px 2px #57b2e4, 4px 4px 5px #57b2e4, 5px 5px 2px #345ba5,
              1px -1px 0px #57b2e4, 2px -2px 2px #57b2e4, 4px -4px 5px #57b2e4, 5px -5px 2px #345ba5,
             -1px -1px 0px #57b2e4, -2px -2px 2px #57b2e4, -4px -4px 5px #57b2e4, -5px -5px 2px #345ba5,
             -1px 1px 0px #57b2e4, -2px 2px 2px #57b2e4, -4px 4px 5px #57b2e4, -5px 5px 2px #345ba5,
              -1px -1px 0px #57b2e4, -2px -2px 2px #57b2e4, -4px -4px 5px #57b2e4, -5px -5px 3px #345ba5,
             -1px 1px 0px #57b2e4, -2px 2px 2px #57b2e4, -4px 4px 5px #57b2e4, -5px 5px 3px #345ba5,
             0px 1px 2px #57b2e4, 0px 2px 2px #57b2e4, 0px 4px 5px #57b2e4, 0px 6px 2px #345ba5,
             1px 0px 2px #57b2e4, 2px 0px 2px #57b2e4, 4px 0px 5px #57b2e4, 6px 0px 2px #345ba5,
             0px -1px 2px #57b2e4, 0px -2px 2px #57b2e4, 0px -4px 5px #57b2e4, 0px -6px 2px #345ba5,
             -1px 0px 2px #57b2e4, -2px 0px 2px #57b2e4, -4px 0px 5px #57b2e4, -6px 0px 2px #345ba5,
             -6px 6px 6px #345ba5, 6px 6px 6px #345ba5, 6px -6px 6px #345ba5, -6px -6px 6px #345ba5;
    }
    
    .container .lineup #neck_ring h4 {
        color: #88c7ff;
            font-size: 3em;
    text-align: center;
        margin: 5% auto;
    }
    
    .container .lineup .item-grp h3 .small {
        line-height: .8em;
    }
    .container .lineup #ice_vest h3  {
  display: inline-block;
  background: linear-gradient(180deg, #43acea, #1663d5 30%, #46c1fb 40%, #0b94cd);
  background: -webkit-linear-gradient(-90deg, #43acea, #1663d5 30%, #46c1fb 40%, #0b94cd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    }

  .container .lineup .item-grp h3:before  {
    content: '';
width: 0;
height: 0;
border-style: solid;
border-width: 65px 37.5px 0 37.5px;
border-color: #ff3822 transparent transparent transparent;
      display: inline-block;
      vertical-align: bottom;
    }
    
   .container .lineup .item-grp h3 .h3-2lines {
       display: block;
           margin: -5% auto 0 22%;
    }
   .container .lineup .item-grp h3 {
        font-size: 3em;
       font-weight: bold;
       text-align: center;
       margin: 0 auto;
       display: inline-block;
    }
    
   .container .lineup {
              padding-top: 8%;
    }
  
  
/*  table*/
     .container .lineup .table {
        width: 80%;
        border-radius: 5px;
        border-collapse: separate;
        margin: 0 auto 10%;
    }
    
      .container .lineup .set-lineup .table th {
        border-radius: 5px 5px 0 5px;
        padding: 1.5% .5%;
        background-color: #B1CDE5;
        text-align: left;
    }
    .container .lineup .item-size .table tr:nth-child(odd) td {
        border-radius: 5px;
        padding: 1.5% .5%;
        background-color: #B1CDE5;
    }

.container .lineup .no-set {
    margin-bottom: 0;
    font-size: 2em;
    }
    
    .container .lineup .set-lineup .table tr:nth-child(odd) td:first-child {
        border-radius: 5px 0 0 5px;
        padding: 1.5% .5%;
        background-color: #B1CDE5;
    }
        .container .lineup .set-lineup .table tr:nth-child(even) td:first-child {
        padding: 1.5% .5%;
        background-color: #fff;
    }
     .container .lineup .set-lineup .table td:nth-child(even) {
        padding: 1.5% 0;
        text-align: center;
        background-color: #B1CDE5;
    }
     .container .lineup .set-lineup .table tr:last-child td:last-child {
    border-radius: 0 0 5px 0;
    }
    
       .container .lineup .item-size {
        display: block;
        border-radius: 3px;
        font-size: 1.8em;
        line-height: 1.2em;
    }    
    
    .table tr td:first-child {
                 padding-left: 1.5vw;
    }
    
     .table .w85 {
        width: 85%;
    }
    .table .w15 {
        width: 15%;
    }    
/* ここまでtable*/
    
    
     /* 価格・ボタン*/
        .red-button {
            background-color: #EA2F2F;
            border-radius: 10px;
            margin: 10px auto;
            box-shadow: 8px 8px 8px rgb(0 0 0 / 25%);
            line-height: 3.5em;
            display: block;
		}
      
       .red-button a:before { /* ボタン丸矢印PC、sp、tabは調整必要*/
        content: '▶';
       font-size: .4em;
       color: #EA2F2F;
       background-color: #fff;
       border-radius: 100px;
       padding: .5vw .4vw .5vw .6vw;
       margin-right: .5vw;
       vertical-align: top;
    }
    
		.red-button a {
			display: block;
			padding: 2vh 0;
			font-size: 3em;
			color:#fff;
			font-weight: bold;
			text-decoration: none;
			text-align: center;
		}
   .container  li a {
        display: block;
       	text-decoration: none;
       color:#fff;
    }
		.red-button a:visited, .container  li a:visited {
			color:#fff;
		}
   .red-button:hover, .container  li:hover, .container .lineup .item-grp a img:hover {
        opacity: .7;
    }
    .container .lineup .item-grp {
                padding: 8% 0 10% 0;
      border-bottom: 3px dashed #dcdcdc;
    }
    .container .caption2 {
		font-size: 2em;
        line-height: 1.3em;
        vertical-align: top;
         text-align: center;
        margin: 5% auto 0;
    }
   .price {
        font-size: 2.2em;
        display: block;
      text-align: center;
    text-decoration: underline;
    text-underline-offset: 20%;
    
    }
	.container .price-grp {
        width:90%;
        display: block;
        margin: 0 auto;
		}
    /*２個並び用CSS（PC）*/
       .set50 {
           width: 50%;
           display: inline-block;
           margin: 0 auto 7%;
           vertical-align: bottom;
        }
    /*ここまで２個並び用CSS（PC)*/
    /* ここまで価格・ボタン*/
    
     /*ここまでラインアップ*/
    
    
    
   /*Tab*/
    @media screen and (max-width:919px) and (min-width:541px)  {
      
.title {
height: 60vw;
}  
.container .lineup .sun {
    width: 37%;
    font-size: 5vw;
}
  .container .lineup .item-grp h3:before  {
border-width: 42px 25.5px 0 25.5px;
}
.container .item .item-detail{
left:0;
}
.container .item .about {
font-size: 2rem;
}

.container .price-grp {
    width: 100%;
}
.set50 {
vertical-align: baseline;
}
.red-button a:before {
    font-size: .65em;
}
.red-button {
    font-size: .8em;
}
        
    } /*Tabここまで*/
    
   /*sp*/ 
@media screen and (max-width:540px) {   
    
.title h1 {
    position: absolute;
    color: #fff;
    left: 0;
    top: 3vw;
    font-size: 13vw;
    margin: 0 auto;
    text-align: center;
}
.container .small {
        font-size:6vw;
    }
       .title h1 .small {
        text-align: center;
    }
.title li {
    filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .5));
}
.title ul {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}
    
    .title {
    width: 100%;
    height: 400px;
    background-position: top center;
    position: relative;
}
.container .intro h2, .container .lineup .item-grp h3, .container .intro .about {
    width: 100%;
    margin: 0 auto;
    line-height: 1.2em;
} 

    


    
 /*ラインアップ*/
    
   .container .lineup .item-grp .small {
        text-indent: 1.8em;
    }
    
  .container .lineup .item-grp h3:before  {
border-width: 8vw 5vw 0 5vw;
    }
.container .intro .heatstroke p {
    font-size: 7vw;
}
.container .intro .about {
    font-size: 8vw;
    margin-bottom: 10%;
}

.container .item .item-detail .bagcolor {
    width: 50%; 
 }
    
.container .item .about {
    font-size: 7vw;
    line-height: 1.5em;
    width: 100%
}
.container .item .item-detail {
    position: static;
    margin: 0 auto;
}
 
    
  .container .lineup .item  {
        position: none;    
        margin-bottom: 0;
    }

    .container .lineup .item-grp h3 {
    font-size: 10vw;
    margin-bottom: 10%;
}
.set50 {
    width:100%;
    margin-bottom: 0;
}
.container .set50 .price {
    font-size: 8vw;
    text-decoration: none;
    margin-bottom: 2%;
}
    .container .caption2 {
            font-size: 8vw;
        margin-top: 10%;
    }
    
    .container .red-button {
        width: 90%;
        margin: 0 auto;
        filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .3));
    }
    .red-button a {
        font-size: 10vw;
        padding: 2vw 0;
    }
    .red-button a:before {
    font-size: 6vw;
    padding: 1.5vw 1vw 1.5vw 1.5vw;
}
    
 .container .lineup   .item-grp  {
        margin-bottom: 40%;
    }
        .container .set-item, .container .set-item .item-detail2, .container .set-item .set-lineup  {
        position: static;
    }
    .container .set-item {
        height: auto;
    }
  .container .set-item .item-detail2,.container .set-item .set-lineup {
    width: 90%;
    padding: 3%;
    margin: 5% auto;
    filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .2));
}
    .container .lineup .set-lineup, .container .lineup .item-size {
        font-size: 7vw;
    }
  .container .lineup .table {
        width: 100%;
    }
    
} /* ここまでsp */  
    
    
    /*全体*/

       .container {
        color: #333333;
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
    }