@charset "UTF-8";

/*---------------------------------------------------------------
		フォント設定
---------------------------------------------------------------*/
.Josefonts{font-family: 'Open Sans', sans-serif;}

#__dialog-text,
#__dialog-btns{ font-family: 'メイリオ',"Hiragino kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", 'Meiryo UI',Verdana,'ＭＳ Ｐゴシック',sans-serif;}


/*----------------------------------------------------------------------------
***                                                                    display
----------------------------------------------------------------------------*/
.none{display:none;}
.pcNone{display:none;}
.spNone{ display:block;}
.table{display:table;}
.table > *{display:table-cell;}
.table_child{display:table-cell;}
.child_a > *{width:auto;}
.child_1 > *{width:100%;}
.child_2 > *{width:50%;}
.child_3 > *{width:calc(100% / 3);}
.child_4 > *{width:25%;}
.child_5 > *{width:20%;}
.child_6 > *{width:calc(100% / 6);}
.child_7 > *{width:calc(100% / 7);}
.flex{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; -ms-flex-wrap:wrap; flex-wrap:wrap;}
.dispBlock{display: block;}
.dispInBlock{display: inline-block;}
.dispInFlex{display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex;}
.dispFlex{display: -webkit-box; display: -ms-flexbox; display: flex;}
.dispFlexWrap{display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; }
.flex-wrap{-ms-flex-wrap:wrap; flex-wrap:wrap;}
.flex-noWrap{-ms-flex-wrap:nowrap; flex-wrap:nowrap;}
.flex-column{-webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; }
.j-cont-s{-webkit-box-pack:start; -ms-flex-pack:start; justify-content:start; }
.j-cont-l{-webkit-box-pack:left; -ms-flex-pack:left; justify-content:left; }
.j-cont-r{-webkit-box-pack:right; -ms-flex-pack:right; justify-content:right; }
.j-cont-c{-webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; }
.j-cont-sb{-webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between; }
.j-cont-sa{-ms-flex-pack:distribute; justify-content:space-around; }
.a-items-c{-webkit-box-align:center; -ms-flex-align:center; align-items:center; }
.a-items-s{-webkit-box-align:start; -ms-flex-align:start; align-items:start; }
.a-items-fe{-webkit-box-align:end; -ms-flex-align:end; align-items:flex-end; }
.order01{-webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; }
.order02{-webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; }
.order03{-webkit-box-ordinal-group:4; -ms-flex-order:3; order:3; }
.order04{-webkit-box-ordinal-group:5; -ms-flex-order:4; order:4; }
.order05{-webkit-box-ordinal-group:6; -ms-flex-order:5; order:5; }
.order06{-webkit-box-ordinal-group:7; -ms-flex-order:6; order:6; }



/* セミオーダー */
.intro h1{ font-size:4rem; font-weight:lighter; font-family:'baubodbc'; text-align:center; color:#fff;}
#contents .orderStep{ max-width:980px; width:100%; margin:4em auto; padding:2em; border:3px solid #A38255; border-radius:15px; background-color:#FCF3EB;}
#contents .orderStep h3{ text-align:center; color:#A38255; font-size:150%; padding:0;}
#contents .orderStep ul{ margin:1em auto 0;}
#contents .orderStep li{ padding:0 30px 0 0;}
#contents .orderStep li:last-child{ padding:0;}
#contents .orderStep dl{}
#contents .orderStep dt{ text-align:center; color:#534741;}
#contents .orderStep dd{ text-align:center; position:relative;}
#contents .orderStep dd.stepImg:after{
	content:"";
	display:block;
	width:20px;
	height:100%;
	position:absolute;
	top:0;
	bottom:0;
	right:-30px;
	background-image:url(/images/img_flow.png);
	background-position:right center;
	background-repeat:no-repeat;
	background-size:100%;
}
#contents .orderStep dd.stepTxt{ font-size:87.5%; font-weight:500; color:#736357; line-height:1.4em; margin:1em auto 0;}
#contents .orderStep li:last-child dd.stepImg:after{ display:none;}
#contents .cakeTypeSec{ margin:0 auto 5em;}
#contents .cakeTypeSec h2{ height:auto; text-align:center; margin:0 auto 1em;}
#contents .cakeTypeSec h2 span{ display:inline-block; padding:0.5em 1em; border-bottom:2px solid #000;}
#contents .cakeTypeSec li{
	width:calc(100% / 4 - 10px);
	margin:0 5px 10px;
	padding:0;
	border:1px solid #ccc;
	position:relative;
	float:none;
}
#contents .cakeTypeSec li a{ display:block; padding:0.5em; transition:all .3s;}
#contents .cakeTypeSec li a:hover{ text-decoration:none; opacity:0.4;}
#contents .cakeTypeSec li a p{ padding:0; margin:0 auto 0.5em;}
#contents .cakeTypeSec li a dl{}
#contents .cakeTypeSec li a dt{ height:2.4em; color:#FB36A7; font-size:125%; line-height:1.2em;}
#contents .cakeTypeSec li a dd{ color:#000; font-weight:bold;}
#contents .cakeTypeSec li a dd.cakePrice{ font-size:150%;}
#contents .cakeTypeSec li a dd.cakeTxt{ font-size:87.5%; height:3em; line-height:1.4em; overflow:hidden; color:#666;}
#contents #capriBox h2 span{ border-color:#000;}
#contents #simpleBoxh2 span{ border-color:#FBABB6;}
#contents #girlyBox h2 span{ border-color:#FBABB6;}
#contents #chicBox h2 span{ border-color:#000;}
#contents #photographBox h2 span{ border-color:#FFA608;}
#contents #beachBox h2 span{ border-color:#5BB8DA;}
#contents #heartBox h2 span{ border-color:#FBABB6;}
#contents #flowerBox h2 span{ border-color:#FBABB6;}
#contents #birthdayBox h2 span{ border-color:#FFA608;}
.message .social-bottom .social-icon a{ display:inline-block;}
@media only screen and (max-width: 979px){
	.pcNone{display:block;}
	.spNone{ display:none;}
	header .headerInner .spBox{ z-index:999;}
	#contents{ width:100%; margin:5% auto;}
	#contents .orderStep{ width:90%; margin:1em auto; padding:1em;}
	#contents .orderStep h3{ font-size:112.5%;}
	#contents .orderStep li{ width:100%; padding:0; position:relative;}
	#contents .orderStep dd.stepImg:after{ display:none;}
	#contents .orderStep li:after{
		content:"";
		display:block;
		width:1em;
		height:2em;
		margin:0 auto;
		transform:rotate(90deg);
		background-position:bottom center;
		left:0;
		right:0;
		bottom:0;
		background-image:url(/images/img_flow.png);
		background-position:right center;
		background-repeat:no-repeat;
		background-size:100%;
	}
	#contents .orderStep li:last-child:after{ display:none;}
	#contents .cakeTypeSec{ margin:3em auto;}
	#contents .cakeTypeSec h2{ width:90%; font-size:125%; font-weight:bold;}
	#contents .cakeTypeSec h2 span{ padding:1.5em 0 0.5em; line-height:1.4em;}
	#contents .cakeTypeSec ul{ width:90%; margin:0 auto; justify-content:unset;}
	#contents .cakeTypeSec li{ width:calc(100% / 2 - 1em); margin:0 0.5em 1em; border-radius:10px;}
	#contents .cakeTypeSec li a dt{ font-size:67.5%; height:auto; line-height:1.4em; text-align:center;}
	#contents .cakeTypeSec li a dd.cakePrice{ font-size:75%; text-align:center;}
	#contents .cakeTypeSec li a dd.cakePrice span.size{ font-size:87.5%;}
	#contents .cakeTypeSec li a dd.cakeTxt{ font-size:67.5%;}
}


/* ポップアップCSS */
#gallery-content{ width:calc(100% - 4rem); height:100%; background-color:#fff; padding:2rem;}
.popupBox{ overflow-x:hidden; background-color:#fff;}
.popupBox #header{ display:none;}
.popupBox .container{ width:100%;}
.cakeAboutArea{ margin:0 auto 1em;}
.cakeAboutArea p{ margin:1em auto; padding:0; font-weight:500;}
.cakeAboutArea .cakeImg{ width:50%; padding:0 1em 0 0; margin:0;}
.cakeAboutArea .cakeInfo{ width:45%; padding:1em 0;}
.cakeAboutArea .cakeInfo h2{ font-size:175%; line-height:1.2em;}
.cakeAboutArea .cakeInfo ul li{ padding:0.4em 0.2em 0.5em; border-top:1px dashed #ccc;}
.cakeAboutArea .cakeInfo ul li dt{ width:30%; color:#947F28;}
.cakeAboutArea .cakeInfo ul li dd{ width:70%; color:#333;}
.cakeAboutArea .cakeInfo ul li dt,
.cakeAboutArea .cakeInfo ul li dd{ font-weight:500;}
/*202008↓*/
.cakeAboutArea p.materialList{width:100%;text-align: center;font-size:75%; margin:50px auto 0;}
.cakeAboutArea p.aboutTxt .txtAttention{display: inline-block;color:#ED1E79;}
.cakeAboutArea p.aboutTxt .txtReitou{color:#75bedb; margin:0 0 0 0.5em}
/*202008↑*/
.cakeInfoBox .orderBtn a{
	display:inline-block;
	padding:0.5em 1.6em 0.5em 1em;
	color:#fff;
	background-color:#ED1E79;
	font-size:125%;
	font-weight:500;
	text-decoration:none;
	transition:all .3s;
	background-image:url(/images/img_flow_wht.png);
	background-position:right 0.5em center;
	background-repeat:no-repeat;
	background-size:0.6em;
}
.cakeInfoBox .orderBtn a:hover{ text-decoration:none; opacity:0.4;}
.cakeInfoBox p span.textNote{ color:#ED1E79; font-weight:500;}
.popupBox #footer{ padding:0; bottom:0; width:100%; display:none;}
.popupBox #footer p{ position:relative; margin:0 auto;}
.popupBox #footer p a{
	position:relative;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align:center;
	padding:0.5em;
	display:block;
	text-decoration:none;
	transition:all .3s;
}
.popupBox #footer p a span{ color:#000; font-size:112.5%;}
.popupBox #footer p a:hover{ opacity:0.4;}
#semiorder .nivo-lightbox-wrap{ max-width:1000px; width:80%; margin:0 auto; top:15%; bottom:15%;}
#semiorder .nivo-lightbox-content{ padding:10px; position:relative;}
#semiorder .nivo-lightbox-theme-default.nivo-lightbox-overlay{ background:rgba(0,0,0,0.8);}
#semiorder .nivo-lightbox-theme-default .nivo-lightbox-close{
	width:1em;
	height:1em;
	font-size:3em;
	text-align:center;
	background-color:#000;
	opacity:1;
	padding:0;
	color:#fff;
	line-height:1em;
	background-image:none;
	transition:background-color .3s;
}
#semiorder .nivo-lightbox-theme-default .nivo-lightbox-close:after{
	content:"×";
	display:block;
	text-indent:0;
	position:absolute;
	top:0;
}
#semiorder .nivo-lightbox-theme-default .nivo-lightbox-close:hover{ text-decoration:none; background-color:#999;}
#semiorder .nivo-lightbox-close{ top:0; right:0;}
@media only screen and (max-width: 979px){
	.cakeAboutArea .cakeImg{ width:100%; padding:0; margin:0 auto 1em;}
	.cakeAboutArea .cakeInfo{ width:100%; padding:0;}
	.cakeAboutArea .cakeInfo h2{ line-height:1.2em;}
	.cakeAboutArea .cakeAboutArea{ margin:0 auto 2em;}
	#semiorder .nivo-lightbox-content{ padding:1em;}
	#semiorder .nivo-lightbox-wrap{ max-width:90%; top:5%; bottom:5%; left:5%; right:5%;}
	#semiorder .nivo-lightbox-theme-default .nivo-lightbox-close{ font-size:2.5em;}
	#semiorder .nivo-lightbox-close{ top:1%; right:2%;}
}
/*202008↓*/
#formInputSec{ display:block;}
#formCakeBox{width: 980px;margin: 50px auto 50px;}
#formCakeBox .cartContentBox{margin-bottom:1.5em;text-align: center;}
#formCakeBox .cartContentBox .attention{color:#ED1E79;}
#formCakeBox .cartNumber{text-align:center;display: inline-block;border-bottom: 1px solid #000;line-height: 1.2;padding: 0;margin-bottom: 1em;font-size: 120%;}
#formCakeBox .cartYoyaku{text-align: center;display: block;line-height: 1.2;padding: 0;}
#formCakeBox .formInputSec {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #a38255;
    padding: 26px;
    margin-bottom: 30px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,c7b299+100&0.1+0,0.1+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,0.1) 0%, rgba(199,178,153,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0.1) 0%,rgba(199,178,153,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0.1) 0%,rgba(199,178,153,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1affffff', endColorstr='#1ac7b299',GradientType=0 ); /* IE6-9 */
}
#formCakeBox .formInputSec h2{width:100%;text-align: left;font-size: 187%;}
#formCakeBox .formInputSec .photo_slider {}
#formCakeBox .formInputSec .photo_slider .bx-wrapper{margin:0 auto 1em;}
#formCakeBox .formInputSec .photo_slider .photo_thumb li{width:18%; margin:0 1%;}
#formCakeBox .formInputSec .photo_slider .photo_thumb a{cursor:pointer;}
#formCakeBox .formInputSec .photo_slider .photo_thumb a:hover{opacity:0.8;}
#formCakeBox .formInputSec .cakeSelectBox {}
#formCakeBox .formInputSec .cakeSelectBox .imgBox{width: 14.3%;}
#formCakeBox .formInputSec .cakeSelectBox .imgBox .cakeImg{width:auto;padding: 0;}
#formCakeBox .formInputSec .cakeSelectBox .imgBox .cakeImg img{width:200px;}
#formCakeBox .formInputSec .cakeSelectBox .txtBox{width: 56%;padding: 0 2% 0 2%;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox{width: 29%;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .deleteBox{text-align:right;margin: 0 auto 0;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .deleteBox .btn{cursor:pointer;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .priceBox{text-align:center;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox{text-align:center;margin: 1em auto 0;cursor: pointer;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox:hover{opacity:0.8;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox .imgOff{display:inline-block;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox .imgOn{display:none;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox.open .imgOff{display:none;}
#formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox.open .imgOn{display:inline-block;}
#formCakeBox .formInputSec .aboutTxt{width:100%;text-align: left;margin:0.5em 0 0;font-size: 93%;}
#formCakeBox .formInputSec .requiredDays{width:100%;text-align: left;}
#formCakeBox .formInputSec .cookieSelect{width:4em;}
#formCakeBox .cakeOptionBox {padding:40px 0 0;}
#formInputSec .requiredDays strong{ font-size:125%;}
#formInputSec label{ margin:0 1em 0 0; display:block;}
#formInputSec input{ vertical-align:baseline; margin:0 0.5em 0 0;}
#formInputSec textarea{ width:100%;}
#formInputSec dd span.textNote{font-size:75%;color:#ED1E79;display:block;line-height: 1.6;}
#formInputSec dd span.textNote.textCandleFree{color:inherit;}
/*202008↑*/
@media only screen and (max-width: 979px){
	/*202008↓*/
    #formCakeBox{width:95%;margin: 5% auto 10%;}
    #formCakeBox .topBox{padding: 3em 0 0;margin-bottom: 2%;}
    #formCakeBox .cartContentBox{padding: 0 10%;}
    #formCakeBox .cartContentBox .attention{}
    #formCakeBox .cartNumber{font-size: 85%;}
    #formCakeBox .cartYoyaku{font-size: 75%;}
    #formCakeBox .formInputSec {padding:5%;}
    #formCakeBox .formInputSec h2{padding: 0 13% 0 0;font-size: 150%;}
    #formCakeBox .formInputSec .cakeSelectBox {flex-wrap: wrap;position: relative;}
    #formCakeBox .formInputSec .cakeSelectBox .imgBox{width: 100%;display: none;}
    #formCakeBox .formInputSec .cakeSelectBox .imgBox .cakeImg{width:auto;padding: 0;text-align: center;}
    #formCakeBox .formInputSec .cakeSelectBox .imgBox .cakeImg img{width: 80%;}
    #formCakeBox .formInputSec .cakeSelectBox .txtBox{width: 100%;padding: 0 0 0 0;}
    #formCakeBox .formInputSec .cakeSelectBox .btnBox{width: 100%;}
    #formCakeBox .formInputSec .cakeSelectBox .btnBox .deleteBox{position:absolute; top:0; right:0;}
    #formCakeBox .formInputSec .cakeSelectBox .btnBox .priceBox{margin: 0em auto 0.2em; font-size: 90%;}
    #formCakeBox .formInputSec .cakeSelectBox .btnBox .editBox{margin-top: 0; padding: 0 12%;}
    #formCakeBox .formInputSec .aboutTxt{font-size: 70%;}
    /*202008↑*/
	#formInputSec .cakeInfo ul li{ padding:1em 0;}
	#formInputSec .cakeInfo ul li dt,
	#formInputSec .cakeInfo ul li dd{ padding:0.5em;}
	#formInputSec label{ font-size:112.5%; margin:0.5em 0;}
	#formInputSec input{ vertical-align:text-top;}
	#formInputSec dd span.textNote{ line-height:1.4em; margin:1em 0;}
}

form #formInputSec{ display:block;}
form #formInputSec .cakeInfo{ padding:0;}
form #formInputSec dl{ padding:0;}
form #formInputSec dt{ width:25%;}
form #formInputSec dd{ width:75%;}
form #formInputSec dd span.textNote{ margin:1em 0; line-height:1.4em;}
form #formInputSec label{ margin:0; padding:0;}
form #formInputSec input{ border:none;}
form #formInputSec select{ margin:0 1em 0 0; width:30%;}
form #formInputSec textarea{ max-width:100%;}
form #formInputSec p.materialList{ font-size:87.5%; text-align:center; margin:0 auto 2em;}
@media only screen and (max-width: 979px){
	form #formInputSec{ margin:0 auto 2em;}
	form #formInputSec h2{ font-size:125%; line-height:1.2em;}
	form #formInputSec .aboutTxt,
	form #formInputSec .requiredDays{ font-size:75%;}
	form #formInputSec .cakeInfo ul li dt{ margin:0.5em 0; line-height:1.2em;}
	form #formInputSec .cakeInfo ul li dt,
	form #formInputSec .cakeInfo ul li dd{ font-size:87.5%;}
	form #formInputSec label{ margin:0.5em 0;}
	form #formInputSec input{ vertical-align:baseline;}
	form #formInputSec p.materialList{ font-size:75%; text-align:left;}
}