@charset "utf-8";

/*========= UIパーツ用 ===============*/

/*カラー*/
.primary-color{
	color: #00838C;
}
.font-white{
	color: #fff;
}
.back-color{
	color: #F2F9F9;
}
.alert{
	color: #CE2C2C;
	display: block;
}
.block{
	display: block;
}
.pc{
	display: block;
}
.sp{
	display: none;
}
/*mv*/
#mv{
    background: url(../img/mv-background.webp) no-repeat 100% 100%;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 54.9375%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    top: 0;
}
#mv .bg-img{
    left: 16rem;
    right: 0;
    top: 16rem;
}
#mv .main-title{
    position: absolute;
    bottom: 20%;
    left: 2rem;
	width: 60%;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    padding: 0;
    -ms-transform: translate(0, 0);
}

#mv .main-title img{
	width: 100%;
}
#mv .main-title .sp{
	display: none;
}
#mv .btn{
	justify-content: flex-start;
}
#mv .btn a{
	margin: 2rem 0 0;
	width: 85%;
	font-size: 2rem;
}
#box1{
	position: relative;
	padding: 0 0 14rem;
	overflow: hidden;
}

/*アニメーション画像回転*/
.bg-img{
    background-image: url(../img/blockimg1.png);
    background-size: cover;
    width: 80rem;
    height: 80rem;
    position: absolute;
    right: -40rem;
    top: 0;
    z-index: -2;
}
.bg-img::before{
  content: '';
  padding-top: 50%;
}

/* 回転 */
.bg-img{
  animation-name: rotate;
  animation-duration: 7s;
  animation-timing-function: cubic-bezier(0.5, 0.51, 0.51, 0.52);
  animation-iteration-count: infinite;
}

@keyframes rotate{
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
@keyframes rotate{
  0% {
    transform: rotateZ(0);
  }
  100% {
    transform: rotateZ(360deg);
  }
}



.inner .message{
    line-height: 3;
    letter-spacing: 0.08em;
}

#box2{
	background: url(../img/blockimg2.png) no-repeat;
	image-rendering: -webkit-optimize-contrast;
	background-position: top right;
	background-size: 90rem;
	padding: 0 0 12rem;
	margin: 0 0 14rem;
}
#box2_2{
	background: url(../img/blockimg2_2.png) no-repeat;
	image-rendering: -webkit-optimize-contrast;
	background-position: top left;
	background-size: 90rem;
	padding: 0 0 24rem;
	margin: 0 0 14rem;
}
#box2 .wish-list{
font-weight: bold;
    margin: 0 0 1rem 0;
    display: inline-flex;
    padding: 1rem 1rem 0.5rem 0;
    background: #fff;
}
#box2 .wish-list img{
	margin: 0 2rem 0 0;
}

#box2_2 .message.wrap{
width: 47%;
    margin: 0 0 0 auto;
    background: rgba(255,255,255,.8);
    padding: 0 0 2rem 2rem;
}

#box3 {
	padding: 10rem 0 8rem;
}
#box3 .circle{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#box3 .circle .list{
background: #fff;
    width: 320px;
    height: 320px;
    padding: 2rem;
    border-radius: 50%;
    border: 2px solid #00838C;
	font-weight: bold;
	position: relative;
}

#box3 .circle .list.inversion{
background: #00838C;
color: #fff;
}
#box3 .circle .list .circle-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	width: 253px;
}
#box3 .circle .list .circle-inner p{
	font-size: 1.4rem;
	letter-spacing: 0;
}
#box3 .circle .list .circle-inner .txtL{
    font-weight: bold;
	display: block;
	text-align: center;
	margin: 0 0 1rem 0;
	line-height: 1.6;
}
#box3 .circle .list .circle-inner .str{
    font-size: 2rem;
}
#box3 .circle .list .circle-inner .txtS{
	display: block;
}

#box4 .feature-list{
    margin: 0 0 2rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#box4 .feature-list.reverse{
	flex-direction: row-reverse;
    text-align: right;
}

#box4 .feature-list li{
	font-size: 2rem;
	font-weight: bold;
	width: calc(95%/2);
}

.number{
	font-family: "Montserrat",-apple-system, Sans-Serif;
	font-size: 4rem;
	font-weight: bold;
	border-bottom: 2px solid;
	display: block;
	margin: 0 0 2rem;
	
}

#box6 .number{
	border-bottom: 4px solid;
	margin: 0 2rem 0 0;
	line-height: 1.4;
}

#box6 .flex .txt{
	font-size: 2rem;
}

#box6 .flex{
	display: flex;
	align-items: flex-start;
	margin: 0 0 3rem;
}

#box8 .overview-list li{
	background: #fff;
	border-radius: 8px;
	padding: 4rem;
	display: flex;
}

#box8 .overview-list li p{
	font-size: 1.4rem;
}

#box8 .overview-list_txt{
	width: 140px;
	font-weight: bold;
}
#box8 .overview-list_txts{
	width: 860px;
}
#box8 .overview-list li:nth-child(n+2){
	margin: 2rem 0 0;
}

#box9{
    background: url(../img/entry-background.webp) 100% 100% no-repeat;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 24%;
    background-size: cover;
    position: relative;
}
#box9 .inner{
	position: static;
}

#box9 .title{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}



/* 吹き出し本体 */
.balloon{
    position: relative;
    padding: 2rem;
    background-color: #fff;
    border: 2px solid #00838C;
    font-weight: bold;
    font-size: 1.4rem;
    width: 540px;
    border-radius: 8px;
	margin: 0 auto;
	    top: -4rem;
}

/* beforeで枠線の三角を表現 */
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  top: -10px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #00838C;
  border-left: 15px solid transparent;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/* beforeで本体の三角を表現 */
.balloon::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  top: -7px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}


/*タイトル*/
.title{
	margin: 0 0 4rem;
	letter-spacing: 0;
	font-weight: bold;
	font-size: 6rem;
}

.title .title_ja-text{
	font-family: "NotoSansCJKjp",-apple-system, 'メイリオ', Sans-Serif;
	font-size: 1.6rem;
	display: block;
	font-weight: bold;
	letter-spacing: 0.06em;
}
.title .title_ja-text.In {
    display: inline-block;
	margin: 0 0 0 2rem;
}
.title_text{
	font-size: 1.6rem;
	font-weight: bold;
}
.title_text_s{
	font-size: 1.2rem;
	margin: 0 0 1rem 1rem;
}
.text-bold{
	font-weight: bold;
}
.text_info{
	font-size: 1.2rem;
	font-weight: normal;
	display: block;
	margin: 1rem 0 0;
}
/*文字位置*/
.text-left{
	text-align: left;
}
.text-center{
	text-align: center;
}
.mb40{
	margin-bottom: 4rem;
}
.mb80{
	margin-bottom: 8rem;
}
/*ボタン*/
.btn{
	display: flex;
    justify-content: center;

}

/*
.btn a {
    color: #666;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 2rem;
    background: #e9e9e9;
    position: relative;
    z-index: 1;
    transition: .3s;
    text-decoration: none;
    width: 600px;
    height: 80px;
    overflow: hidden;
    line-height: 45px;
    letter-spacing: 0.08em;
}
.btn a::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: #00838C;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform ease .3s;
	
}
.btn a:hover {
  color: #fff;
}
.btn a:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
*/
.btn_close{
    color: #666;
    font-size: 2.4rem;
    font-weight: bold;
    padding: 2rem 6rem;
    background: #e9e9e9;
    position: relative;
    z-index: 1;
    transition: .3s;
    text-decoration: none;
    width: 600px;
    height: 80px;
    overflow: hidden;
    line-height: 45px;
    letter-spacing: 0.08em;
}
.imgtext-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.imgtext-list li{
	width: calc(95%/2);
    font-weight: bold;
}

.imgtext-list li:nth-child(n+3){
	margin: 4rem 0 0;
}

.profile-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
	margin: 6rem 0 0;
}
.profile-list li{
	width: calc(95%/2);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
}
.profile-list li:nth-child(n+3) {
    margin: 4rem 0 0;
}
.profile-list .imgblock{
	width: 200px;
	margin: 0 2rem 0 0;
}


/*768px以下*/
@media screen and (max-width:768px) {
.pc{
	display: none;
}
.sp{
	display: block;
}
	p br{
		display: none;
	}
	
	p.balloon br{
		display: block;
	}	
#mv{
background: url(../img/mv-background_sp.webp) no-repeat 100% 100%;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 auto 8rem;
    width: 100%;
    height: 0;
    padding-top: 158%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    top: 0;
}
#mv .main-title {
    display: none;
}
.title {
    font-size: 4rem;
}
#box2 {
    background: url(../img/blockimg2.png) 100% 100% no-repeat;
    image-rendering: -webkit-optimize-contrast;
    background-position: top right;
    background-size: 100%;
    padding: 0 0 12rem;
    margin: 0 0 24rem;
}

#box2 .wish-list {
    font-weight: bold;
    margin: 0;
    padding: 0 0 2rem 0;

}
#box2_2 {
    background: url(../img/blockimg2_2.png) 100% 100% no-repeat;
    image-rendering: -webkit-optimize-contrast;
    background-position: top left;
    background-size: 100%;
    padding: 0 0 12rem;
    margin: 0 0 24rem;
}

#box2_2 .message.wrap {
    width: 100%;
    margin: 0 auto;
    background: rgba(255,255,255,.8);
    padding: 0;
    border-radius: 8px;
}
#box3 .circle {
    display: block;

}
#box3 .circle li {
    margin: 0 auto;
}
#box3 .circle li img{
    margin: 2rem auto;
	text-align: center;
}
#box3 .circle li:last-child{
    bottom: -11rem;
}
#box3 .circle .arrow img{
    position: relative;
    bottom: -11rem;
}
#box4 .feature-list {
    flex-wrap: wrap-reverse;
	margin: 0;
}
#box4 .feature-list li {
    width: 100%;
    text-align: left;
    margin: 0 0 2rem;
}
.imgtext-list li:nth-child(n+3) {
    margin: 0 0 2rem;
}
#box6 .flex {
    display: block;
    margin: 0 0 2rem;
}
#box6 .number {
    border-bottom: 4px solid;
    margin: 0 0 2rem 0;
}
.imgtext-list li .imgblock {
    width: 100%;
}
.imgtext-list li {
    margin: 0 0 2rem;
    width: 100%;
    display: block;
}
	.imgtext-list li br{
		display: none;
	}
.title .title_ja-text.In {
    display: block;
    margin: 0;
}
.btn a {
    width: 100%;
    font-size: 1.8rem;
}
	.balloon{
		width: 100%;
		top: -42rem;
	}
/*文字位置*/
.title .title_ja-text {
    margin-top: 1rem;
}

#box1 .inner {
    background-position: top 20rem right;
}
.text-list {
    margin: 20rem 0 4rem;
}

.text-list li{
    width: 100%;
    padding: 2rem;
    margin: 0 0 1rem;
}

.profile-list .imgblock {
    width: 100px;
}


.profile-list li {
    width: 100%;
	margin: 0 0 2rem;
}
#box8 .overview-list li {
    padding: 2rem;
    display: block;
}
#box8 .overview-list_txt {
    width: 100%;
}
#box8 .overview-list_txts {
    width: 100%;
}
	#box8 .overview-list li p br{
		display: block;
	}
#box9 {
background: url(../img/entry-background.webp) 77% 100% no-repeat;
    image-rendering: -webkit-optimize-contrast;
    margin: 0 auto;
    width: 100%;
    height: 0;
    padding-top: 45%;
    padding-bottom: 53%;
    background-size: cover;
    position: relative;
}
#box9 .title {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 90%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
}