/* -----------------------------------
   リセット 必要ない場合削除 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, a:hover,abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-style:normal;
    font-weight: normal;
    list-style:  none;
}
h1,h2,h3,h4,h5,h6,td,th,p,ul,li,dt,dd {
    font-size: 1em;
}

.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

body {
	-webkit-text-size-adjust: 100%;
	font-size: 15px;
	font-family: "Sawarabi Mincho","ヒラギノヒラギノ明朝 Pro W3", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif, "メイリオ";
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background:#050303;
	color: #fff;
	letter-spacing: 1px;
	text-shadow: 1px 2px 3px #000;
}

/* ------------ header ---------------- */

header{
	position:fixed;
	top: 30px; 
	right: 20px;
	width: auto;
	height:  30px;
	z-index: 1;
}

header span{
	color: #fff;
	text-decoration: none;
}

header span:hover{
	opacity: 0.8;
}

/* ------------ containts ---------------- */

#containts{
	width: 900px;
	margin: 0 auto;
	padding: 0 0 50px;
}

#pc{
	width: 100%;
}

#pc img{
	width: 100%;
}

#sp{
	width: 100%;
	display: none;
}

#container{
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	padding: 0;
}

.co-box{
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

#containts h1{
	width: 500px;
	margin: 0 auto 70px;
}

#containts h1 img{
	width: 100%;
}

#containts h2{
	width: 650px;
	margin: 0 auto 120px;
}

#containts h2 img{
	width: 100%;
}

#containts h3{
	width: 900px;
	margin: 20px 0 150px;
	overflow: hidden;
}

#containts h3 img{
	width: 400px;
	float: right;
}

#containts h4{
	width: 400px;
	margin: 0 auto 30px;
}

#containts h4 img{
	width: 100%;
}

#containts h5{
	width: 600px;
	margin: 50px auto 150px;
}

#containts h5 img{
	width: 100%;
}

.scrl2{
	width: 100%;
	height: 50px;
	font-family: "メイリオ";
	font-size: 14px;
	text-align: center;
}

.scrl2 a{
	text-decoration: none;
	letter-spacing: 2px;
	color: #fff;
}

.arrow2 {
	width: 22px; /* ボックスの横幅を指定する */
	height: 20px; /* ボックスの高さを指定する */
	border-top: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	border-right: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	transform: rotate(135deg); /* ボックスを回転させる（右向き矢印） */
	margin: -7px auto 0;
}

article#co1{
	width: 100%;
	height: 100vh;
	min-height: 780px;
	position: relative;
	background: url(../img/191121_marumi-046_fin.png);
	background-position:  50% -70px;
	background-repeat: no-repeat;
}

section.co1{
	width: 71%;
	position: absolute;
	bottom: 140px;
	left: 15%;
}

section.co1 h1{
	width: 525px;
}

section.co1 h1 img{
	width: 100%;
}

section.co1 p{
	line-height: 2.2;
	margin-bottom: 12px;
}

.scrl{
	width: 100%;
	height: 50px;
	font-family: "メイリオ";
	font-size: 14px;
	position: absolute;
	bottom: 20px;
	text-align: center;
}

.scrl a{
	text-decoration: none;
	letter-spacing: 2px;
	color: #fff;
}

.arrow {
	width: 22px; /* ボックスの横幅を指定する */
	height: 20px; /* ボックスの高さを指定する */
	border-top: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	border-right: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	transform: rotate(135deg); /* ボックスを回転させる（右向き矢印） */
	margin: -7px auto 0;
}

article#co2{
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

article#co2 h1{
	font-size: 2.0em;
	margin-left: 20px;
	position: absolute;
	top: 40px;
	z-index: 100;
}

section.co2{
	width: 100%;
	min-height: 780px;
}

article#co2 img{
	height: 115%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

article#co3{
	width: 100%;
	max-height: 100vh;
	min-height: 780px;
	position: relative;
}

article#co3 h1{
	font-size: 2.0em;
	margin-left: 20px;
	position: absolute;
	top: 40px;
}

section.co3{
	width: 100%;
}

.imgbox{
	width: 60%;
	height: auto;
	position: absolute;
	margin-top: 20px;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.imgbox img{
	width: 25%;
}

article#co4{
	width: 100%;
	min-height: 780px;
	position: relative;
	background: url(../img/bg.jpg) repeat;
}

article#co4 h1{
	font-size: 2.0em;
	margin-left: 20px;
	position: absolute;
	top: 20px;
}

section.co4{
	width: 100%;
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.outbox{
	width: 1080px;
	margin: 130px auto 0;

}

.mainbox{
	width: 1080px;
	height: 320px;
	margin: 0 auto 55px;
}

.box{
	width: 510px;
	height: 320px;
	float: left;
	position: relative;
	overflow: hidden;
}

.box img{
	width: 240px;
	height: 320px;
	float: left;
	margin-right: 20px;
}

.box h2{
	font-size: 2.0em;
	letter-spacing: 3px;
	margin-top: 5px;
}

.box h2.sl{
	font-size: 1.7em;
	letter-spacing: 0;
	margin-top: 5px;
	margin-bottom: 10px;
}

.box p{
	line-height: 1.8;
}

.box p.name{
	text-indent: 3px;
	font-size: 0.8em;
	letter-spacing: 2px;
	margin-bottom: 15px;
}

.lh18{
	width: 250px;
	line-height: 1.;
	position: absolute;
	bottom: 0;
	left: 260px;
}

.lh18 a{
	color: #fff;
	line-height: 2.5;
	padding-bottom: 3px;
	border-bottom: 1px solid #fff;
	text-decoration: none;
}

.spthx{
	width: 980px;
	height: 120px;
	padding: 20px 55px;
	margin: 0 auto;
	background: #000;
}

.spthx h3{
	width: 200px;
	height: 27px;
	padding: 0 10px;
	margin-top: 45px;
	margin-left: 40px;
	font-size: 1.4em;
	line-height: 27px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	float: left;
}

.spthx p{
	width: 600px;
	height: 120px;
	line-height: 2.0;
	float: right;
}

.spthx p img{
	width: 210px;
	float: left;
	margin-right: 20px;
}

article#co5{
	width: 100%;
	max-height: 120vh;
	min-height: 1000px;
	position: relative;
	background: url(../img/191121_marumi-010_fin.jpg);
	background-size: 100%;
	background-position: 0 0%;
	background-repeat: no-repeat;
}

article#co5 h1{
	font-size: 2.0em;
	margin-left: 20px;
	position: absolute;
	top: 0px;
}

section.co5{
	width: 100%;
	position: absolute;
	top: 36%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

p.txt{
	margin-left: 60px;
	position: absolute;
	top: 50px;
}

.outbox2{
	width: 1080px;
	height: 380px;
	margin: 230px auto 30px;
}

.mbox{
	width: 510px;
	height: 380px;
	float: left;
}

.mbox h3{
	font-size: 1.2em;
	margin-bottom: 5px;
}

.mbox p{
	text-indent: 25px;
}

.jpl{opacity: 100;}
.enl{opacity: 0;}
.ensp{
	font-size: 0.97em;
	letter-spacing: 0;
}

.left{float: left;}

.right{float: right;}

.center{
	margin: 0 auto;
	display: block;
}

.mr60{margin-right: 60px;}
.mb10{margin-bottom: 10px;}



/* ------------ footer ---------------- */

footer{
	width: 100%;
	height: 20px;
	background: #492A25;
	padding: 40px 0;
	text-shadow: none;
}

footer ul{
	width: 50%;
	height: 20px;
	line-height: 20px;
	margin-right: 5%;
	text-align: right;
	float: right;
}

footer li{
	width: auto;
	height: 20px;
	margin-left: 25px;
	float: right;
	list-style: none;
}

footer li a{
	color: #fff;
}

footer li a:hover{
	opacity: 0.8;
}

footer p.cr{
	width: 30%;
	height: 20px;
	line-height: 20px;
	margin-left: 5%;
}


/* ------------ googleリマーケティングタグ隙間対策 ---------------- */

iframe[name="google_conversion_frame"] { position: absolute; top: 0; }


/* ------------ 調整用 ---------------- */

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

body {font-size: 14px;}

article#co1{
	width: 100%;
	min-height: 100vh;
}

section.co1{
	bottom: 115px;
	left: 10%;
}

section.co1 h1{width: 490px;}

section.co1 p{line-height: 1.9;}

.scrl{
	font-size: 13px;
	bottom: 25px;
}

.box p.name{margin-bottom: 15px;}

.imgbox{
	width: 75%;
}

article#co5{
	background-position: 0 100%;
}

/* ------------ スマホ用 ---------------- */

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

body {
	width: 450px;
	margin: 0 auto;
	font-size: 15px;
	letter-spacing: 0.5px;
}

#containts{
	width: 450px;
	margin: 0 auto;
	padding: 0 0 50px;
}

#pc{
	display: none;
}

#sp{
	width: 400px;
	margin: 0 auto;
	display: block;
}

#sp img{
	width: 400px;
}

#container{
	width: 100%;
	min-height: 105vh;
	position: relative;
}

#containts h1{
	width: 230px;
	margin: 180px auto 70px;
}

#containts h1 img{
	width: 100%;
}

#containts h2{
	width: 300px;
	margin: 0 auto 120px;
}

#containts h2 img{
	width: 100%;
}

#containts h3{
	width: 400px;
	margin: 20px auto 140px;
	overflow: hidden;
}

#containts h3 img{
	width: 220px;
	float: right;
}

#containts h4{
	width: 250px;
	margin: 0 auto 20px;
}

#containts h4 img{
	width: 100%;
}

#containts h5{
	width: 350px;
	margin: 80px auto 120px;
}

#containts h5 img{
	width: 100%;
}

.scrl2{
	width: 100%;
	height: 50px;
	font-family: "メイリオ";
	font-size: 14px;
	text-align: center;
	margin-bottom: 30px;
}

.scrl2 a{
	text-decoration: none;
	letter-spacing: 2px;
	color: #fff;
}

.arrow2 {
	width: 22px; /* ボックスの横幅を指定する */
	height: 20px; /* ボックスの高さを指定する */
	border-top: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	border-right: 1.5px solid #fff; /* 境界線の上部を実線に指定する*/
	transform: rotate(135deg); /* ボックスを回転させる（右向き矢印） */
	margin: -7px auto 0;
}

.sp{display: none;}

header{top: 20px;}

article{overflow: hidden;}

article#co1{
	width: 100%;
	min-height: 110vh;
	background-size: 220%;
	background-position: 100% 0px;
}

section.co1{
	width: 90%;
	position: absolute;
	top: 10%;
	left: 5%;
}

section.co1 h1{
	width: 285px;
	margin: 10px auto 50px;
}

section.co1 h1 img{
	width: 100%;
}

section.co1 p{
	line-height: 1.55;
	margin-bottom: 10px;
}

.scrl{
	width: 100%;
	height: 50px;
	font-family: "メイリオ";
	position: absolute;
	bottom: 30px;
	text-align: center;
}

.scrl a{letter-spacing: 0.5px;	font-size: 0.8em;}

.arrow {
	width: 18px;
	height: 15px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform: rotate(135deg);
	margin: -9px auto 0;
}

article#co2{
	width: 100%;
	height: 50vh;
}

article#co2 h1{
	font-size: 1.6em;
	margin-left: 20px;
	position: absolute;
	top: 25px;
}

section.co2{
	width: 100%;
	min-height: 800px;
}

article#co2 img{
	width: auto;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

article#co3{
	width: 100%;
	height: 880px;
}

article#co3 h1{
	font-size: 1.6em;
	margin-left: 20px;
	position: absolute;
	top: 40px;
}

section.co3{
	width: 100%;
}

.imgbox{
	width: 80%;
	height: auto;
	margin-top: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.imgbox img{
	width: 50%;
}

article#co4{
	width: 100%;
	height: 2100px;
	position: relative;
}

article#co4 h1{
	font-size: 1.6em;
	margin-left: 20px;
	position: absolute;
	top: 40px;
}

section.co4{
	width: 100%;
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

.outbox{
	width: 90%;
}

.mainbox{
	width: 100%;
	height: auto;
	margin: 0 auto 50px;
	overflow: hidden;
}

.box{
	width: 90%;
	height: auto;
	padding: 0 5% 20px;
	float: left;
	position: relative;
	overflow: hidden;
}

.box img{
	width: 100%;
	height: 100%;
	float: left;
	margin-right: 0px;
	margin-bottom: 15px;
}

.box h2{
	font-size: 1.8em;
	letter-spacing: 2px;
	margin-top: 2px;
	float: left;
}

.box h2.sl{
	width: 100%;
	height: 40px;
	font-size: 1.7em;
	letter-spacing: 0;
	margin-bottom: 0px;
}

.box p.name{
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-indent: 8px;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin-bottom: 0;
}

.lh18{
	width: 100%;
	line-height: 1.8;
	position: relative;
	bottom: 0;
	left: 0;
	margin-bottom: 30px;
}

.spthx{
	width: 90%;
	height: auto;
	padding: 25px 5%;
	margin: 0 auto 15px;
	background: #000;
	overflow: hidden;
}

.spthx h3{
	width: 200px;
	height: 27px;
	padding: 0 10px;
	margin: 20px 0 10px;
	position: relative;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
	font-size: 1.4em;
	line-height: 27px;
	text-align: center;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
}

.spthx p{
	width: 100%;
	height: auto;
	line-height: 1.6;
	float: right;
}

.spthx p img{
	width: 100%;
	float: left;
	margin-right: 0px;
	margin-bottom: 15px;
}

article#co5{
	width: 100%;
	min-height: 1000px;
	padding-bottom: 80px;
}

article#co5 h1{
	font-size: 1.4em;
	margin-left: 20px;
	position: absolute;
	top: 60px;
}

section.co5{
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	-webkit- transform: translateY(-50%) translateX(-50%);
}

p.txt{
	width: 90%;
	font-size: 0.9em;
	margin-left: 23px;
	position: absolute;
	top: 100px;
}

.outbox2{
	width: 90%;
	height: auto;
	margin-top: 210px;
}

.mbox{
	width: 100%;
	height: auto;
	float: left;
	margin-bottom: 50px;
}

.mbox h3{
	font-size: 1.1em;
	margin-bottom: 5px;
}

.mbox p{
	text-indent: 20px;
}

.mbox img{
	width: 100%;
}

.jpl{opacity: 100;}
.enl{opacity: 0;}
.ensp{
	font-size: 0.95em;
	letter-spacing: 0;
}

footer{
	width: 100%;
	height: auto;
	padding: 30px 0 20px;
}

footer ul{
	width: 100%;
	height: 90px;
	line-height: 20px;
	margin-right: 0;
	margin-bottom: 10px;
	text-align: center;
	float: right;
	overflow: hidden;
}

footer li{
	width: 100%;
	height: 30px;
	margin-left: 0px;
	float: right;
	list-style: none;
}

footer p.cr{
	width: 100%;
	height: auto;
	line-height: 1.5;
	margin-left: 0;
	text-align: center;
}

}