@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */ *,::before,::after{box-sizing:border-box;border-style:solid;border-width:0}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{margin:0}main{display:block}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0}ul,ol{margin:0;padding:0;list-style:none}dt{font-weight:700}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace,monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}svg,img,embed,object,iframe{vertical-align:bottom}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default}:-moz-focusring{outline:auto}select:disabled{opacity:inherit}option{padding:0}fieldset{margin:0;padding:0;min-width:0}legend{padding:0}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type="number"]{-moz-appearance:textfield}label[for]{cursor:pointer}details{display:block}summary{display:list-item}[contenteditable]:focus{outline:auto}table{border-color:inherit;border-collapse:collapse}caption{text-align:left}td,th{vertical-align:top;padding:0}th{text-align:left;font-weight:700}

html {
	font-size: 62.5%;
  /*overflow-y: scroll;*/
	color: #333333;
}
body {
  font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-optical-sizing: auto;
  font-weight: 400;
  font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.02em;
}
main {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
	body {
		font-size: 1.6rem;
	}
}
img {
	width: 100%;
	vertical-align: middle;
	margin-right: auto;
	margin-left: auto;
  caret-color: transparent;
}
.pc {
	display: none;
}
@media screen and (min-width: 768px) {
	.pc {
		display: block;
	}
	.sp {
		display: none;
	}
}


.inner {
  width: 94%;
  max-width: 1000px;
  margin: 0 auto;
}

/*--------------------------------------

other story

--------------------------------------*/
.otherstory {
  background-color: #f4f4ed;
  border-radius: 100px 100px 0 0;
  padding: 160px 0 320px;
}
.otherstory_ttl {
  width: 294px;
  margin: 0 auto 10px;
}
.otherstory_ttl + p {
  font-size: 16px;
  text-align: center;
  margin: 0 0 70px;
}
.l-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.card03 .swiper {
  overflow: visible;
}
.slide-media {
  position: relative;
  overflow: hidden;
  width: 226px;
  height: 308px;
  border: 1px solid #000;
  border-radius: 180px;
  margin: 0 auto;
}
.slide-media-bg01 { background-color: #c598ec; }
.slide-media-bg02 { background-color: #ffe500; }
.slide-media-bg03 { background-color: #64e8a4; }
.slide-media-bg04 { background-color: #fd3e25; }
.slide-media-bg05 { background-color: #ffb3d8; }
.slide-media-bg06 { background-color: #1b9cff; }
.slide-media-bg07 { background-color: #fcb321; }
.slide-media-bg08 { background-color: #06c755; }
.slide-media-bg09 { background-color: #ffa182; }
.slide-media-bg10 { background-color: #fff8ab; }
.slide-media-bg11 { background-color: #fff8ab; }
.slide-media-bg12 { background-color: #6365db; }
.slide-media-bg13 { background-color: #c598ec; }
.slide-media-bg14 { background-color: #06c755; }
.slide-media-bg15 { background-color: #fd3e25; }
.slide-media-bg16 { background-color: #1b9cff; }
.slide-media-bg17 { background-color: #fcb321; }
.slide-media-bg18 { background-color: #ffb3d8; }
.slide-media-bg19 { background-color: #8ceded; }
.slide-media-bg20 { background-color: #c598ec; }

.slide-media img {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  width: auto;
  height: 100%;
}
.swiper-slide {
  position: relative;
}
.career::after,
.charm_ohka::after,
.charm_meitan::after,
.practice::after {
  content: "";
	display: inline-block;
	position: absolute;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}
.career::after {
	bottom: -70px;
	left: 0;
	width: 104px;
	height: 125px;
	background-image: url("/my-story/img/icon_career.svg");
}
.charm_ohka::after,
.charm_meitan::after {
	bottom: -50px;
	left: 50%;
  transform: translate(-50%, 0);
	width: 214px;
	height: 71px;
	background-image: url("/my-story/img/icon_charm_ohka.svg");
}
.charm_meitan::after {
	background-image: url("/my-story/img/icon_charm_meitan.svg");
}
.practice::after {
	bottom: -50px;
	left: 50%;
  transform: translate(-50%, 0);
	width: 214px;
	height: 71px;
	background-image: url("/my-story/img/icon_practice.svg");
}
.swiper-button-prev,
.swiper-button-next {
  display: grid;
  place-content: center;
  width: 30px !important;
  height: 30px !important;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: auto!important;
  bottom: -130px !important;
  margin: 0 !important;
  color: #fff !important;
}
.swiper-button-prev {
  left: calc(50% - 160px) !important;
}
.swiper-button-next {
  right: calc(50% - 160px) !important;
}
.swiper-button-prev::before, 
.swiper-button-next::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  background-color: #2f1e45;
  border-radius: 50%;
}
.swiper-button-next::before {
  bottom: 0;
  left: auto;
  right: 0;
}
.swiper-button-prev::after, 
.swiper-button-next::after {
  font-size: 12px !important;
}
.swiper-button-prev::after {
  transform: rotate(0) !important;
}
.swiper-button-next::after {
  transform: rotate(0) !important;
}
.btn_viewall {
  position: absolute;
  bottom: -135px;
  left: 50%;
  transform: translate(-50%, 0);
  width: 196px;
  height: 40px;
  background-color: #2f1e45;
  border-radius: 50px;
  text-align: center;
}
.btn_viewall img {
  width: 68px;
  padding: 6px 0 0 0;
}
.swiper-button-prev:hover,
.swiper-button-next:hover,
.btn_viewall:hover {
  opacity: .6;
}
@media screen and (max-width: 767px) {
  .otherstory {
    border-radius: 60px 60px 0 0;
    padding: 80px 0 180px;
  }
  .otherstory_ttl {
    width: 217px;
    margin: 0 auto 10px;
  }
  .otherstory_ttl + p {
    font-size: 14px;
    margin: 0 0 30px;
  }
  .slide-media {
    width: calc(125px * 1.2);
    height: calc(170px * 1.2);
  }
  .slide-media img {
    position: absolute;
    top: 20px;
    left: 50%;
    width: auto;
    height: 120%;
  }
  .career::after {
    bottom: -20px;
    left: -5px;
    width: calc(104px * .62);
    height: calc(125px * .62);
  }
  .charm_ohka::after,
  .charm_meitan::after {
    bottom: -26px;
    width: calc(214px * .76);
    height: calc(71px * .76);
  }
  .practice::after {
    bottom: -26px;
    width: calc(214px * .76);
    height: calc(71px * .76);
  }
  .swiper-button-prev,
  .swiper-button-next {
    bottom: -105px !important;
  }
  .swiper-button-prev {
    left: calc(50% - 126px) !important;
  }
  .swiper-button-next {
    right: calc(50% - 126px) !important;
  }
  .btn_viewall {
    bottom: -110px;
    width: 146px;
    height: 40px;
  }

}
/*--------------------------------------

footer

--------------------------------------*/
.sns {
  font-size: 18px;
  text-align: center;
  background-color: #fff;
  border-top: 2px solid #2f1e45;
  padding: 60px 0;
}
.followus_ttl {
  width: 210px;
  margin: 36px auto 0;
}
.sns_list {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sns_list li {
  max-width: 45px;
  margin: 24px 30px 0;
}
.footer_logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2f1e45;
  padding: 30px 0;
}
.footer_logo a {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  width: 190px;
  margin: 0 25px;
}
@media screen and (max-width: 767px) {
  .sns {
    font-size: 16px;
    border-top: 1px solid #2f1e45;
    padding: 20px 0 30px;
  }
  .followus_ttl {
    width: 122px;
    margin: 10px auto 0;
  }
  .sns_list li {
    max-width: 30px;
    margin: 14px 20px 0;
  }
  .footer_logo {
    padding: 10px 0 14px;
  }
  .footer_logo a {
    width: 126px;
    margin: 0 20px;
  }
}