@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Shippori+Mincho+B1:wght@400;600&display=swap');
/* CSS Document */
/*****************
common
*****************/
body{
	font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
	margin:0;
	padding: 0;
    color: #363B3A;
}
img{
	width: 100%;
	height: auto;
	display:block;
	margin: 0;
	padding: 0;
}
a,button{
	outline: none;
}
a:active{
	background: rgba(163, 154, 119,.5);	
}
a:hover{
	background: rgba(163, 154, 119,.5);
}
/** font **/
.font160{
	font-size: 160% !important;
}
/** リスト **/
ul.ul_pre{
    width: 100%;
    padding: 0 .5em 0 0;
    box-sizing: border-box;
    list-style: none;
    line-height: 1.4;
    margin: 0 0 1.5em;
}
ul.ul_pre li{
    position: relative;
    padding-left: 1.5em;
    margin-bottom: .6em;
    line-height: 1.4;
}
ul.ul_pre li::before{
    content: "※";
    position: absolute;
    left:0;
}
/*****************
content Area
*****************/
.main-wrap{
	width: 580px;
	margin: 0 auto;
	background-color: #FFFFFF;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.35);
}
@media screen and (max-width: 640px){
	.main-wrap{
		width: 100%;
        box-shadow: none;
	}
}
/******************
 fead keyframes
******************/

@keyframes FvfadeIn {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
    -webkit-transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
    transition-timing-function: cubic-bezier(0, 0.4, 0.2, 1);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes updown {
	0% {
		transform: translateY(-10px);
	}
	50% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-10px);
	}
}
/******************
 fead animated
******************/
.fvfead{
   opacity: 0;
   animation: FvfadeIn 3.0s cubic-bezier(0.33, 1, 0.68, 1) forwards;
	animation-delay: 1.5s;
}
.fvfead2{
   opacity: 0;
   animation: fadeIn 3.0s cubic-bezier(0.33, 1, 0.68, 1) forwards;
   animation-delay: 4.5s;
}
.fead-in{
	opacity: 0;
}
.fead-in.fin-animated{
	animation: fadeIn 1.0s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
.fead-up {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    opacity: 0;
 }
.fead-up.fu-animated{
    -webkit-animation: fadeInUp 1.8s forwards;
    animation: fadeInUp 1.8s forwards;
 }

/*****************
fv_area
*****************/
.fv_area{
    width: 100%;
    padding: 12.0rem 0 0;
    margin: 0;
    box-sizing: border-box;
    background-color: #173B3A;
}
@media screen and (max-width: 640px){
.fv_area{
    padding: 6.0em 0 0;
}
}
.fvtitle{
    width: 50%;
    height: auto;
    margin: 0 auto;
}
.fvtitle:nth-child(2){
    animation-delay: 2.5s;
}
.fv_image_area{
    margin: 2.0em 0 0;
    width: 100%;
    padding: 0 1.0em 1.0em;
    box-sizing: border-box;
}
.fv_image_area img{
    width: 100%;
    height: auto;
}
/*****************
fv_yoyaku
*****************/
.fv_yoyaku{
    padding: 2.0em 1.0em;
    margin: 0 ;
    box-sizing: border-box;
    text-align: center;
}
.fv_yoyaku img{
    width: 42%;
    height: auto;
    margin: 0 auto;
}
.fv_yoyaku p{
    line-height: 1.6;
    padding: 1.0em 0;
    box-sizing: border-box;
}
.fv_yoyaku p:first-of-type{
    margin: 1.0rem 0 .2em;
    border-bottom: 2px solid #363B3A;
}
.fv_yoyaku p:nth-last-of-type(2){
    margin: .2em 0;
    border-top: 1px solid #363B3A;
    border-bottom: 1px solid #363B3A;
}
.fv_yoyaku p:last-of-type{
    margin: .2em 0 0;
    border-top: 2px solid #363B3A;
}
.fv_yoayku p a{
    color: #363B3A !important;
}
.fv_yoyaku p a:hover,
.fv_yoyaku p a:visited{
    color: #363B3A;
}
/******************
gentei_area
******************/
.gentei_area{
    width: 100%;
    padding: 2.0em 1.0em;
    box-sizing: border-box;
    background-image: radial-gradient(#FFF0DF, #F1D8BC);
}
img.gentei_title{
    width: 82%;
    height: auto;
    margin: 0 auto;
}
.gentei_area ul{
    width: 96%;
    margin: 2.0em auto 0;
    padding: 0;
    list-style:none;
}
.gentei_area ul li{
    padding: 0;
    margin-bottom: 1.0em
}
.gentei_area ul li:last-child{
    margin-bottom: 0;
}
.gentei_area ul.ul_pre{
  font-size: .9em !important;
}
.gentei_area ul.ul_pre li{
    position: relative;
    padding-left: 1.5em !important;
    margin-bottom: .6em;
    line-height: 1.4;
}
.gentei_area ul.ul_pre li::before{
    content: "※";
    position: absolute;
    left:0;
}
/******************
nove_itemarea
******************/
.nove_itemarea{
    width: 100%;
    padding: 1.0em;
    box-sizing: border-box;
}
.nove_itemarea img:first-of-type{
    width: 60%;
    height: auto;
    margin: 0 auto 1.0em;
}
@media screen and (max-width: 640px){
    .nove_itemarea img:first-of-type{
    width: 52%;
}
}
.nove_itemarea img:nth-of-type(2){
    width: 80%;
    height: auto;
    margin: 0 auto 2.0em;
}
.nove_itemarea img:last-of-type{
    width: 90%;
    height: auto;
    margin: 0 auto 2.0em;
}
/********************
 SP01 area
********************/
.sp01_area{
    width: 100%;
    padding: 2.0em;
    box-sizing: border-box;
    background-color: #173B3A;
}
.sp01_wrap{
    width: 100%;
    padding: 2.0em;
    box-sizing: border-box;
    border: solid 1px #C89300;
    background-color: #FFFFFF;
}
@media screen and (max-width: 640px){
   .sp01_area{
    padding: 1.0em;
} 
    .sp01_wrap{
    padding: 1.0em;
}
}
.sp01_wrap img{
    margin: 0 auto 1.0em;
}
.sp01_wrap img:first-of-type{
    width: 30%;
    height: auto;
}
.sp01_wrap img:nth-of-type(2){
    width: 75%;
    height: auto;
}
.sp_01_cta{
    width: 100%;
    padding: 1.0em 0;
}
.sp_01_cta img{
    width: 100% !important;
    height: auto;
}
.sp_01_cta img.fuwari{
    animation: updown 2s ease-in-out infinite alternate;
}
/********************
 SP02 area
********************/
.sp02_area{
    width: 100%;
    padding: 1.0em 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
}
.sp02_wrap{
    width: 100%;
    padding: 2.0em;
    box-sizing: border-box;
}
@media screen and (max-width: 640px){
    .sp02_wrap{
        padding: 1.0em;
    }
}
.sp02_wrap h4{
    font-size: 1.1em;
    letter-spacing: 1px;
    line-height: 1.6;
    margin: 0 0 .6em .6em;
    font-weight: bold
}
.sp02_osusume{
    width: 65%;
    margin: 0 auto 1.5em;
}
.itemset_area{
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    border-bottom: 1px dotted #dddddd;
}
.itemset_cta{
    width: 100%;
    padding: 3.0em 0;
    text-align: center;
}
@media screen and (max-width: 640px){
    .itemset_cta{
    padding: 1.0em 0;
}
}
.itemset_cta img.setcartin{
    width: 76% !important;
    height: auto;
    margin: 0 auto 2.0em;
}
.item_slide_title{
	width: 35%;
	height: auto;
	margin: 1.0em auto 1.5em;
}
.swiperitem{
	width: 100% !important;
    overflow: hidden; /* 追加 */
    box-sizing: border-box;
}
@media screen and (max-width: 640px){
.swiperitem{
	width: 92vw !important;
    margin: 0 auto;
}
}
.swiper-slide{
	color: #363B3A !important;
	padding: .5em;
	box-sizing: border-box;
}
.itemlist_name{
	font-size: 1.2em;
	line-height: 1.4;
	padding: .4em 0;
	font-weight: bold;
    text-align: left;
}
.itemlist_dis{
	font-size: 1.0em;
	line-height: 1.6;
    padding:.5em 0;
    text-align: left;
    letter-spacing: 1px;
}
.itemlist_dis p{
	margin: 0 0 .4em;
}
.itemlist_price{
	font-size: 1.2em;
	font-weight: bold;
	padding: .4em 0;
}
.itemlist_price span{
	font-size: 80%;
}
.swiper-scrollbar{
	display: none;
}
.itemlist_cta_link a{
	display: block;
	background-color: #C89300;
	color: #FFFFFF;
	border-radius: .2em;
	padding: 1.0em 0;
	text-align: center;
	text-decoration: none;
}
/********************
 SP03 area
********************/
.sp03_area{
    width: 100%;
    padding: 1.0em 0;
    box-sizing: border-box;
    background-color: #FFFFFF;
}
.sp03_wrap{
    width: 100%;
    padding: 2.0em;
    box-sizing: border-box;
}
@media screen and (max-width: 640px){
    .sp03_wrap{
    padding: 1.0em;
}
}
.sp03_wrap h4{
    font-size: 1.1em;
    letter-spacing: 1px;
    line-height: 1.6;
    margin: 0 0 .6em .6em;
    font-weight: bold;
}
/******************
normbrand_area
*******************/
.normbrand_area{
    width: 100%;
    padding: 0;
    margin: 0 0 1.0em;
}
/******************
footer
******************/
.footer-caption{
    width: 100%;
    padding: .4em 0;
    text-align: center;
}
/******************
modal
*******************/
.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: .5em;
  max-width:94%;
  width: 94%; /* 追加 */
  border-radius: .4em;
  box-sizing: border-box;
}
@media screen and (min-width: 640px){
.modal__container{
  max-width: 640px;
}
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.4;
  color: #333333;
  box-sizing: border-box;
}
.present_list button.modal__close{
	width: 45px;
	height: 45px;
	top:-22.5px;
	right: 3%;
}
button.mask1close,
button.mask2close{
	background-color: #ffb6c1;
}
button.creamclose{
	background-color: #6495ed;
}
button.uvclose{
	background-color: #b8860b;
}
.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { 
	content: "\2715";
	font-size:1.6em;
	line-height: 1.2;
}

.modal__content {
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}
.modal__content img{
	border-radius: .2em;
}

/****************
remodal
******************/
.remodal{
	background: #FFFFFF!important;
	padding:1.0em !important;
	box-sizing: border-box;
	position: relative !important;
	border-radius: .6em;
}
@media screen and (min-width: 640px){
	.remodal{
		max-width: 580px !important;
	}
}
.remodal h3{
    font-size: 1.4em;
    line-height: 1.4;
    margin:.6em 0;
    font-weight: bold;
}
.remodal img.pre{
	border-radius: .6em;
	border: .4em solid #FFFFFF;
	box-sizing: border-box;
}
.remodal button.modal__close{
	width: 45px;
	height: 45px;
	top:-22.5px;
	right: 3%;
	border-radius:50%;
	position: absolute!important;
	color: #FFFFFF;
}
button.mask1close,
button.mask2close{
	background-color: #173B3A;
}
button.creamclose{
	background-color: #6495ed;
}
button.uvclose{
	background-color: #b8860b;
}
.modal__close {
  background: transparent;
  border: 0;
}
.remodal .modal__close:before { 
	content: "\2715";
	font-size:1.6em;
	line-height: 1.2;	
}
.remodal_text {
	text-align: left;
}
.remodal_text h4{
	margin: 0 0 .6em;
    font-weight: bold;
}
.remodal_text ul{
    width: 100%;
    padding: 0 .5em 0 0;
    box-sizing: border-box;
    list-style: none;
    line-height: 1.6;
    margin: 0 0 1.5em;
	font-size: 14px;
}
.remodal_text ul li{
    position: relative;
    padding-left: 1.5em;
    margin-bottom: .6em;
    line-height: 1.6;
}
.remodal_text ul li::before{
    content: "※";
    position: absolute;
    left:0;
}
a.chui_link{
	text-decoration: underline;
}