@charset "utf-8";
/* CSS Document */

.sp-visible{
	display: block;
}

.pc-visible{
	display: none;
}

@media screen and (min-width:850px) {
	.sp-visible{
		display: none;
	}
	.pc-visible{
		display: block;
	}
}

html{
	scroll-behavior: smooth;
}

body{
	background: #F4F2E9;
	color: #333333;
    background-attachment: fixed;
    z-index: 1;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
    transition: .7s;
}

.inter{
	font-family: "Inter", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: normal;
  	font-style: normal;
}

img{
	max-width: 100%;
}

main{
	width: auto;
}

/*-----------------
ドロワーメニュー(spのみ)
------------------*/
.menu-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: fit-content;
	overflow: hidden;
	z-index: 20;
}

.menu-button{
	display: block;
	position: fixed;
	top: 20px;
	right: 20px;
	cursor: pointer;
	z-index: 30;
}

.bar{
	display: block;
	width: 45px;
	height: 3px;
	margin: 10px 0;
	background-color: #333;
	transition: .4s;
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(1){
	transform: rotate(45deg) translate(6px,3px);
}

#menu-toggle:checked ~ .menu-button .bar:nth-child(2){
	transform: rotate(-45deg) translate(6px,-3px);
}

#menu-toggle{
	display: none;
}

.menu{
	position: fixed;
	top: -100%;
	left: 0;
	width: 100%;
	height: fit-content;
	background-color: #9F3D3D;
	transition: top .6s ease;
	z-index: 20;
}

#menu-toggle:checked ~ .menu{
	top: 0;
}

.menu ul{
	list-style: none;
	padding: 50px;
	text-align: center;
}

.menu ul li a{
	text-decoration: none;
	color: #FFF;
	font-size: 1rem;
	display: block;
	padding: 10px 0;
	transition: .3s;
}

.menu ul li a:hover{
	opacity: 0.5;
}

.menu ul li a:active{
	opacity: 0.5;
}

/*-----------------
左中央皿 & ドーナツ & 詳細(pc1250px以上のみ)
------------------*/
.o1250px-visible{
	display: none;
}
.dish{
	display: none;
}

@media screen and (min-width:1250px) {
	.o1250px-visible{
		display: block;
	}
	.dish{
		display: block;
		position: absolute;
		top: 290px;
		left: calc((100% - 400px) / 4);
		transform: translateX(-50%);
	}
}

.donuts-container{
	position: relative;
}

.donuts{
	position: absolute;
	width: 200px;
	transform: translateX(-100%) rotate(0deg);
	animation: rolling 15s forwards linear;
}

.donuts-detail{
	color: #9F3D3D;
	text-align: center;
	
}

.donuts-detail01,
.donuts-detail02,
.donuts-detail03,
.donuts-detail04,
.donuts-detail05,
.donuts-detail06,
.donuts-detail07,
.donuts-detail08,
.donuts-detail09,
.donuts-detail10,
.donuts-detail11,
.donuts-detail12,
.donuts-detail13{
	position: absolute;
	top: 650px;
	left: calc((100% - 400px) / 4);
	transform: translateX(-50%);
	animation: detailSwitch 15s forwards linear;
	opacity: 0;
}

.donuts01,.donuts-detail01{
	animation-delay: 0s;
}
.donuts02,.donuts-detail02{
	animation-delay: 15s;
}
.donuts03,.donuts-detail03{
	animation-delay: 30s;
}
.donuts04,.donuts-detail04{
	animation-delay: 45s;
}
.donuts05,.donuts-detail05{
	animation-delay: 60s;
}
.donuts06,.donuts-detail06{
	animation-delay: 75s;
}
.donuts07,.donuts-detail07{
	animation-delay: 90s;
}
.donuts08,.donuts-detail08{
	animation-delay: 105s;
}
.donuts09,.donuts-detail09{
	animation-delay: 120s;
}
.donuts10,.donuts-detail10{
	animation-delay: 135s;
}
.donuts11,.donuts-detail11{
	animation-delay: 150s;
}
.donuts12,.donuts-detail12{
	animation-delay: 165s;
}
.donuts13,.donuts-detail13{
	animation-delay: 180s;
}

@keyframes rolling{
	0%{
		top: 300px;
		left: 40%;
		transform: translateX(-100%) rotate(0deg);
	}
	5%{
		top: 300px;
		left: 35%;
		transform: translateX(-100%) rotate(-20deg);
	}
	10%{
		top: 300px;
		left: 30%;
		transform: translateX(-100%) rotate(-40deg);
	}
	15%{
		top: 300px;
		left: 25%;
		transform: translateX(-100%) rotate(-60deg);
	}
	50%{
		top: 300px;
		left: 25%;
		transform: translateX(-100%) rotate(-60deg);
	}
	55%{
		top: 300px;
		left: 20%;
		transform: translateX(-100%) rotate(-80deg);
	}
	60%{
		top: 300px;
		left: 15%;
		transform: translateX(-100%) rotate(-100deg);
	}
	65%{
		top: 300px;
		left: 10%;
		transform: translateX(-100%) rotate(-120deg);
	}
	70%{
		top: 300px;
		left: 5%;
		transform: translateX(-100%) rotate(-140deg);
	}
	75%{
		top: 300px;
		left: 0%;
		transform: translateX(-100%) rotate(-160deg);
	}
	80%{
		top: 300px;
		left: -5%;
		transform: translateX(-100%) rotate(-90deg);
	}
	85%{
		top: 300px;
		left: -10%;
		transform: translateX(-100%) rotate(-100deg);
	}
	90%{
		top: 300px;
		left: -20%;
		transform: translateX(-100%) rotate(-110deg);
	}
	95%{
		top: 300px;
		left: -30%;
		transform: translateX(-100%) rotate(-120deg);
	}
	100%{
		top: 300px;
		left: -40%;
		transform: translateX(-100%) rotate(-130deg);
	}
}

@keyframes detailSwitch{
	0%{
		opacity: 0;
	}
	1%{
		opacity: 1;
	}
	99%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

/*-----------------
右上ロゴ・右下コピーライト(pcのみ)
------------------*/
.pc-logo{
	width: 20%;
	max-width: 250px;
	position: absolute;
	top: 50px;
	right: 4.5%;
}

.pc-copyright{
	position: absolute;
	bottom: 30px;
	right: 30px;
	font-size: 14px;
}

/*-----------------
右中央ナビ(pcのみ)
------------------*/
.nav-wrapper{ 
	position: absolute;
	top: 350px;
	right: 5px;
	color: #9F3D3D;
}

@media screen and (min-width:1250px) {
	.nav-wrapper{
		padding-right: 10vw;
	}
}

.nav-ttl{
	font-size: 16px;
}

.nav-list{
	margin-top: 20px;
}

.nav-item{
	width: fit-content;
	margin-bottom: 12px;
	list-style-position: inside;
}

.nav-item::marker{
	font-size: clamp(14px,1.67vw,24px);
}

.nav-item:hover{
	opacity: 0.5;
}

.nav-item a{
	color: #9F3D3D;
	text-decoration: none;
	font-size: clamp(16px,1.67vw,24px);
}

.nav-item a.active {
  	border-bottom: 2px solid #9F3D3D;
  	transition: border-color 0.3s;
}

        
/*-----------------
中央にスマホ型スクロールエリア(pcのみ)
------------------*/
@media screen and (max-width:767px) {
	.phone-contents {
		max-height: 100vh;
		overflow-y: scroll;
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch; /* iOS対策 */
	}

	.section{
		max-height: 100vh;
		scroll-snap-align: center;
		text-align: center;
	}
}

@media screen and (min-width:768px) {
	.phone{
		width: 400px;
		height: 800px;
		border: 2px solid #9F3D3D;
		border-radius: 50px;
    	max-width: 450px;
		margin: 5vh auto 0;
		position: relative;
		overflow: hidden;
	}
	
	.phone-contents{
		height: 100%;
		overflow-y: scroll;
		scroll-snap-type: y mandatory; 
		scroll-behavior: smooth;
		-ms-overflow-style: none;  /* IE, Edgeでスクロールバー非表示 */
		scrollbar-width: none;     /* Firefox */
	}

	.phone-contents::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}

	.section{
		width: 400px;
		height: 800px;
		scroll-snap-align: start;
		text-align: center;
	}
}

@media screen and (max-width:400px) {
	.section{
		width: 100%;
	}
}


/*-----------------
sec01
------------------*/
#sec01{
	color: #9F3D3D;
	overflow: hidden;
	text-align: center;
}

#sec01 hgroup{
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	text-align: left;
}

#sec01 hgroup p{
	margin: 40px auto 10px 0;
	font-size: 14px;
	letter-spacing: 1.4px;
}

#sec01 hgroup img{
	width: 100%;
	height: auto;
	z-index: 1;
}

.sec01-icon-left{
	text-align: center;
	transform: translateX(-120px) rotate(-45deg);
}

.sec01-icon-right{
	transform: translateX(120px) rotate(10deg);
}

            .warp__placeholder{
                position: absolute;
                color: transparent;
                font-size: .1px;
            }
            
            .warp {
                display: block;
                position: relative;
                width: 396px;
                height: 50px;
				margin: -50px auto 0;
                font: normal 16px/1 ultra;
            }
            
            [class*='warp__'] {
                display: block;
                position: absolute;
            }
            
            .warp__0 {
                transform-origin: 50% 9px;
                transform: translate(44.4797px,69.1311px) rotate(-0.643029rad);
            }
            
            .warp__1 {
                transform-origin: 50% 9px;
                transform: translate(62.046499999999995px,57.465900000000005px) rotate(-0.530721rad);
            }
            
            .warp__2 {
                transform-origin: 50% 9px;
                transform: translate(80.9743px,47.6737px) rotate(-0.425486rad);
            }
            
            .warp__3 {
                transform-origin: 50% 9px;
                transform: translate(101.0564px,39.7577px) rotate(-0.326696rad);
            }
            
            .warp__4 {
                transform-origin: 50% 9px;
                transform: translate(121.32140000000001px,33.9043px) rotate(-0.236652rad);
            }
            
            .warp__5 {
                transform-origin: 50% 9px;
                transform: translate(142.2825px,29.8012px) rotate(-0.150721rad);
            }
            
            .warp__6 {
                transform-origin: 50% 9px;
                transform: translate(163.7547px,27.4514px) rotate(-0.06785rad);
            }
            
            .warp__7 {
                transform-origin: 50% 9px;
                transform: translate(184.7418px,26.8482px) rotate(0.010049rad);
            }
            
            .warp__8 {
                transform-origin: 50% 9px;
                transform: translate(205.8656px,27.875999999999998px) rotate(0.087021rad);
            }
            
            .warp__9 {
                transform-origin: 50% 9px;
                transform: translate(226.9609px,30.5372px) rotate(0.163965rad);
            }
            
            .warp__10 {
                transform-origin: 50% 9px;
                transform: translate(247.8623px,34.8343px) rotate(0.241739rad);
            }
            
            .warp__11 {
                transform-origin: 50% 9px;
                transform: translate(268.4044px,40.77px) rotate(0.321156rad);
            }
            
            .warp__12 {
                transform-origin: 50% 9px;
                transform: translate(288.4219px,48.3466px) rotate(0.402966rad);
            }
            
            .warp__13 {
                transform-origin: 50% 9px;
                transform: translate(307.7494px,57.566900000000004px) rotate(0.487825rad);
            }
            
            .warp__14 {
                transform-origin: 50% 9px;
                transform: translate(326.2216px,68.4332px) rotate(0.576261rad);
            }
            
            .warp__15 {
                transform-origin: 50% 9px;
                transform: translate(343.6731px,80.9481px) rotate(0.668617rad);
            }

.sec01-mv{
	display: block;
	margin: 0 auto 40px;
}

/*-----------------
sec02
------------------*/
#sec02{
	background: url("../img/sec02-mv.jpg") top center no-repeat,#153045;
	color: #FFF;
}

.sec02-item{
	margin-top: 382px;
}

#sec02 p:first-of-type{
	width: 280px;
	margin: 0 auto 10px;
	font-size: 14px;
}

.donuts-name{
	display: inline;
	padding: 5px 10px;
	font-size: 24px;
	border-bottom: 1px solid #333;
}

#sec02 .donuts-name{
	border-color: #FFF;
}

.donuts-price{
	font-size: 16px;
	margin: 13px auto 20px;
}

.donuts-alle{
	font-size: 16px;
	padding-bottom: 100px;
}


/*-----------------
sec03
------------------*/
#sec03{
	width: 100%;
	height: 800px;
	position: relative;
	text-align: center;
}

.paper{
	position: absolute;
    top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
	background: #FFF;
	width: 300px;
	height: 600px;
	box-shadow: 4px 4px 4px rgba(0,0,0,.25);
}

.tape{
	display: inline-block;
	transform: translateY(-25px);
}

.paper p{
	width: 233px;
	margin: 30px auto 0;
	font-size: 14px;
	text-align: left;
	line-height: 170%;
}

.paper span{
	color: #9F3D3D;
}

/*-----------------
sec04
------------------*/
#sec04{
	width: 100%;
	height: 800px;
	position: relative;
	text-align: center;
}

#sec04 .paper p{
	margin: 0 auto 30px;
}

/*-----------------
sec05
------------------*/
#sec05{
	width: 100%;
	height: 800px;
	position: relative;
	text-align: center;
}

/*-----------------
sec06
------------------*/
#sec06 {
 	position: relative;
  	overflow: hidden;
	width: 100%;
	height: 100%;
}

#bg {
  	position: absolute;
  	inset: 0;
  	width: 100%;
  	height: 100%;
  	object-fit: cover;
}

#overlay {
  	position: absolute;
  	inset: 0;
  	display: flex;
  	align-items: center;
  	justify-content: center;
  	background: #9F3D3D;
	user-select: none;
	cursor: none;
  	mask: radial-gradient(circle 70px at var(--x) var(--y), transparent 70px, #9F3D3D 70px);
  	-webkit-mask: radial-gradient(circle 70px at var(--x) var(--y), transparent 70px, #9F3D3D 70px);
}

#overlay:active{
	mask: radial-gradient(circle 150px at var(--x) var(--y), transparent 150px, #9F3D3D 150px);
  	-webkit-mask: radial-gradient(circle 150px at var(--x) var(--y), transparent 150px, #9F3D3D 150px);
}

#overlay img {
  	width: 250px;
	user-select: none;
	pointer-events: none;
}


/*-----------------
sec07
------------------*/
#sec07{
	background: url("../img/sec07-bg.png") top center no-repeat,#FEC1C6;
}

#sec07 img{
	display: block;
	margin: 0 auto;
}

.donuts-txt{
	width: 240px;
	margin: 0 auto;
	font-size: 14px;
	text-align: left;
}

#sec07 .donuts-txt{
	color: #B74876;
}

#sec07 .txt01{
	transform: translate(60px,100px);
}

#sec07 .txt02{
	transform: translate(-10px,-40px);
}

#sec07 .line01{
	transform: translate(-90px,80px);
}

#sec07 .line02{
	transform: translate(60px,-20px);
}

/*-----------------
sec08
------------------*/
#sec08{
	background: url("../img/sec08-bg.png") top center no-repeat,#FFF09C;
	padding-top: 80px;
}

#sec08 img{
	display: block;
	margin: 0 auto;
}

#sec08 .donuts-txt{
	color: #BF6612;
}

#sec08 .txt03{
	transform: translate(-30px,30px);
}

#sec08 .txt04{
	transform: translate(-60px,-40px);
}

#sec08 .line03{
	transform: translate(-70px,50px);
}

#sec08 .line04{
	transform: translate(50px,-20px);
}

/*-----------------
sec09
------------------*/
#sec09{
	background: #A8816E;
	padding-top: 80px;
}

#sec09 img{
	display: block;
	margin: 0 auto;
}

#sec09 .donuts-txt{
	color: #603813;
}

#sec09 .txt05{
}

#sec09 .txt06{
	width: fit-content;
	margin-top: -20px;
	margin-bottom: 40px;
	transform: translateX(100px);
}

#sec09 .line05{
	transform: translateX(-10px);
	margin-bottom: -50px;
}

#sec09 .line06{
	margin-top: -45px;
	transform: translateX(-10px);
}

/*-----------------
sec10
------------------*/
#sec10{
	background: url("../img/sec10-bg.png") top center no-repeat,#F9F6E8;
}

#sec10 img{
	display: block;
	margin: 0 auto;
}

#sec10 .donuts-txt{
	color: #594411;
}

#sec10 .txt07{
	width: fit-content;
	transform: translate(70px,100px);
}

#sec10 .txt08{
	transform: translate(-40px,-20px);
}

#sec10 .line07{
	transform: translate(-80px,80px);
}
	
#sec10 .line08{
	margin-top: -40px;
	transform: translateX(70px);
}

/*-----------------
sec11
------------------*/
#sec11{
	width: 100%;
	height: 800px;
	background: url("../img/sec11-bg.jpg") top center no-repeat,#EDEEF0;
}

#sec11 p{
	padding: 322px 0 30px;
	margin: 0 auto;
	font-size: 16px;
}

.viewall-btn{
	padding: 10px 20px;
	font-size: 24px;
	color: #000;
	border: 1px solid #000;
	text-decoration: none;
	transition: .5s;
	cursor: pointer;
	box-shadow: 1px 8px 4px #ccc;
}

.viewall-btn:hover,
.viewall-btn:active{
	border-radius: 50px;
	background: #000;
	color: #FFF;
}

/*-----------------
sec12
------------------*/
#sec12{
	width: 100%;
	height: 800px;
	position: relative;
	color: #9F3D3D;
	line-height: 170%;
}

#sec12 .paper{
	width: 320px;
	height: 650px;
}

#sec12 .map iframe{
	width: 78.1%;
}

.sec12-txt{
	text-align: left;
}

#sec12 ruby{
	display: inline-grid;
	grid-template-rows: auto auto;
	padding: 32px 93px 30px 32px;
	ruby-position: over; 
}

#sec12 rt{
	grid-row: 1;
	font-size: 10px;
}

#sec12 rb{
	grid-row: 2;
	font-size: 24px;
}

#sec12 address{
	display: block;
	font-size: 16px;
	padding-left: 32px;
	margin-bottom: 15px;
	font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    font-style: normal;
}

#sec12 p{
	font-size: 14px;
	margin: 0 auto 10px 32px;
	line-height: 1;
}

#sec12 small{
	display: inline-block;
	font-size: 16px;
	padding: 36px 17px;
}

.tape2{
	display: inline-block;
	transform: translateY(-25px);
}

/*-----------------
sec13
------------------*/
#sec13{
	width: 100%;
	height: 800px;
	padding: 70px 0 40px 0;
}

@media screen and (max-width:768px) {
	#sec13{
		padding: 40px 0;
	}
}

#sec13-start {
  	padding: 10px 20px;
  	background: #9F3D3D;
  	color: #fff;
	font-size: 24px;
  	cursor: pointer;
	transition: 0.5s;
}

#sec13-start:hover {
  	transform: scale(1.2);
}

#sec13-main {
 	display: flex;
  	flex-direction: column;
  	align-items: center;
  	gap: 30px;
	padding-top: 50px;
}

.sec13-panel img {
  	width: 120px;
  	height: 120px;
  	object-fit: contain;
  	cursor: pointer;
  	user-select:none;
	-webkit-user-select:none;	
	-webkit-user-drag:none;
	-moz-user-select:none;	
	-khtml-user-select:none;
	-khtml-user-drag:none;
}

#sec13 p{
	padding: 35px 0 20px 0;
}

#sec13 .viewall-btn{
	margin-top: 10px;
	box-shadow: none;
}

/*-----------------
sec14
------------------*/
#sec14{
	width: 100%;
	height: auto;
	background: #9F3D3D;
	color: #F4F2E9;
}

#sec14 .inner{
	margin: 0 auto;
	padding: 120px 45px 40px;
}

#sec14 .logo{
	padding: 0 5px;
	max-width: 400px;
}

#sec14 ul{
	margin-top: 100px;
}

#sec14 ul li{
	list-style: none;
	text-align: left;
	margin-bottom: 12px;
}

#sec14 ul li a{
	text-decoration: none;
	font-size: clamp(16px,5vw,24px);
	color: #F4F2E9;
}

#sec14 ul li:hover,
#sec14 ul li:active{
	opacity: 0.5;
}

.page-top{
	display: flex;
	justify-content: center;
	position: relative;
	width: 53px;
	height: 53px;
	margin: 0 0 0 auto;
	border: 1px solid #F4F2E9;
	border-radius: 50%;
	transition: 0.5s;
}

.page-top:hover{
	transform: scale(1.3);
}

.arrow{
	display: inline-block;
	position: absolute;
	top: 20px;
	width: 20px;
	height: 20px;
	border-top: 1px solid #F4F2E9;
	border-left: 1px solid #F4F2E9;
	transform: rotate(45deg);
}

.small-kakuu{
	display: inline-block;
	padding: 29px 0 45px 0;
	margin: 0 auto;
	font-size: clamp(14px,3.5vw,16px);
}

.copyright{
	display: block;
	font-size: 14px;
}