@charset "utf-8";

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
}

/*------------------- base -------------------*/
a:hover{opacity:0.7;}
a{
	text-decoration:none;
    color: #fff;
}
p{
    line-height: 2;
    letter-spacing: 0.2rem;
}
@media screen and (max-width: 768px) {
    p{
        line-height: 2.2;
    }
}
img{
	max-width: 100%;
	height: auto;
}
/*------------------- ここからbody -------------------*/
body{
	font-family: 'Noto Sans JP',sans-serif;
    font-weight: 300;
    font-style: normal;
	font-size: 1.6rem;
	color: #45413f;
}
@media screen and (max-width: 768px) {
    body{
        font-size: 1.5rem;
    }
}
/*----- toc上部固定 -----*/
.toc_box{
    width: 190px;
    background-color: #87CEEB;
    color: #fff;
    position: fixed;
    padding: 8px 0;
    top: 0;
    right: 0;
    z-index: 1;
}
@media screen and (max-width: 768px) {
    .toc_box{
       display: none;
    }
}
/*----- header -------------------*/
.header{
    width: 100%;
    height: 100vh;
    color: #fff;
    position: relative;
    z-index: 2;
}
.header_inner{
    height: 100%;
    display: flex;
}
/*----- 左ファーストビュー -----*/
.l_container{
    width: calc(100% - 190px);
    height: 100%;
    position: relative;
}
@media screen and (max-width: 768px) {
    .l_container{
        width: 100%;
        position: relative;
    }
}
.logo_sp_on{
    display: none;
}
@media screen and (max-width: 768px) {
    .logo_sp_on{
        display: block;
        filter: opacity(0.8);
        margin: 0;
        max-width: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 70;
        text-align: center;
    }
}
.slider_content{
    height: 100%;
    position: relative;
}
@media screen and (max-width: 768px) {
    .slider_content{
        margin-top: 0;
    }
}
.slider_items{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: slider_fw 18s infinite;
}
.slider_fw1{
    background: url(../images/fw.jpg) center center / cover no-repeat;
    animation-delay: -2s;
}
.slider_fw2{
    background: url(../images/fw2.jpg) center bottom / cover no-repeat;
    animation-delay: 4s;
}
.slider_fw3{
    background: url(../images/fw3.jpg) center center / cover no-repeat;
    animation-delay: 10s;
}

@keyframes slider_fw{
    0%{
        opacity: 0;
    }
    5.56%{
        opacity: 1; /*--- 1秒 ---*/
    }
    33.36%{
        opacity: 1; /*--- 6秒 ---*/
    }
    44.48%{
        opacity: 0; /*--- 8秒 ---*/
    }
    100%{
        opacity: 0;
    }
}
.top_fw_word{
    position: absolute;
    top: 80px;
    font-size: 9rem;
    left: 60px;
}
@media screen and (max-width: 540px) {
    .top_fw_word{
        display: none;
    }
}
/*----- 右サイドヘッダー -----*/
.r_container{
    width: 190px;
    height: 100%;
    background-color: #87CEEB;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-shadow: 0px 1px 3px #acacac;
}
@media screen and (max-width: 768px) {
    .r_container{
       display: none;
    }
}
.logo2{
    text-align: center;
    margin-bottom: 35px;
}
.toc_list{
    text-align: center
}

@media screen and (max-width: 768px) {
    .toc_list li:first-child{
        font-size: 2.4rem;
        font-weight: 500;
    }
}
.tel{ 
    font-size: 1.5rem;
}
/*----- pc_ナビゲーション -----*/
.pc_menu{
    text-align: center;
    margin-top: 35px;
}
.pc_menu .navitem{
    margin-bottom: 30px;
    font-size: 1.8rem;
}
/*----- pc_ナビゲーション共通部分 -----*/
.navitem a::after{
    display: block;
    font-size: 1.1rem;
    text-align: center;
}

/*------------------- home以外のheader内 -------------------*/
.other_page_header{
    width: 100%;
    background-color: #87CEEB;
    color: #fff;
}
.other_page_header_inner{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
@media screen and (max-width: 768px) {
    .other_page_header_inner{
    display: none;
    }
}
.other_page_header_content{
    display: flex;
    align-items: center;
    text-shadow:0px 1px 3px #acacac;
}
.other_page_header_logo{
    line-height: 0;
}
.other_page_pc_menu{
    display: flex;
    margin-left: 30px;
}
.other_page_pc_menu :not(:last-child){
    margin-right: 30px;
}
.other_page_pc_menu .navitem_home a::after{
    content: "ホーム";
}
/*------------------- spハンバーガーメニュー-------------------*/
.sp_hbg_menu{
    display: none;
}
@media screen and (max-width: 768px) {
    .sp_hbg_menu{
        display: block;
    }
}
.hbg_menu_btn{
    width: 30px;
    height: 24px;
    position: fixed;
    top: 10px;
    right: 18px;
	z-index: 90;
}
.hbg_menu_btn span:not(:last-child){
	width: 100%;
	height: 3px;
	position: absolute;
	background-color: #CB9D35;
}
.hbg_menu_btn span:first-of-type{
	top: 0;
}
.hbg_menu_btn span:nth-of-type(2){
	top: 40%;
}
.hbg_menu_btn span:last-of-type{
	top: 48%;
	font-size: 1.2rem;
	color: #CB9D35;
	position: absolute;
}
.hbg_menu_content{
	width: 100%;
	height: 100%;
	background-color: #071039d4;
    text-align: center;
    padding: 60px;
	position: fixed;
	top: 0;
	z-index: 80;
    display: flex;
    flex-direction: column;
	transform: translateY(-100%);
	transition: .5s;
}
.hbg_menu_content nav{
	margin-bottom: 40px
}
.sp_navitem{
	margin-bottom: 30px;
}
.sp_navitem a::after{
    display: block;
    font-size: 1.1rem;
    text-align: center;
}
.sp_navitem_recruit a::after{
    content: "準備中";
}
/*----- ハンバーガーボタンクリック時 -----*/
.hbg_menu_btn.active span:first-of-type{
	top: 20%;
	transform: rotate(45deg);
}
.hbg_menu_btn.active span:nth-of-type(2){
	top: 20%;
	transform: rotate(-45deg);
}
.hbg_menu_content.active{
  	transform: translateY(0);
  	overflow-y: scroll;
}
/*----- ここまでheader -------------------*/

/*----- ここからfooter -------------------*/
.footer{
    width: 100%;
    background-color: #87CEEB;
    color: #fff;
}
.footer_inner{
    padding: 30px 0 0 0;
    text-shadow: 0px 1px 3px #acacac;
}
.footer_content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.footer_menu{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 0;
    border-bottom: 1px solid #fff;
}
.footer_menu li{
    position: relative;
    padding-right: 30px;
}
.footer_menu li:last-child{
    padding-right: 0;
}
.footer_menu li::before{
    position: absolute;
    content: "";
    width: 1px;
    height: 90%;
    background-color: #fff;
    display: block;
    left: -5px;
    bottom: 0;
}
.footer_menu a{
    font-size: 1.4rem;
}
.footer_menu :nth-child(even){
    margin: 0.6rem 0;
}
.footer_info{
    text-align: center;
}
.footer_info p{
    line-height: 2;
}
.footer_info .name{
    font-size: 2.8rem;
}
.copyright{
    font-size: 1rem;
    text-align: center;
    margin-top: 8px;
}
@media screen and (max-width: 768px) {
    .footer_menu{
        justify-content: flex-start;
        gap: 0;
    }
}
/*----- ここまでfooter -------------------*/

/*----- 共通 -------------------*/
.content{
    margin-top: 40px;
}
.main_container{
    padding-top: 30px;
}
@media screen and (max-width: 768px) {

}
.base_inner{
    max-width: 960px;
    margin: 0 auto;
}
.content_title{
    font-size: 3rem;
    color: #CB9D35;
    text-align: center;
    margin-bottom: 40px;
}
/*----- top最上部にもどるbtn -----*/
.page_top{
    width: 54px;
    height: 54px;
    text-align: center;
    background-color: #87CEEB;
    position: fixed;
    bottom: 10px;
    left: 10px;
    z-index: 1;
}
.page_top a{
    font-size: 1.6rem;
    color: #fff;
}
@media screen and (max-width: 768px) {
    .page_top{
        left: unset;
        right: 10px;
    }
}
/*----- 共通 -------------------*/
/*----- Homeページ -------------------*/
/*-----  home_企業理念 -----*/
.top_content{
    margin-bottom: 60px;
}
.big_txt p{
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 3.2rem;
}
.top_content table{
    margin: 40px auto 30px;
}
.top_content table tbody tr th{
    font-size: 2.2rem;
}
.top_content table tbody tr td{
    font-size: 2.2rem;
    padding-left: 16px;
}
@media screen and (max-width: 768px) {
    .big_txt p{
        font-size: 2.4rem;
        line-height: 1.7;
    }
    .top_content table {
        width: 98%;
    }
    .top_content table tbody tr th{
        display: block;
        width: 100%;
        text-align: left;
    }
    .top_content table tbody tr td{
        display: block;
        width: 100%;
        padding-left: 0;
        border-bottom: 1px solid #ccc; 
    }
}
/*-----  home_concept -----*/
.concept_content{
    background: url(../images/concept_bg.png) center top/ cover no-repeat;
    padding-bottom: 120px;
}
.text_box{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}
.text_item_r{
    text-align: center;
    font-size: 2rem;
}
@media screen and (max-width: 768px) {
    .text_box{
        display: block;
    }
}
/*----- home会社概要 -----*/
.info_box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}
.info_box .info_item_l{
    width: 65%;
}
.info_box table{
    width: 100%;
    max-width: 600px;
    text-align: left;
    border-collapse: collapse;
}
.info_box table th{
    width: 25%;
    font-weight: 400;
    padding: 16px 0;
    padding-left: 12px;
    border-bottom: 1px solid #707070;
}
.info_box table td{
    padding: 16px 0;
    border-bottom: 1px solid #707070;
}
.info_box table td a{
    color: #333;
}
@media screen and (max-width: 768px) {
    .info_box{
        flex-direction: column;
    }
    .info_box .info_item_l {
        width: 100%;
    }
    .info_item_r{
        margin-top: 20px;
    }
    .info_box table th {
        padding-left: 0;
    }
}
/*----- home_access -----*/
.map iframe{
    width: 100%;
}
/*----- moreボタン -----*/
.more_btn{
    max-width: 220px;
    height: 56px;
    background-color: #2C2C31;
    margin: 80px auto 0;
}
.more_btn a{
    font-size: 1.8rem;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 589px) {
    .more_btn{
        max-width: 120px;
        height: 44px;
        margin: 50px auto 0;
    }
    .more_btn a{
        font-size: 1.8rem;
    }
}
/*----- ここまでHomeページ -------------------*/

/*----- Home以外のページ共通 -------------------*/
.mv_top{
    width: 100%;
    height: 350px;
    background: url(../images/mv_img.jpg) center top / cover no-repeat;
}
.mv_top_glass{
    height: 100%;
}
.mv_top_inner{
    max-width: 960px;
    height: 100%;
    position: relative;
    margin: 0 auto;
}
.top_title{
    font-size: 4.8rem;
    writing-mode: vertical-rl;
    letter-spacing: 0.6rem;
    position: absolute;
    top: 10%;
    right: -70px;
}
@media screen and (max-width: 1106px) {
    .top_title{
        color: #fff;
        text-shadow: #3d3d3d 0 1px 10px;
        writing-mode: horizontal-tb;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
    }
}
.top_title::after{
    display: block;
    font-size: 1.6rem;
    margin-right: -8px;
}
@media screen and (max-width: 1024px) {
    .top_title::after{
       margin-top: -10px;
    }
}
.top_title_pp::after{
    content: "プライバシーポリシー";
}
.top_title_info::after{
    content: "お問合せ";
}
/*----- ここまで　Home以外のページ共通 -------------------*/

/*----- 店舗情報ページ -------------------*/
@media screen and (max-width: 768px){
    .infopage_box{
        flex-direction: column;
    }
    .infopage_box .info_item_r{
        display: block;
    }
    .infopage_box .info_item_r iframe{
        max-width: 100%;
        height: 300px;
    }
}
/*----- プライバシーポリシーページ -------------------*/
@media screen and (max-width: 768px){
    .privacypolicy_txt p,.pp_txt{
        width: 98%;
        margin: 20px auto 16px;
        line-height: 2;
    }
}

/* お問合せフォーム------------ */
.conact_box{
    margin: 0 auto;
    max-width: 700px;
}
.conact_box input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
.conact_box input.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel,
.conact_box textarea.wpcf7-form-control.wpcf7-textarea{
    width: 700px;
    height: 50px;
    margin-bottom: 30px;
    border: solid 1px #c9c9c9;
}
@media screen and (max-width: 768px){
    .conact_box{
        width: 95%;
        line-height: 2;
        margin: auto;
    }
    .conact_box input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
    .conact_box input.wpcf7-form-control.wpcf7-tel.wpcf7-text.wpcf7-validates-as-tel,
    .conact_box textarea.wpcf7-form-control.wpcf7-textarea{
        width: 94vw;
    }
}
textarea.wpcf7-form-control.wpcf7-textarea{
    height: 200px;
}
.conact_box form .submit p input{
    display: block;
    text-align: center;
    cursor: pointer;
    background: transparent;
    width: 152px;
    height: 56px;
    color: #fff;
    background-color: #5b616e;
    margin: 50px auto 10px;
    font-size: 2rem;
    border: 0;
    transition: all ease .3s;
}
.conact_box form{
    transition: all ease .3s;
}
.privacypolicy_checkbox{
    text-align: center;
}
.privacypolicy_checkbox p a{
    color: #2C2C31;
}
@media screen and (max-width: 589px){
    .conact_box form a{
        max-width: 120px;
        height: 44px;
        margin: 50px auto 0;
        font-size: 1.8rem;
    }
}
/*----- ここまで店舗情報ページ -------------------*/

/*----- お問合せありがとうページ -------------------*/
.contact_finished_box{
    text-align: center;
    padding: 60px 15px;
    border-radius: 30px;
    background: url(../images/contact_finished.jpg) center center / cover no-repeat;

}
/*----- ここまでお問合せありがとうページ -------------------*/
@media screen and (max-width: 786px){
    .sp{
        display: none;
    }
}