@charset "UTF-8";
/**
 * Style.css
 * ./css/base.css
 *
 * Last Update: 2024-01-16
 * ----------------------------------------------------------------------*/


/**
 * General
* -----------------------------------------------------------------------*/

/* デフォルトををhtmlで定義するか？.story-bodyで定義するか */

:root {
	--content__width--max: 118.6rem;
	--content__padding-inline: 2.5rem;
	--story__font-size--default: 1.6rem;
	--story__font-size--h1: 3.6rem;
	--story__font-size--h2: 3.2rem;
	--story__font-size--h3: 2.4rem;
	--story__font-size--h4: 2.0rem;
	--story__font-size--h5: 1.8rem;
	--story__font-size--h6: 1.6rem;
	--gen__col--twitter: #1d9bf0;
	--gen__col--facebook: #1877f2;
	--gen__col--hatena: #00a4de;
	--gen__col--pocket: #ef4056;
	--gen__col--feedly: #2ab14c;
	--gen__col--youtube: #f00;
	--gen__col--soundcloud: #f26e23;
	--gen__col--note: #41c9b4;
	--gen__col--instagram: #cf2e92;
}

.icon--fa5 {font-family: 'Font Awesome 5 Free';}

/* 最終的にreset.cssと調整する */
html {
	font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans","BIZ UDPGothic",Meiryo,sans-serif;
	color: #292929;
	font-size: 62.5%;
	line-height: 2;
	font-kerning: none;
	text-align: start;
	text-underline-offset: .125em;
	overflow-wrap: break-word;
	line-break: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background-color: #e6e4dd;
	font-size: 1.6rem;
}

/*::selection {
	background: #592e16;
	color: #fff;
}*/

/*-------- Link
	a
----------------------------------------------- */
a {
	color: #16a6b6;
	text-decoration: none;
}
/*a:visited {
	color: #007383;
	text-decoration: none;
}*/
a:hover {
	color: #666;
	text-decoration: underline;
}
a:active {
	color: #00adef;
	text-decoration: underline;
}



/**
 * Adv
* -----------------------------------------------------------------------*/
/* いずれ別ファイルへ引越し */
.adv {
	position: relative;
}

.adv.adv--story-more {
	margin-top: 10rem;
	margin-inline: auto;
}

.adv.adv--story-footer {
	margin-top: 3rem;
	margin-inline: var(--content__padding-inline);
}

.adv.adv--sidebar-top {
	margin-inline: auto;
}

.adv--side-bottom {
	position: sticky;
	top: 0px;
	align-self: start;
}

.adv__header {
	font-size: 1rem;
}

.adv__header--accessibility {}

.adv-body {
	position: relative;
}
.adv-body--2col {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.adv__area {
	margin-inline: auto;
}
.adv__area--left {}
.adv__area--right {}


.adv--300x250,
.adv--mediumRectangle {
	width: 300px; height: 250px;
}

.adv--728x90,
.adv--leaderboard {
	width:728px; height:90px
}
.adv--160x600,
.adv--wideSkyscraper {
	width:160px; height:600px
}


@media screen and (max-width: 599px) {
	.adv__area--right {
		display: none;
	}
}


/**
 * Layout
* -----------------------------------------------------------------------*/
/*------------------ header */
.masthead {
	position: relative;
}

.content-main {
	position: relative;
}

.content-sub {
	position: relative;
}

.stern {
	position: relative;
	margin-top: 6em;
}





/* Header Bar */
.header-bar__location {
	display: block;
	position: relative;
	height: 66px; /* header-barの厚み */
}

.header-bar {
	position: fixed;
	top: 0px; left: 0px;
	z-index: 8000;
	width: 100%;
	display: flex;
	justify-content: space-between;
	background-color: #fff;
	border-bottom: 1px solid #2f2f2f;
}

.branding {
	order: 2;
	padding: 9px 0;
}

.menu-btn {
	order: 1;
	padding: 25px;
}

.search-btn {
	order: 3;
	padding: 23px;
}

/*------------------ Main */








/*------------------ Footer */
.stern {}


/* Stern Contents */
.stern-content {}


/* Colophone */
.colophon {
	position: relative;
}

.footer-logo {
	margin: 0 auto 45px;
}

.copyright {
	margin: 0 auto;
}



/**
 * Module
* ----------------------------------------------------------------------*/

/*------------------ Header */
/* Site Title */

.branding {
	position: relative;
}

.branding__link {
	display: block;
}

.branding__media {
	width: auto; height: 48px;
}


/* Hamburger Menu */

.hamburger {
	position: relative;
	width: 20px; height: 16px;
	cursor: pointer;
}

.hamburger__bun {
	display: block;
	width: 100%; height: 2px;
	background-color: #2f2f2f;
	position: absolute;
	left: 0;
}

.hamburger__bun--crown {
	top: 0;
}

.hamburger__bun--club {
	top: 7px;
}

.hamburger__bun--heel {
	top: 14px;
}

/* Search Magnifying Glass */

.magnifying-glass {
	position: relative;
	width: 20px; height: 20px;
	cursor: pointer;
}

.magnifying-glass__fa {
	display: block;
	font-size: 20px;
}



/* Menu */
.masthead-nav {
	position: fixed;
	top: 0; left: 0;
	z-index: 100;
	width: 100%; height: 100%;
	background-color: #fff;
}
.masthead-nav.collapse {
	display: none;
}

.masthead-nav-list {
	padding: 66px 0 0;
}

.masthead-nav-list__item {
	border-bottom: solid 1px #292929;
	font-size: 1.6rem;
	line-height: 2;
}

.masthead-nav-list__link {
	display: block;
	position: relative;
	padding: 1rem 2.5rem;
	background-color: #fff;
	text-decoration: none;
	color: #292929;
}
.masthead-nav-list__link:hover {
	background-color: #ddd;
}
.masthead-nav-list__link:before {
	content: "";
	position: absolute;
	right: 2.5rem; top: 0;
	width: 0.8rem; height: 0.8rem;
	margin: 2.2rem 0;
	border-top: solid 2px #292929;
	border-right: solid 2px #292929;
	transform: rotate(45deg);
	
}

@media (min-width: 768px) {
	.masthead-search-form__container {
		margin-top: 0;
		align-items: center;
	}
		.masthead-search-form .search__field {
		font-size: 6rem;
	}
	.masthead-search-form .search__btn {
		font-size: 6rem;
	}
}



/* Search */
.masthead-search.collapse {
	display: none;
}
.masthead-search {
	position: fixed;
	top: 0; left: 0;
	z-index: 7000;
	width: 100%; height: 100%;
	background-color: rgba(255, 255, 255, 0.96);
}

.masthead-search-form__container {
	width: 100%; height: 100%;
	margin-top: 11rem;
	display: flex;
	justify-content: center;
}

.masthead-search-form {
	position: relative;
	width: 90vw; height: fit-content;
}

.masthead-search-form .search__field {
	width: 100%;
	padding: 1rem 4rem;
	font-size: 2.4rem;
	text-align: center;
	background-color: #f5f5f0;
	box-shadow: 0 1px 3px #d1cfc6;
	border-radius: 0.5rem;
}
.masthead-search-form .search__btn {
	position: absolute;
	top: 0; right: 0;
	padding: 1rem 2rem;
	font-size: 2.4rem;
	text-align: center;
}
@media (min-width: 768px) {
	.masthead-search-form__container {
		margin-top: 0;
		align-items: center;
	}
		.masthead-search-form .search__field {
		font-size: 6rem;
	}
	.masthead-search-form .search__btn {
		font-size: 6rem;
	}
}


/*------------------ Footer */
.footer-content {
	position: relative;
	background-color: #292929;
	color: #fff;
	padding: 6rem var(--content__padding-inline);
}

.colophon {
	position: relative;
	background-color: #e7e7e7;
	padding-inline: var(--content__padding-inline);
	padding-top: 6em;
}


.footer__JumbiChu {
	display: grid;
	place-content: center;
	width: calc(100vw / 1.618);
	height: calc(100vw / 1.618 / 1.618);
	border: 1px solid #fff;
	border-radius: 1rem;
	margin-inline: auto;
}

/* Site Title */

.footer__logo {
	position: relative;
	width: calc(100vw / 1.618);
	margin-inline: auto;
}

.footer-logo__link {
	display: block;
}

.footer-logo__media {
	width: calc(100vw / 1.618);
}

/* Footer Menu */
.footer__menu {
	position: relative;
	margin-top: 2rem;
}
.footer-menu__list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 1rem;
}

.footer-menu__link {
	color: #292929;
}
.footer-menu__list .divider-border {
	height: 1em;
	margin-left: 1rem;
}
/* Copyright */
.footer__copyright {
	position: relative;
	width: 100%;
	text-align: center;
	margin-top: 6rem;
}

.footer-copyright__info {
	font-size: 1rem;
}