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

/* common.css */

/**********************************************
	common settings
***********************************************/
/*img {
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}*/

body{
  font-family: "Noto Sans JP", sans-serif;
  color: #440017;
  font-size: 14px;
}

@media screen and (min-width: 520px) {
  body {
    font-size: 15px;
  }
}
@media screen and (min-width: 960px) {
  body {
    font-size: 16px;
  }
}

body{
  width: 100%;
  max-width: 100%; /* はみ出し防止 */
  margin: 0 auto; /* 中央揃え */
  padding: 0;
}

@media (min-width: 835px) {
  body {
    max-width: 1920px; /* PC版の最大幅 */
    margin: 0 auto; /* PC時は中央配置 */
  }
}

h2{
  font-size: 22px;
  font-weight: 500;
}

@media screen and (min-width: 520px) {
  h2 {
    font-size: 30px;
  }
}
@media screen and (min-width: 960px) {
  h2 {
    font-size: 54px;
  }
}

a {
  text-decoration: none;
}

/*
p {
  text-align: justify;
}

a {
  color: #000;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}



input:focus,
select:focus,
textarea:focus {
  outline: none;
}*/

/**********************************************
	display: block / none
***********************************************/
/*.tab {
  display: none !important;
}
.pc {
  display: none !important;
}
.sp {
  display: block !important;
}

@media screen and (min-width: 520px) {
  .sp {
    display: none !important;
  }
  .pc {
    display: none !important;
  }
  .tab {
    display: block !important;
  }
}

@media screen and (min-width: 960px) {
  .sp {
    display: none !important;
  }
  .tab {
    display: none !important;
  }
  .pc {
    display: block !important;
  }
}*/

/**********************************************
	clearfix
***********************************************/
/*.cf::after {
  content: "";
  display: block;
  clear: both;
}*/

/**********************************************
	header
***********************************************/

/**********************************************
    $footer
***********************************************/

/**********************************************
    $button1
***********************************************/
.button1 a {
  display: flex;
  flex-flow: column;
  background-color: transparent;
  border-radius: 5px;
  border: 2px solid #8E5B00;
  position: relative;
  align-items: center;
  margin: 0 auto;
  width: 200px;
  padding: 15px 0;
  color: #8E5B00;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  font-size: 18px;
}

.button1 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

@media (min-width:835px){
	.button1 a::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 3rem;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 6px;
	  height: 6px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-50%) rotate(45deg);
	}
}
  
/*.button1 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 15px;
  height: 15px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}*/


.button1 a:hover {
  background: #8E5B00;
  color: #FFF;
}

.button1 a:hover:after {
  right: 1.4rem;
}

/**********************************************
    $button2
***********************************************/
.button2{
  margin-top: 50px;
}

.button2 a {
  width: 256px;
  display: flex;
  flex-flow: column;
  background-color: #74AE6F;
  border-radius: 5px;
  border: 2px solid #FFF5D8;
  position: relative;
  align-items: center;
  margin: 0 auto;
/*  max-width: 280px;*/
  padding: 15px 20px;
  color: #FFF5D8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  box-shadow: 0px 1px 2px 0px rgba(104, 66, 0, 1);
}

/*@media (min-width:835px){
  .button2 a {
    font-size: 34px;
  }
}*/

.button2 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.button2 a:hover {
  background: #8E5B00;
  color: #FFF;
}

.button2 a:hover:after {
  right: 1.4rem;
}

@media (min-width:835px){
  .button2{
    margin-bottom: 300px;
  }
  
  .button2 a{
    width: 682px;
    display: inline;
    padding: 40px 50px;
    font-size: 34px;
  }
}

/**********************************************
    $button3
***********************************************/

.button3{
  width: 100%;
}


.button3 a {
  width: 257px;
  display: flex;
  flex-flow: column;
  background-color: #BB3B4C;
  border-radius: 10px;
  position: relative;
	border: 2px solid #BB3B4C;
  align-items: center;
  margin: 0 auto;
/*  max-width: 280px;*/
  padding: 15px 20px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-weight: 500;
	font-size: 16px;
/*  box-shadow: 0px 1px 2px 0px rgba(104, 66, 0, 1);*/
}

/*@media (min-width:835px){
  .button2 a {
    font-size: 34px;
  }
}*/

.button3 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-45%) rotate(135deg);
}

@media (min-width:835px){
	.button3{
	  width: 28.10%;
	}
	
	.button3 a{
		width: 100%;
		height: 150px;
		display: flex;
/*		padding: 40px 30px;*/
		background-color: #BB3B4C;
		justify-content: center;
		align-items: center;
		text-align: center;
		color: #fff;
/*		 margin: 0 auto;*/
		border-radius: 30px;
		font-size: clamp(16px, calc(34 / 1920 * 100vw), 34px);
		padding: 0;
	  }
	
	
	.button3 a::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 0.5rem;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 8px;
	  height: 8px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-45%) rotate(135deg);
	}
}

@media (min-width:1336px){
	.button3 a::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 1rem;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 8px;
	  height: 8px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-45%) rotate(135deg);
	}
}

.button3 a:hover {
  background: #FFF5DB;
  color: #BB3B4C;
	border: 2px solid #BB3B4C;
}

@media (min-width:835px){
	.button3 a:hover {
	  background: #FFF5DB;
	  color: #BB3B4C;
		border: 2px solid #BB3B4C;
	}
}

.button3:nth-child(1) , .button3:nth-child(2) {
  margin-bottom: 20px; /* 余白の大きさを調整 */
}

/*
.button3 a:hover:after {
  right: 1.4rem;
}
*/

/*
@media (min-width:835px){
  .button3{
    margin-bottom: 300px;
  }
}
*/


/**********************************************
    $button4
***********************************************/

.button4 {
  width: 240px;
  display: flex;
  flex-flow: column;
  background-color: #8E5B00;
  border-radius: 10px;
  position: relative;
/*	border: 2px solid #BB3B4C;*/
  align-items: center;
  margin: 0 auto ;
/*  max-width: 280px;*/
  padding: 15px 20px;
  color: #fff;
  transition: 0.3s ease-in-out;
  font-weight: 400;
	font-size: 20px;
}

/*@media (min-width:835px){
  .button4 a {
    font-size: 34px;
  }
}*/

/*
.button4 ::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-45%) rotate(135deg);
}
*/

@media (min-width:835px){
	.button4 {
		width: 488px;
		height: 98px;
		display: flex;
		padding: 30px 100px;
		font-size: 32px;
		justify-content: center;
		align-items: center;
		text-align: center;
/*		 margin: 0 auto;*/
		border-radius: 10px;
		    cursor: pointer;
	  }
	
	
	.button4 ::after {
	  content: "";
	  position: absolute;
	  top: 50%;
	  bottom: 0;
	  right: 2rem;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  transition: right 0.3s;
	  width: 8px;
	  height: 8px;
	  border-top: solid 2px currentColor;
	  border-right: solid 2px currentColor;
	  transform: translateY(-45%) rotate(135deg);
	}
}

.button4 :hover {
  color: #fff;
/*	border: 2px solid #BB3B4C;*/
}

/*.button4:nth-child(1) , .button4:nth-child(2) {
  margin-bottom: 20px;  余白の大きさを調整
} */

/*
.button4 a:hover:after {
  right: 1.4rem;
}
*/

/*
@media (min-width:835px){
  .button4{
    margin-bottom: 300px;
  }
}
*/


/**********************************************
    $button5
***********************************************/

.button5 a {
  width:54.47%;
  display: flex;
  flex-flow: column;
  background-color: #8E5B00;
  border-radius: 5px;
  border: 2px solid #8E5B00;
  position: relative;
  align-items: center;
  margin: 0 auto;
/*  max-width: 280px;*/
  padding: 5px 30px;
  color: #FFF5D8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  font-size: 14px;
}

.button5 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.button5 a:hover {
  background: #8E5B00;
  color: #FFF;
}

.button5 a:hover:after {
  right: 1.4rem;
}

@media (min-width:835px){
/*  .button5{
    margin-bottom: 300px;
  }*/
  
  .button5 a{
    width: 53.38%;
    /*display: inline;*/
    padding: 20px 30px;
    font-size: 34px;
  }
}






/**********************************************
    $button6
***********************************************/
/*
.button6{
  margin-top: 50px;
}*/

.button6 a {
  width:60.36%;
  display: flex;
  flex-flow: column;
  background-color: #8E5B00;
  border-radius: 5px;
  border: 2px solid #8E5B00;
  position: relative;
  align-items: center;
  margin: 0 auto;
/*  max-width: 280px;*/
  padding: 5px 30px;
  color: #FFF5D8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
  font-size: 14px;
}

.button6 a::after {
  content: "";
  position: absolute;
  top: 50%;
  bottom: 0;
  right: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: right 0.3s;
  width: 6px;
  height: 6px;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.button6 a:hover {
  background: #8E5B00;
  color: #FFF;
}

.button6 a:hover:after {
  right: 1.4rem;
}

@media (min-width:835px){
/*  .button6{
    margin-bottom: 300px;
  }*/
  
  .button6 a{
    width: 53.38%;
    /*display: inline;*/
    padding: 20px 30px;
    font-size: 34px;
  }
}

/**********************************************
    $subpage title
***********************************************/

/**********************************************
	$breadcrumb list
***********************************************/