@charset "utf-8";

:root {
    --base-color1: #E2AEA8;
    --base-color1-opacity: rgba(226, 174, 168, 0.5);
    --base-color2: #CFEBEF;
    --base-color2-opacity: rgba(207,235,239,0.5);
    --font-color: #42210B;
    --accent-color1: #1bb7b3;
    --accent-color2: #FFFF6D;
    --bg-color: #fcf7f0;
}

.logo {
  width: 200px;
}

@media screen and (max-width:768px) {
  .logo {
      width: 100px;
  }
}

/*---------------------------------------
  各ブロックの見出し部分（共通）              
-----------------------------------------*/
.intro {
    margin-bottom: 20px;
    text-align: center;
}

.intro h2 {
    margin: 0 0 30px 0;
    font-size: 2.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.intro h2 span {
    font-size: 1rem;
    display: block;
}

@media screen and (max-width:960px) {
    .intro h2 {
        font-size: 2rem;
    }
}

@media screen and (max-width:768px) {
    .intro h2 {
        font-size: 1.5rem;
    }
}

#advantage,
#voice,
#flow,
#reward,
#faq {
    position: relative;   
    margin: 0 0 50px 0;
    padding: 50px 0 0 0;
    text-align: center;
}

/*---------------------------------------
共通
-----------------------------------------*/
.sp_br {
  display: none; /* 768px以上では改行タグを無効に。*/
}

@media screen and (max-width: 768px) {
  .sp_br {
    display: block; /* 768px未満で改行タグを有効に。*/
  }
}


/*---------------------------------------
  ADVANTAGE              
-----------------------------------------*/
#advantage {
  background-color: var(--base-color2-opacity);
  margin: 0 calc(50% - 50vw); 
  width: 100vw;
}

.advantage-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 50px 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.advantage-item {
    border-radius: 10px;
    background: var(--bg-color);
    padding: 10px;
}

.advantage-header {
  display: flex;
  flex-direction: row;
  align-items:center;
  text-align: left;
  margin: 5px;
  line-height: 1.5rem;
}

.advantage-header-icon {
  width: 80px;  
}

.advantage-header-text {
  flex: 1;
}

.advantage-item p {
  text-align: left;
  font-size: 1.0rem;
  padding: 10px;
}

.icon-bg-color {
  color: var(--accent-color1);
}

.icon-color {
  color:#fff
}

@media only screen and (max-width: 1020px) and (min-width: 768px){
  .advantage-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media only screen and (max-width: 767px){
    .advantage-grid {
      grid-template-columns: 1fr;
      padding: 50px 20px;
    }
 
    .advantage-header-text {
      font-size: 1.0rem;
    }

    .advantage-item p {
      font-size: 0.9rem;
    }
}



/*---------------------------------------
  VOICE              
-----------------------------------------*/
.voice {
    max-width: 1200px;
    margin:0 auto;
}

.message-box {
  background-color: var(--bg-color);
  position: relative;
  margin: 80px 5px 30px 5px;
  padding: 10px;
  border: solid 2px var(--font-color);
  max-width: 1200px;
  border-radius: 0 10px 10px 10px;
  
}

.message-box .box-title {
  position: absolute;
  display: inline-block;
  top: -27px;
  left: -3px;
  padding: 0 9px;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  background: var(--font-color);
  color: #ffffff;
 /* font-weight: bold;*/
  border-radius: 5px 5px 0 0;
}

.message-photo-box {
  display: flex;
  flex-direction: row;
  align-items:center;
  margin:10px;
}

.ceo-name {
  font-size: 1.2rem;
  font-weight: bold;
}

.ceo-memo {
  margin-left: 20px;
}

.message-box p {
  text-align: left;
  margin: 0; 
  padding: 0;
}

.message-box img {
  width: 180px;
  border-radius: 50%;
}

.message {
  margin-top: 20px;
}
.readmore {
  position: relative;
  margin: 0 auto 0;
  padding: 0 0 50px;
}

.readmore label {
  position: absolute;
  display: table;
  left: 50%;
  bottom: 0;
  margin: 0 auto;
  width: 100px;
  padding: 5px 0;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  background-color: var(--font-color);
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 1;
}

.readmore label::before{
  content: '続きを見る';
}

.readmore input[type="checkbox"]:checked ~ label::before {
  content: '元に戻す';
}

.readmore input[type="checkbox"]{
  display: none;
}

.readmore-content {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.readmore input[type="checkbox"]:checked ~ .readmore-content {
  height: auto;
}
.readmore-content::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: linear-gradient(rgba(252, 247, 240, 0) 0%, rgba(252, 247, 240, 0.8) 50%, var(--bg-color) 100%);
}

.readmore input[type="checkbox"]:checked ~ .readmore-content::before {
  display: none;
}
/*
.message-title {
  position: relative;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #333;
  background-color: var(--bg-color);
}

.message-title:before {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) skew(-25deg);
  height: 20px;
  width: 10px;
  border-right: 3px solid #333;
  background-color: var(--bg-color);
  content: "";
}*/
/*
.message-title {
  padding: 0.2rem;
  margin-bottom: 0.2rem;
  font-weight: bold;
  font-size: 26px;
  text-align: center;
}
*/
.message-title {
  background: linear-gradient(transparent 60%, var(--accent-color2) 60%);
  border-radius: 80% 50% 60% 5%/80% 75% 15% 75%;
}
.voice-item {
    display: flex;
    height: 400px;
    /*height:auto;*/
    margin: 5px;
    border-radius: 10px;
    background: var(--bg-color);
    padding: 10px;
    border: 2px solid var(--base-color1)    
}

.photo-box {
    margin:2px;
}

.photo-box img {
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  width: 180px;
  height: 180px;
  object-fit: cover; 
}

.staff-memo {
  text-align: left;
  background-color: var(--base-color1-opacity);
  border-radius: 25px;
  padding: 0 20px;
  line-height: 1.5;
}

.staff-memo p {
  font-size: 0.9rem;
  margin: 5px; 
  padding: 0;
}

.comment-box {
  flex:1;
  font-size: 1.0rem;
  /*margin:5px;*/
  padding: 10px;
  text-align: left;   
  height: auto;
  overflow: scroll;

}

.comment-q {
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .message-box img {
    width: 120px;
  }
  .message-box {
    margin: 80px 2px 30px 2px;
    font-size: 0.9rem;
  }
  .message-box .box-title {
    font-size: 0.9rem;
  }
  .ceo-memo {
    font-size: 0.8rem;
  }
  .ceo-name {
    font-size: 1.0rem;
  }

  .message-box figure {
    margin: 0 5px 10px 0;
  }
  
  .message-box h1{
    font-size: 1.0rem;
  }
  .readmore label {
    font-size: 0.9rem;
  }
  .voice-item {
    display:block;
    height: 550px;
    margin: 2px;
    padding: 5px;
  } 

  .photo-box {
    display: flex;
    flex-direction: row;
    align-items:flex-end;
    margin:2px;
  }

  .photo-box img {
    width: 120px;
    height: 120px;
  }

  .staff-memo {
    margin-left: 10px;
  }
  .staff-memo p {
    font-size: 0.8rem;
  }

  .comment-box {
    height: 400px;
    font-size: 0.9rem;
  }
  
}

/*　スクロールバーのツマミ部分の色を変えたい時　*/
.simplebar-scrollbar::before {
  background: var(--base-color1); 
}
/* ページネーションのスタイル */
.your-class-page {
  background: var(--base-color1);
  opacity: 0.5;
  bottom: -2em;
}
/* 現在表示されているページネーションのスタイル */
.your-class-page.is-active {
  background: var(--base-color1);
  opacity: 1;
}

/* 前への矢印 */
.splide__arrow--prev {
  background-color: var(--base-color1);
  left: -1.8em;
}

/* 次への矢印 */
.splide__arrow--next {
  background-color: var(--base-color1);
  right: -1.8em;
}

/*---------------------------------------
  FLOW              
-----------------------------------------*/
#flow {
  background-color: var(--base-color2-opacity);
  margin: 0 calc(50% - 50vw);
  width: 100vw;
}

/****************/
/* Timeline */
/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 30px;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: var(--accent-color1);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
  box-sizing: content-box; 
}

/* Container around content */
.timeline-container {
  text-align: left;
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;

  counter-increment: count;
}

/* The circles on the timeline */
.timeline-container::after {
  content: counter(count);
  text-align: center;
  font-weight: 700;
  font-family: "Arial";
  color:var(--accent-color1);
 
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: var(--bg-color);
  border: 4px solid var(--accent-color1);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
  box-sizing: content-box; 
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid var(--bg-color);
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent var(--bg-color);
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid var(--bg-color);
  border-width: 10px 10px 10px 0;
  border-color: transparent var(--bg-color) transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.timeline-content {
  padding: 20px 30px;
  background-color: var(--bg-color);
  position: relative;
  border-radius: 6px;
}

.timeline-content h3 {
	position: relative;
	padding: 0 .5em 0.5em 2em;
  border-bottom: 1px solid var(--accent-color1);
  margin-bottom: 0.5em;
  line-height: 1.5rem;
}
.timeline-content p{
  font-size: 1.0rem;
}
.timeline-content h3::before,
.timeline-content h3::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
.timeline-content h3::before {
	top: .2em;
	left: .2em;
	width: 18px;
	height: 18px;
	/*background-color: rgba(255,90,95,.5);*/
  background-color: var(--accent-color1);
  opacity: 0.5;
	z-index: 2;
}
.timeline-content h3::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	/*background-color: rgba(255,90,95,.2);*/
  background-color: var(--base-color2);
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
  .timeline::after {
    left: 31px;
  }

/* Full-width containers */
  .timeline-container {
    width: 100%;
    padding-left: 70px;
    /*padding-right: 25px;*/
    padding-right: 20px;
  }

/* Make sure that all arrows are pointing leftwards */
  .timeline-container::before {
    left: 60px;
    border: medium solid var(--bg-color);
    border-width: 10px 10px 10px 0;
    border-color: transparent var(--bg-color) transparent transparent;
  }

/* Make sure all circles are at the same spot */
  .left::after, .right::after {
    left: 15px;
  }

/* Make all right containers behave like the left ones */
  .right {
    left: 0%;
  }

  .timeline-content h3{
    font-size: 1.0em;
  }
  .timeline-content p{
    font-size: 0.9em;
  }
}


/*---------------------------------------
  REWARD              
-----------------------------------------*/
.reward {
  max-width: 1200px;
  margin:0 auto;
}

.reward-title {
  background-color: var(--base-color1);
	color: var(--font-color);
	position: relative;
	overflow: hidden;
}

.reward-title:before{
	background-color: #fff;
	border-radius: 100px 100px 100px 100px;
	content: '';
	display: block;
	opacity: 0.5;
	position: absolute;
	bottom: 9px;
	left: 0px;
	width: 100px;
	height: 100px;
}

.reward-title:after{
	background-color: #fff;
	border-radius: 50px 50px 50px 50px;
	content: '';
	opacity: 0.6;
	position: absolute;
	bottom: -8px;
	left: 70px;
	display: block;
	width: 50px;
	height: 50px;
}

.reward-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 20px 50px 50px 50px;
  max-width: 1200px;
  margin: 0 auto;
}

@media only screen and (max-width: 1020px) and (min-width: 768px){
  .reward-grid {
    grid-template-columns: 1fr 1fr;
    /*padding: 50px 10px;*/
  }
}
@media(max-width: 767px){
  #reward h3 {
    font-size: 1.0rem;
  }
  .reward-title:before{
    border-radius: 50px 50px 50px 50px;
    bottom: 4.5px;
    left: 0px;
    width: 50px;
    height: 50px;
  }

  .reward-title:after{
    border-radius: 25px 25px 25px 25px;
    bottom: -4px;
    left: 20px;
    width: 25px;
    height: 25px;
  }

  .reward-grid {
    grid-template-columns: 1fr;
    padding: 20px 10px;
    gap: 15px;
  }
}

.reward-box {
  background-color: #fff;
  padding: 0.5em 2em;
  position: relative;
  z-index: 1;
  display: table-cell;
  vertical-align: top;
}
.reward-box::before,
.reward-box::after {
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  content: "";
  height: 100%;
  position: absolute;
  width: 100%;
}
.reward-box::before {
  background-color: rgba(255, 255, 255, .5);
  left: 0;
  top: 0;
  z-index: -1;
}
.reward-box::after {
  background-color: var(--base-color1);
  top: 5px;
  left: 5px;
  z-index: -2;
}
.reward-box h4 {
  padding: 10px;
  line-height: 150%;
}
.reward-box p {
  font-size: 1.0rem;
}
.reward-block {
  display:block;
  width:auto;
  background-color: var(--bg-color);
  border: solid 1px var(--font-color);
  border-radius: 25px;
}

.price {
  font-size: 1.1rem;
  font-weight: bold;
}

@media(max-width: 767px){
  .reward-box h4 {
    font-size: 0.9rem;
  }
  .reward-box p {
    font-size: 0.9rem;
  }
  .price {
    font-size: 1.0rem;
    font-weight: bold;
  }
}


.ribbon {
  --d: .8em; /* the depth */
  position: absolute;
  top: 20px;
  inset-inline: calc(-1*var(--d));
  border-bottom: var(--d) solid #0008;
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),var(--d) 100%,0 calc(100% - var(--d)));
  background-color: var(--base-color1);
  text-align: center;
}
.gift-box {
  border: 1px solid #ccc;
  position: relative;
  border-radius: 20px;
  border:double 5px var(--base-color1);
  background: var(--bg-color);
  margin: 20px auto;
  padding: 60px 20px 20px 20px;
  text-align: left;
}
.gift-box p {
  font-size: 1.0rem;
}

@media(max-width: 767px){
  .gift-box p {
    font-size: 0.9rem;
  }

}

/*---------------------------------------
  FAQ           
-----------------------------------------*/
#faq {
  background-color: var(--base-color2-opacity);
  margin: 0 calc(50% - 50vw); 
  width: 100vw;
}
/*==================================================
アコーディオンのためのcss
===================================*/

.faq{
  max-width: 1200px;
  margin:0 auto;
  padding: 20px;
 /* background:#fefefe;*/
 /* background: var(--base-color2);*/
  /*border-radius: 10px;*/
  display:block;
}

/*アコーディオン全体*/
.accordion-area{
  list-style: none;
  width: 96%;
  margin:0 auto;
}

.accordion-area li{
  margin: 5px 0;
}
/*

.accordion-area section {
  border: 1px solid #ccc;
}
*/

/*アコーディオンタイトル*/
.title {
  position: relative;/*+マークの位置基準とするためrelative指定*/
  cursor: pointer;
  font-size:1rem;
  font-weight: normal;
  /*padding: 3% 3% 3% 50px;*/
  padding: 5px 5px 5px 50px;
  transition: all .5s ease;
}

/*アイコンの＋と×*/
.title::before,
.title::after{
  position: absolute;
  content:'';
  width: 15px;
  height: 2px;
  background-color: var(--font-color);  
}
.title::before{
  top:48%;
  left: 15px;
  transform: rotate(0deg); 
}
.title::after{    
  top:48%;
  left: 15px;
  transform: rotate(90deg);
}

/*　closeというクラスがついたら形状変化　*/
.title.close::before{
transform: rotate(45deg);
}

.title.close::after{
transform: rotate(-45deg);
}

/*アコーディオンで現れるエリア*/
.box {
  display: none;/*はじめは非表示*/
  background-color: #fcf7f0;
  margin:0 20px 20px 20px;
  padding: 20px;
  /*margin:0 5px 5px 5px;*/
  border-radius: 5px;
}
/*
a{
  color:#333;
  text-decoration: none;
}*/

.area h2{
  font-size:1.3rem;
  margin:0 0 20px 10px;
  text-align: left;
}

.area li{
  padding: 10px; 
  border-bottom: 1px solid #ddd;
  text-align: left;
}

/*tabの形状*/
.tab{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 2px white;
}

.tab li a{
  display: block;
  color: white;
  background: var(--font-color);
  margin:0 2px;
  padding:10px 20px;
  border: 1px white;
}

/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  background:#fcf7f0;
  color: var(--font-color)
}


/*エリアの表示非表示と形状*/
.area {
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/

  background-color: var(--base-color2);
  padding:20px 20px;

  margin: 2em 0;
/*  color: #00BCD4;*/
/*  background: #e4fcff;/*背景色*/
  border-top: solid 6px var(--accent-color1);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);

}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;

}
@media screen and (max-width:767px){
  .tab{
      display: block;
      width: 80%;
      margin:0 auto;
  }
  .tab li {
    border-bottom: 1px white;
  }

  .title {
    font-size: 0.9rem
  }

  .box {
    font-size: 0.9rem;
    margin:0 10px 10px 10px;
    padding: 10px;
  }

  .area {
    display: none;/*はじめは非表示*/
    opacity: 0;/*透過0*/
    background-color: var(--base-color2);
    padding:10px 10px;
    margin: 2em 0;
    border-top: solid 6px var(--accent-color1);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
  
  }
  .area li{
    padding: 5px; 
  }
}
@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/*---------------------------------------
  CONTACT           
-----------------------------------------*/
.contact-box {
  display:flex; 
  padding:  10px; 
  align-items:stretch;  
  justify-content:center;
  max-width: 700px;   
  margin: 0 auto;
}
.contact-item {
  padding: 10px;
  color:  var(--font-color);  /* 文字色 */
  margin:  10px;              /* 外側の余白 */
  border-radius:  5px;        /* 角丸指定 */ 
  font-size: 0.9rem;
}
.contact-item:nth-child(1) {
  width: 250px;
  background-color: var(--base-color1); /* 背景色指定 */
}
.contact-item:nth-child(2) {
  flex-grow: 1;  
  background-color: var(--base-color2);  /* 背景色指定 */
}
.contact-title {
  font-size: 1.0rem;
}

.tel-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
.contact-item .icon-bg-color {
  color: #fff;
}
.contact-item .icon-color {
  color: var(--font-color);
}

.tel-no-box {
  padding: 10px;
}
.tel-no {
  font-size: 1.0rem;
  font-weight: bold;
}
@media (min-width: 751px) {
  a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
  }
}
@media only screen and (max-width: 767px){

  .contact-box {
    padding:  0; 
    display:block;
  }
  .contact-item {
    font-size: 0.8rem;
    padding: 5px;
    margin: 10px 0;
  }
  .contact-item:nth-child(1) {
    width: auto;

  }
  .contact-title {
    font-size: 0.9rem;
  }
  .tel-no {
    font-size: 0.8rem;
    font-weight: bold;
  }
}

/*
.contact-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
  max-width: 960px;
  margin: 0 auto;
}
.contact-title {
  font-size: 1.1rem;
}
.contact-box {
  border-radius: 20px;
  margin: 10px;
  padding: 10px;
}
.contact-tel {
  background-color: var(--base-color1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.tel-no {
    font-size: 1.2rem;
    font-weight: bold;
}
.contact-line {
  background-color: var(--base-color2);
}

.tel-wrap {
  display: flex;
  justify-content: center;
}
.icon-box {
  justify-content: center;
  align-items: center;
}

.tel-box {
  vertical-align: top;
}

@media only screen and (max-width: 767px){
  .contact-grid {
    display: block;
    grid-template-columns: 1fr;
    padding: 20px 10px;
  }
  .contact-tel {
    margin-bottom: 20px;
  }
  .tel-no {
    font-size:0.9rem;
    pointer-events: none;
  }
  .contact-box p{
    font-size: 0.8rem;
  }
  .contact-title {
    font-size: 1.0rem;
  }
 
}*/