@charset "utf-8";

#main_ {width:1140px;}

#contents {margin-top:-100px;}
#contents > h1 {display:none;}
#contents > section {padding:60px 0 0;}
#contents > section > h1 {font-size:2.2rem;}

#contents > #message {
	display:-webkit-flex; display:flex; 
	-webkit-flex-direction:column; flex-direction:column; 
	-webkit-justify-content:center; justify-content:center; 
	-webkit-align-items:center; align-items:center; 
	height:100vh; position:relative; margin:0 calc(50% - 50vw); padding:0; background:#000; color:#fff; overflow:hidden;}
#contents > #message > * {position:relative; z-index:3;}
#contents > #message > .image {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; overflow:hidden;}
#contents > #message > .image > img, 
#contents > #message > .image > video {
	display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5); pointer-events:none;}
#contents > #message > .image > *.landscape {}
#contents > #message > .image > *.portrait  {display:none;}
#contents > #message > small {display:block; font-size:2.2rem; font-weight:bold; line-height:1;}
#contents > #message > h1 {width:260px; height:0; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; padding:180px 0 0; background:url(images/logo-mark.svg) center center no-repeat; overflow:hidden;}

/*#contents > #message > .yosakoi {display:block; position:absolute; left:20px; bottom:20px; text-decoration:none; opacity:0.5; transition:opacity 0.5s ease-in-out;}*/
/*#contents > #message > .yosakoi:hover {opacity:1;}*/
/*#contents > #message > .yosakoi > img {display:block;}*/
#contents > #message > .marugo-tokyo {display:block; position:absolute; left:20px; bottom:20px; text-decoration:none; opacity:0.5; transition:opacity 0.5s ease-in-out;}
#contents > #message > .marugo-tokyo:hover {opacity:1;}
#contents > #message > .marugo-tokyo > img {display:block;}
#contents > #message > .koyaya {display:block; position:absolute; left:300px; bottom:20px; text-decoration:none; opacity:0.5; transition:opacity 0.5s ease-in-out;}
#contents > #message > .koyaya:hover {opacity:1;}
#contents > #message > .koyaya > img {display:block;}
#contents > #message > .important {position:absolute; z-index:5; right:400px; bottom:75px; padding:2px 10px 2px 10px; color:#fff; background:#000;}
#contents > #message > .importantBG {position:absolute; z-index:4; right:15px; bottom:75px; padding:0 5px 0 5px; font-size:medium; color:#fff;}
#contents > #message > .youtube {display:block; position:absolute; right:290px; bottom:20px; font-weight:500;}
#contents > #message > .questionary {display:block; position:absolute; right:20px; bottom:20px; font-weight:500;}

#contents > #message > .scroll {
	display:block; width:1em; height:0; position:absolute; left:0; right:0; bottom:0; margin:auto; padding:1em 0 0; 
	font-size:10rem; text-decoration:none; overflow:hidden; transition:opacity 0.2s ease-in-out;}
#contents > #message > .scroll::after {display:block; content:"\e822"; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; font:normal 1em/1 icons;}
#contents > #message > .scroll:hover::after {opacity:0.5;}

/*html.fac-js-enabled:not(.fac-loaded) #contents > #message > .yosakoi {opacity:1;}*/
html.fac-js-enabled:not(.fac-loaded) #contents > #message > .marugo-tokyo {opacity:1;}

#contents > #news {
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	margin:40px 0 0; padding:0;}
#contents > #news > .c-notes > h1 {font-size: x-large;}
#contents > #news > .c-notes > .current-page > .contArea {
    display: flex;
    border-bottom: 1px solid #d1c3af;
    padding: 3px 3px;
}
#contents > #news > .c-notes > .current-page > .contArea > li {font-size:2rem;}
#contents > #news > .c-notes > .current-page > .contArea > .date {width: 21%;}
#contents > #news > .c-notes > .current-page > .contArea > .title {width: 64%;}
#contents > #news > .c-notes > .current-page > .contArea > .file {width: 15%;}
#contents > #news > .c-notes > .current-page > .contArea > .date > span.newMark{
    color:#FFF;
    background:#fd6500;
    font-weight:bold;
    padding:0.1em 0.4em 0.1em 0.4em;
    margin:0 0 0 1.5em;
    border-radius:4px;
    font-size:1.2rem;
}
#contents > #news > .c-notes > .current-page > .contArea > .file > .typePdf {
	padding: 0 0 0 1.8em;
	background: url(../news/images/icon_pdf.png) no-repeat left center;
}
#contents > #news > .c-notes > .current-page > .contArea > .file > .typeImg {
	padding: 0 0 0 1.8em;
	background: url(../news/images/icon_img.png) no-repeat left center;
}

#contents > #business {
	display:-webkit-flex; display:flex; 
	-webkit-flex-wrap:wrap; flex-wrap:wrap; 
	margin:40px 0 0; padding:0;}
#contents > #business > h1 {display:none;}
#contents > #business > section {
	-webkit-flex:1 1 50%; flex:1 1 50%; 
	display:-webkit-flex; display:flex; 
	-webkit-flex-direction:column; flex-direction:column; 
	-webkit-justify-content:center; justify-content:center; 
	-webkit-align-items:center; align-items:center; 
	height:500px; position:relative; color:#fff;}
#contents > #business > section > * {position:relative; z-index:2;}
#contents > #business > section > .image {position:absolute; left:0; right:0; top:0; bottom:0; z-index:1; overflow:hidden;}
#contents > #business > section > .image > img {display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5); pointer-events:none;}
#contents > #business > section > small {display:block; font-size:1.7rem; font-weight:bold; line-height:1; pointer-events:none;}
#contents > #business > section > h1 {margin:0.5em 0 0; font-size:3.3rem; font-weight:inherit; line-height:1; pointer-events:none;}
#contents > #business > section > .more {
	min-width:6em; position:static; z-index:1; margin:2em 0 0; padding:0.6em 1em; border-color:rgba(255,255,255,0.5); color:#fff; font-size:1.2rem; text-align:center; text-decoration:none;}
#contents > #business > section > a.more::after {display:block; content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;}
#contents > #business > section > a.more:hover {background:#fff; color:#000;}

#contents .content {float:left; width:550px; position:relative; margin:60px 20px 0; padding:290px 90px 35px; box-sizing:border-box; text-align:center;}
#contents .content::after {display:block; content:""; position:absolute; left:60px; right:60px; top:260px; bottom:0; z-index:-1; transform:translate3d(0,0,0); background:#fff;}
#contents .content > .image {position:absolute; left:0; right:0; top:0; z-index:-2;}
#contents .content > .image > img {display:block; width:100%; height:auto;}
#contents .content > small {display:block; font-size:1.6rem; font-weight:bold; line-height:1;}
#contents .content > h1 {margin:0.3em 0 0; font-size:3.1rem; font-weight:inherit; line-height:1;}
#contents .content > .more {min-width:6em; position:static; margin:1.3em auto 0; padding:0.6em 1em; font-size:1.2rem; text-align:center;}
#contents .content > .more::after {content:""; position:absolute; left:0; right:0; top:0; bottom:0;}

#contents > #recruit {margin-left:0;}

#contents > #about {margin-right:0;}

#contents > #news {clear:both;}
#contents > #news > h1 {}
#contents > #news > .c-news-list {margin:2em 0 0;}

#contents > #online-shop {clear:both;}
#contents > #online-shop::after {display:block; content:''; clear:both; height:0;}
#contents > #online-shop > h1 {padding-bottom:1.5em;}
#contents > #online-shop > ul {
	display:-webkit-flex; display:flex; 
	position:relative; padding:20px;}
#contents > #online-shop > ul::after {content:""; position:absolute; left:0; right:0; top:0; bottom:0; border:1px solid #e5e5e5; pointer-events:none;}
#contents > #online-shop > ul > li {
	-webkit-flex:1 1 100%; flex:1 1 100%; 
	margin:0 0 0 20px;}
#contents > #online-shop > ul > li:first-child {margin-left:0;}
#contents > #online-shop > ul > li > a {display:block; text-decoration:none; transition:opacity 0.2s ease-in-out;}
#contents > #online-shop > ul > li > a:hover {opacity:0.7;}
#contents > #online-shop > ul > li img {display:block; width:100%; height:auto;}
#contents > #online-shop > .questionary {display:block; float:right; margin:1em 0 0; font-size:1.4rem;}

#contents > #marugo-koyaya {position:relative; margin:130px 0 0; padding:40px 40px 40px 630px; background:#f2f2f2;}
#contents > #marugo-koyaya::after {display:block; content:''; clear:both; height:0;}
#contents > #marugo-koyaya > h1 {position:absolute; left:0; top:-60px;}
#contents > #marugo-koyaya > .image {display:block; width:570px; position:absolute; left:0; top:0; bottom:0; text-decoration:none; overflow:hidden; transition:opacity 0.2s ease-in-out;}
#contents > #marugo-koyaya > .image:hover {opacity:0.7;}
#contents > #marugo-koyaya > .image > img {
	display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5);}
#contents > #marugo-koyaya > .map {float:left; margin:0 0 2em;}
#contents > #marugo-koyaya > .map > img {display:block;}
#contents > #marugo-koyaya > table {float:right; width:210px; margin:0 0 2em; line-height:1.7;}
#contents > #marugo-koyaya > table caption {width:130px; padding:0 0 1em; text-align:left;}
#contents > #marugo-koyaya > table caption > strong {
	display:block; height:0; margin:-10px 0 0 -10px; padding:87.6923% 0 0; background:url(images/marugo_logo.png) no-repeat; overflow:hidden;}
#contents > #marugo-koyaya > table th, 
#contents > #marugo-koyaya > table td {padding:0.3em 0 0; text-align:left;}
#contents > #marugo-koyaya > table th {font-weight:bold; white-space:nowrap;}
#contents > #marugo-koyaya > table td {padding-left:2em;}
#contents > #marugo-koyaya > .googlemaps {clear:both; display:table;}
#contents > #marugo-koyaya > p {clear:both; display:table; font-size:1.2rem;}

#contents > #marugo-kurashiki {position:relative; margin:130px 0 0; padding:40px 40px 40px 630px; background:#f2f2f2;}
#contents > #marugo-kurashiki::after {display:block; content:''; clear:both; height:0;}
#contents > #marugo-kurashiki > h1 {position:absolute; left:0; top:-60px;}
#contents > #marugo-kurashiki > .image {display:block; width:570px; position:absolute; left:0; top:0; bottom:0; text-decoration:none; overflow:hidden; transition:opacity 0.2s ease-in-out;}
#contents > #marugo-kurashiki > .image:hover {opacity:0.7;}
#contents > #marugo-kurashiki > .image > img {
	display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5);}
#contents > #marugo-kurashiki > .map {float:left; margin:0 0 2em;}
#contents > #marugo-kurashiki > .map > img {display:block;}
#contents > #marugo-kurashiki > table {float:right; width:210px; margin:0 0 2em; line-height:1.7;}
#contents > #marugo-kurashiki > table caption {width:130px; padding:0 0 1em; text-align:left;}
#contents > #marugo-kurashiki > table caption > strong {
	display:block; height:0; margin:-10px 0 0 -10px; padding:87.6923% 0 0; background:url(images/marugo-kurashiki_logo.png) no-repeat; overflow:hidden;}
#contents > #marugo-kurashiki > table th, 
#contents > #marugo-kurashiki > table td {padding:0.3em 0 0; text-align:left;}
#contents > #marugo-kurashiki > table th {font-weight:bold; white-space:nowrap;}
#contents > #marugo-kurashiki > table td {padding-left:2em;}
#contents > #marugo-kurashiki > .googlemaps {clear:both; display:table;}
#contents > #marugo-kurashiki > p {clear:both; display:table; font-size:1.2rem;}

#contents > #marugo-tokyo {position:relative; margin:130px 0 0; padding:40px 40px 40px 630px; background:#f2f2f2;}
#contents > #marugo-tokyo::after {display:block; content:''; clear:both; height:0;}
#contents > #marugo-tokyo > h1 {position:absolute; left:0; top:-60px;}
#contents > #marugo-tokyo > .image {display:block; width:570px; position:absolute; left:0; top:0; bottom:0; text-decoration:none; overflow:hidden; transition:opacity 0.2s ease-in-out;}
#contents > #marugo-tokyo > .image:hover {opacity:0.7;}
#contents > #marugo-tokyo > .image > img {
	display:block; width:auto; min-width:200%; height:auto; min-height:200%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5);}
#contents > #marugo-tokyo > .map {float:left; margin:0 0 2em;}
#contents > #marugo-tokyo > .map > img {display:block;}
#contents > #marugo-tokyo > table {float:right; width:210px; margin:0 0 2em; line-height:1.7;}
#contents > #marugo-tokyo > table caption {width:130px; padding:0 0 1em; text-align:left;}
#contents > #marugo-tokyo > table caption > strong {
	display:block; height:0; margin:-10px 0 0 -10px; padding:87.6923% 0 0; background:url(images/marugo-tokyo_logo.png) no-repeat; overflow:hidden;}
#contents > #marugo-tokyo > table th, 
#contents > #marugo-tokyo > table td {padding:0.3em 0 0; text-align:left;}
#contents > #marugo-tokyo > table th {font-weight:bold; white-space:nowrap;}
#contents > #marugo-tokyo > table td {padding-left:2em;}
#contents > #marugo-tokyo > .googlemaps {clear:both; display:table;}
#contents > #marugo-tokyo > .indoormaps {clear:both; display:table;}

/* fonts */
#contents #message > small, 
#contents #message > .more, 
#contents > #message, 
#contents > #news > h1, 
#contents > #online-shop > h1
	{font-family:brandon-grotesque,sans-serif;}

@media screen and (max-width:1200px) {
#contents > #message {margin:0 -30px;}
}


@media screen and (max-width:599px) {

#main_ {width:auto;}

#contents {display:block; margin-top:-50px;}
#contents > h1 {}

#contents > section {padding:8vw 0 0;}
#contents > section > h1 {font-size:1.9rem;}

#contents > #message {height:100vh; margin:0 -30px;}
#contents > #message > * {}
#contents > #message > h1 {width:45vw; padding-top:31.1537vw; transform:translateY(-10%);}
#contents > #message > .image {}
#contents > #message > .image > img, 
#contents > #message > .image > video {}
#contents > #message > .image > *.landscape {display:none;}
#contents > #message > .image > *.portrait  {display:block;}
#contents > #message > small {font-size:1.1rem;}
#contents > #message > h1 {font-size:2.4rem;}
#contents > #message > .important {display:none;}
#contents > #message > .importantBG {left:4vw; bottom:55vw; padding:1vw 1vw 0 0; font-weight:bold; font-size:1.4rem; color:#f2f2f2;}
#contents > #message > .marugo-tokyo {width:52%; left:4vw; bottom:27vw;}
#contents > #message > .marugo-tokyo > img {width:100%; height:auto;}
#contents > #message > .koyaya {width:52%; left:4vw; bottom:12vw;}
#contents > #message > .koyaya > img {width:100%; height:auto;}
#contents > #message > .youtube {right:2vw; bottom:26vw; font-size:1.2rem;}
#contents > #message > .questionary {right:2vw; bottom:11vw; font-size:1.2rem;}
#contents > #message > .scroll {display:none; font-size:8rem;}

#contents > #news {margin:2vw 0 2vw;}
#contents > #news > .c-notes > h1 {font-size:1.4rem;}
#contents > #news > .c-notes > .current-page > .contArea {display: flex;flex-wrap: wrap;font-size:1.2rem;}
#contents > #news > .c-notes > .current-page > .contArea > li {font-size:1.2rem;}
#contents > #news > .c-notes > .current-page > .contArea > .date {width: 50vw;}
#contents > #news > .c-notes > .current-page > .contArea > .title {width: 100vw;}

#contents > #business {display:block; margin:0 -30px;}
#contents > #business > h1 {}
#contents > #business > section {height:88.9333vw; margin:-1px 0 0;}
#contents > #business > section > * {}
#contents > #business > section > .image {}
#contents > #business > section > .image > img {}
#contents > #business > section > small {font-size:1.1rem;}
#contents > #business > section > h1 {font-size:2.4rem;}
#contents > #business > section > .more {margin-top:1.3em;}
#contents > #business > section > a.more::after {}
#contents > #business > section > a.more:hover {}
#contents > #business > section > a.more:hover::after {}

#contents .content {float:none; width:auto; margin:10vw 0 0; padding:44vw 14vw 4vw;}
#contents .content::after {left:9.3333vw; right:9.3333vw; top:40vw; bottom:0; background:#f2f2f2;}
#contents .content > .image {}
#contents .content > .image > img {}
#contents .content > small {font-size:0.9rem;}
#contents .content > h1 {font-size:1.8rem;}
#contents .content > .more {font-size:1rem;}

#contents > #recruit {}

#contents > #about {}

#contents > #online-shop {}
#contents > #online-shop::after {}
#contents > #online-shop > h1 {padding-bottom:1em;}
#contents > #online-shop > ul {padding:2vw;}
#contents > #online-shop > ul::after {}
#contents > #online-shop > ul > li {margin-left:2vw;}
#contents > #online-shop > ul > li:first-child {margin-left:0;}
#contents > #online-shop > ul > li > a {}
#contents > #online-shop > ul > li > a:hover {}
#contents > #online-shop > ul > li img {}
#contents > #online-shop > .questionary {margin-top:0.5em; font-size:1.1rem;}

#contents > #marugo-koyaya {margin:16vw 0 0; padding:0 5vw 5vw; font-size:1rem;}
#contents > #marugo-koyaya > h1 {top:-12vw;}
#contents > #marugo-koyaya > .image {position:relative; width:auto; height:0; margin:0 -5vw; padding:63.4920% 0 0;}
#contents > #marugo-koyaya > .image > img {}
#contents > #marugo-koyaya > .map {width:calc(50% - 2.5vw); margin:5vw 0 0;}
#contents > #marugo-koyaya > .map > img {width:100%; height:auto;}
#contents > #marugo-koyaya > table {width:calc(50% - 2.5vw); margin:5vw 0 1em;}
#contents > #marugo-koyaya > table caption {width:50%; padding:0 0 0.5em;}
#contents > #marugo-koyaya > table caption > strong {margin:-1vw 0 0 -1vw; background-size:contain;}
#contents > #marugo-koyaya > table th, 
#contents > #marugo-koyaya > table td {}
#contents > #marugo-koyaya > table th {}
#contents > #marugo-koyaya > table td {padding-left:0.5em;}
#contents > #marugo-koyaya > p {padding-left:0.5em; font-size:1rem;}

#contents > #marugo-kurashiki {margin:16vw 0 0; padding:0 5vw 5vw; font-size:1rem;}
#contents > #marugo-kurashiki > h1 {top:-12vw;}
#contents > #marugo-kurashiki > .image {position:relative; width:auto; height:0; margin:0 -5vw; padding:63.4920% 0 0;}
#contents > #marugo-kurashiki > .image > img {}
#contents > #marugo-kurashiki > .map {width:calc(50% - 2.5vw); margin:5vw 0 0;}
#contents > #marugo-kurashiki > .map > img {width:100%; height:auto;}
#contents > #marugo-kurashiki > table {width:calc(50% - 2.5vw); margin:5vw 0 1em;}
#contents > #marugo-kurashiki > table caption {width:50%; padding:0 0 0.5em;}
#contents > #marugo-kurashiki > table caption > strong {margin:-1vw 0 0 -1vw; background-size:contain;}
#contents > #marugo-kurashiki > table th, 
#contents > #marugo-kurashiki > table td {}
#contents > #marugo-kurashiki > table th {}
#contents > #marugo-kurashiki > table td {padding-left:0.5em;}
#contents > #marugo-kurashiki > p {padding-left:0.5em; font-size:1rem;}

#contents > #marugo-tokyo {margin:16vw 0 0; padding:0 5vw 5vw; font-size:1rem;}
#contents > #marugo-tokyo > h1 {top:-12vw;}
#contents > #marugo-tokyo > .image {position:relative; width:auto; height:0; margin:0 -5vw; padding:63.4920% 0 0;}
#contents > #marugo-tokyo > .image > img {}
#contents > #marugo-tokyo > .map {width:calc(50% - 2.5vw); margin:5vw 0 0;}
#contents > #marugo-tokyo > .map > img {width:100%; height:auto;}
#contents > #marugo-tokyo > table {width:calc(50% - 2.5vw); margin:5vw 0 1em;}
#contents > #marugo-tokyo > table caption {width:50%; padding:0 0 0.5em;}
#contents > #marugo-tokyo > table caption > strong {margin:-1vw 0 0 -1vw; background-size:contain;}
#contents > #marugo-tokyo > table th, 
#contents > #marugo-tokyo > table td {}
#contents > #marugo-tokyo > table th {}
#contents > #marugo-tokyo > table td {padding-left:0.5em;}
#contents > #marugo-tokyo > .googlemaps {}
#contents > #marugo-tokyo > .indoormaps {}
}