@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */

/* ---------------------------------------------------
Header
------------------------------------------------------ */
#header #hd_reserve{ top: 605px;}
@media screen and (max-width: 768px) {
	#header #hd_bestrate{ top: 350px; display: block;}
	#header #hd_reserve{ top: 7px;}
}

/* ---------------------------------------------------
Main image slider
------------------------------------------------------ */
#main_img { padding: 0;}
#main_img .flexslider{ width: 1800px; top: 0; left: 50%; margin-left: -900px;}
#main_img .flexslider .slides{ overflow: hidden;}
#main_img .flexslider .slides > li{ width: 1800px; height: 705px;}
#main_img .flexslider .slides img{ width: 1800px; height: 705px; max-width: 1800px;}
#main_img .flexslider p{ position: absolute; top: 140px; left: 50%; margin: 0 0 0 -55px; z-index: 20;}

@media screen and (max-width: 768px) {
	#main_img .flexslider{ width: 900px; top: 0; left: 50%; margin-left: -450px;}
	#main_img .flexslider .slides > li{ width: 900px; height: 352px;}
	#main_img .flexslider .slides img{ width: 900px; height: 352px; max-width: 900px;}
	#main_img .flexslider p{ position: absolute; top: 70px; left: 50%; margin: 0 0 0 -27px; z-index: 20;}
	#main_img .flexslider p img{ width: 56px; height: auto;}
}

/* ---------------------------------------------------
Section 1
------------------------------------------------------ */
#sec1{ background: url(../img/line.gif) repeat-x center bottom; padding: 0 0 4px;}
#sec1 .sec1_inner{ background: url(../../img/sec1_bg_pc.jpg) no-repeat center bottom; background-size: cover; min-height: 635px; position: relative;}
#sec1 h2{ padding: 60px 0 34px; text-align: center;}
#sec1 .box_txt{ position: absolute; top: 188px; right: 50%; margin-right: -550px; width: 355px; }
#sec1 p{ -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; float: right; display: block; line-height: 2.3;}
#sec1 p.copy{ font-size: 24px; color: #907121; line-height: 1.45; margin: 0 0 0 25px;}
#sec1 .img{ position: absolute; top: 188px; left: 50%; margin-left: -550px;}
#sec1>div>p{writing-mode: horizontal-tb;float:none;text-align: center;margin:335px auto;font-size:20px;background-color:#F6EAD2; width: 1000px;color: #c53910;border:solid 1px #c53910;font-family: "Yu Mincho", "YuMincho", "ヒラギノ明朝 ProN W3", "HiraMinProN-W3", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}

@media screen and (max-width: 768px) {
	#sec1{ background: url(../img/line.gif) repeat-x center bottom; padding: 0 0 4px;}
	#sec1 .sec1_inner{ background: url(../../img/sec1_bg_sp.jpg) no-repeat center bottom #e9dcbf; background-size: 100%; min-height: inherit;}
	#sec1 h2{ padding: 30px 0 15px; width: 270px; margin: 0 auto;}
	#sec1 .box_txt{ position: relative; top: inherit; right: inherit; margin: 0 auto; width: 92%; }
	#sec1 p{ -webkit-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; float: none; display: block; line-height: 1.7;}
	#sec1 p.copy{ font-size: 20px; color: #907121; line-height: 1.45; margin: 0 0 10px 0;}
	#sec1 p br{ display: none;}
	#sec1 .img{ position: relative; top: inherit; left: inherit; margin: 0; padding: 10px 4% 28px; width: 92%;}
	#sec1>div>p{margin: 0 auto;width: auto; margin-bottom: 20px;width: 92%;}
}

/* ---------------------------------------------------
Section 2
------------------------------------------------------ */
#sec2{ background: url(../img/bg3.jpg); overflow: hidden; position: relative; padding: 0 0 20px; z-index: 1;}
#sec2:before,
#sec2:after{ content: ''; position: absolute; z-index: 2;}
#sec2:before{ top: 0; right: 0; background: url(../../img/sec2_bg1.png) no-repeat; width: 600px; height: 350px;}
#sec2:after{ bottom: 0; left: 0; background: url(../../img/sec2_bg2.png) no-repeat; width: 600px; height: 250px;}
#sec2 h2{ text-align: center; padding: 0 0 25px;}
#sec2 #recommend{ overflow: hidden; width: 1044px; margin: 0 auto; z-index: 3; position: relative;}
#sec2 #recommend .PlanView{ float: left; width: 225px; padding: 0 18px 36px;}
#sec2 #recommend .main_picture img{ width: 100%; height: auto;}
#sec2 #recommend .explan .plan{ padding: 15px 0; color: #fff;}
#sec2 #recommend .explan .comment{ display: none;}
#sec2 #recommend .pblist ul li a{ display: block; width: 135px; height: 28px; margin: 0 auto; background: url(../../img/sec2_btn.png) no-repeat 0 0; background-size: 135px; text-indent: -9999px;}
#sec2 #recommend .pblist ul li a:hover{ opacity: 0.75;}

@media screen and (max-width: 768px) {
	#sec2:before,
	#sec2:after{ display: none;}
	#sec2 h2{ padding: 0 0 25px; width: 160px; margin: 0 auto;}
	#sec2 #recommend{ width: 96%;}
	#sec2 #recommend .PlanView{ width: 23%; padding: 0 1% 2%;}
	#sec2 #recommend .pblist ul li a{ width: 120px; height: 24px; background: url(../../img/sec2_btn.png) no-repeat 0 0; background-size: 120px;}
}
@media screen and (max-width: 600px) {
	#sec2 #recommend .PlanView{ width: 46%; padding: 0 2% 4%;}
}

/* ---------------------------------------------------
	489ban ver.5 おすすめプラン
------------------------------------------------------ */
#sec2 #recommend_489ban{ overflow: hidden; width: 1044px; margin: 0 auto; z-index: 3; position: relative;}
#sec2 #recommend_489ban .PlanView{ float: left; width: 225px; padding: 0 18px 36px;}
#sec2 #recommend_489ban .main_picture img{ width: 100%; height: auto;}
#sec2 #recommend_489ban .explan .plan{ padding: 15px 0; color: #fff;}
#sec2 #recommend_489ban .explan .plan a{ color: #fff;}
#sec2 #recommend_489ban .explan .comment{ display: none;}
#sec2 #recommend_489ban .planlist ul li a{ display: block; width: 135px; height: 28px; margin: 0 auto; background: url(../../img/sec2_btn.png) no-repeat 0 0; background-size: 135px; text-indent: -9999px;}
#sec2 #recommend_489ban .planlist ul li a:hover{ opacity: 0.75;}

@media screen and (max-width: 768px) {
	#sec2 #recommend_489ban{ width: 96%;}
	#sec2 #recommend_489ban .PlanView{ width: 23%; padding: 0 1% 2%;}
	#sec2 #recommend_489ban .planlist ul li a{ width: 120px; height: 24px; background: url(../../img/sec2_btn.png) no-repeat 0 0; background-size: 120px;}
}
@media screen and (max-width: 600px) {
	#sec2 #recommend_489ban .PlanView{ width: 46%; padding: 0 2% 4%;}
}


/* ---------------------------------------------------
Section 3
------------------------------------------------------ */
#sec3{ background: url(../img/line.gif) repeat-x center top; padding: 4px 0 0;}
#sec3 h2{ text-align: center; padding: 60px 0 30px;}
#sec3 > section{ width: 1100px; margin: 0 auto 55px; position: relative; overflow: hidden;}
#sec3 h3{ position: absolute; top: 105px; left: 50%; margin: 0 0 0 -51px; z-index: 99;}
#sec3 > section > div:not(.flexslider){ float: left; width: 737px; height: 82px; background: #fff; box-sizing: border-box; padding: 20px 200px 20px 35px; position: relative}
#sec3 .flex_slide .flex-control-nav { bottom: 0; z-index: 10; }
#sec3 p{ font-size: 13px;}
#sec3 p.copy{ float: left; width: 363px; height: 82px; text-align: center; font-size: 21px; color: #fff; letter-spacing: 0.08em; box-sizing: border-box; padding: 15px 0 0;}
#sec3 p.copy:first-letter{ font-size: 32px; letter-spacing: 0.08em;}
#sec3 .btn{ position: absolute; top: 23px; right: 35px; width: 156px; height: 32px; padding: 0 0 0 15px; background: url(../img/ico_arrow4.png) #c5390f no-repeat 30px 13px; background-size: 4px; text-align: center; color: #fff; border-radius: 5px; line-height: 32px; font-size: 12px; box-sizing: border-box;}
#sec3_1 p.copy{ background: url(../../img/sec3_bg1.jpg) no-repeat 0 0;}
#sec3_2 p.copy{ background: url(../../img/sec3_bg2.jpg) no-repeat 0 0;}
#sec3_3 p.copy{ background: url(../../img/sec3_bg3.jpg) no-repeat 0 0;}

@media screen and (max-width: 768px) {
	#sec3 h2{ padding: 30px 0 15px; width: 100%; margin: 0; background: url(../img/bg1.jpg); text-align: center;}
	#sec3 h2 img{ width: 204px; height: auto;}
	#sec3 > section{ width: 92%; margin: 0; padding: 0 4% 25px; background: url(../img/bg1.jpg); overflow: hidden;}
	#sec3 h3{ position: absolute; top: 13%; left: 50%; width: 77px; height: 111px; margin: 0 0 0 -38px;}
	#sec3 > section > div:not(.flexslider){ float: none; width: 100%; height: auto; padding: 20px; }
	#sec3 p{ font-size: 14px;}
	#sec3 p.copy{ float: none; width: 100%; height: auto; text-align: center; font-size: 18px; padding: 5px 0; }
	#sec3 p.copy:first-letter{ font-size: 30px;}
	#sec3 .btn{ right: 25px;}
	#sec3_1 p.copy{ background-size: cover;}
	#sec3_2 p.copy{ background-size: cover;}
	#sec3_3 p.copy{ background-size: cover;}
}
@media screen and (max-width: 600px) {
	#sec3 > section{ width: 100%; padding: 0 0 25px;}
	#sec3 h3{ position: absolute; top: 35px; left: 50%; width: 77px; height: 111px; margin: 0 0 0 -38px;}
	#sec3 .flex_slide { width: 100%; height: 178.5px;}
	#sec3 .flex_slide .slides { height: 178.5px;}
	#sec3 .flex_slide li { height: 100%; overflow: hidden; }
	#sec3 .flex_slide li img { width: 100%; height: 100%; object-fit: cover; }
	#sec3 p br{ display: none;}
	#sec3 p.copy{ font-size: 16px; }
	#sec3 p.copy:first-letter{ font-size: 28px;}
	#sec3 .btn{ position: relative; top: inherit; right: inherit; width: 120px; height: 25px; margin: 10px auto 0; padding: 0 0 0 15px; background: url(../img/ico_arrow4.png) #c5390f no-repeat 15px 9px; background-size: 4px; text-align: center; color: #fff; border-radius: 5px; line-height: 25px; font-size: 12px; box-sizing: border-box; display: block;}
}

/* ---------------------------------------------------
Section 4
------------------------------------------------------ */
#sec4{ background: url(../img/line.gif) repeat-x center top; padding: 4px 0 0;}
#sec4 .sec4_inner{ background: url(../img/bg4.jpg); overflow: hidden; position: relative; padding: 0 0 20px; z-index: 1; min-height: 640px;}
#sec4 .sec4_inner:before{ content: ''; position: absolute; top: 0; left: 50%; margin-left: -900px; background: url(../../img/sec4_bg.png) no-repeat; width: 1800px; height: 630px; z-index: 2;}
#sec4 h2{ text-align: center;}
/*#sec4 .box_btns{ position: absolute; top: 133px; left: 50%; width: 620px; margin: 0 0 0 -550px; z-index: 3;}*/
#sec4 .box_btns .btns1{ padding: 0 0 25px; overflow: hidden;}
#sec4 .box_btns .btns1 li{ float: left;}
#sec4 .box_btns .btns1 li:nth-child(2){ float: right;}
#sec4 .box_btns .btns2{ float: left;}
#sec4 .box_btns .btns3{ float: right;}
#sec4 .box_btns .btns2 li,
#sec4 .box_btns .btns3 li{ margin: 0 0 10px;}
/*#sec4 .box_blog{ position: absolute; top: 133px; right: 50%; width: 435px; margin: 0 -550px 0 0; z-index: 3; background: rgba(255,255,255,0.50)}*/
#sec4 .box_blog h3{ height: 60px; line-height: 60px; padding: 0 0 0 25px; font-size: 24px; position: relative; color: #4c370a;}
#sec4 .box_blog h3:before{ content: ''; display: block; background: #9b7621; width: 16px; height: 4px; position: absolute; top: 28px; left: 0px;}
#sec4 .box_blog .btn{ position: absolute; top: 16px; right: 15px; border: dotted 1px #9b7621; background: #fff url(../img/ico_arrow1.png) no-repeat 15px 10px; background-size: 5px; border-radius: 4px; padding: 5px 15px 5px 25px; text-align: center; font-size: 13px; color: #89630b;}
#sec4 .box_blog > div{ margin: 0 15px 15px 15px; background: #fff;}
#sec4 .box_blog > div ul{ padding: 10px 30px;}
#sec4 .box_blog > div ul li{ overflow: hidden; padding: 10px 0; border-bottom: solid 1px #cdc5b8; font-size: 14px;}
#sec4 .box_blog > div ul li:last-child{ border-bottom: none;}
#sec4 .box_blog > div ul li a{ display: inline-block; color: #a17713; text-decoration: underline; margin: 0 5px 0 0;}
#sec4 .box_blog > div ul li a:hover{ text-decoration: none;}
#sec4 .box_blog > div ul li .date{ display: inline-block;}
#sec4 .box_blog > div ul li .post{ display: none;}

#sec4 .wrap{ width: 1100px; margin: 30px auto 0;}
#sec4 .wrap .box1{ width: 620px; float: left; position: relative; z-index: 3;}
#sec4 .wrap .box1 .box_btns{ position: relative; top: 0; left: 0; width: 620px; margin: 0;}
#sec4 .wrap .box2{ width: 435px; float: right; position: relative; z-index: 3;}
#sec4 .wrap .box2 .box_blog{ position: relative; top: 0; left: 0; width: 435px; margin: 0; overflow: hidden; background: rgba(255,255,255,0.50)}
#sec4 .wrap .box2 p:last-child { margin-bottom: 35px;}
#sec4 .bnr_tripai{ margin: 10px 0 0;}
#sec4 .bnr_tripai img{ width: 100%;}

@media screen and (max-width: 768px) {
	#sec4{ padding: 4px 0 0;}
	#sec4 .sec4_inner{ padding: 0 0 20px; min-height: inherit;}
	#sec4 .sec4_inner:before{ display: none;}
	#sec4 h2{ width: 88px; margin: 0 auto 20px;}
/*	#sec4 .box_btns{ position: relative; top: inherit; left: inherit; width: 92%; margin: 0 auto 15px; overflow: hidden;}*/
	#sec4 .box_btns .btns1{ padding: 0 0 10px;}
	#sec4 .box_btns .btns1 li{ width: 67.7%}
	#sec4 .box_btns .btns1 li:nth-child(2){ width: 31.2%;}
	#sec4 .box_btns .btns1 li img{ width: 100%;}
	#sec4 .box_btns .btns2{ width: 48.8%;}
	#sec4 .box_btns .btns2 li img{ width: 100%;}
	#sec4 .box_btns .btns3{ width: 48.5%}
	#sec4 .box_btns .btns2 li,
	#sec4 .box_btns .btns3 li{ margin: 0 0 5px;}
	#sec4 .box_btns .btns3 li img{ width: 100%;}
/*	#sec4 .box_blog{ position: relative; top: inherit; right: inherit; width: 92%; margin: 0 auto; clear: both;}*/
	#sec4 .box_blog h3{ height: 50px; line-height: 50px; padding: 0 0 0 25px; font-size: 18px;}
	#sec4 .box_blog h3:before{ top: 22px;}
	#sec4 .box_blog .btn{ top: 8px; right: 10px;}
	#sec4 .box_blog > div{ margin: 0 10px 10px 10px;}

	#sec4 .wrap{ width: 92%; margin: 0 auto 0;}
	#sec4 .wrap .box1{ width: 100%; float: none; position: relative; z-index: 3; margin: 0 0 15px;}
	#sec4 .wrap .box1 .box_btns{ position: relative; top: 0; left: 0; width: 100%; margin: 0;}
	#sec4 .wrap .box2{ width: 100%; position: relative; z-index: 3;}
	#sec4 .wrap .box2 .box_blog{ position: relative; top: 0; left: 0; width: 100%; margin: 0;}
	#sec4 .wrap .box2 p:last-child{margin-bottom: auto;}

}