/*
Theme Name: habakiri Child
Theme URI: http://habakiri.2inc.org/en/
Template: habakiri
Author: inc2734
Author URI: http://2inc.org
Description: Habakiri is the simple theme based on Bootstrap 3. This theme's goal is to create a responsive, bootstrap based WordPress theme quickly. The design is very simple, easy to create of child theme. Features are, 100% responsive layouts, the Glyphicons, Genericons, Font Awesome icons, 7 page templates, 8 header design patterns, many color settings, a lot of hooks, related posts, minified CSS and JavaScript, Sass and PHP Class in functions.php.
Tags: white,fixed-layout,fluid-layout,responsive-layout,one-column,two-columns,left-sidebar,right-sidebar,editor-style,sticky-post,microformats,featured-images,custom-colors,custom-menu,custom-background,custom-colors
Version: 2.5.2.1744681104
Updated: 2025-04-15 10:38:24

*/


/* ...............................

    index

............................... 
    
    # base

    # header.php
    
    # page-top.php

    # footer.php

    # 404.php

*/

/* =============================

    base

==============================*/

:root {
    --black: #141414;
    --yellow: #f9ef23;
    --white: #fff;
}

* {
    font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
    font-size: 62.5%;
}

body {
    background-color: var(--black);
    color: var(--white);
}

h1 {
    font-size: 2.8rem;
    margin: 0;
}

h2 {
    font-size: 2.4rem;
    margin: 0;
}

h3 {
    font-size: 2.0rem;
    margin: 0;
}

p {
    font-size: 1.8rem;
    margin: 0;
}

th,
td {
    font-size: 1.8rem;
    width: 100%;
}

span {
    font-size: 1.8rem;
}

a {
    font-size: 1.8rem;
    color: var(--black);
}

a:hover {
    text-decoration: none;
}

ul {
    font-size: 1.8rem;
    padding: 0;
    margin: 0;
}

li {
    font-size: 1.8rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section {
    margin: 5rem 0 8rem;
}

table {
    margin: 0;
    width: 100%;
}

small {
    font-size: 1.4rem;
}

font {
    font-size: 1.8rem;
}

.view_pc {
    display: block;
}

.view_sp {
    display: none;
}

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

.flex_box {
    padding: 2rem;
}

.coming_soon {
    text-align: center;
    font-size: 3rem;
    margin-top: 4%;
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 2.4rem;
    }

    h2 {
        font-size: 2.0rem;
    }

    h3 {
        font-size: 1.6rem;
    }

    p {
        font-size: 1.6rem;
    }

    th,
    td {
        font-size: 1.6rem;
    }

    span,
    a,
    font {
        font-size: 1.6rem;
    }

    .view_pc {
        display: none;
    }

    .view_sp {
        display: block;
    }

    .flex_wrap {
        display: block;
    }

    .coming_soon {
        font-size: 2.6rem;
    }
}

/*====================================

 　header.php 

==================================== */
#header-wrapper {
    position: relative;
}

#header-wrapper .header_mv {
    height: 100vh;
}

#header-wrapper .header_logo {
    width: 25%;
    position: absolute;
    top: 5rem;
    left: 5rem;
}

#header-wrapper .header_cc {
    position: absolute;
    bottom: 5rem;
    right: 2rem;
}

#header-wrapper .header_cc p,
#header-wrapper .header_cc p font {
    font-size: 4rem;
}

@media screen and (max-width: 768px) {
    #header-wrapper .header_mv {
        height: 95vh;
    }

    #header-wrapper .header_logo {
        width: 60%;
        top: 7rem;
        left: 2rem;
    }

    #header-wrapper .header_cc {
        /* top: 50%; */
        top: auto;
        left: 2rem;
        /* bottom: auto; */
        bottom: 3%;
        right: 0;
        transform: translateY(-50%);
        width: 100%;
    }

    #header-wrapper .header_cc p,
    #header-wrapper .header_cc p font {
        font-size: 2.4rem;
    }
}

/*====================================

 　page-top.php 

==================================== */
#top-wrapper .top_inner {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
}

#top-wrapper .top_ttl,
#top-wrapper .top_ttl font {
    font-size: 5rem;
    color: var(--yellow);
    text-align: center;
}

#top-wrapper .top_ourbar .flex_box {
    width: 50%;
}

#top-wrapper .top_ourbar .grid_wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

#top-wrapper .top_ourbar .grid_box:first-of-type {
    grid-area: 1 / 1 / 5 / 4;
}

#top-wrapper .top_ourbar .grid_box:last-of-type {
    grid-area: 6 / 3 / 10 / 6;
}

@media screen and (max-width: 768px) {
    #top-wrapper .top_ttl,
    #top-wrapper .top_ttl font {
        font-size: 4rem;
    }

    #top-wrapper .top_ourbar .flex_box {
        width: 100%;
    }
}
/*-------------------------
  Our bar
-------------------------*/

/*-------------------------
  Features
-------------------------*/

/*-------------------------
  Overview
-------------------------*/
#top-wrapper .top_overview .flex_wrap {
    justify-content: space-between;
    align-items: flex-start;
}

#top-wrapper .top_overview .flex_box {
    display: flex;
    flex-direction: column;
    width: 30%;
}

#top-wrapper .top_overview .ov_detail {
    background-color: var(--yellow);
    color: var(--black);
    padding: 2rem;
    height: 22rem;
}

#top-wrapper .top_overview .ov_detail p {
    min-height: 9rem;
}

#top-wrapper .top_overview .ov_detail a {
    color: var(--black);
}

@media screen and (max-width: 768px) {
    #top-wrapper .top_overview .flex_box {
        width: 100%;
    }

    #top-wrapper .top_overview .ov_detail {
        height: auto;
    }
}

/*-------------------------
  System
-------------------------*/
#top-wrapper .top_system ul {
    text-align: center;
    margin: 2rem 0;
}

/*-------------------------
  Food
-------------------------*/
#top-wrapper .top_food table {
    width: 50%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    #top-wrapper .top_food table {
        width: 80%;
    }
}

/*-------------------------
  Drink
-------------------------*/
#top-wrapper .top_drink {
    position: relative;
}

#top-wrapper .top_drink::after {
    content: "";
    background-image: url(img/bhg_dk01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    position: absolute;
    width: 30%;
    height: 35vh;
    bottom: 0;
    right: 0;
    z-index: -1;
}

#top-wrapper .top_drink table {
    width: 80%;
    margin: 0 auto;
}

#top-wrapper .top_drink table .txt-right {
    text-align: right;
}

#top-wrapper .top_drink .top_drink_list {
    width: 50%;
    margin: 0 auto;
}

#top-wrapper .top_drink .top_drink_ttl {
    display: block;
    font-size: 2rem;
    margin-top: 2rem;
}

#top-wrapper .top_drink .top_drink_subttl {
    display: block;
    font-size: 1.8rem;
    margin-top: 1rem;
    padding-left: 1rem;
}

#top-wrapper .top_drink .top_drink_detail {
    padding-left: 2rem;
}

#top-wrapper .top_drink .top_drink_detail span::after {
    content: "、";
}

#top-wrapper .top_drink .top_drink_detail span:last-of-type:after {
    content: none;
}

#top-wrapper .top_drink .top_drink_am {
    text-align: right;
    margin-top: 5%;
}

@media screen and (max-width: 768px) {
    #top-wrapper .top_drink table {
        width: 100%;
    }

    #top-wrapper .top_drink table th,
    #top-wrapper .top_drink table td {
        display: block;
        width: 100%;
    }

    #top-wrapper .top_drink table td {
        text-align: right;
    }

    #top-wrapper .top_drink .top_drink_list {
        width: 90%;
    }

    #top-wrapper .top_drink::after {
        display: none;
    }
}

/*-------------------------
  Link
-------------------------*/
#top-wrapper .top_link {
    background-image: url(img/bhg_link_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}


#top-wrapper .top_link .flex_box {
    width: 50%;
}

#top-wrapper .top_link p {
    color: var(--yellow) ;
}

#top-wrapper .top_link .top_link_logo {
    width: 30%;
    margin-bottom: 2rem;
}

#top-wrapper .top_link .sns_icons {
    justify-content: flex-start;
    margin-top: 2rem;
}

#top-wrapper .top_link .sns_icons a {
    width: 10%;
    margin-right: 5%;
}

#top-wrapper .top_link .flex_box:last-of-type {
    text-align: center;
}

#top-wrapper .top_link .flex_box:last-of-type p {
    text-align: center;
    color: var(--white);
    font-size: 3rem;
}

#top-wrapper .top_link .grnv {
    margin-top: 2rem;
}

#top-wrapper .top_link .grnv a {
    text-decoration: underline;
    color: var(--white);
    font-size: 3.0rem;
} 

@media screen and (max-width: 768px) {
    #top-wrapper .top_link .flex_box {
        width: 100%;
    }

    #top-wrapper .top_link .sns_icons {
        display: flex;
    }

    #top-wrapper .top_link .grnv a { 
        font-size: 2.6rem;
    }
}

/* =============================

    footer.php

==============================*/
#footer-wrapper {
    background-color: var(--yellow);
    color: var(--black);
}

#footer-wrapper .flex_wrap {
    width: 80%;
    margin: 0 auto;
}

#footer-wrapper .flex_box {
    width: calc(100% / 3);
}

#footer-wrapper .footer_info_ttl {
    font-size: 2rem;
}

#footer-wrapper .flex_box a {
    color: var(--black);    
}

#footer-wrapper .copyright {
    background-color: transparent;
    text-align: center;
}

@media screen and (max-width: 768px) {
    #footer-wrapper .flex_box {
        width: 100%;
        padding: 1rem;
    }
}

/* =============================

    404.php

==============================*/
#error-wrapper {
    max-width: 1080px;
    width: 100%;
    margin: 1.6rem auto;
    text-align: center;
    display: block;
}

#error-wrapper .error {
    text-align: left;
	display: inline-block;
    padding: 2rem;
}

#error-wrapper .error_ttl {
    margin: 2rem 0;
}

#error-wrapper .error_addtxt {
    margin: 1rem 0;
    font-size: 1.6rem;
}

#error-wrapper .error_addtxt a {
    color: var(--yellow);
    font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
    #error-wrapper .error_addtxt,
    #error-wrapper .error_addtxt a {
        font-size: 1.4rem;
    }
}