@charset "utf-8";

/* ==========================================================================

   RESET

   ========================================================================== */

/*

* http://meyerweb.com/eric/tools/css/reset/

* v2.0 | 20110126

* License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, 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-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}



hr {

	display: block;

	height: 1px;

	border: 0;

	border-top: 1px solid #ccc;

	margin: 1em 0;

	padding: 0;

}



fieldset {

	border: 0;

	margin: 0;

	padding: 0;

}



textarea {

	resize: vertical;

}



* {

	box-sizing: border-box;

}



audio, canvas, iframe, img, svg, video {

	vertical-align: middle;

}



a, a:hover {

	color: inherit;

	text-decoration: none;

}



b {

	font-weight: bold;

}



*:focus {

	outline: none;

}



/* ==========================================================================

   contents

   ========================================================================== */

html{

	scroll-behavior: smooth; 

}



body {

	font-family: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;

	-webkit-text-size-adjust: 100%;

	width: 100%;

	font-weight: bold;

	color: #736a65;

}



body img {

	max-width: 100%;

	height: auto;

}



a:hover {

	opacity: 0.7;

}



.disp-pc { display: block; }

.disp-sp { display: none; }



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

	.disp-pc { display: none; }

	.disp-sp { display: block; }

}



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

}





/* ==========================================================================

   header

   ========================================================================== */



header {

	width: 95vw;

	margin: 0 2.5vw;

	padding: 40px;

	height: 100px;

	background: #fff;

	display: flex;

	justify-content: space-between;

	align-items: center;

	border-radius: 0 0 20px 20px;

	font-size: 120%;

	position: fixed;

	z-index: 3;

}

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

header {

	padding: 10px;

	height: 60px;

	font-size: 100%;

}

}

	

header h1 {

	height: 40px;

	color: #ff0019;

}

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

header h1 {

	height: 20px;

}

}



header h1 img {

	height: 40px;

	margin-right: 30px;

	padding-bottom: 5px;

}

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

header h1 img {

	height: 20px;

	margin-right: 15px;

}

}



header .link {

	display: flex;

	justify-content: flex-end;

	align-items: center;

}

header .link a {

	background: #ff0019;

	color: #fff;

	width: 200px;

	height: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 10px;

	margin-left: 30px;

}

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

header .link a {

	width: 70px;

	height: 40px;

	margin-left: 10px;

	font-size: 80%;

	text-align: center;

}

}



header a:hover {

	color: #fff;

}



/* ==========================================================================

   mvis

   ========================================================================== */



.mvis {

	height: 600px;

	background: url("../img/mvis_bg.png");

	background-size: cover;

	background-position: center;

	padding: 130px 0 0 0;

	position: relative;

	z-index: 1;

}

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

.mvis {

	background: url("../img/mvis_bg_sp.png");

	background-size: cover;

	background-position: center;

	height: 240px;

	padding: 90px 0 0 0;

}

}

.mvis .copy {

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 20px 0;

}

.mvis .copy img {

	width: 19vw;

}

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

.mvis .copy img {

	width: 30vw;

}

}

.mvis .wrap {

	display: flex;

	justify-content: flex-start;

	align-items: flex-start;

	font-size: 240%;

	line-height: 1.4;

	color: #fff;

	background: #ff0019;

	padding: 20px 0 20px 10vw;

}

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

.mvis .wrap {

	align-items: center;

	flex-direction: column;

	font-size: 120%;

	text-align: center;

	padding: 20px 0;

}

}



.mvis a.anchor img {

	position: absolute;

	top: 290px;

	right: 10vw;

	height: 260px;

}

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

.mvis a.anchor img {

	top: 380px;

	right: 5vw;

	height: 150px;

}

}





/* ==========================================================================

   lead

   ========================================================================== */



.lead {

	padding: 0 10vw;

	margin: 40px 0 160px 0;

	text-align: center;

	font-size: 120%;

	line-height: 2.0;

	position: relative;

	z-index: 2;

}

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

.lead {

	padding: 100px 5vw 60px 5vw;

	font-size: 100%;

	margin: 40px 0 40px 0;

}

}





/* ==========================================================================

   pick

   ========================================================================== */



.pickup {

	display: flex;

	flex-flow: column;

	align-items: center;

	padding: 60px 20vw;

	margin: 0 0 120px 0;

	background: #ffeb74;

	line-height: 1.4;

	color: #000;

	text-align: center;

	font-size: 120%;

}

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

.pickup {

	margin: 0 0 60px 0;

	padding: 60px 5vw;

	font-size: 80%;

}

}

.pickup h2 {

	font-size: 180%;

}

.pickup h2 span {

	color: #ff0019;

}

.pickup img {

	margin: 40px 0 0 0;

}



.pickup .link {

	display: flex;

	justify-content: center;

	align-items: center;

	margin: 40px 0 0 0;

}

.pickup .link a {

	background: #ff0019;

	color: #fff;

	width: 200px;

	height: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 10px;

	margin: 0 30px;

}

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

.pickup .link a {

	width: 140px;

	height: 40px;

	margin: 0 5px;

}

}





/* ==========================================================================

   nav

   ========================================================================== */



nav {

	display: flex;

	justify-content: space-between;

	align-items: center;

	padding: 0 20vw;

	margin: 0 0 120px 0;

}

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

nav {

	padding: 0 5vw;

	margin: 0 0 60px 0;

}

}



nav a {

	text-align: center;

	display: flex;

	justify-content: center;

	align-items: center;

	flex-direction: column;

	width: 18vw;

	height: 18vw;

	border: solid 5px #048851;

	border-radius: 9vw;

	font-size: 120%;

	line-height: 1.6;

	color: #000;

}

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

nav a {

	width: 28vw;

	height: 28vw;

	border-radius: 4vw;

	font-size: 80%;

}

}



nav a img {

	width: 30px;

	margin: 40px 0 0 0;

}

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

nav a img {

	width: 20px;

	margin: 10px 0 0 0;

}

}



nav a:hover {

	background: #048851;

	color: #fff;

}



/* ==========================================================================

   section

   ========================================================================== */



section {

	margin: 0 0 120px 0;

	text-align: center;

}

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

section {

	margin: 0 0 60px 0;

}

}



section .head {

	background: url("../img/cate_ttl.png");

	background-position: center bottom;

	background-repeat: no-repeat;

	background-size: 200vw;

}

section .head h3 {

	margin: 0 20vw;

	padding: 0 20px;

	height: 60px;

	background: #048851;

	display: flex;

	justify-content: space-between;

	align-items: center;

	font-size: 120%;

	letter-spacing: 10px;

	color: #fff;

	border-radius: 30px;

}

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

section .head h3 {

	margin: 0 5vw;

	letter-spacing: 0;

}

}



section .head h3 img {

	width: 20px;

}

section .head h4 {

	margin: 0 20vw;

	padding: 40px 0 60px 0;

	font-size: 150%;

	color: #000;

}

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

section .head h4 {

	margin: 0 10vw;

	font-size: 130%;

	line-height: 1.4;

}

}



section .cont {

	line-height: 2.0;

	margin: 80px 20vw 0 20vw;

}

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

section .cont {

	margin: 40px 10vw 0 10vw;

}

}



section .cont .strength {

	margin: 0 0 120px 0;

}

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

section .cont .strength {

	margin: 0 0 60px 0;

}

}



section .cont span {

	color: #ff0019;

	font-size: 130%;

	text-decoration: underline;

	margin: 0 8px;

}

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

section .cont span {

	font-size: 115%;

}

}



section .cont .flex {

	display: flex;

	justify-content: space-between;

	flex-wrap: wrap;

}

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

section .cont .flex {

	flex-direction: column;

	align-items: center;

}

}



section .cont .flex img {

	width: 28vw;

	margin: 0 0 3vw 0;

}

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

section .cont .flex img {

	width: 80vw;

}

}



section .cont .chart {

	width: 30vw;

	margin: 30px 0 50px 0;

}

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

section .cont .chart {

	width: 60vw;

	margin: 30px 0 50px 0;

}

}



section .cont h5 {

	font-size: 130%;

	color: #2eb2a0;

	padding: 5px;

	margin: 0 0 40px 0;

	border-top: solid 5px #2eb2a0;

	border-bottom: solid 2px #2eb2a0;

}

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

section .cont h5 {

	font-size: 120%;

	line-height: 1.4;

	padding: 20px 0;

}

}



section .cont h5 span {

	font-size: 200%;

	color: #2eb2a0;

	text-decoration: none;

}

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

section .cont h5 span {

	font-size: 160%;

}

}





#sec1, #sec2, #sec3, #pickup, #pickup-sp {

	padding-top: 120px;

	margin-top: -120px

}

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

#sec1, #sec2, #sec3, #pickup, #pickup-sp {

	padding-top: 60px;

	margin-top: -60px

}

}



/* ==========================================================================

   footer

   ========================================================================== */



.message {

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	text-align: center;

	font-size: 200%;

	line-height: 1.4;

	color: #2eb2a0;

	padding: 0 20vw;

	background: url("../img/footer_bg.png");

	background-position: center bottom;

	background-size: 300vw;

	background-repeat: no-repeat;

	height: 300px;

}

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

.message {

	align-items: center;

	flex-direction: column;

	font-size: 140%;

	text-align: center;

}

}



.message img.ill {

	height: 150px;

}

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

.message img.ill {

	height: 120px;

	margin: 20px 0 0 0;

}

}



.message .link {

	display: flex;

	justify-content: center;

	align-items: center;

	margin: 80px 0 40px 0;

	font-size: 60%;

}

.message .link a {

	background: #ff0019;

	color: #fff;

	width: 200px;

	height: 50px;

	display: flex;

	justify-content: center;

	align-items: center;

	border-radius: 10px;

	margin: 0 30px;

}

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

.message .link a {

	width: 140px;

	height: 40px;

	margin: 0 5px;

}

}







footer {

	margin: 0 0 100px 0;

}

footer .link {

	background: #ff0019;

	padding: 40px 20vw;

	margin: 0 0 100px 0;

	display: flex;

	justify-content: space-between;

	align-items: center;

}

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

footer .link {

	padding: 40px 10vw;

	margin: 0 0 100px 0;

	flex-direction: column;

}

}



footer .link a {

	background: #fff;

	width: 25vw;

	height: 60px;

	border-radius: 30px;

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 0 30px;

	color: #000;

}

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

footer .link a {

	width: 80vw;

	margin: 10px 0;

}

}



footer .link a img {

	height: 15px;

}

footer .credit {

	text-align: center;

	font-size: 80%;

}