@charset "UTF-8";

/*リセットCSS*/
/* line 20, _scss/_reset.scss */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* line 41, _scss/_reset.scss */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* line 46, _scss/_reset.scss */
nav ul {
  list-style: none;
}

/* line 50, _scss/_reset.scss */
blockquote, q {
  quotes: none;
}

/* line 54, _scss/_reset.scss */
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/* line 60, _scss/_reset.scss */
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* line 69, _scss/_reset.scss */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* line 76, _scss/_reset.scss */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/* line 83, _scss/_reset.scss */
del {
  text-decoration: line-through;
}

/* line 87, _scss/_reset.scss */
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/* line 92, _scss/_reset.scss */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* line 98, _scss/_reset.scss */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/* line 107, _scss/_reset.scss */
input, select {
  vertical-align: middle;
}

/* line 110, _scss/_reset.scss */
input[type=submit] {
  -webkit-appearance: none;
}

/* line 114, _scss/_reset.scss */
li {
  list-style-type: none;
}
/*リセットCSS*/

/* 全体設定 */
.css-carousel-slider4 {
    width: 100%;
    overflow: hidden;
    position: relative;
}
.css-carousel-slider4 img {
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* スライド設定 */
.css-carousel-slider4 .slide-wrap {
    width: 400%;
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    z-index: 0;
    animation: css-carousel-slider4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide-wrap-main {
    width: 100%;
    z-index: 1;
    animation: css-carousel-slider-main4 20s infinite;
    animation-delay: 2s;
}
.css-carousel-slider4 .slide {
    width: 100%;
}

/* スライダーアニメーションの設定 */
@keyframes css-carousel-slider4 {
    0% { transform: translateX(0); }

    20% { transform: translateX(calc(1 / 4 * -100%)); }
    25% { transform: translateX(calc(1 / 4 * -100%)); }

    45% { transform: translateX(calc(2 / 4 * -100%)); }
    50% { transform: translateX(calc(2 / 4 * -100%)); }

    70% { transform: translateX(calc(3 / 4 * -100%)); }
    75% { transform: translateX(calc(3 / 4 * -100%)); }

    95% { transform: translateX(calc(4 / 4 * -100%)); }
    100% { transform: translateX(calc(4 / 4 * -100%)); }
}

@keyframes css-carousel-slider-main4 {
    0% { transform: translateX(100%); }
    75% { transform: translateX(100%); }
    95% { transform: translateX(0%);}
}

.pclogo{
	width: 40vw;
}

a {
color:black;
text-decoration:none;
}

header{
	margin-top: 1%;
	margin-bottom: 0%;
	width: 100%;
	text-align: center;
	float: center;margin: 3% 0 1% 0;
	height:auto;
}

.headerRight{
	display: inline-block;
	font-size:min(2.3vw,30px);
	font-family: 'Noto Sans JP', sans-serif;
	margin: 2%;
}

img.icon{
	width:2vw;
	vertical-align:baseline
}

.mainImage{
	position: relative;
}

.mainImage p {
	position: absolute;
	color:white;
	top:30%;
	left:50%;
	-ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: 100%;
	margin:0px;
  padding:0px;
	text-shadow: 1px 2px 3px #2A2A2A;
	font-size:min(2.1vw,30px);
	font-family: 'Noto Sans JP', sans-serif;
	line-height:6.5vw;
	max-width: 550px;
}

.mainText{
	font-size:min(12vw,100px);
}

.subText{
	font-size:min(4vw,60px);
}

body {
  font-family: 'Noto Sans JP', sans-serif;
 background-image: url("../svg/241019graG+.svg") ;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 0px 200px;
}

.read1{
	width: 50vw;
padding: 5%;
	margin:0 auto;
	text-align: center;
	background-image: url("../svg/backGraGreenAlpha.svg");
	background-size:100% 100%;
	background-repeat: no-repeat;
	font-size: 18px;
	line-height:160%
}

.read10{
	width: 50vw;
padding: 2%;
	margin:0 auto;
	text-align: center;
	background-image: url("../svg/backGraGreenAlpha.svg");
	background-size:100% 100%;
	background-repeat: no-repeat;
	font-size: 18px;
	line-height:160%
}

.mainContent0{
	display:flex;
	justify-content: center;
	flex-wrap:wrap;/* これを指定する */
	margin:0 auto;
	padding: 10px 0 0 0;
	}

.readBlock{
	margin: 0% 3% 0 3%;
	width:290px;
	height: 220px;
	padding: 6% 1% 5% 1%;
	background-image: url("../svg/241019graG2.svg");
	background-repeat: no-repeat;
	background-size: cover;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	display: flex;
  justify-content: center;
  align-items: center;
}
.readBlock2{
	margin: 0 3% 0 2%;
		width:290px;
	height: 300px;
	margin-top: 0%;
	padding: 2% 1% 6% 1%;
	background-image: url("../svg/241019graG3.svg");
	background-repeat: no-repeat;
	background-size:cover;
	font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
		display: flex;
  justify-content: center;
  align-items: center;
}

.Basemax{
	max-width: 900px;
	align-items: center;
	text-align: center;
		margin:0 auto;
}

.innerBlock{
	padding: 5% 5% 10% 8%;
}

.mainContent{
	display:flex;
	justify-content: center;
	}

.ListAsset{
	width: 50%;
	background-image: url("../svg/241019listG.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 0 2% 0 2%;
	float: left;
	margin: 0% 5% 0% 8%;
	text-align: left;
}

.ListAsset2{
	width: 50%;
	background-image: url("../svg/241019listG.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	padding: 0 2% 0 2%;
	float: right;
	margin: 0 8% 0 5%;
	text-align: left;
}

.innerImage{
	width: 90%;
	height: auto;
	margin: 0%;
	padding: 5%;
}

.innerText{
	width: 90%;
	font-size:100%;
	padding-top: 1%;
	padding-bottom: 10%;
	padding-left: 5%;
	padding-right: 5%;
	 font-weight:bold;
	font-family: 'Noto Sans JP', sans-serif;
}

.read2{
	padding: 2%;
	font-size: 2.2vw;
	font-weight: bold;
	margin-bottom: 1vw
}
.block1{
	background: linear-gradient(#72CECE, #FFFFFF);
	width: 100%;
	text-align: center;
	background-repeat: no-repeat;
	background-size:100% auto;
}

.wdMatch{
	width: 100%;
	margin-top: 10%;
	margin-bottom: 10%;
	}

.wdMatch2{
	width: 60%;
	padding: 2%;
}

.wdMatch6{
	width: 250px;
	margin-top: 2%;
}

.caption2{
	font-size: 12px;
	margin-left: 20%;
		margin-right:20%;
	padding-bottom: 10%;
	text-align: left
}

.block0{
	width: 100%;
}

h1{
	margin: 0px;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 5%;
}

h2{
	text-align: center;
	font-size: 3vw;
	margin: 5% 0 0 0;
}

.wdMatch3{
width: 50%;
margin-left: 20%;
margin-right: 20%;}

.block2{
	text-align: center;
	margin-bottom: 10%;
	margin-top: 3%;
	padding-bottom: 5%;
}

.blockBottom{
	background: url("../svg/backGraGreenBtm.svg");
	background-repeat: no-repeat;
	background-size: 100%
	
}
	
.line1{
	margin: 0% 0% 5% 0%;
	text-align: center;
	width:100%;
}

.link1{
	margin: 0%;
	padding: 0%;
}

.caption3{
	text-align: center;
	font-size: 1.6vw;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
}

.block4{
	background-image: url("../svg/241019footer.svg");
	text-align: center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	margin: -10% 0% 0% 0%;
	padding: 5% 0% 5% 0%;
}

.flow{
	width:96vw;
	text-align: center;
	margin:0 auto;
	background-image: url("../svg/241019graL2.svg");
	background-size:cover;
	padding:1% 0% 10% 0%;
	background-repeat: no-repeat;
}

.flow2{
	width: 350px;
	margin-top: 0vw;
	margin-bottom: 0vw
}

.flow3{
	width: 350px;
	margin-top: 0vw;
	margin-bottom: 0vw
}

.flow4{
	width:96vw;
	text-align: center;
	margin:0 auto;
	background-size:cover;
	padding:1% 0% 10% 0%;
	background-repeat: no-repeat;
}

.wrap-video{
  position:relative;
}

.wrap-video video{
  width: 100%;
  height:100%
}

.wrap-video .text{
  position: absolute;
  top: 30%;
  left: 37%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*上下左右中央寄せ*/
}

.wrap-video .text p{
  font-weight:bold;
  color:white;
	text-shadow: 1px 2px 3px #2A2A2A;
	font-size: 2vw;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}

.wrap-video .text .headline{
	font-size: 4vw;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}


footer{
	display: block;
}
#footer .linkArea:after, #footer .copyright:after{
	 content: "";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* line 51, _scss/_layout.scss */
#footer {
  width: 100%;
  clear: both;
}

/*----------------------------------------------------
	フッタ
----------------------------------------------------*/
/* line 768, _scss/_common.scss */
#footer .pagetop {
  position: fixed;
  z-index: 1000;
  right: 50px;
  bottom: 50px;
}
@media screen and (max-width: 768px) {
  /* line 768, _scss/_common.scss */
  #footer .pagetop {
    right: 20px;
    bottom: 20px;
  }
}
/* line 780, _scss/_common.scss */
#footer .linkArea {
  padding: 30px 50px 20px;
  background: #0070b8;
}
/* line 785, _scss/_common.scss */
#footer .linkArea a {
  color: #fff;
}
/* line 788, _scss/_common.scss */
#footer .linkArea ul {
  margin: 0 50px 0 0;
  float: left;
}
/* line 792, _scss/_common.scss */
#footer .linkArea ul li {
  font-size: 108%;
  margin: 0 0 10px 0;
}
/* line 796, _scss/_common.scss */
#footer .linkArea ul li img {
  margin: 0 5px 0 0;
  vertical-align: middle;
}
/* line 803, _scss/_common.scss */
#footer .linkArea ul.nissha a {
  color: #def0f8;
}
/* line 809, _scss/_common.scss */
#footer .copyright {
  padding: 15px 50px;
}
/* line 813, _scss/_common.scss */
#footer .copyright p {
  font-size: 93%;
  text-align: left;
  float: left;
}
/* line 818, _scss/_common.scss */
#footer .copyright img {
  float: right;
  width: 290px;
}
@media screen and (max-width: 960px) {
  /* line 824, _scss/_common.scss */
  #footer .linkArea {
    padding: 30px 30px 20px;
  }
  /* line 827, _scss/_common.scss */
  #footer .copyright {
    padding: 15px 30px;
  }
  /* line 830, _scss/_common.scss */
  #footer .copyright img {
    width: 230px;
  }
}
@media screen and (max-width: 768px) {
  /* line 836, _scss/_common.scss */
  #footer .copyright {
    text-align: center;
    padding: 10px 30px;
  }
  /* line 840, _scss/_common.scss */
  #footer .copyright p {
    float: none;
    text-align: center;
    margin: 5px 0 0 0;
  }
  /* line 845, _scss/_common.scss */
  #footer .copyright img {
    float: none;
  }
}
@media screen and (max-width: 480px) {
  /* line 851, _scss/_common.scss */
  #footer .linkArea {
    padding: 20px 15px 10px;
  }
  /* line 854, _scss/_common.scss */
  #footer .linkArea ul {
    width: 50%;
    margin: 0;
  }
  /* line 859, _scss/_common.scss */
  #footer .copyright {
    padding: 10px 15px;
  }
}

.annotation{
	font-size: 1vw;
	line-height:120%;
}

.annotationS{
	font-size: 80%;
	line-height:120%;
}

.textDesign{
	background-color:navajowhite;
	font-size:26px;
}

.cazaButton{
	border : 10px dotted ;
	border-image: linear-gradient(to bottom, rgba(0,112,184,1), rgba(80,158,47,0.5));
  border-image-slice: 1;
	max-width: 40vw;
	margin: auto;
	margin-bottom: 10%;
	margin-top: 10%;
	padding-left: 6%;
	padding-right: 6%;
	font-size: 16px;
	line-height: 180%;
	text-align: center;
	padding: 3%;
}