@charset "utf-8";

@media screen and (max-width: 767.98px) {
/*BASE*/
img { width:100%; height:auto; }

#headerNavi li.item .en {
	color:var(--color-logo) !important;
}

/*RANKING*/
#ranking {
	background-color:#FFF;
	background-image:url(../images/omlank/bgimg.jpg);
	padding:4rem 2rem;
}
#ranking::before {
	content: "";
	display:block;
	background:rgba(255,255,255,.9);
	width:100%;
	height:120%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#ranking .content-box {
}
#ranking ol.ranking > li {
	box-shadow:0 0 10px rgba(0,0,0,.5);
	border-radius:6px;
	overflow:clip;
}
#ranking ol.ranking > li:not(:last-child) {
	margin-bottom:2rem;
}
#ranking ol.ranking > li .img-box {
}
#ranking ol.ranking > li .img-box img {
	width:100%;
}
#ranking ol.ranking > li .txt-box {
	padding:1rem 1rem;
}
#ranking ol.ranking > li h2,
#ranking ol.ranking > li .comment-box {
	
}
#ranking ol.ranking > li .txt-box h2 {
	font-size:20px;
	font-weight:700;
	text-align:center;
	padding-bottom:1rem;
	margin-bottom:1rem;
	border-bottom: dotted 4px var(--color-logo);
}
#ranking ol.ranking > li .txt-box .comment-box {
	text-align:justify;
	margin-bottom:2em;
}
#ranking ol.ranking > li .txt-box .button {
	display:block;
	text-align:center;
	color:#FFF;
	background-color:var(--color-logo);
	padding:1em 0;
	border:solid 1px var(--color-logo);
}
#ranking ol.ranking > li .txt-box .button:hover {
	color:var(--color-logo);
	background-color:#FFF;
}

/*Order Channel*/
#order_channel {
	padding:4rem 2rem;
	background-color:rgba(240,240,240,1);
}
#order_channel .content-box {
}
#order_channel .content-box .img-box {
	aspect-ratio: 1 / 1;
	margin-bottom:1rem;
	position:relative;
	overflow:clip;
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
	position:absolute;
	top:-10%;
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
}
#order_channel .content-box .txt-box {
}
#order_channel .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1rem;
}
#order_channel ul.channel {
}
#order_channel ul.channel > li {
	padding:0 1rem 1rem 0;
}
#order_channel ul.channel > li/*:not(.ec)*/ {
	border-bottom: dotted 4px #F00;
	border-right: dotted 4px #F00;
}
#order_channel ul.channel > li:not(:last-child) {
	margin-bottom:2rem;
}

/*縦向き*/
@media (orientation: portrait){
}
/*横向き*/
@media (orientation: landscape){
}
}

/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/

/*HEADER*/
#headerNavi li.item .en {
	color:var(--color-logo) !important;
}


/*RANKING*/
#ranking {
	background-color:#FFF;
	background-image:url(../images/omlank/bgimg.jpg);
	padding:100px 80px;
}
#ranking::before {
	content: "";
	display:block;
	background:rgba(255,255,255,.9);
	width:100%;
	height:120%;
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#ranking .content-box {
	max-width:1440px;
	margin:auto;
}
#ranking ol.ranking > li {
	display:flex;
	flex-wrap:nowrap;
}
#ranking ol.ranking > li:nth-child(odd) {
	flex-direction:row;
}
#ranking ol.ranking > li:nth-child(even) {
	flex-direction:row-reverse;
}
#ranking ol.ranking > li .img-box,
#ranking ol.ranking > li .txt-box {
	width:calc(100% / 2);
}
#ranking ol.ranking > li .img-box img {
	width:100%;
}
#ranking ol.ranking > li .txt-box {
	display:flex;
	flex-flow:column nowrap;
	justify-content:center;
	padding:0 40px;
}
#ranking ol.ranking > li:nth-child(odd) .txt-box {
	padding-left:0;
}
#ranking ol.ranking > li:nth-child(even) .txt-box {
	padding-right:0;
}
#ranking ol.ranking > li h2,
#ranking ol.ranking > li .comment-box {
	padding-left:40px;
	padding-right:40px;
	
}
#ranking ol.ranking > li .txt-box h2 {
	font-size:clamp(24px, 2.4vw, 32px);
	font-weight:700;
	padding-bottom:1rem;
	margin-bottom:1rem;
	border-bottom: dotted 4px var(--color-logo);
}
#ranking ol.ranking > li .txt-box .comment-box {
	text-align:justify;
	margin-bottom:2em;
}
#ranking ol.ranking > li .txt-box .button {
	display:block;
	text-align:center;
	color:#FFF;
	background-color:var(--color-logo);
	padding:1em 0;
	margin: 0 40px;
	border:solid 1px var(--color-logo);
	border-radius:6px;
}
#ranking ol.ranking > li .txt-box .button:hover {
	color:var(--color-logo);
	background-color:#FFF;
}

/*Order Channel*/
#order_channel {
	padding:100px 80px;
	background-color:rgba(240,240,240,1);
}
#order_channel .content-box {
	display:flex;
	align-items:center;
	column-gap:60px;
	max-width:1440px;
	margin:auto;
}
#order_channel .content-box .img-box {
	text-align:right;
	width:calc(40% - 60px);
}
#order_channel .content-box .img-box img {
	width:100%;
	height:auto;
}
#order_channel .content-box .txt-box {
	width:60%;
}
#order_channel .content-box .txt-box h1 {
	color:#544034;
	margin-bottom:1em;
}
#order_channel ul.channel {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.5em 3em;
}
#order_channel ul.channel > li {
	padding:0 1em 1em 0;
}
#order_channel ul.channel > li/*:not(.ec)*/ {
	border-bottom: dotted 4px #F00;
	border-right: dotted 4px #F00;
}
#order_channel ul.channel .tel {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#order_channel ul.channel .fax {
	grid-row: 2 / 3;
	grid-column: 1 / 2;
}
#order_channel ul.channel .mail {
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}
#order_channel ul.channel .ec {
	grid-row: 3 / 4;
	grid-column: 1 / 3;
}

}