@charset "UTF-8";
/* CSS Document */

/*========================================
上書き
========================================*/
@media screen and (max-width: 750px) {
.menuBtn {
animation:menuBtn .4s ease-out 0s both;
}
}

/*========================================
lower css
========================================*/
.lowerHeader {
width: 100%;
height: 30px;
position: relative;
}
.lowerHeader span {
width: 90px;
height: 30px;
background-color: #000;
position: absolute;
top: 0;
right: 0;
}
.lowerWrap {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.lowerTtl {
display: flex;
align-items: baseline;
justify-content: center;
padding: 65px 0;
}
.lowerTtl h2 {
font-family: 'Cabin', sans-serif;
font-size: 55px;
line-height: 1.4em;
font-weight: 500;
}
.lowerTtl p {
min-width: 50px;
text-align: center;
font-size: 13px;
line-height: 1.4em;
font-weight: 500;
color: #FFF;
background-color: #000;
padding: 1px 1em;
margin-left: 15px;
}

/*SP　共通*/
@media screen and (max-width: 750px) {
	.lowerHeader {
	width: 100%;
	height: 34px;
	position: relative;
	}
	.lowerHeader span {
	width: 34px;
	height: 34px;
	}
	.lowerTtl {
	padding: 8% 0;
	}
	.lowerTtl h2 {
	font-family: 'Cabin', sans-serif;
	font-size: 40px;
	line-height: 1.4em;
  font-weight: 500;
	}
}

/*========================================
ofrBtn
========================================*/
.ofrBtn {
width: 400px;
margin: 0 auto;
position: relative;
}
.ofrBtn a {
width: 100%;
display: block;
border: none;
color: #FFF;
text-decoration: none;
font-size: 14px;
line-height: 1.4em;
text-align: center;
font-weight: bold;
padding: 1.2em 0;
}
.ofrBtn .moreArw {
width: calc(100% - 15px);
text-align: right;
position: absolute;
right: 18px;
top: 18px;
pointer-events: none;
}
.ofrBtn .moreArw span {
display: inline-block;
width: 40px;
height: 8px;
border-bottom: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
transform: skew(45deg);
}
.ofrBtn:hover .moreArw {
position: absolute;
right: 10px;
top: 18px;
}
.ofrBtn .moreArw,
.ofrBtn .moreArw::before,
.ofrBtn .moreArw::after { 
-webkit-transition: all .4s;
transition: all .4s;
}
@media screen and (max-width: 750px) {
	.ofrBtn {
	width: 80%;
	margin: 0 auto;
	position: relative;
	}
	.ofrBtn a {
	width: 100%;
	display: block;
	border: none;
	color: #FFF;
	text-decoration: none;
	font-size: 14px;
	line-height: 1.4em;
	text-align: center;
	font-weight: bold;
	padding: 1.2em 0;
	}
	.ofrBtn .moreArw {
	width: calc(100% - 15px);
	text-align: right;
	position: absolute;
	right: 18px;
	top: 18px;
	pointer-events: none;
	}
	.ofrBtn .moreArw span {
	display: inline-block;
	width: 40px;
	height: 8px;
	border-bottom: 1px solid #FFFFFF;
	border-right: 1px solid #FFFFFF;
	transform: skew(45deg);
	}
}

/*========================================
cont css
========================================*/
.brightness:hover {
filter: brightness(125%);
}
.brightness,
.brightness::before,
.brightness::after { 
-webkit-transition: all .2s;
transition: all .2s;
}
@media screen and (max-width: 750px) {
	.brightness:hover {
	filter: brightness(100%);
	}
}

.brand {
width: 100%;
background: url("../images/chirashi_ttl_bg.jpg") top repeat-x;
background-size: 50px;
margin-bottom: 60px;
}
.brand h1 {
max-width: 820px;
margin: 0 auto 60px;
}
.cont {
max-width: 820px;
margin: 0 auto 100px;
padding: 0 40px;
}
.cont .txt {
margin-bottom: 30px;
}
.cont .txt dt {
font-size: 30px;
line-height: 1.3em;
font-weight: 700;
border-bottom: #eaeaea 1px solid;
margin-bottom: 0.6em;
padding: 0.2em;
}
.cont .txt dd p {
font-size: 15px;
line-height: 1.8em;
}
/*SP　compliance*/
@media screen and (max-width: 750px) {
	.brand {
	width: 100%;
	background: #FFF;
	margin-bottom: 10%;
	}
	.brand h1 {
	max-width: 100%;
	margin: 0 auto 6%;
	}
	.cont {
	max-width: 90%;
	margin: 0 auto 12%;
	padding: 0;
	}
	.cont .txt {
	margin-bottom: 5%;
	}
	.cont .txt dt {
	font-size: 6vw;
	line-height: 1.3em;
	font-weight: 700;
	border-bottom: #eaeaea 1px solid;
	margin-bottom: 0.8em;
	padding: 0.2em;
	}
}

/*video*/
.cont .video {
width: 100%;
margin: 0 auto 80px;
border-bottom: #716965 1px solid;
}
.cont .video figure {
width: 480px;
margin: 0 auto;
}
.cont .video h3 {
font-size: 28px;
line-height: 1.4em;
text-align: center;
margin-bottom: 0.5em;
font-weight: normal;
}
.cont .video h3 span {
font-weight: bold;
}
@media screen and (max-width: 750px) {
	.cont .video {
	width: 100%;
	margin: 0 auto 14%;
	}
	.cont .video figure {
	width: 88%;
	margin: 0 auto;
	}
	.cont .video h3 {
	font-size: 4.5vw;
	line-height: 1.2em;
	}
}

/*case*/
.cont .case {
margin-bottom: 100px;
}
.cont .case .read {
text-align: center;
margin-bottom: 30px;
}
.cont .case .read h3 {
font-size: 28px;
line-height: 1.4em;
font-weight: bold;
text-align: center;
margin-bottom: 0.2em;
}
.cont .case .read p {
font-size: 15px;
line-height: 1.4em;
}
.cont .case ul {
display: flex;
justify-content: space-between;
}
.cont .case li {
width: 47%;
text-align: center;
}
.cont .case li a,
.cont .case li a img {
width: 100%;
}
.cont .case li dt {
font-size: 20px;
line-height: 1.4em;
font-weight: bold;
padding: 0.6em 0 0.3em;
}
.cont .case li dd p {
font-size: 15px;
line-height: 1.5em;
}
.cont .case li dd p.cap {
font-size: 11px;
line-height: 1.5em;
}
@media screen and (max-width: 750px) {
	.cont .case {
	margin-bottom: 12%;
	}
	.cont .case .read {
	text-align: center;
	margin-bottom: 8%;
	}
	.cont .case .read h3 {
	font-size: 6vw;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	}
	.cont .case .read p {
	font-size: 15px;
	line-height: 1.5em;
	}
	.cont .case ul {
	display: block;
	}
	.cont .case li {
	width: 88%;
	text-align: center;
	margin: 0 auto 4%;
	}
	.cont .case li dt {
	font-size: 20px;
	line-height: 1.4em;
	font-weight: bold;
	padding: 0.4em 0 0.2em;
	}
	.cont .case li dd p {
	font-size: 15px;
	line-height: 1.4em;
	}
}

/*merit*/
.cont .merit {
margin-bottom: 100px;
}
.cont .merit ul {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.cont .merit li {
width: 48.5%;
margin-bottom: 3%;
}
@media screen and (max-width: 750px) {
	.cont .merit {
	margin-bottom: 12%;
	}
	.cont .merit ul {
	width: 100%;
	display: block;
	}
	.cont .merit li {
	width: 88%;
	margin: 0 auto 3%;
	}
}

/*plan*/
.cont .plan {
margin-bottom: 80px;
}
@media screen and (max-width: 750px) {
	.cont .plan {
	margin-bottom: 10%;
	}
}