@charset "utf-8";

/* CSS Document */

header{

	width: 100%;

	margin: 0 auto;

	background-color: #FFFFFF;

}







.head_cont{

	width: 1100px;

	display: flex;

	margin: 0 auto;

	padding: 10px 0;

	align-items: center;

       justify-content: space-between;



}



.head_left{

	width: 260px;

}



.yoyaku_banner{

	width: 140px;

}





#menu_wrap{

	width: 640px;

}



.menu_cont{

	display: flex;

}



.menu ul {

    display: flex;

    width: 640px;

    margin: 0 auto;

    padding: 0;

	text-align: center;

}

.menu li {

    display: flex;

    width: calc(100% / 5);

    align-items: center;

    flex-direction: column;

	padding: 20px 0;

	

	

}

.menu li:hover {

opacity: 0.6;	

}



.menu li a {

	color: #e4677e;

	text-decoration: none;

}

.menu li small {

	color: #f4b2b9;

}



.menu li a p{

	font-size: 18px;

	padding: 0;

	margin: 0;

	font-weight: 900;

}







/************SP用**************/

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



	

	header{

		

		position: fixed;

		z-index: 2;

	}

	

	.head_cont {

    width: 100%;

    padding: 4vw 0;

}

	

	.head_left {

    width: 100vw;

	}

	

	.yoyaku_banner{

		        width: 50vw;

        /* margin: 0 1vw 0 0; */

        position: relative;

        left: -33vw;

    

	}

	

#menu_wrap{

	background-color: inherit;

	width: inherit;

}



.menu_cont{

	width: 100%;

	margin: 0 auto;

	min-width: inherit;

}

	

	

	

.menu ul{

flex-direction: column;

}









.menu li:hover{	

		background:none ;

}







	

	





/* ハンバーガーアイコン */

.hamburger-icon {

  cursor: pointer;

  display: flex;

  flex-direction: column;

  gap: 5px;

  width: 30px;

  height: 25px;

  justify-content: center;

  align-items: center;

         position: fixed;

        z-index: 1001;

        top: 8vw;

        right: 4vw;

}



/* ハンバーガーの線 */

.hamburger-icon span {

  width: 40px;

  height: 3px;

  background: #e4677e;

  transition: transform 0.3s, opacity 0.3s;

  position: absolute;

}



/* 1本目（上の線） */

.hamburger-icon span:nth-child(1) {

  top: 0;

}



/* 2本目（中央の線） */

.hamburger-icon span:nth-child(2) {

  top: 50%;

  transform: translateY(-50%);

}



/* 3本目（下の線） */

.hamburger-icon span:nth-child(3) {

  bottom: 0;

}



/* フルスクリーンメニュー */

.menu {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100vh;

  background-color:#FFFFFF;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease-in-out;

}



/* メニューが開いたとき */

.menu.active {

  opacity: 1;

  visibility: visible;

	

}



/* メニューのリンク */

.menu ul {

  list-style: none;

  padding: 0;

  margin: 0;

  text-align: center;

}



.menu li{

	background:none ;

	width: 100%;

	color: #003CB4;

	

	border-top:1px solid  #f4b2b9;;

	border-bottom:1px solid  #f4b2b9;;

	

	margin: -1px 0 0 0;

}

	





.menu li a {

	display: block;

	padding: 1vw 0;



  color: #003CB4;

  font-size: 21px;

  text-decoration: none;

  transition: color 0.3s;

}



.menu a:hover {

  color: #ddd;

}

.hamburger-menu.active .hamburger-icon span {

  background: #e4677e;

}

/* ハンバーガーアイコンが「×」に変形 */

.hamburger-menu.active .hamburger-icon span:nth-child(1) {

  transform: translateY(12px) rotate(45deg);

}



.hamburger-menu.active .hamburger-icon span:nth-child(2) {

  opacity: 0;

}



.hamburger-menu.active .hamburger-icon span:nth-child(3) {

  transform: translateY(-10px) rotate(-45deg);

}

	



.menu li a {

	color: #e4677e;

	text-decoration: none;

}

.menu li small {

	color: #f4b2b9;

}

	



}

/************SP用ここまで**************/