@charset "UTF-8";

/*---------------------------------------------------------------
		基本設定
---------------------------------------------------------------*/
body{background-color:white;}
table { border-collapse: collapse; border-spacing: 0;}
table th{background-color:#FFFF99;}
.clear{clear:both;}
#welcomePage p, #welcomePage span{font-family: serif;}

#contents{max-width: 1050px;width: 100%;}
.noto{font-family:'Noto Sans Japanese', Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }
/*---------------------------------------------------------------
		(PC)
---------------------------------------------------------------*/
#welcomePage .contentBox{margin: 0em auto;padding:5em 0 0;}
#welcomePage h3{font-size:250%;color:#603813;font-weight: bold;margin-bottom: 0.5em;line-height: 1.2;padding: 0;}
#welcomePage h3 span{font-size: 60%;display: block; font-weight: normal;}

#welcomePage .category_linkBox{margin-top: 2em;}
#welcomePage .category_linkBox ul{display: flex;justify-content: space-between;align-items: center;gap:1em; flex-wrap: wrap;}
#welcomePage .category_linkBox ul li{width: 250px;text-align: center;font-size: 20px;font-weight: bold;color: #000;position: relative;}
#welcomePage .category_linkBox ul li::after{content: "";display: block;color: #916135;width: 1em;height: 1em;border: 0.1em solid currentColor;border-left: 0;border-bottom: 0;box-sizing: border-box;transform: translateY(-25%) rotate(135deg);position: absolute;bottom: 0.8em;right: 0;left: 0;margin: auto;}
#welcomePage .category_linkBox ul li.full::after{color: #d4ab97;}
#welcomePage .category_linkBox ul li.semi::after{color: #cbb45e;}
#welcomePage .category_linkBox ul li.custom::after{color: #7f9fab;}
#welcomePage .category_linkBox ul li.month::after{color: #8fa998;}
#welcomePage .category_linkBox ul li a{display:block;padding: 1em 0.5em 2.5em;border-radius: 10px;}
#welcomePage .category_linkBox ul li.full a{box-shadow:0px 0px 5px #d4ab97; border:2px solid #d4ab97;}
#welcomePage .category_linkBox ul li.semi a{box-shadow:0px 0px 5px #cbb45e; border:2px solid #cbb45e;}
#welcomePage .category_linkBox ul li.custom a{box-shadow:0px 0px 5px #7f9fab; border:2px solid #7f9fab;}
#welcomePage .category_linkBox ul li.month a{box-shadow:0px 0px 5px #8fa998; border:2px solid #8fa998;}
#welcomePage .category_linkBox ul li a,
#welcomePage .category_linkBox ul li a:visited{color: #000;}
#welcomePage .category_linkBox ul li a:hover{text-decoration: none;box-shadow:none;}
#welcomePage .category_linkBox ul li a .Ttl{font-size: 110%;}
#welcomePage .category_linkBox ul li a .innerBox{border-radius: 10px; padding: 0.3em 0.5em;}
#welcomePage .category_linkBox ul li.full a .innerBox{background: #f9f2f5;}
#welcomePage .category_linkBox ul li.semi a .innerBox{background: #fff9f2;}
#welcomePage .category_linkBox ul li.custom a .innerBox{background: #eef5ff;}
#welcomePage .category_linkBox ul li.month a .innerBox{background: #eef7f2;}
#welcomePage .category_linkBox ul li a p{font-size: 70%; padding: 0;}
#welcomePage .category_linkBox ul li a .txt{width: 55%; display: inline-block;}
#welcomePage .category_linkBox ul li a .star{width: 35%; display: inline-block; margin-left: 0.5em;}
#welcomePage .category_linkBox ul li a .star .gray{color: #ccc;}
#welcomePage .category_linkBox ul li.full a .star{color: #d4ab97;}
#welcomePage .category_linkBox ul li.semi a .star{color: #cbb45e;}
#welcomePage .category_linkBox ul li.custom a .star{color: #7f9fab;}
#welcomePage .category_linkBox ul li.month a .star{color: #8fa998;}

/*contentBox*/
#welcomePage h4.Ttl{text-align: left; color: #603813; position: relative; padding: 0 0 0 0.5em; font-family: serif; font-size: 2rem;}
#welcomePage h4.Ttl::before{content: ""; position: absolute; left: 0; top: 0.15em; width: 4px; height: 1.4em;}
#welcomePage .subTtl{font-size: 120%; font-weight: bold; margin-bottom: 1em;}
#welcomePage .imgBox{width: 30%;}
#welcomePage .imgBox img{box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.2); width: 100%;}
#welcomePage .rightBox{width: 68%;}
#welcomePage .starBox{width: 33%; padding: 1em;}
#welcomePage .starBox p{padding: 0; font-weight: bold; font-size: 90%;}
#welcomePage .starBox p .txt{width: 62%; display: inline-block;}
#welcomePage .starBox p .star .gray{color: #ccc;}
#welcomePage .cake_detail{width: 65%;}
#welcomePage .cake_detail dl{display: flex; justify-content: flex-start; align-items: flex-start; padding: 0.3em;}
#welcomePage .cake_detail dl dt{line-height: 1.7; font-size: 120%; font-weight: bold; width: 25%; margin-right: 2%;}
#welcomePage .cake_detail dl dd{line-height: 1.7; font-size: 120%; font-weight: bold; width: 70%;}
#welcomePage .cake_detail dl dd span{font-size: 70%;}
#welcomePage .txtBox{margin-top: 1em;}
#welcomePage .txtBox .red{color: #e0001b; border-bottom: none;}

#welcomePage .flowBox{gap: 2em; margin: 3em 0 2em;}
#welcomePage .flowBox li{width: calc(100% / 5); position: relative;}
#welcomePage .flowBox li .flow{border-radius: 10px; padding: 1.2em 0.5em 1em; height: 185px; position: relative;}
#welcomePage .flowBox li .flow .flowTtl{font-size: 120%; font-weight: bold; padding: 0;}
#welcomePage .flowBox li .flow .txtBox{line-height: 1.5; margin-top: 0;}
#welcomePage .flowBox li .flow .txtBox .red{color: #e0001b; border-bottom: none;}
#welcomePage .flowBox li .small{font-size: 80%; line-height: 1.5; margin-top: 0.3em;}
#welcomePage .flowBox li::before { content: "1"; position: absolute; top: -0.8em; left: 50%; transform: translateX(-50%); width: 33px; height: 33px; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold;font-size: 120%; z-index: 3;}
#welcomePage .flowBox li:nth-child(1)::before { content: "1"; }
#welcomePage .flowBox li:nth-child(2)::before { content: "2"; }
#welcomePage .flowBox li:nth-child(3)::before { content: "3"; }
#welcomePage .flowBox li:nth-child(4)::before { content: "4"; }
#welcomePage .flowBox li:nth-child(5)::before { content: "5"; }
#welcomePage .flowBox li .flow::after{content: ""; position: absolute; top: 50%; right: -1.7em; transform: translateY(-50%); width: 0; height: 0; border-top: 12px solid transparent; border-bottom: 12px solid transparent;}
#welcomePage .flowBox li:last-child .flow::after{content: none;}

#welcomePage .btn a{display: inline-block; color: #fff; font-weight: bold; font-size: 140%; padding: 0.5em 3em; border-radius: 50vw; text-decoration: none; position: relative; box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);}
#welcomePage .btn a::after{content: ""; position: absolute; top: 50%; right: 20px; width: 11px; height: 11px; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: translate(-50%, -50%) rotate(45deg);}
#welcomePage .btn a:hover{opacity: 0.5;}

/*フルオーダーケーキ*/
#full_cake h4.Ttl::before{background: #d4ab97;}
#full_cake .starBox{background: #f9f2f5;}
#full_cake .starBox p .star{color: #d4ab97;}
#full_cake .cake_detail dl{border-bottom: 1px dashed #d4ab97;}
#full_cake .flowBox li::before{background: #d4ab97;}
#full_cake .flowBox li .flow{border: solid 2px #d4ab97;}
#full_cake .flowBox li .flow .flowTtl{color: #d4ab97;}
#full_cake .flowBox li .flow::after{border-left: 18px solid #d4ab97;}
#full_cake .btn a{background: #d4ab97;}

/*セミオーダーケーキ*/
#semi_cake h4.Ttl::before{background: #cbb45e;}
#semi_cake .starBox{background: #fff9f2;}
#semi_cake .starBox p .star{color: #cbb45e;}
#semi_cake .cake_detail dl{border-bottom: 1px dashed #cbb45e;}
#semi_cake .flowBox li::before{background: #cbb45e;}
#semi_cake .flowBox li .flow{border: solid 2px #cbb45e;}
#semi_cake .flowBox li .flow .flowTtl{color: #cbb45e;}
#semi_cake .flowBox li .flow::after{border-left: 18px solid #cbb45e;}
#semi_cake .btn a{background: #cbb45e;}

/*カスタムオーダーケーキ*/
#custom_cake h4.Ttl::before{background: #7f9fab;}
#custom_cake .starBox{background: #eef5ff;}
#custom_cake .starBox p .star{color: #7f9fab;}
#custom_cake .cake_detail dl{border-bottom: 1px dashed #7f9fab;}
#custom_cake .flowBox li::before{background: #7f9fab;}
#custom_cake .flowBox li .flow{border: solid 2px #7f9fab;}
#custom_cake .flowBox li .flow .flowTtl{color: #7f9fab;}
#custom_cake .flowBox li .flow::after{border-left: 18px solid #7f9fab;}
#custom_cake .btn a{background: #7f9fab;}

/*今月のケーキ*/
#welcomePage #month_cake{padding: 5em 0;}
#month_cake h4.Ttl::before{background: #8fa998;}
#month_cake .starBox{background: #eef7f2;}
#month_cake .starBox p .star{color: #8fa998;}
#month_cake .cake_detail dl{border-bottom: 1px dashed #8fa998;}
#month_cake .flowBox li::before{background: #8fa998;}
#month_cake .flowBox li .flow{border: solid 2px #8fa998;}
#month_cake .flowBox li .flow .flowTtl{color: #8fa998;}
#month_cake .flowBox li .flow::after{border-left: 18px solid #8fa998;}
#month_cake .btn a{background: #8fa998;}


/*---------------------------------------------------------------
		(SP)
---------------------------------------------------------------*/
@media only screen and (max-width: 950px) {
	#contents{margin: 0 auto;}
	#welcomePage h3{font-size: 2rem;}
	#welcomePage .category_linkBox ul li{width: 47%;}
	#welcomePage .category_linkBox ul li a .innerBox p{margin-bottom: 0.5em; line-height: 1.1; font-size: 60%;}
	#welcomePage .category_linkBox ul li a .Ttl{line-height: 1.3; margin-bottom: 0.5em; font-size: 100%;}
	#welcomePage .category_linkBox ul li a .txt{display: block; width: auto;}
	#welcomePage .category_linkBox ul li a .star{display: block; width: auto; margin: 0;}
	
	
	#welcomePage h4.Ttl{font-size: 1.5rem;}
	#welcomePage .contentBox{padding: 3em 0 1em; margin: 0 1em;}
	#welcomePage .subTtl{font-size: 100%; line-height: 1.5;}
	#welcomePage .cakeBox{display: block;}
	#welcomePage .imgBox{width: 100%;}
	#welcomePage .rightBox{width: 100%;}
	#welcomePage .cakeDetailBox{width: 100%; display: block;}
	#welcomePage .starBox{width: 100%; margin: 1em 0; padding: 1em 3em;}
	#welcomePage .cake_detail{width: 100%;}
	#welcomePage .cake_detail dl dt{font-size: 100%; width: 30%;}
	#welcomePage .cake_detail dl dd{font-size: 100%;}
	#welcomePage #full_cake .cake_detail dl dd span{display: block;}
	#welcomePage #semi_cake .cake_detail dl dd span{display: block;}
	#welcomePage #custom_cake .cake_detail dl dd span{display: block;}
	#welcomePage .flowBox{display: block; margin: 0; padding: 2em 0 0;}
	#welcomePage .flowBox li{width: 100%; margin-bottom: 4em; position: relative;}
	#welcomePage .flowBox li .flow{height: auto;}
	#welcomePage .flowBox li::after{content: ""; position: absolute; left: 50%; bottom: -2em; transform: translateX(-50%); width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent;}
	#welcomePage .flowBox li .flow::after{content: none;}
	#welcomePage .flowBox li:last-child::after{content: none;}
	
	#full_cake .flowBox li::after{border-top: 18px solid #d4ab97;}
	#semi_cake .flowBox li::after{border-top: 18px solid #cbb45e;}
	#custom_cake .flowBox li::after{border-top: 18px solid #7f9fab;}
	#month_cake .flowBox li::after{border-top: 18px solid #8fa998;}
	
	#welcomePage .btn a{font-size: 120%;}
	
	/*アコーディオンメニュー*/
    .flowBox {max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease;}
	.flowBox.is-open { max-height: 2000px; opacity: 1;}
	.flowToggle{position: relative; width: 100%; font-size: 120%; color: #603813; font-family: serif; padding: 0.5em 0em; cursor: pointer; font-weight: bold; background: none; border: #603813 1px solid; margin-top: 1em;}
	.flowToggle::after{content: ""; position: absolute; top: 50%; right: 1.2em; width: 11px; height: 11px; border-right: 2px solid #603813; border-bottom: 2px solid #603813; transform: translateY(-50%) rotate(45deg); transition: transform 0.3s ease;}
	.flowToggle.is-open::after{transform: translateY(-50%) rotate(-135deg);}
	
	
}