@charset "UTF-8";
*{
  color:#4d4341;
  font-size:1.4rem;
  line-height: 1.5;
  font-weight: 500;
}
body{
  background-color: #f8f2f2;
}
/* loading画面 */
/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  background-color:#a56879;
  /* 以下のコードを追加 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.loaded {
  opacity: 0;
  visibility: hidden;
}

.loaders .loader {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 25%;
  max-width: 25%;
  height: 200px;
  align-items: center;
  justify-content: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;}

/**
 * Util classes
 */
@keyframes scale {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; }
  45% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 0.7; }
  80% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

.ball-pulse > div:nth-child(1) {
  -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(2) {
  -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div:nth-child(3) {
  -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
          animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08); }

.ball-pulse > div {
  background-color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  display: inline-block; }

  /* loading設定終了 */


h1,h2,h3,h4,h5,h6,span {
  font-family: "Sawarabi Mincho"; 
  line-height: 2;
} 

p,a,input {
  font-family: 'BIZ UDPMincho', serif;
  line-height: 2;
} 
p,img{
  margin:2rem auto;
}
#contents{
  width: min(100%,45rem);
  margin:auto;
  overflow-x: hidden;
}

.inner{
  width: 90%;
  margin:auto;
}
h1{
  margin-bottom: 0;
}
h2{
  width:min(90%,500px);
  margin:auto;
  height: auto;
  padding-bottom:2rem;
  font-size: 2.4rem;
  text-align: center;
}

span,h3,.text_color{
  color: #a56879;
}
span{font-size:120%;}


.text_uline.active{
  background-position: -100% .5em;
}
.text_uline{
  background-repeat: repeat-x;
  background-size: 200% 0.8em;
  background-position: 0 0.5em;
  transition: all 2s ease;
  font-weight: bold;
}
.text_uline{
  background-image: -webkit-linear-gradient(left, transparent 50%, rgba(218,173,189,0.6) 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, rgba(218,173,189,0.6) 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, rgba(218,173,189,0.6) 50%);
  background-image: -o-linear-gradient(left, transparent 50%, rgba(218,173,189,0.6) 50%);
  background-image: linear-gradient(left, transparent 50%, rgba(218,173,189,0.6) 50%);
}

#voice01 .text_uline{
  background-image: -webkit-linear-gradient(left, transparent 50%, #e0c9a3 50%);
  background-image: -moz-linear-gradient(left, transparent 50%, #e0c9a3 50%);
  background-image: -ms-linear-gradient(left, transparent 50%, #e0c9a3 50%);
  background-image: -o-linear-gradient(left, transparent 50%, #e0c9a3 50%);
  background-image: linear-gradient(left, transparent 50%, #e0c9a3 50%);
}



section{
  padding:3rem 0;
  width: 100%;
 }

.align_center{
  text-align: center;
}
.align_left{
  text-align: left;
}

/* 未設定 */
main{
  overflow-x: hidden;
}

/*背景の動的動作CSS*/

.flex{
  display:flex;
  align-items:center;
  justify-content:center;
}


/* .flex.listDecoText > ふわっと */
.flex.listDecoText p{
  width: 100%;
  display: block;
  margin:0;
  padding:0;
}

.flex.listDecoText p img{
  width: 50%;
  margin:0;
  padding:0;
}
.flex.listDecoText p:nth-child(even){
  text-align: right;
}

/*
========================================
    header
========================================= */

header{
  width:100%;
  height: 100%;
  background-color: #fff;
  position: relative;
}
header img{
  margin:0;
}
header span{
  color:#4c3636;
}

.headerBack{
  /*position: absolute;
  */
  top:0;
  left:0;
  width: 100%;
  height: 100%;
}
.headerTextWrap{
  width: 60%;
  position: absolute;
  left:40%;
  top:0;
}
.headerTextWrap p{
  line-height: 1.5;

}
header .flex.listDecoText {
  width: 40%;
    height: 150px;
 }
header .flex.listDecoText p{
  position: relative;
 }
header .flex.listDecoText p img{
  width: 8rem;
}
header .flex.listDecoText p img{
  top:-3rem;
  position: absolute;
}
h1{
  position: relative;
}
h1 img{
  position: absolute;
  top:-6rem;
  left:0;
  right:0;
  display: inline-block;
  margin:auto;

}
/*
========================================
    formCSS
========================================= */

.form{
  text-align: center;
  background-color: #fff;
  padding: 7rem 0;
}
.form p.deco{
  position: relative;
}
.form p.deco img{
  position: absolute;
  top:-3rem;
  left:0;
  display: inline-block;
  content:"";
  width: 40%;
  height: 10rem;
  background-size: contain;
}

.form img{
  margin:0;
}
.formWrap{
  background-color: #e5d5d5;
  padding: 4rem 2rem;
}
.form h3{
  font-size:1.4rem;
}
.form h3 span{
  font-size:3.2rem;
}

.btnWrap{
  margin:3rem auto;
  width: 90%;
}
.btnWrap a{
  font-size:1.4rem;
  animation: poyopoyo 5s ease-out infinite;
  animation-play-state: running;
  opacity: 1;
  display: inline-block;
  line-height: 5rem;
  padding:1rem 0;
  border-radius:30vh ;
  border: 1px solid #ba6879;
  background-color: #ba6879;
  color: #fff;
  width: 100%;
}

@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.95);
  }
}
.form .btnWrap a:hover{
  background-color: #fff;
  color: #ba6879;
  animation-play-state: paused;
  transform: scale(1.2);
  transition: 1s;
}

/*form個別設定*/
#form01{
  padding-top: 10rem;
}
#form04{
  padding-bottom: 10rem;
}

/*MYSP / マイスピフォーム設定*/

.required{
  margin: 1rem auto 0;
}
.required_color{
  background-color: #fff!important;
}
input{
  border: none;
  width: 90%;
  padding:1rem;
  border-radius:0.5rem ;
}
.form_input_submit{
  padding-top: 3rem;
}
.submit input{
  font-size: 1.4rem;
  animation: poyopoyo 5s ease-out infinite;
  animation-play-state: running;
  opacity: 1;
  display: inline-block;
  line-height: 5rem;
  padding: 1rem 0;
  border-radius: 30vh;
  border: 1px solid #ba6879;
  background-color: #ba6879;
  color: #fff;
  width: 100%;
  }
  .submit input:hover{
  background-color: #fff;
  color: #ba6879;
  cursor: pointer;
  }

/* ========================================
    main > #worry
========================================= */
#worry section{
  padding:3rem 0;
}
#worry p,
#worry h2{
color: #fff; 
filter: drop-shadow(0 0 1rem #232323); 
}
#worry01 p,
#worry02 p{
  font-size: 1.6rem;
}
#worry .inner h2{
  font-size: 2.8rem;
  width: auto;
  letter-spacing: -0.2rem;
}
/* ========================================
    main > #worry_story
========================================= */

#worry_story p,
#worry_story p span{
color: #fff;  
}

/* ========================================
    main > #story
========================================= */
h2 img{
  padding-bottom:0;
  margin-bottom: 0;
}
/*
.storyWrap{
  padding-bottom: 0;
}*/
.story{
  width: 100%;
  height: auto;
  text-align: center;
 }
 
#story01 {
  background-color: #fff;
}
#story01 ul {
  list-style-type: none;
}
.listStyle li {
  padding-left: 2.5rem;
  background-repeat: no-repeat;
  background-size: 2rem;
  background-position: left center;
}
.listStyle li p{
  margin:0;
  display: inline-block;
}

#story01 ul li{
  background-image: url(../images/story01/story01_icon.svg);
}

#story01 ul li p{
  font-size: 1.6rem;
}

/* ========================================
    main > #story .story02
========================================= */
#story02 p,
#story03 p{
  text-shadow    : 
  3px  3px 2px #ffffff,
 -3px  3px 2px #ffffff,
  3px -3px 2px #ffffff,
 -3px -3px 2px #ffffff,
  3px  0px 2px #ffffff,
  0px  3px 2px #ffffff,
 -3px  0px 2px #ffffff,
  0px -3px 2px #ffffff;    
}

#story02_03 .textWrap{
  width: 50%;
}


/*
========================================
    main > voice01
========================================= */
#voice01,
#voice02{
  width: 100%;
  height: auto;
  position: relative;
  background-color: #fff;
}
/*テキストデコ*/
.back_deco{
  position: relative;
  padding-top: 8rem;

}
.back_deco:before{
  position: absolute;
  left:0;
  top:-2rem;
  content:"";
  display: inline-block;
  width: 40rem;
  height: 20rem;
  background-repeat: no-repeat;
  background-size: contain;

  }

#voice01{
 }
#voice01::before{
  background-image: url(../images/voice01/voice01_deco.svg);
}
#voice02::before{
  background-image: url(../images/voice02/voice02_deco.svg);
}
#step::before{
  background-image: url(../images/step/step_deco.svg);
}
#voice02::before{
  top:3rem;
}
#step.back_deco:before{
  top:-3rem;
}



ul.voice01_Lists{
  margin-top: 5rem;
}
ul.voice_Lists li.voiceWrap{
  margin-bottom:10rem;
  filter: drop-shadow(0 0 1rem #bb9d7d);
  height: 100%;
  width: 95%;
  margin:0 auto 5rem;
  background-color: #f8e8d2;
 }

/* 手紙の中身 */
.voice_Inner{
  width:90%;
  height: 100%;
  margin: auto;
}


.person_CntHead .imgWrap,
.person_CntHead .textWrap{
width:50%;
}
.person_CntHead{
  min-height: 120px;
  position: relative;
}
.person_CntHead figure.imgWrap{
  position: absolute;
  min-height: 10rem;
  top:-2rem;
  width: 70%;
}
ul.voice_Lists li:nth-child(odd) .person_CntHead figure.imgWrap{
  right:-5rem;
}
ul.voice_Lists li:nth-child(odd) .person_CntHead figcaption.capWrap{
  left:0rem;
}
ul.voice_Lists li:nth-child(even) .person_CntHead figure.imgWrap{
  left:-5rem;
}
ul.voice_Lists li:nth-child(even) .person_CntHead figcaption.capWrap{
  right:0rem;
  text-align: left;
}

.person_CntHead figure.imgWrap img{
  margin:0;
}

.person_CntHead figcaption.capWrap{
  text-align: right;
  position: absolute;
  width: 55%;
  bottom:0.5rem;
  content:"";
  margin:auto;
  display: inline-block;
}
.voice01_CntHead figcaption.capWrap.norole{
  width: 50%;
}
.person_CntHead figcaption.capWrap p{
  display: inline-block;
  margin:0;
}

.voice_CntMessage {
  padding: 1rem 0;
}

.voice_CntMessage p{
  color: #232323;
  text-align: left;
  margin-top:2rem;
}
.voice01_CntMessage .textWrap p{
  color: #d4834a;
  font-size:1.5rem;
  text-align: center;
  margin:1rem auto 0;
  letter-spacing: -1px;
  }
  .voice01_CntMessage p{
    margin:1rem auto 2rem;
  }




  /* voice01_Lists */


/* ========================================
    main > #step
========================================= */
#step{
  background-color: #fff;
}
#step .inner{
  width: 100%;
}
#step figure{
  width: 90%;
  margin:auto;
}
/* stepWrap */
.stepWrap{
  font-size: 1.4rem;
  padding: 0 1rem 2rem 1rem;
}
.stepWrap h3{
  margin-bottom: 0;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: -0.1rem;
}
.stepWrap01 p{
  margin-top:0;
}
.stepWrap01 ul {
  list-style-type: none;
}
.stepWrap01 ul li{
  background-size: 2rem 5rem;
  }
.stepWrap01 ul li:first-child{
  background-image: url(../images/step/step_n1.svg);
}
.stepWrap01 ul li:nth-child(2){
  background-image: url(../images/step/step_n2.svg);
}
.stepWrap01 ul li:nth-child(3){
  background-image: url(../images/step/step_n3.svg);
}
.stepWrap01 ul li:last-child{
  background-image: url(../images/step/step_n4.svg);
}


.stepWrap01 ul li{

}
.stepWrap02 .subTtl{
text-align: center;
position: relative;
}
.stepWrap02 .subTtl:before,
.stepWrap02 .subTtl:after{
  position: absolute;
  width: 20%;
  height: 1px;
  background: #a56879;
  content:"";
  display: inline-block;
  margin:auto;
  top:0;
  bottom:0;
}
.stepWrap02 .subTtl:before{
  left: 0;
  
}
.stepWrap02 .subTtl:after{
  right: 0;
}

.stepWrap02 ul{
  list-style-type: disc;
  padding-left:2rem;
}
.stepWrap02 ul p{
  margin:0;
  padding-left: 0.5rem;
}

/*
========================================
    タイムラインCSS
========================================= */

/*タイムライン全体の設定*/
.timeline{
  width:100%;
  padding:0 10px;
  margin-top: 5rem;
}

.timeline li.tL{
    position: relative;
  list-style: none;
  padding:0 0 20px 0;
}

.timeline dl{
  margin:0 0 20px 3rem;
  background-color: #fff;
  filter: drop-shadow(0 0 1rem #d6acb7);
  width: calc(100% - 6rem);
}
.timeline dt{
  position: relative;
}
.timeline dt img{
  position: absolute;
  top:-5rem;
  left:0;
  width: 30%;
  content:"";
  display: inline-block;
}

.timeline dd{
  width: 95%;
  margin: auto;
  padding:4rem 0;
}

/*絶対配置で線を設定*/
.border-line {
    /*線の位置*/
  position: absolute;
  left:0.8rem;
  top:0;
  width:1px;/*線の太さ*/
  height:0;/*はじめは高さを0に*/
  /*background: #ccc;*/
  background-image : linear-gradient(to right, #ebc1cc, #ebc1cc 3px, transparent 3px, transparent 8px);
  background-size: 8px 3px;
  background-repeat: repeat-y; 
  background-position: left top;
}

/*タイムラインの見出し横の丸の位置と形状*/
.timeline li.tL::after{
  content:'';
  position: absolute;
  top:-1.5rem;
  left:-0.5rem;
}
.timeline li.tL::after{
  background-image: url(../images/step/step01_icon.svg);
  width: 3rem;
  height: 3rem;
}
/*タイムライン*/

 /* ========================================
    main > #profile
========================================= */
#profile{
  background-color: #fff;
}
  
#profile h2{
 position: relative;
  width: 100%;
  text-align: left;
}
#profile h2 img{
  position: absolute;
  width:70%;
  transform: rotate(-5deg);
  left:-3rem;
  top:-7rem;
  margin:0;
  z-index: 1;
}
.prof_CntHead{
  min-height: 20rem;
}
.prof_CntHead figure.imgWrap{
  left:0;
  width: 60%;
}
.prof_CntHead figcaption.capWrap{
  right:-3rem;
  left:auto;
  text-align: left;
}
.prof_CntHead figcaption.capWrap p{
  display: block;
}
.profWrap01{
  margin-top: 3rem;
}

/* media実績 */
.profWrap02{
  border: 1px solid #a56879;
  padding:2rem 1rem;
  margin-top: 4rem;
}
.profWrap02 ul{
  padding-bottom: 4rem;
}
.profWrap02 ul li{
  flex-wrap: nowrap;
  justify-content: space-between;
  border-bottom:0.5px dotted #a56879;
}
.profWrap02 ul li.book,
.profWrap02 ul li.book ul li{
  border-bottom: none;
}
.profWrap02 ul li p{
  font-size: 1.2rem;
}
.profWrap02 ul li:nth-child(odd) figure,
.profWrap02 ul li:nth-child(even) figure{
  width:30%;
}
.profWrap02 ul li:nth-child(odd) figcaption,
.profWrap02 ul li:nth-child(even) figcaption{
  width:68%;
}
/*
.profWrap02 ul li:nth-child(even) figure{
  order:1;
}
.profWrap02 ul li:nth-child(even) figcaption{
  order:2;
}*/
/* media実績　>　著書 */
.profWrap02 ul li.book{
  flex-wrap: wrap;
  text-align: center;
}
.profWrap02 ul li.book figure,
.profWrap02 ul li.book figcaption{
  width: 100%;

}
.profWrap02 ul.listStyle{
  width: 70%;
  margin:auto;
}
.profWrap02 ul.listStyle li{
  background-image: url(../images/prof/media/media_icon.svg);
}

/*Swiper*/
.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction{
  bottom:0px;
}
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{
  background-color: #a56879;
}
.swiper-button-next:after, .swiper-button-prev:after{
  color: #a56879;
}


/* ========================================
    main > #voice02
========================================= */
#voice02 h2 span{
  font-size:80%;
  color: #4d4341;

}
.voice02_Inner{
  padding:3rem 0 0rem;
}
.voice02_CntHead{
  flex-wrap: nowrap;
}
ul.voice02_Lists{
  margin-top: 3rem;
}
#voice02 ul li .voice02_CntHead figure.imgWrap img,
#voice02 ul li .voice02_CntHead figcaption.capWrap img{
  margin:0;
}
#voice02 ul li:nth-child(odd) .voice02_CntHead figure.imgWrap,
#voice02 ul li:nth-child(even) .voice02_CntHead figure.imgWrap{
  width: 30%;
}
#voice02 ul li:nth-child(even) .voice02_CntHead figcaption.capWrap,
#voice02 ul li:nth-child(odd) .voice02_CntHead figcaption.capWrap{
  width: 68%;
}
#voice02 ul li:nth-child(even) .voice02_CntHead figure.imgWrap{
  order: 2;
}
#voice02 ul li:nth-child(even) .voice02_CntHead figcaption.capWrap{
  text-align: right;
}

#voice02 ul li .voice02_CntHead figcaption.capWrap img{
width: 60%;
}


/* ========================================
      main > footer
========================================= */
footer{
  background-color: #ba6879;
  padding: 10rem 0 1rem;
  font-size: 1rem;
  color: #fff;
}

footer p{
  font-size: 1rem;
  color: #fff;
}

 /* ========================================
    タブレット
========================================= */
@media all and (min-width:768px) /*and (max-width:1023px)*/ {
  }
    
  /* ========================================
      PCサイズ
  ========================================= */
  @media screen and (min-width:1024px) {
    
}
/* SEサイズ */
  @media screen and (max-width:375px) {
   
  }