@charset "utf-8";
/* CSS Document */
html{
	font-size: 62.5%;
}
body{
	font-size: 1.6em;
}

div.container_ascii{
	max-width: 1200px;
	margin: 5em auto;
	line-height: 1.5;
	width: 90%;
}
div.container_bcn{
	max-width: 1200px;
	margin: 0 auto 5em auto;
	line-height: 1.5;
	width: 90%;
}
div.ascii_header,
div.bcn_header{
	color: black;
	border-bottom: 1px solid #ccc;
	margin-bottom: 3em;
	padding-bottom: 2.5em;
}
div.ascii_header .cate{
	font-weight: 700;
	margin-bottom: 2em;
}
div.ascii_header .subtitle{
	font-size: 0.8em;
}
div.ascii_header ul,
ul.logo_bcn{
	display: flex;
}
ul.logo_bcn{
    width: 70%;
    margin: auto;
}
div.ascii_header > ul li:first-child{
	width: 60%;
}
div.ascii_header > ul li:last-child{
	width: 40%;
}
div.ascii_header ul li img{
	height: 280px;
	width: auto;
}
div.ascii_header h1{
	font-size: 3.2rem;
	margin-bottom: 1em;
}
div.ascii_header ul.logo,
ul.logo_bcn{
	margin-top:3em;
}
div.ascii_header ul.logo li,
ul.logo_bcn li{
	width: auto;
	font-size: smaller;
}
div.ascii_header ul.logo li img,
ul.logo_bcn li img{
	height: auto;
}
div.ascii_header ul.logo li p{
	padding-left: 3em;
}
ul.logo_bcn li p{
	padding: 0 0 0 3em;
}

div.header_img{
    position: relative;
    text-align: center;
    color: black;
}
div.header_img div.header_text{
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    padding:0;
}

div.header_img div.header_text .subtitle{
    font-size: 2.2em;
    font-weight: 600;
}
div.header_img div.header_text h1{
    font-size: 4em;
}
div.maincontents{
	width: 70%;
	margin: 7em auto;
	line-height: 1.8em;
}
div.maincontents p{
	margin: 2em auto;
}
div.maincontents h2{
	font-size: 2.4rem;
	padding: 0.2em 0 0 0.7em;/*上下 左右の余白*/
  	color: black;/*文字色*/
  	background: transparent;/*背景透明に*/
  	border-left: solid 6px #4d5269;/*左線*/
	font-weight: 700;
	vertical-align: middle;
	margin: 2em 0;
}
div.maincontents h2.bcn_h2{
    border: none;
    display: block;
    background-color: #684c40;
    color: white;
    padding: 15px 0;
    text-align: center;
    margin: 5em auto 2em 0;
}
div.maincontents h3.bcn_h3{
    font-size: 2rem;
    background: transparent;
    border-left: solid 10px #3DB3A3;
    padding-left: 10px;
    margin: 4em 0 0 0;
}
div.maincontents div.imgset{
	margin: 3em auto;
	width: 62%;
	display: block;
    text-align: center;
}
div.maincontents div.imgset img{
	max-width: 100%;
	height: auto;
	margin-bottom: 0;
}
div.maincontents .imgset > p{
	text-align: left;
	margin-top: 0;
	font-size: smaller;
}
div.maincontents ul{
	margin-left: 3em;
	list-style-type: disc;
}
div.intel{
	width: 70%;
	margin: 4em auto;
	font-size: smaller;
}
div.intel ul{
	display: flex;
	justify-content: space-between;
	margin-bottom:1em;
}
div.intel ul li:first-child{
	width: 20%;
	text-align: center;
}
div.intel ul li:last-child{
	width: 75%;
}
/* SP */
.sp div.container_ascii{
	margin:1em auto;
	width: 100%;
	font-size: 1.4rem;
}
.sp div.ascii_header{
	margin: auto;
	width: 95%;
}
.sp div.ascii_header h1{
	font-size: 2.5rem;
}
.sp div.maincontents h2{
	font-size: 2rem;
}
.sp div.ascii_header ul{
	flex-direction: column;
}
.sp div.ascii_header ul li{
	width: 100%;
}
.sp  div.ascii_header ul li{
	width: 95%;
}
.sp ul.logo li img{
	width: auto;
}
.sp div.ascii_header ul.logo li p{
	padding-left:0;
	margin-top: 1em;
}
.sp div.maincontents{
	width: 95%;
	margin: 0 auto;
}
.sp div.maincontents div.imgset{
	width: 95%;
}
.sp .box-magazine-index{
	width: 95%;
	padding:10px 15px;
}
.sp .box-magazine-index dl dd{
	padding: 0 10px 0 10px;
}
.sp .intelWrapper{
	width:100%;
	padding: 0 15px;
    box-sizing: border-box;
}
.sp div.intel{
	width: 95%;
}
.sp div.intel ul{
	flex-direction: column;
}
.sp div.intel ul li img{
	width: initial;
}
.sp div.intel ul li{
	width: 100%;
	margin-top:1em;
}
.sp .share{
	margin:1em;
}
.sp div.header_img div.header_text .subtitle{
    font-size: 1.6em;
}
.sp div.header_img div.header_text h1{
    font-size: 3em;
}
.sp div.header_img img{
    height: 200px;
}
.sp div.header_img div.header_text{
    top: 20%;
}
.sp ul.logo_bcn{
    width: 100%;
}
.sp div.maincontents div.imgset img{
    max-width: 100%;
}
.sp div.container_bcn{
	width: 95%;
}
.product_link{
	display: flex;
    justify-content: space-evenly;
    margin-top: 3em;
}
.sp .product_link{
	flex-wrap: wrap;
	flex-direction: column;
}
.product_link a{
	display: block;
    padding: 15px;
    color: white;
    font-weight: 800;
    background-color: #a43758;
    text-decoration: none;
	width: 25%;
	min-width: 200px;
    text-align: center;
}
.sp .product_link a{
	margin:1em auto;
}
.contact{
	margin-top:4em;
}
.contact .title {
    text-align: center;
    padding: 2%;
    width: 70%;
    background-color: lightgray;
    font-weight: 700;
    margin: auto;
}
.contact .call {
    padding: 2%;
    width: 70%;
    border: 1px solid lightgray;
    margin: auto;
    text-align: center;
}

.sp .contact .title,
.sp .contact .call {
    width: 95%;
}
span.tel {
    font-size: 3em;
}
a.btn {
    padding: 1em;
    background-color: #4d5269;
    color: white;
    font-weight: 800;
	display: block;
	margin: 1em auto;
    text-decoration: none;
    width: 20em;
    text-align: center;
}