@charset "UTF-8";
@import "index.css";


/* ------------------------------小見出し属性------------------------------　*/
@font-face { font-family:'myFont'; src:url('../font/TsukushiAMaruGothic.woff') format('woff'); }

h1 span.small { font-size:30px; }
h1 span.color { color:#DF1E79; }
h1 { font-size:36px; font-weight:normal; font-family:'myFont'; }
h2 span.small { font-size:30px; }
h2 span.color { color:#DF1E79; }
h2 { font-size:36px; font-weight:normal; font-family:'myFont'; }
h3 span.small { font-size:16px; }
h3 span.color { background:linear-gradient(transparent 60%, #FFE4EA 60%); }
h3 { font-size:30px; font-weight:normal; font-family:'myFont'; text-shadow:none; }
h4 { font-size:20px; font-weight:normal; font-family:'myFont'; }

@media screen and (max-width:768px){
	h1 span.small { font-size:16px; }
	h1 { font-size:22px; }
	h2 span.small { font-size:16px; }
	h2 { font-size:22px; }
	h3 span.small { font-size:16px; }
	h3 { font-size:22px; }
}


.bg { background:url(../img/switch_bg.png) no-repeat 50% 0 fixed; }
.space { margin-top:70px; }
li { font-weight:normal!important; }
@media screen and (max-width:768px){
  .bg { background:url(../img/switch_bg.png) no-repeat 50% 0; }
  .sp_space { padding-top:70px; }
}

h1 i,
h2 i { padding-bottom:20px; }



/* ------------------------------料金------------------------------　*/
.price {  }
.price h1 ,.price h2 { margin-bottom:50px; }
.price h3 { margin-bottom:30px; padding:5px 20px; background:#FF7AB9; color:#ffffff; border-radius:30px; }
.price h4 { margin-bottom:20px; color:#FF7AB9; }
.price .box { background:#ffffff; border:1px solid #cccccc; padding:30px; margin:0 0 30px 0; border-radius:30px; }
.price .left { width:30%; float:left; }
.price .right { width:65%; float:right; }
.price .left img { margin:0 auto; }
.price ul { margin:0; padding:0; }
.price li { text-align:left; font-weight:normal; }

.price table{ border-collapse: collapse; width:100%; font-size:14px; margin:0; padding:0; }
.price th,.price td { padding:10px 8px; }
.price th{ width:30%; border-bottom: solid 1px #cccccc; color:#000000; text-align:left; }
.price td{ width:70%; border-bottom: solid 1px #cccccc; text-align:center; }
.price td span { font-size:8px; }
.price tr:nth-child(odd) td { background:transparent; }
.price tr:nth-child(even) td { background:transparent; }

.button_box { position:fixed; bottom:0px; right:120px; width:405px; height:63px; background:#FF7AB9; padding:10px 10px 0 10px; border-radius:10px 10px 0 0; z-index:999 }
.button_box button { width:50px; height:45px; font-size:14px; margin:auto; background:#1a1a1a; color:#ffffff; border:none; border-radius:5px; }
.button_box p { width:270px; float:right; font-size:14px; line-height:1.5; color:#ffffff; }
@media screen and (max-width:768px){
	.button_box { display:none; }
	}

.table-wrapper{ width:100%; overflow-x:scroll; }
.table-wrapper::-webkit-scrollbar{background:#fff; border-radius:5px; height:10px; border:1px solid #000; }
.table-wrapper::-webkit-scrollbar-thumb{background:#000; border-radius:5px; }
.table-wrapper table { width:938px; border:1px solid #cccccc; }
.table-wrapper table th { width:12%; background:#FF7AB9; color:#ffffff; border-right:1px solid #ffffff; }
.table-wrapper table td { width:22%; border-right:1px solid #cccccc; }
.table-wrapper table p { margin:20px 0 0 0; padding:0; text-align:left; font-size:14px; font-weight:bold; color:#2BACFF; }

@media screen and (max-width:768px){
	.price .left { width:100%; float:none; }
	.price .right { width:100%; float:none; margin-top:30px; }
}

/* ------------------------------院長挨拶------------------------------　*/
.message {  }
.message h3 { margin:60px 0; }
.message h3 span.color { color:#DF1E79; background:none; }
.message img { border-radius:30px; }
@media screen and (max-width:768px){
	.message h3 { margin:30px 0; font-size:20px; }
	.message h3 br { display:none }
}

/* ------------------------------スタッフ------------------------------　*/
.staff {  }
.staff .box { width:33%; padding:5%; float:left; }
.staff h2 { font-size:25px; margin:20px 0; }

.staff p.name01 { font-size:16px; font-family:'myFont'; margin:0; padding:0; }
.staff p.name02 { font-size:30px; font-family:'myFont'; margin:0; padding:0; }
.staff h2 { font-size:20px; text-align:left; margin:20px 0 10px 0; }
.staff .left { width:37%; float:left; }
.staff .right { width:63%; float:right; padding:0 0 0 3%; }
.staff .left img { border-radius:30px; }
.staff th { width:18%; font-weight:bold; }

@media screen and (max-width:768px){
.staff .box { width:50%; padding:3%; }
.staff h2 { font-size:20px; }
.staff .left { width:100%; float:none; }
.staff .right { width:100%; float:none; padding:3% 0 0 0; }
}

/* ------------------------------流れ------------------------------　*/
.flow {  }
.flow h2 { font-size:30px; text-align:left; margin-bottom:30px; }
.flow h2 span { border-radius:15px; background:#DF1E79; color:#ffffff; font-size:12px; padding:5px 10px; margin:0 5px 0 0; text-shadow:none; }
.flow h3 { font-size:22px; text-align:left; margin-bottom:0px; }
.flow h3:before { content:'●'; color:#DF1E79; }
.flow .step { margin:50px 0 0 0 ; }
.flow .left { width:67%; float:left; }
.flow .right { width:30%; float:right; }
.flow .right img { border-radius:30px; }
.flow .box { background:#f7f7f7; border:dotted #cccccc 1px; border-radius:10px; padding:30px; }
.flow .box p { margin:0; padding:0; }
.flow .box p.tel { color:#DF1E79; font-size:30px; font-family:'myFont'; margin:0; padding:0; }
.flow .box p span { text-align:center; background:#FFE4EA; padding:5px; margin:0 5px 0 0; }
.flow hr { margin:50px 0; border:0; border-bottom: 1px dashed #cccccc; clear:both; }

@media screen and (max-width:768px){
.flow h2 { font-size:20px; }
.flow h2 { font-size:18px; }
.flow .left { width:100%; float:none; margin:20px 0 0 0; }
.flow .right { width:100%; float:none; margin:20px 0 0 0; }
}

/* ------------------------------アクセス------------------------------　*/
.access h2 { margin-bottom:50px; }
.access table{ border-collapse: collapse; width:100%; font-size:16px; margin:0; padding:0; }
.access th,.access td { padding:10px 8px; }
.access th{ border-bottom: solid 1px #cccccc; color:#000000; text-align:center; }
.access th.width20 { width:20%; text-align:left; }
.access td{ border-bottom: solid 1px #cccccc; text-align:center; }
.access tr:nth-child(odd) td { background:#ffffff; }
.access tr:nth-child(even) td { background:#ffffff; }
@media screen and (max-width:768px){
.access table{ font-size:14px; }
.access th,.access td { padding:0; }
}

.access .left { width:50%; float:left; }
.access .right { width:50%; float:right; }

.access {  }
.access .step01,
.access .step02,
.access .step03 { width:320px; height:270px; float:left; }
.access .step02 { margin:0 20px; }
@media screen and (max-width:768px){
.access { }
.access .step01,
.access .step02,
.access .step03 { width:100%; height:auto; float:none; }
.access .step02 { margin:0 0px; }
}

/*******************************
* LINE風の右からの吹き出し
********************************/
.right_icon01 { padding-right:200px; background:url(../img/page/q_icon01.png) no-repeat 100% 0; background-size:160px 160px; min-height:160px;}
.right_icon02 { padding-right:200px; background:url(../img/page/q_icon02.png) no-repeat 100% 0; background-size:160px 160px; min-height:160px;}
.right_balloon { position:relative; background:#ffffff; border:3px solid #000000; margin:0; padding:30px; border-radius:15px; margin-left:20%; clear:both; width:100%; float:right; font-size:16px; }
.right_balloon:after,
.right_balloon:before { left:100%; top:50px; border: solid transparent; content: " "; height:0; width:0; position:absolute; pointer-events:none; }
.right_balloon:after { border-left-color:#ffffff; border-width: 21px; margin-top: -21px; }
.right_balloon:before { border-left-color:#000000; border-width: 25px; margin-top: -25px; }

@media screen and (max-width:768px){
.right_icon01,
.right_icon02,
.right_icon03,
.right_icon04,
.right_icon05,
.right_icon06,
.right_icon07 { padding-right:100px; background-size:80px 80px; min-height:80px;}
.right_balloon { border:2px solid #000000; padding:20px; font-size:14px; }
.right_balloon:after,
.right_balloon:before { top:30px; }
.right_balloon:after { border-width: 12px; margin-top: -12px; }
.right_balloon:before { border-width: 15px; margin-top: -15px; }
}

/*******************************
* LINE風の左からの吹き出し
********************************/
.left_icon01 { background:url(../img/page/a_icon01.png) no-repeat 0 0; }
.left_icon02 { background:url(../img/page/a_icon02.png) no-repeat 0 0; }
.left_icon03 { background:url(../img/page/a_icon03.png) no-repeat 0 0; }
.left_icon01,
.left_icon02,
.left_icon03 { padding-left:200px; background-size:160px 160px; min-height:160px; }
.left_balloon { position:relative; background:#ED1E79; color:#ffffff; border:3px solid #000000; margin:0; padding:30px; border-radius:15px; margin-right:20%; width:100%; float:left; font-size:16px; }
.left_balloon:after,
.left_balloon:before { right:100%; top:50px; border:solid transparent; content:" "; height:0; width:0; position:absolute; pointer-events:none; }
.left_balloon:after { border-right-color: #ED1E79; border-width: 21px; margin-top: -21px; }
.left_balloon:before { border-right-color: #000000; border-width: 25px; margin-top: -25px; }

@media screen and (max-width:768px){
.left_icon01,
.left_icon02,
.left_icon03 { padding-left:100px; background-size:80px 80px; min-height:80px;}
.left_balloon { border:2px solid #000000; padding:20px; font-size:14px; }
.left_balloon:after,
.left_balloon:before { top:30px; }
.left_balloon:after { border-width: 12px; margin-top: -12px; }
.left_balloon:before { border-width: 15px; margin-top: -15px; }
}

/*******************************
* LINE風の割り込みを解除
********************************/
.clear_balloon{ clear: both; margin:20px 0; }

@media screen and (max-width:768px){
	.clear_balloon{ clear: both; margin:20px 0; }
}


/* ------------------------------アクセス------------------------------　*/
.privacy h2 { font-size:20px; text-align:left; margin-bottom:10px; }
@media screen and (max-width:768px){
	.privacy h2 { font-size:20px; }
}


/* ------------------------------お問い合わせフォーム------------------------------　*/
header#info #header { height:200px; }
header#info h2 { color:#ffffff; text-align:center; padding-top:80px; text-shadow:2px 2px 5px rgba(0,0,0,0.6) }

@media screen and (max-width:768px){
	header#info #header { width:100%; }
}

form { width:80%; text-align:center; margin:0 auto; padding:0 0 50px 0;}
input.text01 { border:1px solid #cccccc; width:100%; height:auto; padding:10px; background:#ffffff; color:#333333;border-radius:3px; }
input.text02 { border:1px solid #cccccc; width:50%; height:auto; padding:10px; background:#ffffff; color:#333333;border-radius:3px; }
textarea.text02 { border:1px solid #cccccc; width:100%; height:auto; font-size:12px; padding:10px; background:#ffffff; line-height:1.6em; color:#333333; border-radius:3px;}
select.select01 { background:#ffffff; border:1px solid #cccccc; border-radius:3px; color:#0C2245; font-size:14px; height:40px; line-height:30px; text-align:left; text-indent:5px; vertical-align:middle; width:50%; }
input.sent { border:3px double #ffffff; width:100%; height:auto; font-size:26px; margin:10px 10px 10px 0; padding:30px 15px; background:#ff0000; color:#ffffff; border-radius:3px;}
input.sent:hover { background:#990000; color:#ffffff; }
div#mail_form p.center { margin:20px 0; font-size:14px; }
hr { border-top:1px dotted #cccccc; border-bottom:none; }

.errorBg { background:#ffeeee; }
.errorFont_top { color:#BC272D; font-weight:bold; margin:0; padding:30px 0 26px 0; border:1px solid #BC272D; font-size:20px; text-align:center; background:#ffeeee; border-radius:3px; }
.errorFont { color:#BC272D; font-weight:bold; margin:0; font-size:14px; }

@media screen and (max-width:768px){
	form { width:100% }
}

#mail_form dl { border-top:none; width:100%; text-align:left }
#mail_form dl dt { clear:left; float:left; width:30%; min-height:95px; border-top: 1px dotted #cccccc; padding:10px 0; font-size:16px; }
#mail_form dt span { background:#BC272D; color:#ffffff; margin:0 0 0 5px; padding:3px 7px; font-size:11px; font-weight:bold; border-radius:3px; }
#mail_form dl dd { margin-left:30%; min-height:95px; border-top: 1px dotted #cccccc; padding:10px 0; }
#mail_form dl dd span { font-size:12px; color:#666666; }

.cheak dl dt { width:33%; padding:10px!important; }
.cheak dl dd { margin-left:33%; padding:10px!important; }

@media screen and (max-width:768px){
#mail_form dl dt { float:none; width:100%; padding-bottom:0; min-height:auto; }
#mail_form dl dd { margin:0; border:none; min-height:auto; }
}