@charset "utf-8";

/*-----------------------------------------------
  font
-----------------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap");
/* font-family: "Noto Sans JP", sans-serif; */

/*-----------------------------------------------
  text
-----------------------------------------------*/
html {
overflow-y: scroll;
}
body {
font-size: 16px;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
line-height: 1.75;
font-feature-settings: "palt";
letter-spacing: 0.5px;
color: #000;
}
a {
color: inherit;
text-decoration: none;
transition: 0.2s;
}
a:hover {
text-decoration: none;
}
img {
display: block;
width: 100%;
height: auto;
}
.sp {
display: none;
}
@media screen and (max-width: 800px) {
	body {
	font-size: 3.5vw;
	line-height: 1.5;
	}
	.pc {
	display: none;
	}
	.sp {
	display: block;
	}
}

/*-----------------------------------------------
  header
-----------------------------------------------*/
header {
background: #000;
}
header .inner {
max-width: 1000px;
margin: auto;
padding: 10px 4%;
}
header .logo {
display: flex;
align-items: center;
}
header .logo dd {
width: 60px;
}
header .logo dt {
width: 300px;
margin-left: 40px;
}
@media screen and (max-width: 800px) {
	header .logo dd {
	width: 12%;
	}
	header .logo dt {
	width: 60%;
	margin-left: 4%;
	}
}

/*-----------------------------------------------
  title
-----------------------------------------------*/
main .title_area {
height: 64vw;
padding: 4%;
background-image: url("../img/title_bg.png");
background-position: center top;
background-repeat: no-repeat;
background-size: 100%;
}
main .title_area .title {
width: 50%;
min-width: 650px;
margin: auto;
}
main .title_area .banner {
max-width: 1000px;
margin: auto;
margin-top: calc(40vw - 280px);
}
@media screen and (max-width: 1200px) {
	main .title_area {
	height: 1000px;
	background-size: cover;
	}
	main .title_area .banner {
	margin-top: 400px;
	}
}
@media screen and (max-width: 800px) {
	main .title_area {
	height: 176vw;
	padding: 4%;
	background-image: url("../img/title_bg_sp.png");
	background-size: 100%;
	}
	main .title_area .title {
	width: 100%;
	min-width: 100%;
	margin-top: 4%;
	}
	main .title_area .banner {
	width: 100%;
	margin-top: 48vw;
	}
}

/* bg */
main {
background: #389D39;
}
main .bg1 {
background-image: url("../img/main_bg1.png");
background-position: center top 540px;
background-repeat: no-repeat;
background-size: 100%;
}
main .bg2 {
background-image: url("../img/main_bg2.png");
background-position: center bottom 120px;
background-repeat: no-repeat;
background-size: 100%;
}
@media screen and (max-width: 800px) {
	main .bg1 {
	background: none;
	}
	main .bg2 {
	background: none;
	}
}

/* lineup */
main .lineup {
padding: 0 4%;
}
main .lineup .inner {
max-width: 1000px;
margin: auto;
}
main .lineup h2 {
width: 65%;
max-width: 620px;
margin: auto;
}
main .lineup .box {
position: relative;
margin-top: 60px;
padding: 50px 20px;
background: #F7F7EC;
background-image: url("../img/lineup_bg.png");
background-position: center top;
background-repeat: repeat-y;
background-size: 100%;
border-radius: 18px;
}
main .lineup .head {
display: flex;
justify-content: flex-start;
align-items: center;
margin-left: 40px;
}
main .lineup .logo_sdp {
width: 50%;
max-width: 380px;
}
main .lineup .grid {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 40px;
}
main .lineup .benefits {
width: 40%;
}
main .lineup .photo {
width: 56%;
}
main .lineup .photo figcaption {
margin-left: 3em;
font-size: 0.8em;
}
main .lineup .msg_spec {
margin-top: 30px;
font-size: 1.5em;
font-weight: 700;
text-align: center;
color: #008640;
}
main .lineup .msg_spec strong {
font-size: 1.35em;
font-weight: 900;
color: #E66C14;
}
main .lineup .msg_grade {
margin-top: 0.5em;
font-size: 1.25em;
text-align: center;
color: #008640;
}
main .lineup .msg_note {
max-width: 880px;
margin: auto;
margin-top: 0.25em;
font-size: 0.9em;
text-align: justify;
color: #008640;
}
main .lineup .btn {
margin-top: 30px;
}
main .lineup .btn a {
display: block;
max-width: 12em;
margin: auto;
padding: 0.75em;
font-size: 1.65em;
font-weight: 700;
line-height: 1.25;
text-align: center;
color: #FFF;
background: linear-gradient(-45deg, #008640 50%, #009540 50%);
border: 3px solid #FFF;
border-radius: 3em;
box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
main .lineup .btn a:hover {
background: linear-gradient(-45deg, #009540 50%, #008640 50%);
}
main .lineup .btn .arw {
padding: 0 1.5em;
background-image: url("../img/arw_right.svg");
background-position: center right;
background-repeat: no-repeat;
background-size: 0.6em;
}
main .lineup .btn_zanka a {
max-width: 16em;
padding: 0.3em 0.3em 0.75em 0.3em;
border-radius: 1em;
}
main .lineup .btn_zanka .zanka {
display: block;
margin-bottom: 0.5em;
padding: 0.2em;
font-size: 0.75em;
color: #008640;
background: #FFF000;
border-radius: 3em;
}
main .lineup .btn_zanka .arw {
margin-top: 0.5em;
}
@media screen and (max-width: 800px) {
	main .lineup {
	margin-top: 4%;
	padding: 0 2.5%;
	}
	main .lineup h2 {
	width: 90%;
	margin: auto;
	}
	main .lineup .box {
	margin-top: 4%;
	padding: 8% 2.5%;
	border-radius: 10px;
	}
	main .lineup .head {
	display: block;
	margin: auto;
	}
	main .lineup .head img {
	margin: auto;
	}
	main .lineup .logo_sdp {
	width: 95%;
	}
	main .lineup .grid {
	flex-direction: column-reverse;
	justify-content: center;
	align-items: center;
	margin: 0;
	}
	main .lineup .benefits {
	width: 100%;
	margin: auto;
	margin-top: 4%;
	}
	main .lineup .photo {
	width: 100%;
	}
	main .lineup .photo figcaption {
	margin: 0 2%;
	}
	main .lineup .msg_spec {
	margin-top: 4%;
	font-size: 1.25em;
	}
	main .lineup .msg_grade {
	font-size: 1.2em;
	}
	main .lineup .msg_note {
	font-size: 0.9em;
	}
	main .lineup .btn {
	margin-top: 6%;
	}
	main .lineup .btn a {
	padding: 0.65em;
	font-size: 1.5em;
	border: 2px solid #FFF;
	}
	main .lineup .pict {
	display: none;
	}
}


/* outlander_phev */
main .outlander_phev.box {
margin-top: 30px;
}
main .outlander_phev .logo {
width: 40%;
max-width: 320px;
}
main .outlander_phev .grid {
margin-top: 20px;
}
main .outlander_phev .benefits {
width: 34%;
}
main .outlander_phev .photo {
width: 62%;
margin-top: -100px;
}
main .outlander_phev .pict1 {
position: absolute;
top: -120px;
right: -140px;
width: 280px;
}
main .outlander_phev .pict2 {
position: absolute;
bottom: -50px;
left: -130px;
width: 250px;
}
@media screen and (max-width: 800px) {
	main .outlander_phev .logo {
	width: 70%;
	}
	main .outlander_phev .grid {
	margin-top: 4%;
	}
	main .outlander_phev .benefits {
	width: 90%;
	}
	main .outlander_phev .photo {
	width: 100%;
	margin: 0;
	}
}

/* delica_d5 */
main .delica_d5 .logo {
width: 35%;
max-width: 260px;
}
@media screen and (max-width: 800px) {
	main .delica_d5 .head {
	width: 100%;
	margin: auto;
	}
	main .delica_d5 .logo {
	width: 60%;
	}
	main .delica_d5 .grid {
	margin-top: 0;
	}
}

/* delica_mini */
main .delica_mini .logo {
width: 50%;
max-width: 400px;
}
main .delica_mini .photo img {
width: 95%;
}
main .delica_mini .pict3 {
position: absolute;
top: -180px;
right: -120px;
width: 380px;
}
main .delica_mini .pict4 {
position: absolute;
bottom: -100px;
left: -80px;
width: 120px;
}
@media screen and (max-width: 800px) {
	main .delica_mini .head {
	width: 100%;
	margin: auto;
	}
	main .delica_mini .logo {
	width: 85%;
	}
	main .delica_mini .photo {
	margin: 0;
	}
}

/* menu */
@media screen and (max-width: 800px) {
	main .lineup .menu {
	display: flex;
	justify-content: space-between;
	margin-top: 4%;
	padding: 0 2%;
	color: #FFF;
	}
	main .lineup .menu li {
	width: 33.333%;
	height: 43vw;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	}
	main .lineup .menu a {
	display: block;
	height: 100%;
	background-image: url("../img/arw_down.svg");
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 4em;
	}
	main .lineup .menu img {
	height: 18vw;
	object-fit: contain;
	}
}

/* note */
main .note {
max-width: 830px;
margin: auto;
padding: 0 2%;
margin-top: 30px;
font-size: 0.9em;
text-align: justify;
color: #FFF;
}
@media screen and (max-width: 800px) {
	main .note {
	margin-top: 4%;
	}
}


/* campaign */
main .campaign {
margin-top: 100px;
padding: 0 4%;
}
main .campaign .inner {
max-width: 1000px;
margin: auto;
}
main .campaign .box {
padding: 60px 60px 40px 60px;
background: #008640;
border: 4px solid #FFF;
border-radius: 15px;
}
main .campaign .head {
max-width: 700px;
margin: auto;
margin-top: -110px;
padding: 25px;
background: #008640;
border-radius: 10px;
}
main .campaign .banner li {
margin-top: 20px;
}
main .campaign .banner a:hover {
opacity: 0.7;
}
@media screen and (max-width: 800px) {
	main .campaign {
	margin-top: 8%;
	padding: 0 2.5%;
	}
	main .campaign .box {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	}
	main .campaign .head {
	width: 95%;
	margin: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	}
	main .campaign .banner li {
	margin-top: 2.5%;
	}
}

/* present */
main .present {
margin-top: 70px;
padding: 0 4% 60px 4%;
}
main .present .inner {
max-width: 800px;
margin: auto;
}
main .present .box {
padding: 30px 10px 10px 30px;
background: #FFF;
border-radius: 15px;
}
main .present .head {
max-width: 300px;
margin: auto;
margin-top: -65px;
}
main .present .grid {
display: flex;
justify-content: space-between;
align-items: top;
margin-top: -10px;
}
main .present .text {
width: 60%;
font-size: 1.25em;
font-weight: 700;
line-height: 1.5;
}
main .present .text strong {
display: inline-block;
margin-top: 0.15em;
font-size: 2em;
font-weight: 900;
line-height: 1.25;
color: #389D74;
}
main .present .text small {
font-size: 0.65em;
font-weight: 400;
}
main .present .photo {
width: 40%;
}
@media screen and (max-width: 800px) {
	main .present {
	margin-top: 10%;
	padding: 6%;
	text-align: center;
	}
	main .present .box {
	padding: 4%;
	border-radius: 10px;
	}
	main .present .head {
	width: 90%;
	margin-top: -16%;
	}
	main .present .grid {
	display: block;
	margin-top: 0;
	}
	main .present .text {
	width: 100%;
	text-align: center;
	}
	main .present .text strong {
	font-size: 1.65em;
	}
	main .present .photo {
	width: 100%;
	}
}

/*-----------------------------------------------
  footer
-----------------------------------------------*/
footer {
padding: 40px 4% 20px 4%;
background: #000;
}
footer .inner {
max-width: 880px;
margin: auto;
}
@media screen and (max-width: 800px) {
	footer {
	padding: 6% 4% 5em 4%;
	}
}

/* data */
footer .data {
position: relative;
color: #FFF;
}
footer .mark {
position: absolute;
top: 0;
right: 0;
width: 100px;
}
footer .data .logo {
width: 320px;
}
footer .data .url {
margin-top: 0.25em;
font-size: 0.9em;
}
@media screen and (max-width: 800px) {
	footer .mark {
	width: 20%;
	}
	footer .data .logo {
	width: 70%;
	}
	footer .data .url {
	font-size: 0.85em;
	}
}

/* sns */
footer .sns {
display: flex;
align-items: center;
margin-top: 10px;
}
footer .sns li {
width: 40px;
}
footer .sns li:not(:first-child) {
margin-left: 1.5em;
}
footer .sns li:hover {
opacity: 0.75;
}
@media screen and (max-width: 800px) {
	footer .sns {
	margin-top: 2%;
	}
	footer .sns li {
	width: 10%;
	max-width: 50px;
	}
	footer .sns li:not(:first-child) {
	margin-left: 4%;
	}
}

/* shop */
footer .shop {
position: fixed;
top: calc(50% - 4em);
right: -11em;
z-index: 100;
transition: 0.5s;
}
footer .shop.active {
right: 0;
}
footer .shop a {
display: block;
padding: 0.75em;
font-size: 1.25em;
font-weight: 700;
line-height: 1.4;
color: #B1893E;
background: #FFF;
border: 2px solid #C5C5C5;
border-right: 0;
border-radius: 10px 0 0 10px;
}
footer .shop a:hover {
background-color: #E1E1E1;
}
footer .shop span {
display: block;
padding-top: 2.2em;
background-image: url("../img/ico_shop.svg");
background-position: top left;
background-repeat: no-repeat;
background-size: 3em;
}
footer .shop .arw {
display: inline;
width: 0.6em;
margin-left: 0.8em;
vertical-align: top 1em;
}
@media screen and (max-width: 800px) {
	footer .shop {
	width: 100%;
	top: auto;
	bottom: -4em;
	right: 0;
	}
	footer .shop.active {
	bottom: 0;
	}
	footer .shop a {
	display: block;
	padding: 0.85em;
	font-size: 1.25em;
	letter-spacing: 0.1em;
	text-align: center;
	background-position: left 1em center;
	background-size: 2em;
	border: 0;
	border-radius: 0;
	}
	footer .shop span {
	display: inline;
	padding: 0 0 0 3.5em;
	background-position: left center;
	background-size: 2.5em;
	border: 0;
	border-radius: 0;
	}
}

/* copyright */
footer .copyright {
margin-top: 20px;
font-size: 0.75em;
text-align: center;
color: #878787;
}
@media screen and (max-width: 800px) {
	footer .copyright {
	margin-top: 4%;
	}
}