@charset "UTF-8";
/* Scss Document */
.container02 {
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container02 {
    padding: 0 10px;
  }
}

.link {
  border: 1px solid #343535;
  color: #000;
  font-family: "游明朝体", "Yu Mincho";
  padding: 2px 30px 1px;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-top: 10px;
}

.link02 a, .update .link02, .link02 p {
  background: #DDDAD6;
  color: #000;
  font-family: "游明朝体", "Yu Mincho";
  padding: 5px 50px;
  letter-spacing: 0.1em;
  display: inline-block;
  margin-top: 30px;
}

.Point .link02 {
  letter-spacing: 0.1em;
  text-align: right;
}

.Point .link02 p {
  margin: 0;
  padding: 3px 20px 0;
}

.ninki {
  position: relative;
}

.ninki::after {
  content: "";
  background: url(../img/seijin/ninki.png) no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  top: -15px;
  left: -12px;
  width: 21.5%;
  height: 36%;
  /*
		content: "人気!";
		font-size: 1.8em;
		background: #FFF100;
		padding: 8% 0;
		text-align: center;
		font-family: "Noto Sans JP",Helvetica, Arial, "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, Meiryo, sans-serif;
		font-weight: 700;
		line-height: 30px;
		border-radius: 50%;
		width: 25%;
		height: 40%;
		position: absolute;
		top: -15px;
		left: -25px;
		letter-spacing: .1em;
		@include sphoneP {
			font-size: 4.6vw;
			top: -25px;
			left: -10px;
			padding: 4% 0;
			width: 20%;
    height: 29%;
		}
		@include Pc {
			font-size: 1.5em;
			padding-top: 23px;
			width: 80px;
			height: 80px;
			top: -15px;
			line-height: 30px;
			font-size: 18px;
			letter-spacing: .1em;
		}*/
}

#contents a:hover {
  opacity: 0.6;
}

/****************     スライダー     *************************/
/* imgのみ */
.item1 {
  opacity: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 15s 0s infinite;
  animation: anime 15s 0s infinite;
}

.item1:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item1:nth-of-type(3) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
}

/* ふわっとアニメーション */
@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

.seijin-top {
  background: #E8E3D9;
  padding-top: 26%;
}

@media (min-width: 769px) {
  .seijin-top {
    padding-top: 100px;
    padding-bottom: 1px;
  }
}

#slideshow {
  position: relative;
  max-width: 680px;
  height: 590px;
  margin: 0 auto 30px auto;
}

#slideshow:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -87px;
  background: url(../img/seijin/slider_before.svg) no-repeat;
  background-size: contain;
  width: 96%;
  height: 323px;
  z-index: 99;
  display: inline-block;
}

#slideshow:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 3px;
  background: url(../img/seijin/slider_after.svg) no-repeat;
  background-size: contain;
  width: 100%;
  height: 264px;
  z-index: 99;
  display: inline-block;
}

#slideshow {
  position: relative;
}

#slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
}

#slideshow img.active {
  z-index: 10;
}

#slideshow img.last-active {
  z-index: 9;
}

@media screen and (max-width: 768px) {
  #slideshow {
    height: 600px;
  }
  #slideshow:before {
    top: -80px;
  }
  #slideshow:after {
    bottom: -12px;
  }
}

@media screen and (max-width: 480px) {
  #slideshow {
    height: auto;
    padding-top: 86%;
    width: 94%;
    margin: 0 auto;
  }
  #slideshow:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -80px;
    background-position: center;
    background-size: contain;
    width: 96%;
    height: 129px;
    z-index: 99;
    display: inline-block;
  }
  #slideshow:after {
    content: "";
    position: absolute;
    left: 0px;
    right: 0;
    margin: auto;
    bottom: 3%;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 134px;
    z-index: 99;
    display: inline-block;
  }
}

.MainV-Title {
  padding: 25px 0 0;
  width: 100%;
  margin: 0 auto;
  text-align: left;
}

@media (min-width: 769px) {
  .MainV-Title {
    width: 75%;
  }
}

.MainV-Title span {
  display: inline-block;
  padding-left: 2px;
  font-weight: 300 !important;
}

@media (min-width: 769px) {
  .MainV-Title span {
    padding-left: 25px;
  }
}

.MainV-Txt {
  padding-left: 0;
  margin: 20px auto 35px auto;
  width: 95%;
  text-align: left;
  letter-spacing: .1em;
  line-height: 20px;
}

@media (min-width: 769px) {
  .MainV-Txt {
    margin: 30px auto 50px;
    width: 70%;
  }
}

/*Point*/
.Point {
  background: #EFDCCB;
  text-align: center;
}

.Point h2 {
  margin-bottom: 15px;
}

.Point h2 img {
  width: 100%;
  max-width: 600px;
}

.Point-List {
  background: #fff;
  padding: 3% 10px 5%;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: inherit;
  -webkit-align-items: inherit;
      -ms-flex-align: inherit;
          align-items: inherit;
}

@media (min-width: 769px) {
  .Point-List {
    padding: 2% 20px 1%;
  }
}

.Point-List > p {
  width: 100%;
  margin: 15px 0 0;
}

.Point-List li {
  width: 100%;
  /*&:nth-child(n + 3) .Point-List-inner>p {
				@include Pc {
					margin-top: 49px;
				}
			}*/
}

@media (min-width: 769px) {
  .Point-List li {
    width: 49%;
    margin: 0 0 2%;
  }
  .Point-List li:last-child {
    margin-right: 0;
  }
}

.Point-List li a {
  height: 100%;
  display: block;
  padding-top: 130%;
  margin-top: -20px;
}

.Point-List .pointlist01 a {
  background: url(../img/seijin/pointlist01.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
}

.Point-List .pointlist02 a {
  background: url(../img/seijin/pointlist02.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
}

.Point-List .pointlist03 a {
  background: url(../img/seijin/pointlist03.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
}

.Point-List .pointlist04 a {
  background: url(../img/seijin/pointlist04.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
}

.Point-List-inner {
  display: none;
  padding: 2%;
  text-align: right;
  margin-bottom: -10px;
}

.Point-List-inner h3 {
  font-size: 31px;
  line-height: 1;
  margin-bottom: 20px;
  text-align: left;
  color: #fff;
  text-shadow: 1px 1px 3px #999;
}

@media (max-width: 768px) {
  .Point-List-inner h3 {
    font-size: 36px;
  }
}

@media only screen and (max-width: 480px) {
  .Point-List-inner h3 {
    font-size: 29px;
  }
}

.Point-List-inner p {
  margin: 10px 0 3px;
  line-height: 1.7;
  font-weight: bold;
  font-size: 10px;
}

@media (min-width: 769px) {
  .Point-List-inner p {
    font-size: 12px;
  }
}

/*  Banner  */
.Banner .container {
  max-width: 800px;
  padding: 0;
}

.Banner .container img {
  margin-bottom: 8%;
}

.Banner .container .container02 {
  padding: 0 10%;
}

/*  Plan  */
.Plan {
  background: #DDE5D6;
}

.Plan h2 {
  text-align: center;
  padding-top: 30px;
}

@media (max-width: 768px) {
  .Plan h2 {
    max-width: 150px;
    margin: 0 auto;
    padding: 0;
  }
}

.Plan h2 img {
  max-width: 250px;
}

.Plan ul {
  padding: 20px 0;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .Plan ul {
    margin-top: 0;
  }
}

@media (min-width: 769px) {
  .Plan ul {
    padding: 0;
  }
}

.Plan ul li {
  width: 100%;
  position: relative;
  margin: 0 auto  5%;
  text-align: center;
  /*
			@include sphoneP {
				width: 100%;
				padding-top: 63%;
			}*/
}

@media (min-width: 769px) {
  .Plan ul li {
    width: 32%;
  }
}

.Plan ul li .plan-inner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  padding-top: 17%;
  text-align: center;
}

@media only screen and (max-width: 480px) {
  .Plan ul li .plan-inner {
    padding-top: 14vw;
  }
}

.Plan ul li .plan-inner h3 {
  letter-spacing: .1em;
}

@media (max-width: 768px) {
  .Plan ul li .plan-inner h3 {
    font-size: 1.6em;
  }
}

.Plan ul li .plan-inner p.KleeOne {
  text-align: left;
  width: 240px;
  margin: 10px auto 0;
  line-height: 1.3;
  font-size: 16px;
}

@media (min-width: 769px) {
  .Plan ul li .plan-inner p.KleeOne {
    width: 245px;
  }
}

/******************      coordination以下の共通     **********************/
#coordination, #counseling, #photo, .seijin-plan {
  text-align: center;
}

#coordination .MainV-Title, #counseling .MainV-Title, #photo .MainV-Title, .seijin-plan .MainV-Title {
  padding: 30px 2% 0;
}

#coordination .coordination-txt, #counseling .coordination-txt, #photo .coordination-txt, .seijin-plan .coordination-txt {
  padding-top: 0;
  max-width: 800px;
  margin: 0 auto;
}

#coordination .coordination-txt h3, #counseling .coordination-txt h3, #photo .coordination-txt h3, .seijin-plan .coordination-txt h3 {
  padding-top: 40px;
  text-align: left;
}

#coordination .coordination-txt p, #counseling .coordination-txt p, #photo .coordination-txt p, .seijin-plan .coordination-txt p {
  margin: 10px 0 20px;
  text-align: left;
}

@media (min-width: 769px) {
  #coordination .coordination-txt p, #counseling .coordination-txt p, #photo .coordination-txt p, .seijin-plan .coordination-txt p {
    margin: 20px auto 30px;
  }
}

#coordination .coordination-txt .container02, #counseling .coordination-txt .container02, #photo .coordination-txt .container02, .seijin-plan .coordination-txt .container02 {
  margin: 30px auto;
}

#coordination .coordination-txt figcaption, #counseling .coordination-txt figcaption, #photo .coordination-txt figcaption, .seijin-plan .coordination-txt figcaption {
  margin-top: 10px;
  font-weight: 700 !important;
}

/******************      counseling      **********************/
#counseling .flow {
  background: #E8F2E4;
}

#counseling .flow h3 {
  text-align: center;
  padding: 10px;
  background: #fff;
}

#counseling .flow h4 {
  padding-top: 40px;
  text-align: left;
  margin-bottom: 10px;
}

@media (min-width: 769px) {
  #counseling .flow h4 {
    padding-top: 30px;
  }
}

#counseling .flow p {
  margin: 10px 0 20px;
  text-align: left;
}

@media (min-width: 769px) {
  #counseling .flow p {
    margin: 10px auto 30px;
  }
}

#counseling .flow img {
  max-width: 250px;
}

#counseling .flow .red {
  color: #DD7B6C;
}

/******************      studio      **********************/
#studio {
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  #studio section {
    padding-top: 0;
  }
}

#studio section ul {
  text-align: right;
}

#studio section ul li {
  width: 100%;
  margin-bottom: 40px;
}

@media (min-width: 769px) {
  #studio section ul li {
    width: 45%;
    margin: 2% 0;
  }
}

#studio section ul li h2 {
  margin-bottom: 10px;
  font-family: "游明朝体", "Yu Mincho";
  font-size: 2em;
}

#studio section ul li .Map {
  overflow: hidden;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  margin: 40px auto 20px;
  height: 300px;
  width: 300px;
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
  border: 2px solid #F9C;
}

@media (min-width: 769px) {
  #studio section ul li .Map {
    height: 300px;
    width: 300px;
    border-radius: 50%;
  }
}

#studio section ul li p {
  text-align: center;
  margin-bottom: 20px;
}

#studio section ul li .gm-style .place-card-medium {
  display: none !important;
}

/******************      photo      **********************/
#photo .coordination-txt h3 {
  padding-top: 10px;
}

.photo-img {
  max-width: 800px;
  margin: 0 auto;
}

.photo-img li {
  width: 100%;
}

@media (min-width: 769px) {
  .photo-img li {
    width: 32%;
    margin-right: 2%;
  }
}

@media (min-width: 769px) {
  .photo-img li:last-child {
    margin-right: 0;
  }
}

/******************      archive-furisode      **********************/
#archive-furisode h2 {
  margin-bottom: 20px;
}

@media (min-width: 769px) {
  #archive-furisode h2 {
    margin-left: 2em;
  }
}

#archive-furisode .furisode-box {
  background: #E3DAAF;
}

#archive-furisode .furisode-box ul {
  -webkit-box-pack: start;
  -webkit-justify-content: start;
      -ms-flex-pack: start;
          justify-content: start;
  padding: 40px 5%;
}

#archive-furisode .furisode-box ul li {
  width: 33.3%;
  border: 5px solid #EDE5AD;
}

@media (min-width: 769px) {
  #archive-furisode .furisode-box ul li {
    width: 20%;
    margin: 0;
  }
}

#archive-furisode .furisode-box ul li .archive-background {
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 165%;
}

/******************      flow      **********************/
#flow {
  background: #F7C4B3;
  padding-bottom: 35px;
}

#flow .container {
  padding-top: 5px;
}

#flow .container h2 {
  background: #fff;
  text-align: center;
  margin: 30px 0;
}

@media (min-width: 769px) {
  #flow .container h2 {
    margin: 50px auto;
    max-width: 500px;
  }
}

#flow .container h2 img {
  width: 100%;
}

#flow .container .flow-list {
  background: #fff;
  padding: 20px 10px;
}

#flow .container .flow-list-box {
  border: 2px solid #B7B7B7;
  padding: 20px 10px;
}

#flow .container .flow-list-box li {
  width: 100%;
}

@media (min-width: 769px) {
  #flow .container .flow-list-box li {
    width: 48%;
  }
}

#flow .container .flow-list-box li h3 {
  font-size: 16px;
  position: relative;
  padding: 10px 0 12px 40px;
  border: 2px solid #B7B7B7;
  margin: 10px 0 20px 50px;
}

#flow .container .flow-list-box li h3::before {
  content: "";
  width: 75px;
  height: 76px;
  position: absolute;
  top: -16px;
  left: -50px;
}

#flow .container .flow-list-box li p {
  padding: 0 20px;
}

@media only screen and (max-width: 480px) {
  #flow .container .flow-list-box li p {
    padding: 0 5px;
  }
}

#flow .container .flow-list-box li figcaption {
  margin: 2% 0 0 5%;
}

#flow .container .flow-list-box .flow-contact {
  width: 80%;
  margin: 20px auto;
  /*.mail a::before {
					background: url(../img/seijin/flow/icon-mail.svg) no-repeat;
					background-size: cover;
					width: 50px;
					height: 40px;
					left: 12%;
						@include sphoneP {
							height: 35px;
							width: 45px;
							left: 2%;
						}
				}
				.line a::before {
					background: url(../img/seijin/flow/icon-line.svg) no-repeat;
					background-size: cover;
						@include sphoneP {
							left: 2%;
						}
					
				}
				.tel a::before {
					background: url(../img/seijin/flow/icon-tel.svg) no-repeat;
					background-size: cover;
					width: 45px;
					left: 14%;
						@include sphoneP {
							left: 2%;
						}
				}*/
}

@media screen and (max-width: 410px) {
  #flow .container .flow-list-box .flow-contact {
    width: 100%;
  }
}

#flow .container .flow-list-box .flow-contact p {
  margin: 10px auto;
  line-height: 1;
}

#flow .container .flow-list-box .flow-contact p a {
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
  /*&::before {
							content: "";
							width: 45px;
							height: 45px;
							position: absolute;
							top: -11px;
							left: 10%;
							@include sphoneP {
								width: 40px;
								top: -15px;
    							left: 2%;
							}
						}
						&::after {
							content: "";
							width: 8px;
							height: 8px;
							position: absolute;
							top: 3px;
    						right: 13%;
							margin: auto;
							box-sizing: border-box;
							border: 10px solid transparent;
							border-left: 15px solid #000;
							@include sphoneP {
								right: 5%;
								top: 1px;
							}
						}*/
}

#flow .container .flow-list-box .flow-attention {
  border: 1px solid #B7B7B7;
  padding: 20px 5%;
  margin: 20px auto;
  width: 82%;
  max-width: 400px;
}

@media (min-width: 769px) {
  #flow .container .flow-list-box .flow-attention {
    max-width: 300px;
  }
}

#flow .container .flow-list-box .flow-attention h4 {
  border-bottom: 1px solid #B7B7B7;
  margin-bottom: 15px;
}

#flow .container .flow-list-box .flow-attention h4 img {
  max-width: 30px;
  margin: -8px 7px 5px 5px;
}

@media (min-width: 769px) {
  #flow .container .flow-list-box .flow-attention h4 img {
    max-width: 40px;
  }
}

#flow .container .flow-list-box .flow-attention li {
  list-style: disc;
  margin: 0 0 5px 10%;
  width: 100%;
}

#flow .container .flow-list .step01 h3::before {
  background: url(../img/seijin/flow/step01.png) no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 410px) {
  #flow .container .flow-list .step02 h3 {
    line-height: 1.2;
    padding-right: 10px;
  }
}

#flow .container .flow-list .step02 h3::before {
  background: url(../img/seijin/flow/step02.png) no-repeat;
  background-size: cover;
}

@media only screen and (max-width: 410px) {
  #flow .container .flow-list .step02 h3::before {
    top: -6px;
  }
}

#flow .container .flow-list .step03 h3::before {
  background: url(../img/seijin/flow/step03.png) no-repeat;
  background-size: cover;
}

#flow .container .flow-list .step04 h3::before {
  background: url(../img/seijin/flow/step04.png) no-repeat;
  background-size: cover;
}

#flow .container .flow-list .step05 h3::before {
  background: url(../img/seijin/flow/step05.png) no-repeat;
  background-size: cover;
}

#flow .container .flow-list .yajirushi {
  margin-bottom: 120px;
  position: relative;
}

#flow .container .flow-list .yajirushi::after {
  content: "";
  background: url(../img/seijin/flow/yajirushi.svg) no-repeat;
  background-size: cover;
  background-position: bottom center;
  width: 45px;
  height: 45px;
  position: absolute;
  bottom: -88px;
  right: 0;
  left: 0;
  margin: auto;
}

/****************     plan1     *************************/
.plan-img li {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 50px;
}

@media (min-width: 769px) {
  .plan-img li {
    width: 32%;
    margin-right: 2%;
  }
}

@media (min-width: 769px) {
  .plan-img li:nth-child(n + 3) {
    margin-right: 0;
  }
}

#plan1 .plan-img li:last-child, #plan3 .plan-img li:last-child {
  width: 100%;
  margin: 0 auto 50px;
}

.seijin-plan .ninki::after {
  background: url(../img/seijin/ninki02.png) no-repeat;
  background-size: contain;
  left: -20px;
  width: 18%;
  height: 15%;
}

@media only screen and (max-width: 480px) {
  .seijin-plan .ninki::after {
    left: -10px;
  }
}

@media (min-width: 769px) {
  .seijin-plan .ninki::after {
    top: -25px;
    width: 65px;
    height: 65px;
  }
}

.seijin-plan .Option {
  background: #D4D6E1;
  padding-top: 10px;
}

.seijin-plan .Option .title04 {
  background: #727272;
}

.seijin-plan .Option .title04 span {
  display: block;
  font-weight: normal;
}

.seijin-plan .Option tr {
  background: #fff;
}

.seijin-plan .Option .td-Price {
  width: 30%;
  font-size: 13px;
}

.seijin-plan .Option-txt {
  background: none !important;
}

.seijin-plan .Option-txt th {
  padding: 5px 5% 15px;
}

@media (min-width: 769px) {
  .seijin-plan .Option #OptionLeft {
    float: none;
    width: 50%;
  }
}

.seijin-plan-txt-box {
  border: 10px solid #f6f1f7;
  max-width: 500px;
  margin: 40px auto 80px;
  padding: 0 5%;
  background: #fff;
}

@media only screen and (max-width: 480px) {
  .seijin-plan-txt-box {
    margin: 20px auto 60px;
    width: 90%;
  }
}

.seijin-option {
  background: #F6F2F8;
}

.seijin-option .Twhite {
  padding: 15px 0 10px;
  text-align: left;
  margin-right: 46%;
}

@media (min-width: 769px) {
  .seijin-option .Twhite {
    text-align: revert;
    padding-right: 20%;
  }
}

.seijin-option .Option-box {
  max-width: 500px;
  background: #f0f1b7;
}

.seijin-option .Option-box th, .seijin-option .Option-box td {
  border: none;
  padding: 1% 6%;
}

.seijin-option .Option-box .td-Price {
  width: 42%;
}

.seijin-option .Option-box .ojyou {
  padding: 0 7% 1%;
}

#plan1 .seijin-option, #plan2 .seijin-option {
  padding-bottom: 0;
  margin-bottom: 35px;
}

#plan3 .MainV-list {
  background: #e9ddb5;
  letter-spacing: .1em;
  padding: 20px 10px;
}

#plan3 .nayami ol {
  max-width: 360px;
  margin: 0 auto;
  line-height: 2;
  text-align: left;
  padding: 0 10px;
}

#plan3 .nayami ol h3 {
  margin: 20px 0 10px;
}

#plan3 .nayami ol li {
  margin: 0;
  padding-left: 20px;
  letter-spacing: .1em;
  font-size: 15px;
}

@media only screen and (max-width: 480px) {
  #plan3 .nayami ol li {
    padding-left: 12px;
  }
}

#plan3 .nayami ol li::before {
  content: "□ ";
}

#plan3 .Bline {
  display: inline-block;
  padding: 0 20px;
  border-bottom: 5px solid #ded5d0;
}

@media only screen and (max-width: 480px) {
  #plan3 .Bline {
    padding: 0;
  }
}
/*# sourceMappingURL=page-seijin.css.map */