@charset "utf-8";

/*----------------------------------------------
初期設定 
-----------------------------------------------*/
#container {
    margin: 0 auto; 
}

* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'M PLUS 1p', sans-serif; 
    color: #222;
    letter-spacing: 0.15rem;
}

img {
    width: 100%;
    vertical-align: bottom;
}

li {
    list-style: none;
}

a small {
    text-decoration: none;
}

address{
    font-style:normal;
    color: #222222;
}

figure{
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

dt {
    font-size: 1.2px;
}

a {
    color: #222222;
    text-decoration: none;
}
.pc-only {
    display: block;
    margin: auto;
  }
  .sp-only {
    display: none;
  }
  .sp-xs-only {
    display: none;
  }

/*----------------------------------------------
PC ※1025px以上
-----------------------------------------------*/
.sns {
    background-color: #18355F;
    z-index: 150;
    position: fixed;
    padding: 8px;
    right: 0px;
    top: 200px;
}

.snsIMG {
    width: 20px;
    margin: 6px auto;
    height: auto;
}

.mainVisual {
    width: 100%;
    height: 700px;
    background-image: url(../images/mainvisual.jpg);
    background-repeat: none;
    background-size: cover;
    background-position: center;
    position: relative;
    margin-bottom: 84px;
}

.cliche {
    color: #fff;
    font-size: 2.2rem;
    position: absolute;
    top: 45%;
    left: 25%;
    transform: translate(-50%, -50px);
}

.smallT {
    font-size: 0.7em;
}
.bigT {
    font-size: 1em;
}

h1 {
    width: 200px;
    height: auto;
    padding-left: 10px;
}

#navi02,#navi03 {
    width: 100%;
    margin: 0 auto;
}

#navi04 {
    width: 70%;
    margin: 0 auto;
}

h2 {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-top: 100px;
}

.center {
    text-align: center;
    margin-bottom: 50px;
}

.content .text02 {
    font-size: 1.4rem;
    line-height: 1.8em;
    letter-spacing: 0.2rem;
}

.text01 {
    font-size: 1.8rem;
    margin-bottom: 40px;
    text-align: center;
}

.difference {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 100px;
}

.sec01 {
    display: flex;
    margin-bottom: 136px;
    width: 80%;
    align-items: center;
    margin: 0 auto;
}

.flex {
    margin: 0 auto;
}

.text02 {
    margin-bottom: 20px;
}

.ownerImg{
    width: 320px;
    height: auto;
    margin-right: 100px;
/* box-shadow: 1px 4px 7px rgb(0 0 0 / 20%); */
}

.photoList  {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px 0px;
}
.pdg10 {
    padding: 0px 10px 0px 10px;
}

.photoList a img {
    height: auto;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.6);
    align-items: center;
}

.flex02 {
    display: flex;
    flex-direction: row-reverse ;
    margin: 40px auto;
}

.materialImg img {
    width: 360px;
    margin: 5px 40px 0px 0px;
}

.position01 {
    position: relative;
}

.wdIcon {
    position: absolute;
    width: 20px;
    right: 12%;
    bottom: 10px;
}

.wdIcon02 {
    position: absolute;
    width: 20px;
    right: 3%;
    bottom: 18px;
}

h3 {
    font-size: 2.0rem;
    margin-bottom: 10px;
}

.business {
    padding-bottom: 4px;
    border-bottom: solid 3px #293189;
}

.exclusive {
    padding-bottom: 4px;
    border-bottom: solid 3px #3a3f3b;
}

.luxury {
    padding-bottom: 4px;
    border-bottom: solid 3px #932e44;
}

.premium {
    padding-bottom: 4px;
    border-bottom: solid 3px #401341;
}

.lineExplain01 {
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.backGC01 {
    background-color: #F0EDED;
    padding: 10px 0px 80px 0px;
    margin-top: 100px;
}

.standardEquipment, .option {
    font-size: 2.4rem;
}

optioN {
    display: flex;
}

.photoList02  {
    list-style: none;
    display: flex;
    justify-content: center;
    margin: 40px auto;
}

.flexNon {
    display: inline;
}

.wid20 {
    width: 300px;
    text-align:start;
    margin: 0 20px;
}

.padB12 {
    padding-bottom: 12px;
    font-size: 1.2rem;
}

.bold {
    font-weight: 800;
    font-size: 1.6rem;
    display:inline-block;
    padding-bottom: 8px;
}

/* モーダル */
.flexNon a:hover {
    opacity: 0.8;
  }

.flexNon a img {
    width: 100%;
  }

.flex02Left a:hover {
    opacity: 0.8;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
  }

.modal--side {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}

.bigimg {
    position: absolute;
    width: 70%;
    max-width: 400px;
    top: 120px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
  }

.bigimg--side {
    position: absolute;
    width: 70%;
    max-width: 80%;
    top: 120px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
  }

.close-btn {
    color: #fff;
    font-size: 40px;
    position: absolute;
    right: 10%;
    top: 70px;
  }

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

.close-btn--side {
    color: #fff;
    font-size: 40px;
    position: absolute;
    right: 10%;
    top: 70px;
  }

.close-btn--side a {
    color: #fff;
    text-decoration: none;
  }

/* モーダルend */


.sec05 {
    width: 80%;
    margin: 0 auto;
}

.bland {
    font-size: 2.4rem;
}

.flexTextRight, .flexTextLeft {
    display: flex;
    margin-bottom: 20px;
}

.flexTextRight {
    flex-direction: row-reverse ;
}

.materialBlandImg img {
    width: 360px;
    margin: 0px 20px 0px 0px;
}

.left img {
    margin: 0px 0px 0px 20px;
}

.blandExplain {
    background-color: #fff;
    padding: 0px 10px;
    /* height: 270px; */
}

.blandName {
    font-size: 1.8rem;
    text-align: center;
    margin: 10px;
}
.listtitle {
    font-size: 1.6rem;
    padding-left: 5%;
}

.underline01 {
    padding-bottom: 3px;
    border-bottom: solid 2px #627491;
}

.blandDetail {
    font-size: 1.4rem;
    padding: 4px;
}

.sec06 {
    width: 70%;
    margin: 0 auto;
}

.howToOrder{
    text-align: center;
}

.flexOrderPC {
    display: flex;
    margin: 0 auto;
}

.flexOrderSP {
    display: none;
}

#navi06 {
    width: 100%;
    background-size: cover;
}

.phrase01 {
    text-align: center;
    font-size: 1.4rem;
    margin: 30px 0px 70px;
}

.phrase02 {
    color: #fff;
    font-size: 1.2rem;
    margin: 0px 40px;
    padding-bottom: 10px;
}

.reservedButtun {
    display: flex;
}

.contact {
    margin: 70px auto 0px;
    font-size: 1.8rem;
    color: #222;
    display: block;
    width: 200px; 
    text-align: center;
    text-decoration: none;
    padding: 6px;
    top: 0px;
    border: #707070 solid 0.1rem;
    border-radius: 50px;
    transition: opacity 0.5s;
    text-decoration: none;
}

footer {
    background-color: #000;
    width: 100%;
    padding: 20px;
}
  
small {
    font-size: 1rem;
    display: block;
    color: #fff;
    font-weight: 900;
    text-align: center;
    padding-top: 10px;
    position: relative;
    bottom: 17px;
}

small a {
    font-size: 1rem;
    color: #fff;
    text-decoration: none;
}

.backTopB {
    display: block;
    width: 40px;
    height: 40px; 
    line-height: 38px;
    text-decoration: none;
    background-color: #fff;
    border: solid 2px #18355F;
    text-align: center;
    position: fixed;
    right: 30px;
    bottom: 20px;
    padding: 8px 5px 5px 5.5px;
}

.triangle{
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 16px solid #18355F;
  }

.backTopB span {
    display: block;
    padding-left: 1.5px;
}

.mgt150 {
    margin-top: 150px;
}
.border {
    border-bottom: solid 0.5px #222;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

.flex_ul {
    display: flex;
    justify-content: flex-end;
}
.flex_ul li {
    list-style: none;
    margin: 20px;
    font-size: 1.4rem;
}
.ul01 {
    margin: 20px;
    font-size: 1.4rem;
    line-height: 26px;
    position: relative;
}
.index01  {
    z-index: 100;
}
.flex_ul .position001 {
    position: absolute;
    display:flex;
    top: -26px;
    right: -20px;
}
.flex_ul .mg40 {
    margin: 20px 40px 20px 40px;
}
.flex_ul .mg50 {
    margin: 20px 50px 20px 40px;
}
.flex_ul .mg20 {
    margin: 20px 16px 20px 40px;
}


  /*----------------------------------------------
タブレット設定 ※600px以上1024px以下
-----------------------------------------------*/

@media (max-width:1024px) {

    h2 {
        margin-top: 80px;
        width: 100%;
        text-align: left;
    }

    /* #navi03 {
        width: 90%
    } */
    .smallT {
        margin-left: 5%;
    }
    .bigT {
        margin-left: 5%;
    }

    #navi04 {
        width: 95%;
    }

    .photoList  {
        padding: 0px;

    }

    .photoList img {
        height: auto;
    }

    h1 img {
        width: 80%;
        height: auto;
        width: 80%;
        padding-left: 10px;
        z-index: 200;
    }

    .cliche {
        font-size: 2.2rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50px);
    }

    .ownerImg {
        margin: 0 auto 50px;
    }

    .sec01, .flex02, .flexTextRight, .flexTextLeft{
        flex-direction: column-reverse ;
        text-align: center;
    }

    .content .text02 {
        padding-right: 0px; 
   }
   
    .flex {
        padding: 0; 
    }

    .materialImg img  {
        width: 100%;
        margin: 0px 0px 20px;
        position: relative;
    }

    .flex02Left {
        position: relative;
    }

    .wdIcon {
        right: 2%;
        bottom: 30px;
    }

   .materialBlandImg img{
        width: 100%;
    }

    .photoList02 img {
        margin: 0px; 
    }

    header {
        background-position: 26%;
        margin-bottom: 24px;
      }

    .center {
        font-size: 2.2rem;
    }

    .text01  .text02 {
        font-size: 1.6rem;
    }

    .difference {
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 50px;
    }

    .flex02 {
        text-align: center;
    }

    .lineExplain01 {
        margin: 30px auto 20px;
        max-width: 70%;
    }

    .deadline .price {
        margin: 0 auto;
        text-align: left;
    }

    .center {
        margin-bottom: 36px;
    }
    

    .flex02Right {
        margin-bottom: 10px;
    }

    .backGC01 {
        margin-top: 0px;
    }
    .wid20 {
        width: 250px;
        text-align: start;
        margin: 0 10px;
    }
    .left img {
        margin: 0px;
    }
    .mgb20 {
        margin-bottom: 20px;
    }

}

  /*----------------------------------------------
スマホの設定 ※600px以下
-----------------------------------------------*/
@media (max-width: 600px) {
    .pc-only {
        display: none;
      }
    .sp-only {
        display: block;
      }
    .sp-xs-only {
        display: none;
      }

    h2 {
        width: 100%;
        margin: 40px 0px;
        text-align: left;
    }
    .mgb20 {
        margin-bottom: 20px;
    }
    .mgb60 {
        margin-bottom: 60px;
    }
    .mgt150 {
        margin-top: 0px;
    }

    .backGC01 {
        padding: 10px 0px 40px 0px;
    }

    .cliche {
    color: #fff;
    font-size: 1.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50px);
    }

    .smallT {
    font-size: 0.7em;
    }   

    .photoList {
        display: block;
        width: 90%;
        margin: 0 auto;
    } 
    .pdb10 {
        padding-bottom: 10px;
    }

    .lineExplain01 {
        max-width: 90%;
    }

    #navi05 {
        width: 80%;
    }

    .flexOrderPC {
        display: none;
    }
    
    .flexOrderSP {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .phrase02 {
        margin: 0px auto;
        text-align: center;
        padding-bottom: 18px;
    } 

    small {
        font-size: 1rem;
    }

    .photoList02 {
        display: block;
        margin: 0px;
    }

    .backTopB {
    display: block;
    width: 30px;
    height: 30px; 
    line-height: 38px;
    text-decoration: none;
    background-color: #fff;
    border: solid 2px #18355F;
    text-align: center;
    position: fixed;
    right: 10px;
    bottom: 10px;
    padding: 5px 5px 8px 3px;
}

.triangle{
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 16px solid #18355F;
  }

.backTopB span {
    display: block;
    padding-left: 2px;
}
.sec05 {
    width: 90%;
} 

}/* 600px END*/

  /*----------------------------------------------
最小の設定 ※459px以下
-----------------------------------------------*/
@media (max-width: 459px) {

    .ownerImg {
        width: 80%;
    }

    .materialImg img {
        width: 90%;
        height: auto;
        margin: 0px 0px 20px;
    }

    /* .materialBlandImg img {
        width: 100%;
        margin: 0px 0px 20px 0px;
    } */

    .text01 {
        font-size: 1.4rem;
    }

    .lineExplain01 {
        max-width: 90%;
    }

    #navi05 {
        width: 90%;
    }

    .flexOrderPC {
        display: none;
    }
    
    .flexOrderSP {
        display: block;
        width: 80%;
        margin: 0 auto;
    }
    .itemName05,.itemName06 {
        font-size: 0.7rem;
    }

    .wdIcon {
        right: 10%;
        bottom: 30px;
    }

}/* 459px END*/


  /*----------------------------------------------
policy
-----------------------------------------------*/

.inner {
    color: #888888;
    background-color: #FFFFFF;
    font-size: 1.2rem;
    display: block;
    max-width: 80%;
    margin: 50px auto;
    padding: 0;
    text-align: left;
    word-wrap: break-word;
}

.color a {
    color: #888888;
}

.mainVisual  {
    margin-bottom: 0px;
}

.mainVisual--sub {
    height: 300px;
    background-position: top;
}


.ppT {
    width: 100%;
    font-size: 2.8rem;
    margin-bottom: 40px;
    padding-left: 0;
}

.ppP {
    font-size: 2.2rem;
    margin: 0px 0px 10px;
}

.fS16 {
    font-size: 1.6rem;
}

@media (max-width: 600px) {
    .mainVisual--sub {
        height: 200px;
        background-position: top;
    }
}