﻿@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;400;500&display=swap');
h2, h3, h4 {
    font-family: 'Kiwi Maru', serif;
}
.pager li a:hover {
    background-color: #56f085;
}
#info #map {
    width: 36%;
}
.demoTxt {
  display: block;
opacity:0;
}
.demoTxt span {
 opacity: 0;
  -webkit-transition: .9s ease-in-out;
 transition: .9s ease-in-out;
}

#cms_2-a .cate_title {
    display: block;
    padding: 1rem 2rem;
    border: 0;
    border-left: 5px dotted #7c7c7c;
    background: #fffdc7;
}

/* -------------------------------------header----------------------------------------*/
header #header #header_menu li a {position: relative}
header #header #header_menu li a:hover span {
         color:#ff9494;
 }

header #header #header_menu li a:after {
     content: "";
    width: 100%;
    height: 60px;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url(Dup/img/suisai.png) no-repeat 50% 50%;
    background-size: contain;
    opacity: 0;
    transition: all 0.3s;
}
header #header #header_menu li:hover a:after {
   opacity: 0.7;
}
header #header #header_menu li:last-child:hover a:after {
   opacity: 0;
}
#contents .box:first-of-type {
    background: url(Dup/img/hana4.png);
    background-repeat: no-repeat;
    background-size: 26% auto;
    background-position: 6% 93%;
}
.con2png {
    background: url(Dup/img/logo_white.png);
    background-repeat: no-repeat;
    background-size: 67%;
    background-position: 50% 83%;
    padding-bottom: 118px;
}
.con3png {
    background: url(Dup/img/hana3.png);
    background-repeat: no-repeat;
    background-size: 144px auto;
    background-position: 99% 0%;
    padding-top: 85px;
}
/* ----------------------------------------------------------------------- */
.catch {
    font-size: 55px;
    right: 7%;
    top: 42%;
    z-index: 2;
    color: #fff;
    font-weight: bold;
}
.cate_list li a {
    border-bottom: 2px solid #faa7ab;
    background: #fffdc7;

    border-radius: 36px;
    padding: 9px 23px;
}
span.smoothText {
  overflow: hidden;
  display: block;
}

/* アニメーションで傾斜がついている文字列を水平に戻す*/
span.smoothTextTrigger{
  transition: 1.2s ease-in-out;
  transform: translate3d(0,100%,0) skewY(12deg);
  transform-origin: left;
  display: block;
}
span.smoothTextTrigger.smoothTextAppear{
    transform: translate3d(0,0,0) skewY(0);
}
.cms_title h2 {
font-size: 1.8rem;
    text-align: center;
    background: #fffdc7;
    width: 300px;
    margin: 112px auto 0;
    padding: 16px;
    position: relative;
    box-shadow: 2px 3px 5px -3px rgb(0 0 0 / 30%);
    border-left: 5px dotted #7c7c7c;
        border-right: 5px dotted #7c7c7c;
}
.cms_title h2:before {
/*content: "";
    display: block;
    width: 54px;
    height: 61px;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: -56px;
    background-color: #fffdc7;
    background-image: url(Dup/img/png1.png);
    background-repeat: no-repeat;
    background-position: 50% 17%;
    background-size: 49px auto;
    border-radius: 50%;
    padding: 20px;
    z-index: -1;*/
}
/*#top_cms .top_cms_box:nth-child(2) .cms_title h2:before {
   background-image: url(Dup/img/png2.png); 
}
#top_cms .top_cms_box:nth-child(3) .cms_title h2:before {
   background-image: url(Dup/img/png3.png); 
}
#top_cms .top_cms_box:nth-child(4) .cms_title h2:before {
   background-image: url(Dup/img/png4.png); 
}
#top_cms .top_cms_box:nth-child(5) .cms_title h2:before {
   background-image: url(Dup/img/png5.png); 
}*/






#info .tel {display: none}


.more {
    margin-right: 0;
    margin-left: 0;
    margin: auto;
        margin-top: 25px;
}
.more a {border-radius: 35px}
#intro_txt {position: relative}
#intro #intro_txt::after {
    content: "";
    width: 100%;
    height: 6px;
    position: absolute;
    bottom: -6px;
    top: inherit;
    left: 0px;
    background-image: url(Dup/img/line01.png);
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 34px auto;
}

body {background-color: #ffd0d3;
background-image: url("https://www.transparenttextures.com/patterns/light-paper-fibers.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */}

.info_box {
    background: transparent;
}
figure, figure img {
    border-radius: 25px;
}

.cms_2-b figure {
    border-radius: 47% 53% 50% 50% / 51% 44% 56% 49% ;
}
header #header #header_menu li {
    width: auto;
    padding-left: 13px;
    padding-right: 13px;
    border-left: 2px dotted #efefef;
    margin-top: 8px;
    padding-top: 7px;
    padding-bottom: 4px;
    border-top: 0;
}
#contents figure {
    box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 14px 13px 0px 0px #ffc6c6;
    border-radius: 25px;
}
#contents figure.normal_img {
    box-shadow: none;
}
#contents figure.normal_img img {
     box-shadow: 0px 8px 16px -2px rgba(10,10,10,0.1), 14px 13px 0px 0px #ffc6c6;
     border-radius: 25px;
}

#contents h3 {position: relative}
#contents h3:before {
    content: "Counseling";display: block;
    position: absolute;
    bottom: -24px;
    left: 0; right: 0;
    margin: auto;
    font-size: 1rem;
        color: #00e773;
        letter-spacing: 0.2rem;
}
#contents .box_wrap .box:nth-child(2) h3:before {
    content: "Space perspective";
}
#contents .box_wrap .box:nth-child(3) h3:before {
    content: "Be yourself";
}
.svg_box2 svg {
    color: #fcf0f1;
    fill-opacity: 1;
}
header.transform {
    background: #fff;
}
header {padding-bottom: 9px;
    background: #fff;
}
#header #logo {
    padding-top: 9px;
}
#header #logo img {width: 122%!important}
#page_title {
    padding-top: 50px;
}
#page_title svg { fill: #ffdbde;}
#page_title h2 span {
    background-color: transparent;
}
/* -------------------------------------------------------------------------------------------*/
#intro_txt {
    background: #f2b3b7;
    text-align: center;
    background-image: url(Dup/img/hana5.png), url(Dup/img/hana6.png);
    background-repeat: no-repeat;
    background-size: 126px auto, 64px auto;
    background-position: bottom 49px left calc(50% - 543px), top 53px right calc(50% - 419px);
    padding-bottom: 143px;
}
#intro_txt .mini {
    color: #ffffff;
    font-weight: bold;
}
.ribon {
  display: inline-block;
  position: relative;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding: 7px 0;
  font-size: 18px;/*フォントサイズ*/
  background:#ff9494;/*背景色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  margin-bottom: 16px;
}

.ribon p {
  margin: 0;
  padding: 0 30px;
  border-top: dashed 1px #FFF;/*上の破線*/
  border-bottom: dashed 1px #FFF;/*下の破線*/
  line-height: 46px;
}

.ribon:before, .ribon:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}

.ribon:before {
  /*左端の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #f2b3b7;
  border-style: solid;
}

.ribon:after {
  /*右端の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #f2b3b7 transparent transparent;
  border-style: solid;
}





#intro_txt .cls-1, #main_img .svg_box svg {
    fill: #f2b3b7;
}
#intro_txt svg {
    z-index: 99999;
    transform: translate3d(0,0,0);
    bottom: -10px;
    position: absolute;
    width: 100%;min-width: 800px;
    height: auto;
    display: inline-block;
    left: 0;
        display: none;
}

#main_menu ul li {

}
header #header #header_menu li a {
    background-image: url(Dup/img/png6.png);
background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 42px;
    padding: 36px 0px 0px 0px;
    display: block;
}
header #header #header_menu li:nth-child(2) a {
    background-image: url(Dup/img/png1.png);
}
header #header #header_menu li:nth-child(3) a {
    background-image: url(Dup/img/png2.png);
}
header #header #header_menu li:nth-child(4) a {
    background-image: url(Dup/img/png3.png);
}
header #header #header_menu li:nth-child(5) a {
    background-image: url(Dup/img/png4.png);
}
header #header #header_menu li:nth-child(6) a {
    background-image: url(Dup/img/png5.png);
}
header #header #header_menu li:nth-child(7) {
   padding-top: 0px;
    margin-top: -8px;
    
}
header #header #header_menu li:nth-child(7) a {
    background-image: none;
}



#contents h3 {font-size: 1.6rem;
    margin-bottom: 43px;
}


@media screen and (max-width: 768px) {
#page_title h2 {
   text-shadow: 2px 0px 5px #68c8e6, -1px 0px 3px #cae6fa;
    }
#intro #intro_txt {
    padding-bottom: 163px;
    padding-top: 80px;
    padding-left: 80px;
    padding-right: 74px;
}
#intro_txt {
    background-position: bottom 25px left calc(50% - 326px), top 27px right calc(50% - 304px);
    padding-bottom: 143px;
}
#header #logo {
    margin-bottom: 4px;
}
#main_img {
    margin-top: 163px;
}
.catch {
    font-size: 45px;
    right: 0%;
    top: 36%;
}
}

@media screen and (max-width: 667px) {
    #contents .box:first-of-type {
    background-size: 36% auto;
    background-position: 8% 99%;
    padding-bottom: 141px;
}
    .catch {
    font-size: 21px;
}
    #main_img {
    margin-top:62px;
}
    #page_title {padding-top: 0;}
    #header #logo {
    padding-top: 6px;
    padding-bottom: 5px;
}
   /* .con1png {
    padding-bottom: 87px;
}*/
    .con2png {padding-bottom: 0}
    .cms_title h2 {
    font-size: 1.2rem;
    width: 222px;
    padding: 12px;
}
#header #logo img {
    width: 100%!important;
}
header {padding-bottom: 0}
    .page1 main {
        margin-top: 61px;
    }
#intro #intro_txt {
    padding-bottom: 148px;
    padding-top: 93px;
    padding-left: 10px;padding-right: 10px;
}
#intro_txt {
    background-size: 73px auto, 45px auto;
    background-position: bottom 27px left calc(0% - -12px), top 21px right calc(39% - 110px);
    padding-bottom: 143px;
}
#contents .box {padding-top: 0px}
}




@media all and (-ms-high-contrast: none) {
#contact_tel a {padding-top: 38px}
#cms_2-a .cate .cate_title {
    padding-top: 10px!important;
}
#cms_2-b .cate .cate_title {
    padding-top: 12px!important;
}
.pager li a span {
    padding-top: 6px !important;
}
}