@charset "utf-8";
/* sp */

@media screen and (max-width : 768px) {

body{
letter-spacing: 0;
}

/*----------------------------------------
 header
----------------------------------------*/

#header{
height:50px;
}


/*----------------------------------------
 headline
----------------------------------------*/


.page h3{
font-size: 1.7rem;
}

.page h4{
font-size: 1.5rem;
}

.page h5{
font-size: 1.2rem;
line-height: 1.5;
}

.page p {
font-size: 1.3rem;
}

/*----------------------------------------
 section
----------------------------------------*/

/*----------------------------------------
 page
----------------------------------------*/

.page{
width: 100%;
}

.page_inner{
width: 94%;
margin: 0 3%;
}

/*----------------------------------------
 main_title
----------------------------------------*/

#page-title .box {
width: 100%;
padding: 10px 0
}

#page-title h1 {
        font-size: 44px;
        font-size: 5.7291666667vw
}

.plan-title{
padding: 10px 0 20px 0;
}

.plan-title .plan-title_box {
width: 100%;
max-width: 100%;
}

.plan-title h1 {
justify-content: center;
flex-wrap: wrap-reverse;
}


.plan-title h1 span.type{
width: 80%;
}

.plan-title h1 a{
width: 60%;
}

.plan-title h1 a img {
width: 100% !important;
}


/*----------------------------------------
 title
----------------------------------------*/

.page h2.title {
font-size: 2rem;
}

.page h2.title span.en {
font-size: 4rem;
margin: 0 0 20px 0;
}


.page h2.title2 {
font-size: 1.7rem;
padding: 10px;
text-align: left;
}

.page h2.title2 span.en {
font-size: 4rem;
}

.page p.title {
font-size: 1.4rem;
}




/*----------------------------------------
 main_v
----------------------------------------*/

#kv:before {
    content: "";
    display: block;
    padding-top: 120%;
}

video#opv_sp {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  width: 100%;
height: 100%;
  vertical-align: bottom;
z-index: 7000;
}

.skip{
font-size: 1.2rem;
bottom: auto;
top: 10px;
right: auto;
left: 10px;
}

/*----------------------------------------
 lead
----------------------------------------*/

.lead{
background-image: url(../img/lead_bg_sp.jpg);
background-position: top center;
}

.lead_inner{
width: 90%;
max-width: 90%;
}

.lead_img{
width: 100%;
padding: 20px 0;
}

/*----------------------------------------
 top
----------------------------------------*/

.top_special_inner{
width: 96%;
max-width: 96%;
padding: 40px 0;
}

.top_special h2{
padding: 40px 0 20px 0;
font-size: 1.5rem;
letter-spacing: 2px;
}

.top_special h2 span{
letter-spacing: 1px;
font-size: 3rem;
}

.special_slide .slide-arrow {
width: 15px;
}

.special_slide .prev-arrow {
left: -3px;
}

.special_slide .next-arrow {
right: -3px;
}

.special_slide .slick-dots{
bottom: -5px;
}

.special_slide .slick-dots li button:before{
font-size:12px !important;
}

.top_contents_inner{
width: 96%;
max-width: 96%;
padding: 0 0 40px 0;
}


.top_contents h2{
padding: 40px 0 20px 0;
font-size: 1.7rem;
letter-spacing: 3px;
}

.top_contents p{
text-align: left;
font-size: 1.2rem;
line-height: 2;
padding: 0 10px;
}

#top-nav-block {
padding: 40px 0;
}

#top-nav-block li {
margin: 0 0 40px 0;
}

#top-nav-block li .pict {
width: 100%;
}

#top-nav-block li .body {
width: 100%;
padding: 0 10px;
}

#top-nav-block li:nth-child(even) .body {
    float: left;
padding: 0 10px;
}

#top-nav-block li:nth-child(even) a {
flex-wrap: wrap-reverse;
}

#top-nav-block li .body h2 {
font-size: 20px;
padding: 20px 0 0 0;
text-align: left;
}

#top-nav-block li .body p {
text-align: left;
}

#top-nav-block li .body .more {
border: 1px solid #948144;
background-color: #fff;
}

#top-nav-block li a:hover .more {
    background: #948144;
color: #fff;
}


.top_info{
width: 96%;
margin: 20px 0;
}

.top_info p{
font-size: 1.3rem;
}

.top_info h2{
font-size: 2rem;
text-align: center;
}

.top_info h3{
font-size: 1.8rem;
letter-spacing: 3px;
}


/*----------------------------------------
 concept
----------------------------------------*/

.concept_bg,
.concept_bg2,
.concept_bg3,
.concept_bg4{
padding: 40px 0;
}

.concept_info{
margin: 20px 0;
}

.concept_info h2{
font-size: 2.5rem;
letter-spacing: 0;
margin-bottom: 10px;
}

/*----------------------------------------
 location
----------------------------------------*/

.location_bg,
.location_bg2,
.location_bg3,
.location_bg4,
.location_bg5{
padding: 40px 0;
}

.location_bg3{
justify-content: flex-start;
}

.location_bg4{
justify-content: flex-start;
}


.location_on{
width: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: wrap;
}


.location_on_item{
width: 85%;
position: relative;
right: 0;
top: -20px;
display: flex;
justify-content: flex-start;
align-items: flex-end;
flex-direction: column;
}

.location_off{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}

.location_off_item{
width: 100%;
position: relative;
right: 0;
top: -20px;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-direction: column;
}


.location_box_left{
width: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
}

.location_box_left_h{
padding-top: 40px;
}

.location_box_right{
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
padding: 0 0 0 0;
}


.location_box_inner{
width: 100%;
max-width: 100%;
padding: 0 0 0 0;
}

.location_box_inner_text{
flex-direction: column;
width: 100%;
}

.location_box_inner_text img{
width: 80%;
padding-left: 15px;
}

/*----------------------------------------
 zeh-m
----------------------------------------*/

.zeh_bg,
.zeh_bg2{
padding: 40px 0;
}

.zeh_nav{
margin: 20px 0;
}

.zeh_nav li{
width: 100%;
border-left: none;
border-bottom: 1px solid #005e3c;
text-align: left;
font-size: 1.3rem;
}

.zeh_nav li:last-child{
border-right: none;
border-bottom: none;
}

.zeh_nav li a{
flex-direction: row;
padding: 10px 0;
}

.zeh_nav li span{
font-size: 1.7rem;
margin: 0 0 5px 0;
}

.zeh_nav li a .down_arrow_box{
width: 5%;
}

.zeh_nav li a .down_arrow {
  width: 10px;
  height: 10px;
}

.zeh_info{
margin: 20px 0;
}

.zeh_info p.sub_title{
font-size: 2rem;
letter-spacing: 0;
}

.zeh_info p.sub_title span{
font-size: 1.3rem !important;
margin: 0 0 0 10px;
}

.anchor{
display: block;
padding-top: -100px;
margin-top: 100px;
}

.anchor2{
display: block;
padding-top: -500px;
margin-top: 500px;
}

.anchor3{
display: block;
padding-top: -3600px;
margin-top: 3600px;
}

h4.lh_01{
height: auto;
}



/*----------------------------------------
 modelroom
----------------------------------------*/

.modelroom_bg{
padding: 40px 0;
}

.modelroom_bg3{
padding: 40px 0;
}

.modelroom_text01{
padding: 5px 10px;
font-size: 1.3rem;
top: 10px;
}

.modelroom_text02{
padding: 5px 10px;
font-size: 1.3rem;
bottom: 10px;
}


.modelroom_item_text_left{
padding: 5px 10px;
font-size: 1.3rem;
}

.modelroom_item_text_right{
padding: 5px 10px;
font-size: 1.3rem;
}

.modelroom_item_07{
width: 50%;
display: flex;
justify-content: center;
}

.modelroom_box_07{
left: 0;
right: -20% !important;
}


/*----------------------------------------
 plan
----------------------------------------*/

.plan_bg3{
padding: 40px 0 0 0;
}

.select_btn{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
top: -5px;
margin-bottom: -5px;
}

.select_btn2{
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}

.select_btn img,
.select_btn2 img{
width: 50%;
cursor: pointer;
}

.plan_bg2_wrap{
background-image: url(../img/plan/plan_bg02_sp.jpg);
}

.plan_ms{
width: 80%;
}

.view_box{
margin: 40px 0;
}

.view_box ul{
width: 100%;
max-width: 100%;
}

.plan_box{
margin: 20px 0;
}

.plan_area{
font-size: 1.3rem !important;
}

.plan_area span{
font-size: 4rem !important;
}

.plan_area2{
font-size: 1.5rem !important;
}

.plan_nav{
margin: 30px 0;
border-bottom: 1px solid #c8a17c;
}

.plan_nav li{
width: 50%;
border-width: 1px 0 0 1px;
}

.plan_nav li:nth-child(even){
border-width: 1px 1px 0 1px;
}

.plan_nav li a{
font-size: 1.7rem;
line-height: 1;
padding: 10px 5px;
}


.hanrei{
font-size: 1rem !important;
text-align: left;
width: 100%;
}

.hanrei img{
height: 8px;
}

a.plan_btn{
width: 90%;
font-size: 1.5rem;
padding: 15px;
letter-spacing: 1px;
}

/*----------------------------------------
 safety
----------------------------------------*/

.safety_bg{
padding: 40px 0 0 0;
}

.safety_nav{
margin: 20px 0 20px 0;
flex-wrap: wrap;
}

.safety_nav li{
width: 50%;
}

.safety_nav li p{
height: 40px;
padding: 0 10px;
}

.safety_nav li:nth-child(odd) p{
border-left: none;
}

.safety .anchor_01{
padding-top: -100px;
margin-top: 100px;
}


.safety .anchor_02,
.safety .anchor_03,
.safety .anchor_04,
.safety .anchor_05,
.safety .anchor_06,
.safety .anchor_07{
display: block;
padding-top: 40px;
margin-top: -40px;
}

/*----------------------------------------
 brand
----------------------------------------*/

.brand_bg{
padding: 40px 0;
}

.brand_box ul li p{
font-size: 1.2rem !important;
}

.brand_box p.year{
font-size: 3rem !important;
}

.his_mov span{
font-size: 1.6rem;
}

/*----------------------------------------
 special_voice
----------------------------------------*/

.voice_bg{
padding: 0 0 40px 0;
}

.voice_box{
padding: 40px 0;
}

.voice_nav{
width: 100%;
max-width: 100%;
margin: 20px 0 20px 0;
}

.voice_nav li{
width: 100%;
border-left: none;
border-top: 1px solid #003a16;
font-size: 1.2rem;
}

.voice_nav li:last-child{
border-right: none;
border-bottom: 1px solid #003a16;
}

.voice_nav li a{
justify-content: space-between;
flex-direction: row;
padding: 10px;
}

.voice_nav li p{
font-size: 2rem !important;
margin: 0 10px 0 0;
width: auto;
}

.voice_nav li span{
font-size: 4rem !important;
margin: 0 10px 0 0;
}

.voice_nav li a div{
display: flex;
align-items: center;
}

.voice_nav li a .down_arrow_box{
width: 5%;
}

.voice_nav li a .down_arrow {
  width: 10px;
  height: 10px;
}

.voice_title{
padding: 20px;
}

.voice_faq{
width: 90%;
margin: 0 0 30px 0;
}

.special_voice h3 {
font-size: 1.5rem;
margin: 0 0 20px 0;
}

.special_voice h3 span {
font-size: 2rem;
letter-spacing: 0;
}

.special_voice h3:before {
width: 60px;
height: 60px;
left: -20px;
}

.voice_faq p.faq{
font-size: 1.5rem;
}

.voice_faq p.faq_ans:before{
width: 60px;
height: 60px;
left: -20px;
}

.special_voice .anchor_01{
display: block;
padding-top: -140px;
margin-top: 140px;
}


/*----------------------------------------
 special_life
----------------------------------------*/


.life_bg{
padding: 0 0 40px 0;
}

.life_nav{
width: 100%;
margin: 40px 0 20px 0;
}

.life_nav li{
width: 100%;
border-left: none;
border-top: 1px solid #948144;
font-size: 1.2rem;
}

.life_nav li:last-child{
border-right: none;
border-bottom: 1px solid #948144;
}

.life_nav li a{
flex-direction: row;
padding: 10px;
}

.life_nav li p{
font-size: 2rem !important;
margin: 0 0 0 0;
width: 20%;
}

.life_nav li span{
font-size: 2.5rem !important;
margin: 0 0 0 0;
}

.life_nav li a .down_arrow_box{
width: 20%;
}

.life_nav li a .down_arrow {
  width: 10px;
  height: 10px;
}

.life_point_btn a{
width: 80%;
}

.special_life .anchor_01,
.special_life .anchor_02,
.special_life .anchor_03,
.special_life .anchor_04{
display: block;
padding-top: 40px;
margin-top: -40px;
}



/*----------------------------------------
 special_merit
----------------------------------------*/

.merit_bg{
padding: 0 0 40px 0;
}

.merit_bg2{
background-color: #fff;
padding: 40px 0;
}

.merit_nav{
display: none;
}

.merit_nav li{
width: 100%;
border-left: none;
border-bottom: 1px solid #948144;
text-align: left;
font-size: 1.3rem;
}

.merit_nav li:last-child{
border-right: none;
border-bottom: none;
}

.merit_nav li a{
flex-direction: row;
padding: 10px 0;
}

.merit_nav li span{
font-size: 1.7rem;
margin: 0 0 5px 0;
}

.merit_nav li a .down_arrow_box{
width: 5%;
}

.merit_nav li a .down_arrow {
  width: 10px;
  height: 10px;
}

.special_merit .anchor_01{
display: block;
padding-top: 50px;
margin-top: -50px;
}

.special_merit .anchor_02{
display: block;
padding-top: -50px;
margin-top: 50px;
}

.special_merit .anchor_03{
display: block;
padding-top: -450px;
margin-top: 450px;
}

.special_merit .anchor_04{
display: block;
padding-top: 50px;
margin-top: -50px;
}

.special_merit .anchor_05{
display: block;
padding-top: -250px;
margin-top: 250px;
}

/*----------------------------------------
 map
----------------------------------------*/

.map_box {
width: 100%;
padding: 20px 10px;
}

.map_btn{
width: 96%;
margin: 0 0 10px 0;
}

/*----------------------------------------
 ボタン
----------------------------------------*/

.info_btn{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
margin: 0 0 20px 0;
}

.info_btn .btn{
width: 96%;
padding: 15px 5px;
font-size: 1.5rem;
letter-spacing: 0;
}

.info_btn .btn::after {
height: 2rem;
width: 2rem;
}

/*----------------------------------------
 footer
----------------------------------------*/

    #contact .contact-sub {
        font-size: 25px;
        font-size: 3.5vw
    }

/*----------------------------------------
cap
----------------------------------------*/

/*----------------------------------------
 note
----------------------------------------*/

.note_inner{
width: 96%;
}

.note {
padding: 40px 0;
margin: 0;
}


#contact .notes {
    background: none;
}


/*----------------------------------------
 その他
----------------------------------------*/

.js-scrollable img {
width: 300% !important;
max-width: 300% !important;
}

.modal_content{
width: 95%;
max-width: 95%;
}

.modal_content iframe{
width: 100%;
}

.md_close_btn{
padding: 5px 20px;
font-size: 1.5rem;
}


/*----------------------------------------
 pc/sp
----------------------------------------*/

.pc{
display: none;
}

.sp{
display: block;
}

.delay_01,
.delay_02,
.delay_03{
  animation-delay:0 !important;
}

}