/*----------- reset -----------*/ * {margin: 0;padding: 0;} .cf { zoom: 1; } .cf:before,.cf:after { content: ""; display: table;} .cf:after { clear: both;} /*----------- body -----------*/ body{color: #ae1a01; font-size: 18px; width: 100%; background:url(../images/bg.gif) top center;overflow-x: hidden;font-family: "メイリオ", Meiryo, Arial, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", osaka, sans-serif;} /* body.zh{font-family: 'Noto Sans TC', sans-serif;} body.cn{font-family: 'Noto Sans SC', sans-serif;} body.en{font-family: 'Cabin', sans-serif;} */ img{height: auto;} @media screen and (max-width: 800px){ body{width: 100%; min-width: 100%;} img{width: 100%;} } /*----------- commone -----------*/ .left{float: left;} .right{float: right;} .listL li{float: left;} a{color: #810e0e;} a:hover{text-decoration: none;} a:hover img{filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;} /*flex box*/ .flex{display: flex; align-items: flex-start;} .flex img{align-items: flex-start;} .mleft{margin-left: auto;} .mright{margin-right: auto;} .mtop{margin-top: auto;} .mbottom{margin-bottom: auto;} /*----------- header -----------*/ #global-nav {width: 20px; position: fixed; right: 0.5%; top: 5%;background: rgba(255,255,255,0.5);padding: 0.4em;line-height: 0.5em;;z-index: 5;-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);} header .language,header .social{ -ms-writing-mode: tb-rl;writing-mode: vertical-rl;} header .language a{text-decoration: none; text-align: center; } header .language span,header .language a:hover span{padding: 0.4em 0; background: #ae1a01;color: #fff;line-height: 1;margin-top: 0.5em;} header .language a:hover span{margin-top: 1em;} header .language a span{margin-top: 1em; background: none; color: #ae1a01;} header .social{margin-top: 3em;} header .social span{margin-top: 0.5em;} /* Fixed */ #head_wrap.fixed {margin-top: 0;top: 0;position: fixed;height: 100px;transition: top 0.65s ease-in;-webkit-transition: top 0.65s ease-in;-moz-transition: top 0.65s ease-in;z-index: 9999;} /* Toggle Button */ #nav-toggle {display: none;position: absolute;right: 12px;top: 14px;width: 34px;height: 36px;cursor: pointer;z-index: 101;} #nav-toggle div {position: relative;} @media (max-width: 768px) { #head_wrap {top: 0;position: fixed;margin-top: 0;width: 100%;padding: 0;z-index: 200;} #head_wrap .inner {width: 100%;padding: 0;} #head_wrap .fixed {padding-top: 0;background: transparent;} #global-nav {position: absolute;top: -200px;background: rgba(252,211,195,0.8);width: 100%; height: 200px; text-align: center;-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;transition: .5s ease-in-out;right: auto; padding:50px 0 0 0; box-sizing: border-box;} header .language,header .social{ -ms-writing-mode: horizontal-tb;writing-mode: horizontal-tb;} header .language span,header .language a:hover span{padding: 0.2em 0.5em; background: #ae1a01;color: #fff;line-height: 1;margin: 0.5em 0.5em 0;} header .social{margin-top: 2em;} header .social p{display: flex; justify-content: center;} header .social p span{padding: 0 0.5em; margin-top: 0;} #nav-toggle {display: block;padding-top: 2%;} /* #nav-toggle 切り替えアニメーション */ #nav-toggle span {display: block;position: absolute;height: 4px;width: 100%;background: #f26661;left: 0;-webkit-transition: .35s ease-in-out;-moz-transition: .35s ease-in-out;transition: .35s ease-in-out;} #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; } .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } /* #global-nav スライドアニメーション */ .open #global-nav { -moz-transform: translateY(200px); -webkit-transform: translateY(200px); transform: translateY(200px); } } /*----------- Top -----------*/ #top {position: relative;background-image: url(../images/bg_top_chocola.png),url(../images/bg_top_vanilla.png);background-repeat: no-repeat; background-position: left,right; background-size: contain; padding: 0 0 3em;} #top h2{width: 14%; margin: 0 auto;padding-top: 1%;} #top h3{line-height: 1;} #top .chocola_pc{position: absolute; left:2%; top:5%; width: 18%;} #top .chocola_pc .btn{width: 67%;margin-top: 1em;} #top .vanilla_pc{position: absolute; right:8%; top:5%;width: 15%;} #top .vanilla_pc .btn{width: 79%; margin:1em 0 0 51%;} /*zh*/ #top.zh .chocola_pc{width: 15.5%; left: 4%;} #top.zh .chocola_pc .btn{width: 77%; margin-top: 1em; margin-left: -13%;} #top.zh .vanilla_pc .btn{margin-top: 1em;} /*cn*/ #top.cn .chocola_pc{width: 16.3%; left: 4%;} #top.cn .chocola_pc .btn{width: 77%; margin-top: 1em; margin-left: -10%;} /*en*/ #top.en .chocola_pc{width: 14.1%; left: 4%;} #top.en .chocola_pc .btn{width: 62.1%; margin-top: 1em; margin-left: 15%;} #top.en .chocola_pc .btn.us{margin: 0;margin-left: -15%;} #top.en .vanilla_pc{width:14.45%} #top.en .vanilla_pc .btn{margin-top: 1em;width: 61%;} #top.en .vanilla_pc .btn.us{margin: 0 0 0 74%;} #top .top_img{width: 80%;margin: -5% auto 0; display: block;} #top .sp{display: none;} @media screen and ( max-width:550px ) { #top{background-position:left -80% top,right -80% top;} #top h2{width: 30%;} #top .top_img{width: 95%; margin-top: -9%;} #top .flex{display: flex; justify-content: space-between;width: 98%; margin: 5% auto 0;} #top .chocola_pc, #top .vanilla_pc, #top.zh .chocola_pc, #top.zh .vanilla_pc{display: none;} #top .sp{display: block; width: 70%;margin: 5% auto 0;} #top .sp h3{width: 100%; margin-top: 0.3em; line-height: 1;filter: drop-shadow(1px 1px 0 #fff);-webkit-filter: drop-shadow(1px 1px 0 #fff);} #top .sp h3.vanilla{width: 90%; margin: 0.3em auto;} #top .sp .btn_bottom{margin-top: 0.5em;} } /*----------- lead -----------*/ #lead{background: url(../images/bg_lead.png) no-repeat;background-size: 100%;background-position: center top;padding: 10% 0;} #lead p{text-align: center;width: 40%;margin: 0 auto; font-size: 1.2em; line-height: 2.3;font-family: 'Noto Serif JP', serif; font-weight: 600;text-shadow: 0px 0px 5px rgb(255,255,255),0px 0px 5px rgb(255,255,255),0px 0px 5px rgb(255,255,255)} #lead p.zh{font-family: 'Noto Serif TC', serif;} #lead p.cn{font-family: 'Noto Serif SC', serif;} #lead p.en{font-family: 'Crimson Text', serif; font-size: 1.5em;} @media screen and ( max-width:1200px ) { #lead p{line-height: 1.8;} } @media screen and ( max-width:1000px ) { #lead p{width: 60%; font-size: 1em; line-height: 1.8;} } @media screen and ( max-width:768px ) { #lead {font-size: 0.9em;} #lead p br{display: block;} } /*----------- comment -----------*/ #comment{border: 2px solid #810e0e; color: #ae1a01; border-left: none; border-right: none;padding: 7px 0;font-family: 'Noto Serif JP', serif;} #comment.zh{font-family: 'Noto Serif TC', serif;} #comment.cn{font-family: 'Noto Serif SC', serif;} #comment.en{font-family: 'Crimson Text', serif; font-size: 1.2em;} #comment .inner_bg{border: 10px solid #810e0e; border-left: none; border-right: none; background-image:url(../images/bg_comment.jpg); background-repeat: no-repeat; background-size:cover; background-position: center;padding: 10px 0;} #comment .inner{background-image:url(../images/bg_comment_top.png),url(../images/bg_comment_bottom.png); background-repeat: repeat-x; background-size:8% auto , 8% auto ; background-position: top,bottom;padding: 3em 0 5em; } #comment .inner .illustrator{background-image: url(../images/img_comment_chocola.png),url(../images/img_comment_vanilla.png);background-size: contain; background-position: left 1em top 1em, right 1em top 1em;background-repeat: no-repeat;margin: 0 auto;} #comment .inner .illustrator.fixd{background-attachment: fixed;} #comment .inner .illustrator.bottom{background-position: left 1em bottom, right 1em bottom;} #comment .inner .text{width: 45%; margin: 0 auto; text-align: center;} #comment .inner .text h3{font-weight: 900; font-size: 3em; margin-top: 0.5em;} #comment .inner .text h4{font-weight: 700;font-size: 1.6em; margin-top: 7%; background-image: url(../images/icon_left.png),url(../images/icon_right.png); background-position: left center,right center; background-repeat: no-repeat;display: inline-block; padding: 0 3em;} #comment.en .inner .text h4{line-height: 1.2em; font-size: 1.7em;} #comment .inner .text h4.top{margin-top: 3%;} #comment .inner .text p{font-weight: 300; font-size: 1.2em; line-height: 2;} #comment .img_sp{display: none;} @media screen and ( max-width:1200px ) { #comment .inner .text{width: 100%; margin: 0 auto;} #comment .inner .text h3{margin-top: 0;} #comment .inner .text p{width: 50%; margin: 0 auto;} } @media screen and ( max-width:768px ) { #comment .inner{padding: 8% 0; background-size:15% auto , 15% auto ;} #comment .inner .illustrator{background-image: none;} #comment .inner .text{width: 95%; margin: 0 auto;} #comment .inner .text h3{font-size: 2em; margin-top: 0;} #comment .inner .text h4{font-size: 1.2em; background-size: 15%;line-height: 1em;} #comment .inner .text p{font-size: 1em; width: 100%;} #comment .img_sp{display: block; width: 95%; margin: 0 auto;} } /*----------- comment_2 -----------*/ #comment_2 .text{width: 90%; margin: 0 auto;font-family: 'Noto Serif JP', serif; padding: 0 0 2em;} #comment_2.zh .text{font-family: 'Noto Serif TC', serif;} #comment_2.cn .text{font-family: 'Noto Serif SC', serif;} #comment_2.en .text{font-family: 'Crimson Text', serif; font-size: 1.3em; line-height: 1.5em;} #comment_2 .text h3{font-weight: 900; font-size: 2em; margin-top: 0.5em;} #comment_2 .text h3 span{font-size: 0.9em;} #comment_2 .text h3 br{display: none;} #comment_2.en .text p{margin-top: 0.5em;} #comment_2 .flex{justify-content: space-between; padding: 1em 0;} #comment_2 .left{width: 60%;} #comment_2 .right{width: 40%;} #comment_2 .right.flex{flex-wrap: wrap;} #comment_2 .right.flex img{width: 50%;} @media screen and ( max-width:1100px ) { #comment_2 .left{width: 70%;} #comment_2 .right{width: 30%;} #comment_2 .right.flex img{width: 100%;} } @media screen and ( max-width:768px ) { #comment_2 .flex{flex-wrap: wrap;} #comment_2 .left{width: 100%;} #comment_2 .right{width: 100%;} #comment_2 .right.flex img{width: 50%;} } @media screen and ( max-width:600px ) { .detail{width: 55%;} #comment_2 .text h3{font-size: 1.5em;} #comment_2 .text h3 span{font-size: 1em;} #comment_2 .text h3 br{display: block;} } .slick-slider div {transition: none;} /*----------- detail -----------*/ #product{position: relative; overflow: hidden;} .detail{width: 40%; background: url(../images/bg_product.jpg) no-repeat;background-size: 100% 100%;margin: 0 auto; padding: 9% 4% 8%; box-sizing: border-box;} .detail h3{margin: 0 auto;} .detail h3.chocolat{width: 80%;} .detail h3.vanilla{width: 75%; margin-top: 2%;} .detail p{margin-top: 3%;} .detail .product_page{text-align: center; margin-top: 1em;} .detail .btn_bottom{width: 80%; margin: 3% auto; line-height: 1;} #product .img_product{position: absolute; top: 5%; width: auto;/* width: 30%; */} #product .img_product.chocolat{left: 5%;} #product .img_product.vanilla{right: 5%;} @media screen and ( max-width:1200px ) { #product .img_product.chocolat{left: 1%;} #product .img_product.vanilla{right: 1%;} } @media screen and ( max-width:768px ) { .detail{width: 55%;} #product .img_product.chocolat{left: -3%;} #product .img_product.vanilla{right: -3%;} } @media screen and ( max-width:768px ) { .detail{width: 100%;display: flex;flex-wrap: wrap;background-image: url(../images/bg_product_sp.jpg);padding: 15% 8% 15%;} #product .img_product{position: relative;width: 52%;} #product .img_product.chocolat{margin-left: -2%;left: auto;} #product .img_product.vanilla{margin-right: -2%;right: auto;} .detail h3.chocolat{margin-top: 5%;width: 90%;} .detail h3.vanilla{width: 85%;} .product_page{font-size: 0.8em;margin: 0 auto;} .detail .btn_bottom{width: 95%;} } /*----------- footer -----------*/ footer{padding:2em 0;} footer p{text-align: center; font-size: 0.8em;} @media screen and ( max-width:768px ) { footer p br{display: block;} }