/* CSS Document */
@import url("../../products/style.css"); 
@keyframes Fadein {
    0%  { opacity:0.0; transform: scale(0.8);}
    50% { opacity:0.5; transform: scale(1.0);}
    100%{ opacity:1.0; transform: scale(1.0);}
}

@keyframes FloatHorizontal {
    0% { transform:translate3d(2.5vw,0,0); }
    50% { transform:translate3d(-2.5vw,0,0); }
    100% { transform:translate3d(2.5vw,0,0); }
}

main{
    overflow: hidden;
}
section{
    overflow: visible;
}
.sp_none {
    display: none;
}
.pc_none {
    display: block;
}
@media screen and (min-width: 768px){
.sp_none {
    display: none;
}
.pc_none {
    display: block;
}
}
@media screen and (min-width: 1024px){
.sp_none {
    display: block;
}
.pc_none {
    display: none;
}
}
.inner_wrap{
    background: #EAEADA;
    padding-bottom: 5em;
    text-align: center;
}
.inner1280{
    width: 90%;
}
.title_text{
    transform: translateY(-50%);
    margin-bottom: -6em;
}
.title_text img{
    height: 150px;
}
.first .text {
    font-size: 14px;
    text-align: left;
}
.title_text{
    text-align: left;
}
.inner1280 .title_text.inner1280{
    width: 100%;
}
.products_caption,
.concept .products_caption{
    text-align: left;
}
.products_box,
.concept .products_box{
    margin-top: 3em;
}
@media screen and (min-width: 768px) {
.first .text {
    font-size: 14px;
    text-align: center;
}
}
@media screen and (min-width: 1024px) {
.first .text {
    font-size: 16px;
    text-align: center;
}
}

/* icemint */
.icemint .cap_start{
    text-align: center;
    width: 90%;
    margin: auto;
}
.icemint .cap_start h3{
    margin-bottom: 1em;
}
.icemint .cap_start p{
    text-align: left;
    display: inline-block;
}
.icemint .icemint_nav.flex{
    display: block;
    width: 90%;
    max-width: 400px;
    text-align: center;
    margin-top: 4em;
}
.icemint .icemint_nav a{
    display: inline-block;
    width: 70%;
}
.icemint .icemint_nav li .jp span{
    display: block;
}
.icemint .icemint_nav .layer{
    position: relative;
    display: inline-block;
/*    width: 100%;*/
}
.icemint .icemint_nav .layer::before {
    content: "";
    width: 0%;
    height: 0%;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 2;
    background-color: #fff;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    opacity: 0;
}
.icemint .icemint_nav a:hover .layer::before {
    opacity: .6;
    width: 100%;
    height: 100%;
}
.icemint .icemint_nav figcaption{
    margin-top: 1em;
    line-height: 1.5;
}


.icemint .icemint_nav .box-item:first-of-type {
    text-align: left;
}
.icemint .icemint_nav .arrow_img {
    transform: rotate(45deg);
    margin-left: 8em;
}
.icemint .icemint_nav .box-item:nth-of-type(3) {
    text-align: right;
	  margin-top: 2em;
}
.icemint .icemint_nav .box-item:nth-of-type(4) {
    margin-left: 10em;
}
.icemint .icemint_nav .arrow_img02 {
    transform: rotate(135deg);
    margin: 2em 2em 2em 0;
}
.icemint .icemint_nav .box-item:last-of-type {
    text-align: left;
    margin-top: 1em;
}

@media screen and (min-width:768px){
.icemint .icemint_nav .arrow_img,
.icemint .icemint_nav .arrow_img02 {
    transform: rotate(0deg);
}
.icemint .icemint_nav .arrow_img {
    margin-left: 0;
}
.icemint .icemint_nav .arrow_img02 {
    margin: 0;
}
.icemint .icemint_nav.flex{
    display: flex;
    width: 70%;
    max-width: 1000px;
    justify-content: center;
}
.icemint .icemint_nav li .jp span{
    display: inline;
}
.icemint .icemint_nav li{
    width: calc(100%/5);
}
.icemint .icemint_nav li .jp{
    display: block;
}
.icemint .icemint_nav .layer{
    width: 100%;
}
}
/* End icemint */

.mainV img {
  object-position: 60%;
}

/* products */
.first .sectiontitle p:nth-of-type(2) {
    color: #83907a;
}
.products_detail{
    background: #e1ebef;
    position: relative;
    padding: 1em 0 4em;
}
.products_caption p{
    margin-bottom: 1em;
}
.products_box {
    display: flex;
    flex-direction: column-reverse;
}
.products_img {
    text-align: center;
}

.products_price {
    font-size: 14px;
}
.products_img img {
    width: 100%;
    max-width: 250px;
    padding: 0 2em 0 0;
}
.products_detail .products_name{
    border-bottom: 1px solid #ccc;
    padding-bottom: 1em;
}
.products_detail .products_name .en{
    color: #68acdf;
}
.products_detail .products_material .name {
    color: #963700;
    margin-bottom: .5em;
}
.products_detail .products_material .name li::before{
    content: "●";
}
.products_detail .products_material .name li:last-of-type::before{
    content: "";
}
.products .products_caption .en.f13{
    font-size: 10px;
}
.products .products_caption dt{
    line-height: 1;
    letter-spacing: 2px;
}
.products .products_caption {
    text-align: center;
}

@media screen and (min-width: 768px) {
.products_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.products_img img {
    padding: 0;
}
.products_photo {
    position: absolute;
    bottom: 1%;
    left: 44%;
}
.products_photo img {
    width: 35%;
    object-fit: contain;
}
.products_material .name {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.products_material .name li {
    width: 50%;
}
.products .products_caption .en.f13{
    font-size: 13px;
}
.products_wrap {
    width: 50%;
}
.products_img {
    width: 95%;
}
.products_price {
    font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
.products_img {
    width: 85%;
}
.products_price {
    font-size: 16px;
}
.products_material .name {
    width: 80%;
}
.products_material .name li {
    width: 47%;
}
}
/* End products */

/* howto */
.howto .photo {
    margin-top: 4em;
}
.howto .text {
    margin-top: 1em;
}
.howto .photo img {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
}
.howto .layer img {
    width: 100%;
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
}
.howto .box-item .layer:nth-of-type(2) img {
    max-width: 160px;
}
@media screen and (min-width: 768px) {
.icemint .icemint_nav.flex {
    width: 100%;
}
.howto .layer img {
    max-height: 170px;
    object-fit: contain;
}
.howto .photo {
    margin-top: 4em;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.howto .photo img {
    width: 49%;
    object-fit: contain;
    margin-left: 2em;
}
.icemint .icemint_nav .box-item:nth-of-type(4) {
    margin-left: 0;
}
}
@media screen and (min-width: 1024px) {
.howto .layer:nth-of-type(2) img {
    width: 60%;
}
.howto .text {
    flex: 1;
}
.howto .photo {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    max-width: 1000px;
    margin: 4em auto 0;
    justify-content: center;
}
.howto .photo img {
    width: 40%;
/*    margin: 0 auto;*/
}

}
/* End howto */

/* concept */
.concept_item  {
    margin-top: 4em;
    text-align: center;
}
.concept_item:last-of-type {
    margin: 3em 0;
}
.concept_item:first-of-type img {
    width: 85%;
}
.concept_item:nth-of-type(2) img {
    width: 75%;
}
@media screen and (min-width: 768px) {
.concept_item:first-of-type img {
    width: 100%;
    max-width: 500px;
}
.concept_item:nth-of-type(2) img{
    width: 100%;
    max-width: 440px;
}
.concept_item:nth-of-type(3) img {
    padding-top: 2em;
}
.concept_item:nth-of-type(n+3) img {
    width: 100%;
    max-width: 600px;
}
}
@media screen and (min-width: 1024px) {
.concept {
  margin-bottom: 4em;
}
.concept .pc   {
    position: relative;
    list-style: none;
    background-image: url(../../img/contents/icemint/concept_pc_00back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.concept_item00_front {
    display: flex;
    justify-content: center;
    align-items: center;
}
.concept_item:first-of-type {
    text-align: center;
}
.concept_item:first-of-type img,
.concept_item:nth-of-type(2) img{
    width: 50%;
}
.concept_item:nth-of-type(2) {
    margin-bottom: 6em;
}
.concept .pc .concept_item00 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}
.concept .pc .concept_item01 {
    position: absolute;
    top: 3%;
    left: 9%;
}
.concept .pc .concept_item02 {
    position: absolute;
    top: 60%;
    left: 8%;
}
.concept .pc .concept_item03 {
    position: absolute;
    top: 8%;
    right: -32%;
}
.concept .pc .concept_item04 {
    position: absolute;
    top: 35%;
    right: -32%;
}
.concept .pc .concept_item05 {
    position: absolute;
    bottom: 10%;
    right: -34%;
}
.concept .pc .concept_item06 {
    position: absolute;
    right: 4%;
    bottom: -16%;
    font-size: 14px;
}
.concept .pc .concept_item00 img {
    width: 100%;
    max-width: 120px;
    object-fit: contain;
}
.concept .pc .concept_item01 img {
    width: 60%;
}
.concept .pc .concept_item02 img {
    width: 60%;
}
.concept .pc .concept_item03 img {
    width: 65%;
}
.concept .pc .concept_item04 img {
    width: 65%;
}
.concept .pc .concept_item05 img {
    width: 65%;
}
}
@media screen and (min-width: 1111px) {
.concept .pc .concept_item01 {
    position: absolute;
    top: 3%;
    left: 12%;
}
.concept .pc .concept_item02 {
    position: absolute;
    top: 60%;
    left: 10%;
}
.concept .pc .concept_item03 {
    position: absolute;
    top: 8%;
    right: -28%;
}
.concept .pc .concept_item04 {
    position: absolute;
    top: 35%;
    right: -28%;
}
.concept .pc .concept_item05 {
    position: absolute;
    bottom: 10%;
    right: -30%;
}
.concept .pc .concept_item06 {
    position: absolute;
    right: 6%;
    bottom: -16%;
    font-size: 14px;
}
.concept .pc .concept_item00 img {
    width: 100%;
    max-width: 120px;
    object-fit: contain;
}
.concept .pc .concept_item01 img {
    width: 60%;
}
.concept .pc .concept_item02 img {
    width: 60%;
}
.concept .pc .concept_item03 img {
    width: 65%;
}
.concept .pc .concept_item04 img {
    width: 65%;
}
.concept .pc .concept_item05 img {
    width: 65%;
}

}
@media screen and (min-width: 1280px) {
.concept .pc   {
    position: relative;
    list-style: none;
    background-image: url(../../img/contents/icemint/concept_pc_00back.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.concept_item00_front {
    display: flex;
    justify-content: center;
    align-items: center;
}
.concept_item:first-of-type {
    text-align: center;
}
.concept_item:first-of-type img,
.concept_item:nth-of-type(2) img{
    width: 50%;
}
.concept_item:nth-of-type(2) {
    margin-bottom: 6em;
}
.concept .pc .concept_item00 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
}
.concept .pc .concept_item01 {
    position: absolute;
    top: 7%;
    left: 12%;
}
.concept .pc .concept_item02 {
    position: absolute;
    top: 60%;
    left: 11%;
}
.concept .pc .concept_item03 {
    position: absolute;
    top: 11%;
    right: -18.2%;
}
.concept .pc .concept_item04 {
    position: absolute;
    top: 38%;
    right: -17%;
}
.concept .pc .concept_item05 {
    position: absolute;
    bottom: 12%;
    right: -18%;
}
.concept .pc .concept_item06 {
    position: absolute;
    bottom: -16%;
    right: 13%;
}
.concept .pc .concept_item00 img {
    max-width: 140px;
}
.concept .pc .concept_item01 img {
    width: 70%;
}
.concept .pc .concept_item02 img {
    width: 70%;
}
.concept .pc .concept_item03 img {
    width: 70%;
}
.concept .pc .concept_item04 img {
    width: 70%;
}
.concept .pc .concept_item05 img {
    width: 70%;
}

}
/* End concept */