@charset "utf-8";

/*---------------------------------------
common
---------------------------------------*/

html {
  width: 100%;
	overflow-x:hidden;

}

@media (max-width: 769px) {
  html {
  	font-size: calc(1 / 769 * 100vw);
  }
}

@media (min-width: 770px) {
  html {
    font-size: 1px;
  }
}

body {
	width:100%;
	height:100%;
	color:#004b8f;
	line-height:1.6;
	font-family: "Zen Maru Gothic", sans-serif;
  font-feature-settings: "palt" 1;
  font-optical-sizing: auto;
  letter-spacing: 0.8em;
	background-color:#fff;
	font-weight:600;
}

.gothic{
	font-family: YakuHanJP, "Noto Sans JP", sans-serif;
}

.eng{
	font-family: "Lato", sans-serif;
}

img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

a{
	transition: 0.4s ;
	text-decoration:none;
}

a:hover{
  opacity: 0.6;
}

.pc{
	display:block !important;
}

.sp{
	display: none !important;
}

@media screen and (max-width:769px) {
	.pc{
		display:none !important;
	}

	.sp{
		display: block !important;
	}
}


/*--------------------------------------
loading
----------------------------------------*/
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
	background-color:#fff;
	top:0;
	z-index:9999;
}

.loader {
  opacity: 1;
  transition: opacity 1.2s .1s;
}

.is_loaded .loader {
  opacity: 0;
}

/*---------------------------------------
global_navi
---------------------------------------*/
#global_navi{
	width:100%;
	height:90rem;
	position: fixed;
	z-index: 9000;
	top: 20rem;
	transition: all 0.6s;
}

#global_navi h1{
	width:190rem;
	position:absolute;
	left:45rem;
	top:25rem;
}

#nav_toggle {
	position:absolute;
	width:90rem;
	height:90rem;;
	right:45rem;
	top:0;
}

#nav_toggle:hover {
	cursor:pointer;
}

#nav_toggle::after{
 	content: "";
 	position: absolute;
	left:0;
 	top: 0;
	width:90rem;
	height:90rem;;
	border:2rem solid #fff;
	border-radius:50%;
}

#nav_toggle span {
	position: absolute;
	left: 28rem;
	width: 36rem;
	height: 1px;
	background-color: #fff;
	transition: all 0.6s;
}

#nav_toggle span:nth-of-type(1) {
  top: 32rem;
}

#nav_toggle span:nth-of-type(2) {
 top: calc(50% - 1rem);
}

#nav_toggle span:nth-of-type(3) {
  bottom: 32rem;
}

.open #nav_toggle span:nth-of-type(1) {
  transform: translateY(12rem) rotate(-45deg);
}

.open #nav_toggle span:nth-of-type(2) {
  opacity: 0;
}

.open #nav_toggle span:nth-of-type(3) {
  transform: translateY(-12rem) rotate(45deg);
}

#sidebar {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 300;
	background: url(../images/menu_bg.jpg) no-repeat center top;
	background-size:cover;
	right:-110%;
	transition: all 0.6s;
	overflow-y: scroll;
}

#global-nav{
	width: 100%;
	height:100%;
	position:relative;
	transition: all 0.6s;
}

.open #sidebar{
	right: 0;
}

#global-nav ul.navi_list{
	width:600rem;
	margin:0 auto 50rem;
  justify-content: center;
  align-items: top;
	display: flex;
	flex-wrap: wrap;
	padding-top:220rem;
}

#global-nav ul.navi_list li{
	width:100%;
}

#global-nav ul.navi_list li a{
	color:#004b8f;
	font-size:52rem;
	letter-spacing:5rem;
	padding:10rem 0 10rem 30rem;
	display:block;
	width:100%;
	display:block;
	position: relative;
	box-sizing:border-box;
	font-weight:500;
}

#global-nav ul.online_btn{
	width:520rem;
	position:relative;
	margin:70rem auto 0;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
}

#global-nav ul.online_btn li{
	margin-bottom:30rem;
}

#global-nav ul.online_btn li a{
	width:520rem;
	height:100rem;
	border-radius:50rem;
	font-size:30rem;
	letter-spacing:2rem;
	box-shadow: 5rem 5rem 0 #004b8f;
}

.menu_sns{
	text-align:center;
	padding:40rem 0 100rem;
}

.menu_sns p{
	color:#004b8f;
	font-size:32rem;
	font-weight:500;
}

.menu_sns a{
	display:block;
	width:30rem;
	position:relative;
	margin:10rem auto 0;
}


/*---------------------------------------
bg
---------------------------------------*/
#bg{
	width:100%;
	height: 100vh;
	position:fixed;
	left:0;
	top:0;
	z-index:1;
}

#bg ul{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}

#bg ul li{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

#bg ul li:nth-child(1){
	z-index:3;
	background: url(../images/bg1.jpg) no-repeat center top;
	background-size:cover;
}

#bg ul li:nth-child(2){
	z-index:2;
	background: url(../images/bg2.jpg) no-repeat center top;
	background-size:cover;
}

#bg ul li:nth-child(3){
	z-index:1;
	background: url(../images/bg3.jpg) no-repeat center top;
	background-size:cover;
}

/*---------------------------------------
container
---------------------------------------*/
#container{
	width:375px;
	margin:0 auto;
	position:relative;
	z-index:10;
	overflow:hidden;
}

@media screen and (max-width:769px) {
	#container{
		width:100%;
	}

	#sp_cp{
		width:250rem;
		position:fixed;
		right:20rem;
		bottom:20rem;
		z-index:100;
	}
}

/*---------------------------------------
left_area
---------------------------------------*/
#left_area{
	width: calc((100vw - 375px) / 2);
	height: 100vh;
	position: fixed;
	left: 0;
	top:0;
	z-index:10;
}

#left_area #left_inner{
	width:330px;
	height: 100vh;
	min-height: 640px;
	position: relative;
	margin:0 auto;
}

#left_area #left_inner a.logo_jex{
	display:block;
	width:100px;
	height:50px;
	position: absolute;
	left: 20px;
	top:50px;
}

#left_area #left_inner a.logo_jex ul,
#left_area #left_inner a.logo_jex ul li{
	width:100%;
	height:100%;
	position: absolute;
	left: 0;
	top:0;
}

#left_area #left_inner ul.logo_chillcon{
	width:310px;
	position:absolute;
	left:0;
	right:0;
	margin:auto;
}

#left_area #left_inner ul.logo_chillcon li{
	width:100%;
	height:100%;
	position: absolute;
	left: 0;
	top:0;
}

#left_area #left_inner .btn_cp{
	width:192px;
	position: absolute;
	left: 66px;
	bottom: 0;
	will-change: transform;
}

@media screen and (min-width: 769px) and (max-width: 1029px) {
	#left_area #left_inner{
		width:100%;
	}

	#left_area #left_inner .btn_cp{
		width:59%;
		left: 15%;
	}
}

@media screen and (max-width:769px) {
	#left_area{
		display:none;
	}
}



/*---------------------------------------
right_area
---------------------------------------*/
#right_area{
	width: calc((100vw - 375px) / 2);
	height: 100vh;
	min-height: 640px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
}

#right_area > ul{
	position: static !important;
	width: 200px;
	margin: 0;
	padding: 0;
}


#right_area ul li{
	width:200px;
	height:50px;
	position:relative;
	margin-bottom:30px;
}

#right_area ul li:last-child{
	margin-bottom:0;
}

#right_area ul li a,
#right_area ul li a ul{
	padding:0;
	display:block;
	width:200px;
	height:50px;
	position:relative;
}

@media screen and (max-width:769px) {
	#right_area{
		display:none;
	}
}


/*---------------------------------------
main
---------------------------------------*/
#main{
	width:375px;
	height:697px;
	position:relative;
}

#main #mainvisual{
  inset:0;
  overflow:hidden;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	-webkit-mask-image: url("../images/mask.png");
  -webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 200% 200%;
  -webkit-mask-position: -100% -100%;
}

#main #mainvisual picture{
  display:block;
  width:100%;
  height:100%;
}

#main #mainvisual picture img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#main #catch1{
	width:236px;
	position:absolute;
	left:40px;
	top:70px;
	z-index:2;
}

#main #catch2{
	width:181px;
	position:absolute;
	left:0;
	right:0;
	top:500px;
	margin:auto;
	z-index:2;
}

#main #bnr{
	width:330px;
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	z-index:2;
}

/* picture対応（main内） */
#main picture{
  display:block;
}

#main picture img{
  display:block;
}

@media screen and (max-width:769px) {
	#main{
		width:100%;
		height:1430rem;
		position:relative;
		background-color:#fff;
	}

	#main #catch1{
		width:480rem;
		position:absolute;
		left:75rem;
		top:150rem;
		z-index:2;
	}

	#main #catch2{
		width:370rem;
		position:absolute;
		left:0;
		right:0;
		top:1040rem;
		margin:auto;
		z-index:2;
	}

	#main #bnr{
		width:675rem;
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		margin:auto;
		z-index:2;
	}
}

/*---------------------------------------
message_block
---------------------------------------*/
#message_block{
	width:375px;
	height:540px;
	position:relative;
}

#message_block #message_img{
	width:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	overflow:hidden;
}

/* picture対応（wrapperを挟んでもレイアウトが崩れないように） */
#message_block #message_img picture {
  display: block;
  width: 100%;
}

#message_block #message_img picture img {
  display: block;
  width: 100%;
}

.scale-img {
  width: 100%;
  transform: scale(1.8);
  will-change: transform;
}

#message_block #message{
	width:220px;
	position:absolute;
	right:26px;
	top:320px;
	z-index:1;
	background: url(../images/message_bg.png) no-repeat center top;
	background-size:cover;
	box-sizing:border-box;
	padding:15px;
}

#message_block #message p{
	color:#4e4d4e;
	font-size:15px;
}

#message_block #message p span{
	display:inline-block;
	background-color:#fff;
	line-height:1.3;
	padding:0 5px;
}

#message_block #message p span:nth-of-type(1){
	margin-top:10px;
}

@media screen and (max-width:769px) {
	#message_block{
		width:100%;
		height:1100rem;
		position:relative;
	}

	#message_block #message_img{
		width:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:1;
	}

	#message_block #message{
		width:450rem;
		position:absolute;
		right:50rem;
		top:650rem;
		z-index:1;
		background: url(../images/message_bg.png) no-repeat center top;
		background-size:cover;
		box-sizing:border-box;
		padding:25rem;
		letter-spacing:3rem;
	}

	#message_block #message p{
		color:#4e4d4e;
		font-size:30rem;
	}

	#message_block #message p span{
		display:inline-block;
		background-color:#fff;
		line-height:1.3;
		padding:0 5rem;
	}

	#message_block #message p span:nth-of-type(1){
		margin-top:10rem;
	}
}

/*---------------------------------------
story
---------------------------------------*/
#story{
	width:100%;
	position:relative;
	background: url(../images/story_bg.jpg) no-repeat center top #ddedfa;
	background-size:100% auto;
	padding-bottom:20px;
}

#story h2{
	color:#fff;
	font-size:32px;
	text-align:center;
	font-weight:300;
	letter-spacing:2px;
	padding-top:50px;
}

#story h3{
	width:248px;
	position:relative;
	margin:20px auto 0;
}

/* picture対応（story内） */
#story picture{
  display:block;
  width:100%;
}

#story picture img{
  display:block;
  width:100%;
}

#story #story_img1{
	width:100%;
	position:relative;
	margin:40px auto 0;
}

#story p{
	color:#004b8f;
	font-size:14px;
	text-align:center;
	font-weight:600;
	letter-spacing:2px;
	margin-top:10px;
	position:relative;
}

#story p:nth-of-type(2){
	margin-top:-35px;
}

#story #story_img2{
	width:100%;
	position:relative;
	margin:60px auto 0;
}

#story #story_img3{
	width:100%;
	position:relative;
	margin:80px auto 0;
}

#story #story_img4{
	width:100%;
	position:relative;
	margin:80px auto 0;
}

@media screen and (max-width:769px) {
	#story{
		padding-bottom:50rem;
	}

	#story h2{
		font-size:64rem;
		letter-spacing:7rem;
		padding-top:120rem;
	}

	#story h3{
		width:490rem;
		position:relative;
		margin:60rem auto 0;
	}

	#story #story_img1{
		width:100%;
		position:relative;
		margin:50rem auto 0;
	}

	#story p{
		font-size:28rem;
		letter-spacing:2rem;
		margin-top:10px;
		position:relative;
		line-height:1.8;
	}

	#story p:nth-of-type(2){
		margin-top:-80rem;
	}

	#story #story_img2{
		width:100%;
		position:relative;
		margin:130rem auto 0;
	}

	#story #story_img3{
		width:100%;
		position:relative;
		margin:150rem auto 30rem;
	}

	#story #story_img4{
		width:100%;
		position:relative;
		margin:120rem auto 0;
	}
}

#story h3,
#story div[id^="story_img"],
#story p {
  opacity: 0;
  transform: translateY(30px);
}

/*---------------------------------------
product
---------------------------------------*/
#product{
	width:100%;
	position:relative;
	background: url(../images/product_bg.jpg) no-repeat center top #fbfadc;
	background-size:100% auto;
	padding-bottom:50px;
}

#product h2{
	color:#004b8f;
	font-size:32px;
	text-align:center;
	font-weight:300;
	letter-spacing:2px;
	padding-top:170px;
	position:relative;
}

#product #product_img{
	width:240px;
	margin:-20px auto 0;
	position:relative;
}

/* picture対応（product内） */
#product picture{
  display:block;
  width:100%;
}

#product picture img{
  display:block;
  width:100%;
}

#product h3{
	color:#004b8f;
	font-size:28px;
	text-align:center;
	font-weight:600;
	letter-spacing:2px;
	position:relative;
	margin:-20px auto 0;
}

#product .price{
	color:#004b8f;
	font-size:14px;
	text-align:center;
	font-weight:400;
	position:relative;
	margin:5px auto 0;
}

ul.online_btn{
	width:240px;
	position:relative;
	margin:20px auto 0;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
}

ul.online_btn li{
	margin-bottom:15px;
}

ul.online_btn li a{
	display:block;
	width:240px;
	height:40px;
	box-sizing:border-box;
	border-radius:20px;
	background-color:#fff;
	position:relative;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	color:#004b8f;
	font-size:14px;
	font-weight:400;
	letter-spacing:2px;
	box-shadow: 3px 3px 0 #004b8f;
}

#chill{
	width:328px;
	margin:40px auto 0;
	position:relative;
	background: url(../images/chill_bg.png) repeat-y center top;
	background-size:100% auto;
	border-radius:15px;
	padding:20px 0;
}

#chill h4{
	width:200px;
	margin:0 auto 0;
	position:relative;
}

#chill #chill_illust{
	width:328px;
	margin:40px auto 0;
	position:relative;
}

#chill #chill_illust #chill_img{
	width:54px;
	margin:0 auto;
	position:relative;
	padding-top:40px;
}

#chill #chill_illust #chill_bubble1{
	width:160px;
	position:absolute;
	left:0;
	top:10px;
}

#chill #chill_illust #chill_bubble2{
	width:156px;
	position:absolute;
	right:0;
	top:-20px;
}

#chill #chill_illust #chill_bubble1 p,
#chill #chill_illust #chill_bubble1 span,
#chill #chill_illust #chill_bubble2 p,
#chill #chill_illust #chill_bubble2 span{
	display:block;
	width:100%;
	position:absolute;
	left:0;
	top:0;
}

#product h5{
	color:#004b8f;
	font-size:16px;
	text-align:center;
	font-weight:600;
	letter-spacing:1px;
	position:relative;
	margin:10px auto;
}

#product h5 span{
	font-size:14px;
}

#product ul.chill_round{
	width:290px;
	position:relative;
	margin:-10px auto 0;
	display: flex;
  justify-content: space-between;
  align-items: center;
	flex-wrap: wrap;
}

#product ul.chill_round li:nth-child(1),
#product ul.chill_round li:nth-child(3){
	width:130px;
}

#product ul.chill_round li:nth-child(2){
	color:#004b8f;
	font-size:16px;
	font-weight:600;
}

#comment{
	width:100%;
	margin:60px auto 0;
	position:relative;
}

#comment h4{
	width:328px;
	margin:0 auto;
	position:relative;
}

#comment .caution{
	width:328px;
	margin:15px auto 10px;
	font-size:12px;
	color:#fff;
	text-align:right;
}

.comment_list{
	width:100%;
	position:relative;
}

.comment_list ul{
	width:100%;
	display: flex;
  justify-content: start;
  align-items: stretch;
	position:relative;
	flex-wrap: nowrap;
  width: max-content;
}

.comment_list ul li{
	min-height:90px;
	position:relative;
	background: url(../images/comment_bg.png) repeat-y center top;
	background-size:100% auto;
	box-sizing:border-box;
	padding:0 10px 0 95px;
	border-radius:10px;
	color:#004b8f;
	font-size:14px;
	font-weight:600;
	line-height:1.6;
	display: flex;
  align-items: center;
	margin-right:15px;
}

.comment_list ul li span{
	background-color:#fdf8b6;
}

.comment_list ul li.icon1::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon1.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul li.icon2::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon2.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul li.icon3::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon3.png) no-repeat center center;
	background-size:cover;
}
.comment_list ul li.icon4::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon4.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul li.icon5::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon5.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul li.icon6::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon6.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul li.icon7::after{
 	content: "";
 	position: absolute;
	left:10px;
 	top: calc(50% - 35px);
 	width: 75px;
 	height: 70px;
	background: url(../images/comment_icon7.png) no-repeat center center;
	background-size:cover;
}

.comment_list ul.row2{
  margin-top: 30px;
}

#comment_round ul{
	width:100%;
	height:280px;
	position:relative;
	margin:0 auto;
}

#comment_round ul li{
	width:230px;
	position:absolute;
}

#comment_round ul li:nth-child(1){
	left:0;
	bottom:0;
}

#comment_round ul li:nth-child(2){
	right:0;
	top:-20px;
}

#research{
	color:#004b8f;
	font-size:11px;
	font-weight:700;
	text-align:center;
	position:relative;
	margin-top:-40px;
}


@media screen and (max-width:769px) {
	#product{
		padding-bottom:80rem;
	}

	#product h2{
		font-size:64rem;
		letter-spacing:7rem;
		padding-top:350rem;
	}

	#product #product_img{
		width:490rem;
		margin:-20rem auto 0;
		position:relative;
	}

	#product h3{
		font-size:60rem;
		letter-spacing:2rem;
		margin:-50rem auto 0;
	}

	#product .price{
		font-size:28rem;
		letter-spacing:4rem;
		margin:5rem auto 0;
	}

	ul.online_btn{
		width:490rem;
		position:relative;
		margin:50rem auto 0;
		display: flex;
	  justify-content: space-between;
	  align-items: center;
		flex-wrap: wrap;
	}

	ul.online_btn li{
		margin-bottom:30rem;
	}

	ul.online_btn li a{
		width:490rem;
		height:90rem;
		border-radius:45rem;
		font-size:28rem;
		letter-spacing:2rem;
		box-shadow: 5rem 5rem 0 #004b8f;
	}

	#chill{
		width:670rem;
		margin:70rem auto 0;
		border-radius:20rem;
		padding:40rem 0;
	}

	#chill h4{
		width:410rem;
	}

	#chill #chill_illust{
		width:100%;
		margin:40rem auto 0;
		position:relative;
	}

	#chill #chill_illust #chill_img{
		width:110rem;
		padding-top:110rem;
	}

	#chill #chill_illust #chill_bubble1{
		width:320rem;
		position:absolute;
		left:0;
		top:60rem;
	}

	#chill #chill_illust #chill_bubble2{
		width:310rem;
		position:absolute;
		right:0;
		top:0;
	}

	#product h5{
		font-size:32rem;
		font-weight:500;
		letter-spacing:2rem;
		margin:30rem auto;
	}

	#product h5 span{
		font-size:28rem;
	}

	#product ul.chill_round{
		width:580rem;
		position:relative;
		margin:-30rem auto 0;
		display: flex;
	  justify-content: space-between;
	  align-items: center;
		flex-wrap: wrap;
	}

	#product ul.chill_round li:nth-child(1),
	#product ul.chill_round li:nth-child(3){
		width:260rem;
	}

	#product ul.chill_round li:nth-child(2){
		font-size:32rem;
	}

	#comment{
		width:100%;
		margin:130rem auto 0;
		position:relative;
	}

	#comment h4{
		width:690rem;
		margin:0 auto;
		position:relative;
	}

	#comment .caution{
		width:670rem;
		margin:30rem auto 15rem;
		font-size:24rem;
		color:#fff;
		text-align:right;
	}

	.comment_list ul li{
		min-height:180rem;
		padding:0 30rem 0 190rem;
		border-radius:20rem;
		color:#004b8f;
		font-size:30rem;
		margin-right:25rem;
	}

	.comment_list ul li.icon1::after{
	 	content: "";
	 	position: absolute;
		left:25rem;
	 	top: calc(50% - 70rem);
	 	width: 150rem;
	 	height: 140rem;
		background: url(../images/comment_icon1.png) no-repeat center center;
		background-size:cover;
	}

	.comment_list ul li.icon2::after{
	 	content: "";
	 	position: absolute;
		left:25rem;
	 	top: calc(50% - 70rem);
	 	width: 150rem;
	 	height: 140rem;
		background: url(../images/comment_icon2.png) no-repeat center center;
		background-size:cover;
	}

	.comment_list ul li.icon3::after{
	 	content: "";
	 	position: absolute;
		left:25rem;
	 	top: calc(50% - 70rem);
	 	width: 150rem;
	 	height: 140rem;
		background: url(../images/comment_icon3.png) no-repeat center center;
		background-size:cover;
	}

	.comment_list ul.row2{
	  margin-top: 50rem;
	}

	#comment_round ul{
		width:100%;
		height:540rem;
		position:relative;
		margin:0 auto;
	}

	#comment_round ul li{
		width:480rem;
		position:absolute;
	}

	#comment_round ul li:nth-child(1){
		left:-10rem;
		bottom:0;
	}

	#comment_round ul li:nth-child(2){
		right:-10rem;
		top:-40rem;
	}

	#research{
		font-size:24rem;
		margin-top:-70rem;
	}
}

/*---------------------------------------
features
---------------------------------------*/
#features{
	width:328px;
	margin:60px auto 0;
	position:relative;
	background: url(../images/chill_bg.png) repeat-y center top;
	background-size:100% auto;
	border-radius:15px;
	padding:20px 0 20px 10px;
	box-sizing:border-box;
}

#features #features_img{
	width:210px;
	margin:0 auto;
	padding:20px 0;
}

/* picture対応（features内） */
#features picture{
  display:block;
  width:100%;
}

#features picture img{
  display:block;
  width:100%;
}

#features #features_title{
	color:#004b8f;
	font-size:18px;
	font-weight:600;
	position:relative;
}

#features p{
	color:#004b8f;
	font-size:13px;
	font-weight:400;
	position:relative;
	margin-top:5px;
}

#features p span.num{
	letter-spacing:-0.01em;
}

@media screen and (max-width:769px) {
	#features{
		width:670rem;
		margin:120rem auto 0;
		border-radius:20rem;
		padding:40rem 0 40rem 30rem;
	}

	#features #features_img{
		width:410rem;
		margin:0 auto;
		padding:40rem 0;
	}

	#features #features_title{
		font-size:36rem;
		letter-spacing:2rem;
	}

	#features p{
		font-size:30rem;
		margin-top:5rem;
	}

	#features p span{
		font-size:27rem;
		letter-spacing:-0.01em;
	}

	#features p span.num{
		letter-spacing:-0.01em;
	}
}

/*---------------------------------------
follow
---------------------------------------*/
#follow{
	width:328px;
	margin:40px auto 0;
	position:relative;
	background-color:#fff;
	border-radius:15px;
	padding:20px 0 30px;
	box-sizing:border-box;
}

#follow #icon_x{
	width:50px;
	margin:0 auto 0;
	position:relative;
}

/* picture対応（follow内） */
#follow picture{
  display:block;
  width:100%;
}

#follow picture img{
  display:block;
  width:100%;
}

#follow p{
	color:#004b8f;
	font-size:14px;
	font-weight:400;
	text-align:center;
	position:relative;
	margin-top:5px;
}

#follow span{
	display:block;
	color:#004b8f;
	font-size:14px;
	font-weight:400;
	text-align:center;
	position:relative;
	margin-top:10px;
}

#follow a{
	display:block;
	color:#004b8f;
	width:150px;
	height:40px;
	margin:20px auto 0;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	font-size:16px;
	font-weight:400;
	position:relative;
	letter-spacing:2px;
	box-sizing:border-box;
	border:1px solid #004b8f;
	border-radius:20px;
}

@media screen and (max-width:769px) {
	#follow{
		width:670rem;
		margin:80rem auto 0;
		border-radius:20rem;
		padding:30rem 0 60rem;
	}

	#follow #icon_x{
		width:100rem;
	}

	#follow p{
	font-size:28rem;
		margin-top:10rem;
		letter-spacing:2rem;
	}

	#follow span{
		font-size:28rem;
		margin-top:20rem;
		letter-spacing:2rem;
	}

	#follow a{
		width:300rem;
		height:80rem;
		margin:40rem auto 0;
		font-size:32rem;
		letter-spacing:2rem;
		border-radius:40rem;
		border:2px solid #004b8f;
	}
}


/*---------------------------------------
footer
---------------------------------------*/
#footer{
	width:100%;
	margin:0 auto;
	position:relative;
	background: url(../images/wave.png) no-repeat center top #fff;
	background-size:100% auto;
}

#footer ul{
	width:330px;
	position:relative;
	margin:0 auto;
	padding-top:80px;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
}

#footer ul li{
	width:156px;
	position:relative;
	margin-bottom:20px;
}

#footer ul li a{
	display:block;
	width:156px;
	height:50px;
	position:relative;
	box-sizing:border-box;
	border:1px solid #66bdb8;
	padding:10px 0 10px 12px;
}

/* picture対応（footer内） */
#footer picture{
  display:block;
  width:100%;
  height:100%;
}

#footer picture img{
  display:block;
}

#footer ul li a img{
	width:110px;
}

#footer ul li a::after{
	content: "";
	position: absolute;
	right:10px;
	top: calc(50% - 7px);
	width: 15px;
	height: 15px;
	background: url(../images/blank_icon.png) no-repeat center center;
	background-size:cover;
}

#btn_top{
	text-align:center;
	margin-top:30px;
}

#footer a.fortop{
	display:inline-block;
}

#footer a.fortop p{
	width: 45px;
	margin:0 auto;
}

#footer a.fortop span{
	display:block;
	color:#004b8f;
	font-size:14px;
	font-weight:400;
	text-align:center;
}

#copyright{
	font-size:8px;
	text-align:center;
	color:#131313;
	padding:50px 0 20px;
}

@media screen and (max-width:769px) {
	#footer ul{
		width:670rem;
		position:relative;
		margin:0 auto;
		padding-top:160rem;
		display: flex;
	  justify-content: space-between;
	  align-items: start;
		flex-wrap: wrap;
	}

	#footer ul li{
		width:320rem;
		position:relative;
		margin-bottom:40rem;
	}

	#footer ul li a{
		display:block;
		width:320rem;
		height:100rem;
		border:2px solid #66bdb8;
		padding:17rem 0 17rem 30rem;
	}

	#footer ul li a img{
		width:220rem;
	}

	#footer ul li a::after{
		content: "";
		position: absolute;
		right:18rem;
		top: calc(50% - 15rem);
		width: 30rem;
		height: 30rem;
		background: url(../images/blank_icon.png) no-repeat center center;
		background-size:cover;
	}

	#btn_top{
		text-align:center;
		margin-top:90rem;
	}

	#footer a.fortop p{
		width: 84rem;
		margin:0 auto;
	}

	#footer a.fortop span{
		font-size:28rem;
	}

	#copyright{
		font-size:19rem;
		padding:80rem 0 50rem;
	}
}

/*---------------------------------------
animation
---------------------------------------*/
#bg ul li,
ul#logo li,
ul.logo_chillcon li { 
	opacity: 0; 
	transition: opacity 0.6s ease;
}

#bg ul li:nth-child(1),
body.is_story #bg ul li:nth-child(2),
body.is_product #bg ul li:nth-child(3),
ul#logo li:nth-child(1),
body.is_story ul#logo li:nth-child(2),
body.is_product ul#logo li:nth-child(3),
ul.logo_chillcon li:nth-child(1),
body.is_story ul.logo_chillcon li:nth-child(2),
body.is_product ul.logo_chillcon li:nth-child(3){ 
	opacity: 1;
}

body.is_story #bg ul li,
body.is_product #bg ul li,
body.is_story ul#logo li,
body.is_product ul#logo li,
body.is_story ul.logo_chillcon li,
body.is_product ul.logo_chillcon li {
  opacity: 0;
}

#right_area ul li a p{
	width:200px;
	height:50px;
	color:#2a5591;
	font-size:18px;
	font-weight:500;
	letter-spacing:2px;
	line-height:1.0;
	text-align:center;
	position:relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	z-index:10;
	transition: color 0.6s ease;
}

#right_area ul li a ul{
	width:200px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	z-index:1;
}

#right_area ul li a ul li{
	width:200px;
	height:50px;
	position:absolute;
	left:0;
	top:0;
	border-radius:25px;
	opacity: 0; 
	transition: opacity 0.6s ease;
}

#right_area ul li a ul li:nth-child(1){
	background: linear-gradient(to right, #daf3fc, #fff, #daf3fc);
	box-sizing:border-box;
	border-radius:25px;
	filter: drop-shadow(0 0 10px rgba(91, 202, 247, 1.0));
}

#right_area ul li a ul li:nth-child(2){
	background: linear-gradient(to right, #7ccdf3, #0284cf);
	color:#fff;
	filter: none;
}

#right_area ul li a ul li:nth-child(3){
	background: linear-gradient(to right, #74b0e1, #ea8695);
	color:#fff;
	filter: none;
}

#right_area ul li a ul li:nth-child(1),
body.is_story #right_area ul li a ul li:nth-child(2),
body.is_product #right_area ul li a ul li:nth-child(3){ 
	opacity: 1;
}

body.is_story #right_area ul li a ul li:nth-child(1),
body.is_product #right_area ul li a ul li:nth-child(1){ 
	opacity: 0;
}

body.is_story #right_area ul li a p,
body.is_product #right_area ul li a p{
	color:#fff;
}

.btn_cp {
  animation: floating 1.8s ease-in-out infinite alternate-reverse;
}

@keyframes floating {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

@keyframes floating2 {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}

#chill_bubble1 span,
#chill_bubble1 p {
  animation: floating2 1.6s ease-in-out infinite alternate-reverse;
}

#chill_bubble2 span,
#chill_bubble2 p {
  animation: floating2 1.8s ease-in-out 0.5s infinite alternate-reverse;
}