@charset "utf-8";
/* ------------------------------------------------------------  common*/
#bb { width: 100%; position: fixed; top: 0; background: #fff; height: 71px; z-index: 1; padding: 0 0 0 20px; }
#bb a { display: inline-block; *display: inline; *zoom: 1; padding: 12px 0 0; }

#bread { padding: 20px 0; font-size: 14px;}
#bread ol li { list-style-type: none; display: inline-block; *display: inline; *zoom: 1; text-align: center; background: url(/bb-commons/images/common/bread.gif) left center no-repeat; padding: 5px 0 5px 30px; margin: 0 3px 0 0;}
#bread ol li:first-child { padding: 0 5px 0 0; background: none;}
#bread ol li a.top span { text-align: center;}

h3.h3 { text-align: center; }
h3.h3 span { display: block; font-family: "Cormorant", serif; font-size: 52px; padding: 0 0 20px;}

/* ------------------------------------------------------------  */

#fv { background: url(../images/online/fv.jpg) center center no-repeat; background-size: cover; text-align: center; margin: 71px 0 0;}
#fv h2 { color: #fff; font-size: 52px; font-family: "Garamond" , "Times New Roman" , " 游明朝 " , "Yu Mincho" , " 游明朝体 " , "YuMincho" , " ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS 明朝 E" , "MS P明朝 " , "MS PMincho" , serif; padding: 165px 0; line-height: 170%;}
#fv h2 span { display: block; font-size: 28px;}

#intro { padding: 70px 0 165px; text-align: center;}
#intro h3 { font-size: 42px; font-family: "Garamond" , "Times New Roman" , " 游明朝 " , "Yu Mincho" , " 游明朝体 " , "YuMincho" , " ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS 明朝 E" , "MS P明朝 " , "MS PMincho" , serif; padding: 0 0 50px;}
#intro p { line-height: 32px;}

#online { position: relative;}
#online::before { content: ""; right: 0; width: 80%; height: 515px; background: #eeeeee; position: absolute; z-index: -1; top: -60px;}
#online img.photo { float: left;}
#online .box { float: right; width: 560px;}
#online .box h4 { font-size: 30px; padding: 0 0 30px; line-height: 48px; font-weight: 500;}
#online .box ul li { background: #fff; padding: 15px 20px 15px 15px; font-size: 19px; margin: 0 0 2px;}
#online .box ul li img { padding: 0 23px 0 0;}
#online .box a { width: 390px; height: 70px; line-height: 70px; background: #a70006; display: inline-block; *display: inline; *zoom: 1; color: #fff; font-size: 19px; margin: 40px 0 0; text-align: center;}

#flow { padding: 160px 0 0;}
#flow h3.h3 { padding: 0 0 60px;}
#flow ul li { margin: 0 0 80px;}
#flow ul li .photo { float: left; width: 505px;}
#flow ul li .photo img.number { padding: 0 25px 0 0;}
#flow ul li .box { float: right; width: 630px; padding: 40px 0 0;}
#flow ul li .box h4 { font-size: 26px; padding: 0 0 30px; font-weight: 500;}
#flow ul li .box p { font-size: 15px; line-height: 32px;}
#flow ul li .box p span { display: block; color: #dc040c; font-size: 15px; padding: 10px 0 0;}

#reserve { width: 900px; box-sizing: border-box; border: 10px solid #eeeeee; text-align: center; margin: 150px auto 150px; padding: 70px 0 50px;}
#reserve h3.h3 { padding: 0 0 30px;}
#reserve h3.h3 span { padding: 0 0 10px;}
#reserve p { font-size: 15px; padding: 0 0 45px; line-height: 25px;}
#reserve a { width: 450px; height: 80px; line-height: 80px; color: #fff; font-size: 21px; background: #a70006; display: inline-block; *display: inline; *zoom: 1;}


/* ------------------------------------------------------------ mobile */
@media only screen and (max-width:640px){
#bb { display: none; }
/* ------------------------------------------------------------  common*/
#bread { padding: 15px 0; font-size: 12px;}
#bread ol li { list-style-type: none; display: inline-block; *display: inline; *zoom: 1; text-align: center; background: url(/bb-commons/images/common/bread.gif) left center no-repeat; padding: 0 0 0 25px; margin: 0 3px 0 0;}
#bread ol li:first-child { padding: 0; background: none;}
#bread ol li a.top span { text-align: center;} 

h3.h3 { text-align: center; font-size: 14px;}
h3.h3 span { display: block; font-family: "Cormorant", serif; font-size: 40px; padding: 0 0 10px;}

/* ------------------------------------------------------------  */

#fv { background: url(../images/online/fv.jpg) center center no-repeat; background-size: cover; text-align: center; margin: 60px 0 0;}
#fv h2 { color: #fff; font-size: 30px; padding: 80px 0; line-height: 170%;}
#fv h2 span { display: block; font-size: 18px;}

#intro { padding: 35px 4% 50px; text-align: center;}
#intro h3 { font-size: 22px; padding: 0 0 25px; line-height: 170%;}
#intro p { line-height: 28px; font-size: 14px; text-align: left;}

#online { position: inherit; background: #eeeeee; padding: 30px 0;}
#online::before { content: ""; right: 0; width: 0; height: 0; position: absolute; z-index: -1; top: -60px; display: none;}
#online img.photo { float: none; width: 100%; height: auto;}
#online .box { float: none; width: 100%; text-align: center; padding: 20px 0 0;}
#online .box h4 { font-size: 18px; padding: 0 0 15px; line-height: 30px; text-align: left;}
#online .box ul li { font-size: 16px; padding: 15px 10px 15px 50px; margin: 0 0 2px; text-align: left; background: url(../images/online/check.gif) 15px 20px no-repeat #fff; background-size: 20px auto; line-height: 170%;}
#online .box ul li img { padding: 0 10px 0 0;}
#online .box a { width: 280px; height: 60px; line-height: 60px; font-size: 16px; margin: 20px 0 0;}

#flow { padding: 60px 0 0;}
#flow h3.h3 { padding: 0 0 40px;}
#flow ul li { margin: 0 0 40px; text-align: center;}
#flow ul li .photo { float: none; width: 100%;}
#flow ul li .photo img.number { padding: 0 0 15px; display: block; width: 80px; height: auto; margin: 0 auto;}
#flow ul li .photo img.img { width: 100%; height: auto;}
#flow ul li .box { float: none; width: 100%; padding: 20px 0 0;}
#flow ul li .box h4 { font-size: 18px; font-weight: bold; padding: 0 0 15px;}
#flow ul li .box p { font-size: 14px; line-height: 28px; text-align: left;}
#flow ul li .box p span { font-size: 12px; padding: 5px 0 0;}

#reserve { width: 90%; box-sizing: border-box; border: 5px solid #eeeeee; text-align: center; margin: 50px auto; padding: 35px 0 25px;}
#reserve h3.h3 { padding: 0 0 15px;}
#reserve h3.h3 span { padding: 0 0 10px;}
#reserve p { font-size: 14px; padding: 0 0 20px; line-height: 25px;}
#reserve a { width: 240px; height: 50px; line-height: 50px; color: #fff; font-size: 16px;}



}