@charset "Shift_JIS";

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;
    vertical-align:baseline;
    background:transparent;
}
html{
  font-size:62.5%;
}
body {
    font-size: 1.6rem;
	color:#2d2d2d;
  line-height: 1.6;
  overflow-x: hidden;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
    display:block;
}
ol , ul {
    list-style:none;
}
blockquote, q {
    quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}
mark {
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}
input, select {
    vertical-align:middle;
}
img {
　　　vertical-align: bottom;
　　　font-size:0;
　　　line-height: 0;
	max-width:100%;
}
a:hover img.hoverImg {
	filter:alpha(opacity=70);
	opacity:0.7;
    -moz-opacity: 0.7;
}
a img{border-style:none; transition-duration:0.3s;}

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	font-size:0;
	clear: both;
	visibility:hidden;
}
.clearfix{
	display: inline-block;
}
/* Hides from IE Mac */
* html .clearfix{
	height: 1%;
}
.clearfix{
	display:block;
}
.noto{
	font-family: 'Noto Sans Japanese', serif;
}
.sp_display{
	display:none;
}
.bold{
  font-weight: bold;
}
.fadein { opacity: 0; transition: all 0.5s; position: relative; top: 2em; }

.fadein.scrollin { opacity: 1; transform: translate(0, 0); top: 0em; }

.inner{
	width:74vw;
	margin:0 auto;
	position:relative;
}
.inner .in{
  margin:0 auto;
  width:92%;
}
header h1{
	padding:1vw;
  width:25vw;
  font-size:0px;
}
header .inner{
	display:flex;
	justify-content: space-between;
	align-items:center;
}
main{
  background:url("../images/maintitle_bg.jpg") center top/100% no-repeat;
  transition-duration: 0.5s;
  font-family: "Noto Sans JP", serif!important;
}

.main_v{
  position:relative;
}
.main_v h2{
  position:absolute;
  top:-10vw;
  left:100vw;
  transition-duration: 0.5s;
  width:100vw;
  text-align: right;
}
.main_v h2 img{
  width:51vw;
}
.main_v h2.show{
  top:6vw;
  left:0vw;
}
.lead{
  padding-top:47vw;
  opacity:0;
  transition-duration: 0.3s;
}
.lead.show{
  opacity:1;
}
.lead p{
  font-size:1.5vw;
  text-align: center;
  line-height: 1.8;
  position:relative;
}
.lead img{
  position: absolute;
  top: -16vw;
  left: 0vw;
  width: 72vw;
  
}


#topics{
  background: rgba(255,255,255,0.7);
  margin:7vw auto 0;
  padding:3vw 0;
  border-radius: 1vw;
}
#topics h3{
  text-align: center;
  font-size:2.5vw;
  margin-bottom:0.8em;
}
#topics ul{
  display:flex;
  justify-content: center;
}
#topics ul li{
  margin: 0 0.7vw;
  width:22vw;
}
#inline-content{
  font-size:0px;
}
#inline-content2{
  font-size:0px;
}
#inline-content3{
  font-size:0px;
}


#omoi{
  background:url("../images/omoi_bg.png") center top/100% no-repeat;
  padding-top:28vw;
}
h4{
  color:#FFF;
  font-size:3.5vw;
  line-height: 1.3;
  padding-left:0.7em;
  top:0!important;
  position:relative;
  left:-50vw;
  transition-duration: 0.5s;
  font-weight: normal;
}
h4.scrollin{
  left:0;
}
h4:before{
  content:"";
  position:absolute;
  top:0.15em;
  left:0px;
  height: 1.1em;
  width:0.2em;
  background-color:#FFF;
}
h4 + p{
  color:#FFF;
  font-size:1.5vw;
  line-height: 1.5;
  margin-top:2em;
  top:0!important;
  position:relative;
  left:-50vw;
  transition-duration: 0.5s;
}
h4 + p.scrollin{
  left:0;
}
#omoi ul{
  margin-top:19vw;
}
#omoi ul li{
  display:flex;
  justify-content: center;
  align-items: center;
  margin-bottom:5vw;
}
#omoi ul li img{
  width:55%;
}
#omoi ul li div{
  width:45%;
  box-sizing: border-box;
  padding-left:5%;
}
#omoi ul li:nth-of-type(2) div{
  padding-left:12%;
}
#omoi ul li div{
  font-size:1.2vw;
}
#omoi ul li div p{
  color:#0060ad;
  font-size:2vw;
  font-weight: bold;
  margin-bottom:0.3em;
}
.bg_blue{
  background-color:#e4f2fd;
}
#activity{
  background:url("../images/activity_bg.png") center top/100% no-repeat;
  padding-top:28vw;
}
#activity .bg_blue{
  margin-top:23.4vw;
  padding-bottom:5vw;
}
#activity .bg_blue .text1{
  font-size:1.3vw;
  margin-bottom:3em;
}
#activity .bg_blue ul{
  display:flex;
  justify-content: space-between;
}
#activity .bg_blue ul li{
  width:48.5%;
  font-size:0px;
}
#activity .bg_blue ul li img + p{
  background-color:#0060ad;
  border-bottom-left-radius: 1vw;
  border-bottom-right-radius: 1vw;
  padding:1.5em;
  font-size:1.4vw;
  color:#FFF;
  line-height: 1.7;
}
#activity .bg_blue ul li .caption{
  color:#999999;
  font-size:1vw;
  margin:2em 0;
}
#activity .bg_blue ul li .caption a{
  color:#999999;
  text-decoration: none;
}
#activity .bg_blue .result{
  color:#2f8dd8;
  font-size:1.5vw;
  background-color:#FFF;
  border:solid 1px;
  padding:1.5vw;
  border-radius: 1vw;
}
#evaluation{
  background:url("../images/evaluation_bg.png") center top/100% no-repeat;
  padding-top:28vw;
}
#evaluation h5{
  margin-top:20vw;
}

#voice h5{
  color:#0060ad;
  font-size:1.9vw;
  border-bottom:0.1em solid;
  padding-bottom:0.8em;
  margin-top:3em;
}
#voice ul{
  width:90%;
  margin:0 auto;
}
#voice ul li{
  margin-top:5vw;
  display:flex;
  align-items: center;
}
#voice ul li img{
  height: 15vw;
  width:auto;
}
#voice ul li div{
  background-color:#e4f2fd;
  font-size:2vw;
  padding:1.3em 1em;
  margin-left:2em;
  box-sizing: border-box;
  width:63%;
  border-radius: 1vw;
  position:relative;
}
#voice ul li div:before{
  content:"";
  position:absolute;
  border-top: 1.5vw solid transparent;
  border-right: 1.5vw solid #e4f2fd;
  border-bottom: 1.5vw solid transparent;
  left:-1.4vw;
  top:50%;
  margin-top:-1.5vw;
}
#voice ul li div span{
  font-size:0.6em;
}
#voice ul li:nth-of-type(2){
  justify-content: flex-end;
}
#voice ul li:nth-of-type(2) div{
  margin-left:0em;
  margin-right:2em;
}
#voice ul li:nth-of-type(2) div:before{
  left:auto;
  right:-1.4vw;
  transform: rotate(180deg);
}

#hereafter{
  background:url("../images/hereafter_bg.png") center top/100% no-repeat;
  padding:8vw 0 0vw;
  margin-top:10vw;
  position: relative;
}
#hereafter h5{
  text-align: center;
  color:#0060ad;
  font-size:2.5vw;
  font-weight: normal;
}
#hereafter h5 + p{
  font-size:1.5vw;
  text-align: center;
  margin-top:2em;
  margin-bottom:3em;
}
#hereafter img{
  width:40vw;
  margin:0 auto;
  display:block;
  position:relative;
  bottom:-2vw;
}



footer{
	padding-top:4vw;
	padding-bottom:3vw;
  background-color:#eaebeb;
}
footer .inner{
  display:flex;
  justify-content: space-between;
}
footer ul{
	text-align:center;
  display:flex;
}
footer ul li{
	line-height:1;
	margin-right:1em;
}
footer ul li:last-child{
	border-right:none;
}
footer ul li a{
	color:#2e2d2e;
	text-decoration:none;
	font-size:1vw;
}
footer ul li a:hover{
	text-decoration:underline;
}
footer .copy{
  font-size:1vw;
}
  #back-top {
             position: fixed;
             bottom: 16px;
			 right:20px;
             /**right:50px;**/
			 z-index:9998;
			 display:none;
  }
  #back-top a {
             width: 72px;
             display: block;
             text-decoration: none;
             color: #bbb;
  }
  #back-top a:hover {
             color: #000;
  }
  /* arrow icon (span tag) */
  #back-top span {
             width: 72px;
             height: 72px;
             display: block;
             margin-bottom: 7px;
             background: url(../images/btn_pagetop.png) center center/contain no-repeat;
			 
}
#back-top.fixed{
	transition-duration:0.5s;
	opacity:1;
}

@media screen and (max-width: 768px){
.pc_display{
	display:none;
}
.sp_display{
	display:block;
}
.inner {
    width: 90%;
}
.inner .in {
    width: 100%;
}
  html { font-size: 2.2vw; }
main img{
	width:100%;
}

html,body{
	overflow-x:hidden;
}
header {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
	background-size:2vw;
}
header .inner{
	display:block;
}
header h1{
	width:45vw;
	margin-left:0vw;
  font-size:0px;
  padding-left:0px;
}

  main {
    background: url(../images/maintitle_bg_sp.jpg) center top / 100% no-repeat;
}
  
.main_v h2 img {
    width: 69vw;
}
  .main_v h2 {
    top: 20vw;
}
  .main_v h2.show {
    top: 45vw;
    left: 0vw;
}
  .lead {
    padding-top: 96vw;
}
  .lead p {
    font-size: 3.5vw;
}
  .lead img {
    top: -10vw;
    left: -1vw;
    width: 93vw;
}
  #topics {
    padding: 10vw 0;
}
  #topics h3 {
    font-size: 5vw;
    margin-bottom: 0.8em;
}
  #topics ul {
    flex-wrap: wrap;
    padding:0 5vw;
    justify-content: space-between;
}
  #topics ul li {
    margin: 0;
    width: 39vw;
}
  #inline-content iframe{
    width:90vw;
    height: 50.625vw;
  }
  #inline-content2 iframe{
    width:90vw;
    height: 50.625vw;
  }
  #inline-content3 iframe{
    width:90vw;
    height: 50.625vw;
  }
  
  #omoi {
    background: url(../images/omoi_bg_sp.png) center top / 100% no-repeat;
    padding-top: 35vw;
    margin-top:8vw;
}
  h4 {
    font-size: 6.5vw;
  }
  h4 + p {
    font-size: 3vw;
}
  #omoi ul {
    margin-top: 31vw;
}
  #omoi ul li {
    margin-bottom: 8vw;
}
  #omoi ul li div {
    font-size: 3vw;
}
  #omoi ul li div p {
    font-size: 4vw;
}
  #omoi ul li:nth-of-type(2) div {
    padding-left: 0;
    padding-right:3vw;
}
  #activity {
    background: url(../images/activity_bg_sp.png) center top / 100% no-repeat;
    padding-top: 35vw;
}
#activity .bg_blue .text1 {
    font-size: 3.5vw;
}
  #activity .bg_blue {
    margin-top: 27.4vw;
    padding-top: 5vw;
    padding-bottom: 5vw;
}
#activity .bg_blue ul {
    display: block;
}
  #activity .bg_blue ul li {
    width: 100%;
}
  #activity .bg_blue ul li img + p {
    font-size: 3vw;
}
  #activity .bg_blue ul li .caption {
    font-size: 2vw;
margin: 2em 0 4em;
}
  #activity .bg_blue .result {
    font-size: 3.5vw;
    padding: 1em;
}
  #evaluation {
    background: url(../images/evaluation_bg_sp.png) center top / 100% no-repeat;
    padding-top: 31vw;
}
  #voice h5 {
    font-size: 4.5vw;
}
  #voice ul{
    width:100%;
  }
  #voice ul li {
    margin-top: 8vw;
    flex-wrap: wrap;
}
  #voice ul li div {
    font-size: 4vw;
    padding: 1.3em 1em 2em;
    margin-left: 0em;
    width: 100%;
    order:1;
    border-radius: 2vw;
}
  #voice ul li div:before{
    display:none;
  }
  #voice ul li img {
    height: 30vw;
    width: auto;
    order:2;
    margin: -5vw auto 0;
    z-index:1;
}
  #voice ul li:nth-of-type(2) div {
    margin-right: 0em;
}
  #hereafter {
    background: url(../images/hereafter_bg.png) center top / 200% no-repeat;
    padding: 15vw 0 0vw;
    margin-top: 15vw;
}
#hereafter h5 {
    font-size: 5.5vw;
}
  #hereafter h5 + p {
    font-size: 3vw;
}
  #hereafter img {
    width: 60vw;
}
  
  
  
footer {
	background-size:cover;
    padding-top: 15vw;
    padding-bottom: 3vw;
}
  footer .inner{
    display:block;
  }
  footer ul{
    display:flex;
    justify-content: space-between;
  }
footer ul li {
    line-height: 1;
    margin-left: 0em;
    margin-right: 0em;
	margin-bottom:0.8em;
	box-sizing:border-box;
}
footer ul li:last-child {
	margin-bottom:0em;
}
footer ul li a {
    font-size: 2.5vw;
	margin:0 0.5em;
}
footer ul li:nth-of-type(2) {
    border-right: none;
    padding-right: 0em;
}
  footer .copy {
    font-size: 2.5vw;
    text-align: center;
    margin-top:1em;
}
  #back-top {
             position: fixed;
	bottom:15vw;
			 right:0.5em;
             /**right:50px;**/
			 z-index:5100;
  }
  #back-top a {
             width: 4em;
             display: block;
             text-decoration: none;
             color: #bbb;
  }
  /* arrow icon (span tag) */
  #back-top span {
             width: 3.5em;
			 height:3.5em;
             display: block;
             margin-bottom: 7px;
			 background-size:contain;
}



}