@charset "utf-8";
/* CSS Document */
body{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;font-size: 62.5%;font-weight: 500;
margin : 0;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
.pc { display: none !important; }
.sp { display: block !important; }
}
/* PCとSPの改行切り替え */
@media screen and (min-width: 650px){	
  .br-pc { display:block; }
  .br-sp { display:none; }
}
@media screen and (max-width: 650px){	
  .br-pc { display:none; }
  .br-sp { display:block; }
}

/* 画像の回り込み */
.image_area {
width: 240px;
display: block;
vertical-align: bottom;
}
@media only screen and (min-width: 737px){
.image_right {
float: right;
margin: 0 0 21px 25px;
}
.image_left {
float: left;
margin: 0 25px 30px 0;
}
}
@media only screen and (max-width: 736px){
.image_right {
float: none;
margin: 25px auto;
}
.image_left {
float: none;
margin: 25px auto;
}
}

.center{
	text-align : center;
}
.right{
	text-align : right;
}
.space_m{
	height : 20px;
}
.space_l{
	height : 40px;
}
.font80{
	font-size : 80%;
}
.font110{
	font-size : 110%;
}
.font130{
	font-size : 130%;
}
.font_black{
	color : #000000;
}
.font_red{
	color : #ba2039;
}
.font_blue{
	color : #0080e4;
}
.font_green{
	color : #799c18;
}
.font_white{
	color : #ffffff;
}

/* 見出し関連 */
h1 {text-align: left;font-weight: bold;color: #000000;line-height: 1.4em;width: auto;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif;}
@media screen and (min-width: 960px) { h1 {font-size: 6vh;margin-bottom: 0px;margin-top : 10px;} }
@media screen and (max-width: 959px) { h1 {font-size: 22px;line-height : 30px;} }
h1 span { color: #ba2039; line-height : 36px; }

h2 {text-align: center;font-weight: bold;color: #537cb8;line-height: 1.28em;}
@media screen and (min-width: 960px) { h2 {font-size: 5vh;margin-bottom: 0px;} }
@media screen and (max-width: 959px) { h2 {font-size: 1.2rem;margin-bottom: 10px;} }
h2 span { color: #274c94; }


/* お客様の声
---------------------------------------------*/
#review { background: url(https://d-o-p.net/image/voice_bg.jpg) no-repeat center center; }
@media screen and (min-width: 960px) { #review { background-size: cover;padding-bottom: 120px;margin-top: -90px;} }
@media screen and (max-width: 959px) { #review { background-size: auto;padding-bottom: 60px;margin-top: -30px;} 
#review { background: url(https://d-o-p.net/image/voice_bg_sp.jpg) no-repeat center top; background-color : #161519;}}
#review ul { margin: 0 auto; }
@media screen and (min-width: 960px) { #review ul { width: 66%;overflow: hidden; *zoom: 1;padding: 0;} }
@media screen and (max-width: 959px) { #review ul { margin-left : 20px; width: 90%; } }

#review ul li { background: rgba(255, 255, 255, 0.7); text-align: justify; line-height: 1.8em; color: #122642; list-style : none;}
@media screen and (min-width: 960px) { #review ul li { width: auto;padding: 50px;font-size: 1.2rem;} }
@media screen and (max-width: 959px) { #review ul li { width: auto; padding: 10px; font-size: 1.0rem; } }
#review ul li span { font-weight: bold; display: block; }
@media screen and (min-width: 960px) { #review ul li span { font-size: 1.6rem; margin-bottom: 20px; } }
@media screen and (max-width: 959px) { #review ul li span { font-size: 1.2rem; margin-bottom: 10px; } }
@media screen and (min-width: 960px) { #review ul li:first-child { margin-top: 80px;margin-bottom: 30px;float: left;} }
@media screen and (max-width: 959px) { #review ul li:first-child { margin-top: 25px;margin-bottom: 15px;} }
@media screen and (min-width: 960px) { #review ul li:last-child { float: right; } }

/* 流れ
---------------------------------------------*/
#flow { background: #dbf7fb; -moz-transform: skew(0deg, 5deg); -ms-transform: skew(0deg, 5deg); -webkit-transform: skew(0deg, 5deg); transform: skew(0deg, 5deg); }
@media screen and (min-width: 960px) { #flow { margin-top: 0px;} }
@media screen and (max-width: 959px) { #flow { margin-top: -15px;} }
#flow .inner { margin: 0 auto; -moz-transform: skew(0deg, -5deg); -ms-transform: skew(0deg, -5deg); -webkit-transform: skew(0deg, -5deg); transform: skew(0deg, -5deg); position: relative; }
@media screen and (min-width: 960px) { #flow .inner { width: 960px; } }
@media screen and (max-width: 959px) { #flow .inner { width: 90%; } }
#flow .inner::before { font-family: 'Oswald', sans-serif; position: absolute; content: "Flow"; color: rgba(83, 124, 184, 0.2); left: 0; font-style: italic; font-weight: bold; z-index: -1; }
@media screen and (min-width: 960px) { #flow .inner::before { font-size: 12rem; top: -70px; } }
@media screen and (max-width: 959px) { #flow .inner::before { font-size: 8rem; top: -30px; } }
#flow .inner h2 { color: #274c94; font-size : 2.8rem; }
@media screen and (min-width: 960px) { #flow .inner h2 { margin-bottom: 90px; } }
@media screen and (max-width: 959px) { #flow .inner h2 { margin-bottom: 30px; } }
#flow .inner ol { counter-reset: list; text-align: left; }
#flow .inner ol li { position: relative; }
@media screen and (min-width: 960px) { #flow .inner ol li { margin-top: 50px; padding-left: 210px; } }
@media screen and (max-width: 959px) { #flow .inner ol li { margin-top: 20px; } }
#flow .inner ol li::before { color: #fff; background: none; width: inherit; height: inherit; counter-increment: list; content: "Step." counter(list); z-index: 2; position: absolute; font-family: 'Oswald', sans-serif; }
@media screen and (min-width: 960px) { #flow .inner ol li::before { font-size: 3rem; left: 20px; top: 38px; } }
@media screen and (max-width: 959px) { #flow .inner ol li::before { font-size: 1.6rem; left: 10px; top: 10px; } }
#flow .inner ol li::after { content: ""; position: absolute; border-style: solid; border-color: transparent transparent transparent #fc0; top: 0; left: 0; }
@media screen and (min-width: 960px) { #flow .inner ol li::after { border-width: 50px 0 50px 180px; } }
@media screen and (max-width: 959px) { #flow .inner ol li::after { border-width: 20px 0 20px 100px; } }
@media screen and (min-width: 960px) { #flow .inner ol li dl { padding-top: 38px; } }
@media screen and (max-width: 959px) { #flow .inner ol li dl { padding-top: 10px; } }
#flow .inner ol li dl dt { color: #fc0; font-weight: bold; margin-top: 0; }
@media screen and (min-width: 960px) { #flow .inner ol li dl dt { font-size: 4rem; margin-bottom: 30px; } }
@media screen and (max-width: 959px) { #flow .inner ol li dl dt { text-align: left; font-size: 1.8rem; line-height: 1.2em; margin-bottom: 15px; padding-left: 100px; } }
#flow .inner ol li dl dd { color: #122642; line-height: 1.8em; text-align: justify; }
@media screen and (min-width: 960px) { #flow .inner ol li dl dd { font-size: 1.8rem; } }
@media screen and (max-width: 959px) { #flow .inner ol li dl dd { font-size: 1.2rem; } }

/* よくあるご質問
---------------------------------------------*/
@media screen and (min-width: 960px) { #faq .inner { width: 100%; margin: 0 auto;} }
@media screen and (max-width: 959px) { #faq .inner { width: 90%; margin: 0 auto; } }
#faq .inner h2 { color: #274c94; font-size : 2.8rem; }
#faq .inner .box { width: 100%; margin: 0 auto; padding: 30px 0; border-bottom: 1px dashed #252525; max-width: 960px; }
@media screen and (min-width: 960px) { #faq .inner .box p { text-align:left; font-size:1.5rem; line-height: 2.0rem; font-weight: 600; } }
@media screen and (max-width: 959px) { #faq .inner .box p {text-align:left;font-size: 1.2rem;line-height: 2.5rem;font-weight: 600;} }
#faq .inner .box p:nth-child(odd) { color: #527cb8; }
#faq .inner .box p:last-child { color: #f26504; padding : 5px 0px; }

.chartBox table {
	width : 600px;
	margin : 0 auto;
  border-collapse: collapse;
}
.chartBox table th, .chartBox table td {
  border: solid 1px black;
	padding : 15px;
}
@media screen and (max-width: 959px) {
.chartBox table {
	width : auto;
	margin : 0 auto 30px;
  border-collapse: collapse;
	font-size : 16px;
}
.chartBox table th, .chartBox table td {
  border: solid 1px black;
	padding : 8px;
}
}
div#container {
    width: 100%;
    background: #ffffff;
    min-height: 1000px;
}
/*スマホフッターボタン（電話・予約）*/
@media screen and (min-width:641px){
	.footer_tel{
		display: none;
}	
}
@media screen and (max-width:640px){
.footer_tel {
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
	background-color: #ffffff;
    /*background-color : #f0f0f0;*/
    padding : 4px 0px 15px 0px;
}
	.footer_tel li{
		float : left;
		width : 33.3%;
		text-align : center;
		list-style : none;
	}
}
#policy_top{
	width : 100%;
	background-color : #f0f0f0;
	padding : 10px 0px;
}
.policy h2{
	display:none!important;
}
#policy_wrapper{
	width : 100%;
	background-color : #0a65ba;
	padding : 30px 0px;
}
}
#policy_wrapper .inner { text-align: left; line-height: 1.6em; }
@media screen and (min-width: 960px) { #policy_wrapper .inner { width : 940px; margin : 0 auto; background-color : #ffffff; padding : 30px; font-size: 17px; line-height : 30px; } }
@media screen and (max-width: 959px) { #policy_wrapper .inner { width : 92%; margin : 0 auto; background-color : #ffffff; padding : 8px; font-size: 1.4rem; } }
#policy_wrapper .inner .subtitle{
	font-size : 22px;
	font-weight : 600;
	line-height : 38px;
	padding : 20px 0px;
}
/*余白と文字装飾は省略*/
.font120{
	font-size : 130%;
	line-height : 190%;
}
.font_yellow{
	color : #ffff00;
}