@charset "UTF-8";

*, *::before, *::after {
  box-sizing: border-box;
}

.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  zoom: 1;
}
.clear{
  clear: both;
}


a {
  text-decoration: none;
  transition: all 0.2s;
}
a:hover {
  opacity: 0.7;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}

.mb-4 {
  margin-bottom: 0.4rem !important;
}

.mb-8 {
  margin-bottom: 0.8rem !important;
}
.mb-12 {
  margin-bottom: 1.2rem !important;
}
.mb-16 {
  margin-bottom: 1.6rem !important;
}
.mb-24 {
  margin-bottom: 2.4rem !important;
}
.mb-32 {
  margin-bottom: 3.2rem !important;
}

.mb-64 {
  margin-bottom: 6.4rem !important;
}

.mb-74 {
  margin-bottom: 7.4rem !important;
}
.ml-4{
  margin-left: 0.4rem !important;
}
.ml-8{
  margin-left: 0.8rem !important;
}

.fs-18 {
  font-size: 1.8rem !important;
}
.fs-24 {
  font-size: 2.4rem !important;
}
.fs-32 {
  font-size: 3.2rem !important;
}
.fs-38{
  font-size: 3.8rem !important;
}

.text-center {
  text-align: center;
}
.pos-left{
  float:left;
}
.pos-right{
  float:right;
}

.indent{
  padding-left:1em;
  text-indent:-1em;
}

.marker{
  background: linear-gradient(transparent 70%, #ffea00 0%);
}

html {
  font-size: 62.5%; /* 10px */
  min-height: 100%;
}

body {
  font-family: 'YakuHanJP', 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1;
  color: #282828;
  /* background: linear-gradient(-135deg, #ff7332, #ffe100); */
  background: linear-gradient(315deg, #ff7332, #ffe100);
  background-attachment: fixed;
  background-image: url(https://entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/tokyo-cf/main_bg_v3.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.inner {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.primary p{
  color: #fff;
  margin: 0;
  /* background: #ff3e05; */
  background: #E60013;
  display: inline-block;
  padding: 8px 16px;
  line-height: 1;
  /* border: 1px solid #fff; */
  margin-top: 3.2rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}

header h1{
  text-align: center;
  font-size: 5.8rem;
  font-weight: 900;
  margin-top: 2.4rem;
  margin-bottom: 2.4rem;
  color: #fff;
  filter: drop-shadow(0px 2px 14px #ff4100) drop-shadow(0px 0px 6px #ff4100);
  text-shadow: 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100, 0px 0px 4px #ff4100;
  position: relative;
  z-index: 10;
  line-height: 1.1;
}
header h1 strong{
  font-size: 6.4rem;
  letter-spacing: -0.02em;
}

.lead-txt{
  text-align: center;
  position: relative;
  margin-top: -32px;
}
.lead-txt img{
  width: 640px;
  filter: drop-shadow(0px 1px 1px #fff) drop-shadow(0px 0px 0px #fff) drop-shadow(0px 0px 0px #fff);
}


.main-mv-wrapper{
  width: 100%;
  margin-top: -48px;
}

.tokyo-cf-mv{
  width: 100%;
  background:#fff;
  text-align: center;
  position: relative;
  /* z-index: 1; */
}

.tokyo-cf-mv h2 img{
  width: 640px;
  filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 0px #fff) drop-shadow(0px 0px 0px #fff) drop-shadow(0px 0px 0px #fff) drop-shadow(0px 0px 0px #fff);
}

.mv{
  width: 920px;
  padding-bottom: 2.4rem;
}

.circle1{
  position: absolute;
  top: -128px;
  left: -96px;
  width: 196px;
  mix-blend-mode: screen;
}
.circle2{
  position: absolute;
  bottom: -96px;
  width: 184px;
  left: 184px;
  mix-blend-mode: darken;
}
.circle3{
  position: absolute;
  left: 0;
  width: 164px;
  top: 74px;
}
.circle4{
  position: absolute;
  top: -238px;
  right: 32px;
  mix-blend-mode: multiply;
}
.circle5{
  position: absolute;
  right: 164px;
  bottom: -96px;
  width: 96px;
}
.circle6{
  position: absolute;
  width: 174px;
  bottom: -128px;
  left: 474px;
  mix-blend-mode: hard-light;
}
.bar1{
  position: absolute;
  width: 138px;
  right: 54px;
  top: 38px;
}
.bar2{
  position: absolute;
  width: 124px;
  right: 84px;
  top: 124px;
  mix-blend-mode: multiply;
}
.bar3{
  position: absolute;
  width: 124px;
  left: -96px;
  bottom: -80px;
}
.wave-top{
  margin-left: -160px;
  background-image: url(https://entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/tokyo-cf/wave_top.png);
  height: 82px;
  background-repeat: repeat-x;
  display: block;
}
.wave-bottom{
  margin-left: -160px;
  background-image: url(https://entre-salon.com/wordpress/wp-content/themes/wp.vicuna/images/tokyo-cf/wave_bottom.png);
  height: 82px;
  background-repeat: repeat-x;
  display: block;
}
.cf-type-txt{
  /* margin-top: -24px; */
  text-align: center;
  font-size: 3.2rem;
  font-weight: 900;
  color: #6A3907;
  text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, 0px 2px 0 #fff, 0 -3px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
  filter: drop-shadow(0px 4px 4px #6A3907);
  margin-bottom: 24px;
}
.cf-type-txt strong{
  color: #E60013;
  font-size:5.4rem;
}

.cf-type-ex{
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 54px;
  font-weight: 600;
  color: #ffffff;
  filter: drop-shadow(0px 0px 1px #6A3907) drop-shadow(0px 0px 0px #6A3906) drop-shadow(0px 0px 0px #6A3907) drop-shadow(0px 0px 0px #6A3907) drop-shadow(0px 0px 0px #6A3907) drop-shadow(0px 0px 0px #6A3907);
}

.cf-comp-container{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  justify-content: space-between;
  margin-bottom: 32px;
  align-items: stretch;
}
.cf-comp-item{
  /* min-height: 500px; */
  background: #fff;
  width: 316px;
  min-height: 516px;
  border-radius: 16px;
}
.cf-comp-video{
  display: flex;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  margin-bottom: 32px;
  align-items: stretch;
}


.cf-comp-title{
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
}


.cf-comp-katsu{
  border: 4px solid #AACE37;
  background: #F0F5CD;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
}

.cf-comp-dx{
  border: 4px solid #6EC8DE;
  background: #DCF0F8;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
}

.cf-comp-sk{
  border: 4px solid #F19CAD;
  background: #FCE7EB;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.3));
}

.cf-comp-item h2{
  text-align: center;
  /* font-size: 1.6rem; */
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.2;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.cf-comp-item h2 strong{
  /* font-size: 3.6rem; */
  font-size: 4.4rem;
  font-weight: 900;
}
.cf-comp-katsu h2{
  background: #AACE37;
  color: #fff;
  position: relative;
}
.cf-comp-katsu h2 .cf-comp-num{
  background: #AACE37;
  line-height: 38px;
  font-size: 2.4rem;
  border-radius: 100%;
  margin-left: auto;
  display: block;
  margin-right: auto;
  width: 174px;
  height: 78px;
  margin-top: -54px;
  margin-bottom: -24px;
}
.cf-comp-dx h2 .cf-comp-num{
  background: #6EC8DE;
  line-height: 38px;
  font-size: 2.4rem;
  border-radius: 100%;
  margin-left: auto;
  display: block;
  margin-right: auto;
  width: 174px;
  height: 78px;
  margin-top: -54px;
  margin-bottom: -24px;
}
.cf-comp-sk h2 .cf-comp-num{
  background: #F19CAD;
  line-height: 38px;
  font-size: 2.4rem;
  border-radius: 100%;
  margin-left: auto;
  display: block;
  margin-right: auto;
  width: 174px;
  height: 78px;
  margin-top: -54px;
  margin-bottom: -24px;
}
.cf-comp-katsu h2 .comp-num-inner,
.cf-comp-dx h2 .comp-num-inner,
.cf-comp-sk h2 .comp-num-inner{
  border-bottom: 2px solid #fff;
}

.cf-comp-dx h2{
  background: #6EC8DE;
  color: #fff;
}
.cf-comp-sk h2{
  background: #F19CAD;
  color: #fff;
}

.cf-comp-katsu .comp-item-inner h3{
  background: #1B9630;
  color: #fff;
  text-align: center;
  display: block;
  width: 208px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-radius: 48px;
  margin-bottom: -16px;
  position: relative;
}
.cf-comp-dx .comp-item-inner h3{
  background: #0091B4;
  color: #fff;
  text-align: center;
  display: block;
  width: 208px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-radius: 48px;
  margin-bottom: -16px;
  position: relative;
}
.cf-comp-sk .comp-item-inner h3{
  background: #E7316E;
  color: #fff;
  text-align: center;
  display: block;
  width: 208px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.8rem;
  font-weight: 700;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-radius: 48px;
  margin-bottom: -16px;
  position: relative;
}

.comp-item-inner{
  padding: 16px;
  position: relative;
}

.comp-item-link{
  text-align: center;
}

.cf-comp-katsu .comp-item-link a {
  display: block;
  background: #1b9630;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-radius: 16px;
  box-shadow: 0px 5px 0px #157325;
}
.cf-comp-katsu .comp-item-link a:active{
  position: relative;
  box-shadow: 0px 0px 0px #1B9630;
  transform: translateY(5px);
}


.cf-comp-dx .comp-item-link a {
  display: block;
  background: #0091b4;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-radius: 16px;
  box-shadow: 0px 5px 0px #007692;
}
.cf-comp-dx .comp-item-link a:active{
  position: relative;
  box-shadow: 0px 0px 0px #0091B4;
  transform: translateY(5px);
}


.cf-comp-sk .comp-item-link a {
  display: block;
  background: #e7316e;
  color: #fff;
  font-weight: 700;
  font-size: 2.2rem;
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
  border-radius: 16px;
  box-shadow: 0px 5px 0px #c62a5e;
}
.cf-comp-sk .comp-item-link a:active{
  position: relative;
  box-shadow: 0px 0px 0px #E7316E;
  transform: translateY(5px);
}

.comp-txt-wrap{
  padding: 10px;
  line-height: 1.2;
  font-weight: 500;
  background: #ffffff;
  padding-top: 24px;
  letter-spacing: -0.02em;
  border-radius: 16px;
  margin-bottom: 16px;
}
.comp-txt-no1{
  /*
  border-bottom: 1px solid;
  padding-bottom: 8px;
  */
  margin-bottom: 8px;
}
.comp-txt-no2{
  font-size: 1.3rem;
  margin-bottom: 8px;
  padding-bottom: 8px
}
.cf-comp-katsu .comp-txt-no2{
  border-bottom: 1px solid #00742e;
}
.cf-comp-dx .comp-txt-no2{
  border-bottom: 1px solid #003D98;
}
.cf-comp-sk .comp-txt-no2{
  border-bottom: 1px solid #b01b2c;
}

.comp-list{
  list-style-type: disc;
  margin-left: 24px;
  font-weight: 700;
}
.comp-list li{
  margin-bottom: 4px;
}
.comp-list li:last-child{
  margin-bottom: 0;
}

.cf-comp-katsu .comp-list{
  color: #AACE37;
}
.cf-comp-dx .comp-list{
  color: #003D98;
}
.cf-comp-sk .comp-list{
  color: #b01b2c;
}

.comp-list-at-txt{
  margin-top: 8px;
  font-size: 1.3rem;
  display: inline-block;
  /* color: #282828; */
  font-weight: 500;
}


.comp-txt-no3{
  font-size: 1.3rem;
  margin-top: 8px;
  padding-top: 8px
}
.cf-comp-katsu .comp-txt-no3{
  border-top: 1px solid #00742e;
}
.cf-comp-dx .comp-txt-no3{
  border-top: 1px solid #003D98;
}
.cf-comp-sk .comp-txt-no3{
  border-top: 1px solid #b01b2c;
}

.comp-txt-wrap h4{
  font-weight: 700;
  font-size: 1.8rem;
}

.cf-comp-katsu .comp-txt-wrap h4{
  color: #AACE37;
}
.cf-comp-dx .comp-txt-wrap h4{
  color: #003D98;
}
.cf-comp-sk .comp-txt-wrap h4{
  color: #b01b2c;
}

.comp-txt-wrap-strong{
  color: #E60013;
  font-size: 2.2rem;
  font-weight: 900;
}

.comp-special{
  padding: 0.8rem;
  background: #FFF3C2;
}
.comp-special-header{
  background: #AACE37;
  color: #fff !important;
  padding: 6px;
  line-height: 1;
  margin-bottom: 8px;
  border-radius: 4px;
  text-align: center;
}

.comp-top-link{
  display: block;
  /* width: 196px; */
  width: 208px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 4px;
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 8px;
  font-weight: 700;
  font-size: 1.6rem;
  /* width: calc(100% - 32px); */
}

.cf-comp-katsu .comp-top-link{
  background: linear-gradient(#ffffff, #f0f5cd);
  border: none;
  color: #1b9630;
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}
.cf-comp-dx .comp-top-link{
  background: linear-gradient(#ffffff, #DCF0F8);
  border: none;
  color: #0091B4;
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}
.cf-comp-sk .comp-top-link{
  background: linear-gradient(#ffffff, #FCE7EB);
  border: none;
  color: #E7316E;
  filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}


.bottom-img{
  text-align: center;
  margin-bottom: 32px;
}
.bottom-img img{
  width: 640px;
}


footer .inner{
  color: #6A3907;
  border-top: 1px solid #6A3907;
  text-align: center;
  padding-top: 32px;
  padding-bottom: 32px;
}


.balloon{
  position: absolute;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border-radius: 100%;
  text-align: center;
  color: #ffea00;
  font-size: 1.8rem;
  font-weight: 600;
  background-color: #e60013;
  top: 208px;
  left: -34px;
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.2));
}
.balloon::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: 0;
  bottom: 0;
  border-right: 20px solid #e60013;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: rotate(225deg);
}

.pamphlet-dl{
  font-size: 16px;
  font-weight: 600;
  display: block;
  text-align: center;
  line-height: 44px;
  background: #ff4100;
  border-radius: 64px;
  color: #fff;
  margin-bottom: 32px;
}