@charset "utf-8";

/* --------------------------全セクション共通 --------------------------*/

body{
  margin: 0px;
  overflow-x: hidden;
  background-color: #f5eae3;
  font-family: "秀英丸ゴシック L";
}

html {
  overflow-x: hidden;
}

img{
  width: 100%;
}

.qrArea{
  position:fixed;
  top:calc(50% - 200px);
  left:calc((50% - 210px)/2 - 85px);
  z-index: -999;
}

.qrArea_logo{
width: 170px;
margin-bottom: 20px;
}

.qrArea__text{
  width: 170px;
  color:#716e77;
  text-align: center;
  font-size: 14px;
  margin: 0px !important;
}
.snsArea{
  position:fixed;
  top:calc(50% - 70px);
  right:calc((50% - 210px)/2 - 100px);
  z-index: 1;
}
.snsicon{
  width: 64px;
}

.white-bg{
  background-color: #fff;
}

.white-text{
  color: #fff;
}

.pink-bg{
  background-color: #e79686;
}
.pink-text{
  color: #e79686;
  font-weight: 600;
}

.pink2-bg{
  background-color: #f6ebe3;
}

.check-bg{
  background-image:  url(./image/kodomama21.png) ;
}

.triangle{
  width: 50px;
  margin-left: auto;
  margin-right: auto;
  border-top: 50px solid #e79686;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}

.top_to_bottom {
	transform: translate3d(0, -10px, 0);
	opacity: 0;
}

.top_to_bottom_fadeIn {
	transform: translate3d(0, 0, 0);
	transition: .8s ease-in-out .4s;
	opacity: 1;
}

.basic-width{
  text-align: center;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.maintitle {
  text-align: center;
  display: flex;
  flex-direction: column;
  background-color: #e79686;
  color: #fff;
  line-height:2rem;
}

.maintitle .logo {
  width: 40%;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
}

.maintitle-gradation {
  background-image:  url(./image/kodomama03.png) ;
  background-repeat:  no-repeat;  
  background-size:cover;   
  padding-top: 150px;
}

.half{
  transform: scale(0.8);
}

.arrow{
  width: 128px;
}

.note{
  font-size: 10px;
  color: #716e77;
  margin-top: 10px;
}

.nayami{
  background-image:  url(./image/kodomama05.png) ;
  background-repeat:  no-repeat;  
  background-size:cover; 
}

.nayamilist{
  padding-top: 245px;
  width: 340px;
  margin-left: auto;
  margin-right: auto;
}

.nayamilist img{
  margin-bottom: 10px;
}

.textbox{
  padding: 25px;
  font-size: 16px;
  text-align: left;
}

.soudansite{
  padding-top: 20px;
}

.flex2c{
  display: flex;
  flex-wrap: wrap;
  padding: 25px;
  justify-content: space-between;
}
.flex2c-end{
  display: flex;
  flex-wrap: wrap;
  padding: 25px;
  justify-content: space-between;
  align-items: flex-end;
}

.colm2{
  font-size: 14px;
  line-height: 16px;
  width: 48.5%;
  margin-bottom: 10px;
}

.attention{
  background-color: #a39391;
  text-align: center;
  color: #fff;
  font-size: 15px;
}

.lefttext{
  font-size: 16px !important;
  text-align: left !important;
  line-height: initial;
}


@media screen and (min-width:800px) {
  .pc800{
    display: block !important;
  }
}
@media screen and (max-width:800px) {
  .pc800{
    display: none !important;
  }
}


/*SP用*/
@media screen and (max-width:640px) {

  .sp{
    display: block !important;
  }
  .pc{
    display: none !important;
  }

  .nayamilist{
    padding-top: 225px;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }

  .nayamilist img{
    margin-bottom: 8px;
  }

  .small{
    font-size: 0.5rem;
  }

  footer {
    position: fixed;
    bottom: 0;
    height: auto;
    left: 0;
    right: 0;
    /* text-align: center; */
  }

  footer img{
    width: 100%;
    /* margin: 0; */
  }


    .footer-fixed {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-align-items: center;
      align-items: center;
      height: 80px;
      padding-right: 10px;
      padding-left: 10px;
      text-align: center;
      background-color: rgba(255,255,255,0.8);
      position: fixed;
      width: 100%;
      bottom: 0;
      z-index: 9998;
    }
    
    .footer_btn_02 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fc5978;
      border: none;
      border-radius: 5px;
      font-weight: 600;
      height: 60px;
      width: 100%;
    }
  
    .footer_btn_02 a {
      color: #ffffff;
      font-size: 17px !important;
      text-decoration: none;
    }

}

/* --------------------------トップ #top --------------------------*/


@media screen and (min-width:640px){

  .pc{
    display: block !important
  }
  .sp{
    display: none !important
  }

  .footer-fixed {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    height: 80px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 9998;
    max-width: 420;
    left: calc(50% - 210px);
  }
  
  .footer_btn_02 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fc5978;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    height: 60px;
    width: 100%;
  }

  .footer_btn_02 a {
    color: #ffffff;
    font-size: 17px !important;
    text-decoration: none;
  }


/*-----scrolldown-----*/
.scrolldown{
  position:absolute;
  top:60px;
  left:calc(50% + 235px);
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{top:60px;}
      50%{top:70px;}
     100%{top:60px;}
 }

.scrolldown span{
  position: absolute;
  left:-20px;
  bottom:10px;
  color: #000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #000;
    transform: skewX(-31deg);
}

.scrolldown:after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width:1px;
  height: 50px;
  background:#000;
}

}

/*ベース*/
.toggle {
	display: none;
}
.Label {		/*タイトル*/
	padding: 1em;
	display: block;
	color: #fff;
	background:#e79686;
  margin-bottom: 0px !important;
  margin-left:25px;
  margin-right:25px;
}
.Label::before{		/*タイトル横の矢印*/
	content:"";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	position: absolute;
	top:calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}
.Label,
.content {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}
.content {		/*本文*/
  text-align: left !important;
	height: 0;
	margin-bottom:10px;
	padding:0 25px;
	overflow: hidden;
}
.toggle:checked + .Label + .content {	/*開閉時*/
	height: auto;
	padding:25px ;
	transition: all .3s;
}
.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}



    /*--------------------
	.clinic
	--------------------*/
.w28{
  width:38% !important;
}

.w68{
  width:58% !important;
}
.clinicname{
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
}
.clinicname2{
  font-size: 16px;
  font-weight: 600;
}
.salespoint{
  color: #68b100;
  font-weight: 600;
}

.addresstext {
  font-size: 12px;
}

.btn--orange,
a.btn--orange,
.btn--orange:hover,
a.btn--orange:hover  {
  width:32%;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  background-color: #58a0dd;
}

.btn--line,
a.btn--line,
.btn--line:hover,
a.btn--line:hover{
  width:32%;
  font-size: 14px;
  color: #fff;
  font-weight: 600;
  background-color:#06C755;
}

.btn--web,
a.btn--web,
.btn--web:hover,
a.btn--web:hover{
  width:32%;
  font-size: 14px;
  color: #fff !important;
  font-weight: 600;
  background-color:#ff717b;
  cursor:pointer;
}

a.btn--radius {
   border-radius: 100vh;
}

.kmborder{
border-top: 2px solid #fff;
}

.link01 {
  display: inline-block;
  margin: 5px;
  padding: 6px 50px 6px 30px;
  color: #ffffff;
  background: url("../images/common/arrow_04.png") no-repeat right 15px center #ff717b;
  border: none;
  border-radius: 5px;
  transition: all 0.3s;
}

.link01:hover {
  box-shadow: none;
  text-decoration: none;
  background: url("../images/common/arrow_04.png") no-repeat right 15px center #FFB8BD;
}

.link01.active {
  color: #ff717b;
  background: url("../images/common/arrow_02.png") no-repeat right 15px center #ffffff;
  border: 1px solid #ff717b;
}