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

/*--------⊳【 header 】 */
.grad-top{
	background: repeating-linear-gradient(77deg, #F3DB19, #F3DB19 10px, #70BDA5 10px,#70BDA5 20px);
	height: 20px;
}

/*--------⊳【 topview 】 */
#topview .logo{
	width: 50px;
	height: auto;
}
.titles{
	color: #FF7043;
	line-height: 1.0em;
}
.maintitle{
	font-family:  "Fascinate", system-ui;
}
h1{
	font-size: 100px;
}
.kuma{
	width: 250px;
	height: auto;
}
/*top背景装飾マル*/
.round-point{
	position: relative;
	width: 80%;
	height: auto;
}
.round-base{
 	 background-size: cover;
	position: absolute;
	z-index: -5;
 	 overflow: hidden;
}
.round-pink {
  	width: 550px;
  	height: 500px;
 	 border-radius: 49% 51% 63% 37% / 47% 43% 57% 53% ;
 	 background-color: #ECBCAE;
	top: -1000px;
	left: 50%;
	transform: translateX(-80%);
 	 animation: round_animeP 15s linear infinite;

}
@keyframes round_animeP {
    0% { border-radius: 49% 51% 63% 37% / 47% 43% 57% 53%;}
   25% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
   50% { border-radius: 70% 30% 30% 70% / 50% 70% 30% 50%;}
   75% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;}
  100% { border-radius: 49% 51% 63% 37% / 47% 43% 57% 53%;}
}
@media screen and (min-width: 424px){
.round-blue {
  	width: 300px;/*280px;*/
  	height: 380px;/*300px;*/
 	 border-radius: 49% 51% 45% 55% / 50% 51% 49% 50%  ;
 	 background-color: #5185C6;
	top: -600px;
	right: 50%;
	transform: translateX(70%);
	animation: round_animeB 15s linear infinite;
	}
}
@keyframes round_animeB {
    0% { border-radius: 49% 51% 45% 55% / 50% 51% 49% 50%;}
   25% { border-radius: 49% 51% 45% 55% / 55% 43% 57% 45% ;}
   50% { border-radius: 49% 51% 45% 55% / 60% 32% 68% 40% ;}
   75% { border-radius: 49% 51% 45% 55% / 60% 59% 41% 40% ;}
  100% { border-radius: 49% 51% 45% 55% / 50% 51% 49% 50%;}
}


/*--------⊳【 aisatsu 】 */
#aisatsu{
	background-color: #ECBCAE;
}
.aisatsu-text,.kodawari-point,.kodawari-text,.aisatsu-img{
	width: 305px;
}
.aisatsu-text{
  background-image: radial-gradient(circle, #f3db19 5.5px, transparent 5.5px), radial-gradient(circle, #f3db19 5.5px, transparent 5.5px), radial-gradient(circle, #f3db19 5.5px, transparent 5.5px), radial-gradient(circle, #f3db19 5.5px, transparent 5.5px);
  background-position: left top, right top, left bottom, left top;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
  background-size: 11px 11px, 11px 11px, 11px 11px, 11px 11px;
	/*border: 8px dotted #F3DB19;*/
	border-radius: 15px;
	padding: 20px;
	box-sizing: border-box;
}
.tenpo{
	font-family: "Capriola", sans-serif;
}
.aisatsu-text span:nth-child(2){
	font-family: "Fascinate", system-ui;
}
.aisatsu-tori,.aisatsu-kuma{
	display: block;
}
.aisatsu-tori{
	width: 230px;
	height: auto;
}
.aisatsu-kuma{
	margin-left: auto;
	margin-right: 0;
	width: 135px;
	height: 192px;
	object-fit: cover;
	object-position: left top;
	z-index: 5;
}
/* 区切り線 */
.box {
  --mask: radial-gradient(45px at 50% 45px,#0000 97%,#000) 50% -45px/ 83.25px 100%;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

/*--------⊳【 item 】 */
#item{
	background: url("../img/bgTree.svg")center;
	background-repeat: repeat-y;
	background-position: center top;
	background-size: 120px;
}
.titleLine{
	width: 250px;
	border-bottom: 2px solid #0C4791;
	border-top: 2px solid #0C4791;
	padding: 10px 0;
}
.itemG{
	display: inline-block;
	position: relative;
}
.itempackage{
	width:270px;
	height: auto;
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
}


/*--------⊳【 kodawari 】 */
/* 背景色とお花 */
#kodawari{
	background-image: url("../img/kodawari-flower1.svg"), url("../img/kodawari-flower2.svg"), url("../img/kodawari-flower3.svg");
	background-repeat: no-repeat, no-repeat, no-repeat;
	background-position: -30px 200px, 550px 60%, 200px 100%; /* →DP [ 0 14%, 80% 100%] */
	background-color: #E6CBB0;
}
.kodawari-img{
	width: 200px;
}
.kodawari-text{
	background-color:rgba(255,255,255,0.4);
	border-radius:5px;
	padding:5px;
	box-sizing: border-box;
}
/* 区切り線 top */
.curved-top {
  position: relative;
  background: #70BDA5;
  height: 20vh;
}
.curved-top::after {
  content: '';
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #E6CBB0;
  height: 100%;
}
/* 区切り線 bottom */
.curved-bottom {
  position: relative;
  background: #E6CBB0;
  height: 20vh;
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}



/*--------⊳【 footer 】 */
footer,footer a{
	color: #0C4791;
}
.mainnav{
	font-size: 24px;
}
.sabnav{
	font-size: 16px;
}
.footer-logo{
	width: 50px;
	height: auto;
}
footer h2{
	font-size: 40px;
}
footer .sabtitle,.infoSite,.infoTel{
	font-size: 13px;
}
.infoSite{
	display: inline-block;
	border: 1px solid #0C4791;
	padding: 5px 10px;
}
.infoSite:hover,.infoSite:active{
	background: #0C4791; 
	border-radius: 10px;
	color: #fff;
}
.sen{
	border-bottom: 0.5px solid #0C4791;
	width: 70%;
}
.kakuu{
	padding: 0 10px;
}
.copy{
	font-size: 90%;
}
/* snsIcon */
.sns{
  margin-bottom: 15px;
  text-align: center;
}
.sns li{
  display: inline-block;
}
.sns a{
  display: block;
  padding: 10px 5px;
  color: #0C4791;
  border-radius: 5px;
  text-decoration: none;
  font-size: 24px; 
}
.sns a:hover{
  opacity: 0.7;
}


@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?du3t2p');
  src:  url('fonts/icomoon.eot?du3t2p#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?du3t2p') format('truetype'),
    url('fonts/icomoon.woff?du3t2p') format('woff'),
    url('fonts/icomoon.svg?du3t2p#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-facebook:before {
  content: "\ea90";
}
.icon-instagram:before {
  content: "\ea92";
}
.icon-youtube:before {
  content: "\ea9d";
}

.toHOME:hover,.toHOME:active{
	opacity: 0.7;
}


/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
		下層PのCSS
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
.PD-W320{	
	max-width: 320px;
}
#kasou-top .maintitle{
	font-size: 32px;
}
#kasou-top .sabtitle{
	font-size: 13px;
}
.G-bg{
	position: absolute;
	top: 80px;
	left: 0;
	z-index: 5;
}
.B-bg{
	position: absolute;
	top: 90px;
	left: 0;
	z-index: 4;
}
#kasou-top .kasou-toplogo{
	position: absolute;
	top: 40px;
	left: 20px;
	z-index:10;
}
#kasou-top .topname{
	position: absolute;
	top: 40px;
	right: 20px;
	z-index:10;
}
.kasou-toplogo{
	width: 40px;
	height: auto;
}
/* story */
.tsuzuki{
	padding-right: 2em;
	position: relative;
	top: 1.1em;
	z-index: 1;
	font-size: 95%;
	color: #ecbcae;
	font-family: "Kiwi Maru", serif;
}
.yajirushi {
  position: relative;
  display: inline-block;
  width: 140px;
  height: 1px;
  margin-top: 13.5px;
  border-radius: 9999px;
  background-color: #ecbcae;
}
.yajirushi::before {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 20px;
  height: 1px;
  border-radius: 9999px;
  background-color: #ecbcae;
  transform: rotate(45deg);
  transform-origin: calc(100% - 0.5px) 50%;
}
.open-button:hover .yajirushi,.open-button:active .yajirushi,.open-button:hover .yajirushi::before,.open-button:active .yajirushi::before{
	transition: 0.5s;
	opacity: 0.7;
}
#story .tsuzuki:hover,#story .tsuzuki:active{
	opacity: 0.7;
}
*:popover-open {
  padding: 1rem;
  max-width: 320px;
	margin: 30px auto;
	border: 1px solid #70BDA5;
	background-color: rgba(112, 189, 165, 0.85);
	color: #E6CBB0;
	font-size: 16px;
}
*:popover-open .mw-title{
	border-bottom: 1px solid #E6CBB0;
	width: 13em;
	margin-bottom: 1em;
}
*::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}
button {
  border: none;
  cursor: pointer;
  overflow: visible;
  background: transparent;
}
.close-button {
  background: #E6CBB0;
	padding: 5px 10px;
	color: #70BDA5;
	border-radius: 10px;
	margin-top: 10px;
}

/* intro */
.intro-text{
	background-color: rgba(255, 255, 255, 0.2);
	box-shadow: 1px 1px 30px 10px rgba(255, 255, 255, 0.3);
	border-radius: 30px;
	padding: 30px 50px;
	color: #0C4791;/*F3F9FF*/
	font-size: 120%;
	line-height: 1.8em;
	position: relative;
	z-index: 10;
}
.package-img{
	max-width: 320px;
	height: auto;
}

/* cookie-Contents */
.cookie-detail img{
	width: 95px;
	height: auto;
}
.cookie-detail p{
	width: 180px;
	display: grid;
 	place-items: center;
}

/* online */
.toOnline{
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
}
#online,#online a{
	color: #F3DB19;
}
.online-btn{
	padding: 10px 20px;
	border: 1px solid #F3DB19;
	display: inline-block;
}
#online .online-btn:hover,#online.online-btn:active{
	border-radius: 15px;
	background: #F3DB19;
	transition: 0.5s;
	color: #70BDA5;
	cursor: pointer;
}
.online-info{
	font-size: 70%;
}
#online{
	position: relative;
}
.G-bg-bottom{
	position: absolute;
	bottom:490px;
	left: 0;
	z-index: 5;
}
.B-bg-bottom{
	position: absolute;
	bottom:500px;
	left: 0;
	z-index: 4;
}

/* ===== 01kitsune ===== */
#kaso-kitsune #cookie-title,#kaso-kitsune #story,#kaso-kitsune #intro,#kaso-kitsune #cookie-Contents{
	color: #ECBCAE;
}
/* kitsune-bg */
.kitsune-bg{
	background-image: url("../img/kitsne-bg.png");
	background-size: cover;
}
/* cookie-title */
.gr-bg{
	height: 480px;
	background: rgb(253,116,197);
    background: linear-gradient(180deg, rgba(253,116,197,1) 0%, rgba(108,63,141,1) 70%, rgba(99,96,146,0.65) 86%, rgba(90,130,151,0.3) 100%);
	mix-blend-mode: soft-light;
	position: absolute;
	width: 100%;
}

/* ===== 02picnic ===== */
#kaso-picnic #cookie-title,#kaso-picnic #story,#kaso-picnic #intro,#kaso-picnic #cookie-Contents{
	color: #6C3F8D;
}
/* picnic-bg */
.picnic-bg{
	background-image: url("../img/picnic-bg.png");
	background-size: cover;
}
/* story */
.tsuzuki-pic{
	color: #6C3F8D;
}
.yajirushi-pic,.yajirushi-pic::before {
	background-color: #6C3F8D;
}
/* cookie-title */
.picnic-gr-bg{
	height: 480px;
	background: rgb(253,157,116);
	background: linear-gradient(180deg, rgba(253,157,116,0.71) 23%, rgba(184,146,131,0.54) 55%, rgba(139,138,140,0.42) 77%, rgba(90,130,151,0.3) 100%);
	mix-blend-mode: soft-light;
	position: absolute;
	width: 100%;
}

/* ===== 03fairy ===== */
#kaso-fairy #cookie-title,#kaso-fairy #story,#kaso-fairy #intro,#kaso-fairy #cookie-Contents{
	color: #5185C6;
}
/* fairy-bg */
.fairy-bg{
	background-image: url("../img/fairy-bg.png");
	background-size: cover;
}
/* story */
.tsuzuki-fairy{
	color: #5185C6;
}
.yajirushi-fairy,.yajirushi-fairy::before {
	background-color: #5185C6;
}
/* cookie-title */
/*kitsuneと同じ*/




/*
=================================
    　　☟　レスポンシブ対応のCSS　
=================================
*/
@media screen and (min-width: 769px){
	/*共通*/
	.DP-flex{
		display: flex;
	}
	
	.DP-W747{
		width: 747px;
		margin: 0 auto;
	}
	
/*--------⊳【 DP-top 】 */	
	.round-pink {
  	width: 600px;
  	height: 650px;
	}
	.round-blue {
  	width: 550px;
  	height: 500px;
	}
	.top-tree{
		display: block;
		position: absolute;
		width: 400px;
		height: auto;
	}
	.top-treeL{
		top: 30%;
		left: 50%;
		transform:translateX(-650px);
	}
	.top-treeR{
		top: 10%;
		right: 0;
		z-index: -1;
	}
	
/*--------⊳【 DP-aisatsu 】 */
	.DP-aisatsu{
		flex-direction: row-reverse;
	}
	.aisatsu-text{
		width: 480px;
		height: 100%;
		margin-top: 30px;
	}
	#aisatsu{
		background-position: 23% 60%;
	}
	.aisatsu-kuma{
		margin: 0;
		position: relative;
		left: 210%;
	}
	@media screen and (min-width: 1040px){
		.aisatsu-kuma{
			left: 260%;
		}
	}
	
/*--------⊳【 DP-item 】 */	
	#item{
		background-image: url("../img/bgTreeDP.svg");
		background-repeat: repeat;
		background-size: auto 280px;
		padding-top:50px;
		padding-bottom: 50px;
		position: relative;
	}
	.itemALL{
		padding-top: 0;
	}
	.itemG{
		margin-bottom: 100px;
	}
	.itempackage{
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
	}
	.itemlabel{
		padding-left:150px;
	}
/* 左右の装飾*/
	.mori{
		position: absolute;
	}
	.moriL{
		display: block;
		top: 5%;
		right: 50%;
		transform: translateX(-150px);
	}
	@media screen and (min-width: 1060px){
		#item h2{
			margin-bottom: 0;
		}
		.moriR{
			display: block;
			top: 60%;
			left: 50%;
			transform: translateX(330px);
		}
		.risu{
			display: block;
			 position: -webkit-sticky;
			  position: sticky;
			  top: 30%;
			  left: 50%;
			transform: translateX(250px);
			z-index: 1;
			width: 300px;
			height: auto;
			}
	}
	
	
/*--------⊳【 DP-kodawari 】 */
/* 背景色とお花 */
	#kodawari{
		background-position: 20% 30%, 90% 60%, 30% 100%; 
		padding-bottom: 100px;
	}
	.kodawariG,.kodawari-text{
		width: 210px;
	}
	.kodawari-img{
		width: 150px;
	}
	.kodawari-text{
		background-color: transparent;
	}
	.kodawari-point{
		margin-bottom: 50px;
	}
/*--------⊳【 DP-footer 】 */
	.infoSite,.sns{
		margin-bottom: 0;
	}
	.DP-info{
		padding-top: 1em;
	}
	.copy{
		margin-top: 100px;
	}
	.kodawariG{
		margin-bottom: 50px;
	}
	#kodawari .DP-flex{
		align-items: flex-end;
	}
	
/*＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
		下層PのCSS
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊*/
	#kasou-top .kasou-toplogo{
		top: 50px;
		left: 100px;
	}
	#kasou-top .topname{
		top: 50px;
		right: 100px;
	}
	#kasou-top .maintitle{
		font-size: 64px;
	}
	#kasou-top .sabtitle{
		font-size: 24px;
	}
	.kasou-toplogo{
		width: 50px;
	}
	
	/* cookie-title */
	.gr-bg{
		height: 600px;
	}
	#cookie-title h2{
		padding-top: 350px;
	}
	
	#cookie-Contents h3{
		margin-bottom: 20px;
	}
	.cookie-detail{	
		width: 160px;
		flex-wrap: wrap;
		margin-bottom: 20px;
	}
	.cookie-detail img{
		margin: 0 auto 10px;
	}

	.kasou-bg-decoG{
		position: relative;
	}
	.kasou-bg-deco{
		display: block;
		position: absolute;
		object-fit: cover;
		height: auto;
	}
/* ===== 01kitsune ===== */	
	.bg-deco-treeL{
		top: 600px;
		right: 50%;
		transform: translateX(-400px);
		width: 400px;
	}
	.bg-deco-treeR{
		top: 1200px;
		right: 50px;
		width: 200px;
	}
/* ===== 02picnic ===== */	
	.bg-deco-flowerL{
		top: 800px;
		right: 50%;
		transform: translateX(-300px);
		width: 300px;
	}
	.bg-deco-flowerR{
		top: 1300px;
		right: 50px;
		width: 180px;
	}
/* ===== 03fairy ===== */	
	.bg-deco-kumoL{
		top: 1000px;
		right: 50%;
		transform: translateX(-300px);
		width: 300px;
	}
	.bg-deco-kumoR{
		top: 1800px;
		right: 50px;
		width: 180px;
	}
	@media screen and (min-width: 1300px){
	.top-treeR{
		right: 50%;
		transform:translateX(650px);
	}
	.bg-deco-treeR{
		top: 900px;
		width: 396px;
		}
	.bg-deco-flowerR{
		top: 1500px;
		width: 300px;
		}
	.bg-deco-kumoR{
		top: 1500px;
		width: 250px;
		}
	}
	
}