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

/*-----------------------------------------------
#A88D00
-----------------------------------------------*/

/* layout */
.l-inner {
max-width: 1016px;
margin: auto;
padding: 0 4%;
box-sizing: content-box;
}

/* head-1 */
.head-1 {
font-size: 1.125rem;
}
.head-1 .en {
display: inline-block;
width: fit-content;
font-family: "Alumni Sans", sans-serif;
font-size: 4.5rem;
font-weight: 700;
line-height: 0.6;
border-bottom: 3px solid #A88D00;
}
.head-1 .ja {
display: block;
line-height: 1;
}
@media screen and (max-width: 800px) {
	.head-1 {
	font-size: 1.125rem;
	text-align: center;
	}
	.head-1 .en {
	font-size: 3rem;
	}
}

/* head-2 */
.head-2 {
font-size: 1.5rem;
font-weight: 700;
color: #A88D00;
}
@media screen and (max-width: 800px) {
	.head-2 {
	text-align: center;
	}
}

/* head-3 */
.head-3 {
position: relative;
font-size: 1.125rem;
font-weight: 700;
}
.head-3 span {
padding-right: 0.75em;
background: #FFF;
}
.head-3::after {
content: "";
position: absolute;
top: 50%;
width: 100%;
height: 1px;
background: #000;
}

/* text-4 */
.head-3 {
position: relative;
font-size: 1.125rem;
font-weight: 700;
}

/* button-1 */
.button-1 {
max-width: 30rem;
margin: auto;
}
.button-1 a {
display: block;
padding: 1rem;
font-size: 1.5rem;
font-weight: 700;
text-align: center;
color: #FFF;
background: #A88D00;
border-radius: 3em;
transition: 0.2s;
}
.button-1 a:hover {
background: #D3C67F;
}

/* button-2 */
.button-2 {
width: fit-content;
margin-left: auto;
}
.button-2 a {
display: block;
padding: 1rem 4rem 1rem 1rem;
text-align: center;
color: #656565;
background: #FFF;
background-image: url("../img/common/arw_more.svg");
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 2em;
border: 1px solid #656565;
transition: 0.2s;
}
.button-2 a:hover {
color: #FFF;
background: #A88D00;
background-image: url("../img/common/arw_more_w.svg");
background-position: right 1rem center;
background-repeat: no-repeat;
background-size: 2em;
border: 1px solid #A88D00;
}
@media screen and (max-width: 800px) {
	.button-2 {
	width: 100%;
	max-width: 375px;
	margin: auto;
	}
	.button-2 a {
	padding: 1rem;
	background-image: none;
	}
	.button-2 a:hover {
	background-image: none;
	}
}
/* button-1 */
.button-3 {
max-width: 16rem;
margin: auto;
}
.button-3 a {
display: block;
padding: 0.75rem;
font-size: 1.125rem;
font-weight: 700;
text-align: center;
color: #FFF;
background: #A88D00;
border-radius: 3em;
transition: 0.2s;
}
.button-3 a:hover {
background: #D3C67F;
}

/* slider */
.slider {
position: relative;
}
.slider .arw_prev,
.slider .arw_next {
position: absolute;
left: 0;
bottom: 0;
width: 48px;
border-radius: 100%;
cursor: pointer;
}
.slider .arw_prev {
left: 20px;
}
.slider .arw_next {
left: 100px;
}
@media screen and (max-width: 800px) {
	.slider .arw_prev {
	left: 6%;
	}
	.slider .arw_next {
	left: calc(12% + 48px);
	}
}

/* pc-sp */
.sp { display: none }
@media screen and (max-width: 800px) {
	.pc { display: none }
	.sp { display: block }
}


/* font-size */
.xsmall   { font-size: 0.75rem }
.small    { font-size: 0.875rem }
.middle   { font-size: 1.125rem }
.large   { font-size: 1.5rem }
.xlarge  { font-size: 2rem }
.xxlarge { font-size: 3rem }
@media screen and (max-width: 800px) {
	.large   { font-size: 1.125rem }
	.xlarge  { font-size: 1.5rem }
	.xxlarge { font-size: 2rem }
}

/* font-weight */
.bold   { font-weight: 700 }

/* text-align */
.center { text-align: center }
.right  { text-align: right }

/* color */
.color  { color: #A88D00 }

/* margin */
.mt10  { margin-top: 10px }
.mt20  { margin-top: 20px }
.mt40  { margin-top: 40px }
.mt60  { margin-top: 60px }
.mt80  { margin-top: 80px }
.mt100 { margin-top: 100px }
@media screen and (max-width: 800px) {
	.mt10  { margin-top: 6px }
	.mt20  { margin-top: 12px }
	.mt40  { margin-top: 24px }
	.mt60  { margin-top: 36px }
	.mt80  { margin-top: 48px }
	.mt100 { margin-top: 60px }
}