@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;
  text-decoration: none;
}

/* 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*/

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;
  }
}
/* footerここまで */


body {
   font-family: 'Noto Sans JP', sans-serif;
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { 
	display: block !important;
	width: 100%;
}
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

.pclogo { 
	display: block !important;
	width: 40%;
	margin:0 auto;
}
.splogo { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
    .pclogo { display: none !important; }
    .splogo { 
		display: block !important;
		width: 50%;
		margin:0 auto;
	}
}



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

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

.headerRight{
	display: inline-block;
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 1%;
}

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

.wrap-video{
  position:relative;
}

.wrap-video video{
	position:relative;
  width: 100%;
}

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

.wrap-video .text {
  font-weight:bold;
  color:white;
	text-shadow: 1px 2px 3px #2A2A2A;
	font-size: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	z-index: 2;
}

.wrap-video .text .headline{
	font-size: 26px;
	font-family: 'Noto Sans JP', sans-serif;
	z-index: 1;
}

.shoulder{
	font-size: 14px;
}

.base{
	margin:0 auto;
	width: 100%;
	max-width: 900px;
	font-size: 21px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	padding: 5% 0% 5% 0%;
	line-height:170%
}
	
.credit{
	display: block;
	font-size: 10px;
	margin: 0px 0 0 -10%;
	transform: scale(0.8);
}

.annotation{
	font-size: 12px;
}


.innerBlock{
	margin:5% 0 10% 0;
}

.block0{
	width: 100%;
}

.block1{
	background-image: 
url("../svg/backGraIncline1.svg");
	background-size: 100% auto  ;
	text-align: center;
	background-repeat: no-repeat;
	padding-top: 15%;
	padding-bottom: 15%;
	margin-top: 0%;
}

.block2{
	background-image: url("../svg/backGraIncline2.svg");
	background-size:  100% auto;
	background-repeat: no-repeat;
		padding: 12% 0% 5% 0%;
	margin:0 auto;
}

.block2a{
	background-image: url("../svg/backGraIncline2.svg");
	background-size:  100% auto;
	background-repeat: no-repeat;
		padding: 5% 0% 5% 0%;
	margin:0 auto;
}

.block3{
	background-image: url("../svg/backGraIncline3.svg");
	background-size: cover;
	text-align: center;
	background-repeat: no-repeat;
	padding: 10% 0 5% 0;
	margin: 0 0 5% 0;
	width:100%;
}

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

.block4a{
	background-image: url("../svg/backGraIncline4.svg");
	background-size:  100% auto;
	text-align: center;
	background-repeat: no-repeat;
	margin-bottom: 0%;
	padding: 5% 5% 2% 5%;
}

.block1 p{
	font-size: 20px;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	font-weight:bold;
	margin-left: 10%;
	margin-right: 10%;
}
.wdMatch{
	margin-top: 5%;
	margin-bottom: 5%;
	width:100%;
	text-align: center
	}

.wdMatch2{
	width: 250px;
	padding: 0%;
	margin-bottom: 2%;
}

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

.wdMatch4 {
	margin-top: 0%;
	margin-bottom: 0%;
	width:400px;
	}

.wdMatch5{
	width: 250px;
	padding: 0%;
	margin: 5%;
}

.wdMatch6{
width: 200px;
margin: 0% 0% 0% 0%;
}

.caption2{
	width:400px;
	text-align: left;
		font-size: 16px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	margin : 0 auto;
}


.caption3{
	margin:0 auto;
	text-align: center;
	font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	width: 100%;
	padding: 2% 0 2% 0;
}

.caption4{
	width:400px;
	text-align: left;
		font-size: 14px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	margin : 0 auto;
	margin-top: 5%;
}

h1{
	margin: 0% 0% 2% 0%;
	padding:0% 10% 0% 10%;
	font-size: 30px;
}

li{
	font-size: 16px;
	margin: 5% 0 0 0;
}

.block3 p{
	margin:0 auto;
	font-size: 20px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:bold;
	width:400px;
	text-align: left;
	margin-top: 5%;
}
