/*
Theme Name: Trineeds Donut's Main Theme (only differences with Coco Fiona's styles)
Version: 1.0
Derived from the Original Theme: Twenty Eleven
Original Theme URI: http://wordpress.org/extend/themes/twentyeleven
Original Author: the WordPress team
Original Author URI: http://wordpress.org/
Original Version: 1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti:wght@400;500;700&family=Shippori+Mincho:wght@400;500;700&family=Noto+Sans+JP:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Grey+Qo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

@import url('https://coco-fiona.jp/wp-content/themes/coco-fiona/common.css');
@import url('https://coco-fiona.jp/wp-content/themes/coco-fiona/pc.css');
@import url('https://coco-fiona.jp/wp-content/themes/coco-fiona/sp.css');
@import url('https://coco-fiona.jp/wp-content/themes/coco-fiona/mac.css');


/* Common */
.grey {
	font-family: "Grey Qo", cursive , serif;
	font-weight: 400;
	font-style: normal;;
}
.abril {
	font-family: "Abril Fatface", serif;
	font-weight: 400;
	font-style: normal;
}
.mincho {
	font-family: "Noto Serif JP", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}
#top_instagram .instagram_wrap #sbi_load .sbi_follow_btn a {
	font-family: "Abril Fatface", serif;
	font-weight: 400;
	font-style: normal;
}
/* Header */
#masthead {
	background-image: url(/images/mv_trineeds.webp);
	padding-top: 0;
}
#head_open {
}
.countdown .time .inner {	/* Aki added from chkHTML */
	display: inline-block;
	width: 280px;
	text-align: left;
	margin-left: 50px;
}
#masthead .motivator .bar {
	height: 70px;
}
#masthead .motivator .bar::before {
	content: none;
}
#masthead .motivator .bar::after {
	width: 1px;
	background-color: white;
	animation: trineedsScrollMotif 2s linear 0s infinite normal;
}
@keyframes trineedsScrollMotif {
	0% { height: 70px; margin-top: 0px; }
	30% { height: 0; margin-top: 70px; }
	50% { height: 0; margin-top: 70px; }
	80% { height: 70px; margin-top: 0; }
	100% { height: 70px; margin-top: 0; }
}

/* Footer */
#colophon {
	background: var(--trineeds-brown);
}
.ft_txt p:not(.abril) {
	color: var(--trineeds-yellow);
	font-weight: bold;
	line-height: 1.3333;
}
#ft_copyright {
	font-size: 0.75rem;	/* 12px */
}
#colophon.topnew {
	background: url(/images/bg_footer.webp)no-repeat center top/cover;
}
#ft_newlogo {
	text-align: center;
}
#ft_wrapper .imgonly img {
	max-width: 100%;
}
#ft_wrapper #ft_right {
	background: rgba(255,255,255,0.8);
}
#ft_wrapper #ft_right, ul#ft_menu > li a,
ft_copyright {
	color: var(--trineeds-brown);
}
#ft_wrapper #ft_right #ft_ttl {
	font-weight: 400;
	margin-bottom: 18px;
}
#ft_wrapper #ft_right #ft_ttl .sub {
	margin-bottom: 7px;
}
#ft_wrapper #ft_right #ft_ttl .ttl {
	font-size: 2.25rem;	/* 36px */
}
#ft_wrapper #ft_right p {
	font-weight: 500;
}


/* Front-Page */
:is(#top_instagram, #top_contact) h2 {
	font-weight: normal;
	line-height: 1.3333;
	letter-spacing: 0.2em;
}
#top_instagram h2 {
	background-image: url(/images/ic_instagram_white.svg);
}

/* Contact Form */
.wp-theme-trineedsdonut {/* MTL MAC 2025.7 */
	color: white;
}
.wp-theme-trineedsdonut #mainwall, .wp-theme-trineedsdonut .entry-content {/* MTL MAC 2025.7 */
	background: var(--trineeds-brown);
}
.wp-theme-trineedsdonut .entry-content p {/* MTL MAC 2025.7 */
	background-color: inherit;
}
.wp-theme-trineedsdonut #top_contact .contact_wrap {/* MTL MAC 2025.7 */
	background: rgba(255, 255, 255, 0.2);
}
.wp-theme-trineedsdonut #top_contact form.wpcf7-form td input, .wp-theme-trineedsdonut #top_contact form.wpcf7-form td textarea {/* MTL MAC 2025.7 */
	opacity: 1;
	border-color: #FFFFFF;
}
.wp-theme-trineedsdonut #top_contact form.wpcf7-form .policy_text, .wp-theme-trineedsdonut #top_contact form.wpcf7-form .privacy_bottom_address {/* MTL MAC 2025.7 */
	border-color: #FFFFFF;
}
.wp-theme-trineedsdonut #top_contact form.wpcf7-form .submit-button .wpcf7-submit,
.wp-theme-trineedsdonut #top_contact form.wpcf7-form .buttons-area-confirm input {/* MTL MAC 2025.7 */
	background-color: var(--trineeds-brown);
}
.wp-theme-trineedsdonut a.linkbtn,
.wp-theme-trineedsdonut #top_instagram .instagram_wrap #sbi_load .sbi_follow_btn a {/* MTL MAC 2025.7 */
	background-color: var(--trineeds-yellow)!important;
	color: var(--trineeds-brown);
}
@media (any-hover: hover) {	/* 2025.10 KAZ: media query */
	.wp-theme-trineedsdonut #top_contact form.wpcf7-form .submit-button .wpcf7-submit:hover,
	.wp-theme-trineedsdonut #top_contact form.wpcf7-form .buttons-area-confirm input:hover {/* MTL MAC 2025.7 */
		color: var(--trineeds-brown);
		background-color: var(--trineeds-yellow);
	}
	.wp-theme-trineedsdonut a.linkbtn:hover,
	.wp-theme-trineedsdonut #top_instagram .instagram_wrap #sbi_load .sbi_follow_btn a:hover {/* MTL MAC 2025.7 */
		color: var(--trineeds-yellow);	/* Aki added from chkHTML */
		background: var(--trineeds-brown) !important;	/* Aki was var(--trineeds-yellow) from chkHTML */
	}
}
.wp-theme-trineedsdonut #top_contact form.wpcf7-form p.buttons-area .button-rewrite {/* MTL MAC 2025.7 */
	color: white;
}
.wp-theme-trineedsdonut #top_contact .thanks_part h2 {/* MTL MAC 2025.7 */
	letter-spacing: normal;
}
.wp-theme-trineedsdonut .accept_line .wpcf7-list-item input[type="checkbox"] {/* MTL MAC 2025.7 */
	border-color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0);
}
.wp-theme-trineedsdonut .accept_line .wpcf7-list-item input[type="checkbox"]:checked {/* MTL MAC 2025.7 */
	background-color: #FFFFFF;
	box-shadow: inset 0px 0px 0px 2px rgba(66, 34, 8, 0.8);
}

/* For Newtop */
/* Common */
section h2 {
	letter-spacing: 0.2em;
}


/* Fixed Page Component */
#top_loading {
	background-color: #422208;
}
#top_loading::before {
	mix-blend-mode: screen;
	opacity: 0.6;
}

#mainmenu {
	position: absolute;
}
#mainmenu ul > li {
	text-align: left;
}

#masthead #main_logo img {
	width: 100%;
	height: auto;
}

#top_concept {
	position: relative;
	color: var(--trineeds-brown);
	background: url(/images/bg_concept.webp) no-repeat center top / cover, white;
}
#top_concept::before {
	content: "";
	display: block;
	background: rgba(255,255,255,0.8);
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
}
#top_concept .wall {
	position: relative;
}
#top_concept p:not(.concept) {
	font-weight: 500;
}
#top_concept .wrap .imgonly {
}
#top_concept .wrap .text {
}
#top_concept .wrap2 {
	
}
#top_concept .imgonly:is(#concept_bg1, #concept_bg2) {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
}

#top_donut-menu {
}
#top_donut-menu .wall {
}
#top_donut-menu .grandmenu_wrap {
	position: relative;
	background-color: #864613;
}
#top_donut-menu .grandmenu_wrap::before {
	content: "";
	display: block;
	background: url(/images/bg_menu.png)no-repeat center top/ cover;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	mix-blend-mode: multiply;
}
#top_donut-menu h2,
#top_donut-menu ul,
#top_donut-menu p.lineup,
#top_donut-menu .note {	/* 2025.9 KAZ: added */
	position: relative;
}
#top_donut-menu h2 {
	text-align: center;
	font-weight: 400;
}
#top_donut-menu h2 .sub {
	display: block;
	font-size: 0.75rem;	/* 12px */
}
#top_donut-menu h2 .ttl {
	font-size: 2.25rem;	/* 36px */
}
#top_donut-menu ul {
	display: flex;
	justify-content: center;
}
#top_donut-menu ul > li {
}
#top_donut-menu ul > li a {
	display: block;
	background: url(/images/ic_arrow_down_white.svg)no-repeat center bottom;
}
#top_donut-menu ul > li img {
	display: block;
	margin: 0 auto;
}
#top_donut-menu ul > li img.photo {
}
#top_donut-menu ul > li img.ttl {
}
#top_donut-menu p.lineup {
	margin: 0 auto;
}
#top_donut-menu p.lineup a {
	display: block;
	color: var(--trineeds-brown);
	background-color: var(--trineeds-yellow);
	border-radius: 6px;
}
#top_donut-menu p.lineup a .ttl {
	font-weight: 600;
}
#top_donut-menu p.lineup a::after {
	content: "";
	display: inline-block;
	background: url(/images/ic_lineup.svg)no-repeat center /cover;
}
#top_donut-menu .note {	/* 2025.9 KAZ: added */
	width: var(--cocofiona-max-wall-width);
	margin-inline: auto;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: center;
}

.menu_wrap h3 .num {
	display: block;
	font-size: 0.875rem;
	letter-spacing: 0.2em;
}
#top_donut-menu .menu_wrap h3 .imgonly {
	display: block;
}
#top_donut-menu .menu_wrap p {
	line-height: 2.3125;	/* 16/37 */
	font-weight: 400;
}
#top_donut-menu .menu_wrap p.name {
	color: var(--trineeds-yellow);
	text-align: center;
	line-height: 0.81707;	/* 67/82 */
}
#top_donut-menu .menu_wrap p.notice {
	color: var(--trineeds-brown);
	font-weight: 600;
	background: rgba(255,255,255,0.8);
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translatex(-50%);
}

.menu_wrap#yeast {
	position: relative;
	background: url(/images/bg_yeast.webp)no-repeat center/ cover;
}
#top_donut-menu .menu_wrap#yeast p.name {
	position: relative;
	margin-top: 0;
	z-index: 1;
}
.menu_wrap#yeast #yeast_mv {
	position: relative;
	margin: 0 auto;
}
.menu_wrap#yeast #yeast_mv::before, .menu_wrap#yeast #yeast_mv::after {
	content: "";
	display: block;
	position: absolute;
	background: url(/images/img_fruit.png)no-repeat center /100% auto;
}
.menu_wrap#yeast #yeast_mv::after {
	background-image: url(/images/img_almond.png);
}
.menu_wrap#yeast .wall {
	background: rgba(255,255,255,0.8);
}
.menu_wrap#yeast p.name {
	color: var(--trineeds-brown);
}
.menu_wrap#yeast .wrapper {
}
.menu_wrap#yeast #img_menu01a {
}
.menu_wrap#yeast .text {
	border-color: rgba(66,34,8,0.4);
}
.menu_wrap#yeast .text :is(h3, p) {
	color: var(--trineeds-brown);
}
.menu_wrap#yeast .img_wrapper {
}
.menu_wrap#yeast .img_wrapper .imgonly {
}
.menu_wrap#yeast .imgonly.deco {
	position: absolute;
}

.menu_wrap#frenchcruller {
	background-color: #CEB48C;
}
.menu_wrap#frenchcruller .text {
	border-color: rgba(66,34,8,0.4);
}
.menu_wrap#frenchcruller :is(h3, p) {
	color: var(--trineeds-brown);
}
.menu_wrap#frenchcruller p.name {
	color: white;
	background-color: transparent;
}

#top_detail::before {
	mix-blend-mode: overlay;
}
#top_detail h2 {
	font-weight: 400;
}
#top_detail h2 .sub {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: inherit;
	margin-right: 40px;
}
#top_detail h2 .ttl {
	font-size: 2.25rem;	/* 36px */
	letter-spacing: 0.2em;
}
#top_detail .wrap h3 {
	font-weight: 300;
}
#top_detail .wrap p.ttl {
	font-weight: 800;
}
#top_detail .wrap p {
	color: var(--trineeds-brown);
}

.contact_wrap h3 {
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.2em;
}
#top_contact p:is(.emp, .normal) {
	font-weight: 400;
}
#top_contact p.txt {
	font-weight: 300;
}


/* General breakpoint for PC
----------------------------------------------- */
@media print, screen and (min-width: 768px) {

	/* Header */
	#masthead {
/*		padding-bottom: 380px; */	/* 2025.10 KAZ: c/o */
	}
	.countdown {
		margin-top: -125px;
	}
	.countdown .days .ato {
		font-size: 3.375rem;	/* 54px */
		vertical-align: 90px;
	}
	.countdown .days .number {
		font-size: 28.75rem;	/* 460px */
	}
	.countdown .days .nichi {
		font-size: 5rem;	/* 80px */
	}
	.countdown .time {
		font-size: 2.9375rem;	/* 47px design is 47.31px */
		margin-top: -115px;
	}
	.countdown .time .number {
		font-size: 5.375rem;	/* 86px */
	}
	#head_logo {
		margin-top: -99px;
	}
	#head_soon {
		font-size: 3.75rem;	/* 60px */
		letter-spacing: 0.25em;
		margin-top: 308px;
		margin-bottom: 0;
	}
	body:not(#my-top).admin-bar #masthead .motivator {	/* 2025.9 KAZ: not for newtop; MAT 公開時 #my-top was #my-newtop  */
		top: min(calc(100% - 99px), calc(var(--viewheight) - 430px));
	}

	#headmenu.sponly {
		display: none !important;	/* KAZ */
	}

	.contact_follow a {
		font-weight: 400;
		color: var(--trineeds-brown);
		background: url(/images/ic_mail_donut.svg)no-repeat center top 33px,var(--trineeds-yellow);
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
	}
	.contact_follow a::before {
		transition: all 0.5s;
		-webkit-transition: all 0.5s;
	}


	@media (any-hover: hover) {
		.contact_follow a:hover {
			color: var(--trineeds-yellow);
			background: url(/images/ic_mail_hover.svg)no-repeat center top 33px,var(--trineeds-brown);
		}
		.contact_follow a:hover::before {
			background: var(--trineeds-brown);
		}
	}


	/* Footer */
	#colophon {
		padding-top: 20px;
	}
	.ft_txt p:not(.abril) {
		font-size: 3rem;	/* 48px */
		margin-top: 15px;
	}
	.ft_txt p.abril {
		font-size: 1.375rem;	/* 22px */
		letter-spacing: 0.3em;
	}
	#colophon.topnew {
		padding-top: 75px;
	}
	#colophon .wall {
		max-width: 1030px;
	}
	#ft_wrapper {
		justify-content: space-between;
		gap: 0;
		margin-top: 45px;
		margin-bottom: 50px;
	}
	#ft_wrapper .imgonly {
		flex-shrink: 0;
		width: 57.6699%;
		max-width: 592px;
	}
	#ft_wrapper #ft_right {
		padding: 15px 27px;
	}
	#ft_wrapper #ft_map {
		width: 318px;
		height: 231px;
		margin-bottom: 26px;
	}
	ul#ft_menu {
		justify-content: center;
		padding-left: 0;
		margin-bottom: 60px;
	}
	ul#ft_menu > li a {
		font-weight: 400;
	}

	/* Front-Page */
	#top_instagram {
		padding-top: 58px;
	}
	#top_instagram h2 {
		margin-bottom: 20px;
	}


	/* For Newtop */
	#top_loading::before {
		background-image: url(/images/bg_loading.png);
	}

	#masthead #main_logo {
		width: 446px;
		top: calc(var(--viewheight) / 2 - 227px);
	}

	#mainmenu {
		top: 46px;
		left: 50px;
	}
	#mainmenu ul > li {
		margin-bottom: 40px;
	}

	#top_concept {
		padding-top: 140px;
		padding-bottom: 0;
	}
	#top_concept h2 {
		font-size: 2.25rem;	/* 36px */
		margin-bottom: 24px;
	}
	#top_concept .wall {
		max-width: 841px;
		padding-bottom: 132px;
	}
	#top_concept::before {
		width: 820px;
		height: 1097px;
		top: 83px;
	}
	#top_concept p.concept {
		font-size: 1.8125rem;	/* 29px */
		line-height: 1.58862;	/* 29/46 */
		padding-bottom: 43px;
	}
	#top_concept .wrap {
		position: relative;
		margin-bottom: 88px;
	}
	#top_concept .wrap .imgonly {
		width: 329px;
		position:absolute;
		top: 5px;
		left: -190px;
	}
	#top_concept .wrap .text {
		max-width: 427px;
		padding-left: 0;
	}
	#top_concept .text2 {
		max-width: 427px;
	}
	#top_concept .text2 p {
		margin-bottom: 40px;
	}
	#top_concept .imgonly#concept_bg1 {
		float: right;
		width: 230px;
		margin-top: -219px;	/* Aki was -169px from chkHTML */
	}
	#top_concept .imgonly#concept_bg2 {
		width: 427px;
		max-width: none;
		margin-top: 84px;
	}
	#top_concept .wrap2 {
		position: relative;
		width: calc(100% + 56px);
		padding-left: 56px;
	}
	#top_concept .logo_follow {
		bottom: 0;
	}

	#top_donut-menu {
	}
	#top_donut-menu .wall {
	}
	#top_donut-menu .grandmenu_wrap {
		padding-top: 63px;
		padding-bottom: 71px;
	}
	#top_donut-menu h2 .sub {
	}
	#top_donut-menu h2 .ttl {
	}
	#top_donut-menu ul {
		gap: 0 70px;
		margin-top: 40px;
	}
	#top_donut-menu ul > li {
		width: 200px;
	}
	#top_donut-menu ul > li a {
		position: relative;
		padding-bottom: 45px;
		transition: all 0.5s;
	}
	#top_donut-menu ul > li img {
		display: block;
	}
	#top_donut-menu ul > li img.photo {
		position: relative;
		padding-bottom: 39px;
	}
	#top_donut-menu ul > li a::before {
		content: "";
		display: block;
		background: transparent;
		position: absolute;
		width: 226px;
		height: 226px;
		border-radius: 50%;
		top: -13px;
		left: -13px;
		transition: all 0.5s;
	}
	#top_donut-menu ul > li img.ttl {
	}
	#top_donut-menu p.lineup {
		max-width: 417px;
		margin-top: 65px;
	}
	#top_donut-menu p.lineup a {
		padding: 28px 24px 26px 26px;
		transition: all 1s;
	}
	#top_donut-menu p.lineup a .abril {
		font-size: 1.25rem;	/* 20px */
	}
	#top_donut-menu p.lineup a .ttl {
		font-size: 1.125rem;	/* 18px */
		margin: 0 49px 0 20px;
	}
	#top_donut-menu p.lineup a::after {
		width: 65px;
		height: 9px;
		vertical-align: 8px;
		transition: all 0.5s;
	}
	#top_donut-menu .note {	/* 2025.9 KAZ: added */
		margin-top: 50px;
	}

	.menu_wrap#yeast {
		padding-top: 165px;
		padding-bottom: 275px;
	}
	.menu_wrap#yeast #yeast_mv {
		max-width: 853px;
		margin-top: -86px;
	}
	.menu_wrap#yeast .wall {
		max-width: 979px;
		padding-top: 270px;
		padding-bottom: 112px;
		margin-top: -270px;
	}
	.menu_wrap#yeast p.name {
	}
	.menu_wrap#yeast .wrapper {
		display: flex;
		justify-content: center;
		gap: 0 55px;
		margin-top: 62px;
	}
	.menu_wrap#yeast #img_menu01a {
		max-width: 204px;
	}
	.menu_wrap#yeast .text {
		width: 60.675%;	/* 594/979 */
		max-width: 594px;
		display: flex;
		justify-content: space-between;
	}
	.menu_wrap#yeast .text p {
		width: 59.0909%;	/* 351/594 was 351px */
		padding-top: 42px;
	}
	.menu_wrap#yeast .img_wrapper {
		display: flex;
		justify-content: center;
		gap: 0 85px;
		margin-top: 55px;
	}
	.menu_wrap#yeast .img_wrapper .imgonly {
		width: 39.2236%;	/* 384/979 */
		max-width: 384px;
	}
	.menu_wrap#yeast #yeast_mv::before {
		width: 257px;
		height: 171px;
		bottom: -57px;
		left: -170px;
	}
	.menu_wrap#yeast #yeast_mv::after {
		width: 318px;
		height: 156px;
		bottom: -40px;
		right: -182px;
	}
	.menu_wrap#yeast .imgonly.deco#fruit {
		width: 257px;
		top: 980px;
		left: calc(50% - 595px);
	}
	.menu_wrap#yeast .imgonly.deco#almond {
		width: 318px;
		top: 972px;
		left: calc(50% + 292px);
	}
	.menu_wrap#yeast .imgonly.deco#nuts {
		width: 307px;
		bottom: 218px;
		left: -80px;
	}
	.menu_wrap#yeast .imgonly.deco#caramel {
		width: 222px;
		bottom: 60px;
		left: calc(50% - 323px);
	}
	.menu_wrap#yeast .imgonly.deco#choco {
		width: 534px;
		bottom: 88px;
		left: calc(50% + 90px);
	}

	#top_donut-menu .menu_wrap h3 {
		padding-top: 15px;
		margin-bottom: 18px;
	}
	#top_donut-menu .menu_wrap h3 .imgonly {
		margin: 17px 0;
	}
	.menu_wrap#oldfashion {
		padding-top: 128px;
		padding-bottom: 116px;
	}
	.menu_wrap#oldfashion #img_menu02b {
		width: 32.284%;	/* 441/1366 */
		margin-top: -170px;
	}
	#top_donut-menu .menu_wrap p.name {
		font-size: 8.75rem;	/* 140px */
		margin-top: -63px;
	}

	.menu_wrap#frenchcruller {
		position: relative;
		background: url(/images/img_menu03a.webp)no-repeat right top / 100% auto , #CEB48C;
		padding-bottom: 47px;
	}
	.menu_wrap#frenchcruller .wall {
		width: var(--cocofiona-wall-width);
		padding-top: 135px;
	}
	.menu_wrap#frenchcruller .text {
		margin-right: auto;
		margin-left: 0;
	}
	.menu_wrap#frenchcruller .img_wrapper {
		justify-content: flex-start;
		margin-top: 79px;
	}
	.menu_wrap#frenchcruller p.name {
		margin-top: 92px;
	}

	#top_contact p.emp {
		font-size: 1.375rem;	/* 22px */
	}

	@media (any-hover: hover) {
		#top_donut-menu ul > li a:hover::before {
			background: rgba(255,255,255,0.6);
		}
		#top_donut-menu ul > li a:hover img {
			opacity: 1;
		}
		#top_donut-menu p.lineup a:hover {
			text-decoration: none;
			color: var(--trineeds-yellow);
			background: var(--trineeds-brown);
		}
		#top_donut-menu p.lineup a:hover::after {
			background-image: url(/images/ic_lineup_hover.svg);
		}
	}


}


/* Special Break Point */
	@media screen and (min-width: 768px) and (min-width: 1367px) {
		.menu_wrap#frenchcruller {
			background-size: auto 775px;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 980px) {
		.menu_wrap#yeast .imgonly.deco#fruit {
			top: 1085px;
		}
		.menu_wrap#yeast .imgonly.deco#almond {
			top: 1077px;
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1308px) {
		.menu_wrap#frenchcruller {
		}
		.menu_wrap#frenchcruller .img_wrapper {
			margin-top: 0;
		}
		.menu_wrap#frenchcruller p.name {
		}
	}
	@media screen and (min-width: 768px) and (max-width: 1170px) {
		.menu_wrap#oldfashion #img_menu02b {
			margin-top: 0;
		}
	}
	@media screen and (max-width: 1094px) {
		#head_logo {
			margin-top: -50px;
		}

	}


/* General breakpoint for SP
----------------------------------------------- */
@media screen and (max-width: 767px) {

	/* Header */
	#masthead {
		background-image: url(/images/sp/mv_trineeds.webp);
/*		padding-top: 31px; */	/* 2025.10 KAZ: c/o */
	}
	#masthead #head_open img {
		width: 100%;
		margin-inline: 0;
	}
	#head_logo {
		width: 71.7333%;	/* 269/375 */
		min-width: 269px;
		margin-top: -22px;
	}
	.countdown {
		margin-top: -65px;
	}
	.countdown .days .ato {
		font-size: 1.8125rem;	/* 29px */
		vertical-align: 48px;
	}
	.countdown .days .number {
		font-size: 15.5625rem;	/* 249px design is 249.73px */
	}
	.countdown .days .nichi {
		font-size: 2.6875rem;	/* 43px design is 43.43px */
		vertical-align: 8px;
	}
	.countdown .time .inner {	/* Aki added */
		width: 180px;
	}
	.countdown .time {
		font-size: 1.625rem;	/* 26px design is 25.69px */
		margin-top: -65px;
	}
	.countdown .time .number {
		font-size: 2.9375rem;	/* 47px design is 46.69px */
	}
	#head_soon {
		display: none;
	}

	#headmenu {	/* KAZ */
	}
	#headmenu .inner {	/* KAZ */
		background-color: #864613;
	}
	#headmenu .inner::before {	/* KAZ */
		background-image: url(/images/sp/spmenu_over.png);
		opacity: 1;
		mix-blend-mode: multiply;
	}
	#menu_open_btn, #menu_close_btn {
	}
	#menu_close_btn {
	}
	#headmenu ul {
	}
	#headmenu ul li a {
		color: white;	/* KAZ */
	}
	#headmenu ul li.parent {
		font-weight: normal;	/* KAZ */
		margin-bottom: 14px;	/* Aki */
	}
	#headmenu ul li.parent::before {
		background-color: white;	/* KAZ */
	}
	#headmenu ul li#menu_contact a {
		background-image: url(/images/ic_mail.svg);	/* KAZ */
		background-color: #FFC800;	/* KAZ */
		color: #422208;	/* KAZ */
		font-weight: normal;	/* KAZ */
	}
	#headmenu ul.child {
		margin-top: 3px;
		margin-left: 0;
		margin-bottom: 27px;
	}
	#headmenu ul.child li {
		border-bottom: solid 1px rgba(255,255,255,0.4);
	}
	#headmenu ul.child li:not(:last-child) {
		margin-bottom: 8px;
	}
	#headmenu ul.child li a {
		background: url(/images/sp/ic_arrow_white.svg)no-repeat center right;
		padding-bottom: 5px;
	}
	#headmenu ul.child li a .photo {
		width: 73px;
		height: auto;
	}

	/* Footer */
	#colophon #ft_logo {
		width: 74.1333%;	/* 278/375 */
		min-width: 278px;
	}
	#ft_date {
		margin-bottom: 15px;
	}
	.ft_txt p:not(.abril) {
		font-size: 2.125rem;	/* 34px */
		margin-bottom: 30px;
	}
	#colophon.topnew {
		background: url(/images/sp/bg_footer.png)no-repeat center top/ 100% auto;
		padding-top: 55px;
	}
	#ft_newlogo img {
		width: 69.5783%;	/* 231/332 */
		min-width: 231px;
	}
	#ft_wrapper {
		margin-top: 33px;
	}
	#ft_wrapper .imgonly img {
		max-width: 318px;
	}
	#ft_wrapper #ft_right {
		margin-top: 60px;
	}
	#ft_wrapper #ft_right #ft_ttl {
		margin-bottom: 13px;
	}
	#ft_wrapper #ft_map {
		aspect-ratio: 106/77;
	}
	#ft_wrapper #ft_right p {
		text-align: left;
		margin-top: 30px;
		margin-bottom: 40px;
	}
	#ft_copyright {
		text-align: center;
		letter-spacing: 0.03em;	/* design is 0.05em */
	}


	/* Front-Page */
	.wp-theme-trineedsdonut #mainwall {
		padding-bottom: 35px;
	}
	#top_instagram {
		margin-bottom: 45px;
	}
	
	/* Contact Form */
	.wp-theme-trineedsdonut #top_contact form.wpcf7-form .submit-button .wpcf7-submit, /* MTL MAC 2025.7 */
	.wp-theme-trineedsdonut #top_contact form.wpcf7-form .buttons-area-confirm input {
		color: var(--trineeds-brown);
		background-color: var(--trineeds-yellow);
	}


	/* For Newtop */
	#mainwall {	/* 公開時#my-newtop取る/MATDONE */
		padding-bottom: 0;
	}

	#top_loading::before {
		background-image: url(/images/sp/bg_loading.png);
	}

	#masthead #main_logo {
		width: 86.933%;	/* 326/375 */
		min-width: 326px;
		top: 21.0914%;	/* 143/678 */
	}
	#masthead #main_logo {
		top: auto;
		bottom: 53.9823%;	/* 366/678 */
	}
	#masthead .motivator {
		left: 50% !important;
		transform: translatex(-50%);
	}
	#mainmenu {
		left: 50%;
		transform: translatex(-50%);
		top: calc(50% + 30px);
	}
	#mainmenu ul > li {
		text-align: center;
		margin-bottom: 30px;
	}

	#top_donut-menu .menu_wrap p.notice {
		position: relative;
		text-align: left;
		top: 0;
		left: auto;
		transform: none;
		margin-top: 0px;
		margin-bottom: 30px;
	}

	#top_concept {
		background: url(/images/sp/bg_concept.png)no-repeat center top/100% auto, white;
		padding-top: 20px;
	}
	#top_concept .wall {
		width: var(--cocofiona-wall-width);
		background: rgba(255,255,255,0.8);
		padding-top: 32px;
		padding-bottom: 5px;
		margin-bottom: 5px;
	}
	#top_concept p.concept {
		font-size: 1.25rem;	/* 20px */
		line-height: 1.8;	/* 20/36 */
		margin-bottom: 30px;
	}
	#top_concept h2 {
		font-weight: normal;
	}
	#top_concept :is(.wrap, .wrap2) :is(.text, .text2) {
		width: 84.3373%;	/* 280/332 */
		margin: 0 auto;
	}
	#top_concept :is(.wrap, .wrap2) :is(.text, .text2) p {
		font-size: 1rem;
		line-height: 2;	/* 16/32 */
	}
	#top_concept .wrap2 {
		display: flex;
		flex-direction: column;
	}
	#top_concept .wrap2 .text2 {
		order: 3;
	}
	#top_concept .wrap2 .text2 p {
		margin-bottom: 13px;
	}
	#top_concept .wrap2 #concept_bg1 {
		order: 1;
		min-width: 99px;
		width: 29.8192%;	/* 99/332 */
		margin-right: 23px;
	}
	#top_concept .wrap2 #concept_bg2 {
		order: 2;
		min-width: 194px;
		width: 58.4337%;	/* 194/332 */
		margin-left: calc((var(--pagewidth) - var(--cocofiona-wall-width)) / 2 * -1);
		margin-top: -69px;
		margin-bottom: 38px;
	}
	.logo_follow img {
		width: 115px;
	}

	#top_donut-menu .grandmenu_wrap {
		padding-top: 37px;
		padding-bottom: 32px;
	}
	#top_donut-menu ul {
		gap: 0 31px;
		margin-top: 28px;
	}
	#top_donut-menu ul > li,
	#top_donut-menu ul > li img.photo { 
		width: 24%;	/* 90/375 */
		min-width: 90px;
	}
	#top_donut-menu ul > li:last-child {
		width: 28.5333%;	/* 107/375*/
	}
	#top_donut-menu ul > li a {
		padding-bottom: 20px;
	}
	#top_donut-menu ul > li img.photo {
		margin-bottom: 12px;
	}
	#top_donut-menu ul > li:first-child img.ttl {
		width: 73px;
	}
	#top_donut-menu p.lineup {
		max-width: 417px;
		min-width: 303px;
		width: 80.8%;	/* 303/375 */
		margin-top: 27px;
	}
	#top_donut-menu p.lineup a {
		padding: 16px 20px 16px 19px;
	}
	#top_donut-menu p.lineup a .abril {
		font-size: 0.875rem;	/* 14px */
	}
	#top_donut-menu p.lineup a .ttl {
		margin-left: 6px;
		margin-right: 25px;
	}
	#top_donut-menu p.lineup a::after {
		width: 34px;
		height: 6px;
		vertical-align: 3px;
	}
	#top_donut-menu .note {	/* 2025.9 KAZ: added */
		margin-top: 20px;
	}
	#top_donut-menu .menu_wrap p.name {
		font-size: 5.125rem;	/* 82px */
	}

	.menu_wrap .text {
		width: var(--cocofiona-wall-width);
		margin-top: 38px;
	}
	.menu_wrap .text h3 {
		margin-top: 17px;
		margin-bottom: 35px;
	}
	.menu_wrap h3 .num {
		margin-bottom: 15px;
	}
	#top_donut-menu .menu_wrap h3 .imgonly {
		margin-bottom: 13px;
	}

	.menu_wrap#yeast {
		background-image: url(/images/sp/bg_yeast.png);
		padding-top: 38px;
		padding-bottom: 172px;
	}
	.menu_wrap#yeast #yeast_mv {
		width: var(--cocofiona-wall-width);
		margin-top: -37px;
	}
	.menu_wrap#yeast .wall {
		padding-top: 186px;
		padding-bottom: 50px;
		margin-top: -186px;
		margin-bottom: ;
	}
	.menu_wrap#yeast p.name {
	}
	.menu_wrap#yeast .wrapper {
		position: relative;
		margin-top: 101px;
	}
	.menu_wrap#yeast #img_menu01a {
		width: 34.1333%;	/* 128/375 */
		min-width: 128px;
		position: absolute;
		top: 46px;
		right: calc((100% - var(--cocofiona-wall-width)) / 2);
	}
	.menu_wrap#yeast .img_wrapper {
	}
	.menu_wrap#yeast .img_wrapper .imgonly {
		width: 66.6666%;	/* 250/375 */
		min-width: 250px;
		margin: 0 auto;
	}
	.menu_wrap#yeast .img_wrapper .imgonly#img_menu01b {
		margin-top: 30px;	/* Aki added from chkHTML */
		margin-bottom: 30px;
	}
	.menu_wrap#yeast #yeast_mv::before {
		width: 33.8666%;	/* 127/375 */
		min-width: 127px;
		height: 171px;
		bottom: -135px;
		left: -20px;
	}
	.menu_wrap#yeast #yeast_mv::after {
		width: 48.8%;	/* 183/375*/
		min-width: 183px;
		height: 156px;
		bottom: -97px;
		right: -33px;
	}
/*	.menu_wrap#yeast .imgonly.deco#fruit {
		width: 33.8666%;	/* 127/375 * /
		min-width: 127px;
		top: 496px;
		left: calc(50% - 185px);
	}
	.menu_wrap#yeast .imgonly.deco#almond {
		width: 48.8%;	/* 183/375 * /
		min-width: 183px;
		top: 462px;
		left: calc(50% + 16px);
	}
*/
	.menu_wrap#yeast .imgonly.deco#nuts {
		width: 38.1333%;	/* 143/375*/
		min-width: 143px;
		bottom: 105px;
		left: calc(50% - 220px);
	}
	.menu_wrap#yeast .imgonly.deco#caramel {
		width: 27.4666%;	/* 103/375*/
		min-width: 103px;
		bottom: 31px;
		left: calc(50% - 135px);
	}
	.menu_wrap#yeast .imgonly.deco#choco {
		width: 66.1333%;	/* 248/375 */
		min-width: 248px;
		bottom: 70px;
		left: calc(50% - 23px);
	}

	.menu_wrap#oldfashion {
		padding-bottom: 29px;
	}
	.menu_wrap#oldfashion .wrapper {
		display: flex;
		flex-direction: column;
	}
	.menu_wrap#oldfashion .wrapper .text {
	}
	.menu_wrap#oldfashion .wrapper .imgonly {
		order: 2;
		margin-top: 18px;
	}
	.menu_wrap#oldfashion #img_menu02b {
		width: 65.6%;	/* 246/375 */
		min-width: 246px;
		margin: 64px auto 0;
	}
	.menu_wrap#oldfashion p.name {
		margin-top: -28px;
	}

	.menu_wrap#frenchcruller {
		padding-bottom: 27px;
	}
	.menu_wrap#frenchcruller .img_wrapper {
		margin-top: 30px;
	}
	.menu_wrap#frenchcruller p.name {
		margin-top: 43px;
	}

	#top_detail {
		padding-top: 28px;
	}
	#top_detail .wrap p.ttl {
		letter-spacing: 0.1em;
		padding-right: 0;
	}
	#top_detail h2 {
		padding-right: 0;
		margin-bottom: 10px;
	}
	#top_detail h2 .sub {
		margin-right: 0;
	}
	#top_detail .wrap p:not(.ttl) {
		padding-bottom: 23px;
	}

	#top_contact p.emp {
		font-size: 1.375rem;	/* 22px */
	}
	#top_contact p.emp::after {
		content: "";
		display: block;
		width: var(--cocofiona-wall-width);
		height: 1px;
		background-color: white;
		margin: 13px auto 0;
	}
	#top_contact p.normal {
		margin-bottom: 10px;
	}
	#top_contact p.txt {
		width: var(--cocofiona-wall-width);
		text-align: left;
		margin: 0 auto 22px;
	}




}