@charset 'UTF-8';

/*
主たるブレイクポイント
750px
*/


/*=====================
全サイズ共通 & 汎用クラス
=====================*/

html {
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.8;
    color: #333;
    background: #e3e3e3;
    font-family:"游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, YuGothic, sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #fff;
}

main {
    z-index: 100;
    margin: auto;
}

.inner {
    max-width: 1200px;
    padding: 0 5%;
    margin: auto;
}

h1,h2,h3,h4,h5{
    font-weight: bold;
}

@media screen and (min-width:600px) {
    .br_sp {
        display: none;
    }
}
/*min-width:600px*/

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

    body {
        font-size: 1.4rem;
    }

    .inner {
        padding: 0 5%;
    }

    .br_pc {
        display: none;
    }
}

li {
    list-style: none;
    letter-spacing: 0.04em;
}

a.text_link{
    text-decoration: underline;
}

/*===================
フッター
=====================*/

footer .copy{
    width: 100%;
    font-size: 1.4rem;
    margin-top: 90px;
    padding-bottom: 20px;
}

footer ul li img{
    height: 25px;
    padding-bottom: 6px;
    margin: auto;
}

footer .top_copy li img{
    filter: invert(100%);
}


@media screen and (max-width:750px) {
    footer .copy{
        font-size: 1rem;
        margin-top: 40px;
    }

    footer .copy small ul li img{
        height: 4.8vw;
    }
}

/*max-width:750px*/


/*===================
トップページ
=====================*/

#top header{
    max-width: 1200px;
    padding: 0 30px;
    margin: auto;
    margin-bottom: 60px;
}

#top .top_banner li{
    margin-bottom: 45px;
    padding: 45px;
    padding-top: 35px;
    background-color: #efefef;
    @media screen and (max-width:750px){
            padding: 5%;
            margin-bottom: 30px;
    }
}

#top .top_banner li p{
    font-size: 2rem;
    font-weight: bold;
    line-height: 1.3;
    @media screen and (max-width:750px){
        font-size: 1.7rem;
    }
}

#top .top_banner li p span{
    display: block;
    margin: 10px 0;
    font-size: 1.6rem;
    @media screen and (max-width:750px){
        font-size: 1.3rem;
    }
}

#top .top_banner li img{
    box-shadow: 0px 0px 7px #bbbbbb;
    transition: .3s;
}

#top .top_banner li img:hover{
    opacity: .7;
}

@media screen and (max-width:750px){
    
    #top header{
            max-width: unset;
            padding: 0;
    }
    
    #top .top_banner li{
            padding: 5%;
            margin-bottom: 30px;
    }
    
    #top .top_banner li p{
            font-size: 1.7rem;
    }
    
    #top .top_banner li p span{
            font-size: 1.3rem;
    }
}

/*===================
下層
=====================*/

#under header{
    text-align: center;
    margin-bottom: 120px;
}

.svt{
    background-color: #f2f2f3;
}

.txt{
    background-color: #d3d3d4;
}

.lsf{
    background-color: #f2f2f3;
}

.svt header{
    background-color: #ffeb00;
    padding: 90px 90px 120px;
}

.txt header{
    background-color: #2a6240;
    padding: 90px 0 120px;
}

.lsf header{
    background-color: #231815;
    padding: 90px 0;
}

.svt header .header_title,.txt header .header_title{
    max-width: 1200px;
    padding: 0 5%;
    margin: auto;
}

.svt header .header_title img,.txt header .header_title{
    width: 100%;
}

.lsf header .header_title{
    max-width: 1200px;
    padding: 0 5%;
    margin: auto;
}

.lsf header .header_title img{
    width: 50%;
}

#under header .header_reserve{
    position: relative;
    max-width: 1200px;
    margin: auto;
}

.svt header .header_reserve img{
    position: absolute;
    right: -60px;
    bottom: -200px;
    max-width: 180px;
    width: 20vw;
}

.txt header .header_reserve img,.lsf header .header_reserve img{
    position: absolute;
    right: 10px;
    bottom: -200px;
    max-width: 180px;
    width: 20vw;
}

#under .design{
    margin-bottom: 80px;
}

#under .item h2{
    font-size: 3rem;
    text-align: left;
}

#under .item h2 span{
    font-size: 1.8rem;
}

.price{
    text-align: left;
    font-weight: bold;
    font-size: 2.3rem;
    margin: 30px 0;
}

#under .information{
    margin-bottom: 120px;
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.7;
}

#under .information p{
    display: inline;
    margin-right: 10px;
    font-weight: bold;
}

#under .note{
    text-align: left;
    margin-bottom: 120px;
}

#under footer{
    padding-top: 60px;
}

.svt footer{
    background-color: #00a23f;
}

.txt footer{
    background-color: #ed7a94;
    color: #fff;
}

.lsf footer{
    background-color: #231815;
    color: #fff;
}

#under .reserve{
    font-size: 3rem;
    font-weight: bold;
}

.svt .reserve{
    color: #fff;
}

#under .reserve h2{
    font-size: 4rem;
    line-height: 1.4;
    width: fit-content;
    margin: auto;
    margin-bottom: 30px;
}

#under .link_list h3{
    font-size: 2.3rem;
}

#under .link_list ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap:10px;
    margin-bottom: 30px;
}

.lsf .link_list a{
    color:#000;
    background-color:#fff;
    font-size: 2.3rem;
    font-weight: normal;
    border-radius: 3px;
    padding: 10px 20px;
}

.svt .link_list a{
    color:#00a23f;
    background-color:#fff;
    font-size: 2.3rem;
    font-weight: normal;
    border-radius: 3px;
    padding: 10px 20px;
}

.txt .link_list a{
    color:#2A6240;
    background-color:#fff;
    font-size: 2.3rem;
    font-weight: normal;
    border-radius: 3px;
    padding: 10px 20px;
}


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

    #under header{
            margin-bottom: 60px;
    }
    
    .svt header{
            padding: 40px 60px 60px;
    }
    
    .txt header{
            padding: 40px 0 45px;
    }
    
    .lsf header{
            padding: 40px 0;
    }
        
    .lsf header .header_title img{
            width: 70%;
    }
        
    .svt header .header_reserve img{
            right: -35px;
            bottom: -110px;
            max-width: 100px;
            width: 20vw;
    }
    
    .txt header .header_reserve img,.lsf header .header_reserve img{
            right: 10px;
            bottom: -90px;
            max-width: 100px;
            width: 24vw;
    }
    
    #under .design{
            margin-bottom: 60px;
    }
    
    .lsf .design img{
            width: 75%;
    }
    
    #under .item h2{
            font-size: 2rem;
            line-height: 1.2;
            margin-bottom: 20px;
    }
    
    #under .item h2 span{
            font-size: 1.4rem;
    }
    
    #under .price{
            font-size: 1.8rem;
            margin: 20px 0;
    }
    
    #under .information{
            margin-bottom: 60px;
            font-size: 1.4rem;
            line-height: 1.5;
    }
    
    #under .information p{
            display: block;
    }

    #under .note{
        margin-bottom: 60px;
    }
    
    #under footer{
            padding-top: 40px;
    }

    #under .reserve{
            font-size: 1.6rem;
    }

    #under .reserve h2{
        font-size: 2rem;
        margin-bottom: 15px;
    }

    #under .link_list h3{
        font-size: 1.6rem;
        margin-bottom: 10px;
    }
    
    #under .link_list ul{
        gap:20px 10px;
        margin-bottom: 30px;
    }
    
    #under .link_list a{
        font-size: 1.6rem;
        padding: 8px 10px;
    }
}

.svt .reserve h2{
    text-shadow: 0px 3px 2px #0000001f;
    background:linear-gradient(transparent 60%, #e89ebe 60%);
}

.txt .reserve h2{
    text-shadow: 0px 3px 2px #0000001f;
    background:linear-gradient(transparent 60%, #42ae72 60%);
}

.lsf .reserve h2{
    text-shadow: 0px 3px 2px #0000001f;
    background:linear-gradient(transparent 60%, #c9375e 60%);
}