@charset "UTF-8";
/* ----------------------------------------------------------------
共通
---------------------------------------------------------------- */
/* ----------------------------------------------------------------
FV
---------------------------------------------------------------- */
.pages #pages_fv .inner:before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background: url("../img/fv_img.jpg")center center no-repeat;
	background-size: cover;
}
@media screen and (max-width: 767px) {
.pages #pages_fv .inner:before{
	background: url("../img/fv_img_sp.jpg")center center no-repeat;
	background-size: cover;
}
.pages #pages_fv {
    height: 300px;
}
}

/* ----------------------------------------------------------------
donnuy
---------------------------------------------------------------- */
#donnuy{
	background: #f2f2f2;
	padding: 45px 0;
}
#donnuy > .inner{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}
#donnuy > .inner .flex_box{
	display: flex;
	justify-content: space-between;
}
#donnuy > .inner .flex_box > div{
	width: 48%;
}
#donnuy > .inner .txt_box .tl{
    font-size: 1.8em;
    font-weight: 500;
	margin-bottom: 30px;
}
#donnuy > .inner .txt_box .donnyu_txt{
	font-size: 1.5em;
	margin-bottom: 30px;
}
#donnuy > .inner .txt_box .txt {
    line-height: 2;
    font-size: 1.2em;
}
#donnuy > .inner .img_box div {
    border-radius: 20px;
    border: solid 1px #000;
    overflow: hidden;
}
#donnuy > .inner .img_box img{
	width: 100%;
}
@media screen and (max-width: 767px) {
#donnuy {
    padding: 30px 0;
}
#donnuy > .inner .flex_box {
    display: block;
}
#donnuy > .inner .flex_box > div {
    width: 100%;
}
	#donnuy > .inner .flex_box > div.txt_box {
		margin-bottom: 30px;
	}
	#donnuy > .inner .txt_box .tl {
    font-size: 1.6em;
    margin-bottom: 10px;
}
#donnuy > .inner .txt_box .donnyu_txt {
    font-size: 1.2em;
    margin-bottom: 10px;
}
	#donnuy > .inner .txt_box .txt {
    line-height: 2;
    font-size: 1em;
}
}
/* ----------------------------------------------------------------
lineup
---------------------------------------------------------------- */
#lineup{
	padding: 100px 0;
}
#lineup > .inner{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}
#lineup .tl{
    font-size: 1.8em;
    font-weight: 500;
	margin-bottom: 30px;
}
#lineup ul {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
}
#lineup ul li{
	width: 32%;
	margin-bottom: 30px;	
}
#lineup ul li div{
	    border-radius: 20px;
    border: solid 1px #000;
    overflow: hidden;
}
#lineup ul li div img{
	width: 100%;
}
#lineup ul li p{
	text-align: center;
	margin-top: 15px;
}
#lineup .btn {
    margin-top: 30px;
}
#lineup .btn a {
    margin: 0 auto;
    width: 205px;
}
@media screen and (max-width: 767px) {
#lineup {
    padding: 40px 0;
}
#lineup .tl {
    font-size: 1.6em;
    margin-bottom: 20px;
}
#lineup ul {
    gap: 4%;
}
#lineup ul li {
    width: 48%;
    margin-bottom: 20px;
}
#lineup ul li div {
    border-radius: 10px;
}
#lineup ul li p {
    margin-top: 5px;
    font-size: 0.9em;
}
	#lineup .btn{
		margin-top: 20px;
	}
}
/* ----------------------------------------------------------------
features
---------------------------------------------------------------- */
#features{
	padding: 80px 0 120px;
}
#features  .pages_tl_area > .inner{
	padding-bottom: 20px;
}
#features .box_area {
    max-width: 1200px;
    position: relative;
    width: 90%;
    margin: 0 auto;
    background: url("../img/features_bg.jpg") center center no-repeat;
    background-size: cover;
    padding: 70px 60px;
    overflow: hidden;
    border-radius: 20px;
}
#features .box_area:before {
    position: absolute;
    content: "";
    background: #00000066;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#features .box_area > div{
	position: relative;
	color: #fff;
	margin-bottom: 50px;
}
#features .box_area > div:last-child{
	margin-bottom: 0;
}
#features .box_area .main{
	font-size: 1.7em;
	margin-bottom: 20px;
}
#features .box_area .sub{
    line-height: 1.9;
}
@media screen and (max-width: 767px) {
	
	#features {
    padding: 10px 0 50px;
}
#features .box_area {
    padding: 30px 30px;
    border-radius: 15px;
}
#features .box_area .main {
    font-size: 1.3em;
}
#features .box_area .sub {
    font-size: 0.9em;
}
#features .box_area > div {
    margin-bottom: 40px;
}
#features .box_area:before {
    background: #0000008a;
}
#features .box_area {
    background: url("../img/features_bg_sp.jpg") center center no-repeat;
    background-size: cover;
}
}
/* ----------------------------------------------------------------
charm
---------------------------------------------------------------- */
#charm {
    padding: 80px 0;
}
#charm > .inner{
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}
#charm > .inner > .tl {
    font-size: 1.8em;
    font-weight: 500;
    margin-bottom: 30px;
}
#charm > .inner ul{
	display: flex;
	    justify-content: space-between;
}
#charm > .inner ul li {
    width: 31%;
    height: 640px;
    color: #fff;
    border-radius: 15px;
    padding: 30px;
    font-size: 0.9em;
	position: relative;
	overflow: hidden;
}
#charm > .inner ul li:before {
    position: absolute;
    content: "";
    background: #00000066;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#charm > .inner ul li:nth-child(1){
	background: url("../img/bg01_2.jpg") center center no-repeat;
	    background-size: cover;
}
#charm > .inner ul li:nth-child(2){
	background: url("../img/bg02.jpg") center center no-repeat;
	    background-size: cover;
}
#charm > .inner ul li:nth-child(3){
	background: url("../img/bg03.jpg") center center no-repeat;
	    background-size: cover;
}
#charm > .inner ul li .main {
    font-size: 1.6em;
    line-height: 1.6;
    margin-top: 10px;
}
#charm > .inner ul li div{
	position: relative;
}
@media screen and (max-width: 767px) {
#charm {
    padding: 20px 0;
}
#charm > .inner > .tl{
    font-size: 1.6em;
    margin-bottom: 10px;
}
#charm > .inner ul {
    display: block;
}
#charm > .inner ul li{
	width: 100%;
	height: auto;
	padding: 0px;
	margin-bottom: 15px;
	color: #fff !important;
	overflow: hidden;
}
	#charm > .inner ul li div{
		        padding: 20px;
	}
#charm > .inner ul li .main {
    font-size: 1.4em;
}
}