@charset "utf-8";
/* CSS Document */
html{
	font-size:62.5%;
    font-family: Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}
body{
	font-size:1.6rem;
}
h2{
	font-size:4rem;
	color: #16B5BA;
}
h3{
	font-size:3.2rem;
}
h4{
	font-size:2.1rem;
/*	color: #16B5BA;*/
}
/*
a{
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    opacity: .5;
}
*/
/*基本色 #9ed0ce：薄い  #16b5ba:濃い*/
/*
.font01{
    font-family: Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
},'Amiri'
*/
.font01 {
    font-family:"Mongolian Baiti";
}
.height01{
	display: inline-block;
	letter-spacing: 0.1em;
}
.height02{
	display: inline-block;
	letter-spacing: 0.2em;
}
.viiv00 {
    position: relative;
    top: 80px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(100vh - 510px);
}
.viiv00 h2{
    display: block;
}
.privacy {
    width: 1080px;
    margin: 0 auto;
    padding: 200px 0;
}
.privacy h1{
    margin-bottom: 100px;
}
.privacy h2{
    text-align: left;
    font-size: 20px;
    margin-top: 50px;
  }
.privacy dl{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.privacy dt {
    width: 30%;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.privacy dd{
    width: 70%;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/*-----------------viiv01--------------------*/

.viiv01 {
    position: relative;
    top: 80px;
    background-color: #9ed0ce;
    overflow: hidden;
    height: 920px;
    /* height: calc(100vh - 80px); */
}
.viiv01 figure video {
     width: 100%; 
    position: absolute;
    top: 0;
    left: 7%;
    height: 990px;
    object-fit: cover;
}
.viiv01 .box03 {
    width: 320px;
    background-color: #fff;
    /* height: calc(100vh - 80px); */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: absolute;
    left: 7%;
    z-index: 1;
    padding: 90px 0 140px;
    height: 920px;
}
.viiv01 .box03 .box01 h2 span.text01{
	color: #909090;
}
.viiv01 .box01 {
    width: 320px;
    text-align: center;
    height: 510px;
    box-sizing: border-box;
    flex-direction: column;
    /* background-color: #00f; */
    display: flex;
    /* margin-bottom: 120px; */
    position: absolute;
    top: 185px;
}
.viiv01 .box01 p {
    font-size: 2rem;
    color: #9ed0ce;
    letter-spacing: -0em;
}
.viiv01 .box01 h2 {
    font-size: 3rem;
    display: inline-block;  
}
.viiv01 .box01 strong {
    display: inline-block;
    font-size: 7rem;
    color: #fff;
    text-shadow: 1px 1px 10px #16b5ba, -1px 1px 10px #16b5ba;
    margin: 30px 0;
}
.viiv01 .box01 .text02 {
    display: inline-block;
    font-size: 2rem;
    text-shadow: 0px 0px 10px #16b5ba, 0px 0px 10px #16b5ba;
    color: #fff;
    margin: 30px 0;
}
.viiv01 .box01 .container01 {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid #9ED0CE;
    position: relative;
    margin: 0 auto 40px;
}
.viiv01 .box01 h3 {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid rgba(158,208,206,0.3);
    color: #ed7b44;
    /* font-size: 3.5rem; */
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 12px 0;
    position: absolute;
    top: 5px;
    justify-content: center;
}
.viiv01 .box01 h3 span {
    font-size: 1.6rem;
    display: inline-block;
}
.viiv01 .box02 {
    width: 300%;
    background-color: rgba(255,255,255,0.2);
    position: absolute;
    top: 67%;
    padding: 20px 0;
    left: -100%;
}
.viiv01 .box02 .text03 {
    font-size: 1.7rem;
    letter-spacing: 0.3em;
}
.viiv01 .box02 h4 {
    font-size: 3.7rem;
    color: #16B5BA;
}
.viiv01 .box02 h4 span{
	font-size: 3rem;
}
.viiv01 .box02 small{
	letter-spacing:0.1em;
}
.viiv01 .box02 .container02 {
    width: 330px;
    text-align: center;
    margin: 0 auto;
    padding: 0 20px;
}
.viiv01 .box04 {
    position: absolute;
    height: 800px;
    transform: translateY(-50%);
    top: 50%;
}



/*-----------------viiv01 end--------------------*/

.scroll {
    position: absolute;
    width: 150px;
    transform: rotate( 
-90deg
 );
    top: 1000px;
}
.scroll a figure {
    width: 170px;
}
/*-----------------viiv02--------------------*/
.viiv02 {
    width: 100%;
    margin: 200px 0;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    height: 430px;
}
.viiv02 figure {
    width: 71%;
    position: absolute;
    bottom: -100px;
	align-items: flex-start;
}
.viiv02 .list01{
    display: flex;
    width: 850px;
    justify-content: space-between;
}
.viiv02 .box01 h2{
/*    font-size: 3rem;*/
    color:#16b5ba; 
}
.viiv02 ul .list-inner01 {
    background-image: url(../img/top/img_top_03.png);
    background-size: cover;
    width: 250px;
    height: 162px;
    position: relative;
}
.viiv02 ul li figure {
    width: 50px;
    position: absolute;
    top: -40px;
    right: 40%;
}
.viiv02 ul li p {
    text-align: center;
    width: 60%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform : translate(-50%,-50%);
    transform : translate(-50%,-50%);
}
.viiv02 ul .list-inner02 {
    background-image: url("../img/top/img_top_05.png");
    background-size: cover;
    width: 250px;
    height: 162px;
    position: relative;
}
.viiv02 ul .list-inner03 {
    background-image: url("../img/top/img_top_07.png");
    background-size: cover;
    width: 250px;
    height: 162px;
    position: relative;
}
.viiv02 ul li .image01 {
    width: 80px;
    position: absolute;
    top: -40px;
    right: 34%;
}
.viiv02 ul li .image02 {
    width: 50px;
    position: absolute;
    top: 115px;
    right: 40%;
}
.viiv02 .scroll {
	position: static;
}

/*-----------------viiv02 end--------------------*/
/*-----------------viiv03--------------------*/
.viiv03 {
    background-image: url(../img/top/img_top_11.png);
    background-size: cover;
    position: relative;
    width: 100%;
	height: 640px;
    background-position: right;
}
.viiv03 .box01 {
    text-align: end;
    position: absolute;
    top: 35%;
    right: 100px;
}
.viiv03 .box01 h2 {
    margin-bottom: 20px;
}
.viiv03 .image01 {
    position: absolute;
    bottom: -80px;
    right: 0;
    width: 64%;
    height: auto;
    align-items: flex-start;
}
/*-----------------viiv03 end--------------------*/
/*-----------------viiv04--------------------*/
.viiv04 {
    max-width: 1080px;
    margin: 160px auto;
}
.viiv04 h2{
	text-align: center;
}
.viiv04 .box01 {
    display: flex;
    margin: 100px 0;
    justify-content: space-around;
}
.viiv04 .box01 .box02 h3{
	text-align: center;
}
.viiv04 .box01 .box02 dl.data01 {
    width: 450px;
    display: flex;
    flex-wrap: wrap;
    margin: 40px;
}
.viiv04 .box01 .box02 dl.data01 dt{
	width: 50%;
	padding: 10px;
}
.viiv04 .box01 .box02 dl.data01 dd {
    width: 25%;
    margin: 0;
    text-align: center;
    padding: 10px;
}
.viiv04 .box01 .box02 dl.data01 dd:nth-of-type(2n){
	background-color: rgba(158,208,206,0.2);
}
.viiv04 .box01 figure{
	width: 30%;
}
.viiv04 ul {
    display: flex;
    justify-content: space-between;
    margin: 100px 0 177px;
    align-items: center;
    position: relative;
    width:100%;
}
.viiv04 ul li{
	display: flex;
	flex-direction: column;
	width: 44%;
	text-align: center;
}
.viiv04 ul li:nth-child(2) {
    position: absolute;
    width: 230px;
    left: 34%;
}
.viiv04 ul li .image01 {
    transform: rotate( 
0deg
 );
    width: 100%;
    margin: 50px 0;
}

.viiv04 dl.data02 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 30px;
}
.viiv04 dl.data02 dt {
    width: 25%;
    padding: 10px;
    border-bottom: 1px solid #707070;
}
.viiv04 dl.data02 dd{
	width: 25%;
	padding: 10px;
	margin: 0;
	text-align: center;
	border-bottom: 1px solid #707070;
}
.viiv04 dl.data02 dd:nth-of-type(3n-2){
	background-color: rgba(158,208,206,0.2);
}
.viiv04 h3.text01{
	color: #111;
	text-align: center;
}
/*-----------------viiv04 end-------------------*/
/*-----------------viiv05--------------------*/
.viiv05 {
    position: relative;
    width: 1200px;
    height: 750px;
    /* height: 700px; */
    margin: 160px auto;
/*    background-color: antiquewhite;*/
    padding: 0 10px;
}
.viiv05 h2 {
    position: absolute;
    top: 20%;
    left: 10px;
}
.viiv05 h3 {
    position: absolute;
    top: 38%;
    left: 10px;
    color: #111;
}
.viiv05 p {
    position: absolute;
    bottom: 0%;
    left: 10px;
    line-height: 2em;
}
.viiv05 .image05 {
    width: 72%;
    position: absolute;
    right: 0;
    top: 135px;
    z-index: -1;
    height: auto;
    align-items: flex-start;
}
.viiv05 .image02{
    width: 167px;
    position: absolute;
    top: 17%;
   left: 49%;
    z-index: 5;
}
.viiv05 .image03 {
    width: 17%;
    position: absolute;
    top: 7%;
    right: 21%;
}
.viiv05 .image04 {
    position: absolute;
    bottom: -95px;
    right: -455px;
    transform: rotate( 
90deg
 );
}
/*---------------------矢印アニメーション*/
#wrap {
    width: 0;
    height: 180px;
	overflow: hidden;
    transition: 1000ms linear;
}
#wrap.is-show {
    width: 167px;
}
#wrap img{
	width: 167px;
	height: 23px;
	max-width: none;
}
/*---------------------矢印アニメーション*/
.image-fadein {
    opacity: 0;
    animation: fadein 2000ms ease forwards;
}
@keyframes fadein {
    100% {  opacity: 1;}
}
 
/*以下遅延の指定*/
.img-01 {animation-delay: 2000ms;}

/*-----------------viiv05 end--------------------*/
/*-----------------viiv06--------------------*/
.viiv06 {
    background-image: url(../img/top/img_top_19.jpg);
    height: 1200px;
    background-size: cover;
    padding: 74px 0;
}
.viiv06 .box01 {
    max-width: 1080px;
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    margin: 0 auto;
    padding: 63px;
    height: 750px;
}
.viiv06 .box01 h3{
	margin-top: 30px;
}
.viiv06 .box01 figure {
    width: 40%;
    margin: 50px auto;
}
.viiv06 p{
    line-height: 2em;
}
/*-----------------viiv06 end--------------------*/
/*-----------------viiv07--------------------*/

.viiv07 {
    background-image: url(../img/top/img_top_22.jpg);
    background-size: cover;
    padding: 74px 0;
    position: relative;
    overflow: hidden;
    height: 750px;
    width: 100%;
}
.viiv07 .box03{
  width: 1080px;
  margin: 0 auto;
}
.viiv07 .box01 {
    display: flex;
    align-items: center;
    width: 1000px;
    right: 0;
    margin-left: auto;
    margin-top: 108px;
    margin-bottom: 108px;
    height: auto;
}
.viiv07 .box01 .image02{
	align-items:  flex-start;
}
.viiv07 h2 {
    text-align: end;
    margin: 0 50px;
    font-family: serif;
}
.viiv07 .text01{
	text-align: end;
    margin: 0 50px;
}
.viiv07 .box01 h3 {
    margin: 10px;
}
.viiv07 .box01 .image01 {
    width: 200px;
}
.viiv07 .box01 .image02 {
    width: 590px;
    margin-left: 10px;
}
.viiv07 .box02 {
    width: 1000px;
    height: 200px;
    margin-left: auto;
}
.viiv07 .text02 {
    text-align: left;
}
.viiv07 ul {
    display: flex;
    width: 300px;
    justify-content: space-around;
    font-size: 1.8rem;
    margin-left: auto;
}
.viiv07 ul a{
    color:  #16b5ba;
    transition: .3s; 
}
.viiv07 ul a:hover{
    color: #9ed0ce;
    text-decoration: none;
}
.linkarrow .image03 {
    width: 360px;
    margin-left: auto;
    margin-top: 20px;
}


/*-----------------viiv07 end--------------------*/

.whats {
    position: absolute;
    z-index: 1000;
    transform: rotate(
90deg
);
    width: 300px;
    right: 0;
}

/*-----------------viiv08--------------------*/
.viiv08 {
    background-image: url(../img/top/img_top_34.jpg);
    background-size: cover;
    /* padding: 74px 0; */
    position: relative;
    margin: 200px 0 0;
    height: 1200px;
    background-position: center bottom;
}
.viiv08 h2 {
    text-align: center;
    margin-bottom: 30px;
    font-family: serif;
}
.viiv08 h3 {
    text-align: center;
}
.viiv08 p {
    text-align: center;
    margin-bottom: 50px;
    line-height: 2em;
    margin-top: 30px;
}
.viiv08 ul li {
    text-align: center;
    width: 20%;
    height: 213px;
}
.viiv08 ul li p {
    margin-top: 10px;
     margin-bottom: 0; 
}
.viiv08 ul li figure {
    width: 100%;
}
.viiv08 ul li figure img {
    width: 150px;
    height: 150px;
    object-fit: contain;
}
.viiv08 .container01 {
    display: flex;
    max-width: 1080px;
    justify-content: space-around;
    margin: 60px auto;
    height: 213px;
}
.viiv08 .container02 {
    display: flex;
    max-width: 950px;
    width: 100%;
    justify-content: space-around;
    margin: 0 auto;
}
/*-----------------viiv08 end--------------------*/
/*-----------------viiv09--------------------*/
/*bootstrap使ってみた*/
.viiv09 {
    margin: 150px 0;
}
.viiv09 h2 {
    text-align: center;
    margin-bottom: 60px;
    font-family: serif;
}
.viiv09 ul {
    display: flex;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    justify-content: space-between;
    flex-wrap: wrap;
}
.viiv09 li {
    width: 30%;
    margin-bottom: 60px;
}
.card{
	border: none;
}
.card-body{
	padding: 0;
}
.viiv09 ul li h3 {
    margin: 30px 0;
    font-size: 1.6rem;
}
.viiv09 ul li .card-text {
    text-align: justify;
    letter-spacing: 1px;
}
/*-----------------------------------------
続きを見るボタンの動き
---------------------------------------------*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}
.slide-down {
  -webkit-animation-name: slideDown;
  animation-name: slideDown;
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes slideUp {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
.slide-up {
  -webkit-animation-name: slideUp;
  animation-name: slideUp;
}
.content-wrap {
    height: 450px;
    overflow: hidden;
    position: relative;
    margin: 0;
}
.close-btn, .more-btn {
    display: block;
    width: 100%;
    padding: 140px 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    background: -moz-linear-gradient( top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60% );
    background: -webkit-linear-gradient( top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60% );
    background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0 );
}
.close-btn {
	background: none;
}
.slide-up {
    height: 450px;
    padding-bottom: 0;
    overflow: hidden;
}
.slide-down {
  	height: auto;
  	overflow: visible;
  	padding-bottom: 50px;
}
.more-btn p::after{
  	font-family: "Font Awesome 5 Free";
  	content:'\f078';
  	font-weight: 900;
	font-size: 4rem;
}
.more-btn p {
    display: inline-block;
    /* color: #fff; */
    cursor: pointer;
    /* background: #29B6F6; */
    padding: 5px 20px;
    border-radius: 20px;
    width: 130px;
}
.close-btn {
  	padding:0;
}
.close-btn p::after{
	display: none;
}
.close-btn p::before {
    font-family: "Font Awesome 5 Free";
    content: '\f077';
    font-weight: 900;
    font-size: 4rem;
}
.close-btn p {
    /* background: #aaa; */
    float: unset;
    /* color: #333; */
    width: 90px;
}
/*-----------------------------------------
続きを見るボタンの動き  end
---------------------------------------------*/

/*-----------------viiv09 end--------------------*/
/*-----------------viiv10--------------------*/
.viiv10{
	background-color: #EDF9F8;
}
.viiv10 .inner {
    display: flex;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 150px 0;
    justify-content: space-between;
    height: 900px;
}
.viiv10 .inner .image01 {
    width: 25%;
}
.viiv10 .inner .box01 {
    width: 800px;
    height: 650px;
    margin-left: 20px;
    position: relative;
}
.viiv10 .inner .box01 .inner02 {
    display: flex;
    justify-content: space-between;
/*    position: relative;*/
/*    top: 30px;*/
/*    padding: 10px;*/
}
.viiv10 .inner .box01 ul li {
    background-color: unset;
    flex-direction: unset;
    text-align: center;
    align-items: center;
    width: 33%;
}
.viiv10 .inner .box01 ul li .bd-placeholder-img.card-img-top {
    width: 50px;
}
.viiv10 .inner .box01 ul li .card-body {
    background-color: unset;
    flex-direction: unset;
    width: 100%;
    text-shadow: 0 3px 6px #ccc;
    text-align: left;
    margin-left: 10px;
}
.viiv10 .inner .box01 ul li.card-body span{
	font-size: 1.2rem;
}
.viiv10 .inner .box01 .inner02 .card:last-of-type{
	width: 200px;
}
.viiv10 .inner .box01 .inner02 .card img:last-of-type {
    width: 33px;
}
.viiv10 .inner .box01 ul li figure.img03 {
    width: 20%;
}
.viiv10 .inner h2 {
    /* display: flex; */
    font-size: 2rem;
    background-color: rgba(158,208,206,0.3);
    line-height: 1.5;
    margin: 50px 20px;
    position: relative;
    top: 35px;
    height: 30px;
}
.viiv10 .inner .box01 h2 .inner01 {
    justify-content: space-around;
    display: flex;
    
}
.viiv10 .inner .box01 h2 .inner01 .list01 {
    position: absolute;
    bottom: -1px;
    left: 0%;
}
.viiv10 .inner .box01 h2 .inner01 .list02 {
    position: absolute;
    bottom: -24px;
    transform: translateX(-54%);
    left: 50%;
}
.viiv10 .inner .box01 h2 .inner01 .list03 {
    position: absolute;
    bottom: -1px;
    right: -3%;
}
.viiv10 .inner .box01 h2 .inner01 li .image02 {
    width: 300px;
}
.viiv10 .inner .box01 .box02 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.viiv10 .inner .box01 .box02 .txt01 {
    width: 190px;
    font-size: 2rem;
    padding: 33px 0;
    letter-spacing: 0.1em;
}
.viiv10 .inner .box01 .box02 .txt01 span {
	display: inline-block;
    font-size: 2.3rem;
    letter-spacing: 0.1em;
	position: relative;
}
.viiv10 .inner .box01 .box02 .txt01 span:before{
	content: '';                	
	width: 100%;                	
	height: 1px;                	
	border-top: solid 1px #16b5ba;     
	position: absolute;            	
	left: 0 ;                   	
	top: calc(50% - 3px);    
}
.viiv10 .inner .box01 .box02 .txt01 span:after{
	content: '';                	
	width: 100%;                	
	height: 1px;                	
	border-bottom: solid 1px #16b5ba;  
	position: absolute;            	
	left: 0 ;                    	
	bottom: calc(50% - 3px);
}
/*基本色 #9ed0ce：薄い  #16b5ba:濃い #EDF9F8ちょっと違う*/
.viiv10 .inner .box01 .box02 .box03 {
    font-size: 1.4rem;
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    margin: 0 5px;
}
.viiv10 .inner .box01 .box02 .box03 .txt02 {
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    padding: 35px 10px;
    text-align: center;
    color: #ED7B44;
}
.viiv10 .inner .box01 .box02 .txt03 {
    font-size: 9rem;
    color: #ED7B44;
    position: relative;
    width: 340px;
}
.viiv10 .inner .box01 .box02 .txt03 .txt04{
    font-size:5rem;
    color: #ED7B44;
}
.viiv10 .inner .box01 .box02 .txt03 .txt05 {
    font-size: 1.2rem;
    color: #111;
    position: absolute;
    top: 35px;
    right: 39px;
}

.viiv10 .inner .box01 a.btn {
    background: linear-gradient( 
135deg
 ,#96D3B7, #2BBCBF);
    border-radius: 20px;
    height: 50px;
    margin: 30px auto;
    width: 630px;
    padding: 12px;
    color: #fff;
    font-size: 1.8rem;
}
.viiv10 .inner .box01 .text02 {
    margin: 60px 20px;
    text-align: left;
}
.viiv10 .inner .box01 .fa-shopping-cart:before{
	margin-left: 20px;
}
.viiv10 .hatubai {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%);
    color: #16B5BA;
    font-weight: 900;
    letter-spacing: .2em;
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
}
/*-----------------viiv10 end--------------------*/
/*-----------------viiv11--------------------*/
.viiv11 {
    max-width: 1080px;
    width: 100%;
    margin: 150px auto;
}
.viiv11 h2 {
    text-align: center;
    margin-bottom: 50px;
}
.viiv11 .text01 {
    text-align: center;
    margin-bottom: 80px;
}
.viiv11 h2 .text01 {
    text-align: center;
    margin-bottom: 80px;
}
.viiv11 .box01 {
    display: flex;
}
/*bootstrap使ってみた*/
.viiv11 .box01 .card-body {
    padding: 24px 0;
    font-size: 2rem;
}
.viiv11 .box01 .card-body li{
	margin: 20px 0;
}
.viiv11 .box01 .card-body li span{
	color:#ed7b44;
}
.viiv11 .box01 .card{
	width: 50%;
}
.viiv11 .box02{
	margin: 50px 0 200px;
}
.viiv11 h3.text01,.text02{
	text-align: center;
	margin: 50px 0;
}
/*bootstrap使ってみた*/
.viiv11 .card {
    display: flex;
    flex-direction: unset;
    align-items: flex-start;
}
.viiv11 .card .card-text {
    padding: 0 0 0 15px;
}
.viiv11 .card .card-text span{
	color: #FF0000;
}
/*bootstrap使ってみた　end*/
/*-----------------viiv11 end--------------------*/
/*-----------------viiv12--------------------*/
.viiv12{
	background-color: #EDF9F8;
	
}
.viiv12 .inner {

    display: flex;
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 150px 0;
    justify-content: space-between;
}

.viiv12 .inner figure{
}
.viiv12 .inner .image01{
/*	width: 50%;*/
}
.viiv12 .inner .box01{
	
}
.viiv12 .inner .box01 .inner02 {
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 30px;
    padding: 10px;
}
.viiv12 .inner .box01 ul li {
    background-color: unset;
    flex-direction: unset;
}
.viiv12 .inner .box01 ul li .bd-placeholder-img.card-img-top {
    width: 50px;
}
.viiv12 .inner .box01 ul li .card-body {
    background-color: unset;
    flex-direction: unset;
    width: 200px;
    padding: 10px;
    text-shadow: 0 3px 6px #ccc;
}
.viiv12 .inner .box01 ul li .card-body span{
	font-size: 1.2rem;
}
.viiv12 .inner h2 {
    /* display: flex; */
    font-size: 2rem;
    background-color: rgba(158,208,206,0.3);
    line-height: 1.5;
    margin: 50px 20px;
    position: relative;
    top: 35px;
    height: 30px;
}
.viiv12 .inner .box01 h2 .inner01 {
    justify-content: space-around;
    display: flex;
    
}
.viiv12 .inner .box01 h2 .inner01 .list01 {
    position: absolute;
    bottom: -1px;
    left: 10%;
}
.viiv12 .inner .box01 h2 .inner01 .list02 {
    position: absolute;
    bottom: -24px;
}
.viiv12 .inner .box01 h2 .inner01 .list03 {
    position: absolute;
    bottom: -1px;
    right: 10%;
}
.viiv12 .inner .box01 h2 .inner01 li .image02 {
    width: 300px;
}
.viiv12 .inner .box01 .box02 {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.viiv12 .inner .box01 .box02 .txt01 {
    width: 195px;
    font-size: 2.8rem;
    padding: 33px 0;
    letter-spacing: 0.1em;
}
.viiv12 .inner .box01 .box02 .txt01 span {
	display: inline-block;
    font-size: 2.3rem;
    letter-spacing: 0.1em;
	position: relative;
}
.viiv12 .inner .box01 .box02 .txt01 span:before{
	content: '';                	
	width: 100%;                	
	height: 1px;                	
	border-top: solid 1px #16b5ba;     
	position: absolute;            	
	left: 0 ;                   	
	top: calc(50% - 3px);    
}
.viiv12 .inner .box01 .box02 .txt01 span:after{
	content: '';                	
	width: 100%;                	
	height: 1px;                	
	border-bottom: solid 1px #16b5ba;  
	position: absolute;            	
	left: 0 ;                    	
	bottom: calc(50% - 3px);
}
/*基本色 #9ed0ce：薄い  #16b5ba:濃い #EDF9F8ちょっと違う*/
.viiv12 .inner .box01 .box02 .box03 {
    font-size: 1.4rem;
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    margin: 0 5px;
}
.viiv12 .inner .box01 .box02 .box03 .txt02 {
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    padding: 35px 10px;
    text-align: center;
    color: #ED7B44;
}
.viiv12 .inner .box01 .box02 .txt03 {
    font-size: 12rem;
    color: #ED7B44;
    position: relative;
}
.viiv12 .inner .box01 .box02 .txt03 .txt04{
    font-size:5rem;
    color: #ED7B44;
}
.viiv12 .inner .box01 .box02 .txt03 .txt05 {
    font-size: 1.8rem;
    color: #111;
    position: absolute;
    top: 50px;
    right: -3px;
}

.viiv12 .inner .box01 a.btn {
    background: linear-gradient( 
135deg
 ,#96D3B7, #2BBCBF);
    border-radius: 20px;
    height: 50px;
    margin: 30px 50px;
    width: 630px;
    padding: 15px;
    color: #fff;
}
.viiv12 .inner .box01 .text02 {
    margin: 60px 20px;
    text-align: left;
}
/*
.viiv12 .inner .box01 .box02 .txt01 span
a {
    padding-right: 100px;
    width: 160%;
    text-align: left;
}
*/
/*-----------------viiv13--------------------*/
.viiv13 {
    width: 1080px;
    margin: 150px auto;
    /* position: relative; */
}
.viiv13 h2{
	text-align: center;
	margin-bottom: 50px;
}
.viiv13 h3{
	text-align: center;
	margin-bottom: 80px;
}
.viiv13 .box01 {
    display: flex;
    flex-direction: row;
    margin-top: 50px;
}
.viiv13 .box01 .text01{
	width: 60%;
	padding-right: 50px;
}
.viiv13 .box01 .bd-placeholder-img.card-img-top{
	width: 40%;
}

.viiv13 .box01 .bd-placeholder-img .text02{
	margin-top: 10px;
}
.viiv13 figure.image01 {
    width: 30%;
    margin-left: auto;
}
/*-----------------viiv13 end--------------------*/
/*-----------------viiv14--------------------*/
.viiv14 {
    /* background-color: #eee; */
    width: 100%;
    max-width: 1200px;
    margin: 250px auto 200px;
}
.viiv14 h2 {
    text-align: center;
    margin-bottom: 65px;
}
.viiv14 dl {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #000;
    word-break: break-all;
}
.viiv14 dl dt {
    width: 30%;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #707070;
	border-right: 1px solid #707070;
    font-weight: 300;
}
.viiv14 dl dd{
	width: 35%;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid #707070;
	border-right: 1px solid #707070;
}
.viiv14 dl dd:nth-of-type(2n){
	border-right:none;
}
.viiv14 dl dd.item02{
	display: flex;
    justify-content: space-around;
}
.viiv14 dl:last-child{
	border-bottom:none;
}
/*-----------------viiv14 end--------------------*/
/*-----------------viiv15--------------------*/
.viiv15{
    width: 100%;
    max-width: 1200px;
    margin: 250px auto 200px;
}
.viiv15 h3{
    text-align: center;
    margin-bottom: 50px;
}
.viiv15 p{
    text-align: center;
}
.viiv15 ul {
    display: flex;
    justify-content: space-between;
    margin: 50px 0;
}
.viiv15 li{
    width: 30%;
}
.viiv15 h4 {
    display: block;
    background-color: #9ED0CE;
    color: #fff;
    width: 80%;
    font-size: 25px;
    text-align: center;
    margin: -40px auto 20px;
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
.viiv15 figure{
    width: 100%;
}
.viiv15 .arrow {
    width: 40px;
    margin: 0 auto 20px;
}
/*-----------------viiv15 end--------------------*/


/*---------------------------------------------------------
スマホ用
--------------------------------------------------------*/
@media screen and (max-width:768px) {	

    main{
        margin: 0;
    }
    h2{
    font-size:2.7rem;
    color: #16B5BA;
}
    h3{
    font-size:2rem;
}
    h4{
        font-size:1.8rem;
    }

.viiv00 {
    position: relative;
    top: 80px;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(100vh - 450px);
}
/*------------------------------------------------------
viiv01_index.html
------------------------------------------------------*/
/*-----------------viiv01--------------------*/	
.viiv01 {
    position: relative;
    top: 80px;
    height: 640px;
    background-color: transparent;
    overflow: hidden;
}
.viiv01 .img01 {
    position: absolute;
    top: -325px;
}
.viiv01 .box01 h2 {
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.viiv01 .box03 .box01 h2 .img02{
	width: 75%;
}
.viiv01 .img01 img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.viiv01 .box03 {
    width: 100%;
    background-color: transparent;
    height: 640px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    left: 0%;
    bottom: 0;
    z-index: 1;
    padding: 0px 0;
}
.viiv01 .box01 h2 {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    align-items: center;
}
.viiv01　.box01 .text01{
}
.viiv01 .container01 .pc{
    display: none;
}
.viiv01 .container01 .sp{
    display: flex;
}
.viiv01 .container01 h2 {
    font-size: 2rem;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    color: #16b5ba;
}
.viiv01 .container01 h3 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid rgba(158,208,206,0.3);
    color: #ed7b44;
    font-size: 2.5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 4px 0;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.6);
    justify-content: center;
}
.viiv01 .container01 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid #9ED0CE;
    position: absolute;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 275px;
/*	bottom: 200px;*/
}
.viiv01 .container01 h3 span {
    font-size: 1.6rem;
}
.viiv01 .box01 p {
    font-size: 2rem;
    color: #fff;
    letter-spacing: -0em;
    text-shadow: 2px 2px 10px #000;
}
.viiv01 .box01 strong {
    display: inline-block;
    font-size: 5rem;
    /* font-family: Mongolian Baiti; */
    color: #fff;
    text-shadow: 1px 1px 10px #16b5ba, -1px 1px 10px #16b5ba;
}
.viiv01 .box01 .text02 {
    display: inline-block;
    font-size: 2rem;
    text-shadow: 0px 0px 10px #16b5ba, 0px 0px 10px #16b5ba;
    color: #fff;
    margin: 0;
}
	.viiv01 .box02 .text03 {
    font-size: 1.5rem;
    letter-spacing: 0.3em;
}
.viiv01 .box02 .container02 {
    width: 100%;
    /* text-align: center; */
    margin: 0 auto;
    padding: 0 20px;
}
.viiv01 .box02 h4 {
    font-size: 2.3rem;
    color: #16B5BA;
    display: flex;
    flex-direction: column;
}
	.viiv01 .box02 h4 span {
    font-size: 2.8rem;
}
.viiv01 .box02 {
    width: 100%;
    background-color: rgba(255,255,255,0.2);
    position: absolute;
    bottom: 70px;
    padding: 20px 0;
    left: 50%;
    transform: translateX(-50%);
    height: 160px;
    top: unset;
}
	.viiv01 figure video {
    /* width: 100%; */
    position: absolute;
    top: -20%;
    left: -126%;
    height: 100vh;
}
.viiv01 .box01 {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50px;
    box-sizing: border-box;
    height: auto;
    left: 50%;
    /* display: block; */
    /* padding: 0 10px; */
    transform: translateX(-50%);
}
.viiv01 .box04 {
    position: relative;
    height: 670px;
    transform: unset;
    bottom: unset;
    width: 100%;
    top: unset;
}
.viiv01.img01.sp {
    width: 100%;
}
/*-----------------viiv01 end--------------------*/	
/*-----------------viiv02--------------------*/	
.viiv02 {
    width: 95%;
    margin: 120px auto 0;
    display: flex;
    height: 950px;
    position: relative;
}
.viiv02 .box01 h2 {
    font-size: 3rem; 
    color: #16b5ba;
    text-align: center;
}
.viiv02 .box01 p {
    text-align: center;
}
	.viiv02 ul .list-inner01 {
    background-image: url(../img/top/img_top_03.png);
    background-size: cover;
    width: 250px;
    height: 162px;
    position: relative;
    margin: 122px auto;
}
	.viiv02 .list01 {
    display: block;
    width: 100%;
}
.viiv02 ul .list-inner01 {
    background-image: url(../img/top/img_top_03.png);
    background-size: cover;
    width: 290px;
    height: 150px;
    position: relative;
    margin: 100px auto;
}
	.viiv02 ul .list-inner02 {
    background-image: url(../img/top/img_top_05.png);
    background-size: cover;
    width: 290px;
    height: 150px;
    position: relative;
    margin: 100px auto;
}
	.viiv02 ul .list-inner03 {
    background-image: url(../img/top/img_top_07.png);
    background-size: cover;
    width: 290px;
    height: 150px;
    position: relative;
    margin: 100px auto;
}
.viiv02 .image03 {
    transform: rotate( 
90deg
 );
    position: absolute;
    left: -200px;
    bottom: 280px;
    width: 460px;
    height: 76px;
}
.viiv02 ul li p {
    text-align: center;
    width: 50%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.viiv02 ul li .image02 {
    width: 50px;
    position: absolute;
    top: 85px;
    right: 40%;
}
/*-----------------viiv02 end--------------------*/	
	
/*-----------------viiv03--------------------*/	
.viiv03 {
    background-image: url(../img/top/sp_back_02.png);
    position: unset;
    width: 100%;
    background-position: 25% 30%;
    margin: 0 auto;
    height: 640px;
    /* height: 450px; */
    padding-top: 100px;
    padding: 2%;
    box-sizing: border-box;
	overflow: hidden;
}
.viiv03 .box01 h2 {
    margin: 38px;
}
.viiv03 .box01 {
    width: 100%;
    text-align: left;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.viiv03 .box01 p{
    margin: 40px;
    line-height: 2em;
}
.viiv03 .image02 {
    transform: rotate(90deg);
    position: absolute;
    right: -220px;
    bottom: 220px;
    width: 460px;
    height: 76px;
}

/*-----------------viiv03 end--------------------*/	
/*-----------------viiv04--------------------*/	
.viiv04 {
    width: 95%;
    margin: 80px auto;
    height: auto;
}
	.viiv04 .box01 {
    display: flex;
    margin: 0 auto;
    justify-content: space-around;
    flex-direction: column-reverse;
}

    .viiv04 .box01 h3{
        margin-bottom: 40px;
    }
	.viiv04 .box01 figure {
    width: 100%;
    margin: 0 auto 50px;
}
.viiv04 .box01 .box02 dl.data01 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}
.viiv04 .box01 .box02 dl.data01 dt {
    width: 50%;
    padding: 3% 1%;
}
	.viiv04 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 100px 0;
}
	.viiv04 ul li {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    /* flex-wrap: wrap; */
    margin-bottom: 50px;
}
.viiv04 ul li:first-child{
    margin-bottom:130px;
} 
.viiv04 ul li:nth-child(2) {
    /* position: absolute; */
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
    /* top: 339px; */
    z-index: -1;
}
/*
.viiv04 ul li .image01 {
    transform: unset;
    width: 55%;
    margin: 50px 0;
    position: absolute;
    top: 70px;
    z-index: -1;
    transform: translateX(-50%);
    left: 50%;
}
*/
.viiv04 dl.data02 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 40px 0;
}
/*-----------------viiv04 end--------------------*/		
/*-----------------viiv05--------------------*/	
.viiv05 {
    position: unset;
    /* max-width: 100%; */
    height: 1000px;
    margin: 160px auto 100px;
    right: 0;
    width: 95%;
}
.viiv05 .image05 {
    width: 90%;
    position: relative;
    margin: 0 auto;
    left: unset;
}
	.viiv05 h2 {
    position: unset;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 2.5rem;
    margin-bottom: 60px;
}
	.viiv05 h3 {
    position: unset;
    top: 0;
    left: 0;
    /* color: #111; */
    width: 100%;
    text-align: center;
    margin-bottom: 32px;
}
	.viiv05 p {
    position: unset;
    bottom: 0;
    left: 0;
    margin-bottom: 35px;
}
	.viiv05 .image04 {
    position: relative;
    bottom: -23%;
    right: -70%;
    transform: rotate( 
90deg
 );
    width: 200px;
}
.whats {
    position: absolute;
    z-index: 1;
    transform: rotate( 
90deg
 );
    width: 230px;
    right: -80px;
}

/*-----------------viiv05 end--------------------*/		
/*-----------------viiv06--------------------*/	
.viiv06 {
    background-image: url(../img/top/img_top_19.jpg);
    background-size: cover;
    padding: 100px 5%;
    width: 100%;
    margin: 0 auto;
    height: 930px;
}
.viiv06 .box01 {
    width: 100%;
    background-color: rgba(255,255,255,0.5);
    text-align: center;
    margin: 0 auto;
    padding: 30px;
}
	#wrap img {
    width: 68px;
    height: 10px;
    max-width: none;
}
/*-----------------viiv06 end--------------------*/
/*-----------------viiv07--------------------*/	
.viiv07 {
    background-image: url(../img/top/sp_section07_bg.png);
    position: relative;
    width: 100%;
    margin: 80px auto 20px;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    height: auto;
    padding: 0 5%;
    box-sizing: border-box;
}
.viiv07 .box03{
  width: 95%;
  margin: 0;
}
	.viiv07 h2 {
    text-align: center;
    /* margin: 100px auto; */
}
	.viiv07 .text01 {
    text-align: center;
    margin: 10px 0;
}
.viiv07 .box01 {
    display: block;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}
.viiv07 ul {
    display: flex;
    width: 100%;
    font-size: 1.8rem;
}
	.viiv07 .image03 {
    right: 0%;
    position: absolute;
    bottom: -20%;
    transform: rotate( 
0deg
 );
}
.viiv07 .text02 {
    font-size: 1.4rem;
    text-align: left;
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
    margin: 20px auto;
}
	.viiv07 .box01 h3 {
    margin: 60px auto 20px;
    text-align: center;
}
	.viiv07 .box01 .image01 {
    width: 30%;
    margin: 0 auto;
}
	.viiv07 .box01 .image02 {
    width: 100%;
    height: auto;
    margin: 0 auto;
}
	.viiv07 .box01 .image02 {
    width: 100%;
    margin: 50px auto;
    height: auto;
}
	.viiv07 .box02 {
    width: 100%;
    height: 150px;
    margin-left: auto;
}
  .linkarrow{
    width: 95%;
    margin: 0 auto;
  }
  .linkarrow .image03 {
    width: 70%;
}
/*-----------------viiv07 end--------------------*/
/*-----------------viiv08--------------------*/	
.viiv08 {
    background-image: url(../img/top/img_top_34.jpg);
    background-size: cover;
    position: static;
    margin: 100px auto 0;
    height: auto;
    padding-bottom: 70px;
    width: 100%;
    padding: 0 2%;
    box-sizing: border-box;
}
	.viiv08 h2 {
    font-size: 2.5rem;
}
	.viiv08 h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 50px;
}
	.viiv08 p {
    text-align: left;
    margin-bottom: 70px;
} 
.viiv08 ul li {
    /* text-align: center; */
    width: 33%;
    height: 120px;
    /* margin-bottom: 20px; */
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.viiv08 ul li p {
    padding-left: 0;
    width: 100%;
    text-align: center;
    margin-top: 0;
    line-height: 1.3em;
}
	.viiv08 ul li figure {
    width: 30%;
    margin-bottom: 0;
}
.viiv08 .container01,.viiv08 .container02{
    display: none!important;
}
.viiv08 .container03 {
    margin: 0;
    height: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
	.viiv08 ul li figure img {
    width: 100%;
    height: 7vh;
    object-fit: contain;
}
/*-----------------viiv08 end--------------------*/		
/*-----------------viiv09--------------------*/	
	.viiv09 {
    margin: 150px auto;
    width: 95%;
}
	.viiv09 ul {
    display: block;
    width: 100%;
    /* max-width: 1080px; */
    /* margin: 0 auto; */
    justify-content: space-between;
}
	.viiv09 li {
    width: 100%;
    margin: 80px 0;
}
	.viiv09 ul li h3 {
    margin: 30px 0;
    font-size: 1.9rem;
}
/*-----------------------------------------
続きを見るボタンの動き
---------------------------------------------*/
	.close-btn, .more-btn {
    padding: 90px 0 0;
}
	
	.more-btn p {
    width: 130px;
}
	.more-btn p::after {
    font-size: 2rem;
}
	.close-btn p::before {
    font-size: 2rem;
    margin: 10px 13px;
}
	.close-btn p {
    width: 88px;
}
	.content-wrap {
    height: 1600px;
/*
    overflow: hidden;
    position: relative;
    margin: 0;
*/
}
	.slide-up {
    height: 1600px;
/*
    padding-bottom: 0;
    overflow: hidden;
*/
}
	
.slide-down {
  	height: auto;
/*
  	overflow: visible;
  	padding-bottom: 50px;
*/
}
/*-----------------------------------------
続きを見るボタンの動き end
---------------------------------------------*/
/*-----------------viiv09 end--------------------*/		
/*-----------------viiv10--------------------*/	
.viiv10 {
    background-color: #EDF9F8;
    width: 100%;
    margin: 0 auto;
    padding: 0 3%;
    position: relative;
    height: 910px;
    overflow: hidden;
}
.viiv10 .inner {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 27px 0;
    justify-content: space-between;
}
.viiv10 .inner h2 {
    /* font-size: 1.5rem; */
    background-color: rgba(158,208,206,0.3);
    /* line-height: 1.5; */
    margin: 0;
    height: 185px;
    width: 90%;
    position: absolute;
    right: -5%;
    top: 50px;
}
.viiv10 .inner .image01 {
    width: 30%;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    left: 20px;
}
.viiv10 .inner .box01 {
    width: 100%;
    height: 850px;
    margin-left: auto;
    position: relative;
}
.viiv10 .inner .box01 a.btn {
    background: linear-gradient( 
135deg
 ,#96D3B7, #2BBCBF);
    border-radius: 50px;
    margin: 1px auto;
    width: 95%;
    color: #fff;
    box-sizing: border-box;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    position: absolute;
    bottom: 190px;
    transform: translateX(-50%);
    left: 50%;
}
.viiv10 .inner .box01 ul li .card-body span {
    font-size: 1.2rem;
    display: block;
}
.viiv10 .inner .box01 ul li figure.img03 {
    width: 40%;
}
.viiv10 .inner .box01 .inner01 .image02 {
    width: 60%!important;
    margin: 0 auto;
}
.viiv10 .inner .box01 .inner01 .image02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.viiv10 .inner .box01 .inner02 {
    display: flex;
    margin-top: 70px;
    position: absolute;
    top: 180px;
    justify-content: space-between;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}
 .viiv10 .inner .box01 ul li .bd-placeholder-img.card-img-top {
    width: 50%;
    text-align: center;
}
.viiv10 .inner .box01 ul li .card-body {
    background-color: unset;
    flex-direction: unset;
    width: 100%;
    text-shadow: 0 3px 6px #ccc;
    text-align: center;
    margin-left: 0;
}
.viiv10 .inner .box01 ul li figure img {
    height: auto;
    width: auto;
}
.viiv10 .inner .box01 .box02 {
    /* display: block; */
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 390px;
    width: 100%;
    height: 210px;
    flex-wrap: wrap;
}
.viiv10 .inner .box01 .box02 .txt01 {
    width: 145px;
    font-size: 1.2rem;
    padding: 30px 0 10px;
    letter-spacing: 0.1em;
    position: unset;
    display: block;
    left: 0;
}
.viiv10 .inner .box01 .box02 .txt01 span {
    font-size: 1.8rem;
}
	
.viiv10 .inner .box01 .box02 .txt03 {
    font-size: 6.5rem;
    /* color: #ED7B44; */
    position: unset;
    text-align: center;
    width: 100%;
    height: 100px;
    /* padding: 20px 0; */
    bottom: 0;
}
.viiv10 .inner .box01 .box02 .txt03 .txt05 {
    font-size: 1.6rem;
    color: #111;
    position: unset;
    top: 0;
    right: 0;
}
.viiv10 .inner .box01 .box02 .box03 {
    font-size: 1.5rem;
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    margin: 0;
}
/*
.viiv10 .inner .box01 .box02 .box03 {
    font-size: 1.5rem;
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    right: 10%;
}
*/

.viiv10 .inner .box01 .box02 .box03 .txt02 {
    width: 100px;
    height: 100px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    text-align: center;
    padding: 0;
    color: #ED7B44;
    display: flex;
    justify-content: center;
    align-items: center;
}
.viiv10 .inner .box01 .inner02 li {
    width: 100%;
    display: flex;
    flex-direction: column;
}
   
.viiv10 .img03 {
    margin-top: -15px;
}
.viiv10 .inner .box01 .text02 {
    margin: 60px 20px;
    text-align: left;
    position: absolute;
    bottom: -60px;
}
.viiv10 .inner .box01 .inner01 {
    display: flex;
    flex-direction: column;
}
.viiv10 .inner .box01 .inner01 .list01,.viiv10 .inner .box01 .inner01 .list02,.viiv10 .inner .box01 .inner01 .list03{
    position: unset!important;
    width: 100%;
    transform: unset!important;
}
.viiv10 .hatubai {
    position: absolute;
    top: 575px;
    left: 50%;
    transform: translateX(-50%);
    color: #16B5BA;
    font-weight: 900;
    letter-spacing: .2em;
    font-size: 1.8rem;
    width: 100%;
    text-align: center;
}
/*-----------------viiv10 end--------------------*/		
/*-----------------viiv11--------------------*/	
	.viiv11 {
    max-width: 1080px;
    width: 95%;
    margin: 150px auto;
}
	.viiv11 .card {
    display: flex;
    flex-direction: column;
}
	.viiv11 h3.text01, .text02 {
    text-align: left;
    margin: 50px 0;
}
	.viiv11 .box01 {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
	.viiv11 .box01 .card {
    width: 100%;
}
	.viiv11 .box02 {
    margin: 0 0 150px;
}
	.viiv11 .card .card-text {
    padding: 0;
}
/*-----------------viiv11 end--------------------*/		
/*-----------------viiv12--------------------*/		
.viiv12 {
    background-color: #EDF9F8;
    width: 100%;
    margin: 0 auto;
    padding: 0 3%;
}
.viiv12 .inner {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 27px 0;
    justify-content: space-between;
}
.viiv12 .inner h2 {
    /* display: flex; */
    font-size: 1.5rem;
    background-color: rgba(158,208,206,0.3);
    line-height: 1.5;
    margin: 15px 0;
    position: relative;
    height: 30px;
}
.viiv12 .inner .image01 {
    width: 30%;
    margin: 0 auto;
}
.viiv12 .inner .box01 {
    width: 100%;
    height: auto;
    margin-left: auto;
}
.viiv12 .inner .box01 a.btn {
    background: linear-gradient( 
135deg
 ,#96D3B7, #2BBCBF);
    border-radius: 20px;
    height: 50px;
    margin: 1px auto;
    width: 95%;
    /* padding: 15px; */
    color: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 75px;
}
    .viiv12 .inner .box01 .box02 {
    display: block;
    justify-content: space-around;
    align-items: center;
}
    .viiv12 .inner .box01 .box02 .box03 {
    font-size: 1.5rem;
    width: 130px;
    height: 130px;
    border: 2px solid #fff;
    border-radius: 50%;
    position: relative;
    margin: 0 auto;
}
.viiv12 .inner .box01 .box02 .txt01 {
    width: 195px;
    font-size: 2.8rem;
    padding: 30px 0 10px;
    letter-spacing: 0.1em;
    margin: 0 auto;
}
    .viiv12 .inner .box01 .box02 .txt03 .txt05 {
    font-size: 1.8rem;
    color: #111;
    position: absolute;
    top: 24%;
    right: 10%;
}
.viiv12 .inner .box01 .box02 .txt03 {
    font-size: 8rem;
    /* color: #ED7B44; */
    position: relative;
    text-align: center;
    width: 100%;
    height: 120px;
    padding: 20px;
}
.viiv12 .inner .box01 h2 .inner01 .list01 {
    position: absolute;
    bottom: -1px;
    left: 3%;
    width: 18%;
    font-size: 1.5rem;
}
.viiv12 .inner .box01 h2 .inner01 .list03 {
    position: absolute;
    bottom: -1px;
    right: 2%;
    width: 20%;
    font-size: 1.5rem;
}
.viiv12 .inner .box01 h2 .inner01 li .image02 {
    width: 100%;
}
.viiv12 .inner .box01 h2 .inner01 .list02 {
    position: absolute;
    bottom: 0;
    width: 46%;
}
    .viiv12 .inner .box01 .inner02 {
    display: block;
    margin-top: 30px;
}
    .viiv12 .inner .box01 .inner02 li {
    width: 100%;
}
    .viiv12 .inner .box01 ul li .bd-placeholder-img.card-img-top {
    width: 30%;
    text-align: center;
}
    .viiv12 .inner .box01 ul li .card-body {
    background-color: unset;
    flex-direction: unset;
    width: 40%;
    text-shadow: 0 3px 6px #ccc;
    text-align: left;
}
    .viiv12 .inner .box01 ul li figure img {
    height: 40px;
    width: auto;
}
.viiv12 .img03 {
    position: absolute;
    left: 220px;
}
/*-----------------viiv12 end--------------------*/		
/*-----------------viiv13--------------------*/	
.viiv13 {
    width: 95%;
    margin: 150px auto;
    position: relative;
    height: auto;
}
.viiv13 h3 {
    text-align: center;
    margin-bottom: 30px;
}
	.viiv13 .box01 {
    display: flex;
    flex-direction: column-reverse;
}
.viiv13 figure.image01 {
    width: 70%;
    margin-top: 30px;
}
	.viiv13 .box01 .bd-placeholder-img.card-img-top {
    width: 100%;
}
	.viiv13 .box01 .text01 {
    width: 100%;
    padding-right: 0;
}
/*-----------------viiv13 end--------------------*/		
/*-----------------viiv14--------------------*/	
.viiv14 {
    width: 95%;
    margin: 170px auto 200px;
}
/*-----------------viiv14 end--------------------*/	
/*-----------------viiv15--------------------*/	
.viiv15{
    margin: 100px auto;
}
.viiv15 ul{
    flex-direction: column;
}
.viiv15 li {
    width: 95%;
    margin: 0 auto 80px;
}
/*-----------------viiv15 end--------------------*/	
	
}/*スマホ用最終枠デス*/

@media screen and (max-width:480px){
.viiv01 .img01 {
    position: absolute;
    top: 0;
}
/*-----------アンドロイド端末だけに適用されるコード 
	https://march-blog.com/android-css-hack*/
.Android .viiv01 .img01{
 	position: absolute;
    top: 0;
}
/*----------アンドロイド端末だけに適用されるコード　end*/
.viiv01 .img01 img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
}
.viiv10 .inner h2 {
    /* font-size: 1.5rem; */
    background-color: rgba(158,208,206,0.3);
    /* line-height: 1.5; */
    margin: 0;
    height: 125px;
    width: 90%;
    position: absolute;
    right: -5%;
    top: 50px;
}
}

/*スマホOkでタブレットになると崩れる所の補間部分*/