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

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

------------------------------------------------------ */
#home main section:not(#lead) { margin:0 auto; text-align: left; }
#home main h2 {font-size:36px; padding:30px 0; letter-spacing: 0.1em;}
#home main h2 span:not([class]){font-size:45px;}
#home main h2 span.en { font-size:16px; display: block; letter-spacing: 0.05em; }
#home main h2 span.en:first-letter{ font-size:22px;}

@media screen and (max-width: 600px) {
        #home main h2 {font-size:24px;}
        #home main h2 span:not([class]){font-size:36px;}
        #home main h2 span.en { font-size:16px; display: block; letter-spacing: 0.05em; }
        #home main h2 span.en:first-letter{ font-size:22px;}
}
/* ---------------------------------------------------
Main_img
------------------------------------------------------ */
#home #main_img { padding:0; height:auto; position: relative;}

#home .flexslider { padding:0 40px; position: relative; z-index: -10;}
#home .flexslider p { color:#fff; display: block; font-size:40px; line-height: 150%; letter-spacing: 0.15em;
        text-align: center; z-index: 1; width:100%; position:absolute; top:30vh;
        text-shadow: #666 1px 1px 3px, #333 -1px 1px 3px, #666 1px -1px 3px, #333 -1px -1px 3px; }
#home .flexslider p span { display: block; font-size:16px; letter-spacing: 0.3em; }
#home .slides {margin: 0; width: 100%; position: relative; z-index: -2;}
#home .flexslider li { height:100vh; }
#home .flexslider li img { height: 100%; display: none;}
#home #slide1{background: url(../../img/sl01.jpg) center; background-size: cover;}
#home #slide2{background: url(../../img/sl02.jpg) center; background-size: cover;}
#home #slide3{background: url(../../img/sl03.jpg) center; background-size: cover;}
#home #slide4{background: url(../../img/sl04.jpg) center; background-size: cover;}
#home #slide5{background: url(../../img/sl05.jpg) center; background-size: cover;}
#home #slide6{background: url(../../img/sl06.jpg) center; background-size: cover;}
#home #slide7{background: url(../../img/sl07.jpg) center; background-size: cover;}


@media screen and (max-width: 1100px) {
        #home .flexslider li { height:600px; }
        #home .flexslider p { top:15vh;}
}
@media screen and (max-width: 800px) {
        #home .flexslider { padding:0 0;}
}
@media screen and (max-width: 600px) {
        #home .flexslider p { display: none; }
        #home .flexslider li { height:auto; }
        #home .flexslider li img { height: auto; display:block;}
}



/* ---------------------------------------------------
Lead
------------------------------------------------------ */
#home #b_best { display: block; height:270px; width: 240px;
        position: absolute; left:50%; top:-190px; margin-left: -500px; z-index: 10; }
#home #lead { background:url(../img/nav_bg.jpg); }
#home #lead dl { display:block; height:365px; width:730px; padding: 60px 0 30px 0;}
#home #lead dl::before { background:url(../../img/lead_bg.png) no-repeat; background-size: 130px auto; height:110px; width:145px; top:0; right:-130px; }
#home #lead dt { float: right;}
#home #lead dd { padding: 0 70px 0 0; float: left; -webkit-writing-mode:vertical-rl; -ms-writing-mode:tb-rl; writing-mode:vertical-rl; text-orientation: upright;}
#home #lead .ccpt { font-size:40px; }
#home #lead .ccpt span:not(:nth-of-type(1))::before { content: "\A" ; white-space: pre ;}
#home #lead dl p { font-size:15px; line-height: 3; letter-spacing: 1px;}


@media screen and (max-width: 1100px) {
        #home #lead dl { padding-right:0;}
        #home #lead dd { padding: 0;}
        #home #lead dl::before { background-size: 100px auto; right:-3%; z-index: -1;}
        #home #b_best { left:5%; margin-left:0;}
}
@media screen and (max-width: 800px) {
        #home #lead dl { height:auto; width:90%;}
        #home #lead .ccpt { float: none; font-size:32px; }
        #home #lead .ccpt span:not(:nth-of-type(1))::before { content:none ; white-space: pre; }
        #home #lead dd { float: none; -webkit-writing-mode:horizontal-tb;
           -ms-writing-mode:lr-tb;
           writing-mode:horizontal-tb;}
        #home #lead dl p { line-height: 2; letter-spacing: 1px;}
}
@media screen and (max-width: 600px) {
        #home #lead .ccpt { margin: 0 auto; text-align: left; width:6.5em; }

        #home #lead .ccpt span:not(:nth-of-type(1))::before { content: "\A" ; white-space: pre ;}
        #home #b_best { position: relative; top:0; left:50%; margin-left: -120px; }
}


/* ---------------------------------------------------
Picup
------------------------------------------------------ */
#home .picup { padding:0 40px 30px 40px; box-sizing: border-box; max-width:1600px;}
#home .picup figure img,
#home .picup figure span { float:left; }
#home .picup figure span img{ float:none; width:100%;}
#home .picup figure span img:last-of-type{}
#home .picup div { clear:both; margin:0 auto; padding:40px 0 50px 190px; width:800px; box-sizing: border-box; position: relative;}
#home .picup div::before { content:""; display: block; height:250px; position: absolute; left:0; top:0; width:180px; }
#home .picup div h2 { text-align: left; line-height: 0.5; }
#home .picup div p {  }
#home .picup div a.lbtn { margin:0; text-align: center; }
#home #sec1.picup div::before { background:url(../../img/01_icon.png) no-repeat ;}
#home #sec1.picup div p:nth-of-type(2) { margin-bottom:30px; }
#home #sec1 figure img:nth-of-type(1) { width:34.2%;}
#home #sec1 figure img:nth-of-type(2) { width:29.3%;}
#home #sec1 figure img:nth-of-type(3) { width:36.3%;}
#home #sec2.picup div::before { background:url(../../img/02_icon.png) no-repeat center top ;}
#home #sec2 figure>img:nth-of-type(1) { width:21.5%;}
#home #sec2 figure>img:nth-of-type(2) { width:61.45%;}
#home #sec2 figure span { width:17.05%;}
#home #sec3.picup div::before { background:url(../../img/03_icon.png) no-repeat center 50px ;}
#home #sec3 figure { -webkit-flex-direction:row-reverse;	flex-direction : row-reverse;}
#home #sec3 figure>img:nth-of-type(1) { width:21.5%;}
#home #sec3 figure>img:nth-of-type(2) { width:61.5%;}
#home #sec3 figure span { width:17.00%;}

@media screen and (max-width: 1100px) {
          #home .picup { max-width:100%;}
          #home .picup div { width:90%; }
}
@media screen and (max-width: 800px) {
          #home .picup { padding:0 0 30px 0;}
}
@media screen and (max-width: 600px) {
          #home .picup div { padding:110px 0 50px 0; text-align: center;}
          #home .picup div::before { height:100px; left:50%; margin-left:-90px; }
          #home .picup div h2 { padding:20px 0; text-align: center; margin: 0 auto; width:80%}
          #home .picup div a.lbtn {margin:0 auto; }
          #home .picup div p span.wbr { display: block;}
          #home #sec1.picup div p { margin-bottom:10px; }
          #home #sec1.picup div::before,
          #home #sec2.picup div::before { background-position: center top; background-size: auto 100px;}

          #home #sec1 figure img:nth-of-type(1) { display: none;}
          #home #sec1 figure img:nth-of-type(2) { width:44.7%;}
          #home #sec1 figure img:nth-of-type(3) { width:55.3%;}
          #home #sec2 figure>img:nth-of-type(1) { width:25.88%;}
          #home #sec2 figure>img:nth-of-type(2) { width:74.12%;}
          #home #sec2 figure span {display: none;}
          #home #sec3.picup div::before { background-position: center center; background-size: 100px auto;}
          #home #sec3 figure>img:nth-of-type(1) { width:25.88%;}
          #home #sec3 figure>img:nth-of-type(2) { width:74.12%;}
          #home #sec3 figure span {display: none;}
}

/* ---------------------------------------------------
Info_col
------------------------------------------------------ */
#info_wrap { background:url(../../img/info_bg.jpg); padding:50px 0;
          box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
          -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);
          -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2);}

#info_col { max-width:1100px; padding:0 5%; }
#info_col::after{ content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}
#info_col h2 span:not([class]) span { color:#3c976d; }
#info_col h2 span.en { color:#3c976d; }
#info_col .bnr_col { display: flex; float:left; flex-direction: column; margin:0 auto;　width:-webkit-calc(100% - 330px); width:calc(100% - 330px);}
#info_col .bnr_col li { width:100%;}
#info_col .bnr_col li img { width:100%;}
#info_col .bnr_col li:nth-of-type(2) img { margin-top:2%;}

#benefit { background:#fff; border-radius: 5px; float:left;
          margin-bottom:40px; padding:50px;
          width:-webkit-calc(100% - 400px); width:calc(100% - 400px); box-sizing: border-box; }
#benefit h3 { color:#fff; font-size:30px; position: relative; z-index: 10;}
#benefit h3::before { content:""; display: block; height:40px; position: absolute; left:0; top:0; width:100%;
          background:url(../../img/benefit_bg.png); border-radius: 5px; z-index:-1;}
#benefit h3::after{ content:""; display: block; height:80px; position: absolute; left:0; top:-30px; width:100px;                                                         background:url(../../img/benefit_pic.png) no-repeat; z-index: 1; }
#benefit h3 span { font-size:16px;}
#benefit h3+p { color:#d6533d; font-size:18px; margin:20px 0; letter-spacing: 1px; text-align: center;}
#benefit dt { font-size:24px; font-weight: bold; margin-top:15px; padding: 10px 0;}
#benefit dt span { background:#54a37f; color:#fff; display: block; font-size:16px; float:left;
          margin-right:10px; padding:3px 5px; width:3em; }
#benefit dt small { font-size:13px;}
#benefit .benefit_img { padding:10px; display: block; float:right; margin:-10px 50px 20px 50px; position: relative; z-index: 5; }
#benefit .benefit_img img { position: relative; z-index: 100;}
#benefit .benefit_img::before { content:""; display: block; background:#f2b9af ; border-radius: 50%;
          height:200px; width:200px; position: absolute; z-index: 10; }
#benefit dl+p { color:#d6533d; margin:20px 0; }
.fb-page { clear:both; float:right; width:310px; padding-top: 15px;}

@media screen and (max-width: 1100px) {
          #info_col { max-width:90%; padding:0 5%; }
          #benefit { float:none; width:-webkit-calc(100%); width:calc(100%); }
          .fb-page { clear:both; float:right; width:310px;}
          #info_col .bnr_col { clear:none; float:left; flex-direction: column; margin:0 auto;
              width:-webkit-calc(100% - 330px); width:calc(100% - 330px);}
          #info_col .bnr_col li { margin:0 ; width:100%;}
}
@media screen and (max-width: 800px) {
          #benefit { padding: 2%;}
          .fb-page { width:45%;}
          #info_col .bnr_col { width:-webkit-calc(50%); width:calc(50%);}
}
@media screen and (max-width: 600px) {
          #benefit h3::before { height:60px;}
          #benefit h3::after{ background-size:60px auto;}
          #benefit h3 span { display: block; margin-bottom:-10px; }
          #benefit h3+p { font-size:16px; margin:0;}
          #benefit h3+p span.wbr { display: block; }
          #benefit dt span { float:none; }
          #benefit .benefit_img { float:none; margin: 0 auto; width:220px; }
          .fb-page { float:none; margin:0; width:100%; }
          #info_col .bnr_col { float:none; margin-top:50px; width:-webkit-calc(100%); width:calc(100%); }
}

/* ---------------------------------------------------
Plan_col
------------------------------------------------------ */
#home #plan_col h2 span:not([class]) span { color:#d6533d; }
#home #plan_col h2 span.en { color:#d6533d;}

#home #plan_item { display: flex; flex-wrap: wrap; margin:0 auto; max-width: 1280px; }
/*#home #plan_item+p { margin:10px auto; width:300px;}*/
#home #plan_item+p { margin:40px auto; width:300px;}
#home #plan_item+p a{ color:#fff; display: block; padding:15px 0; text-decoration: none; text-align: center; width:100%; }
#home #plan_item+p a:hover { opacity: 0.8; }

.PlanView { padding:10px 20px; box-sizing: border-box; width:calc(100% / 3); width:-webkit-calc(100% / 3);}
.PlanView:nth-of-type(+3n - 1) { border-left:1px dashed #666; border-right:1px dashed #666; }
.explan { text-align: left; line-height: 150%;}
.plan{ margin:10px 0 15px; }
.comment { font-size:0.85em; }
.main_picture { text-align: center;}
.pb_list_header {display: none; }
.pblist li { margin:20px 20%; text-align: center; width:60%; }
.pblist a { border:1px solid #d6533d; color:#d6533d; display: block; text-decoration: none; }
.pblist a:hover { background:rgba(214,83,61,0.2); }

@media screen and (max-width: 800px) {
.PlanView { width:calc(100% / 2); width:-webkit-calc(100% / 2); }
}
@media screen and (max-width: 600px) {
.PlanView { padding:10px 2%;}
.comment {  display: none;}
.pblist li {margin:20px auto; width:100%;}
}

/* ↓↓↓489ban ver.5↓↓↓ */
#recommend_489ban{ display: flex; flex-wrap: wrap; max-width: 1280px;}
#recommend_489ban .PlanView { padding:10px 20px; box-sizing: border-box; width:calc(100% / 3); width:-webkit-calc(100% / 3); margin: 0 0 30px;}
#recommend_489ban .PlanView:nth-of-type(+3n - 1) { border-left:1px dashed #666; border-right:1px dashed #666; }
#recommend_489ban .explan { text-align: left; line-height: 150%;}
#recommend_489ban .plan{ margin:10px 0 15px; }
#recommend_489ban .comment { font-size:0.85em; }
#recommend_489ban .main_picture { text-align: center;}
#recommend_489ban .pb_list_header {display: none; }
#recommend_489ban .planlist li { margin:20px 20%; text-align: center; width:60%; }
#recommend_489ban .planlist a { border:1px solid #d6533d; color:#d6533d; display: block; text-decoration: none; }
#recommend_489ban .planlist a:hover { background:rgba(214,83,61,0.2); }

@media screen and (max-width: 800px) {
#recommend_489ban .PlanView { width:calc(100% / 2); width:-webkit-calc(100% / 2);  margin: 0 0 15px;}
#recommend_489ban .PlanView:nth-of-type(+3n - 1) { border-left:none; border-right:none; }
#recommend_489ban .PlanView:nth-of-type(2n) { border-left:1px dashed #666; border-right:none; }
}
@media screen and (max-width: 600px) {
#recommend_489ban .PlanView { padding:10px 2% 0;}
#recommend_489ban .comment {  display: none;}
#recommend_489ban .planlist li {margin:20px auto; width:100%;}
}

/* ↑↑↑489ban ver.5↑↑↑ */


/* ---------------------------------------------------
Acc
------------------------------------------------------ */
#home #acc_wrap{ background: url(../../img/acc_bg.jpg);}
#home #acc { margin:0 auto; width:1100px; position: relative;}
#home #acc figure { float:right; margin:0 0 0 -150px; width:850px; position: relative; z-index: 10;}
#home #acc div { display: block; padding: 40px 0 10px 0 ; width:320px; position:absolute; z-index: 11;}
#home #acc p { font-size:24px; margin-bottom:20px;}
#home #acc p span { display: block; font-size:18px; }
#home #acc a+img { margin:20px 0 ;}

@media screen and (max-width: 1100px) {
          #home #acc { min-width:100%; max-width: 100%; overflow: hidden;}
          #home #acc figure { margin:0 -18% 0 -25%; }
          #home #acc div { margin-left:3%;}
}
@media screen and (max-width: 800px) {
          #home #acc figure { float:none; margin:0 -12% 0 -28%; left:0; top:0; width:140%; }
          #home #acc figure img { /*min-width:600px;*/}
          #home #acc div { position: relative; left:0; top:0; margin:0; width:100%; text-align: center;}
          #home #acc div img{ display: none;}
}
@media screen and (max-width: 600px) {
          #home #acc figure { margin:0 -20% 0 -40%; width:160%; }
}



/* ---------------------------------------------------
Font
------------------------------------------------------ */
#home #lead,
#home .flexslider p,
#home .picup,
#home #plan_item+p,
#home #acc p {
  font-family:"游明朝", YuMincho, "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";}
#home #sec1.picup div p:nth-of-type(2) {
  font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";}

/* ---------------------------------------------------
Clear
------------------------------------------------------ */
#info_wrap::after,
#home #acc::after{ content: "."; display: block; height: 0px; clear: both; visibility: hidden; font-size: 0;}