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

/*全体設定*/
body{
	background-color: #c5e5e7;
	color: #99b4c4;
	font-family: vdl-admin, sans-serif;
	font-style: normal;
	font-weight: 400;
	line-height: 1.3;
}
html{
	font-size: 10px;
}
h2{
	font-size: 2.5rem;
}
h3{
	font-size: 1.8rem;
}
p{
	font-size: 1.2rem;
}
a{
	color: #99b4c4;
}

img{
	width: 100%;
}
#wrap{
	width: 80%;
	margin: 0 auto;
}
/*----------------------------------------------------*/
/*header設定*/
header{
	background: url("img/headerimg.png");
	background-repeat: repeat-x;
	width: 100%;
	height: 10.0rem;
	background-position: bottom;
	background-size: contain;
}
header nav{
	display: flex;
	justify-content: space-between;
}
header .headericon{
	width: 25%;
}
.hamburger {
  position: absolute;
  top: 10px;
  right: 16px;
  z-index: 100;
	height: auto;
	
}
.hamburger_bar {
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  background: #99b4c4;
  transition: top 0.24s, transform 0.24s, opacity 0.24s;
}
.nav {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 99;
  background: rgba(153,180,196,0.86);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  opacity: 0;
  transition: opacity 0.24s;
  pointer-events: none;
}

.nav.is_active {
  opacity: 1;
  pointer-events: auto;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  color: #fff;
}
.nav-list li:first-child{
	margin-top: 30%;
}

/* リセットCSS */
button {
  border-color: transparent;
  background: transparent;
  cursor: pointer;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}
/*----------------------------------------------------*/
/*footer設定*/
footer{
	background: url("img/footerimg4.png");
	background-repeat: repeat-x;
	width: 100%;
	height: 10.0rem;
	background-position: top;
	background-size: contain;
}
#footer{
	padding: 10% 0;
}
/*footernav1*/
footer .footericon{
	width: 15%;
}
footer .footernav1{
	display: flex;
}
footer .footernav1 ul{
	display: flex;
	width: 100%;
	justify-content: center;
}
footer .footernav1 ul li{
	display: inline-block;
  　width: 20%;
  　margin: 0 10px;
	font-size: 1.2rem;
	margin: auto 2%;
}
footer .footernav1 ul li:first-child{
	color: #99b4c4;
}
footer .footernav1 ul li .access{
	display: block;
    padding: 10px;
	background: #fff;
	border-radius: 8px;
    color: #99b4c4;
    text-decoration: none;
}
footer .footernav1 ul li:last-child{
	color: #fff;
}
footer .footernav1 ul li .inquiry{
	display: block;
    padding: 10px;
	background: #99b4c4;
	border-radius: 8px;
    color: #fff;
    text-decoration: none;
}
/*footernav2*/
footer .footernav2{
	margin: 5%;
}
footer .footernav2 ul{
	text-align: center;
}
footer .footernav2 ul li{
	padding: 0.5rem;
}
footer p{
	text-align: center;
	color: #99b4c4;
	font-size: 0.8rem;
}
span {
	display: inline-block;
	}
/*----------------------------------------------------*/
/*全体main設定*/
/*----------------------------------------------------*/
#pagetop{
	position: fixed;
    bottom: 2%;
    right: 2%;
}
.pagetop{
	width: 50px;
	height: 50px;
	background: url("img/toppagetop.png");
	background-size: contain;
	background-repeat: no-repeat;
}
.pagetop:hover{
	background: url("img/toppagetophover.png");
	width: 50px;
	height: 50px;
	background-size: contain;
	background-repeat: no-repeat;
}



/*----------------------------------------------------*/
/*top.menu.Commitment設定*/
/*----------------------------------------------------*/
body#top main img,body#menu main img{
	width: 50%;
}
body#top main .topRabbit1,body#menu main .topRabbit1,body#Commitment main .topRabbit1{
	width: 70%;
}
body#top main .flex,body#menu main .flex,body#Commitment main .flex{
	text-align: center;
	margin: 10% auto;
}
body#top main .pc,body#menu main .pc,body#Commitment main .pc{
	display: none;
}
body#top main ul,body#menu main ul,body#Commitment main ul{
	text-align: center;
}
body#top main h2,body#menu main h2,body#Commitment main h2{
	text-align: center;
	margin: 3.0rem;
}
body#top main li,body#menu main li,body#Commitment main li{
	padding: 2.5rem;
}
body#top menu p,body#menu main p,body#menu main p{
	font-size: 1.2rem;
}
body#top main .menu1,body#Commitment main .menu1{
	margin: 20% 0;
	margin-bottom: 10%;
}
body#top main .menu2,body#menu main .menu2,body#Commitment main .menu2{
	margin-bottom: 30%;
}
body#top main p{
	margin: 3%;
}



/*----------------------------------------------------*/
/*menu設定*/
/*----------------------------------------------------*/
body#menu main img{
	width: 80%;
}
body#menu main h3{
	margin: 3%;
}
body#menu main .flexcake .flexcake1{
	background-color: rgba(153,180,196,0.60);
	border-radius: 50%;
	width: 200px;
	height: 200px;
	margin: 0 auto;
	bottom: 10px;
	position: relative;
}
body#menu main .flexcake .flexcake2{
	border: 3px solid rgba(153,180,196,0.60);
	border-radius: 50%;
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform: translate(-50% -50%);
	transform-origin: center center;
}

body#menu main .cakeimg{
	transform: translateY(12%);
}
body#menu main .cakeimg2{
	transform: translateY(22%);
}
body#menu main .btn--1,
body#menu main a.btn--1 {
  display: inline-block;
  color: #fff;
  background-color: #99b4c4;
  border-radius: 10%;
  padding: 3% 5%;
  margin: 5%;
  margin-bottom: 0;
}
body#menu main .btn--1:hover,
body#menu main a.btn--1:hover {
  color: #fff;
  background:  #ADCBDD;
}
body#menu main .btn--2,
body#menu main a.btn--2 {
  display: inline-block;
  color: #99b4c4;
  background-color: #fff;
  border-radius: 10%;
  padding: 3% 5%;
  margin: 5%;
  margin-left: 0;
  margin-bottom: 0;
}
body#menu main .btn--2:hover,
body#menu main a.btn--2:hover {
  color: #fff;
  background:  #ADCBDD;
}



/*----------------------------------------------------*/
/*Commitment設定*/
/*----------------------------------------------------*/
body#Commitment main img{
	width: 80%;
}
body#Commitment main .flex{
	display: flex;
}
body#Commitment main .menu2{
	margin: 50% auto;
	width: 80%;
}
body#Commitment main .background{
	display: inline-block;
	background: #fff;
	border-radius: 5%;
	padding: 2% 5%;
	margin: 0 auto;
}
body#Commitment main .padding0{
	padding: 0;
}
body#Commitment main .right{
	text-align: right;
}
body#Commitment main .left{
	text-align: left;
}
body#Commitment main .margin{
	margin: 5%;
}
body#Commitment main .margintop{
	margin-top: 7%;
}
body#Commitment main .margin0{
	margin: 0;
}
body#Commitment main .h2{
	text-align: center;
	margin: 5%;
}
body#Commitment main p{
	margin: 3%;
}



/*----------------------------------------------------*/
/*information設定*/
/*----------------------------------------------------*/
body#information main{
	text-align: center;
}
body#information main table{
	margin: 5% auto;
	width: 80%;
}
body#information main table th:nth-child(2){
	line-height: 2.0;
	text-align: left;
}
body#information main th{
	font-size: 1.2rem;
	border: 1px solid #99b4c4;
}
body#information main h2{
	margin: 5%;
}
body#information main .menu{
	background: rgba(255,255,255,0.80);
	width: 80%;
	margin: 5% auto;
	padding: 3%;
	border-radius: 8%;
}



/*----------------------------------------------------*/
/*form設定*/
/*----------------------------------------------------*/
body#form h2{
	font-size: 2.5rem;
	text-align: center;
	margin: 2.0rem;
}
body#form h2::after,body#form h2::before{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 2.0rem;
    height: 2.0rem;
    background-image: url("img/decoration1.png");
    background-size: contain;
    vertical-align: middle;
	background-repeat: no-repeat;
}
body#form h3{
	font-size: 1.8rem;
}
body#form p{
	font-size: 1.2rem;
}
.box_con04 {
  max-width: 900px;
  margin: 0  auto;
  
}
.box_con04 form {
  width: 100%;
}
.box_con04 form ul {
  width: 100%;
}
.box_con04 form ul li {
  position: relative;
  overflow: hidden;
  border: 2px solid #99b4c4;
  margin: 0.5em 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

@media print {
  .box_con04 form ul li {
    display: -webkit-flex;
    display: flex;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }
}
.ie8 .box_con04 form ul li {
  display: -webkit-flex;
  display: flex;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  border-radius: 20px;
}
.box_con04 form ul li .title {
  position: relative;
  width: 30%;
  font-weight: normal;
  padding: 1em;
  position: relative;
  color: #fff;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
@media print {
  .box_con04 form ul li .title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
}
.ie8 .box_con04 form ul li .title {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.box_con04 form ul li .title:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #99b4c4;
  z-index: 0;
}
.box_con04 form ul li .title em {
  position: relative;
  z-index: 1;
}
.box_con04 form ul li .title span {
  background: #c94849;
  padding: 0 .3em;
  color: #fff;
  margin-left: .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box_con04 form ul li .box_det {
  width: 70%;
  position: relative;
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.box_con04 form ul li .box_br {
  display: block;
}
.box_con04 form ul li select, .box_con04 form ul li textarea, .box_con04 form ul li .wide {
  width: 100%;
  height: 5rem;
  padding: .5em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #99b4c4;
}
.box_con04 form ul li textarea {
  height: 10em;
}

/*プライバシーのデザインcss↓*/
.con_pri {
  max-width: 700px;
  margin: 0  auto;
}
.con_pri .box_pri {
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #99b4c4;
  background: #f7f7f7;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px 55px;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .con_pri .box_pri {
    padding: 4%;
  }
}
.con_pri .box_pri .box_tori {
  text-align: left;
  margin-top: 40px;
}
.con_pri .box_pri .box_tori h4 {
  font-weight: normal;
  margin-bottom: 30px;
}
.con_pri .box_pri .box_num h4 {
  font-weight: normal;
}
.con_pri .box_pri .box_num .txt {
  padding: 10px 0 0 20px;
}
.box_check {
  text-align: center;
  margin: 1em auto;
}
.box_check label {
  display: inline-block;
}
.box_check label span {
  margin-left: 0.3em;
}
.btn {
  text-align: center;
}
.btn input {
  display: inline-block;
  background: #fff;
  padding: .5em 4em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid #fff;
	border-radius: 20px;
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
	color: #99b4c4;
	font-size: 1.5rem;
}
.btn input:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
	.con_pri {
    width: 95%;
  	}
  	.con_pri .box_pri .box_num .txt {
    padding: 3% 0 0 3%;
  	}
  .con_pri .box_pri .box_tori h4 {
    margin-bottom: 4%;
  }
.con_pri .box_pri .box_tori .txt {
  padding: 0 20px;
}
  .con_pri .box_pri .box_tori .txt {
    padding: 0;
}
.con_pri .box_pri .box_num {
 	 margin-top: 30px;
}
  .con_pri .box_pri .box_num {
    margin-top: 5%;
  }
  .box_con04 {
    width: 95%;
  }
  .con_pri .box_pri {
    margin-top: 4%;
    padding: 3%;
  }
  .con_pri .box_pri .box_tori {
    margin-top: 4%;
  }
  .box_con04 form ul li .box_det {
    padding: 1.5em .5em;
    display: block;
    width: 100%;
  }
  .box_con04 form ul li .title {
    text-align: center;
    width: 100%;
    display: block;
    background: rgba(0, 0, 0, 0.2);
    padding: .8em .2em;
  }
  .box_con04 form ul li .title {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
  }
  .box_con04 form ul li {
    display: -webkit-flex;
    display: flex;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
  }
select{
	color: #99b4c4;
}
.box_con04{
	padding: 3% 0;
}
.box_check{
	padding: 3% 0;
}
::placeholder {
  color: #C5E5E7;
}
/* 旧Edge対応 */
::-ms-input-placeholder {
  color: #C5E5E7;
}
/* IE対応 */
:-ms-input-placeholder {
  color: #C5E5E7;
}
.font-weight{
	font-weight: 600;
}




/*----------------------------------------------------*/
/*レスポンシブ設定*/
/*----------------------------------------------------*/
/*タブレット*/
@media screen and (min-width:640px) and (max-width:959px){
	/*全体設定*/
	#wrap{
		max-width: 900px;
		width: 100%;
		margin: 0 auto;
	}
	h2{
	font-size: 3.0rem;
	}
	h3{
		font-size: 2.5rem;
	}
	p{
		font-size: 2.5rem;
	}
	li{
		font-size: 1.8rem;
	}
	#pagetop {
    width: 18%;
	height: 18%;
	}
	.pagetop{
	width: 100px;
	height: 100px;
	}
	.pagetop:hover{
	width: 100px;
	height: 100px;
	}
	/*header設定*/
	header{
	height: 15.0rem;
	}
	header .headericon{
	width: 35%;
	}
	/*footer設定*/
	.access,.inquiry{
		font-size: 2.8rem;
	}
	.copyright{
		font-size: 1.2rem;
	}
	
	
	/*top設定*/
	body#top main .flex{
	display: flex;
	}
	body#top main .sp,body#Commitment main .sp{
		display: none;
		white-space: nowrap;
	}
	body#top main .pc,body#Commitment main .pc{
		display: block;
		white-space: nowrap;
	}
	
	/*menu設定*/
	body#menu main img{
	width: 95%;
	}
	body#menu main .flexcake .flexcake1{
	width: 300px;
	height: 300px;
	}
	body#menu main .flexcake .flexcake2{
	width: 300px;
	height: 300px;
	}
	
	/*information設定*/
	body#information main th{
	font-size: 1.8rem;
	}

	
	/*form設定*/
	
	body#form .box_con04 p{
		font-size: 1.7rem;
	}
	body#form .box_con04 .box_pri p{
		font-size: 1.5rem;
	}
	body#form .box_con04 .check{
		font-size: 1.5rem;
	}
	.box_con04 form ul li select, .box_con04 form ul li textarea, .box_con04 form ul li .wide {
	font-size: 1.8rem;
	}

}
/*ノートPC*/
@media screen and (min-width:960px) and (max-width:1279px){
	/*全体設定*/
	#wrap{
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}
	h2{
	font-size: 4.0rem;
	}
	h3{
		font-size: 2.8rem;
	}
	p{
		font-size: 3.0rem;
	}
	li{
		font-size: 2.5rem;
	}
	#pagetop{
    right: 1%;
	}
	.pagetop{
	width: 90px;
	height: 90px;
	}
	.pagetop:hover{
	width: 90px;
	height: 90px;
	}
	/*header設定*/
	header{
	height: 20.0rem;
	}
	header .headericon{
	width: 45%;
	}	
	/*footer設定*/
	footer{
		height: 25.0rem;
	}
	footer .footericon{
	width: 10%;
	}
	.access,.inquiry{
		font-size: 3.0rem;
	}
	footer .footernav2 ul{
	display: flex;
	justify-content: center;
	}
	.footernav2 ul li{
		margin: 0 20px;
		width: 15%;
	}
	.footernav2 ul li:last-child{
		width: 40%;
	}
	footer .footernav2 ul li{
		font-size: 2.0rem;
	}
	footer .footernav2 ul li::before{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("img/decoration1.png");
    background-size: contain;
    vertical-align: middle;
	background-repeat: no-repeat;
	}
	footer .footernav2 ul li::after{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("img/decoration1.png");
    background-size: contain;
    vertical-align: middle;
	background-repeat: no-repeat;
	}
	.copyright{
		font-size: 1.2rem;
	}
	
	
	/*top.menu設定*/
	body#top main .flex,body#menu main .flex{
	display: flex;
	}
	body#top main li{
	padding: 2.5rem 0;
	}
	body#top main .sp,body#menu main .sp{
		display: none;
	}
	body#top main .pc,body#menu main .pc{
		display: block;
	}
	body#top main .menu .flexcake,main .menu .flexsweets,body#menu main .flexcake{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	body#top main .menu .flexcake li,main .menu .flexsweets li{
		flex-basis: 50%;
	}
	
	
	
	/*menu設定*/
	body#menu main img{
	width: 95%;
	}
	body#menu main .flexcake .flexcake1{
	width: 400px;
	height: 400px;
	}
	body#menu main .flexcake .flexcake2{
	width: 300px;
	height: 300px;
	}
	body#menu main{
		display: block;
		margin: 0 auto;
	}
	body#menu main .flexcake li{
		flex-basis: 40%;
	}
	
	/*information設定*/
	body#information main th{
	font-size: 2.0rem;
	}
	
	
	/*form設定*/
	.box_con04 form ul li select, .box_con04 form ul li textarea, .box_con04 form ul li .wide {
	font-size: 2.0rem;
	}

	body#form .box_con04 p{
		font-size: 1.7rem;
	}
	body#form .box_con04 .box_pri p{
		font-size: 1.5rem;
	}
	body#form .box_con04 .check{
		font-size: 1.6rem;
	}
}
/*ノートPC2*/
@media screen and (min-width:960px) and (max-width:1056px){
	footer .footernav2 ul li{
		font-size: 1.7rem;
	}
}
/*デスクトップPC*/
@media screen and (min-width: 1280px){
	/*全体設定*/
	#wrap{
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
	}
	h2{
	font-size: 5.0rem;
	}
	h3{
		font-size: 3.5rem;
	}
	p{
		font-size: 3.5rem;
	}
	li{
		font-size: 2.0rem;
	}
	#pagetop{
    right: 1%;
	}
	.pagetop{
	width: 120px;
	height: 120px;
	}
	.pagetop:hover{
	width: 120px;
	height: 120px;
	}
	/*header設定*/
	header{
	height: 20.5rem;
}
	header .headericon{
	width: 50%;
	}
	.nav {
   	align-items: center;
}
	/*footer設定*/
	footer{
		height: 30.0rem;
	}
	footer .footericon{
	width: 10%;
	}
	.access,.inquiry{
		font-size: 4.5rem;
	}
	footer .footernav2 ul{
		display: flex;
		justify-content: center;
	}
	footer .footernav2 ul li{
		margin: 0 20px;
		width: 15%;
		font-size: 2.5rem;
	}
	.footernav2 ul li:last-child{
		width: 40%;
	}
	footer .footernav2 ul li::before{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 1.76rem;
    height: 1.76rem;
    background-image: url("img/decoration1.png");
    background-size: contain;
    vertical-align: middle;
	background-repeat: no-repeat;
	}
	footer .footernav2 ul li::after{
	content: '';/*何も入れない*/
    display: inline-block;
    width: 1.76rem;
    height: 1.76rem;
    background-image: url("img/decoration1.png");
    background-size: contain;
    vertical-align: middle;
	background-repeat: no-repeat;
	}
	.copyright{
		font-size: 1.8rem;
	}
	
	
	/*top設定*/
	body#top main .flex{
	display: flex;
	}
	body#top main li{
	padding: 2.5rem 0;
	}
	body#top main .sp{
		display: none;
	}
	body#top main .pc{
		display: block;
	}
	body#top main .menu .flexcake,main .menu .flexsweets{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	body#top main .menu .flexcake li,main .menu .flexsweets li{
		flex-basis: 50%;
	}
	
	/*menu設定*/
	body#menu main img{
	width: 95%;
	}
	body#menu main .flex{
	display: flex;
	}
	body#menu main li{
	padding: 2.5rem 0;
	}
	body#menu main .sp{
		display: none;
	}
	body#menu main .pc{
		display: block;
	}
	body#menu main .menu .flexcake{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
	body#menu main .menu .flexcake li{
		flex-basis: 50%;
	}
	body#menu main .flexcake .flexcake1{
	width: 300px;
	height: 300px;
	}
	body#menu main .flexcake .flexcake2{
	width: 300px;
	height: 300px;
	}
	
	
	/*information設定*/
	body#information main th{
	font-size: 2.0rem;
	}
	
	
	/*form設定*/
	.box_con04 form ul li select, .box_con04 form ul li textarea, .box_con04 form ul li .wide {
	font-size: 2.0rem;
	}

	body#form .box_con04 p{
		font-size: 2.0rem;
	}
	body#form .box_con04 .box_pri p{
		font-size: 1.7rem;
	}
	body#form .box_con04 .check{
		font-size: 1.7rem;
	}
}