@charset "UTF-8";

/*アコーディオン*/
.accordion {
    margin-bottom: 20px;
}
.accordion .accordion-header {
    border: 1px solid #9fa0a0;
    padding: 20px 30px;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    color: #a80022;
    font-weight: bold;
    position: relative;
}
.accordion .accordion-header:after {
    content: "";
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(../img/common/btn_allow.svg);
    background-size: 38px;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 20px;
    top: 16px;
    transform: rotate(90deg);
}
@media (max-width: 800px) {
	.accordion .accordion-header:after {
		top: 26px;
	}
}
.accordion .accordion-header:before {
    content: "Q.";
    display: inline-block;
    width: 1.5em;
}
.accordion .accordion-header.active {
    border-radius: 10px 10px 0 0;
}
.accordion .accordion-header.active:after {
    transform: rotate(-90deg);
}
.accordion .accordion-content {
    padding: 20px 30px;
    border-left: 1px solid #9fa0a0;
    border-right: 1px solid #9fa0a0;
    border-bottom: 1px solid #9fa0a0;
    border-radius: 0 0 10px 10px;
    background-color: #efefef;
}
.accordion .accordion-content {
    display: none;
    text-align: justify;
}

.accordion .accordion-content:before {
    content: "A.";
    display: inline-block;
    width: 1.5em;
}
/*アコーディオン*/


#Top #SDGsSection {

}
#Top #SDGsSection .SDGsFlex {
	display: flex;
	justify-content: space-between;
}
@media (max-width: 800px) {
	#Top #SDGsSection .SDGsFlex {
		flex-direction: column;
	}
}
#Top #SDGsSection .SDGsFlex figure {
	width: 48%;
}
@media (max-width: 800px) {
	#Top #SDGsSection .SDGsFlex figure {
		width: 80%;
		margin: 0 auto 50px;
	}
}
#Top #SDGsSection .SDGsFlex .attempt {
	width: 46%;
}
@media (max-width: 800px) {
	#Top #SDGsSection .SDGsFlex .attempt {
		width: 100%;
	}
}
#Top #News {
	padding-bottom: 40px;
}
#Top #News .TwoTone {
	display: flex;
	justify-content: space-between;
}
@media (max-width: 800px) {
	#Top #News .TwoTone {
		flex-direction: column;
	}
}
#Top #News .TwoTone .Left {
	width: calc(415px + ((100vw - 1100px) / 2));
	min-width: 360px;
	padding-top: 35px;
	padding-left: calc((100vw - 1100px) / 2);
	background-color: #a80022;
}
@media (max-width: 800px) {
	#Top #News .TwoTone .Left {
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
	}
}
#Top #News .TwoTone .Left h2 {
	color: #fff;
}
#Top #News .TwoTone .Right {
	width: calc(615px + ((100vw - 1100px) / 2));
	min-width: 495px;
	padding-right: calc((100vw - 1100px) / 2);
}
@media (max-width: 800px) {
	#Top #News .TwoTone .Right {
		width: 100%;
		padding-left: 2%;
		padding-right: 2%;
	}
}

#Top #News .TwoTone .Right dl {
	display: flex;
	justify-content: flex-start;
	border-top: 1px solid #262626;
	padding: 1.3em 0;
	width: 100%;
}
#Top #News .TwoTone .Right dl:last-of-type {
	border-bottom: 1px solid #262626;
}
#Top #News .TwoTone .Right dl dt {
	width: 8em;
}
#Top #News .TwoTone .Right dl dd {
	display: flex;
	width: calc(100% - 8em);
	flex-wrap: nowrap;
}
#Top #News .TwoTone .Right dl dd p {
	width: fit-content;
	padding-right: 10px;
}
#Top #News .TwoTone .Right dl dd p a {
	color: #000;
}
#Top #News .TwoTone .Right dl dd img {
	width: 30px;
	height: 30px;
}
@media (max-width: 800px) {
	#Top #News .TwoTone .Right dl dd img {
		margin-top: 8px;
	}
}
/*#Top #News .TwoTone .Right dl dd img {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(../img/common/btn_allow.svg);
	background-size: 30px;
	background-position: center;
	background-repeat: no-repeat;
}*/

#Top #TopGift {
	background-image: url(../img/top/bg_gift.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	padding-bottom: 70px;
}
#Top #TopGift section {
	padding-top: 50px;
}
#Top #TopGift section#Supported h2 {
	color: #fff;
	margin-bottom: .8em;
}
#Top #TopGift section#Supported .Support {
	display: grid;
	gap: 3%;
	grid-template-columns: repeat(3,1fr);
	margin-bottom: 10px;
}

@media (max-width: 800px) {
	#Top #TopGift section#Supported .Support {
		grid-template-columns: 1fr;
	}
}
#Top #TopGift section#Supported .Support > div {
	background-color: #fff;
	border-radius: 8px;
	padding: 40px 0;
	text-align: center;
	color: #a80022;
	font-size: 1.4em;
	line-height: 1.4;
	font-weight: 500;
}
#Top #TopGift section#Supported p.SupportText {
	color: #fff;
	margin-bottom: 50px;
}
@media (max-width: 800px) {
	#Top #TopGift section#Supported p.SupportText {
		margin-top: 60px;
	}
}
#Top #TopGift section#Flow {
	background-color: rgba(255,255,255,.8);
	padding-bottom: 60px;
}
#Top #TopGift section#Flow .FlowBox {
	position: relative;
}
#Top #TopGift section#Flow .FlowBox .FlowChart {
	width: calc(100% + 10px);
	margin-left: -10px;
}
#Top #TopGift section#Flow .FlowBox .Contact {
	width: 65.5%;
	margin: auto;
	display: flex;
	justify-content: space-between;
	position: absolute;
	bottom: -1vw;
	left: 0;
	right: 0;
}
@media (max-width: 800px) {
	#Top #TopGift section#Flow .FlowBox .Contact {
		bottom: -3vw;
	}
}
@media (max-width: 800px) {
	#Top #TopGift section#Flow .FlowBox .Contact {
		flex-direction: column;
		position: unset;
		margin-top: -30px;
	}
}
#Top #TopGift section#Flow .FlowBox .Contact div {
	width: 48%;
}
@media (max-width: 800px) {
	#Top #TopGift section#Flow .FlowBox .Contact div {
		width: 100%;
		margin-bottom: 10px;
	}
}
#Top section#Catalog .yokohama {
	width: 40%;
}
@media (max-width: 800px) {
	#Top section#Catalog .yokohama {
		width: 100%;
	}
}
#Top section#Catalog .about {
	width: 57%;
	display: flex;
	justify-content: space-between;
	gap: 4%;
}
@media (max-width: 800px) {
	#Top section#Catalog .about {
		width: 100%;
		margin:40px auto;
	}
}
#Top section#Catalog .about .Book {
	width: 30%;
}
#Top section#Catalog .about .Detail {
	width: 66%;
}
@media (max-width: 800px) {
	#Top section#Catalog .flexitemCenter {
		flex-direction: column;
	}
}
#Top #Items {
	background-color: rgba(168, 0, 34, .1);
}
#Top #Items .LineUp {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}
@media (max-width: 800px) {
	#Top #Items .LineUp {
		grid-template-columns: 1fr;
	}
}

#Top #Items .LineUp li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 10px;
	background-color: #fff;
	flex-wrap: nowrap;
	color: #a80022;
	height: clamp(120px, 14vw, 145px);
}
#Top #Items .LineUp li a .Name {
	width: 69%;
	font-size: 1.55em;
	font-weight: 500;
	line-height: 1.3;
}
@media (max-width: 800px) {
	#Top #Items .LineUp li a .Name {
		font-size: 1.1em;
	}
}
#Top #Items .LineUp li a .Icon {
	width: 26%;
	padding: 0 2%;
}
@media (max-width: 800px) {
	#Top #Items .LineUp li a .Icon {
		width: 20%;
	}
}

#Top #Items .LineUp li a .Name span {
	font-size: .7em;
}
#Top #Items .LineUp li a .Allow {
	width: 5%;
}

#Top #Items .LineUp .cls-1 {
	fill: #9f1f24;
	fill-rule: evenodd;
}
#Top #Items .LineUp .cls-22 {
    fill: #9f1f24;
}
#Top #Items .LineUp .cls-2 {
    fill: #fff;
}

#Top #Items .LineUp li a:hover {
	background-color: #9f1f24;
	color: #fff;
	opacity: 1;
}
#Top #Items .LineUp li a:hover .cls-1 {
	fill: #fff;
	fill-rule: evenodd;
}
#Top #Items .LineUp li a:hover .cls-22 {
    fill: #fff;
}
#Top #Items .LineUp li a:hover .cls-2 {
    fill: #9f1f24;
}

#Top #Faq .FaqCont {
    display: flex;
    gap: 10%;
}
@media (max-width: 800px) {
	#Top #Faq .FaqCont {
		flex-direction: column;
	}
}
#Top #Faq .FaqCont .LeftCon {
    width: 30%;
}
@media (max-width: 800px) {
	#Top #Faq .FaqCont .LeftCon {
		width: 100%;
	}
}
#Top #Faq .FaqCont .RightCon {
    width: 60%;
}
@media (max-width: 800px) {
	#Top #Faq .FaqCont .RightCon {
		width: 100%;
	}
}


#Top #Recruit {
    background-color: rgba(168, 0, 34, .1);
}
#Top #Recruit .Inner {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
@media (max-width: 800px) {
	#Top #Recruit .Inner {
		flex-direction: column-reverse;
	}
}
#Top #About .Inner {
    display: flex;
    justify-content: space-between;
}
@media (max-width: 800px) {
	#Top #About .Inner {
		flex-direction: column-reverse;
	}
}
#Top #Recruit .Inner .Text,
#Top #About .Inner .Text {
    width: 46%;
}
@media (max-width: 800px) {
	#Top #Recruit .Inner .Text,
	#Top #About .Inner .Text {
		width: 100%;
	}
}
#Top #Recruit .Inner .Photo,
#Top #About .Inner .Photo {
    width: 42%;
}
@media (max-width: 800px) {
	#Top #Recruit .Inner .Photo,
	#Top #About .Inner .Photo {
		width: 70%;
		margin-bottom: 30px;
	}
}
#Top #Recruit .Inner .Photo img,
#Top #About .Inner .Photo img {
    border-radius: 10px;
}