@charset "UTF-8";

html { 
font-size: 62.5%; /* font-sizeは16pxの62.5%の10px */

}


/* ルートの文字サイズを10pxに設定 */

html, body {

font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
"Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
margin:0;
padding:0;
 overflow-x:clip;
}

p{
font-size:1.5rem;/*15px*/
line-height:2;

}


body {

font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
"Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
  	

font-size: 1.6rem;

}
/* bodyのフォントサイズを1.6em（16px）に設定 */

@media screen and (max-width: 768px) {
body {
font-size: 1.6rem;
}
.purple {
height:40px;
margin:0px;
padding:0px;
}
h1{
text-align:left!important;
font-size: 1.8rem;
margin:0px;
padding:0px;
line-height:0.1;
}

h1:before {
vertical-align: top;
position:relative;
content:url(img/star.png);
display: inline-block;

margin-left:0;

 padding: 10px 0px 0px  0px;
transform: scale(.4);
margin:-100px 0px 0px -30px;
width:100px;
}




h2 {
font-size: 1.7rem;
}

h3 {
font-size: 1.5rem;
}

h4 {
font-size: 1.4rem;
}

p{
font-size:1.4rem;/*14px*/

}
}


/*全体wrapper*/
#wrapper {
padding: 0px;
margin: 0 auto;
}

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


/*Top banner背景 ----------------------------------------*/
#banner {

width:100%;
height:auto !important;
background-color:#e4cdd5;
margin:0 auto;
}



.fv {
position:relative;
text-align:center;
}

.fv img {

height:550px;
object-fit: contain;
	

}

.frame-img {
  display: block;
  position: relative;    /* for before 疑似要素 */
}
 
.frame-img > img {
  max-width: 1000px;
  height: auto;
margin:0 auto;
}

.circleWipe::before {    /*for 丸ワイプの表示 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
 
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: circleWipe
}
 
@keyframes circleWipe {
  0% {
    background-image: radial-gradient(circle, transparent  0%, white  5%, white 100%);
  }
  10% {
    background-image: radial-gradient(circle, transparent 10%, white 15%, white 100%);
  }
  20% {
    background-image: radial-gradient(circle, transparent 20%, white 25%, white 100%);
  }
  30% {
    background-image: radial-gradient(circle, transparent 30%, white 35%, white 100%);
  }
  40% {
    background-image: radial-gradient(circle, transparent 40%, white 45%, white 100%);
  }
  50% {
    background-image: radial-gradient(circle, transparent 50%, white 55%, white 100%);
  }
  60% {
    background-image: radial-gradient(circle, transparent 60%, white 65%, white 100%);
  }
  70% {
    background-image: radial-gradient(circle, transparent 70%, white 75%, white 100%);
  }
  80% {
    background-image: radial-gradient(circle, transparent 80%, white 85%, white 100%);
  }
  90% {
    background-image: radial-gradient(circle, transparent 90%, white 95%, white 100%);
  }
  100% {
    background-image: none;
  }
}
/*レイアウト*/

.backgroundcontainer {
  background-color: #eedfe4;

}
.centering_parent {
    padding: 0px 20px;         
      max-width: 1200px; 
margin:0 auto;
}




#main {
width: 100%;
min-height: 500px; /*footer上部に押しあがらないよう内容高さ設定*/

}





.middlecontainer {
  background-color: #fff;
/*padding:0;
margin:0;*/

/*width:100%; */
box-sizing:border-box;
margin:0 auto;
padding:0px;
margin-top:0px;
margin-bottom:50px;
/*min-height: 80vh; footer上部に押しあがら内容高さ設定*/
}




.contents {


margin: 0 auto;
padding:0px;
text-align:center;
 }


.contents2 {
max-width:1000px;
margin: 0 auto;


background-color:#fff;
 }
.contents8 {
margin: 0 auto;
/*max-width:1200px;*/


 }


 .contents img {
     width: auto;
height:auto;
margin: 0 auto;
text-align:center;

 }
 
 .flexbox {
     display: flex;

margin:0 auto;
padding:20px;
 }

 .flexbox-10 {
     display: flex;
position: relative;
margin:0;
padding:0px;
 }
.box20 p {
position: absolute;
width:40%;
  left: 10%;
  top: 50%;
transform: translate(-10%,-50%);
padding:20px;
}
.flexbox-outline {
     display: flex;
border: 1px solid black;
 }

 .box1{
     width: 30%;
     

padding:0px;

/*margin-left:100px;*/





 }
 .box1 img,  .box2 img {
width: 100%;
height:auto;
vertical-align:bottom;
 }

 .box2, .box20, .boxpoint {
     width: 50%;
     margin: 0px !important;
padding:0px !important;
 }


 .flexbox-left .box50 {
     width: 50%;
     margin: 0;
z-index: 4;

padding:0px 20px 0px 0px;

 }


 .flexbox-left{
     width: 90%;

 }


 .box3 {
     width: 80%;
     margin: 0;
z-index: 4;
padding-left:200px;

 }
 .box4 {
     width: 35%;
     margin: auto 1.5rem;
position:relative;

 }

 .box10 {
     width: 35%;
     margin: 0;
position:relative;

 }

.box50 {
     width: 50%;
     margin: 0 10px;

 }

.box50 img {

height:auto;
}
.box50-whitebox-right {
     width: 50%;
 
 margin: 0 calc(50% - 50vw);
background:rgba(255,255,255,0.9);
 margin-left: -130px;

margin-top: 30px;
  padding-left: 0px;

 }

.box50-whitebox-left {
     width: 50%;
     margin: 40px -60px 0px 0px;
background:rgba(245,213,233,0.8);
padding:30px;
z-index:2;
 }

.overlap {

box-sizing:border-box;
}
.box-overlap-left {

left:20%;
width: 20%;
z-index:555;
}

.box-image-right {
width: 80%;
z-index:554;
margin-left:-30px;
}


 ul.bullets {
  list-style: none;
}

ul.bullets li{
padding-left:0.1em;
	text-indent:-1.6em;
}

ul.bullets li:before {
content: "";
  background-image: url(img/dot.jpg);
  background-size: contain;
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  position: relative;
  top: 0.3rem;
  margin-right: 0.1rem;

}

/*スマホ用*/
@media screen and (max-width: 768px) {
#banner{
padding:0px;
margin:10px 0px;
}

.break {
display:block;

}
.wrapper .btn{
display: block;
}

.box20 {
position:static!important;
width:100%;
transform: none!important;
}
.box20 p {
padding:0px !important;
position:static!important;
width:100%;
margin:0 auto!important;
transform: none!important;
}

}



a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}


a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}



.flex-container-logo {
  display: flex;
  justify-content: center; 

}


.logo {
margin-top:0px;
 display: flex;
   align-items: center;

}

.logo img{

display: block;
}




.address_box {
margin-top:3px;
width:400px;
padding: 10 0px;
position:relative;
color:#fff;
text-align:center;
}

span.tel {
display: block;

color: #fff;
font-size:2rem;
padding: 0 10px;
line-height: 26px;

font-weight: 700;
letter-spacing: 1px;
white-space: nowrap;

}


/*お問い合わせボタン*/
.contact {
margin-left:10px;
text-align:center;
margin-top:3px;
width:400px;
}



 /*PC TEL*/
 .btn-grad1,.footer-btn2 {
       
background-color: #c25476;
padding: 7px 7px;
text-align: center;
  
display: block;
color:#fff;
}


@media(min-width:768px){

.btn-grad1 a, .footer-btn2 a {
 pointer-events: none;

}

}


 /* PC LINE診断ボタン*/

         .btn-grad,.footer-btn1 {
           
            background-color: #00a25c;
            margin: 0 auto;
            padding:7px 7px;
            text-align: center;
        
      
     
         
            display: block;
          }

          .btn-grad a:hover, .btn-grad1 a:hover {
           opacity:0.4;
          }
         
.btn-grad a, .btn-grad1 a,.footer-btn1 a {
color:#fff;
 position:relative;  
font-size:2rem;
font-weight:700;
padding:10px;
text-align: center;
}




.header{

width:100%;
height:auto;


}

/*ヘッダー固定*/
.fixed {
 position: fixed;
top: 0;
width:100%;
z-index: 1000;
background: #fff;


}




.imageblock {

position:relative;

}
.textblock1 {
  display: inline; /* 背景色をテキストにのみ適用するため */
background: rgba(186,106,159,0.8);
  padding-left: 20px; /* 左の余白 */
  padding-right: 20px; /* 右の余白 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
position:absolute;
top:10%;
left:0;

color:#fff;
font-size:2.5rem;
}
.textblock2 {
  display: inline; /* 背景色をテキストにのみ適用するため */
background: rgba(186,76,159,0.8);
  padding-left: 20px; /* 左の余白 */
  padding-right: 20px; /* 右の余白 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
position:absolute;
top:30%;
left:0;

color:#fff;
font-size:2.5rem;
}

.textblock3 {
  display: inline; /* 背景色をテキストにのみ適用するため */
background: rgba(186,76,89,0.8);
  padding-left: 20px; /* 左の余白 */
  padding-right: 20px; /* 右の余白 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
position:absolute;
top:50%;
left:0;

color:#fff;
font-size:2.5rem;
}


/*スマホ用切り替えメニュー*/

@media screen and (max-width: 930px) {


.wrapper-header {

height:60px;
}

.site-header__middle nav {
 
text-align: left;
  /* display:flex; */
  list-style:none;
   margin:0px;
   padding:0px;
border-bottom:none;

}


.btn-grad1 a, .btn-grad a{
 
font-size:12px!important;
line-height:12px;
padding:0px;
margin:0px;
color:#fff;
text-align:center;
}


.btn-grad1{
margin: 0 auto;
max-width:250px;
}

.wrapper-footer {
width:100%;
margin: 0 auto;
text-align:center;
padding:0;
}
.btn-grad, .btn-grad1 {

max-width:250px;
}

.logo {

margin-bottom:0px;
}



.address_box {
text-align:center;
max-width:250px;
}


.contact {
text-align:center;
max-width:250px;
}

.address_box span.tel{


font-weight:700;
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
"Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

padding: 3px;

}
.footer-btn1 a, .footer-btn2 a {
font-size:1.5rem;
}

.footer-btn1 , .footer-btn2  {
height:3rem;
}

}


.footer-container{
  display: flex;
 align-items: center;
  background: #fff;
justify-content: center;
width:100%;
}

.footer-btn1{
  width: 50%;
  max-height: 50px;
margin: auto;
margin-right:2px;
text-align:center;
padding:10px 0px;
line-height:1;
}
.footer-btn2{
  width: 50%;
  max-height: 50px;
margin: auto;
text-align:center;
padding:10px 0;
font-size:2rem;
line-height:1;
}








a{
text-decoration: none;
/*color: black;*/
}

a:visited{
text-decoration: none;

}



.side {

  padding: 0px 14px 0px 14px;
 box-sizing: border-box;
margin:0px;
}

.textBox {
 background-color: rgba(255, 255, 255, 0.7);
padding:50px;
}

.box70 {
margin: 0 auto;
text-align: center;

  width: 70%;
    height: auto;

}



.textBox .large {

font-size: 2.3rem;
line-height:1;
}


h1, h2 {




padding:0;
}


h1 {
 font-weight: bold;

text-align:center;

color:#fff;

  text-shadow:
            3px 3px 3px #ba2e59, -3px -3px 3px #c874ef,
           -3px 3px 3px #ba2e59,  3px -3px 3px #c874ef;
	


 padding: 20px 0px;


}

.purple {
 background: #ba6a9f;
max-height:80px;
width:100%;
 margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%); 
z-index:1;
}


h1:before {
vertical-align: top;
position:relative;
content:url(img/star.png);
display: inline-block;


margin-top:-120px;
 padding: 10px 0px 10px  0px;


}
h3 {
  position: relative;
  padding-bottom: 5px;
text-align:left;
font-size: 2.2rem;
color: #5b2568;
line-height:1.2;

}

h3 span.large {
color:#bf1070;

}



.heading-036 {
    text-align:left;
    padding: .7em 1.3em;
    color: #bf1070;
font-size: 2em;

}


.heading-025 {
  
     display: block;
    color: #fff;
font-size: 3.8em;
font-weight:600;
position: relative;
 left: 50%;
  transform: translateX(-50%);
text-align:center;
margin-top:20px;
padding:0;
  font-weight: bold;
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
clear:both;
line-height:0.1;
}
.heading-026 {
  
     display: block;
    color: #fff;
font-size: 3.4em;
font-weight:600;
position: relative;
 left: 50%;
  transform: translateX(-50%);
text-align:center;
margin-top:0px;
padding:0;
  font-weight: bold;
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
clear:both;
line-height:1;
}


.heading-006 {
    display: inline-block;
    position: relative;
    padding: 0 1em;
    color: #fff;
 left: 50%;
  transform: translateX(-50%);

font-weight:800;
font-size: 2rem;
margin-bottom:10px;
}

.heading-006::before{
    content: '{';
   padding: 0 5em;

}




.heading-006::before {
    left: 0;
}

.heading-006::after {
    right: 0;
padding: 0 5em;content: '}';}



.heading-012 {
   
    width: auto;
    margin: 0 auto;
    padding: .5em .7em;
    background: url("img/383448106.jpg") center center / cover no-repeat;
    color: #000;
text-shadow: #fff 0 0 10px,#fff 0 0 10px;
    text-align: center;
}

.heading-020 {
    padding: .5em .7em;
    background-image: repeating-linear-gradient(-45deg, #bcfbcb, #bcfbcb 3px, #fff 3px, #fff 7px);
    color: #000;
text-align:center;
}



a {
    display: block;

}




.oya {
margin: 0 auto;
 width: 100%;
display:flex;


}
.oya > div  {
  width: 100%;
  margin: 0 calc(50% - 50vw);
  padding: 0px calc(50vw - 50%);  


}





.oya .ko1 {
padding-top:0px;
 padding-right:0px;
/*margin-left:100px;*/

wdith:40%;


}
.oya .ko1 img {
padding-right:0px;
height:auto;
margin-right:0px;
max-width:100%;
max-width: 650px; 
}

/*右寄せwhite box*/

.ko2-inner{

padding-left:30px;
margin-left:0px;
max-width:600px;

}
.oya .ko2 {
background: rgba(255, 255, 255, 0.7);
 margin-left: auto;
margin-top:100px;
padding:30px 30px 0px 0px;
max-height:400px;
z-index:3;
wdith:90%;
}

.flexbox {
display:flex;
justify-content:center;

}
.flexbox-r {
 margin-left: auto;
  padding-left: 0px;

background: rgba(255, 255, 255, 0.7);
border-radius: 12px 0px 0px 12px;
display:flex;
 width: 80%;
  /*margin: 0 calc(80% - 80vw);
  padding: 0px calc(80vw - 80%); 
padding-left:0px;*/
}

.flexbox-r .box4 img, .box2 img {

height:auto;


}

.flexbox-l {
padding-right: 0px;
z-index:2;
background: rgba(255, 255, 255, 0.7);
border-radius: 0px 12px 12px 0px;
height:auto;
z-index:2;

display:flex;
 width: 80%;
 /* margin: 0 calc(80% - 80vw);
  padding: 0px calc(80vw - 80%); */



}


/*左寄せ white	box*/
.flexbox-left{
padding: 0px;
margin:0px;

border-radius: 0px 12px 12px 0px;


padding-left:18%;
display:flex;





background-color: #ffffff;



}

.flexbox-left .ko10{
z-index:4;
margin-right:-30px;
}

.flexbox-left .ko10 img {

height:auto;
z-index:4;


}



.oya .ko1 img, .flexbox-left .ko1,　.flexbox-left .ko1 img{

padding:0;
height:auto;

z-index:444;

}


.no-shadow {

box-shadow: none !important;
}



.oya .ko3 {
margin:0px;

background-color: #ffffff;
/*opacity: 1;
background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 6px ), repeating-linear-gradient( #dee5d455, #dee5d4 );

/*background: rgba(255, 255, 255, 0.7);*/
z-index:2;
padding:0px 20px 0px 100px;



}
.oya .ko4 {
margin:0px;
padding:0px;
  margin-left: auto;




z-index:1;


}
.oya .ko4 img{
width:auto;
height:auto;
vertical-align:bottom;
}



h2{



margin-top: 10px;
height:auto;
 padding: 0px;

border-bottom: solid 1px #bf1070;
}


.oya6 {

max-width:1200px;
}


.ko6 {
width:100%;

}

.ko6 img {

height:auto;

}

.ko7 {
width:100%;

}


@media screen and (max-width: 930px) {


.logo {
width:150px;
margin-bottom:0px;
}

.oya {
display:block;
width:100%;
}
.oya .ko2, .oya .ko1 {

display:block;
width:100%;
margin:0px !important;
padding:0px !important;
background:#fff;
}
.oya .ko1 img{
max-width:70%;
padding-top:20px!important;
}
.oya .ko2-inner{
max-width:100%;
padding:20px;
}

.flexbox-left .ko10{
display:block;

margin:0 auto !important;



}


.flexbox-left .ko10 img{
padding-left:0px !important;
margin-top:20px;
max-width:80%;
margin:0 auto !important;
display:block;

}

.flexbox-left{


margin:0px 0px 30px 0px;
display:block;
padding:20px 20px !important;
max-width:90%;
}

.oya .ko2, .oya .ko3, .oya .ko3-inner {
padding:0px;
margin:0px;
width:100%;
}
.flexbox-l .box4 img {
width:auto;
height:auto;
vertical-align:bottom;

}

.flexbox-l {
display:block;
}


 .oya3  {
margin-top:10px;
width:100%;

}


 .oya6, .oya6 .ko6,
.oya6 .ko7  {
margin-top:10px;
width:100%;
display:block;
}



.large {
color:#bf1070;
margin:0;
padding:0px;
}


.oya .ko2,
.oya .ko3,
.oya3 .ko4, 

 {

display:block;
margin:0;
padding:0px;
}


.flexbox-left .box60{
width:100%;
margin:0px 4px 0px 0px!important;
padding:0px 4px 0px 0px !important;

}

.oya .ko2 h2, .oya3 .ko3 h2 {

 background-size:30px; 
padding-left: 30px;
color:#bf1070;
}

.oya .ko2 p, .oya3 .ko3 p {

font-size:1.4rem;

}
.heading-006 {

margin-bottom: 20px !important;
}

 .heading-025 {
/*background-size:30px; */
margin:0 auto;
 /*padding-left:30px !important;*/
text-align:center;
font-size:1.6rem;
margin-bottom: 20px;
}

 .heading-026 {
/*background-size:30px; */
margin:0 auto;
 /*padding-left:30px !important;*/
text-align:center;
font-size:2.5rem;
margin-bottom: 20px;
}


/*mobile*/
.texttopimage{
 width:100% !important;
order: 1;
padding:0px;
margin:0px;
display:block;
}
.top-left{
 width:100% !important;
order: 2;
padding:0px;
margin:0px;
display:block;
position: static!important;
}

.flexbox-10 {

width:100% !important;

padding:0px;
margin:0px;
   display: flex;
    flex-direction: column;
}
.box20 {

 width:100% !important;
position: static!important;
display:block;
padding:0px;
margin:0px;
order:4;

}

.box60 {

 width:100% !important;
order: 3;
padding:0px;
margin:0px;


}
.box70 {
 width:100% !important;
padding:0 !important;
margin 0 auto !important;
}

}


.texttopimage{
  position: relative;
}
.top-left {
  left: 10px;
  top: 10px;
  position: absolute;
  
width:30%;
}


/* FAQ*/

.boxQA {
 /* position: relative;
    margin-left: 30px;
    padding: 0.5em 0.4em;*/
max-width:800px;
margin:20px auto;

}

.boxQA .box-title {
    position: relative;
    background: #f1dce3;/*Q文章部分背景色*/
    padding: 10px 5px 10px 40px;
    color: #000;/*Q文章文字色*/
  
font-size:23px;
font-weight:700;
}
.boxQA .box-title:before {
    content: "Q";
    display: inline-block;
    line-height: 54px;
    position: absolute;
    padding: 0em;
    color: white;/*Q文字色*/
    background: #ba6a9f;/*Q背景色*/
    font-weight: bold;
    width: 54px;
    text-align: center;
    height: 54px;
    line-height: 54px;
    left: -1.2em;
    top: 27px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
   /* border: solid 3px white; 
    border-radius: 50%;*/
font-size:24px;
}
.boxQA .box-title:after {
    content: "A";
    display: inline-block;
    line-height: 54px;
    position: absolute;
    padding: 0em;
    color: white;/*A文字色*/
    background: #826f75;/*A背景色*/
    font-weight: bold;
    width: 54px;
    text-align: center;
    height: 54px;
    line-height: 54px;
    left: -1.2em;
    bottom: -80px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
   /* border: solid 3px white; 
    border-radius: 50%;*/
font-size:24px;
}

.boxQA p {
    padding: 20px 20px 15px 40px;
    margin: 0;
}


.boxQA ul {
  padding: 0 1em;
  position: relative;
}
.boxQA ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em 4.2em;
  list-style-type: none!important;
}
.boxQA ul li:before {
  font-family: "FontAwesome";
  content: "\f138";/*アイコン種類*/
  position: absolute;
  left : 3.5em;
  color: #FFAB8B; /*Aのリストのアイコンの色*/
}






/*スマホ*/
@media screen and (max-width: 930px) {


.sectTit span{
font-size:16px;

}
.boxQA .box-title {

    padding: 5px 5px 5px 40px;
  
  
font-size:23px;
font-weight:700;
}
.boxQA {

margin-left:30px;
width:90%;

}

.boxQA .box-title, .boxQA p {
  padding-left: 1.2em;
font-size:14px;
}


.boxQA .box-title:before {
   
    line-height: 30px;
    position: absolute;
    padding: 0em;

  left: -0.8em;
    width: 30px;
  
    height: 30px;
    line-height: 30px;
    top: 16px;



font-size:24px;
}

.boxQA .box-title:after {
    content: "A";
    display: inline-block;
    line-height: 30px;
    position: absolute;
    padding: 0em;

    font-weight: bold;
    width: 30px;
    text-align: center;
    height: 30px;
    line-height:30px;
    left: -0.7em;
    bottom: -60px;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
 
font-size:24px;
}


}

/*縦線つき title */
h2.sidebar {
color:#000;
font-weight:800;
font-size: 18px;
padding: 0;
 /*background: #e8e3d4;/*背景*/
border-left: solid 1px #5B2503;/*左線*/
margin-top:10px;
margin-bottom:4px;

}






.grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
}
.flex-row {
  display: flex;
  align-items: center;
  column-gap: 20px;

}








.flex-row > div {
  min-width: 180px;
}










.times {       
background-color: #ddce95;
margin: 6px 0px 4px 0px;
padding: 7px 1px 5px 1px;
text-align: center;
color:#fff;            
width:60px;
display: block;
font-weight:800;
font-size:22px;
border-radius: 4px;  
}






/*イチオシ　カード値段*/
p.price {
margin-top:20px;

font-size:38px;
color:#000;

background-size: auto;
font-weight:800;
letter-spacing:-1px;
/*transform:scale(1.2,1.0);*/
white-space:nowrap;



}


/*円*/
span.small {
font-size:10px;
color:#000;
line-height:10px;



}

p.cardp {

 font-size: 13px;
line-height:16px;
}











/*PC画面トップメニュー*/


/*TOP MENU */

.site-header__middle nav{
border-bottom: 1px solid #f7f5ee;

/* display: flex;
flex-direction:row;
width:100%; */


}






.site-header__middle ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;

display: flex;
flex-flow: row wrap;
   

}





.site-header__middle nav{
/* display:flex;
 flex-flow: row wrap;
justify-content: center; /*PC メニュー中央揃え*/


}























/*メインタイトル*/

 h1.underline2{
color:#139b61;
 
position: relative;
	text-align: center;
	padding: 1.2rem;  
}

h1.underline2:before {
position: absolute;
	content: '';
	background: #d56277;
	bottom: 0;
	left: calc(50% - 40px);
	width: 80px;
	height: 4px;
}


 h1.underline3{
display: block;
text-align:center;
padding: 0;
    margin-bottom: 0.2rem;
    border-top: 2px solid #22ac38;
    border-bottom: 2px solid #22ac38;
    color: #22ac38;
    font-weight: bold;
    font-size: 26px;

}




.largefont2 {
vertical-align:-10px;
line-height:30px;
  font-size: 70px;
color: #bf1070;
font-weight:600;

}

/*.largetitle span {
 position: absolute;
  top: -3px;
  left: 0;

  color: #3d8e0d;



font-size: 86px;

}*/

.circle{

width:150px;
height:150px;
 float:  left;                  /* 位置指定 */
    position:  relative;            /* 位置指定 */
    top: -20px;
left:-70px;
background:url("img/circle.png") no-repeat;
margin:0;
padding-right:0;
}

.largefont {


  font-size: 35px;
color: #bf1070;
font-weight:600;
line-height:30px;
     /*font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;*/
margin-bottom:10px;
padding-bottom:0px;
}

.largetitle {
  font-size:15px;
color: #bf1070;

line-height:2;

  



}


.large {
font-size: 1.4em;
color:#bf1070;
}

.p15 {

padding: 0px 60px;

}

.steptitle {
  font-size: 40px;
font-weight:900;
color: #22ac38;
line-height:10px;
background:#f4ed83;
 display: inline-block;
margin:0;
padding:0;
}
.stepfont {
 position: relative;

  font-size: 30px;
color: #22ac38;
font-weight:600;
line-height:1.2;
}


span.dot {
  background: #ddce95;
 /* border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em; */
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
 /* line-height: 1.6em;*/
  margin-right: 5px;
  text-align: center;
  width: auto; 
font-size:32px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight:700;
}




.step{
display: flex;
/*border: 1px solid #ddce95;
-webkit-border-radius: 5px;
border-radius: 1px; */
padding: 0px;
 position: relative;

font-size: 1.2em; /* テキストの指定 */
/*font-weight: bold; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
vertical-align: middle;
width:100%;
margin-bottom: 30px;
}
.step .left{
    width: 10%;

margin:5px;


}

.step .right{
    width: 90%;
margin:5px;

}


@media only screen and (max-width:768px) {
.stepfont {
font-size: 1.5em;
}

.step .left{
    width: 12%;
padding-right:10px;
margin:5px;


}

span.dot {
 padding:2px;
  margin-right: 15px;
  text-align: center;
  width: auto; 
font-size:20px;

}



h1.underline2:before {
position: absolute;
	content: '';
	background: #d56277;
	bottom: 0;
	left: calc(50% - 40px);
	width: 80px;
	height: 2px;
}


h2 {

text-align:left;

 /*   position: relative;
  
  padding: 0 0 0 40px;
  background-image:url(img/leaf.png);

  background-repeat: no-repeat;
  background-position: 0 5px;*/
  }  

  



h3 {
font-size: 1.3em;

}

.largefont2 {
vertical-align:-1px;
font-size: 2em;
}

.largetitle .largefont {
 padding-left: 0em;
font-size: 19px;
     font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;

}

.large {
font-size: 1.3em;

}

.largetitle {
font-size: 15px;
 padding-left: 0.5em;

}

.textBox .large {

font-size: 1.3em;
}


.heading-036 {

font-size: 2.2em;
}

/*
.ichioshi-container p{
font-size: 12px;
}

*/

/*.heading-025 {
   color:#000;
    font-size:18px;
   padding-left:50px !important;
margin:0;
}*/

.heading-006 {
font-size:17px;
line-height:2;
text-align:center;
}
.heading-006::before,
.heading-006::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 25px;
    height: 3px;
    background-color: #3d8e0d;

}

.heading-006::before {
    left: 0;
}

.heading-006::after {
    right: 0;
}

.p-15 {

font-size:15px;
}


.largetitle span {

top:3px;
font-size: 36px;
}


}



.sectTit {
  line-height: 1.3;
  text-align: center;
  font-size: 34px;
color: #22ac38;
     font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}
 
.sectTit span {
  position: relative;
  display: inline-block;
  min-width: 300px; 
  box-sizing: border-box;
  padding: .5em .9em;
  border-top: 1px solid #15973a;
  border-bottom: 1px solid #15973a;
}
 
.sectTit span:before, 
.sectTit span:after {
  position: absolute;
  top: 50%;
  display: block;
  width: 1px;
  height: 88%; 
  content: '';
  transform: translateY(-50%);
  background: #15973a;　
}
 
.sectTit span:before {
  left: -3px; 
}
 
.sectTit span:after {
  right: -3px;　
}








p.white {
color:#fff;
text-align:left;
}

a {
  text-decoration: none; 
}




/*animation*/

.load-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}
.load-fade.is-show {
  opacity: 1;
  visibility: visible;
}


.scroll-up {
  opacity: 0; 
  visibility: hidden;
  transform: translateY(50px);
  transition: all 1s;
}
.scroll-up.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}



.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}








@media screen and (max-width: 768px) {
.contents {
 display: block;
  justify-content: center;
}


     .flexbox, .flexbox-l  {
        display: flex;
flex-direction:column;
margin:0;
padding:20px;
     }
.flexbox-left, oya {
width:99%;
margin:0;
padding:20px;
}
 .flexbox-outline {
         display: flex;
border: 1px solid #ccc;
     }
     .flexbox-l .box1,.flexbox-l .box3,.flexbox-l .box4,.flexbox .box10, .flexbox .box500, .flexbox box-overlap-left, .flexbox .box-image-right  {
         width: 100%;
         margin: 0 auto;
/*margin:0;*/
padding:0 !important;

     }
.flexbox .box1, .flexbox .box2, .flexbox .box3, .flexbox .boxpoint {
         width: 100% !important;
             margin: 0 auto;


     }
/*スマホで画像小さく*/
.flexbox .box4 img, .flexbox .box10 img {

width:80%;
height:auto;
margin: auto;
padding:0px;
  display: block;
}

.flexbox .box1 img {
justify-content: center;
width:300px;
height:auto;

}



.oya .ko1 img, .flexbox-left .ko1 img {

width:80%;
margin: auto;
  display: block;
padding:0px;
}


.flexbox .box1 {
padding:0px;
  display: flex;
  justify-content: center;
order: 2;

}


.flexbox .box2 {
width:100% !important;
order: 1;
padding:0px;
margin:0px;
}


.flexbox .box3 {

order: 3;
}

.flexbox .box4, .flexbox .box10 {
width:100% !important;
order: 4;
}

.flexbox2 .box5 {
width:100% !important;
order: 5;
}

.flexbox2 .box6 {

order: 6;
}



.flexbox-left .box60 {
     width: 100%;
margin:0;
padding:0px;

 }

.box60 p {

font-size: 14px;

}

.flexbox .box50 {
     width: 100%;
margin:0 auto;
padding: 0;


 }

.contents {
width:100%;
margin:0 auto;
padding:0;
 }






}

/* 営業時間テーブル地図横*/


.biz-hour {
  border-collapse: collapse;
 width: 99%;

font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
"Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

}
@media screen and (max-width: 414px) {
  .biz-hour {/* スマホのときだけ親要素いっぱいに */
    width: 100%;
  }
}
 .biz-hour td {
  padding: 3px;
  text-align: center;
color:#000;
  border: 1px solid #8f5ea5;
background-color:#fff;
}

.biz-hour td.black {

color:#000;
}


.biz-hour th {
background-color:#a477a7;
color:#fff;
 padding: 3px;
  text-align: center;
color:#fff;
  border: 1px solid #8f5ea5;
}



/*プロフィール*/
#table01 {
  /*width: 100%;*/
}

/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
 
font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック体",
"Yu Gothic", YuGothic, "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;

}

#table01 th,
#table01 td {
  padding: 14px 0;
  border: none;
text-align: center;
font-size:14px;

}

#table01 th {
  width: 10%;
font-weight:700;
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}


/*top page banner */
.hero{
margin: 0px;
padding: 0px;
    margin-left: calc(80% - 80vw); 
    margin-right: calc(80% - 80vw);

}

.hero2{
margin-top: -2px;
padding: 0px;
}

#page-link {
  margin-top:-50px;
  padding-top:50px;
}







ul.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;         /* デフォルト指定上書き */
}
.list_test-wrap li:before {
   content:  "";                 /* 空の要素作成 */
    width: 30px;                            /* 幅指定 */
    height: 30px;                           /* 高さ指定 */
    display:  inline-block;                 /* インラインブロックにする */
    position:  relative;                    /* アイコンの位置を調整 */
    top: -2px;                             /* アイコンの位置を調整 */
    margin-right: 5px;                      /* 余白指定 */
    background-image:  url(img/7276364.png);  /* アイコン指定 */
    background-size:  contain;              /* アイコンの大きさ指定 */
    background-repeat:  no-repeat;          /* アイコンをリピートしないようにする */
    vertical-align: top;                    /* アイコンの位置を調整 */

}
.list_test-wrap li{
    padding:  10px;                         /* 余白指定 */
    margin-bottom: 2px;                     /* 要素と要素の間指定 */
    font-size:  18px;                       /* 文字サイズ指定 */
   padding-left: 2.2em;
    text-indent: -2.0em;
}

/*西小岩メンズクリニックが選ばれる理由*/
div.container3{

 position: relative;


 

background-color:rgba(255, 255, 255, 0.5);
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw);
 
}


div.container3:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid rgba(255, 255, 255, 0.9);
}


.content-bottom {

max-width: 900px;
margin:0 auto;
padding: 20px 40px 0px 20px;
}


.container6{

background-image:  url(img/123731572.jpg);
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw);


}


.container7{

background: #e8e3d4;
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw);


}
.container8 {
background: #c092c3;
padding: 50px 0px;
    margin-left: calc(50% - 50vw); 
    margin-right: calc(50% - 50vw);

position: relative;
}

div.container5{

 position: relative;


 
}

h4 {
font-size:18px;
color:#5b2568;
padding-top:10px;
margin:0;
font-weight:700;
}

h5 {
font-size:12px;
color:#000;

font-weight:700;

}


/*スマホ用*/
@media screen and (max-width:900px)  {
  .container-content {
    flex-direction: column;
  }

.flexbox5 {
flex-direction: column;

}

.leftbar {
width:100%;
order: 2;
margin-top:20px;
}

.rightcontainer {
width:100%;
order: 1;
}

.middlecontainer {
width:100%;
order: 1;
margin-top:50px;
}

.flexbox150 {

margin-top:0px;
}



.box {
width:100%;
}



.box .text {
text-align:center;
}

}
 




div.container4 {
  background-color: #fff; 
}


span.dot {
  background: #528110;
 /* border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em; */
  color: #ffffff;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 3px;
  text-align: center;
  width: 1.6em; 
font-size:32px;
margin-top:18px;
font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-weight:700;
}




.step{
display: flex;
/*border: 1px solid #ddce95;
-webkit-border-radius: 5px;
border-radius: 1px; */
padding: 0px;
 position: relative;

font-size: 1.2em; /* テキストの指定 */
/*font-weight: bold; /* テキストの指定 */
line-height: 1.4; /* テキストの指定 */
vertical-align: middle;
width:100%;
margin-bottom: 10px;
}
.step .left{
    width: 10%;

margin:5px;


}

.step .right{
    width: 100%;
margin:5px;

}

.step.right h2 {

font-size: 1.3em;
margin-top:0px;

}



.step p {

/*font-weight:500;*/
color:#000;

}



.bigpoint .right{
    width: 100%;
margin-left:10px;
z-index:200;
}

.bigpoint .right h2 {

font-size: 1.3em;
margin-top:30px;
z-index:221;

}



.flex {
  display: flex;
}










img {
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.sp-img {
  display: none;
}
.sp-br {
  display: none;
}

.sp-dn{

display:none;
}



.fv h1 {
position: absolute;

left: 3%;

top:30%;
text-align: left;
color:#000;
white-space: nowrap;
font-size:26px;
font-weight:700;



}

.fv h2 {
color:#000;
font-size:20px;
position: absolute;

left: 3%;

bottom:20%;
text-align: center;


white-space: nowrap;
font-size:20px;
font-weight:700;



}
@media screen and (max-width:920px) {
  .pc-img {
    display: none;
  }
  .sp-img {
    display: inline;


  }
  .sp-br {
    display: inline;
  }


.hero{
margin: 0px;
padding:0;
width:100%;

}

.hero2 {
margin-top: 2px;

}

.fv img {

height:auto;


}

.fv h1 {

font-size:18px;
color:#000;
position: absolute;


left: 4%;


text-align: left;
  

}

.fv h2 {

font-size:14px;
left: 4%;
}

/*スマホ用*/
h1.underline2 {


font-size:16px;

}




}

.letterspacing {

letter-spacing:-4px;
}

/* font */
.mincho {
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
}

/* margin & padding */

.mb-10 {
margin-bottom: 10px;

}

.mb-30 {
margin-bottom: 30px;

}

.mb-130 {
margin-bottom: 130px;

}

.mt-4 {
  margin-top: 4px;
}
.mt-8 {
  margin-top: 8px;
}
.mt-13 {
  margin-top: 13px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-22 {
  margin-top: 22px;
}
.mt-25 {
  margin-top: 25px;
}
.mt-26 {
  margin-top: 26px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-32 {
  margin-top: 32px;
}
.mt-36 {
  margin-top: 36px;
}
.mt-40 {
  margin-top: 40px;
}
.mt-50 {
  margin-top: 50px;
}
.mt-72 {
  margin-top: 72px;
}
.mt-100 {
  margin-top: 100px;
}
.mt-128 {
  margin-top: 128px;
}
.mt-160 {
  margin-top: 160px;
}
.mt-200 {
  margin-top: 200px;
}
.mr-14 {
  margin-right: 14px;
}
.mr-30 {
  margin-right:30px;
}


.mr-54 {
  margin-right: 54px;
}


.ml-14 {
  margin-left: 14px;
}
.ml-40 {
  margin-left: 40px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-275 {
  margin-left: 275px;
}
.mlr-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mlr-22 {
  margin-left: 22px;
  margin-right: 22px;
}
.m-tb16 {
  margin: 16px 0;
}

.pt-10 {
  padding-top: 10px;
}

.pt-44 {
  padding-top: 44px;
}
.pt-50 {
  padding-top: 50px;
}
.pt-65 {
  padding-top: 65px;
}
.pt-72 {
  padding-top: 72px;
}
.pt-80 {
  padding-top: 80px;
}
.pt-110 {
  padding-top: 110px;
}
.pt-120 {
  padding-top: 120px;
}
.pt-150 {
  padding-top: 150px;
}
.pt-200 {
  padding-top: 200px;
}
.pt-250 {
  padding-top: 250px;
}
.pb-8 {
  padding-bottom: 8px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pb-24 {
  padding-bottom: 24px;
}
.pb-50 {
  padding-bottom: 50px;
}
.pb-65 {
  padding-bottom: 65px;
}
.pb-80 {
  padding-bottom: 80px;
}
.pb-90 {
  padding-bottom: 90px;
}
.pb-120 {
  padding-bottom: 120px;
}
.pb-124 {
  padding-bottom: 124px;
}
.pb-160 {
  padding-bottom: 160px;
}

.pl-14 {
  padding-left: 14px;
}

.pr-14 {
  padding-right: 14px;
}
.pl-15 {
  padding-left: 15px;
}
.pl-150 {
  padding-left: 150px;
}

.pr-15 {
  padding-right: 15px;
}
.pr-30 {
  padding-right: 30px;
}

.pl-20 {
  padding-left: 20px;
}

.pr-20 {
  padding-right: 20px;
}


.ptb-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.pad-tb16 {
  padding: 16px 0;
}
.pad-tb40 {
  padding: 40px 0;
}
.pad-tb44 {
  padding: 44px 0;
}
.pad-tb50 {
  padding: 50px 0;
}
.pad-tb80 {
  padding: 80px 0;
}

.pad-10 {
  padding: 10px;
}
.pad-20 {
  padding: 20px;
}

.pad-30 {
  padding: 30px;
}
.pad-40 {
  padding: 40px;
}




.tac {
  text-align: center;

}

.dn {
  display: none;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-end {
  align-items: flex-end;
}

.nowrap {
  white-space: nowrap;
}






 
/*フッター*/



.footer {
  padding: 20px 60px;
background: #fff;
margin:0;
bottom: 0vh;
position:sticky;
display:flex;
justify-content:center;
z-index:3;
}
.wrapper-footer{




max-width: 1200px;
margin: 0 auto; 
}

.footer ul {
  margin-top: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 0;
}

.footer .logo2 {
width:150px;
height:auto;

}
.footer ul a {
  color: #000;
  text-decoration: none;
 
}

.footer ul li {
  display: inline-block;
  padding: 0 15px;

}

.footer ul a:hover {
  opacity: 0.8;
}



@media (max-width:738px) {
    
.footer {
  padding: 0px;

margin:0 auto;


}




    
  .footer ul li {
    margin: 0px 3px;
  display: inline-block;
    
     padding: 0;
   

    }

}



  .sp-dn {
    display: none;
  }
 
  .mlr-22 {
    margin-left: 12px;
    margin-right: 12px;
  }
 

/*PCとスマホ画像切り替え*/
.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 930px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}