@charset "utf-8";









/*===============================================

●画面の横幅が769px以上

===============================================*/

@media screen and (min-width : 769px ){

#pc------------------------------------------- {

}

body {

	background-color: #fffddb;

}

body img {

	width: 100%;

	height: auto;

}

.helo {

	width: 800px;

	margin-left: auto;

	margin-right: auto;

	padding-top: 40px;

}

.helo h1 {

}

.helo p {

	font-size: 32px;

	color: #0c1036;

	line-height: 1.6em;

}











.menusection {

	background-color: #19D5D4;

	margin-top: 70px;

	padding-top: 25px;

	padding-bottom: 45px;

}

.menusection h2 {

	width: 343px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 20px;

}

.menusection ul {

	display: flex;

	justify-content: center;

	gap: 10vw;

}

.menusection ul li {

	width: 206px;

}

.menusection ul li+li {

	width: 171px;

}

.menusection ul+h2 {

	width: 106px;

	margin-top: 55px;

}

.menusection ul+h2+ul li {

	width: 138px;

}

.menusection ul+h2+ul li+li {

	width: 169px;

}











.wagasa {

	padding-top: 50px;

	padding-bottom: 50px;

}

.wagasa h2 {

	width: 374px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 25px;

}

.wagasa .flex {

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 760px;

	margin-left: auto;

	margin-right: auto;

}

.wagasa .flex figure {

	width: 355px;

}

.wagasa .flex p {

	width: 368px;

	font-size: 32px;

	text-align: left;

	line-height: 1.8em;

	color: #0c1036;

}











.sasye {

	padding-top: 50px;

	padding-bottom: 50px;

}

.sasye h2 {

	width: 264px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 25px;

}

.sasye .flex {

	display: flex;

	justify-content: space-between;

	flex-direction: row-reverse;

	align-items: center;

	width: 760px;

	margin-left: auto;

	margin-right: auto;

}

.sasye .flex figure {

	width: 355px;

}

.sasye .flex p {

	width: 346px;

	font-size: 32px;

	text-align: left;

	line-height: 1.8em;

	margin-left: 40px;

	color: #0c1036;

}

.sasye .flex+p {

	font-size: 20px;

	color: #0c1036;

}











.negai {

	padding-top: 50px;

	padding-bottom: 50px;

	background-color: #ccf6f6;

}

.negai h2 {

	width: 317px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 25px;

}

.negai .flex {

	display: flex;

	justify-content: space-between;

	align-items: center;

	width: 760px;

	margin-left: auto;

	margin-right: auto;

}

.negai .flex figure {

	width: 355px;

}

.negai .flex p {

	width: 368px;

	font-size: 32px;

	text-align: left;

	line-height: 1.8em;

	color: #0c1036;

}











.satsuei {

	padding-top: 50px;

	padding-bottom: 50px;

	background-color: #ccf6f6;

}

.satsuei h2 {

	width: 577px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 25px;

}

.satsuei .flex {

	display: flex;

	justify-content: space-between;

	flex-direction: row-reverse;

	align-items: center;

	width: 760px;

	margin-left: auto;

	margin-right: auto;

}

.satsuei .flex figure {

	width: 355px;

}

.satsuei .flex p {

	width: 346px;

	font-size: 32px;

	text-align: left;

	line-height: 1.8em;

	margin-left: 40px;

	color: #0c1036;

}

.satsuei .flex+p {

	font-size: 20px;

	color: #0c1036;

}









#contact {

	color: #0A1335;

	padding-top: 80px;

	padding-bottom: 80px;

}

#contact ul {

	width: 760px;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 80px;

}

#contact ul li+li {

	margin-top: 30px;

}

#contact h2 {

	font-size: 60px;

	color: #0A1335;

	font-family: 'Noto Serif JP', serif;

}

#contact dl {

	text-align: left;

	width: 450px;

	margin-left: auto;

	margin-right: auto;

	margin-top: 40px;

	line-height: 1.9em;

}

#contact dl::after {

	content: ".";   

  display: block;   

  height: 0;   

  clear: both;   

  visibility: hidden;  

}

#contact dl dt {

	float: left;

	clear: left;

}

#contact dl dd {

	float: left;

}

#contact dl dd a {

	color: #0A1335;

	text-decoration: none;

}

#pagetop {

	text-align: right;

	margin-right: 50px;

	margin-top: -70px;

}

#pagetop img {

	width: 70px;

}



}







/*===============================================

●画面の横幅が768pxまで

===============================================*/

@media screen and (max-width:768px){

	

/*===============================================

●sp-tablet

===============================================*/

#sptablet------------------------------------------- {

}

body {

	background-color: #fffddb;

}

.helo h1 {

	margin-left: -4.9vw;

}

.helo p {

	font-size: 4.1026vw;

	color: #0c1036;

	line-height: 1.6em;

}











.menusection {

	background-color: #19D5D4;

	margin-top: 8.9744vw;

	padding-top: 3.2051vw;

	padding-bottom: 5.7692vw;

}

.menusection h2 {

	width: 43.9744vw;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 2.5641vw;

}

.menusection ul {

	display: flex;

	justify-content: center;

	gap: 10vw;

}

.menusection ul li {

	width: 26.4103vw;

}

.menusection ul li+li {

	width: 21.9231vw;

}

.menusection ul+h2 {

	width: 13.5897vw;

	margin-top: 7.0513vw;

}

.menusection ul+h2+ul li {

	width: 17.6923vw;

}

.menusection ul+h2+ul li+li {

	width: 21.6667vw;

}











.wagasa {

	padding-top: 6.4103vw;

	padding-bottom: 6.4103vw;

}

.wagasa h2 {

	width: 47.9487vw;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 3.2051vw;

}

.wagasa .flex {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.wagasa .flex figure {

	width: 45.5128vw;

}

.wagasa .flex p {

	width: 47.1795vw;

	font-size: 4.1026vw;

	text-align: left;

	line-height: 1.8em;

	color: #0c1036;

}











.sasye {

	padding-top: 6.4103vw;

	padding-bottom: 6.4103vw;

}

.sasye h2 {

	width: 33.8462vw;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 3.2051vw;

}

.sasye .flex {

	display: flex;

	justify-content: space-between;

	flex-direction: row-reverse;

	align-items: center;

}

.sasye .flex figure {

	width: 45.5128vw;

}

.sasye .flex p {

	width: 44.3590vw;

	font-size: 4.1026vw;

	text-align: left;

	line-height: 1.8em;

	margin-left: 5.1282vw;

	color: #0c1036;

}

.sasye .flex+p {

	font-size: 2.5641vw;

	color: #0c1036;

}











.negai {

	padding-top: 6.4103vw;

	padding-bottom: 6.4103vw;

	background-color: #ccf6f6;

}

.negai h2 {

	width: 40.6410vw;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 3.2051vw;

}

.negai .flex {

	display: flex;

	justify-content: space-between;

	align-items: center;

}

.negai .flex figure {

	width: 45.5128vw;

}

.negai .flex p {

	width: 47.1795vw;

	font-size: 4.1026vw;

	text-align: left;

	line-height: 1.8em;

	color: #0c1036;

}











.satsuei {

	padding-top: 6.4103vw;

	padding-bottom: 6.4103vw;

	background-color: #ccf6f6;

}

.satsuei h2 {

	width: 73.9744vw;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 3.2051vw;

}

.satsuei .flex {

	display: flex;

	justify-content: space-between;

	flex-direction: row-reverse;

	align-items: center;

}

.satsuei .flex figure {

	width: 45.5128vw;

}

.satsuei .flex p {

	width: 44.3590vw;

	font-size: 4.1026vw;

	text-align: left;

	line-height: 1.8em;

	margin-left: 5.1282vw;

	color: #0c1036;

}

.satsuei .flex+p {

	font-size: 2.5641vw;

	color: #0c1036;

}













#contact {

	color: #fff;

	padding-top: 7vw;

	padding-bottom: 7vw;

	color: #0A1335;

}

#contact ul {

	width: 90%;

	margin-left: auto;

	margin-right: auto;

	margin-bottom: 8vw;

}

#contact ul li+li {

	margin-top: 4vw;

}

#contact h2 {

	font-size: 6.41025641026vw;

	font-family: 'Noto Serif JP', serif;

	font-weight: 500;

}

#contact dl {

	text-align: left;

	width: 90%;

	margin-left: auto;

	margin-right: auto;

	margin-top: 2vw;

}

#contact dl::after {

	content: ".";   

  display: block;   

  height: 0;   

  clear: both;   

  visibility: hidden;  

}

#contact dl dt {

	float: left;

	clear: left;

	font-weight: 500;

}

#contact dl dd {

	float: left;

	font-weight: 500;

}

#contact dl dd a {

	color: #0A1335;

	text-decoration: none;

}

#pagetop {

	text-align: right;

	margin-right: 5vw;

	margin-top: 10vw;

}

#pagetop img {

	width: 8.97435897436vw;

}

}







/*===============================================

●画面の横幅が400pxまで

===============================================*/

@media screen and (max-width:400px){

/*===============================================

●sp400

===============================================*/

#sp400------------------------------------------- {

}

}







/*===============================================

●画面の横幅が320pxまで

===============================================*/

@media screen and (max-width:320px){

/*===============================================

●sp320

===============================================*/

#sp320------------------------------------------- {

}

}







/*===============================================

●画面の横幅が481pxから768pxまで

===============================================*/

@media screen and (min-width:481px) and (max-width:768px) {

/*===============================================

●tablet

===============================================*/

#tab------------------------------------------- {

}

}







/*===============================================

●ボタンのホバーエフェクト

===============================================*/

.menusection ul li a,

#contact ul li a,

#pagetop a {

	display: block;

	transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),

	            filter 0.35s ease;

	will-change: transform;

}

/* #pagetopは負マージンで連絡先に重なるため、

   クリック領域を画像部分だけに限定する */

#pagetop {

	pointer-events: none;

}

#pagetop a {

	display: inline-block;

	pointer-events: auto;

}



/* ホバーが使えるデバイスのみ（タッチ端末でhoverが残留しないように） */

@media (hover: hover) and (pointer: fine) {

.menusection ul li a:hover,

#contact ul li a:hover {

	transform: translateY(-6px) scale(1.04);

	filter: drop-shadow(0 10px 14px rgba(12, 16, 54, 0.25)) brightness(1.05);

}

#pagetop a:hover {

	transform: translateY(-5px);

	filter: drop-shadow(0 8px 10px rgba(12, 16, 54, 0.25));

}

}



/* クリック時に軽く沈む */

.menusection ul li a:active,

#contact ul li a:active,

#pagetop a:active {

	transform: translateY(-1px) scale(0.97);

	transition-duration: 0.1s;

}



/* 動きを減らす設定のユーザーには動かさない */

@media (prefers-reduced-motion: reduce) {

.menusection ul li a,

#contact ul li a,

#pagetop a {

	transition: none;

}

.menusection ul li a:hover,

#contact ul li a:hover,

#pagetop a:hover,

.menusection ul li a:active,

#contact ul li a:active,

#pagetop a:active {

	transform: none;

}

}