/* 共通 ---------------------------------  */
@font-face {
    font-family: 'Noto Serif JP';/* フォント名 */
    src: url('../fonts/NotoSerif-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Playfair Display';/* フォント名 */
    src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
}

* { box-sizing: border-box; }
a,
a:visited,
a:active {
  text-decoration: none;
  /* color: #4b4a4a; */
}
::-moz-selection {
	color: #fff;
	background-color: #797979;
}
::selection {
	color: #fff;
	background-color: #797979;
}
ul,ol {
    padding: 0;
    margin: 0;
    list-style: none;
}
p,li {
    padding: 0;
    margin: 0;
}
h2,h3,h4 {
    text-align: center;
}
h2::before {
    display: block;
    text-align: center;
    font-size: 0.8rem;
}
.btn {
    display: inline-block;
    text-align: center;
    border-radius: 8px;
    margin: 4px;
    padding: 5px 0;
    width: 130px;
    color: #fff;
    background: #4b4a4a;
    font-size: 0.8rem;
}
.switch_nakamozu {
    background: #4b4a4a;
    color: #fff;
    border: solid 2px #fff;
}
.switch_honmachi {
    background: #fff;
    color: #4b4a4a;
    border: solid 2px #4b4a4a;
}
.honmachi_content {
    display: none;
}
.nakamozu_content {
    display: block;
}
.switch_content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.switch_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 0;
    margin: 5px;
    width: 180px;
    height: 52px;
    /* border: solid 2px #4b4a4a; */
    /* background: #fff; */
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1rem;
    font-family: 'Noto Serif JP';
}
.header_btn_box a:visited {
    color: #fff;
}
.btn_header {
    margin-right: 15px;
}
.btn_bg {
    width: 150px;
}
.btn_box {
    padding: 25px 0;
    text-align: center;
}
.btn_box a:visited{
    color: #fff;
}
.note {
    font-size: 0.8rem;
    color: #797979;
}

/* ヘッダー -------------------------------  */
header {
    width: 100%;
    height: 60px;
    display: flex;
    top: 0;
    left: 0;
    z-index: 999; /* 一番上のレイヤーに配置 */
    position: fixed;
    background-color: #fff;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.05);
}
.hd_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px;
}
.logo {
    width: 160px;
}

/* ボディ ---------------------------------  */
body {
    font-family: 'Noto Serif JP', sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.2rem; /* 文字間隔 */
    line-height: 1.5rem; /* 行間 */
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background-color: #fff;
}
main {
    margin-top: 60px; /* ヘッダーの高さに合わせて開始位置を調整 */
}
section {
    padding: 20px 0; /* 上下 左右 */
}
/* ボディ- アイキャッチ --------------------  */
.cth_container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 500px;
    padding: 20px;
    background-image: url('../images/studio.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    color: #fff;
}
.cth_container h1::before {
    content: 'photo studio';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 10px;
}
.img-frame{
    position: relative;
    width: 100%;
    height: 500px;
    padding: 20px;
    overflow: hidden;
    margin: 0 auto;
}
.img-01, .img-02 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.img-01 {
    background-image: url('../images/studio_n.jpg');
    animation: slide-animation-01 24s infinite;
}
.img-02 {
    background-image: url('../images/h_gly01n.jpg');
    animation: slide-animation-02 24s infinite;
}
.img-01 h1::before {
    content: 'photo studio';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 10px;
}
.img-01 h1::after {
    content: 'なかもず';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-top: 10px;
}
.img-02 h1::before {
    content: 'movie studio';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 10px;
}
.img-02 h1::after {
    content: 'ほんまち';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-top: 10px;
}
@keyframes slide-animation-01 {
    /* 0% {opacity: 1; transform: scale(1.0);}
    30% {opacity: 1;}
    40% {opacity: 0; transform: scale(1.15);}
    90% {opacity: 0}
  100% {opacity: 1; transform: scale(1.0);} */
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes slide-animation-02 {
    /* 0% {opacity: 0;}
  30% {opacity: 0; transform: scale(1.1);}
  40% {opacity: 1;}
  60% {opacity: 1;}
  70% {opacity: 0; transform: scale(1.0);}
100% {opacity: 0;} */
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

/* ボディ- コンセプト  ---------------------  */
.cct_container {
    padding: 50px 0;
}
.cct_content {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}
.cct_txt_box {
    margin-top: 20px;
    line-height: 1.8rem;
}
.cct_container h2::before {
    content: 'コンセプト';
}
.cct_container.photo h3::before{
    content: 'Photo Studio -なかもず店-';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 10px;
}
.cct_container.movie h3::before{
    content: 'Movie Studio -ほんまち店-';
    display: block;
    text-align: center;
    font-size: 1rem;
    padding-bottom: 10px;
}
/* ボディ- 利用シーン  ---------------------  */
.sn_container {
    padding: 50px 0;
}
.sn_container h2::before {
    content: 'ご利用シーン';
}
.sn_container h3 {
    display: inline-block;
    padding: 0 15px;
}
.sn_content_box {
    max-width: 800px;
    margin: auto;
}
.sn_content {
    display: flex;
    align-items: center;
    justify-content: left;
    flex-wrap: wrap-reverse;
    text-align: center;
    padding: 20px 0;
}
.sn_content p {
    text-align: left;
    padding: 0 0 10px 25px; /* 上 右 下 左 */
    width: 315px;
}
.sn_content_right p {
    text-align: right;
    padding: 0px 25px 10px 0;
}
.sn_content_right {
    justify-content: right;
    flex-wrap: wrap;
}
.sn_num {
    font-family: 'Playfair Display';
    font-size: 2rem;
    padding-right: 10px;
}
.sn_content_img_box_grey {
    position: relative;
    width: 350px;
    height: 225px;
    background-color: #cbcbcb;
}
.sn_img {
    position: absolute;
    top: 8%;
    left: 8%;
    width: 350px;
    height: auto;
    padding: 0 15px;
    z-index: 0;
}
.sn_img_right {
    top: 8%;
    left: -8%;
    padding: 0 15px;
}
/* ボディ- ギャラリー  --------------------  */
.gly_container {
    padding: 50px 0;
}
.gly_container h2::before {
    content: 'ギャラリー';
}
.gly_content {
    max-width: 800px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.gly_content li {
    display: inherit;
}
.gly_content img {
    width: 200px;
    height: auto;
    padding: 3px;
}

/* ボディ- 設備サービス  --------------------  */
.fs_container {
    padding: 50px 0;
}
.fs_container h2::before {
    content: '設備・サービス';
}
.fs_content_free {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-width: 800px;
    padding: 10px 0;
    margin: auto;
}
.fs_content {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-width: 400px;
    padding: 10px 0;
    margin: auto;
}
.fs_content_honmahci_free {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    max-width: 800px;
    padding: 10px 0;
    margin: auto;
}
.fs_content_honmahci {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: space-evenly;
    /* max-width: 759px; */
    max-width: 800px;
    padding: 10px 0;
    margin: auto;
}
.fs_item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 0;
    margin: 5px;
    width: 180px;
    height: 52px;
    border: solid 2px #4b4a4a;
    border-radius: 10px;
    font-size: 0.8rem;
    line-height: 1rem;
}
.fs_content_free::before,
.fs_content_honmahci_free::before,
.fs_content_honmahci::before
{
    content: '';
    margin: 5px;
    width: 180px;
    height: 52px;
    order: 1;
}
.fs_content_free::after,
.fs_content_honmahci_free:after,
.fs_content_honmahci::after
{
    content: '';
    margin: 5px;
    width: 180px;
    height: 52px;
}
.fs_img {
    width: 200px;
    height: auto;
    padding: 3px;
}

/* ボディ- プラン  -------------------------  */
.pl_container {
    padding: 50px 0;
}
.pl_container h2::before {
    content: 'プラン';
}
.pl_container p {
    text-align: center;
}
.pl_content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
table {
    margin: 5px;
    width: 300px;
    border-collapse: collapse;
    border: solid 1.5px #4b4a4a;
}
tbody {
    background-color: #fff;
}
table tr {
    width: 300px;
    text-align: center;
}
table th {
    padding: 15px;
    color: #fff;
    background-color: #4b4a4a;
}
table td {
    width: 180px;
    padding: 15px 0;
    text-align: center;
}
table .note {
    display: inline-block;
}
.pl_time {
    display: inline-block;
    border-bottom: solid 1.5px #e8e8e8;
}
.pl_date {
    display: inline-block;
    padding-bottom: 25px;
}
.pl_price {
    padding-top: 10px;
    font-size: 1.15rem;
    font-weight: bold;
}

/* ボディ- 利用方法  ----------------------  */
.use_container {
    padding: 50px 0;
}
.use_container h2::before {
    content: 'ご利用方法';
}
.use_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 700px;
    margin: auto;
    padding: 0 10px;
}
.use_item {
    position: relative;
    display: flex;
    align-items: stretch;
    line-height: 1.2rem;
    margin: 20px 0;
    min-height: 110px;
    background-color: #e8e8e8;
}
.next::after {
    position: absolute;
    content: url('../images/arrow.png');
    top: 100%;
    left: 45%;
    display: block;
    color: #797979;
    font-size: 1.3rem;
    font-weight: bold;
}
.use_num {
    font-family: 'Playfair Display';
    text-align: center;
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    background-color: #4b4a4a;
}
.use_item_left {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    background-color: #4b4a4a;
}
.use_item_right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 20px;
}
.use_title {
    margin-bottom: 10px;
    font-weight: bold;
}
.use_img {
    height: 100px;
    width: 100px;
}
.use_text {
    text-align: left;
    font-size: 0.8rem;
}

/* ボディ- アクセス  ----------------------  */
.acs_container {
    padding: 50px 0;
}
.act_content_1st h2::before {
    content: 'アクセス';
}
.acs_map_content {
    text-align: center;
}
.acs_google_map {
    width: 95%;
    max-width: 500px;
    margin: auto;
}
.acs_root_content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    max-width: 500px;
    margin: 10px auto;
}
.acs_root_content::after {
    content: '';
    width: 145px;
}
.acs_root_item {
    margin: 10px;
}
.acs_root_text_box {
    text-align: left;
    line-height: 1rem;
    width: 145px;
    font-size: 0.7rem;
}
.acs_root_img {
    width: 145px;
}

/* フッター -------------------------------  */
footer {
    width: 100%;
}
.ft_container {
    padding-top: 20px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #e8e8e8;
}
.ft_container h4 {
    margin-top: 10px;
    margin-bottom: 0;
}
.ft_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
}
.ft_title {
    font-size: 1.2rem;
    font-weight: 900;
    margin: 10px 0
}
.ft_contact_box {
    display: flex;
}
.ft_contact_left {
    text-align: right;
}
.footer_item {
    display: flex;
    flex-direction: column;
    align-items: left;
}
.footer_icon {
    width: 18px;
    height: auto;
}
.ft_txt {
    margin-top: 5px;
    font-size: 0.8rem;
    font-weight: 600;
}
.ft_txt_small {
    font-size: 0.7rem;
    margin-top: 0;
}
.ft_logo {
    width: 130px;
}
.sns_img {
    width: 40px;
    height: 40px;
}
.copy_right_txt {
    width: 100%;
    text-align: center;
    line-height: 1.15rem;
    font-size: 0.5rem;
    color: #fff;
    background-color: #4b4a4a;
}
.ft_service_row {
    display: flex;
}
.ft_service_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 10px;
}
.ft_sns {
    padding-top: 10px;
}

/* レスポンシブ対応 -----------------------  */
/* ギャラリー: 疑似要素を追加して画像を左寄せにする */
@media screen and (max-width: 799px) {
    .gly_content {
        max-width: 600px;
        margin: auto;
    }
    .gly_content::after {
        content: '';
        display: block;
        width: 200px;
    }
    .gly_content::before {
        content: '';
        display: block;
        width: 200px;
        order: 1;
    }
}
@media screen and (max-width: 599px) {
    .gly_content {
        max-width: 400px;
        margin: auto;
    }
}
@media screen and (max-width: 499px) {
    body {
        font-size: 14px;
    }
    .eyecatch_box {
        width: 100%;
    }
    .gly_content {
        max-width: 300px;
        margin: auto;
    }
    .gly_content::after {
        content: '';
        display: none;
        width: 150px;
    }
    .gly_content::before {
        content: '';
        display: none;
        width: 150px;
        order: 1;
    }
    .gly_content img {
        width: 150px;
        height: auto;
    }
    .use_item {
        flex-direction: column;
    }
    .use_item_left {
        height: 35px;
        padding-bottom: 8px;
        width: 100%;
    }
    .use_title {
        text-align: center;
    }
    .acs_root_content {
        max-width: 350px;
    }
}
@media screen and (max-width: 379px) {
    .fs_content_free::before {
        display: none;
    }
    .fs_content_free::after {
        display: none;
    }
}
@media screen and (max-width: 280px) {
    .gly_content {
        max-width: 200px;
        margin: auto;
    }
}