@charset "utf-8";

/*----------------------------
	ramen
------------------------------*/

/* mv */
.ramen .mv { 
	position: relative;
	z-index: 5;
}
.ramen .mv video {
	width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 768px) {
	/* modal */
	body:has(dialog:modal) {
		touch-action: none;
		-webkit-overflow-scrolling: none;
		overflow: hidden;
		overscroll-behavior: none;
	}
	dialog {
		display: none;
		border: none;
		overflow-wrap: anywhere;
		overscroll-behavior-y: contain;
		opacity: 0;
		transform: scale(0.98);
		transition: opacity 0.3s ease, transform 0.3s ease;
		position: fixed;
		inset: 0;
		margin: auto;
		width: 100%;
		max-width: none;
	}
	dialog[open] {
		display: block;
		background: none;
	}
	dialog.fadeIn {
		opacity: 1;
		transform: scale(1);
	}
	dialog.fadeOut {
		opacity: 0;
		transform: scale(0.98);
		pointer-events: none;
	}
	dialog::backdrop {
		background: url(../img/modal_bg.png) repeat;
	}
	dialog .closeBtn {
		display: block;
		font-size: 5rem;
		font-family: "Shippori Mincho", serif;
		font-weight: 800;
		text-align: center;
		position: relative;
		padding-left: 8rem;
		margin: 0 auto 4rem;
	}
	dialog .closeBtn::before ,
	dialog .closeBtn::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 3rem;
		width: 0.4rem;
		height: 8.5rem;
		background: #000;
	}
	dialog .closeBtn::before {
		transform: translateY(-50%) rotate(-45deg);
	}
	dialog .closeBtn::after {
		transform: translateY(-50%) rotate(45deg);
	}
	dialog .closeBtn:focus {
		outline: none;
		box-shadow: none;
	}
	body.isKeyboard .ramen dialog .closeBtn:focus {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}
	dialog .video { 
		position: relative;
		z-index: 5;
	}
	dialog .video video {
		width: 100%;
		height: auto;
		display: block;
	}
}

/* contents */
.ramen .contents {
	position: relative;
}
.ramen .contents::before {
	content: "";
	display: block;
	width: 100vw;
	height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	background: url(../img/bg.jpg) center top/cover no-repeat;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translatex(-50%);
}
.ramen .contents .ramenLogo01 {
	width: 10.8rem;
	position: fixed;
	top: 20%;
	left: calc((100vw - 50rem) / 4);
}
.ramen .contents .ramenLogo02 {
	width: 10.8rem;
	position: fixed;
	top: 20%;
	right: calc((100vw - 50rem) / 4);
}
.ramen .contents .inner {
	width: 50rem;
	margin: 0 auto;
	background: #c7a72a url(../img/parts.png) repeat;
	background-size: 29%;
	filter: drop-shadow(1px 0 3px rgba(0, 0, 0, .25)) drop-shadow(-1px 0 3px rgba(0, 0, 0, .25));
	position: relative;
	padding-bottom: 8rem;
}

@media (max-width: 1200px) {
	.ramen .contents .ramenLogo01 {
		left: calc((100vw - 50rem) / 6);
	}
	.ramen .contents .ramenLogo02 {
		right: calc((100vw - 50rem) / 6);
	}
}

@media (max-width: 1000px) {
	.ramen .contents .ramenLogo01 {
		left: calc((100vw - 50rem) / 8);
	}
	.ramen .contents .ramenLogo02 {
		right: calc((100vw - 50rem) / 8);
	}
}
@media (max-width: 830px) {
	.ramen .contents .ramenLogo01 {
		display: none;
	}
	.ramen .contents .ramenLogo02 {
		display: none;
	}
}

@media (max-width: 768px) {
	/* contents */
	.ramen .contents::before {
		content: none;
	}
	.ramen .contents .inner {
		width: 100%;
		max-width: 100%;
		filter: none;
		padding-bottom: 14rem;
	}
}

/* copyWrap */
.ramen .copyWrap {
	padding: 3rem 0 9rem;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/copy_bg.png) no-repeat;
	background-size: cover;
	z-index: 5;
}
.ramen .copy {
	font-size: 3.4rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	-webkit-text-orientation: upright;
	text-orientation: upright;
	line-height: 1.6;
	color: #fff;
	width: 45%;
	margin: 0 5rem 0 auto;
}
.ramen .copy span {
	background-color: #000;
	padding: 0.8rem 0;
}

@media (max-width: 768px) {
	.ramen .copyWrap {
		padding: 5rem 0 10rem;
	}
	.ramen .copy {
		font-size: 5.2rem;
		margin: 0 6rem 0 auto;
	}
	.ramen .copy span {
		padding: 1rem 0;
	}
}

/* ramenSlideWrap */
.ramen .ramenSlideWrap {
	padding-top: 28rem;
	max-width: 100%;
	position: relative;
	z-index: 5;
}
.ramen .ramenSlideWrap::after {
	content: "";
	width: 20.7rem;
	height: 7.7rem;
	background: url(../img/cloud03.png) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -2.5rem;
	right: -0.2rem;
	opacity: 0.4;
}
.ramen .ramenSlide {
	position: relative;
}
.ramen .ramenSlide::before {
	content: "";
	width: 20.3rem;
	height: 5.5rem;
	background: url(../img/cloud01.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 6rem;
	right: 0;
	opacity: 0.4;
}
.ramen .ramenSlide::after {
	content: "";
	width: 16.3rem;
	height: 5.8rem;
	background: url(../img/cloud02.png) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: 4.5rem;
	left: 1rem;
	opacity: 0.4;
}
.ramen .ramenSlide .swiper-slide {
	padding: 13rem 0;
	position: relative;
	filter: brightness(0.5);
	transition:
		transform 0.6s ease,
		filter 0.4s ease;
	transform-origin: center center;
}
.ramen .ramenSlide .swiper-slide-active {
	transform: translateY(0);
	filter: brightness(1);
	z-index: 3;
}
.ramen .ramenSlide .swiper-slide-prev {
	transform: translateY(10rem);
	z-index: 2;
}
.ramen .ramenSlide .swiper-slide-next {
	transform: translateY(-10rem);
	z-index: 2;
}
.ramen .ramenSlide .logo {
	position: absolute;
	top: 0;
	left: -2rem;
	width: 25rem;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.ramen .ramenSlide .swiper-slide-active .logo {
	opacity: 1;
}
.ramen .ramenSlide .pic {
	box-shadow: 0.5rem 0.5rem 0 0 #000;
}
.ramen .ramenSlideWrap .pager {
	margin-top: -9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 5;
}
.ramen .ramenSlideWrap .swiper-prev ,
.ramen .ramenSlideWrap .swiper-next {
	width: 6.3rem;
	cursor: pointer;
}
.ramen .ramenSlideWrap .swiper-pagination {
	margin: 0 2.6rem;
	position: static;
	width: auto;
	display: flex;
	align-items: center;
}
.ramen .ramenSlideWrap .swiper-pagination-bullet {
	margin: 0 0.7rem;
	width: 1.3rem;
	height: 1.3rem;
	overflow: hidden;
	cursor: pointer;
	background-color: #fff;
	opacity: 1;
	border-radius: 50%;
	transition: all 0.42s;
	position: relative;
}
.ramen .ramenSlideWrap .swiper-pagination-bullet-active {
	width: 2.6rem;
	height: 2.6rem;
	background-color: #000;
}
.ramen .ramenSlideWrap .swiperPause {
	width: 1.4rem;
	margin-left: 2.6rem;
}
.ramen .ramenSlideWrap .swiperPause img {
	display: block;
}

@media (max-width: 768px) {
	.ramen .ramenSlideWrap {
		padding-top: 47rem;
	}
	.ramen .ramenSlideWrap::after {
		width: 31.4rem;
		height: 11.8rem;
		bottom: -9.5rem;
		right: 0;
	}
	.ramen .ramenSlide::before {
		width: 30.8rem;
		height: 8.4rem;
		top: 9rem;
	}
	.ramen .ramenSlide::after {
		width: 24.8rem;
		height: 8.1rem;
	}
	.ramen .ramenSlide .swiper-slide {
		padding: 19rem 0;
	}
	.ramen .ramenSlide .swiper-slide-prev {
		transform: translateY(16rem);
	}
	.ramen .ramenSlide .swiper-slide-next {
		transform: translateY(-16rem);
	}
	.ramen .ramenSlide .logo {
		left: -3rem;
		width: 39rem;
	}
	.ramen .ramenSlideWrap .pager {
		margin-top: -14rem;
	}
	.ramen .ramenSlideWrap .swiper-prev ,
	.ramen .ramenSlideWrap .swiper-next {
		width: 9.6rem;
	}
	.ramen .ramenSlideWrap .swiper-pagination {
		margin: 0 4rem;
	}
	.ramen .ramenSlideWrap .swiper-pagination-bullet {
		margin: 0 0.7rem;
		width: 2rem;
		height: 2rem;
	}
	.ramen .ramenSlideWrap .swiper-pagination-bullet-active {
		width: 4rem;
		height: 4rem;
	}
	.ramen .ramenSlideWrap .swiperPause {
		width: 2.1rem;
		margin-left: 4rem;
	}
}

/* areaMap */
.ramen .areaMap {
	position: relative;
	z-index: 5;
}
.ramen .areaMap .shiko {
	width: 10.3rem;
	position: absolute;
	bottom: 16.5rem;
	left: 3rem;
}
@media (max-width: 768px) {
	.ramen .areaMap .shiko {
		width: 15.5rem;
		bottom: 23.5rem;
		left: 4rem;
	}
}

/* ramenArea */
.ramen .ramenArea {
	margin-top: -11rem;
}
.ramen .ramenArea .ramenBox {
	position: relative;
}
.ramen .ramenArea .ramenBox + .ramenBox {
	margin-top: 9rem;
}
.ramen .ramenArea .ramenPic {
	position: relative;
	z-index: 5;
}
.ramen .ramenArea .ramenPic::after {
	content: "";
	width: 100%;
	height: 50%;
	background-color: #fbee99;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.ramen .ramenArea .ramenCopy {
	margin: -13rem 2.6rem 0;
	font-size: 2.6rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 500;
	line-height: 1.7;
	color: #fff;
	position: relative;
	z-index: 5;
}
.ramen .ramenArea .ramenCopy span {
	background-color: #000;
	padding: 0 0.8rem 0.3rem;
}
.ramen .ramenArea .ramenInner {
	background-color: #fbee99;
	padding: 5rem 2.6rem 3.5rem;
}
.ramen .ramenArea .name {
	position: relative;
}
.ramen .ramenArea .name::after {
	content: "";
	width: 100%;
	height: 1.3rem;
	background-color: #c7a72a;
	position: absolute;
	bottom: -6rem;
	left: 0;
}
.ramen .ramenArea .nameEn {
	margin-top: 0.5rem;
	font-size: 2rem;
	font-weight: 600;
}
.ramen .ramenArea .nameEn span {
	font-family: "Noto Sans", sans-serif;
}
.ramen .ramenArea .ramenTxt {
	margin-top: 6rem;
	font-size: 2rem;
}
.ramen .ramenArea .tab {
	margin-top: 4rem;
	position: relative;
}
.ramen .ramenArea .tab::before {
	content: "";
	width: 29.3rem;
	height: 16.6rem;
	background: url(../img/cloud04.png) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -20.5rem;
	left: -2.6rem;
	z-index: 5;
}
.ramen .ramenArea .tab::after {
	content: "";
	width: 50rem;
	height: 22.3rem;
	background: url(../img/triangle.png) no-repeat;
	background-size: contain;
	position: absolute;
	bottom: -25rem;
	left: -2.6rem;
}
.ramen .ramenArea div[role="tablist"] {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
}
.ramen .ramenArea div[role="tablist"]::after {
	content: "";
	width: 2.7%;
	height: 2px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}
.ramen .ramenArea button[role="tab"] {
	width: 49%;
	border: solid 2px #000;
	border-bottom: none;
	background-color: #000;
	border-radius: 1.3rem 1.3rem 0 0;
	height: 7.3rem;
}
.ramen .ramenArea button[role="tab"]:hover {
	opacity: 1;
}
.ramen .ramenArea button[role="tab"][aria-selected="true"] {
	background-color: #fff;
	height: 8.6rem;
}
.ramen .ramenArea button[role="tab"][aria-selected="false"]:hover {
	background-color: #fff;
	cursor: pointer; 
}
.ramen .ramenArea button[role="tab"]:first-child img {
	width: 16rem;
	margin: 0 auto;
}
.ramen .ramenArea button[role="tab"]:last-child img {
	width: 13.9rem;
	margin: 0 auto;
}
.ramen .ramenArea button[role="tab"] img.on {
	display: none;
}
.ramen .ramenArea button[role="tab"][aria-selected="true"] img.on {
	display: block;
}
.ramen .ramenArea button[role="tab"][aria-selected="true"] img.off {
	display: none;
}
.ramen .ramenArea button[role="tab"][aria-selected="false"]:hover img.on {
	display: block;
}
.ramen .ramenArea button[role="tab"][aria-selected="false"]:hover img.off {
	display: none;
}
.ramen .ramenArea div[role="tabpanel"] {
	background-color: #FFFFFF;
	border-radius: 0 0 1.3rem 1.3rem;
	border: solid 2px #000;
	border-top: none;
	padding: 2.6rem 2.6rem 2rem;
}
.ramen .ramenArea .ramenData {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1.3rem;
	border-bottom: solid 1px #000;
}
.ramen .ramenArea .ramenData + .ramenData {
	padding-top: 1.3rem;
}
.ramen .ramenArea .ramenData:last-child {
	border-bottom: none;
}
.ramen .ramenArea .ramenData dt {
	width: 30%;
}
.ramen .ramenArea .ramenData:first-child h4 {
	width: 7.6rem;
}
.ramen .ramenArea .ramenData:nth-child(2) h4 {
	width: 6.4rem;
}
.ramen .ramenArea .ramenData:nth-child(3) h4 {
	width: 5rem;
}
.ramen .ramenArea .ramenData:nth-child(4) h4 {
	width: 6.2rem;
}
.ramen .ramenArea .ramenData:nth-child(5) h4 {
	width: 5rem;
}
.ramen .ramenArea .ramenData dd {
	width: 70%;
}
.ramen .ramenArea .ramenData .txt {
	font-size: 2.2rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
	background-color: #F6EDC5;
	border-radius: 0.6rem;
	padding: 1rem 1.6rem;
}
.ramen .ramenArea .ramenData .chartTtl {
	font-size: 2rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 700;
}
.ramen .ramenArea .ramenData .chart {
	background-color: #F6EDC5;
	border-radius: 0.6rem;
	padding: 2rem 1.6rem 1rem;
	position: relative;
}
.ramen .ramenArea .ramenData .chartTtl + .chart,
.ramen .ramenArea .ramenData .chart + .chartTtl {
	margin-top: 0.5rem;
}
.ramen .ramenArea .ramenData .chart .chartBar {
	width: 19.7rem;
	margin: 0 auto;
	position: relative;
}
.ramen .ramenArea .ramenData .chart .chartBar::before {
	content: "";
	width: 4rem;
	height: 2.6rem;
	background: url(../img/icn_don.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: -0.6rem;
}
.ramen .ramenArea .ramenData .chart .chartBar.center::before {
	left: 50%;
	transform: translateX(-50%);
}
.ramen .ramenArea .ramenData .chart .chartBar.left::before {
	left: -1rem;
}
.ramen .ramenArea .ramenData .chart .chartBar.right::before {
	right: -1rem;
}
.ramen .ramenArea .ramenData .chart .chartBar.chart01::before {
	left: 3rem;
}
.ramen .ramenArea .ramenData .chart .chartTxt {
	margin-top: 1rem;
	display: flex;
	font-size: 2rem;
	font-family: "Shippori Mincho", serif;
	font-weight: 800;
	text-align: center;
}
.ramen .ramenArea .ramenData .chart .chartTxt > p {
	width: 33%;
	opacity: 0.6;
}
.ramen .ramenArea .ramenData .chart .chartTxt > p.current {
	opacity: 1;
}
.ramen .ramenArea .point {
	margin-top: 2.5rem;
}
.ramen .ramenArea .point .pointTtl {
	width: 24.1rem;
	margin: 0 auto;
}
.ramen .ramenArea .point .pointTxt {
	margin-top: 1rem;
	font-size: 2rem;
	background-color: #F6EDC5;
	border-radius: 0.6rem;
	padding: 1.5rem 2rem;
}

.ramen .ramenArea .brandTtl {
	width: 10.3rem;
	margin: 0 auto;
}
.ramen .ramenArea .brandPic {
	margin-top: 1.5rem;
}
.ramen .ramenArea .brandIntroduction {
	display: flex;
	align-items: center;
	padding: 1.3rem 0;
	border-bottom: solid 1px #000;
}
.ramen .ramenArea .brandIntroduction dt {
	width: 28%;
	font-size: 1.8rem;
	font-weight: 700;
}
.ramen .ramenArea .brandIntroduction dd {
	width: 72%;
	font-size: 1.8rem;
}
.ramen .ramenArea .brandIntroduction dd a.link {
	display: inline;
	word-break: break-all;
}
.ramen .ramenArea .brandIntroduction dd a.link::after {
	content: "";
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	margin-left: 0.4rem;
	vertical-align: middle;
	background: url(../img/icn_blank.png) no-repeat;
	background-size: contain;
}
.ramen .ramenArea .historyTtl {
	width: 12.8rem;
	margin: 2rem auto 0;
}
.ramen .ramenArea .owner {
	width: 26rem;
	margin: 1.5rem auto 0;
}
.ramen .ramenArea .brandTxt {
	margin-top: 1.5rem;
	font-size: 2rem;
}
.ramen .ramenArea .brandTxt + .brandTxt { 
	margin-top: 3rem;
}


/* ramen01 */
.ramen .ramenArea .ramen01 .name {
	width: 37.7rem;
}

/* ramen02 */
.ramen .ramenArea .ramen02 .name {
	width: 43.7rem;
}

/* ramen03 */
.ramen .ramenArea .ramen03 .name {
	width: 34rem;
}

/* ramen04 */
.ramen .ramenArea .ramen04 .name {
	width: 37.8rem;
}

/* ramen05 */
.ramen .ramenArea .ramen05 .name {
	width: 42.5rem;
}

/* ramen06 */
.ramen .ramenArea .ramen06 .tab::before {
	content: none;
}
.ramen .ramenArea .ramen06 .tab::after {
	content: none;
}
.ramen .ramenArea .ramen06 .ramenInner {
	padding: 5rem 2.6rem 8rem;
}
.ramen .ramenArea .ramen06 .name {
	width: 42rem;
}

@media (min-width: 769px) {
	.ramen .ramenArea .brandIntroduction dd a[href*="tel:"] {
		pointer-events: none;
		cursor: default;
		text-decoration: none;
	}
}
@media (max-width: 768px) {
	.ramen .ramenArea {
		margin-top: -16rem;
		overflow: hidden;
	}
	.ramen .ramenArea .ramenBox + .ramenBox {
		margin-top: 16rem;
	}
	.ramen .ramenArea .ramenCopy {
		margin: -19rem 4rem 0;
		font-size: 4rem;
	}
	.ramen .ramenArea .ramenCopy span {
		padding: 0 1rem 0.5rem;
	}
	.ramen .ramenArea .ramenInner {
		padding: 7rem 3.5rem 6rem;
	}
	.ramen .ramenArea .name::after {
		height: 2.4rem;
		bottom: -9rem;
	}
	.ramen .ramenArea .nameEn {
		margin-top: 0.5rem;
		font-size: 3rem;
		line-height: 1.5;
	}
	.ramen .ramenArea .ramenTxt {
		margin-top: 8rem;
		font-size: 3rem;
	}
	.ramen .ramenArea .tab {
		margin-top: 6rem;
	}
	.ramen .ramenArea .tab::before {
		width: 44rem;
		height: 25rem;
		bottom: -31.5rem;
		left: -3.5rem;
	}
	.ramen .ramenArea .tab::after {
		width: 75rem;
		height: 33.4rem;
		bottom: -38.5rem;
		left: -3.5rem;
	}
	.ramen .ramenArea div[role="tablist"]::after {
		width: 2.5%;
	}
	.ramen .ramenArea button[role="tab"] {
		border-radius: 2rem 2rem 0 0;
		height: 10.8rem;
	}
	.ramen .ramenArea button[role="tab"][aria-selected="true"] {
		height: 13.8rem;
	}
	.ramen .ramenArea button[role="tab"]:first-child img {
		width: 24rem;
	}
	.ramen .ramenArea button[role="tab"]:last-child img {
		width: 20.9rem;
	}
	.ramen .ramenArea div[role="tabpanel"] {
		border-radius: 0 0 2rem 2rem;
		padding: 3.5rem 4rem;
	}
	.ramen .ramenArea .ramenData {
		padding-bottom: 2rem;
	}
	.ramen .ramenArea .ramenData + .ramenData {
		padding-top: 2rem;
	}
	.ramen .ramenArea .ramenData dt {
		width: 25%;
	}
	.ramen .ramenArea .ramenData:first-child h4 {
		width: 11.4rem;
	}
	.ramen .ramenArea .ramenData:nth-child(2) h4 {
		width: 9.6rem;
	}
	.ramen .ramenArea .ramenData:nth-child(3) h4 {
		width: 7.5rem;
	}
	.ramen .ramenArea .ramenData:nth-child(4) h4 {
		width: 9.4rem;
	}
	.ramen .ramenArea .ramenData:nth-child(5) h4 {
		width: 7.5rem;
	}
	.ramen .ramenArea .ramenData dd {
		width: 75%;
	}
	.ramen .ramenArea .ramenData .txt {
		font-size: 3.4rem;
		border-radius: 1rem;
		padding: 1.5rem 3rem;
	}
	.ramen .ramenArea .ramenData .chartTtl {
		font-size: 3rem;
	}
	.ramen .ramenArea .ramenData .chart {
		border-radius: 1rem;
		padding: 1rem 2rem;
	}
	.ramen .ramenArea .ramenData .chart .chartBar {
		width: 29.6rem;
	}
	.ramen .ramenArea .ramenData .chart .chartBar::before {
		width: 6rem;
		height: 4rem;
		top: 1.5rem;
	}
	.ramen .ramenArea .ramenData .chart .chartTxt {
		margin-top: 1rem;
		font-size: 3rem;
	}
	.ramen .ramenArea .ramenData .chart .chartTxt > p {
		width: 33%;
	}
	.ramen .ramenArea .point {
		margin-top: 3rem;
	}
	.ramen .ramenArea .point .pointTtl {
		width: 36.2rem;
	}
	.ramen .ramenArea .point .pointTxt {
		margin-top: 2rem;
		font-size: 3rem;
		border-radius: 1rem;
		padding: 3rem 2.5rem;
	}
	
	.ramen .ramenArea .brandTtl {
		width: 15.5rem;
	}
	.ramen .ramenArea .brandPic {
		margin-top: 2rem;
	}
	.ramen .ramenArea .brandIntroduction {
		padding: 2rem 0;
		border-bottom: solid 0.2rem #000;
	}
	.ramen .ramenArea .brandIntroduction dt {
		width: 28%;
		font-size: 2.8rem;
	}
	.ramen .ramenArea .brandIntroduction dd {
		width: 72%;
		font-size: 2.8rem;
	}
	.ramen .ramenArea .brandIntroduction dd a.link::after {
		width: 2.4rem;
		height: 2.4rem;
	}
	.ramen .ramenArea .historyTtl {
		width: 19.3rem;
		margin: 3rem auto 0;
	}
	.ramen .ramenArea .owner {
		width: 39rem;
		margin: 2rem auto 0;
	}
	.ramen .ramenArea .brandTxt {
		margin-top: 2rem;
		font-size: 3rem;
	}
	.ramen .ramenArea .brandTxt + .brandTxt { 
		margin-top: 3.5rem;
	}
	
	
	/* ramen01 */
	.ramen .ramenArea .ramen01 .name {
		width: 56.4rem;
	}
	
	/* ramen02 */
	.ramen .ramenArea .ramen02 .name {
		width: 65.6rem;
	}
	
	/* ramen03 */
	.ramen .ramenArea .ramen03 .name {
		width: 51rem;
	}
	
	/* ramen04 */
	.ramen .ramenArea .ramen04 .name {
		width: 56.7rem;
	}
	
	/* ramen05 */
	.ramen .ramenArea .ramen05 .name {
		width: 63.8rem;
	}
	
	/* ramen06 */
	.ramen .ramenArea .ramen06 .ramenInner {
		padding: 7rem 3.5rem 10rem;
	}
	.ramen .ramenArea .ramen06 .name {
		width: 63rem;
	}
	
}

/* info */
.ramen .info {
	padding: 8.6rem 2.6rem 0;
}
.ramen .info h2 {
	width: 39.8rem;
	margin: 0 auto;
}
.ramen .info .infoBox {
	margin-top: 6rem;
	background-color: #fff;
	border-radius: 2.6rem;
	position: relative;
}
.ramen .info .infoBox::before {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 3.2rem solid transparent;
	border-left: 3.2rem solid transparent;
	border-bottom: 3.2rem solid #fffef5;
	border-top: 0;
	position: absolute;
	top: -3.2rem;
	left: 50%;
	transform: translateX(-50%);
}
.ramen .info .box {
	padding: 3rem 2.6rem 2rem;
}
.ramen .info .box:last-child {
	padding-bottom: 6rem;
}
.ramen .info h5 {
	font-size: 2.2rem;
	font-weight: 600;
	padding: 0 0 0.5rem 1.6rem;
	border-bottom: solid 0.2rem #bb9515;
	position: relative;
}
.ramen .info h5::before {
	content: "";
	width: 0.6rem;
	height: 2.8rem;
	background-color: #bb9515;
	position: absolute;
	top: 0.3rem;
	left: 0;
}
.ramen .info h6 {
	margin-top: 1.5rem;
	font-size: 2rem;
	font-weight: 600;
	padding-left: 1em;
	position: relative;
}
.ramen .info h6::before {
	content: "";
	width: 1.3rem;
	height: 1.3rem;
	background-color: #bb9515;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.ramen .info .infoTxt {
	margin-top: 0.5rem;
	font-size: 2rem;
}
.ramen .info .infoTxt + h6 {
	margin-top: 2.5rem;
}

@media (max-width: 768px) {
	.ramen .info {
		padding: 13.5rem 3.5rem 0;
	}
	.ramen .info h2 {
		width: 59.7rem;
	}
	.ramen .info .infoBox {
		margin-top: 8rem;
		border-radius: 4rem;
	}
	.ramen .info .infoBox::before {
		border-right: 4.8rem solid transparent;
		border-left: 4.8rem solid transparent;
		border-bottom: 4.9rem solid #fffef5;
		top: -4.7rem;
	}
	.ramen .info .box {
		padding: 5rem 4rem 2rem;
	}
	.ramen .info .box:last-child {
		padding-bottom: 8rem;
	}
	.ramen .info h5 {
		font-size: 3.4rem;
		font-weight: 600;
		padding: 0 0 0.3rem 2.5rem;
		border-bottom: solid 0.2rem #bb9515;
	}
	.ramen .info h5::before {
		width: 1rem;
		height: 4.2rem;
		top: 1rem;
	}
	.ramen .info h6 {
		margin-top: 1.5rem;
		font-size: 3rem;
		padding-left: 1em;
	}
	.ramen .info h6::before {
		width: 2rem;
		height: 2rem;
	}
	.ramen .info .infoTxt {
		margin-top: 0.5rem;
		font-size: 3rem;
	}
	.ramen .info .infoTxt + h6 {
		margin-top: 4rem;
	}
}

/* footer */
footer {
	border-top: solid 1px #73664b;
	position: relative;
	z-index: 20;
	background-color: #fff;
	padding: 2rem 0;
}
footer .footerLogo {
	width: 23.6rem;
	margin: 0 auto;
}
footer .copy {
	margin-top: 2rem;
	font-size: 1.4rem;
	text-align: center;
	color: #00428e;
}
@media (max-width: 768px) {
	footer {
		border-top: solid 2px #73664b;
		border-bottom: solid 2.4rem #00a39f;
	}
	footer .footerLogo {
		width: 35.8rem;
	}
	footer .copy {
		margin-top: 2rem;
		font-size: 2.2rem;
	}
}

/* pageTop */
.pageTop {
	position: fixed;
	right: 2rem;
	bottom: 2rem;
	width: 9.7rem;
	height: 10.7rem;
	background: url(../img/pagetop.png) no-repeat center/contain;
	z-index: 30;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.pageTop.isVisible {
	opacity: 1;
	pointer-events: auto;
}
.pageTop a {
	display: block;
	width: 100%;
	height: 100%;
	opacity: 1;
}
.pageTop a:hover {
	opacity: 1;
}
.pageTop:hover,
.pageTop.isScrolling {
	background-image: url(../img/pagetop_on.png);
}
@media (max-width: 768px) {
	.pageTop {
		width: 14.6rem;
		height: 16.1rem;
	}
}