@charset "UTF-8";

/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 7.1
Requires PHP: 5.6
Version: 2.9.9
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog, portfolio

Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/
@import url('./layout.css');

/* Variables */
:root {


    /*--global--color--gray: #727171; 114 11 3113*/
    --global--color--gray: #dcdddd;
    --global--color--white: #ffffff;
    --global--color--brown: #b38470;
    --global--color--deepbrown: #9e6d5b;
    --global--color--verybrown: #221815;

    --global--color--blue: #19316b;
    --global--color--beige: #ebdfd7;

    --global--color--lightblue: #d4e4f2;
    --global--color--lightpink: #f2d9e3;

    --global--color--deeppink: #b2315d;


    --global--font--gothic: "Noto Sans JP", sans-serif;
}

html,body{
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    overflow-x: hidden;
}

.gothic{
    font-family: var(--global--font--gothic);
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

}



section.main{
    width: 100vw;
    height: 100vh;
    background: url('./assets/images/main-bg.webp?1') no-repeat 50% 50% / cover;
    position: relative;
    overflow: hidden;
}
section.main .open_date{
    position: absolute;
    bottom: -5px;
    line-height: 1;
    width: 100%;
    padding: 0 2rem;
    text-align: center;
}
section.main .open_date *{
    color: #fff;
    font-size: 8rem;
    letter-spacing: .1rem;
}
section.main .open_date span{ font-size: 4rem; margin-right: 1.5rem; }
section.main .open_date strong{ letter-spacing: .5rem; }






main.open .catch-box{ 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%; }



main.open .catch{
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50rem;
    width: 100%;
    height: 100%;
    max-height: 25rem;
    flex-direction: column;
    background-color: rgba(114, 113, 113, .7);
}
main.open .catch h2{
    max-width: 30rem;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 5rem;
}
main.open .catch p{
    font-weight: 700;
    font-size: 2.2rem;
    margin: 0;
    letter-spacing: .5rem;
    display: flex;
    height: 5.5rem;
    align-items: center;
    justify-content: center;
    color: var(--global--color--white);
    padding-left: 2rem;
    border-top: var(--global--color--white) .1rem solid;
}

main.open .catch .catch-inbox{ width: calc(100% - 2rem); height: calc(100% - 2rem); margin: 1rem; border: var(--global--color--white) .1rem solid; padding: 3rem 2rem 0;
    display: flex;
    flex-direction: column; justify-content: space-between; }

main.open .tit{ text-align: center; }



.contents{
    background-color: var(--global--color--gray);
}
.contents .inner{ padding-bottom: 7rem; }


.inner{
    max-width: 127rem;
    padding: 0 1.5rem;
    margin: 0 auto;
}

.contents-header{ padding: 7.5rem 0; }

.contents-header h3{ max-width: 35rem; margin: 0 auto 4rem; }
.contents-header p{  line-height: 2; text-align: center; font-weight: 700; }



.contents-body{ background-color: var(--global--color--white); padding: 0 3rem 5rem; }
.contents-body:not(:last-child){ margin-bottom: 1.5rem; }


.contents-body .catches{ margin: 3.5rem 0; text-align: center; }


.contents-body h3.title01{ display: flex; width: 30rem; height: 6rem; background-color: var(--global--color--brown); margin: 0 auto; border-radius: 0 0 1rem 1rem; }

.contents-body h3.title01 span{
    display: flex;
    border: #fff 1px solid;
    border-top: none;
    height: 55px;
    border-radius: 0 0 1rem 1rem;
    margin: 0 5px;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2.0rem;
    letter-spacing: 3px;
}

.contents-body h3.title01 span::before{ content: "・"; }
.contents-body h3.title01 span::after { content: "・"; }




.contents-body-01{ display: flex; flex-wrap: wrap; }

.contents-body-01 .contents-body-01-item{ width: 32%; margin-bottom: 3.5%; }


.contents-body-01 .contents-body-01-item .title{ display: flex; justify-content: space-between; }

.contents-body-01 .contents-body-01-item .title .point{ display: flex; width: 6rem; height: 6rem; background-color: var(--global--color--brown); border-radius: 20rem; flex-direction: column; align-items: center; justify-content: center; color: var(--global--color--white); line-height: 1.4; font-family: var(--global--font--gothic); }
.contents-body-01 .contents-body-01-item .title .point span{ line-height: 1; font-size: 1rem; }


.contents-body-01 .contents-body-01-item .title h4{ font-size: 2.4rem; color: var(--global--color--deepbrown); }
.contents-body-01 .contents-body-01-item .title h4 span{ display: block; font-family: var(--global--font--gothic); font-size: 1.25rem; }


.contents-body-01 .contents-body-01-item dl{ margin-top: 2rem; display: flex; flex-direction: row-reverse; justify-content: space-between; }
.contents-body-01 .contents-body-01-item dl dt{ max-width: 17.1rem; width: 100%; }
.contents-body-01 .contents-body-01-item dl dd{ width: calc(100% - 19rem); font-family: var(--global--font--gothic); font-size: 1.5rem; text-align: justify; }







.contents-body.contents-body-apps{ padding: 5rem 3rem; }


.contents-body-apps .title02{ display: flex; justify-content: center; align-items: center; color: var(--global--color--blue); font-size: 3rem; }
.contents-body-apps .title02 span{ border: var(--global--color--blue) .1rem solid; margin-right: 2rem; padding: 1rem 1.2rem 1rem .5rem; border-radius: 1rem; }
.contents-body-apps .title02 span img{ max-width: 5rem; }

.contents-body-02{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 4.5rem; }

.contents-body-02 .contents-body-02-item{ font-family: var(--global--font--gothic); width: 15.5%; background-color: var(--global--color--beige); padding: 3rem 2rem; }
.contents-body-02 .contents-body-02-item:not(:last-child){ margin-right: 1.4%; }



.contents-body-02 .contents-body-02-item .point,
.contents-body-02 .contents-body-02-item h4{ text-align: center; color: var(--global--color--deepbrown); }


.contents-body-02 .contents-body-02-item .point{ padding-bottom: .5rem; border-bottom: var(--global--color--deepbrown) .1rem solid; }
.contents-body-02 .contents-body-02-item h4{ display: flex; justify-content: center; align-items: center; height: 8rem; }
.contents-body-02 .contents-body-02-item p{ font-size: 1.4rem; }




.contents-body-03{ margin-top: 7rem; }
.contents-body-03 .title03{ font-family: var(--global--font--gothic); display: flex; justify-content: center; align-items: center; color: var(--global--color--blue); font-size: 2.2rem; }
.contents-body-03 .title03 span{ font-size: 2.6rem; }

.contents-body-03 ol{ display: flex; justify-content: space-between; font-family: var(--global--font--gothic); margin-top: 2rem; }
.contents-body-03 ol li{ width: calc(32% - 3rem); text-align: center; border-radius: .5rem; padding: .8rem 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }

.contents-body-03 ol li.b{ background-color: var(--global--color--beige); color: var(--global--color--deepbrown); }
.contents-body-03 ol li.p{ background-color: var(--global--color--lightblue); color: var(--global--color--blue); }
.contents-body-03 ol li.d{ background-color: var(--global--color--lightpink); color: var(--global--color--deeppink); }









.apps{ display: flex;flex-direction: column; margin-top: 10rem; }
.apps h5{ text-align: center; }










.apps h5 span{ position: relative; padding: 0 2rem; }
.apps h5 span:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(-25deg);
}
       
.apps h5 span:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background: #000;
    border-radius: 3px;
    transform: rotate(25deg);
}



.apps p{ display: flex; font-size: 1.4rem !important; align-items: center; }
.apps p span{ width: 8rem; margin-right: 1.5rem; }

.apps ul{ display: flex; margin: 3rem auto 0; }

.apps .icon{ width: 8rem; }
.apps img{ max-width: 100%; width: 100%; }

.apps ul{ width: 35rem; display: flex; justify-content: space-between; }
.apps ul li{ width: 10rem; }

.apps ul li span{ margin-bottom: .5rem; display: flex; align-items: center; height: 3.2rem; }







.accessmap iframe{ width: 100%; }




footer .inner{ padding: 5rem 1.5rem; display: flex; justify-content: space-between; }

footer .logo{ max-width: 35rem; width: 100%; }
footer .logo span{ background-color: var(--global--color--gray); color: var(--global--color--verybrown); font-weight: 700;     display: block;
    text-align: center;
    margin-top: 1.5rem;
    padding: 1rem .5rem;
    line-height: 1; }


footer .address *{ color: var(--global--color--verybrown); }
footer .address .tel{ margin: 1.2rem 0 1.8rem; }
footer .address .tel a{ font-weight: 700; font-size: 3.5rem; line-height: 1; display: flex; align-items: flex-end; }
footer .address .tel a span{ max-width: 4.4rem; width: 100%; margin-right: 1.5rem; }

footer .address ul{ display: flex; justify-content: space-between; width: 100%; }
footer .address ul li{ width: 32%; font-size: 1.2rem; padding: .8rem 0; border: var(--global--color--verybrown) .1rem solid; text-align: center; }


footer .remarks{ font-size: 1.2rem; margin-top: .8rem; color: var(--global--color--white); background-color: #544f4b; padding: .8rem 1rem; line-height: 1; text-align: center; }


@media screen and (min-width: 1246px) {



        .contents-body-01 .contents-body-01-item:not(:nth-child(3n)){ margin-right: 2%; }

        .contents-body-01 .contents-body-01-item .title h4{ width: calc(100% - 8rem); }
    
}



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


    .contents-body-02 .contents-body-02-item{ padding: 3rem 1.5rem; }


    .contents-body-01 .contents-body-01-item{ width: 49%; }
    .contents-body-01 .contents-body-01-item:nth-child(odd){ margin-right: 2%; }
    .contents-body-01 .contents-body-01-item .title{ display: block; text-align: center; }
    .contents-body-01 .contents-body-01-item .title .point{ margin: 0 auto 1.5rem; }
    .contents-body-01 .contents-body-01-item dl{ display: block; }
    .contents-body-01 .contents-body-01-item dl dt{ margin: 0 auto; }
    .contents-body-01 .contents-body-01-item dl dd{ width: 100%; margin-top: 1.5rem; font-size: 1.4rem; }



}





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



    .contents-body-02 .contents-body-02-item{ width: 32%; margin-bottom: 2%; }
}


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

    section.main .open_date span{ font-size: 3rem; }
    section.main .open_date *{ font-size: 7rem; }

}




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

    .contents-body-03 ol li{ flex-direction: column; }
}




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

    section.main .open_date span{ display: block; }

}





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

    .contents-body-apps .title02{ font-size: 2.4rem; }
    /* footer */
    footer .inner{ display: block; padding: 3.5rem 1.5rem; }

    footer .logo{ max-width: 25rem; margin: 0 auto; }
    footer .address .addresses{ display: table; margin: 2.5rem auto; }
    footer .address .tel a{ justify-content: center; }




}

@media screen and (max-width: 1180px) and (min-width: 769px) {

    .contents-body-02 .contents-body-02-item:nth-child(3n){ margin-right: 0; }
}


@media screen and (min-width: 811px) {
    .mini_tablet{ display: none; }
}



@media screen and (max-width: 810px) {
    .mini_tablet{ display: inherit; }

    .contents-body-03 ol li,
    .contents-body-03 ol li *{ font-size: 1.4rem; }
}



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


    .contents-body-02 .contents-body-02-item{ width: 49%; }

        main.open .catch .apps p{ 
                flex-direction: column;
    text-align: left;
    letter-spacing: .15rem;
    font-size: 12px !important; }

        .apps p span{     width: 11rem;     margin: 0 0 2rem;
    display: block; }

    .apps ul li{ width: 48%; }
    .apps ul li strong{ display: none; }

    .contents-body .catches{ margin: 2.5rem 0; }




    .contents-header{ padding: 3.5rem 0; }
    .contents-header h3{ max-width: 25rem; margin-bottom: 2rem; }



    .contents-body-apps .title02{ font-size: 2rem; }


    section.main .open_date strong{ font-size: 6rem; }

    .contents-body-03 .title03{ flex-direction: column; text-align: center; }


    .contents-body h3.title01{ height: 5rem; }
    .contents-body h3.title01 span{ font-size: 1.6rem; height: 4.5rem; }



    .contents-body-02{ margin-top: 2.5rem; }
    .contents-body-03{ margin-top: 4.5rem; }

    .apps{ margin-top: 5rem; }


    .contents-body{ padding: 0 1.5rem 3rem; }

    .contents-body-01 .contents-body-01-item .title h4{ width: 100%; }
    .contents-body-02 .contents-body-02-item{ width: 49.5%; margin-bottom: .5rem; }
    .contents-body-02 .contents-body-02-item:nth-child(odd){ margin-right: 0; }
    .contents-body-02 .contents-body-02-item:nth-child(even){ margin-right: 0; }
    
    .contents-body-03 ol{ display: block; }
    .contents-body-03 ol li { width: calc(100% - 3rem); flex-direction: row; }
    .contents-body-03 ol li:not(:last-child){ margin-bottom: .5rem; }

}










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


    /*.contents-body-03 ol li{ flex-direction: column; }*/



    .contents-body-apps .title02{ flex-direction: column; text-align: center; }
    .contents-body-apps .title02 span{ margin-right: 0; margin-bottom: 1.5rem; }

    .contents-body.contents-body-apps{ padding: 5rem 2rem; }






    main.open .catch-box{ padding: 0 2rem; }

    main.open .catch p{ font-size: 1.6rem;  padding-left: 1.5rem; }

    main.open .catch .catch-inbox{ justify-content: space-around; }


    .contents-body-01{ display: block; }
    .contents-body-01 .contents-body-01-item{ width: 100%; }
    .contents-body-01 .contents-body-01-item:nth-child(odd){ margin-right: 0; }



}


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


        section.main .open_date strong {
        font-size: 4.5rem;
    }

}


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

    .contents-body .catches{ font-size: 1.4rem; }

    .contents-body{ padding: 0 1.5rem 5rem; }


    main.open .catch p{ font-size: 1.4rem; }

    /* footer */
    footer .address ul{ display: block; }
    footer .address ul li{ width: 100%; }
    footer .address ul li:not(:last-child){ margin-bottom: .5rem; }

    footer .address .addresses{ font-size: 1.4rem; }





    .contents-body-02{ display: block; }
    .contents-body-02 .contents-body-02-item{ width: 100%; margin-right: 0; }




}



@media screen and (min-width: 501px) {

    .sp500{ display: inherit; }

}

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

    .sp500{ display: none; }


    .contents-header p{ text-align: left; font-size: 1.4rem; }

}



@media screen and (min-width: 496px) {
    .mini_sp{ display: none; }
}

@media screen and (max-width: 495px) {
    .mini_sp{ display: inherit; }
    footer .remarks{ line-height: 1.4; }
}


@media screen and (max-width: 480px) {
    footer .address .addresses{ font-size: 1.2rem; }

        section.main .open_date strong {
        font-size: 9vw;
    }

    .apps ul{ flex-direction: column; align-items: center; width: 100%; }


    .apps ul li span{ height: auto; }

    main.open .catch p{ font-size: 3.5vw; }
}