@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
.crecla_body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-feature-settings: "palt";
}
h1,h2,h3,h4{ line-height:1.4; font-family: "Zen Maru Gothic", sans-serif; }
.zen_b {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.sp_br{ display:none; }
.imgradi5{ border-radius: 5px; }
.imgradi50{ border-radius: 50%; box-shadow: inset -4px -4px 0px 0px rgba(217, 181, 157, 0.8), 5px 5px 0px 0px rgba(238, 214, 189, 0.8); }

.l_h10{ line-height:1.0 !important;}
.l_h11{ line-height:1.1 !important;}
.l_h13{ line-height:1.3 !important;}
.l_h14{ line-height:1.4 !important;}
.l_h16{ line-height:1.6 !important;}
.l_h18{ line-height:1.8 !important;}
.l_h20{line-height:2 !important;}
.l_spacing0{ letter-spacing:0px !important;}

.typo12{ font-size:12px; }
.typo60sp{ font-size:80%; }
.typo80sp{ font-size:80%; }
.typo110sp{ font-size:110%; }
.typo120sp{ font-size:120%; }
.typo120sp2{ font-size:120%; }
.typo140sp{ font-size:140%; }
.typo150sp{ font-size:150%; }
.typo160sp{ font-size:160%; }
.typo180sp{ font-size:180%; }
.typo180sp2{ font-size:165%; }
.typo180sp3{ font-size:220%; }
.typo220sp{ font-size:220%; }
.typo250sp{ font-size:250%; }
.typo280sp{ font-size:280%; }
.typo360sp{ font-size:360%; }
.typo460sp{ font-size:460%; }

.typo_blue2026{ color:#00a0e9; }
.typo_price{ color:#FF65C3; }
.typo_feel{ color:#b98c5a !important; }
.typo_feel_blue{ color:#5270b2 !important; }
.typo_more{ color:#f27066 !important; }

.text_pen{ background: linear-gradient(transparent 64%,rgba(255, 250, 124, 0.86) 0%); display: inline-block; }
.item_pen {
  background: linear-gradient(transparent 54%,rgba(255, 250, 124, 0.86) 0%);
  display: table;
  margin: 0 auto;
  line-height: 1;
margin-top: -15px;
  margin-bottom: 30px;
}
.item_pen2 {
  background: linear-gradient(transparent 54%,rgba(255, 250, 124, 0.86) 0%);
  display: inline;
  margin: 10px;
}
.center_sp {text-align:left;}

.section_wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.section_wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateY(180deg);
}
.section_wave .shape-fill {
    fill: #E3F8FF;
}
.section_wave_down {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top:-1px;
}
.section_wave_down svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateX(180deg);
}
.section_wave_down .shape-fill {
    fill: #E3F8FF;
}
.section_wave_down_feel {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top:-1px;
}
.section_wave_down_feel svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateX(180deg);
}
.section_wave_down_feel .shape-fill {
    fill: #fff2e6;
}
.section_wave_gray {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.section_wave_gray svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateY(180deg);
}
.section_wave_gray .shape-fill {
    fill: #FFFAE1;
}
.section_wave_gray_down {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top:-1px;
}
.section_wave_gray_down svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 54px;
    transform: rotateX(180deg);
}
.section_wave_gray_down .shape-fill {
    fill: #FFFAE1;
}
.feel_copy{
	position:absolute;
	font-weight:700;
	font-size:200%; line-height:2;
	letter-spacing:6px;
	top:25%; left:10%;
	color: white;
	  text-shadow: 0px 1px 8px rgba(0, 0, 0, 0.4);
}
@media (max-width: 900px) {
	.typo180sp3{ font-size:250%; }
	.typo120sp2{ font-size:105%; }
}
@media (max-width: 540px) {
	.sp_br{ display:block; }
	.typo60sp{ font-size:60%; }
	.typo80sp{ font-size:70%; }
	.typo110sp{ font-size:100%; }
	.typo120sp{ font-size:110%; }
	.typo120sp2{ font-size:100%; }
	.typo140sp{ font-size:130%; }
	.typo150sp{ font-size:140%; }
	.typo160sp{ font-size:150%; }
	.typo180sp{ font-size:160%; }
	.typo180sp2{ font-size:145%; }
	.typo180sp3{ font-size:310%; }
	.typo220sp{ font-size:180%; }
	.typo250sp{ font-size:200%; }
	.typo280sp{ font-size:230%; }
	.typo360sp{ font-size:300%; }
	.typo460sp{ font-size:400%; }
	.center_sp {text-align:center;}
	.feel_copy{ font-size:150%; line-height:1.8; letter-spacing:1px; top:5%; left:5%; }

}


/* __________ flex __________ */

.crecla_flex {
-webkit-align-items: center;
align-items: center;
  -js-display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
justify-content: center;
margin-bottom:auto;
}
.crecla_flex div.flex_c66icon{
	width: calc(66.6666% - 10px);
	margin: 5px;
	background-color:#FFFAE1;
}
.crecla_flex div.flex_c33icon{
	width: calc(33.333% - 10px);
	margin: 5px;
	background-color:#FFFAE1;
}
.crecla_flex div.feel_pict33{
	width: calc(33.333% - 20px);
	margin: 10px;
	background-color:white;
	border-radius:10px;
	padding:20px; padding-bottom:10px;
	text-align:center;
	line-height:1.4;
	font-size:150%;
	font-weight: 700;
	color: #5270b2;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.feel_pict33 img{ max-width:170px; padding-top: 12px }
.crecla_flex div.flex_c50{
	width: calc(50% - 30px);
	margin: 15px; position:relative;
}
.crecla_flex div.feel25{
	width: calc(25% - 20px);
	margin: 10px; position:relative;
}
.crecla_flex div.flex_c50item{
	width: calc(50% - 30px);
	margin: 15px; position:relative;
	  box-shadow: 0 0 30px rgba(52,137,178,.15);
	  border-radius: 32px;
	  padding: 4.8rem 3.2rem;
}
.crecla_flex div.price_pic{
	width: calc(45% - 30px);
	margin: 15px; position:relative;
}
.crecla_flex div.price_data{
	width: calc(55% - 40px);
	margin: 20px; position:relative;
}
.price_select1{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#b4ded8;
	color:#008e76;
	padding:20px;
	margin:0;
	border-radius:20px;
}
.price_select2{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#fbd6d1;
	color:#ff503e;
	padding:20px;
	border-radius:20px;
}
.price_select3{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#ffe697;
	color:#fc9b00;
	padding:20px;
	border-radius:20px;
}
.feel_item1{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#a4cfd3;
	color:#5270b2;
	padding:35px; padding-bottom:0;
	margin:0;
	border-radius:20px;
}
.feel_item2{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#e6e2e1;
	color:#5270b2;
	padding:35px; padding-bottom:0;
	border-radius:20px;
}
.feel_item3{
	width: calc(33.33333% - 0px);
	margin:0;
	background-color:#f2dbc0;
	color:#5270b2;
	padding:35px; padding-bottom:0;
	border-radius:20px;
}
.crecla_flex div.flex_c50feel_in{
	width: calc(40% - 10px);
	margin: 5px auto; position:relative;
}
.crecla_flex div.flex_c50feel_pic{
	width: calc(60% - 10px);
	margin-top: 20px;
}
.feel_price45{
	width: calc(45% - 0px);
	margin:0;
	background-color:#5270b2;
	color:#fff;
	padding:20px;
	border-radius:10px;
}
.feel_price_icon{
	width: calc(10% - 0px);
	margin:0;
}
.price_select_in{ background-color:white; border-radius:10px; padding:12px; }

.select_hr1 { margin-top:5px; margin-bottom:-20px; border-top: 5px solid #b4ded8; }
.select_hr2 { margin-top:5px; margin-bottom:-20px; border-top: 5px solid #fbd6d1; }
.select_hr3 { margin-top:5px; margin-bottom:-20px; border-top: 5px solid #ffe697; }
.price_select1_cap{
	background-color:#b4ded8;
	color:#008e76;
	padding:5px;
	margin:5px auto;
	font-size:115%; font-weight:700;
}
.price_select2_cap{
	background-color:#fbd6d1;
	color:#ff503e;
	padding:5px;
	margin:5px auto;
	font-size:115%; font-weight:700;
}
.price_select3_cap{
	background-color:#ffe697;
	color:#fc9b00;
	padding:5px;
	margin:5px auto;
	font-size:115%; font-weight:700;
}
.temcap_l{
	position: absolute;
	top:80px;
	left: 30px;
}
.temcap_r{
	position: absolute;
	top: 80px;
	right: 30px;
}
.temcap_l div{
	background-color:#E3F8FF;
	color:#00a0e9;
	border-radius:50%;
	text-align:center;
	font-size:13px; line-height:1;
	padding-top:22px;
	width:70px; height:60px;
	margin-bottom:3px;
	letter-spacing: -1px;
}
.temcap_r div{
	background-color:#eee;
	color:#333;
	text-align:center;
	font-size:12px; line-height:1.3;
	padding:4px 5px;
	display:table;
	margin-bottom:8px;
}
.temcap_r div.black{ background-color:#222945; color:white; border: 1px solid #222945;}
.temcap_r div.white{ background-color:#fff; color:#333; border: 1px solid #333;}

.crecla_price_block{
	position:relative;
	  box-shadow: 0 0 30px rgba(52,137,178,.15);
	  border-radius: 32px;
	  padding: 75px;
	background-color:white;
}
.feel_bg{
	background-image:url(../images/feelfree/bg_pic.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center top;
	padding:4vw 0 8vw 0 ;
}
a.btn_feel {
	width:auto;
	margin:0;
	padding: 10px 20px;
	border-radius: 5px;
	box-shadow: none;
	text-align:center;
	font-weight: 700;
	text-shadow: none;
background-color:#5270b2;
	color:white;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	border-radius: 30px;
	letter-spacing: -1px
}
a.btn_feel:hover {color:#5270b2; background-color:#fff;}

.button {
	border-radius: 5px;
  display: inline-flex;
  height: 40px;
  width: 150px;
  background: #5270B2;
  margin: 0;
  color: #5270B2;
  text-transform: uppercase;
  text-decoration: none;
  /*! font-size: .8em; */
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#button-6 a:link,
#button-6 a:visited,
#button-6 a:active {
  color: #fff;
  text-decoration: none;
  letter-spacing: 0px;
}
#button-6 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-6 a {
  position: relative;
  transition: all .45s ease-Out;
	color:white;
}
#button-6 a:hover {
	color:#5270B2;
}


#spin {
  width: 0;
  height: 0;
  opacity: 0;
  left: 70px;
  top: 20px;
  transform: rotate(0deg);
  background: none;
  position: absolute;
  transition: all .5s ease-Out;
}

#button-6:hover #spin {
  width: 200%;
  height: 500%;
  opacity: 1;
  left: -70px;
  top: -70px;
  background: #fff;
  transform: rotate(80deg);
}

#button-6:hover a {
  color: #5270B2;
}
@media (max-width: 940px) {
	.crecla_flex div.flex_c50{
		width: calc(50% - 20px);
		margin: 10px;
	}
	.crecla_flex div.feel25{
		width: calc(25% - 20px);
		margin: 10px; position:relative;
	}
	.crecla_flex div.flex_c50item{
		width: calc(50% - 20px);
		margin: 10px;
		padding: 4.6rem 3.0rem;
	}
	.crecla_flex div.price_pic{
		width: calc(40% - 20px);
		margin: 10px;
	}
	.crecla_flex div.price_data{
		width: calc(60% - 30px);
		margin: 15px;
	}
	.price_select1 , .price_select2 ,.price_select3{
		width: calc(33.33333% - 0px);
		padding:10px;
	}
	.crecla_flex div.feel_pict33{
		width: calc(33.333% - 30px);
		margin: 5px;
		padding:15px;
		font-size:130%;
	}
	.feel_item1{
		width: calc(50% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.feel_item2{
		width: calc(50% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.feel_item3{
		width: calc(50% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.crecla_flex div.flex_c50feel_in{
		width: calc(45% - 10px);
		margin: 5px auto; position:relative;
	}
	.crecla_flex div.flex_c50feel_pic{
		width: calc(55% - 10px);
		margin-top: 20px;
	}
	.feel_price45{
		width: calc(50% - 0px);
		margin:0;
		padding:20px;
	}
	.feel_price_icon{
		width: calc(100% - 0px);
		margin:0 auto; text-align:center;
	}
	.price_select_in{ padding:5px; }
	.temcap_l{ left: 12px; }
	.temcap_r{ right: -5px; }
	.crecla_price_block{ padding: 45px; }
}
@media (max-width: 540px) {
	.crecla_flex{ margin-bottom:30px; }
	.crecla_flex div.flex_c66icon{
		width: calc(100% - 4px);
		margin: 2px;
	}
	.crecla_flex div.flex_c33icon{
		width: calc(50% - 4px);
		margin: 2px;
	}
	.crecla_flex div.flex_c50{
		width: calc(90% - 0px);
		margin: 0 auto;
		margin-bottom:10px;
	}
	.crecla_flex div.feel25{
		width: calc(50% - 10px);
		margin: 5px; position:relative;
		margin-bottom:20px;
	}
	.crecla_flex div.flex_c50item{
		width: calc(100% - 10px);
		margin: 5px auto;
		padding: 3.8rem 2.2rem;
	}
	.crecla_flex div.price_pic{
		width: calc(80% - 0px);
		margin: 5px auto;
	}
	.crecla_flex div.price_data{
		width: calc(100% - 0px);
		margin: 5px auto;
	}
	.price_select1 , .price_select2 ,.price_select3{
		width: calc(100% - 10px);
		padding:10px; margin:5px;
	}
	.feel_item1{
		width: calc(95% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.feel_item2{
		width: calc(95% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.feel_item3{
		width: calc(95% - 10px);
		margin:5px;
		padding:20px;
		padding-bottom:0;
	}
	.crecla_flex div.flex_c50feel_in{
		width: calc(45% - 0px);
		margin: 5px auto; position:relative;
	}
	.crecla_flex div.flex_c50feel_pic{
		width: calc(55% - 0px);
		margin-top: 20px;
	}
	.feel_price45{
		width: calc(90% - 0px);
		margin:0;
		padding:20px;
	}
	.feel_price_icon{
		width: calc(100% - 0px);
		margin:0 auto; text-align:center;
	}
	.crecla_flex div.feel_pict33{
		width: calc(50% - 4px);
		margin: 2px;
		padding:6px;
		font-size:110%;
	}
	.feel_pict33 img{ max-width:100px; padding-top:12px }
	.price_select_in{ padding:5px; }
	.temcap_l{
		position: absolute;
		top:80px;
		left: ;
	}
	.temcap_l{ left: 5px; }
	.temcap_r{ right: 6px; }
	.temcap_l div{ font-size:12px; }
	.crecla_price_block{ padding: 25px; }

}
.price_option_block{
	color:#00a0e9;
	padding:0px 5px;
	border-radius:20px;
	margin:10px auto;
	line-height: 1.2;
}
.price_option_block img{ width: 85px; }

.crecla_sectiontit{
    position:relative;
	padding:20px 0;
	text-align:center;
	font-size:240%;
	letter-spacing:1px;
	color:#00a0e9;
	line-height:1.5;
	margin-bottom:50px;
	font-weight: 700;
}
.crecla_sectiontit::after {
  content: url("../images/crecla/tit_dot.png");
  display: table;
  width: 64px;
  height: 15px;
  text-align: center;
   position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.feel_sectiontit{
    position:relative;
	padding:20px 0;
	text-align:center;
	font-size:240%;
	letter-spacing:1px;
	color:#b98c5a;
	line-height:1.5;
	margin-bottom:50px;
	font-weight: 700;
}
.feel_sectiontit::after {
  content: url("../images/crecla/feel_pict.svg");
  display: table;
  width: 64px;
  height: 15px;
  text-align: center;
   position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
}
.feel_sectiontit2{
    position:relative;
	padding:20px 0;
	text-align:center;
	font-size:240%;
	letter-spacing:1px;
	color:#5270b2;
	line-height:1.5;
	margin-bottom:50px;
	font-weight: 700;
}
.feel_sectiontit2::after {
  content: url("../images/crecla/feel_pict2.svg");
  display: table;
  width: 64px;
  height: 15px;
  text-align: center;
   position: absolute;
  top: 80%;
  left: 50%;
  transform: translateX(-50%);
}


.img_round{ border-radius: 68% 70%/60% 70%; box-shadow: -5px -5px 0px 5px rgba(219, 231, 252, 0.8), 5px 5px 0px 7px rgba(197, 240, 255, 0.8);}
.circle{
 position: absolute;
  top: 0;
  right: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #2cb1ed;
  color: #FFF;
  border-radius: 9999px;
  aspect-ratio: 1;
  width: 10rem;
  font-size: 2.2rem;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
}
.circle sup {
  font-size: 0.6em;
}
.circle .num {
  font-size: 1.2em;
}
.circle .unit {
  font-size: 0.9em;
  margin-left: 0.2em;
}
.circle .text_server-mentenance {
  width: 74%;
}
.circle2{
top: auto;
  bottom: 80px;
  right: auto;
  left: 0;
}
.icon_block300{ margin:0 auto; display:table; margin-top: 30px;}
.icon100{ float:left; margin:1px; width:77px; }
.icon100 img{ border-radius: 5px; }
.kakomi{
	background-color:#00a0e9;
	color:white;
	padding:4px 10px;
	font-size:115%;
	display:inline-block;
	border-radius: 30px;
	margin:0 5px;
}
.kakomi2{
	background-color:#5270b2;
	color:white;
	padding:4px 10px;
	font-size:115%; line-height:1.8;
	display:inline-block;
	border-radius: 30px;
	margin-right:10px; margin-top:15px;
}
.kakomi_more{ background-color:#f27066; }

.more_block{
background-color: white;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  line-height: 1.4;
  font-size: 120%;
  font-weight: 700;
  color: #5270b2;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
  display:table;
margin: 0 auto;
margin-bottom: 30px;
}

.circle_feel{
 position: absolute;
top: -30px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff7de;
  color: #CA8A46;
  border-radius: 9999px;
  aspect-ratio: 1;
  width: 80px;
  font-size: 130%;
  text-align: center;
  font-weight: bold;
  line-height: 1.2;
 border: 2px solid white;
 font-style: oblique;
}
@media (max-width: 900px) {
	.icon100{ width:100px; }
}
@media (max-width: 540px) {
	.crecla_sectiontit , .feel_sectiontit , .feel_sectiontit2{ font-size:155%; margin-bottom:30px; }
	.feel_sectiontit::after , .feel_sectiontit2::after { width:40px; height:auto; }
	.kakomi{ margin:5px 5px; }
	.circle_feel{ width:60px; font-size:110%; }
	.more_block{ display:block; }
	.icon100{ width:95px; }
}


