@charset "UTF-8";

/*-- show1 --*/
header,
main,
footer{opacity: 0;}
.loading{position: fixed; width: 100%; height: 100vh; z-index: 999;}
.loading_logo{width: 180px; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%); overflow: hidden;}
.loading_logo img{transform: translate(0, 102%);}
body.show1 .loading_logo img{animation: loading_logo 0.5s ease 0s forwards;}
@keyframes loading_logo{
    0%{transform: translate(0, 102%);}
    100%{transform: translate(0, 0);}
}

/*-- show2 --*/
body.show2 .loading_bk{background: #e71b1c; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; transform: scaleY(0); transform-origin: 50% 100%; animation: loading_bk 0.3s ease 0s forwards;}
@keyframes loading_bk{
    0%{transform: scaleY(0);}
    100%{transform: scaleY(1);}
}

body.show2 header,
body.show2 main,
body.show2 footer{animation: loading_open 0.1s ease 1s forwards;}
@keyframes loading_open{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

/*-- show3 --*/
body.show3 .loading{width: 0; height: 0;}
body.show3 .loading_logo{display: none;}
body.show3 .loading_bk{animation: loading_bk2 0.3s ease 0s forwards; transform-origin: 50% 0;}
@keyframes loading_bk2{
    0%{transform: scaleY(1);}
    100%{transform: scaleY(0);}
}

.title_area{position: relative;}
.title_h2{text-align: center;}
.title_h2 small{display: block; font-size: 20px; margin-bottom: 10px;}
.title_h2 b{font-family: 'Piedra', cursive; display: block; font-size: 70px; letter-spacing: 7px;}
.iconBox{position: absolute;}

@media screen and (max-width:1250px){
    .iconBox img{width: 100px;}
}
@media screen and (max-width:991px){
    .title_h2 b{font-size: 55px;}
}
@media screen and (max-width:640px){
    .title_h2 small{font-size: 15px;}
    .title_h2 b{font-size: 40px; letter-spacing: 4px;}
    .iconBox img{width: 80px;}
}

/* mainVisual ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#mainVisual{position: relative;}
.mainvisual_logo{position: absolute; z-index: 2; width:100%; left: 0; right: 0; text-align: center; top: 50%; transform: translateY(-50%);}

@media screen and (max-width:800px){
    .mainvisual_logo img{max-width: 130px;}
}
@media screen and (max-width:640px){
    .mainvisual_logo{transform: translateY(-40%);}
    .mainvisual_logo img{max-width: 200px;}
}


/* top_consept ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_consept{border-top: 2px solid #fff; padding: 67px 0 120px; background: url(../images/top/consept_bk.jpg) no-repeat center top; background-size: cover;position: relative; margin-bottom: 10px;}
#top_consept .title_h2{color: #fff; margin-bottom: 40px;}
#top_consept .top_consept_read{text-align: center; color: #fff; font-size: 18px; line-height: 2.5; margin-bottom: 90px;}

.top_consept2{max-width: 700px; margin: 0 auto; background: rgba(255, 255, 255, 0.3); padding: 40px 0;}
.top_consept2 p{text-align: center; color: #fff; font-size: 25px; letter-spacing: 4px;}

.icon_01{top: -10px; left: 23%;}
.icon_02{top: 35%; left: 11%;}
.icon_03{top: 12%; right: 11%;}

@media screen and (max-width:950px){
    .icon_01{top: -10px; left: 17%;}
}
@media screen and (max-width:640px){
    #top_consept{padding: 60px 0;}
    #top_consept .top_consept_read{font-size: 16px;}
    .icon_01{top: -57px; left: 8px;}
    .icon_03 {top: 4%; right: 11%;}
    .top_consept2 p{line-height: 1.8;}
}


/* top_reformmenu ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_reformmenu{background: #e48e00;}
#top_reformmenu .top_reformmenu_bk_1{background: url(../images/top/reformmenu_bk_1.jpg) repeat-y left 30px top;}
#top_reformmenu .top_reformmenu_bk_2{background: url(../images/top/reformmenu_bk_2.jpg) repeat-y right 30px top;}
#top_reformmenu .inner{max-width: 1200px; margin: 0 auto; padding: 70px 0;}

#top_reformmenu .title_h2{color: #fff; margin-bottom: 120px;}
#top_reformmenu .plusone_wrap{display: flex; flex-wrap: wrap;}
#top_reformmenu .plusone_wrap .plusone_box{padding: 0 15px; width: 33.33%; text-align: center; margin-bottom: 30px;}
#top_reformmenu .plusone_wrap .plusone_box figure{margin-bottom: 30px;}
#top_reformmenu .plusone_wrap h3{font-size: 20px; margin-bottom: 15px; color: #fff;}
#top_reformmenu .plusone_wrap p{color: #fff; line-height: 1.8;}

.icon_04{top: -10px; left: 12%;}
.icon_05{top: -10px; right: 13%;}

@media screen and (max-width:950px){
    #top_reformmenu .inner{padding: 70px 20px;}
    #top_reformmenu .plusone_wrap .plusone_box{width: 50%;}
    .icon_04{top: -10px; left: 5%;}
    .icon_05{top: -10px; right: 5%;}
}

@media screen and (max-width:800px){
    #top_reformmenu .top_reformmenu_bk_1{background: url(../images/top/reformmenu_bk_1.jpg) repeat-y left 10px top; background-size: 20px;}
    #top_reformmenu .top_reformmenu_bk_2{background: url(../images/top/reformmenu_bk_2.jpg) repeat-y right 10px top; background-size: 20px;}
}

@media screen and (max-width:640px){
    #top_reformmenu .top_reformmenu_bk_1 {
        background: url(../images/top/reformmenu_bk_1.jpg) repeat-y left 5px top;
        background-size: 10px;
    }
    #top_reformmenu .top_reformmenu_bk_2 {
        background: url(../images/top/reformmenu_bk_2.jpg) repeat-y right 5px top;
        background-size: 10px;
    }
    #top_reformmenu .title_h2{margin-bottom: 50px;}
    #top_reformmenu .plusone_wrap .plusone_box{width: 100%;}
    .icon_04{top: -55px;}
    .icon_05{top: -55px;}
}

/* top_programs ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_programs{padding: 70px 0; background: #fdf8f4;}
#top_programs .inner{max-width: 1200px; margin: 0 auto;}

#top_programs .title_h2{color: #434343; margin-bottom: 50px;}
#top_programs .programs_read{font-size: 25px; color: #434343; text-align: center; letter-spacing: 1px; margin-bottom: 50px;}

.programs_wrap{display: flex; flex-wrap: wrap;}
.programs_wrap .programs_box{padding: 0 15px; width: 25%; text-align: center; margin-bottom:30px;}
.programs_inner{background: #5b5b5b; color: #fff; height: 100%; border-radius: 10px; padding: 20px;}
.programs_inner h3{font-size: 20px; border-bottom: 1px solid #fff; padding-bottom: 20px; margin-bottom: 20px;}
.programs_inner p{line-height: 1.8;}
.programs_wrap .programs_box.other .programs_inner p{font-size: 20px; padding-top: 16%;}

.icon_06{top: 0; left: 3%;}
.icon_07{top: -10px; right: 6%;}

@media screen and (max-width:1200px){
    #top_programs .inner{padding: 0 15px;}
}
@media screen and (max-width:950px){
    .icon_06{top: -65px;}
    .icon_07{top: -65px;}
}

@media screen and (max-width:640px){
    #top_programs .programs_read{font-size: 18px; line-height: 1.8;}
    .programs_wrap .programs_box{width: 50%; padding: 0 10px;}
    .programs_inner{padding: 15px;}
    .programs_inner h3{font-size: 16px;}
    .programs_inner p{}
    .programs_wrap .programs_box.other .programs_inner p{padding-top: 22%;}
}

/* top_jobs ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_jobs{padding: 70px 0; background: #eee7e2;}
#top_jobs .inner{max-width: 1200px; margin: 0 auto;}
#top_jobs .title_h2{color: #434343; margin-bottom: 60px;}

.jobs_wrap{display: flex; flex-wrap: wrap; align-items: center;}
.jobs_wrap .col{padding: 0 15px; width: 50%;}
.jobs_wrap .jobs_left{text-align: center;}
.jobs_wrap .jobs_right{}
.jobs_wrap .jobs_right .jobs_text{font-size: 22px; font-weight: 500; line-height: 2; letter-spacing: 2px;}
.jobs_wrap .jobs_right .point_box{background: #fff; padding: 30px 40px; margin-top: 30px;}
.jobs_wrap .jobs_right .point_box p{text-align: center; font-size:22px; margin-bottom: 30px;}
.jobs_wrap .jobs_right .point_box p:after{content: ""; width: 200px; height: 2px; background: #000; display: block; margin: 0 auto; position: relative; bottom: 10px;}
.jobs_wrap .jobs_right .point_box p span{position: relative; z-index: 2; background: #fff; display: inline-block; padding: 0 20px;}
.jobs_wrap .jobs_right .point_box ul li{font-size: 22px; line-height: 2; font-weight: 500; letter-spacing: 1px;}

.icon_08{top: -39px; left: -3%;}
.icon_09{top: -35px; right: -2%;}
@media screen and (max-width:1250px){
    .icon_08{left:0%;}
    .icon_09{right: 0%;}
}
@media screen and (max-width:950px){
    .jobs_wrap .jobs_right .jobs_text{font-size: 18px;}
    .jobs_wrap .jobs_right .point_box ul li{font-size: 18px;}
}

@media screen and (max-width:640px){
    .jobs_wrap{display: block;}
    .jobs_wrap .col{width: 100%; margin-bottom: 30px; padding: 0 10px;}
    .jobs_wrap .jobs_right .jobs_text{font-size: 16px; text-align: center;}
    .jobs_wrap .jobs_right .point_box{padding: 20px;}
    .jobs_wrap .jobs_right .point_box p{font-size: 20px;}
    .jobs_wrap .jobs_right .point_box ul li{font-size: 15px;}
}

/* top_Lunch ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_Lunch{padding: 70px 0;}
#top_Lunch .title_h2{color: #434343; margin-bottom: 50px;}
.lunch_read{text-align: center; font-size: 18px; line-height: 2; letter-spacing: 2px; margin-bottom: 40px;}
#top_Lunch figure{text-align: center;}

.icon_10{top: -10px; left: 50%; transform: translateX(-170%);}
.icon_11{top: -10px; right: 50%; transform: translateX(170%);}

@media screen and (max-width:640px){
    .lunch_read{font-size: 15px;}
}

/* top_Message ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_Message{padding: 70px 0 50px; background: url(../images/top/blog_bk02.jpg) center top; background-size: cover; position: relative;}
#top_Message .inner{max-width: 1000px;}
#top_Message .title_h2{color: #434343; margin-bottom: 30px;}

.message_box{background: #fff; padding: 40px 30px; margin-bottom: 30px;}
.message_box h3{font-size: 20px; font-weight: 400; color: #333; border-bottom: 1px solid #e2ddd6; padding-bottom:20px; margin-bottom:30px;}
.message_box p{font-size: 14px; line-height: 1.8; color: #333;}

.icon_12{top: -10px; left: 3%;}
.icon_13{top: -10px; right: 3%;}

@media screen and (max-width:950px){
    #top_Message .inner{padding: 0 15px;}
}

@media screen and (max-width:640px){
    .message_box{padding: 20px;}
    .icon_12{top: -40px; left: 0%;}
    .icon_13{top: -40px; right: 0%;}
}

/* top_Howto ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_Howto{padding: 80px 0;}
#top_Howto .inner{}
#top_Howto .title_h2{color: #434343; margin-bottom: 50px;}

.howto_wrap{display: flex; justify-content: space-between; flex-wrap: wrap;}
.howto_wrap .howto_box{width: 33.33%; border-left: 1px solid #7a7a7a;}
.howto_wrap .howto_box:nth-child(1){padding: 0 124px; border-left:none;}
.howto_wrap .howto_box:nth-child(2){padding: 0 24px;}
.howto_wrap .howto_box:nth-child(3){padding: 0 80px;}
.howto_wrap .howto_box figure{text-align: center; margin-bottom: 30px;}
.howto_wrap .howto_box h3{font-size: 16px; line-height: 1.8; color: #333; margin-bottom: 15px;}
.howto_wrap .howto_box p{font-size: 14px; line-height: 1.8;}
.howto_wrap .howto_box p.red{font-size: 12px; color: #ed6262; margin-top: 10px;}

@media screen and (max-width:1200px){
    .howto_wrap .howto_box:nth-child(1){padding: 0 20px;}
    .howto_wrap .howto_box:nth-child(2){padding: 0 20px;}
    .howto_wrap .howto_box:nth-child(3){padding: 0 20px;}
    .howto_wrap .howto_box h3{text-align: center;}
}
@media screen and (max-width:640px){
    .howto_wrap .howto_box{width: 100%; border-left:none; border-top: 1px solid #7a7a7a;}
    .howto_wrap .howto_box:nth-child(1){border-top:none; padding:30px 10px;}
    .howto_wrap .howto_box:nth-child(2){padding: 30px 10px;}
    .howto_wrap .howto_box:nth-child(3){padding: 30px 10px;}
}

/* top_access ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#top_access{background: #535353; padding: 70px 0 100px;}
#top_access h2{color: #fff; margin-bottom: 45px;}

.access_wrap_1{display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 70px;}
.access_wrap_1 .col{width: 48%;}
.access_wrap_1 h3{color: #fff; font-size: 20px; padding: 0 20px 25px; letter-spacing: 2px;}
.access_wrap_1 table{color: #fff; border-top: 1px solid #fff; width: 100%; text-align: left;}
.access_wrap_1 table tr th{width: 30%; font-size: 14px; font-weight: 400; border-bottom: 1px solid #fff; padding:25px 0 25px 20px; line-height: 1.5;}
.access_wrap_1 table tr td{width: 70%; font-size: 14px; font-weight: 400; border-bottom: 1px solid #fff; padding:25px 0; line-height: 1.5;}
.access_wrap_1 .col.map{padding-top: 40px;}
.access_wrap_2{max-width: 950px; margin:  auto; display: flex; justify-content: center;}
.access_wrap_1 .col{width: 48%;}

.rhinokino_logo{text-align: center; margin-top: 40px;}
.rhinokino_logo p{font-size: 14px; color: #fff; margin-bottom: 20px;}
.rhinokino_logo a{display: inline-block; background: #fff; padding: 15px 40px;}

.icon_17{top: 0; left: 30%;}
.icon_18{top: 0; right: 30%;}

.twitter{max-width: 950px; margin:  auto; display: flex; justify-content: center;}

@media screen and (max-width:1200px){
    #top_access .inner{padding: 0 15px;}
    .access_wrap_1 .col.map iframe{width: 100%;}
}

@media screen and (max-width:950px){
    .access_wrap_2{display: block;}
    .access_wrap_2 .col{max-width: 450px; margin: 0 auto 20px;}
    
    .icon_17{left: 25%;}
    .icon_18{right: 25%;}
}

@media screen and (max-width:640px){
    .access_wrap_1 .col{width: 100%;}
    .access_wrap_2 .col iframe{width:100%;}
    .icon_17{top: 0; left: 3%;}
    .icon_18{top: 0; right: 3%;}

}