charset "utf-8";


/* //////////////////////////////////////////

  “FARNEST IJIRI GRACE”

 -----------------------------------------
  common.css
 -----------------------------------------

  1.リセット

  2.共通パーツ

  3.フレームワーク
  
  4.コンテンツ

////////////////////////////////////////// */

/* 1.リセット
////////////////////////////////////////// */
*{
    margin: 0;
    padding: 0;
    }

html{
    height: 100%;
    margin:0;
    padding:0;
    font-size: 1px;
    line-height: 24px;
    overflow: auto;
    }
@media print, screen and (min-width: 768px) {/*PC*/
html{
    font-size: 1px;
    line-height: 26px;
    min-width: 1050px;
    }
}

body{
    margin: 0;
    padding: 0;
    font-family: "AvenirNextLTPro-Medium","NewCezannePro-M", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    font-size: 13rem;
    letter-spacing: 0.25rem;
    text-align: justify;
    word-break: break-all; 
    text-justify: nter-ideograph;
    text-justify: inter-character;
    word-wrap: break-word;
    overflow-wrap: break-word;
    color: #333333;
    -webkit-text-size-adjust: 100%;
    /* overflow-x:hidden; */
    }
@media print, screen and (min-width: 768px) {/*PC*/
body{
    min-width: 1050px;
    letter-spacing: 0.5rem;
    }
}
@media print {/*Print*/
body{
    font-size: 13rem;
    -webkit-print-color-adjust: exact;
    zoom: 0.75;
    }
}

main{
    width: 100vw;
    padding: 0 0 75px 0;
    overflow: hidden;
    background-color: #f1f6f5;
}
@media print, screen and (min-width: 768px) {/*PC*/
    main{
    width: 100%;
    margin: 0 0 140px 0;
    padding: 0 0 120px 0;
    position: relative;
    top: 140px;
    }
}

div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}

ul,dl,ol{
    list-style-type: none;
}

blockquote, q {
  quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}

table {
  border-collapse:collapse;
  border-spacing:0;
}

input, select {
  vertical-align:middle;
}

a{
    margin:0;
    padding:0;
    border: 0;
    outline: 0;
    color: #333;
    vertical-align:baseline;
    background:transparent;
    text-decoration: none;
    outline:none;
    transition: color 0.15s ease-in;
    }
@media print, screen and (min-width: 768px) {/*PC*/
a:hover{
    color: #54afad;
    transition: color 0.25s ease-in;
    }
}

img{
    width: 100%;
    margin: 0;
    font-size: 0;
    line-height: 0;
    vertical-align: top;
    border: 0;
    outline: 0;
    }
@supports (-webkit-hyphens:none){/*Safari*/
img { 
    image-rendering: auto;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
}

/*for Animation*/
h1,.title,h3.top,nav#top,nav#global,.dir,main>article{
    opacity: 0;
}


/* 2.共通パーツ
////////////////////////////////////////// */
@media print, screen and (min-width: 768px) {/*Tablet*/
.portrait{
    display: none !important;
    }
}
@media screen and (max-width: 896px) and (orientation: landscape) {/*Landscape*/
.portrait{
    display: none !important;
    }
}

@media screen and (max-width: 767px) {/*Phone*/
.tab{
    display: none !important;
    }
.pc{
    display: none !important;
    }
.sp{
    display: block !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 1099px) {/*Tablet*/
.sp{
    display: none !important;
    }
.pc{
    display: none !important;
    }
.tab{
    display: block !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.sp{
    display: none !important;
    }
.tab{
    display: none !important;
    }
.pc{
    display: block !important;
    }
}

body:not(#index) article{
    margin: 0 23px;
}

@media print, screen and (min-width: 768px) {/*PC*/
    body:not(#index):not(#design):not(#inner) article,
    body#equipment article,
    body#selectplan article{
    width: 1050px;
    margin: 0 auto 0;
    /* padding: 0; */
}
}

nav#menu{
    width: 100%;
    max-width: 450px;
	margin:0 0 250px 0!important;
	position: fixed;
	overflow: auto;
    position: fixed;
    z-index: 99998;
    top: 0;
    right: 0;
    line-height: 20rem;
    background-color: #6cb9b7;
    /* background-color: #c0d9da;
    background-image: url(../img/common_img/bg_gr_sp.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat; */
    transform: translateX(100%);
    transition: all 0.6s;
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#menu{
    display: none;
    }
}

nav#menu dl{
    width: 100%;
    height: 100vh;
    overflow: auto;
}

nav#menu dt{
    padding: 25px 0 10px 20px;
	font-size: 22rem;
    letter-spacing: 5rem;
    color: #ffffff;
    }

nav#menu dd{
	width: auto;
    margin: 0 20px 0 20px;
    background-image: url(../img/common_img/ic_arrow_line.png);
    background-size: 600px 7px;
    background-position: right 22px;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    }
nav#menu dd:last-child{    
	padding: 0 0 150px 0;
	}
#
nav#menu dd.active ul::before{
    content: "　";
    width: 20px;
    height: 10px;
    position: absolute;
    top: 17px;
    left: 0;
    right: 0;
    margin: auto;
    background-image: url(../img/common_img/ic_tri_up.png);
    transition: background-image 0.5s;
    background-size: 20px 10px;
    background-position: center 0;
    background-repeat: no-repeat;
}
    
nav#menu dd a{
    padding: 8px 0 0 0;
    font-family: "NewCezannePro-DB";
    /* color: #548e8c; */
    color: #ffffff;
    font-size: 15rem;
    line-height: 20rem;
    letter-spacing: 1rem;
    display: block;
    }
nav#menu dd:nth-child(3)>a{/*NEWマーク*/
}
nav#menu dd:nth-child(4)>a{/*NEWマーク*/
}
nav#menu dd:nth-child(5)>a{/*NEWマーク*/
}
nav#menu dd:nth-child(6) a {/*NEWマーク
    background-image: url(../img/common_img/ic_new.png);
    background-size: 28px;
    background-position: 70px 12px;
    background-repeat: no-repeat;*/
}

nav#menu dd:nth-child(7)>a {/*NEWマーク
    background-image: url(../img/common_img/ic_new.png);
    background-size: 28px;
    background-position: 70px 12px;
    background-repeat: no-repeat;*/
}

nav#menu dd:nth-child(8)>a {/*NEWマーク
    background-image: url(../img/common_img/ic_new.png);
    background-size: 28px;
    background-position: 50px 12px;
    background-repeat: no-repeat;*/
}

nav#menu dd:nth-child(9)>a {/*NEWマーク
    background-image: url(../img/common_img/ic_new.png);
    background-size: 28px;
    background-position: 79px 12px;
    background-repeat: no-repeat;*/
}
nav#menu dd:nth-child(10)>a{/*NEWマーク*/
    /*background-image: url(../img/common_img/ic_new.png);
    background-size: 24px;
    background-position: 124px 13px;
    background-repeat: no-repeat;*/
}
nav#menu dd:nth-child(11)>a{/*NEWマーク*/
    /*background-image: url(../img/common_img/ic_new.png);
    background-size: 24px;
    background-position: 69px 13px;
    background-repeat: no-repeat;*/
}

nav#menu dd span{
    margin: 0px 0 0 0;
    display: block;
    font-size: 10rem;
    color: rgba( 255, 255, 255, 0.40 );
}

nav#menu dd ul {
    margin: 0 0 24px 0;
    flex-wrap: wrap;
    /*border-top: dotted 1px #81b4e5;
    border-bottom: dotted 1px #81b4e5;*/
    height: 0;
    display: none;
}
/*nav#menu dd ul.active {
    height: 100px;
    opacity: 1;
    transition: all 0.5s, opacity 1s;
    display: flex !important;
    flex-wrap: wrap;
    flex-direction: row;
}*/

nav#menu dd ul li{
    width: calc(60% - 18px);
    margin: 0 0 6px 0;
    padding: 0 0 0 15px;
    background-image: url(../img/common_img/ic_circle.png);
    background-size: 13px 13px;
    background-position: 0 12px;
    background-repeat: no-repeat;
    letter-spacing: -0.1rem;
    line-height: 14rem;
}

nav#menu dd ul li:nth-child(2n){
    width: calc(40% - 12px);
}

nav#menu dd ul li a{
    letter-spacing: 0.5rem;
    white-space: nowrap;
}
nav#menu dd ul li:nth-of-type(7) a,
nav#menu dd ul li:nth-of-type(8) a{
    letter-spacing: 10rem;
}

/* このクラスを、jQueryで付与・削除する */
nav#menu.active{
    transform: translateY(0%);
}

.down{
    display: block;
    /*position: absolute;
    right: 10px;
    top: 10px;*/
    width: 46px;
    height: 46px;
    cursor: pointer;
    text-align: center;
    border-radius: 0 0 3px 3px;
    position: relative;
}

@media print, screen and (min-width: 768px) {/*PC*/
.down{
    display: none;
    }
}

.down span{
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    margin: auto;
    border-bottom: solid 4px #ffffff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 0;
    right: 0;
}

.down span:nth-child(1){
    top: 8px;
}

.down span:nth-child(2){
    top: 16px;
}

.down span:nth-child(3){
    top: 24px;
}

.down span:nth-child(4){
    border: none;
    top: 33px;
}

.down span:nth-child(4) img{
	width: 30px;
	height:8px;
}

.down.active{
    /*position: fixed;
    filter: brightness(200%);
    background-color: rgba( 255, 255, 255, 0.3 ) !important;*/
    /*filter: brightness(999%);
    opacity: 0.75;*/
}

/* 最初のspanをマイナス45度に */
.down.active span:nth-child(1){
    top: 16px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-bottom: solid 3px #ffffff;
}

/* 2番目と3番目のspanを45度に */
.down.active span:nth-child(2),
.down.active span:nth-child(3){
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
    border-bottom: solid 3px #ffffff;
}

.down img.close{
    opacity: 0;
}

.down.active img.open{
    opacity: 0;
}
.down.active img.close{
    opacity: 1;
}

nav#phone{
    width: 100%;
    height: 68px;
    padding: 0 0 4px 0;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #54afad;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#phone{
    display: none;
    }
}

nav#phone a{
    width: 20%;
    display: block;
    text-align: center;
    line-height: 0;
}

nav#phone img{
    width: 55px;
    height: 55px;
}

nav#phone .down img{
    width: auto;
    height: 10px;
    margin: auto;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    transition: all 300ms 0s ease-in;
}

nav#top{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#top{
    position: absolute;
    top: 22px;
    right: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
nav#top ul.sub{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
nav#top ul.sub li{
    text-align: right;
}
nav#top ul.sub li:first-child{/*NEWマーク*/
    /*padding: 0 0 0 30px;
    background-image: url(../img/common_img/ic_new.png);
    background-size: 26px;
    background-position: 0 center;
    background-repeat: no-repeat;*/
}
.win nav#top ul.sub li{
    background-position: 0 7px;
}

nav#top ul.sub a{
    margin: 5px 0;
    padding: 1px 11px 0 0;
    font-size: 13rem;
    line-height: 13rem;
    letter-spacing: 1rem;
    text-align: right;
    white-space: nowrap;
    background-image: url(../img/common_img/ic_arrow.png);
    background-size: 9px 10px;
	background-position: right center;
    background-repeat: no-repeat;
    transition: all 300ms 0s ease;
    display: block;
}
.win nav#top ul.sub li a{
    padding: 3px 11px 0 0;
}

nav#top ul.sub a:hover{
    color: #54afad
    transition: all 300ms 0s ease;
}
}

nav#top ul.btn{
    display: flex;
    margin: 0;
}

nav#top ul.btn a{
     width: 18vw;
     max-width: 230px;
     height: 40px;
     margin: 0 0 0 12px;
     padding: 0 10px 0 0;
     font-size: 16rem;
     line-height: 43rem;
     letter-spacing: 4rem;
     color: #ffffff;
     text-align: right;
     background-repeat: no-repeat;
     display: block;
}

nav#top ul.btn a small{
    margin: 0 0 -6px -10px;
    font-size: 10rem;
    letter-spacing: .75rem;
    transform: scale(0.8,0.8);
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

nav#top ul.btn a b{
    padding: 0 6px 0 12px;
    font-weight: normal;
}

nav#top a.request{
    background-image: url(../img/common_img/ic_request_top.png),url(../img/common_img/bg_bt.png);
    background-size: 20px,17px;
    background-position: 15px 13px,right bottom;
    background-color: #0098b4;
    transition: all 500ms 0s ease;
    
}
nav#top a.request:hover{
    opacity: 1;
    filter: saturate(130%);
    transition: all 250ms 0s ease;
}

nav#top a.reserve{
    background-image: url(../img/common_img/ic_reserv_top.png),url(../img/common_img/bg_bt.png);
    background-size: 26px,17px;
    background-position: 12px center,right bottom;
    background-color: #3da97b;
    transition: all 500ms 0s ease;
    /*filter: contrast(10%) brightness(180%) saturate(200%) ;cursor: not-allowed;*/
}
nav#top a.reserve:hover{
    opacity: 1;
    filter: saturate(140%);
    transition: all 250ms 0s ease;
}

nav#global{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#global{
    display: block;
    width: 100%;
    height: 80px;
    position: absolute;
    top: 95px;
    z-index: 999;
}
nav#global.navi_fix{
    position: fixed !important;
    top: 0 !important;
    background-image: url(../img/common_img/ln_wh70.png);
    background-size: 100% 44px;
    background-repeat: no-repeat;
    background-color: inherit !important;
}
nav.navi_fix ul{
    background-color: inherit !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
nav#global>ul{
    width: calc(100% - 120px);
    min-width: 1050px;
    margin: 0 auto 0;
    padding: 0 60px 5px;
    display: flex;
    justify-content: space-between;
    background-color: #ffffff;
}

nav#global>ul>li{
    width: calc(100% / 9 - 8px);/*最後の項目のみ横幅をプラス*/
    height: 40px;
    padding: 0 0 0 4px;
    background-image: url(../img/common_img/ln_gy.png);
    background-size: 1px 32px;
    background-position: left 5px;
    background-repeat: no-repeat;
}
nav#global>ul>li:last-child{
    width: calc(100% / 9 + 8px);/*最後の項目のみ横幅をプラス*/
    padding: 0;
    background-image: url(../img/common_img/ln_gy.png),url(../img/common_img/ln_gy.png)/*,url(../img/common_img/ic_new.png)*/;
    background-size: 1px 32px,1px 32px,26px;
    background-position: left 5px,right 5px,calc(100% - 4px) 2px;
    background-repeat: no-repeat;
}
nav#global>ul>li:nth-child(5), 
nav#global>ul>li:nth-child(6), 
nav#global>ul>li:nth-child(7), 
nav#global>ul>li:nth-child(8) {/*NEWマーク
        background-image: url(../img/common_img/ln_gy.png),url(../img/common_img/ic_new.png);
        background-size: 1px 32px,26px;
        background-position: left 5px,calc(100% - 1px) 2px;
        background-repeat: no-repeat;*/
} 

nav#global a{
    display: block;
    text-align: center;
    position: relative;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 15rem;
    line-height: 15rem;
    color: #606060;
    white-space: nowrap;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
}
nav#global a:hover{
    color: #54afad;
    transform: scale(1.05);
}

nav#global a::before{
    content: '';
	position: absolute;
	left: 50%;
	top: 14px;
	width: 0;
	transform: translateX(-50%);
	border-top: solid 1px #54afad;
	transition: all 300ms 0s ease;
}
nav#global li:not(.hide) a:hover::before{
    content: '';
	position: absolute;
	left: 50%;
	top: 14px;
	width: 85%;/*下線横幅設定*/
	transform: translateX(-50%);
	border-top: solid 1px #54afad;
	transition: all 300ms 0s ease;
}
}

nav#global a small {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 16px;
  margin: 2px 0 4px 0;
  line-height: 11rem;
  font-size: 10rem;
  letter-spacing: 1rem;
  color: #6e6e6e;
  
}

nav#global a small span {
  display: block;
  transform: translate(0, 3px);
  transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 0.25s;
}

nav#global li:not(.hide) a:hover small span {
  transform: translate(0, 0);
  color: #54afad
}

nav#global a:hover small span:nth-child(2) {
  transition-delay: 0.08s;
}
nav#global a:hover small span:nth-child(3) {
  transition-delay: 0.16s;
}
nav#global a:hover small span:nth-child(4) {
  transition-delay: 0.24s;
}
nav#global a:hover small span:nth-child(5) {
  transition-delay: 0.32s;
}
nav#global a:hover small span:nth-child(6) {
  transition-delay: 0.40s;
}
nav#global a:hover small span:nth-child(7) {
  transition-delay: 0.48s;
}
nav#global a:hover small span:nth-child(8) {
  transition-delay: 0.56s;
}

/*サブメニュー*/
nav#global div{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#global div{
    display: block;
    text-align: right;
    overflow: hidden;
    background-color: rgba(84, 175, 173, 0.95);/*サブメニュー背景色*/
    background-color: rgba( 255, 255, 255, 0.70 );
    /*background-image: url(../img/common_img/bg_gr_pc.jpg);サブメニュー背景画像*/
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 999;
    width: 100%;
}
nav#global div{
    height: 0;
    padding: 0 0 0 12px;
    transition: all 0.25s;
    opacity: 0.5;
}
nav#global div.active{
    /*height: 0;サブメニュー非表示*/
    height: 40px;
    transition: all 0.5s;
    opacity: 0.9;
    z-index: 99999;
}
nav#global div a::before{/*開始点*/
    content: '';
	position: absolute;
	left: 50%;
	top: 28px;
	width: 0;
	transform: translateX(-50%);
	border-top: solid 1px rgba(255,255,255,0);/*サブメニュー下線開始色*/
	transition: all 300ms 0s ease;
}
nav#global div li:not(.hide) a:hover::before{/*終了点*/
    content: '';
	position: absolute;
	left: 55%;
	top: 28px;
	width: 90%;
	transform: translateX(-50%);
	border-top: solid 1px rgba(255,255,255,0);/*サブメニュー下線終了色*/
	transition: all 300ms 0s ease;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
nav#global div.side ul{
    margin: 0 50px 0 0;
    display: inline-flex;
}
nav#global div.side2 ul{
    margin: 0 calc((100% - 120px) / 9 * 2 + 60px - (365px - 100% / 9) / 2) 0 0;
    /*(1)左右余白を引いた値をボタン数で割り右余白と隣接ボタン分を追加して自ボタンと右揃えにする 
      (2)さらにサブメニュー幅とボタン幅の差分を2で割り右側だけの差を算出、それを(1)から引いて中央揃えにする */
    /*(120px:左右余白合計値 365px:サブメニュー幅 9:ボタン数)*/
    display: inline-flex;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
nav#global div li a{
    width: auto;
    margin: 0 0 0 0;
    padding: 12px 10px 13px 22px;/*サブメニュー余白*/
    font-family: "NewCezannePro-DB";
    font-size: 13rem;
    line-height: 13rem;
    background-image: url(../img/common_img/ic_arrow.png);
    background-size: 10px 10px;
    background-position: 10px 14px;
    background-repeat: no-repeat;
}
.win nav#global div li a{
    padding: 14px 10px 13px 22px;/*サブメニュー余白*/
    background-position: 10px 16px;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#global div li a:hover{
    transform: scale(1.0);
    border-bottom: none !important;
    background-color: rgba( 255, 255, 255, 0.5 );
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    nav#global div.side li:nth-child(7) a::first-letter,
    nav#global div.side li:nth-child(8) a::first-letter{
        letter-spacing: 15rem;
    }
}

.title{
    height: 86px;
    background-color: #a4c8d0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .title{
        height: 180px;
    }
}

.title h2{
    padding: 20px 0 0 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 32rem;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .title h2{
        padding: 58px 0 0 0;
        font-size: 40rem;
    }
}

.title h2 strong{
    padding: 10px 0 0 0;
    font-size: 16rem;
    font-weight: normal;
    background-image: url(../img/common_img/ln_wh70.png);
    background-size: 28px 1px;
    background-position: center 8px;
    background-repeat: no-repeat;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .title h2 strong{
        padding: 22px 0 0 0;
        font-size: 19rem;
        background-size: 34px 1px;
        background-position: center 10px;
    }
}

.dir{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .dir{
        /* width: calc(100% - 120px);
        min-width: 1050px;
        padding: 0 60px; */
        width: 1050px;
        height: 25px;
        padding: 0 calc((100% - 1050px) / 2);
        display: flex;
        /* background: linear-gradient(to right, rgba( 255, 255, 255, 0 ) 10%, rgba( 255, 255, 255, 0.1 ) 60%, rgba( 255, 255, 255, 0.8 )); */
        font-size: 11rem;
        color: #666666;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.dir li a::after{
    content: "＞";
    margin: 0 6px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    footer ul.btn,
    main ul.btn{
        width: 734px;
        margin: auto;
        display: flex;
        justify-content: space-between;
    }
}

footer ul.btn a,
main ul.btn a{
     height: 70px;
     margin: 15px 23px 0;
     font-size: 20rem;
     line-height: 28px;
     letter-spacing: 4rem;
     color: #ffffff;
     text-align: center;
     background-image: url(../img/common_img/bg_bt.png);
     background-size: 16px;
     background-position: right bottom;
     background-repeat: no-repeat;
     display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer ul.btn a,
    main ul.btn a{
        width: 360px;
        height: 64px;
        margin: 0;
        line-height: 25rem;
    }
}

ul.btn .fade-btn-ft,
ul.btn .fade-btn-gallery{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer ul.btn a small,
main ul.btn a small{
    padding: 8px 0 4px 0;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: .75rem;
    color: rgba(255, 255, 255, 0.6);
    display: block;
}

footer ul.btn a b,
main ul.btn a b{
    padding: 0 0 8px 18rem;
    font-weight: normal;
    background-image: url(../img/common_img/ic_down_wh.png);
    background-size: 14px 7px;
    background-position: center bottom;
    background-repeat: no-repeat;
}

footer ul.btn a.request,
main a.request{
    background-color: #0098b4;
    transition: all 500ms 0s ease;
    
}
footer ul.btn a.request:hover,
main a.request:hover{
    opacity: 1;
    filter: saturate(150%);
    transition: all 250ms 0s ease;
}

footer ul.btn a.reserve,
main a.reserve{
    background-color: #3da97b;
    transition: all 500ms 0s ease;
    /*filter: contrast(10%) brightness(180%) saturate(200%) ;cursor: not-allowed;*/
}
footer ul.btn a.reserve:hover,
main a.reserve:hover{
    opacity: 1;
    filter: saturate(140%);
    transition: all 250ms 0s ease;
}

.img_blt::before{
    margin: 0 0 -20rem 4rem;
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
	font-family: "NewCezannePro-M";
    color: #333333;
    text-align: left;
    display: block;
    position: relative;
    z-index: 999;
}

.img_bl::after{
    /* margin: -15rem 0 5rem 4rem; */
    margin: -20rem 0 15rem 4rem;
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
	font-family: "NewCezannePro-M";
    color: #333333;
    text-align: left;
    display: block;
}

.img_br::after{
    margin: -20rem 4rem 5rem 0;
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
	font-family: "NewCezannePro-M";
    color: #333333;
    text-align: right;
    display: block;
}

.img_wl::after{
    margin: -20rem 0 5rem 4rem;
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
	font-family: "NewCezannePro-M";
    color: #ffffff;
    text-align: left;
    display: block;
}

.img_wr::after{
    margin: -20rem 4rem 5rem 0;
    content: "image";
    font-family: "NewCezannePro-M";
    font-size: 10rem;
    line-height: 20rem;
    color: #ffffff;
    text-align: right;
    display: block;
}

aside.ad{
	padding: 0 0 23px;
    display: flex;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
aside.ad{
    width: 1050px;
    margin: auto;
    padding: 0 0 22px;
    /* padding: 0 calc((100vw - 1050px) / 2) 18px calc((100vw - 1050px) / 2); */
    display: flex;
    justify-content: center;
}
}

aside.ad strong{
    margin: 2px 6px 0 0;
    padding: 0 6px;
    font-size: 13rem;
    line-height: 13rem;
    font-weight: normal;
    text-align: center;
    display: flex;
    align-items: center;
    border: solid 1px #999999;
    white-space: nowrap;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
aside.ad strong{
    width: 60px;
    margin: 0;
	padding: 6px 10px 5px 15px;
    line-height: 12rem;
    white-space: nowrap;
}
}

aside.ad p{
    font-size: 11rem;
    line-height: 13rem;
    letter-spacing: -0.25rem;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
aside.ad p{
    margin: 5px 0 -2px 10px;
    font-size: 12rem;
    line-height: 16rem;
}
}

aside.fade-ad strong,
aside.fade-ad p{
    opacity: 1 !important;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 2s;/*easeOutQuint*/
}


/* 3.フレームワーク
////////////////////////////////////////// */
header{
    width: 100%;
    padding: 14px 0 10px;
}

@media print, screen and (min-width: 768px) {/*PC*/
header{
    min-width: 1050px;
    padding: 0;
    height: 175px;
    position: absolute;
    top: 0;
    z-index: 99999;
    overflow: hidden;
}
}

/*ヘッダー固定時位置*/
@media print, screen and (min-width: 768px) {/*PC*/
.navi_fix{
    position: fixed !important;
    top: 0 !important;
}
}

header h1{
    width: 300px;
    margin: auto;
    padding: 0 8vw 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
header h1{
    width: 290px;
    height: auto;
    margin: 0;
    position: absolute;
    top: 17px;
    left: 60px;
}
}
h1 a{
    /* position: relative;
    z-index: 999; */
}
@media print, screen and (min-width: 768px) {/*PC*/
header h1 a{
    
}
}

header h1 img{
    margin: auto;
    display: block;
}

@media print, screen and (min-width: 768px) {/*PC*/
	header h1 img{
		image-rendering: auto;
	}
}

 footer{
    padding: 0 0 70px 0;
    background-color: #ffffff;
    opacity: 0;/*for Animation*/
}
.fade-footer{
    opacity: 1;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutQuint*/
}
@media print, screen and (min-width: 768px) {/*PC*/
footer{
    width: 100%;
    min-width: 1150px;
    padding: 0;
    position: relative;
    clear: both;
    opacity: 1;
}
}

footer .contact{
    padding: 0 23px;
    background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer .contact{
        padding: 0;
    }
}

footer h3{
    width: 100%;
    margin: auto;
    padding: 38px 0 7px 0;
    font-family: "AvenirNextLTPro-Medium";
    color: #54afad;
    font-size: 27rem;
    letter-spacing: 1rem;
    font-weight: normal;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
footer h3{
    padding: 40px 0 30px 0;
    font-size: 31rem;
    text-align: center;
    opacity: 0;/*for Animation*/
    display: block;
}
}

footer h3.fade-tt3{
    opacity: 1 !important;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 2s;/*easeOutQuint*/
}

footer p.invite{
    margin: 0 0 -5px 0;
    padding: 5px 0;
    text-align: center;
    line-height: 0;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer p.invite{
        width: 734px;
        margin: 0 auto 10px;
    }
}
footer .fade-invite{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer p.invite img{
    width: auto;
    height: 14px;
    margin: 4px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer p.invite img{
        width: auto;
        height: 15px;
        margin: 4px 0;
    }
}

footer .btn{
    margin: 0 -23px;
    opacity: 0;/*for Animation*/
}
footer .fade-btn-ft{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer .gallery{
    margin: 30px 0 55px;
    display: block;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer .gallery{
        width: 326px;
        margin: 28px auto 44px;
    }
}
footer .fade-gallery{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer .links{
    padding: 0 23px;
    background-color: #f0f0f0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer .links{
        width: 1050px;
        padding: 0 calc((100% - 1050px) / 2) 28px calc((100% - 1050px) / 2);
    }
}

nav#list{
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
nav#list{
    display: none;
}
}
nav.fade-list{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}

nav#list dl{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

nav#list dt{
    width: 100%;
    margin: 16px 0 12px;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 19rem;
    color: #54afad;
    font-weight: normal;
    text-align: center;
}

nav#list dd{
    width: calc(48% - 14px);
    margin: 0 0 13px 0;
    padding: 6px 7px;
    font-size: 15rem;
    line-height: 15rem;
    letter-spacing: 0;
    background-image: url(../img/common_img/ic_arrow_wh.png);
    background-size: 9px 10px;
    background-position: calc(100% - 3px) center;
    background-repeat: no-repeat;
    background-color: #54afad;
    position: relative;
}
nav#list dd:last-child{
    width: 100%;
}

nav#list dd a{
    color: #ffffff;
    text-align: center;
    display: block;
}

.banner{
    margin: 28px 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .banner{
        width: 388px;
        margin: 35px 0 16px;
        float: left;
    }
}

.banner li{
    width: calc(50% - 6px);
    margin: 0 0 12px 0;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    .banner li{
        width: 188px;
        margin: 0 0 12px 0;
    }
}
.fade-banner{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


aside.line{
    margin: 0 0 21px;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
aside.line{
    width: 640px;
    height: 128px;
    margin: 35px 0 16px;
    background-color: #07b43b;
    display: flex;
    justify-content: center;
    align-items: center;
    float: right;
}
aside.line img{
    width: 96%;
    margin: auto;
}
}
aside.fade-line{
    opacity: 1 !important;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 2s;/*easeOutQuint*/
}

p.footnote{
    margin: 42px 0x;
    font-size: 11rem;
    line-height: 14rem;
    clear: both;
    opacity: 0;/*for Animation*/
}
p.fade-footnote{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer address{
    margin: 12px 0 0 0;
    padding: 10px 0 0 0;
    border-top: solid 1px #b3b3b3;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer address{
        width: 1050px;
        margin: 18px 0 0 0;
        padding: 22px 0 0 0;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        position: relative;
        clear: both;
    }
}
footer .fade-address{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}
{
    opacity: 1 !important;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 2s;/*easeOutCubic*/
}


footer address strong{
    font-size: 14rem;
    font-weight: normal;
    font-style: normal;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer address strong{
        position: absolute;
        top: 12px;
    }
}

footer address a img{
    width: 266px;
    margin: 5px 0 13px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer address a img{
        width: 256px;
        margin: 0 0 14px 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    footer address>img{
        width: 356px;
    }
}

footer address .copyright{
    padding: 12px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 11rem;
    line-height: 11rem;
    font-weight: normal;
    font-style: normal;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    footer address .copyright{
        padding: 0;
    }
}

.note{
    font-size: 10rem;
    line-height: 12rem;
    /* display: inline-block; */
}

.link{
    height: 38px;
    margin: 0 34px;
    padding: 0 22px 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-image: url(../img/common_img/bg_bt_gr.png);
    background-size: 100% 100%;
    background-repeat: repeat-y;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .link{
        width: 300px;
        height: 34px;
        margin: 0;
    }
    .link:hover{
        filter: saturate(140%);
        transition: all 250ms 0s ease;
    }
}

.link strong{
    font-family: "NewCezannePro-DB";
    font-size: 17rem;
    letter-spacing: 2rem;
    color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .link strong{
        line-height:17rem;
    }
}

.link small{
    padding: 0 15px 0 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 11rem;
    letter-spacing: 1rem;
    color: rgba( 255, 255, 255, 0.75 );
    background-image: url(../img/common_img/ic_arrow_wh.png);
    background-size: 9px 10px;
    background-position: right center;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .link small{
        padding: 2px 15px 0 0;
    }
}

article:not(.feature) .hide{
    opacity: 0.25 !important;
    filter: grayscale(50%);
    cursor: default !important;
}

nav#phone .hide,
nav#global .hide,
nav#banner .hide,
.banner .hide{
    opacity: 0.2 !important;
    cursor: default !important;
}

nav#top a.hide b,
.btn a.hide b,
.btn a.hide small{
    opacity: 0.5;
}

.hide a,
a.hide{
    pointer-events: none !important;
    cursor: default !important;
}

.hide a:hover,
.hide a:hover img{
    opacity: 0 !important;
    display: none !important;
}

.btn a.hide{
    position: relative;
}

.btn a.hide::after{
    content: "COMING SOON";
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 14rem;
    letter-spacing: 1rem;
    color: #54afad;
    justify-content: center;
    place-items:center;
    align-items:center;
    text-align: center;
    z-index: 999;
    background-color: rgba( 241, 246, 245, 0.9 );
}
@media print, screen and (min-width: 768px) {/*PC*/
   .btn a.hide::after{
       padding:3px 0 0 0;
    }
}


#index .pages a.hide{
    cursor: default !important;
}

#index .pages a.hide::after{
    content: "COMING SOON";
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 24rem;
    color: #54afad;
    justify-content: center;
    place-items:center;
    text-align: center;
    z-index: 999;
    background-color: rgba( 241, 246, 245, 0.9 );
}

footer dl .hide{
    opacity: 0.3 !important;
    cursor: default !important;
}

.bx-wrapper {
    -ms-touch-action: auto !important;/*ピンチ操作有効化*/
    touch-action: auto !important;/*ピンチ操作有効化*/
    background-color: transparent !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.bx-wrapper img {
    display: block;
    margin: 0px auto !important;
}


 /* 4.コンテンツ
////////////////////////////////////////// */
/*/// トップページ ///*/
#index main{
    background-color: #f1f6f5;
}

#index #mainimg{
    background-color: #ffffff;
    position: relative;
}

#index #mainimg .swiper{
    opacity: 0;
}

#index #mainimg .swiper-slide{
    position: relative;
}

#index #mainimg .swiper-slide:not(.first)>*{
    display: none;
}


#index #mainimg .place img{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

#index h2{
    width: 262px;
    margin: 0 auto 28px;
    overflow: hidden;
    opacity: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index h2{
        display: none;
    }
}

#index .birdview h2{
    display: none !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .birdview h2{
        width: auto;
        position: absolute;
        bottom: 2vw;
        left: 6vw;
        display: block !important;
    }
}

#index h2 img{
    width: auto;
    height: 37px;
    margin: 26px 0 0 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index h2 img{
        width: auto;
        height: 3vw;
    }
}

#index h2 img.tt4{
    height: 18px;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index #mainimg h3{
        width: 17vw;
        position: absolute;
        top: 6vw;
        right: 2vw;
        display: block;
    }
}

#index #mainimg h3.grandopen{
    width: 60vw;
    margin: auto;
    position: absolute;
    top: 4vw;
    left: 0;
    right: 0;
    opacity: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #mainimg h3.grandopen{
        width: 50vw;
        top: 6vw;
    }
}

#index #mainimg h3 img:not(.tt0){
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #mainimg h3.pc img.tt0{
        margin: 0 0 1vw 0;
    }
    #index #mainimg h3.pc img:not(.tt0){
        width: auto;
        height: 2.4vw;
        margin: 0.75vw 0;
        display: block;
    }
}

#index .price{
    /*padding: 12px 23px 12px 23px;*/
    background-color: #ffffff;
}

#index .price img.sp{
	padding: 15px;
	width:calc(100% - 30px);
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .price{
        width: 734px;
        margin: 35px auto 0;
        /*padding: 15px 0 7px;*/
        /*background-color: #ffffff;
        border-top: solid 2px rgba(84, 175, 173, 1);
        border-bottom: solid 2px rgba(84, 175, 173, 1);*/
        text-align: center;
    }
    #index .price img{
        width: 100%;
        margin: auto;
    }
}

#index .point{
    
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .point{
        display: flex;
        flex-direction: column-reverse;
    }
}

#index .point ul{
    padding: 5px 23px 10px;
    text-align: center;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .point ul{
        width: calc(100% - 90px);
        margin: auto;
        padding: 20px 45px 15px;
        display: flex;
        justify-content: center;
    }
}

#index .point li{
    padding: 10px 10px;
    background-image: url(../img/common_img/ln_wh50.png);
    background-size: 100% 1px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
#index .point li.p4{
    background-image: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .point li{
        height: auto;
        padding: 0 15px;
        background-size: 1px 5.5vw;
        background-position: right center;
    }
    #index .point li.p1{
        max-width: 380px;
    }
    #index .point li.p2{
        max-width: 282px;
    }
    #index .point li.p3{
        max-width: 320px;
    }
    #index .point li.p4{
        max-width: 210px;
    }
}

#index .point li img{
    margin: auto;
}
#index .point li.p1 img{
    width: 80%;
}
#index .point li.p2 img{
    width: 90%;
}
#index .point li.p3 img{
    width: 90%;
}
#index .point li.p4 img{
    width: 72%;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .point li img{
        width: 100% !important;
    }
    #index .point li.p1 img{
        margin: -5px 0 0 0;
    }
}

#index .action{
    margin: 36px 18px 36px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .action{
        width: 920px;
        margin: 35px auto 50px;
    }
}

#index .news{
    margin: 0 23px;
}

#index .news h3{
    margin: 0 0 8px;
    font-size: 19rem;
    font-weight: normal;
    color: #54afad;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .news h3{
        margin: 55px 0 12px;
    }
}
#index .news>div>div{
    
}
#index .news table{
    background-image: url(../img/index_img/bg_news_l.png),url(../img/index_img/bg_news_r.png);
    background-size: 62px 60px;
    background-position: left top,right bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .news table{
        min-width:550px;
        max-width:800px;
        margin:auto;
        background-size: 41px 40px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .news table tr{
        display: flex;
    }
}

#index .news table tbody{
    height: 175px;/*指定値以上でスクロール*/
    margin: 16px 8px 8px 22px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .news table tbody{
        height: 128px;/*指定値以上でスクロール*/
    }
}

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    background-color: rgba( 0, 0, 0, 0.40 ) !important;
}

#index .news th{
    display:block;
    font-weight: normal;
    line-height: 13rem;
    line-height: 18rem;
    text-align: left;
    white-space: nowrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .news th{
        width: 70px;
    }
}

#index .news td{
    padding: 4px 0 16px 0;
    display:block;
    line-height: 18rem;
}
#index .news tr:last-child td{
    padding: 4px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .news td{
        padding: 0 0 16px 16px;
    }
    #index .news tr:last-child td{
        padding: 0 0 0 16px;
    }
}

#index .concept{
    margin: 52px 0 0 0;
    padding: 0 0 82vw 0;
    background-image: url(../img/index_img/ph_family_sp.jpg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .concept{
        max-width: 1600px;
        min-width: 1100px;
        min-height: 33vw;
        margin: 80px auto 0;
        padding: 0 0 0 60%;
        background-image: url(../img/common_img/ph_bldg_pc.jpg);
        background-size: 45% auto;
        background-position: 30% top;
        padding: 0;
    }
}

#index .concept p{
    margin: -30px 0 0 0;
    padding: 60px 0 0;
    font-size: 14rem;
    line-height: 30rem;
    color: #ffffff;
    text-align: center;
    background-color: #a2d2d1;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .concept p{
        width: 470px;
        margin: 0 auto;
        padding: 0 0 0 60%;
        font-size: 16rem;
        line-height: 34rem;
        color: #333333;
        text-align: left;
        background-color: inherit;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .concept img{
        width: 25%;
        margin: 0 auto;
        padding: 20px 90px 0 50%;
    }
}

@media screen and (max-width: 767px) {/*Phone*/
    #index .concept .link{
        margin: 30px 23px 0;
        background-image: url(../img/common_img/bg_bt_wh.png);
    }
    
    #index .concept .link strong{
        color: #54afad;
    }
    
    #index .concept .link small{
        color: #54afad;
        background-image: url(../img/common_img/ic_arrow.png);
        opacity: 0.75;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .concept .link{
        margin: 18px 0 0;
    }
}

#index .location{
    margin: 90px 0 0 0;
    background-image: url(../img/index_img/bg_gr_sp.png);
    background-size: 90vw 77vw;
    background-position: 0 82px;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location{
        background-size: 87vw 36vw;
        background-position: 0 0;
    }
}

#index .room{
    margin: 90px 0 0 0;
    padding: 0 0 23px 0;
    background-image: url(../img/index_img/bg_gr_sp.png);
    background-size: 100% 100%;
    background-position: 0 54px;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .room{
        min-height: 460px;
        padding: 0 0 30px 0;
        background-size: 77vw 100%;
        background-position: right 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .location .box{
        width: 80vw;
        min-width: 1100px;
        height: 40vw;
        margin: 0 auto;
        position: relative;
    }
    #index .room .box{
        width: 80vw;
        min-width: 1100px;
        height: 30vw;
        margin: 0 auto;
        position: relative;
    }
}

#index .location h3,
#index .room h3{
    font-size: 19rem;
    font-weight: normal;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location h3,
    #index .room h3{
        font-size: 24rem;
        letter-spacing: 5rem;
        text-align: left;
        position: absolute;
        top: 122px;
    }
    #index .room h3{
        width: 338px;
        right: 0;
    }
}

#index .location h3 b,
#index .room h3 b{
    margin: 0 0 8px 0;
    padding: 0 0 14px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 32rem;
    font-weight: normal;
    letter-spacing: 0;
    color: #54afad;
    display: block;
    background-image: url(../img/common_img/ln_bk.png);
    background-size: 34px 1px;
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location h3 b,
    #index .room h3 b{
        width: 310px;
        margin: 0 0 12px 0;
        padding: 0 0 5px 0;
        font-size: 44rem;
        background-image: none;
        /* background-image: url(../img/common_img/ln_fade.png);
        background-size: 310px 1px;
        background-position: left bottom; */
    }
}

#index .location .ph{
    margin: 26px 0 0 0;
    height: 59vw;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location .ph{
        width: 53vw;
        min-width: 724px;
        height: 38vw;
        min-height: 520px;
        margin: 0;
        position: absolute;
        top: 17px;
        right: 0;
    }
}
#index .room figure{
    margin: 17px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .room figure{
        width: 53vw;
        min-width: 720px;
        height: 29vw;
        min-height: 400px;
        margin: 0;
        position: absolute;
        top: 23px;
        left: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .room figure img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

#index .location .ph{
}

#index .location figure.ph1{
    width: 70vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location figure.ph1{
        width: 46vw;
        min-width: 625px;
        position: absolute;
        top: 0;
        left: 0;
    }
}

#index .location figure.ph2{
    width: 29vw;
    position: absolute;
    bottom: 9vw;
    right: 7vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location figure.ph2{
        width: 19vw;
        min-width: 260px;
        position: absolute;
        bottom: 6vw;
        right: 0;
    }
}

#index .location figure.ph3{
    width: 31vw;
    position: absolute;
    bottom: 0;
    right: 40vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location figure.ph3{
        width: 20vw;
        min-width: 272px;
        position: absolute;
        bottom: 0;
        right: 21vw;
    }
}

#index .location figure::after{
    content: "image";
    font-size: 10rem;
    line-height: 10rem;
    color: #ffffff;
    display: block;
    transform: scale(0.8);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}
#index .location figure.ph1::after{
    margin: -15rem 0 0 5rem;
    text-align: left;
    transform-origin: 0% 100%;
}
#index .location figure.ph2::after{
    margin: -13rem 2rem 0 0;
    text-align: right;
    transform-origin: 100% 100%;
}
#index .location figure.ph3::after{
    content: "宮竹小学校";
    margin: -14rem 0 0 5rem;
    font-size: 11rem;
    transform-origin: 0% 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location figure::after{
        transform: scale(1);
    }
    #index .location figure.ph3::after{
        margin: -17rem 0 0 6rem;
        font-size: 12rem;
    }
}


#index .location p,
#index .room p{
    margin: 20px auto 18px;
    font-size: 16rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .location p,
    #index .room p{
        font-size: 14rem;
        text-align: left;
        position: absolute;
        top: 208px;
    }
    #index .room p{
        width: 338px;
        right: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .location .link,
    #index .room .link{
        position: absolute;
        top: 333px;
    }
    #index .room .link{
        right: 0;
    }
}

#index .pages{
    margin: 95px 0 0 0;
    background-image: url(../img/index_img/bg_gr_sp.png);
    background-size: 80vw 100%;
    background-position: 0 33px;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages{
        margin: 110px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        background-image: none;
    }
}

#index .pages a{
    padding: 37px 0 37px 0;
    display: block;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages a{
        width: calc(100% / 3);
        height: 30vw;
        padding: 0;
        background-size: 100% auto;background-position: center center;
        background-repeat: no-repeat;
        position: relative;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) .5s;/*easeOutQuint*/
    }
    #index .pages .design{
        background-image: url(../img/index_img/ph_design_pc.jpg);
    }
    #index .pages .inner{
        background-image: url(../img/index_img/ph_inner_pc.jpg);
    }
    #index .pages .equip{
        background-image: url(../img/index_img/ph_equip_pc.jpg);
    }
    #index .pages a:hover{
        /* background-size: 120% auto;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.2s; *//*easeOutQuint*/
    }
}

#index .pages h3{
    margin: 0 0 3px 34px;
    font-size: 17rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages h3{
        width: 320px;
        height: 80px;
        margin: auto;
        padding: 0 0 0 14px;
        background-image: url(../img/common_img/bg_bt_wh.png);
        background-size: 100%;
        overflow: hidden;
        position: absolute;
        bottom: 45%;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.5s;/*easeOutQuint*/
    }
    #index .pages a:hover h3{
        width: 80%;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.2s; /*easeOutQuint*/
    }
}

#index .pages h3 b{
    margin: 0 12px 0 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 32rem;
    font-weight: normal;
    letter-spacing: 0;
    color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages h3 b{
        margin: 15px 0 2px;
        padding: 0 0 8px 12px;
        display: block;
        background-image: url(../img/common_img/ln_fade.png);
        background-size: 300px 1px;
        background-position: left bottom;
        background-repeat: no-repeat;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.5s;/*easeOutQuint*/
    }
    #index .pages a:hover h3 b{
        background-size: 80% 1px;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.2s; /*easeOutQuint*/
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages h3 span{
        margin: 0 0 0 13px;
        display: block;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index .pages .link{
        height: 30px;
        padding: 0 0 0 28px;
        position: absolute;
        bottom: calc(45% - 30px);
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.5s;/*easeOutQuint*/
    }
    #index .pages .link strong{
        display: none;
    }
    #index .pages a:hover .link{
        width: 78%;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.2s; /*easeOutQuint*/
    }
}

#index .pages img{
    width: calc(100% - 34px);
    margin: 0 0 8px 34px;
}

#index a.zeh{
    width: calc(100% - 76px);
    margin: 40px auto 40px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index a.zeh{
        width: 660px;
        margin: 30px auto 0;
    }
    #index a.zeh:hover{
        filter: saturate(140%);
        transition: all 250ms 0s ease;
    }
}

#index .popup{
    display: none;
}

#index #zeh{
    width: calc(100% - 92px);
    margin: auto;
    padding: 40px 23px 0;
    background-image: url(../img/index_img/bg_zeh_sp.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh{
        width: 660px;
        padding: 35px 20px 0;
        background-image: url(../img/index_img/bg_zeh_pc.jpg);
    }
}

#index #zeh h3{
    width: 58%;
    margin: auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh h3{
        width: 200px;
        margin: auto;
    }
}

#index #zeh h4{
    margin: 30px auto 10px;
    font-family: "NewCezannePro-DB";
    font-size: 17rem;
    line-height: 26rem;
    text-align: center;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh p{
        text-align: center;
    }
}

#index #zeh figure{
    height: 70vw;
    margin: 30px 0 0 0;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh figure{
        height: 160px;
        margin: 30px 0 0 0;
    }
}

#index #zeh figure .zeh_01{
    width: 53%;
    position: absolute;
    left: 0;
}

#index #zeh figure .zeh_02{
    width: 53%;
    position: absolute;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh figure .zeh_01,
    #index #zeh figure .zeh_02{
        width: 188px;
    }
}

#index #zeh figure .zeh_03{
    position: absolute;
    bottom: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #index #zeh figure .zeh_03{
        width: 310px;
        margin: auto;
        left: 0;
        right: 0;
    }
}

/*Colorbox
/*スクロールバー非表示*/
#cboxWrapper div{
    overflow-y: scroll;/*上下方向にはみ出した要素ををスクロールさせる*/
    -ms-overflow-style: none;/*IE・Edge*/
    scrollbar-width: none;/*Firefox*/
}
#cboxWrapper div::-webkit-scrollbar{/*Chrome・Safari*/
    display:none;
}

#cboxContent{
    padding: 0 0 30px 0 !important;
}

#cboxContent #cboxClose{
    width:92px;
    height:17px;
    margin: auto;
    position:absolute;
    bottom:0;
    left: 0;
    right:0;
    z-index: 999999;
    background:url(../img/index_img/bt_close.png) no-repeat bottom center;
    background-size: 92px 17px;
    font-size: 0;
    opacity: 1;
    transition: all 0.3s ease-in;
}
#cboxContent #cboxClose:hover{
    opacity: 0.4;
    transition: all 0.2s ease-in;
}


/*/// コンセプト ///*/
#concept main{
    background-color: #f1f6f5;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept main{
        padding: 0 0 120px 0;
    }
}

#concept .family{
    padding: 45px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family{
        padding: 100px 0 0 0 !important;
        position: relative;
    }
}

#concept .family picture img{
    width: calc(100% + 46px);
    margin: 0 -23px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family picture img{
        width: 100%;
        margin: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family picture.ph1{
        width: 680px;
        margin: 0 0 0 -20px;
        display: block;
    }
    #concept .family picture.ph2{
        width: 400px;
        position: absolute;
        top: 390px;
        right: 0;
        display: block;
    }
    #concept .family picture.ph3{
        width: 500px;
        display: block;
        position: absolute;
        /* top: 850px; */bottom: 0;
        right: 0;
    }
}

#concept .family .ph2 img{
    width: 70vw;
    margin: -10px auto 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family .ph2 img{
        width: 100%;
        margin: 0;
    }
}

#concept .family h3{
    margin: 40px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family h3{
        margin: 50px 0 0 0;
        position: absolute;
        top: 55px;
        left: 690px;
    }
}

#concept .family h3 img{
    width: auto;
    height: 45px;
    margin: 26px 0 0 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family h3 img{
        width: auto;
        height: 48px;
    }
}

#concept .family h3 img.tt4{
    height: 22px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family h3 img.tt4{
        height: 23px;
    }
}

#concept .family p{
    margin: 30px 0 30px 0;
    padding: 0 0 110px 0;
    font-family: "NewCezannePro-DB";
    font-size: 14rem;
    line-height: 32rem;
    background-image: url(../img/common_img/ic_leaf.png);
    background-size: 55px auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .family p{
        margin: 150px 0 0 0;
        font-family: "NewCezannePro-M";
        font-size: 16rem;
        line-height: 42rem;
        background-position: 190px bottom;
    }
}


#concept .spot{
    margin: 0 -23px -75px;
    padding: 50px 46px 75px;
    background-color: rgba(84, 175, 173, 0.05);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot{
        margin: 90px auto -120px !important;
        padding: 10px calc((100% - 1050px) / 2) 150px;
        /* background-color: inherit; */
    }
}

#concept .spot h3{
    font-family: "AvenirNextLTPro-Medium";
    font-size: 40rem;
    font-weight: normal;
    color: rgba(84, 175, 173, 0.25);
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot h3{
        margin: 0 0 -20px 0;
        /* font-size: 50rem; */
    }
}

#concept .spot p{
    margin: 4px 0 -10px;
    font-size: 15rem;
    text-align: center;
}

/* #concept .spot h3{
    margin: 0 0 0 0;
    font-family: "NewCezannePro-DB";
    font-size: 28rem;
    line-height: 44rem;
    color: #444444;
}
@media print, screen and (min-width: 768px) {
    #concept .spot h3{
        margin: 90px auto -30px;
        font-size: 44rem;
        line-height: 80rem;
        letter-spacing: 3rem;
    }
} */


#concept .spot div{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#concept .spot h4{
    width: 100%;
    margin: 23px 0 0 0;
    padding: 4px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 20rem;
    font-weight: normal;
    color: #54afad;
    /* background-color: rgba(84, 175, 173, 0.50); */
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot h4{
        margin: 75px 0 0 0;
        padding: 0;
        font-size: 30rem;
    }
}

#concept .spot figure{
    width: calc(50% - 5px);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot figure{
        width: 513px;
        /* height: 225px; */
        margin: 15px 0 0 0;
    }
}

#concept .spot figcaption{
    margin: 4px 0 0 0;
    line-height: 16rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot figcaption{
        margin: 0;
        padding: 12px 10px 7px;
        color: #ffffff;
        background-color: #54afad;
    }
}

#concept .spot figcaption small{
    line-height: 11rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot figcaption small{
        display: inline;
        vertical-align: 2px;
    }
}

#concept .spot figcaption strong{
    font-size: 14rem;
    font-weight: normal;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot figcaption strong{
        margin: 0 10px 0 0;
        font-size: 18rem;
        display: inline;
    }
}

#concept .spot figcaption b{
    font-size: 16rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot figcaption b{
        font-size: 22rem;
        vertical-align: -2px;
    }
}

#concept .spot figcaption span{
    font-size: 11rem;
}



#concept .spot a{
    margin: 30px 0 0 0;
    padding: 8px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 18rem;
    color: #ffffff;
    background-image: url(../img/common_img/bg_bt_gr.png);
    background-size: 100% auto;
    display: block;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #concept .spot a{
        width: 550px;
        margin: 75px auto 0;
        padding: 4px 0;
        font-size: 20rem;
    }
}

#concept .spot a strong{
    padding: 0 20px 0 0;
    font-weight: normal;
    background-image: url(../img/common_img/ic_arrow_wh.png);
    background-size: 14px 13px;
    background-position: right center;
    background-repeat: no-repeat;
    display: inline-block;
}


/*/// 生活環境 ///*/
/* #location .dir{
    background-color: #ffffff;
} */
#location article.ph1{
    margin: 0;
    border-top: solid 7px #ffffff;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1{
        width: 100% !important;
        min-width: 1050px;
        min-height: 440px;
        /* margin: 5px 0 0;
        border-top: solid 5px #ffffff; */
        border-top: none;
        display: flex;
    }
}

#location article.ph1 .tenjin,
#location article.ph1 .hakata{
    position: relative;
}
#location article.ph1 .hakata{
    border-top: solid 4px #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin,
    #location article.ph1 .hakata{
        width: 50%;
        margin: 0;
        border-top: none;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin picture img{
        width: 200%;
    }
    #location article.ph1 .hakata picture img{
        display: none;

    }
}

#location article.ph1 .tenjin small,
#location article.ph1 .hakata small{
    position: absolute;
    top: 2px;
    left: 7px;
    color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin small,
    #location article.ph1 .hakata small {
        font-size: 14rem;
    }
    #location article.ph1 .tenjin small {
        left: 10px;
        text-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
    }
    #location article.ph1 .hakata small{
        left: inherit;
        right: 10px;
        text-shadow: 0 0 5px rgba(0, 0, 0, 1);
    }
}

#location article.ph1 .tenjin .time1{
    width: 200px;
    margin: auto;
    position: absolute;
    top: calc(50% - 170px);
    left: 0;
    right: 0;

}
#location article.ph1 .hakata .time1{
    width: 200px;
    height: 142px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

#location article.ph1 .hakata .time2{
    width: 100%;
    height: 64px;
    padding: 10px 0;
    margin: auto;
    position: absolute;
    top: calc(50% + 58px);
    left: 0;
    right: 0;
    background-color: rgba(0, 79, 73, 0.6);
    mix-blend-mode: hard-light;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin .time1,
    #location article.ph1 .hakata .time1{
        width: 28vw;
        max-width: 450px;
        height: 20vw;
        position: absolute;
        top: 47%;
        bottom: 52%;

    }
}

#location article.ph1 .tenjin .time2{
    width: 100%;
    height: 64px;
    padding: 10px 0;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 79, 73, 0.6);
    mix-blend-mode: hard-light;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin .time2,
    #location article.ph1 .hakata .time2{
        min-height: 70px;
        padding: 15px 0;
        top: inherit;
    }
    #location article.ph1 .tenjin .time2{
        top: inherit;
        right: inherit;
        /*width: calc(100% - (3.3vw - 7px) );
        height: 7vw;
        background-color: inherit;
        background-image: url(../img/location_img/bg_time_l.png);
        background-size: auto 100%;
        background-position: right bottom;
        background-repeat: no-repeat; */
    }
    #location article.ph1 .hakata .time2{
        bottom: 0;
        top: inherit;
        left: inherit;
        /* width: calc(100% + (5.35vw - 7px) );
        height: 7vw;
        background-color: inherit;
        background-image: url(../img/location_img/bg_time_r.png);
        background-size: 179.2vw 7vw;
        background-position: left bottom;
        background-repeat: no-repeat; */
    }
}

#location article.ph1 .tenjin .time2 img,
#location article.ph1 .hakata .time2 img{
    width: auto;
    height: 100%;
    margin: auto;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .tenjin .time2 img{
        padding: 0 0 0 2vw;
    }
}

#location article.ph1 .waccess{
    width: auto;
    height: 230px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph1 .waccess{
        width: auto;
        height: 24vw;
        top: 45%;
        bottom: 55%;
    }
}

#location article.ph1 .waccess img{
    width: auto;
    height: 100%;
    margin: auto;
    display: block;
}

#location article.ph2{
    margin: 0;
    border-top: solid 7px #ffffff;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph2{
        width: 100% !important;
        min-width: 1050px;
        min-height: 400px;
        border-top: solid 10px #ffffff;
        display: flex;
    }
}

#location article.ph2 .edu,
#location article.ph2 .shop{
    position: relative;
}
#location article.ph2 .shop{
    border-top: solid 4px #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph2 .edu,
    #location article.ph2 .shop{
        width: 50%;
    }
    #location article.ph2 .shop{
        order: -1;
    }  
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph2 .shop picture img{
        width: 200%;
    }
    #location article.ph2 .edu picture img{
        display: none;

    }
}

#location article.ph2 .edu .time3,
#location article.ph2 .shop .time3{
    height: 107px;
    position: absolute;
}
#location article.ph2 .edu .time3{
    bottom: 15px;
    left: 17px;
}
#location article.ph2 .shop .time3{
    top: 15px;
    right: 17px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph2 .edu .time3,
    #location article.ph2 .shop .time3{
        height: 9vw;
        margin: auto;
        top: 0;
        bottom: 0;
    }
    #location article.ph2 .edu .time3{
        left: inherit;
        right: 4vw;
    }
    #location article.ph2 .shop .time3{
        left: 4vw;
        right: inherit;
    }
}

#location article.ph2 .edu .time3 img,
#location article.ph2 .shop .time3 img{
    width: auto;
    height: 100%;
    filter: brightness(10);
}
#location article.ph2 .edu .time3 img{
    filter: brightness(10) drop-shadow(0 0 5px rgba(0, 0, 0, 1));
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location article.ph2 .edu .time3 img,
    #location article.ph2 .shop .time3 img{
    width: auto;
    height: 100%;
    filter: brightness(1);
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location .location{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#location .location h3,
#location .access h3{
    margin: 85px 0 16px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 34rem;
    font-weight: normal;
    text-align: center;
    color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .location h3,
    #location .access h3{
        width: 100%;
        margin: 110px 0 13px 0;
        font-size: 44rem;
        text-align: left;
    }
}

#location .location p,
#location .access p{
    margin: 0 0 9px 0;
    font-size: 16rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .location p,
    #location .access p{
        width: 100%;
        font-size: 18rem;
        text-align: left;
    }
}

#location .top{
    margin: 0 -23px 22px !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .top{
        width: 513px !important;
        margin: 0 !important;
    }
}

#location .top figcaption{
    padding: 5px 0 4px;
    font-size: 16rem;
    color: #ffffff;
    text-align: center;
    background-color: rgba(84, 175, 173, 0.70);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .top figcaption{
        padding: 12px 0 8px;
        font-size: 21rem;
    }
}

#location .top figcaption b{
    font-size: 26rem;
    font-weight: normal;
    vertical-align: -2rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .top figcaption b{
        font-size: 34rem;
    }
}

#location .top figcaption span{
    font-size: 14rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .top figcaption span{
        font-size: 18rem;
    }
}

#location .location figure{
    margin: 33px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .location figure{
        width: 334px;
        margin: 25px 0 0 0;
    }
}

#location .location .name{
    padding: 4px 0 0 0;
    font-size: 16rem;
}

#location .location .time{
    font-size: 15rem;
    line-height: 20rem;
}

#location .location .time b{
    font-size: 24rem;
    font-weight: normal;
    vertical-align: -2rem;
}

#location .location .time span{
    font-size: 13rem;
}

.map{
    margin: 85px -23px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .map{
        margin: 80px 0 0;
        position: relative;
    }
}

.map a.gmap{
    width: calc(100% - 12px);
	height:23px;
    padding: 9px 12px 0 0;
    color: #ffffff;
    line-height: 13rem;
    text-align: right;
    background-size: auto 100%;
    background-repeat: no-repeat;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.map a.gmap{
    width: 350px;
    position: absolute;
    z-index: 999;
    bottom: 0;
    left: 0;
}
}

.map a.gmap{
    background-image: url(../img/location_img/ic_arrow_gmap.png);
    background-size: auto 26px;
    background-position: 8px center;
    background-color: #666666;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location .access{
        display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
}

#location .access picture{
    margin: 60px 0 0 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .access picture{
        margin: 60px 0 0 0;

    }
}

#location .access .note{
    margin: 20px 0 0 0;
}

#location .access .note li{
    margin: 6px 0 0 0;
}

#location .lifeinfo table{
    width: 100%;
    padding: 0;
    line-height: 16rem;
    letter-spacing: -0.25rem;
    color: #666666;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .lifeinfo table{
        width: 490px;
    }
}

#location .lifeinfo table .tt th,
#location .lifeinfo table .tt td{
    padding: 38px 0 0 0;
}

#location .lifeinfo table .tt th strong{
    padding: 3px 12px 3px 15px;
    color: #ffffff;
    background-color: #54afad;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .lifeinfo table .tt th strong{
    padding: 4px 12px 0 15px;
    }
}


#location .lifeinfo table .tt .en{
    font-family: "AvenirNextLTPro-Medium";
    font-size: 19rem;
    line-height: 24rem;
    font-weight: normal;
    color: #ffffff;
}

#location .lifeinfo table .tt .jp{
    font-size: 16rem;
    letter-spacing: 2rem;
    font-weight: normal;
    text-align: right;
}

#location .lifeinfo table tr:not(.tt) th{
    padding: 14px 10px 2px 0;
    font-weight: normal;
    vertical-align: bottom;
    border-bottom: solid 1px #b2b2b2;
}

#location .lifeinfo table .time{
    padding: 8px 0 2px 0;
    text-align: right;
    white-space: nowrap;
    border-bottom: solid 1px #b2b2b2;
    vertical-align: bottom;
}

#location .lifeinfo table td.distance{
    padding: 8px 0 2px 0;
    font-size: 12rem;
    text-align: right;
    white-space: nowrap;
    border-bottom: solid 1px #b2b2b2;
    vertical-align: bottom;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location .lifeinfo table td{
        width: 1%;
    }
}

#location .lifeinfo .time span{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .lifeinfo .time span{
        display: inline;
    }
}

#location .lifeinfo .time span.distance{
    display: inline;
    font-size: 12rem;
    text-align: right;
    white-space: nowrap;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location .list{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

#location .list h3{
    margin: 85px 0 16px 0;
    width: 100%;
    font-size: 26rem;
    font-weight: normal;
    text-align: center;
    color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .list h3{
        margin: 120px 0 40px 0;
        font-size: 30rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #location .list div{
        width: 490px;
}
}

#location .list h5{
    padding: 10px 12px 6px;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 14rem;
    line-height: 14rem;
    font-weight: normal;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    background-color: #54afad;
}

#location .list h5 strong{
    font-family: "NewCezannePro-DB";
    font-size: 15rem;
    line-height: 13rem;
    font-weight: normal;
}

#location .list dl{
    width: 100%;
    margin: 0 0 30px 0;
    font-size:  13rem;
    line-height: 15rem;
    display: flex;
    flex-wrap: wrap;

}
@media print, screen and (min-width: 768px) {/*PC*/
#location .list dl{
    margin: 0 0 40px 0;
}
}

#location .list dt{
    width: 20%;
    margin: 16px 0 0 0;
    letter-spacing: 0;
    white-space: nowrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
#location .list dt{
    padding: 0 0 0 3px;
    letter-spacing: 0;
}
}

#location .list dd{
    width: 80%;
    margin: 16px 0 0 0;
    letter-spacing: 0;
    text-align: right;

    
}
@media print, screen and (min-width: 768px) {/*PC*/
#location .list dd{
    padding: 0 6px 0 0;
    font-size: 13rem;
}
}

#location .list dd.wide{
    white-space: nowrap;
}

#location .list dd span{
    margin: 0 -2rem 0 0;
    font-size: 10rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .list dd span{
        font-size: 13rem;
    }
}

#location .list small{
    font-size: 11rem;
    display: inline-block;
    transform: scale(0.8);
}

#location .list dl dt,
#location .list dl dd{
    padding: 0 0 3px 0;
    border-bottom: solid 1px #b3b3b3;
}

#location .list ul.note{
    margin: -24px 0 28px 0;
    line-height: 16rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #location .list ul.note{
        margin: -30px 0 30px 0;
    }
}



/*/// マンションギャラリー・現地案内図 ///*/
#guide .map{
    margin: 40px -23px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .map{
        margin: 80px 0 0;
        position: relative;
    }
}

#guide .mansiongallery{
    margin: 40px -23px 25px;
    padding: 30px 0 30px 0;
    background-color: #e6e6e6;
    overflow: hidden;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery{
        width: calc(1050px - 427px);
        height: 400px;
        margin: 90px auto 0;
        padding: 0 427px 0 0;
        position: relative;
        background-color: #ececec;
    }
}

#guide .mansiongallery h3{
    margin: 0 0 0 0 !important;
    font-family: "NewCezannePro-DB";
    font-size: 20rem !important;
    line-height: 20rem !important;
    font-weight: normal;
    letter-spacing: -0.25rem;
    color: #038989;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery h3{
        margin: 60px 0 0 0 !important;
        font-size: 24rem !important;
        line-height: 26rem !important;
    }
}

#guide .mansiongallery h3 span{
    font-family: "AvenirNextLTPro-Medium";
    font-size: 11rem;
    line-height: 30rem;
    letter-spacing: 2rem;
    color: #038989;
    text-align: center;
    zoom: 85%;
    display: block;
}

#guide .mansiongallery dl{
    margin: 13px 23px 23px;
    color: #727272;
    border-top: solid 1px #727272;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery dl{
        width: 394px;
        margin: 15px auto 40px;
    }
}
#guide .mansiongallery dt{
    font-family: "NewCezannePro-M";
    font-size: 14rem;
    text-align: center;
    border-bottom: solid 1px #727272;
}

#guide .mansiongallery dd{
    padding: 6px 0;
    font-family: "NewCezannePro-DB";
    font-size: 24rem;
    letter-spacing: 8rem;
    text-align: center;
}

#guide .mansiongallery figure{
    margin: 0 23px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery figure{
        width: 426px;
        height: 400px;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
    }
}
#guide .mansiongallery figure img{
    width: 100%;
}

#guide .mansiongallery address{
    margin: 0 23px;
    padding: 5px 0 12px;
    font-size: 22rem;
    line-height: 21rem;
    font-style: normal;
    letter-spacing: 2rem;
    color: #ffffff;
    background-color: #54afad;
    display: flex;
    
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery address{
        width: 624px;
        margin: 0;
        padding: 12px 0 10px;
    }
}

#guide .mansiongallery address strong{
    margin: 0;
    font-size: 11rem;
    letter-spacing: 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery address strong{
        margin: 0 10px 0 0;
        vertical-align: 4px;
        display: inline;
    }
}

#guide .mansiongallery address p{
    margin: auto;
}

#guide .mansiongallery a{
    margin: 32px 0 0 0;
    color: #038989;
    font-size: 12rem;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery a{
        margin: 22px 0 0 0;
        font-size: 13rem;
    }
}

#guide .mansiongallery a strong{
    font-family: "AvenirNextLTPro-Medium";
    font-size: 46rem;
    line-height: 33rem;
    font-weight: normal;
    display: block;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #guide .mansiongallery a strong{
        font-size: 42rem;
    }
}


/*/// 敷地計画 ///*/
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .lead{
        padding: 75px 0 0 0;
        height: 170px;
        position: relative;
    }
}
#landplan .lead h3,
#landplan .road h3{
    margin: 30px 0 10px;
    font-size: 17rem;
    font-weight: normal;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .lead h3,
    #landplan .road h3{
        margin: 0 0 10px;
        font-size: 20rem;
        line-height: 30rem;
        text-align: left;
        display: inline-block;
    }
}

#landplan .lead p{
    font-size: 14rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .lead p{
        text-align: left;
    }
}

#landplan .lead ul{
    margin: 35px 0 25px;
    display: flex;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .lead ul{
        width: 414px;
        margin: 0;
        position: absolute;
        top: 35px;
        right: 0;
    }
}

#landplan .lead li{
    width: calc(50% - 5px);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .lead li{
        width: 200px;
    }
}

#landplan .lead .img_wr::after{
    margin: -7vw -1vw 0 0;
    transform: scale(0.8);
}

#landplan picture{
    width: calc(100vw - 20px);
    margin: 0 -13px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan picture{
        width: calc(100vw - 100px);
        min-width: 1050px;
        margin: 0 calc(((100vw - 1150px) / 2) * -1);
    }
}

#landplan .road{
    margin: 70px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .road{
        height: 330px;
        position: relative;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .road p{
        width: 560px;
    }
}

#landplan .road figure{
    margin: 20px 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .road figure{
        width: 430px;
        height: 330px;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#landplan .equipment h3{
    padding: 0 0 8px 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 36rem;
    color: #54afad;
    border-bottom: solid 1px #666666;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment h3{
        width: 100%;
        padding: 0 0 16px 0;
    }
}

#landplan .equipment h4{
    padding: 20px 0 16px;
    font-size: 16rem;

}

#landplan .equipment a{
    width: 115px;
    height: auto;
    margin: 7px 0 0 0;
}

#landplan .equipment .key{
    padding: 0 0 40px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment .key{
        width: 485px;
        padding: 0 0 40px 0;
    }
}

#landplan .equipment .key figure{
    margin: 35px 0 0 0;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment .key figure{
        width: 417px;
        margin: 22px auto 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment .box{
        width: 485px;
    }
}

#landplan .equipment .box figure{
    width: 60%;
    margin: 20px 15% 0 25%; 
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment .box figure{
        width: 200px;
        margin: 40px auto 0; 
    }
}

#landplan .equipment .key .img_br::before{
    position: absolute;
    bottom: 0;
    left: calc(40% - 33rem);
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
	font-family: "NewCezannePro-M";
    color: #333333;
    text-align: right;
    display: block;
}
#landplan .equipment .key .img_br::after{
    margin: 0;
}

#landplan .equipment .box .img_br::after{
    margin: -5vw 10vw 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #landplan .equipment .box .img_br::after{
        margin: -10px 30px 0 0;
    }
}


/*/// 居住空間 ///*/
#inner main article{
    margin: 0;
    padding: 40px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner main article{
        margin: 0;
        padding: 0;
    }
}

#inner section{
    margin: 0 0 75px 0;
}
#inner section.living{
    margin: 120px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section{
        margin: 0 0 150px 0;
        position: relative;
        clear: both;
    }
    #inner section.b_type{
        margin: 0 0 150px auto;
    }
    #inner section.c_type{
        width: 90%;
    }
    #inner section.g_type{
        width: 93%;
        margin: 0 0 0 auto;
    }
    #inner section.living{
        margin: 300px 0 250px 0;
        padding: 0 0 58vw 0;
    }
    #inner section.rooms{
        margin: 0 0 50px 0;
    }
}

#inner section.a_type figure,
#inner section.c_type figure{
        opacity: 0;/*for Animation*/
        transform: translateX(-30px);/*for Animation*/
    }
#inner section.b_type figure,
#inner section.g_type figure{
        opacity: 0;/*for Animation*/
        transform: translateX(30px);/*for Animation*/
    }
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.a_type figure,
    #inner section.g_type figure{
        opacity: 0;/*for Animation*/
        transform: translateX(-60px);/*for Animation*/
    }
    #inner section.c_type figure{
        opacity: 0;/*for Animation*/
        transform: translateX(60px);/*for Animation*/
    }
}

#inner section.ldk figure{
    position: relative;
}

#inner section.ldk figcaption{
    font-family: "AvenirNextLTPro-Regular";
    font-size: 16rem;
    line-height: 28rem;
    color: #ffffff;
    position: absolute;
    bottom: 8px;
    right: -2px;
    opacity: 0;/*for Animation*/
    transform: translateX(10px);/*for Animation*/
}
#inner section.ldk .fade-tt{
    transform: translateX(0);
    opacity: 1 !important;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.ldk figcaption{
        font-size: 31rem;
        line-height: 75rem;
        top: 5px;
        bottom:inherit;
        right: 30px;
    }
    #inner section.a_type figcaption,
    #inner section.g_type figcaption{
        opacity: 0;/*for Animation*/
        transform: translateX(40px);/*for Animation*/
    }
    #inner section.c_type figcaption{
        opacity: 0;/*for Animation*/
        transform: translateX(-40px);/*for Animation*/
    }
    #inner section.ldk .fade-tt{
        transform: translateX(0);
        opacity: 1 !important;
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
    }
}

#inner section.ldk figcaption small{
    margin: 0 0 0 -14px;
    font-size: 12rem;
    line-height: 17rem;
    transform: scale(0.666);
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.ldk figcaption small{
        margin: 0;
        transform: scale(1);
    }
}

#inner section.ldk figcaption small span{
    padding: 8px 0 0 0;
    border-top: solid 2px #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.ldk figcaption small span{
        padding: 12px 0 0 0;
        border-top: solid 2px #ffffff;
    }
}

#inner section figure:not(.ldk) img{
    margin: 0 0 4px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.ldk div{
        position: absolute;
        right: 30px;
        bottom: 30px;
    }
}

#inner section h3{
    margin: 0 0 15px 0;
    font-size: 36rem;
    font-weight: normal;
    color: #54aeac;
    text-align: center;
    opacity: 0;/*for Animation*/
    transform: scale(1.15);/*for Animation*/
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section h3,
    #inner section h4,
    #inner section>div:not(.sash)>p{
        opacity: 0;/*for Animation*/
        transform: translateX(-60px) scale(1);/*for Animation*/
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.living h3{
        position: absolute;
        top: -110px;
        left: 7%;
    }
}

#inner section h4{
    margin: 18px 0 6px;
    font-size: 16rem;
    font-weight: normal;
    color: #666666;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section h4{
        margin: 0 0 16px;
        font-size: 18rem;
        letter-spacing: 1rem;
        text-align: left;
    }
    #inner section.ldk h4{
        font-family: "NewCezannePro-DB";
        color: #ffffff
    }
    #inner section.ldk h4{
        opacity: 0;/*for Animation*/
        transform: translateX(30px);/*for Animation*/
    }
}

#inner section h5{
    margin: 12px 0 10px;
    font-size: 24rem;
    font-weight: normal;
    color: #666666;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section h5{
        margin: 8px 0 3px;
        text-align: left;
    }
}

#inner section p{
    color: #777777;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section p{
        line-height: 30rem;
        text-align: left;
    }
    #inner section.ldk p{
        color: #ffffff
    }
    #inner section.ldk p{
        opacity: 0;/*for Animation*/
        transform: translateX(30px);/*for Animation*/
    }
}

#inner section.living>figure img.ph1{
    opacity: 0;/*for Animation*/
    transform: translateX(30px);/*for Animation*/
}
#inner section.living>figure img.ph2{
    opacity: 0;/*for Animation*/
    transform: translateX(-30px);/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.living>figure img.ph1{
        width: 65%;
        margin: 0 0 88px auto;
        display: block;
        opacity: 0;/*for Animation*/
        transform: translateX(40px);/*for Animation*/
    }
    #inner section.living>figure img.ph2{
        position: absolute;
        opacity: 0;/*for Animation*/
        transform: translateX(-40px);/*for Animation*/
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.living .txt{
        position: absolute;
        top: -60px;
        left: 7%;
    }
}

#inner section .sash{
    margin: 50px 33px 120px;
    opacity: 0;/*for Animation*/
    transform: scale(1.1);/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section .sash{
        width: 24%;
        margin: 0;
        position: absolute;
        bottom: calc(58vw + 90px);
        left: 7%;
        opacity: 0;/*for Animation*/
        transform: translateY(30px) scale(1);/*for Animation*/
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section .sash p{
        line-height: 26rem;
    }
}

#inner section .sash .note{
    margin: 8px 0 0 0;
    color: #666666;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section .sash .note{
        text-align: left;
    }
}

#inner section.rooms figure{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.rooms figure{
        justify-content: flex-end;
    }
}

#inner section.rooms figure img.ph1{
    opacity: 0;/*for Animation*/
    transform: translateX(30px);/*for Animation*/
}
#inner section.rooms figure img.ph2{
    width: calc(68vw - 2px);
    height: 46vw;
    object-fit: cover;
    opacity: 0;/*for Animation*/
    transform: translateX(-30px);/*for Animation*/
}
#inner section.rooms figure img.ph3{
    width: calc(32vw - 2px);
    height: 46vw;
    object-fit: cover;
    opacity: 0;/*for Animation*/
    transform: translateX(30px);/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.rooms figure img.ph1{
        width: 90%;
        margin: 0 auto 80px 0;
        opacity: 0;/*for Animation*/
        transform: translateX(-40px);/*for Animation*/
    }
    #inner section.rooms figure img.ph2{
        width: 44%;
        height: 30vw;
        opacity: 0;/*for Animation*/
        transform: translateX(40px);/*for Animation*/
    }
    #inner section.rooms figure img.ph3{
        width: 20%;
        height: 30vw;
        margin: 0 0 0 10px;
        opacity: 0;/*for Animation*/
        transform: translateX(40px);/*for Animation*/
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.rooms h3{
        position: absolute;
        bottom: 140px;
        left: 7%;
    }
}


@media print, screen and (min-width: 768px) {/*PC*/
    #inner section.rooms .txt{
        position: absolute;
        bottom: 0;
        left: 7%;
    }
}

#inner section>div:not(.sash){
    opacity: 0;/*for Animation*/
    transform: scale(1.1);/*for Animation*/
}

#inner section.a_type .fade-a,
#inner section.b_type .fade-b,
#inner section.c_type .fade-c,
#inner section.g_type .fade-g,
#inner section.living>figure img.fade-ph,
#inner section.rooms>figure img.fade-ph{
        transform: translateX(0);
        opacity: 1 !important;
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
}

#inner section.ldk .fade-txt,
#inner section.living .fade-txt,
#inner section.rooms .fade-txt{
        transform: scale(1);
        opacity: 1 !important;
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.0s;/*easeOutExpo*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #inner section>div:not(.sash){
        opacity: 1;
        transform: scale(1);
    }

    #inner section.a_type .fade-a,
    #inner section.b_type .fade-b,
    #inner section.c_type .fade-c,
    #inner section.g_type .fade-g,
    #inner section.living>figure img.fade-ph,
    #inner section.rooms>figure img.fade-ph{
        transform: translateX(0);
        opacity: 1 !important;
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
    }

    #inner section.ldk .fade-txt,
    #inner section.living .fade-txt,
    #inner section.rooms .fade-txt{
        transform: translate(0, 0);
        opacity: 1 !important;
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
    }
}



/*/// デザイン ///*/
#design main article{
    margin: 0;
}

#design section{
    margin: 120px 0 0 0;
    padding: 40px 0 0 0;
    position: relative;
    overflow: hidden;
    clear: both;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section{
        margin: 0;
        padding: 0;
    }
    #design section.approach{
        margin: 220px 0 0 0;
    }
    #design section.hall{
        margin: 240px 0 0 0;
    }
}

#design section:not(.top) h3{
    margin: 0 0 10px 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 32rem;
    line-height: 32rem;
    letter-spacing: 2rem;
    text-align: center;
    color: #54aeac;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform-origin: center;/*for Animation*/
    transform: scale(1.2);/*for Animation*/
    opacity: 0;/*for Animation*/
}
#design section h3.fade-top-h3,
#design section h3.fade-fc-h3,
#design section h3.fade-ap-h3,
#design section h3.fade-hl-h3{
    transform: scale(1) translateX(0) translateY(0);
    opacity: 1;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;/*easeOutCubic*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section:not(.top) h3{
        width: fit-content;
        font-size: 50rem;
        line-height: 50rem;
        letter-spacing: 2rem;
        text-align: left;
        overflow: hidden;
        position: relative;
        transform-origin: center;/*for Animation*/
        transform: scale(1.1);/*for Animation*/
    }

    #design section h3.fade-top-h3{
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
    }
    #design section h3.fade-h3{
        opacity: 1;
        transform: scale(1) translateX(0) translateY(0);
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
    }
}

#design section:not(.top) h4{
    margin: 24px 0 15px;
    font-size: 18rem;
    text-align: center;
    font-weight: normal;
    color: #777777;
    opacity: 0;/*for Animation*/
    transform: translateY(20px);/*for Animation*/
}
#design section h4.fade-h4,
#design section h4.fade-ap-h4,
#design section h4.fade-hl-h4 {
    transform: translateY(0);
    opacity: 1;
    transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section:not(.top) h4{
        margin: 24px 0 8px;
        font-size: 18rem;
        text-align: left;
        transform: translateX(-15px);/*for Animation*/
    }
    #design section h4.fade-h4{
        transform: scale(1) translateX(0) translateY(0);
    }
}


#design section figure{
    margin: 0 0 30px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section figure{
        margin: 0px 0 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #design section.facade>div{
        clear: both;
        margin: 0 0 0 calc((100% - 1050px) / 2);
    }
    #design section.approach>div{
        position: absolute;
        bottom: -10px;
        left: calc((100% - 1050px) / 2);
    }
    #design section.hall>div{
        position: absolute;
        bottom: 0;
        left: calc((100% - 1050px) / 2);
    }
}

#design section p{
    color: #777777;
    text-align: center;
}
#design section div p{
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section p{
        font-size: 14rem;
        line-height: 35rem;;
        text-align: left;
    }
    #design section div p{
        transform: translateX(-15px);/*for Animation*/
    }
}
#design section div p.fade-top-p,
#design section div p.fade-p{
    transform: scale(1) translateX(0) translateY(0);
    opacity: 1;
    transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;/*easeOutCubic*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section div p.fade-top-p,
    #design section div p.fade-p{
        transition: all cubic-bezier(0.19, 1, 0.22, 1) 1.5s;/*easeOutExpo*/
}
}

#design .top{
    margin: 20px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top{
        margin: 80px 0 0 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

/* #design .top figure img{
    width: 100vw;
    height: 74vw;
    object-fit: cover;
    object-position: 15% 50%;
}
@media print, screen and (min-width: 768px) {
    #design .top figure img{
        width: 100%;
        height: auto;
        object-fit: fill;
    }
} */

#design .top div{
    margin: 0 23px;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top div{
        margin: 40px 0 0 calc((100% - 1050px) / 2);
        text-align: left;
    }
}

#design .top h3{
    margin: 0 0 15px 0;
    font-size: 18rem;
    letter-spacing: 1rem;
    font-weight: normal;
    color: #777777;
    opacity: 0;/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/    
#design .top h3{
    margin: 0 0 20px 0;
    font-size: 21rem;
    letter-spacing: 2rem;
    transform: translateX(-15px);
    }
}

#design .top div p{
    opacity: 0;/*for Animation*/
}

@media print, screen and (min-width: 768px) {/*PC*/    
    #design .top div p{
        font-size: 15rem;
        line-height: 40rem;
        letter-spacing: 1.5rem;
        transform: translateX(-25px);
        }
    }

#design .top aside{
    margin: 40px 43px 0;
    padding: 15px 0px;
    border-top: solid 1px #bababa;
    border-bottom: solid 1px #bababa;
    opacity: 0;/*for Animation*/
    transform: translateY(50px);/*for Animation*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top aside{
        width: 330px;
        margin: 25px 120px 100px 0;
        padding: 0 0 0 25px;
        border: none;
        border-left: solid 1px #999999;
        transform: translateX(30px);/*for Animation*/
    }
}
#design .top .fade-top-aside{
    opacity: 1;
    transform: translateY(0);
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 1.5s;/*easeOutQuint*/
}

#design .top aside h4{
    margin: 0 0 10px 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 18rem;
    letter-spacing: 3rem;
    font-weight: normal;
    text-align: center;
    color: #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top aside h4{
        margin: -5px 0 12px 0;
        text-align: left;
    }
}

#design .top aside .txt{
    font-size: 12rem;
    text-align: left;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top aside .txt{
        font-size: 13rem;
        line-height: 28rem;
    }
}

#design .top aside .sign{
    margin: 10px 0 0 0;
    font-size: 12rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .top aside .sign{
        margin: 10px 0 -20px 0;
    }
}

#design .top aside .sign b{
    margin: 0 0 0 8px;
    font-size: 14rem;
}

#design .top aside .sign img{
    width: 60px;
}

#design .approach .ph4 img{
    width: 100vw;
    height: 60vw;
    object-fit: cover;
    object-position: 49% 50%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .approach .ph4 img{
        width: 100%;
        height: auto;
        object-fit: fill;
    }
}

#design section.hall .note{
    margin: 20px auto 0;
    text-align: center;
    display: block;
}
#design section.hall .note img{
    width: 54px;
    margin: 0 5px 0 0;
    vertical-align: -6px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design section.hall .note{
        margin: 30px 0 0;
        text-align: left;
        opacity: 0;/*for Animation*/
    }
    #design section.hall .note img{
        width: 66px;
        margin: 0 0 5px 0;
        display: block;
    }
    #design section.hall .fade-note{
        opacity: 1;
        transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 1.5s;/*easeOutCubic*/
    }
}

#design .facade .ph2,
#design .approach .ph4,
#design .hall .ph6{
    opacity: 0;/*for Animation*/
    transform: translateX(-100px);/*for Animation*/
}
#design .facade .ph3,
#design .approach .ph5,
#design .hall .ph7{
    opacity: 0;/*for Animation*/
    transform: translateX(100px);/*for Animation*/
}
#design .approach .fade-ph4{
    opacity: 1 !important;
    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 2.5s;/*easeOutCirc*/
}
#design .facade .fade-ph2,
#design .facade .fade-ph3,
#design .approach .fade-ph4,
#design .approach .fade-ph5,
#design .hall .fade-ph6,
#design .hall .fade-ph7{
    opacity: 1 !important;
    transform: translateX(0) !important;
    transition: all cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;/*easeOutCirc*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #design .facade .ph2{
        width: 50%;
        float: left;
    }
    #design .facade .ph3{
        width: 48%;
        margin: 18vw 0 -96px 0;
        float: right;
    }
    #design .approach .ph5{
        width: 60vw;
        height: auto;
        margin: 100px 0 0 0;
        float: right;
    }
    #design .hall .ph6{
        width: 74%;
    }
    #design .hall .ph7{
        width: 52%;
        margin: 80px 0 0 0;
        float: right;
    }
    #design .approach .ph4{
        opacity: 0;/*for Animation*/
        transform: translateX(0);/*for Animation*/
    }
    #design .facade .ph2,
    #design .hall .ph6{
        opacity: 0;/*for Animation*/
        transform: translateX(-50px);/*for Animation*/
    }
    #design .facade .ph3,
    #design .approach .ph5,
    #design .hall .ph7{
        opacity: 0;/*for Animation*/
        transform: translateX(50px);/*for Animation*/
    }
}



/*/// 間取り ///*/
#roomtype main h3{
    margin: 30px 0;
    padding: 0 23px;
    font-size: 15rem;
    line-height: 25rem;
    font-weight: normal;
    text-align: center;
    box-sizing: border-box;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype main h3{
        margin: 30px 0 50px;
        padding: 0;
        font-size: 20rem;
        line-height: 32rem;
    }
}

#roomtype main .banner_select{
    margin: 0 23px 43px;
}
#roomtype main .banner_select li{
    margin: 0 0 10px 0;
}
#roomtype main .banner_select li img{
    width: 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomtype main .banner_select{
    width: 1050px;
    margin: 35px auto 50px;
    display: flex;
    justify-content: space-between;
}
#roomtype main .banner_select li{
    width: 520px;
}
}

#roomtype .rooms{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* opacity: 0; */
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomtype .rooms{
    padding: 0 0 40px 0;
    justify-content: flex-start;
}
}

#roomtype .rooms>div{
    width: 100%;
    min-height: 180px;
    margin: 0 0 24px 0;
    display: block;
    position: relative;
    background-color: #ffffff;
    box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.05);
    display: flex;
    /* opacity: 0; */
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms>div{
        width: 210px;
        height: 320px;
        margin: 0 22px 22px 0;
        padding: 18px;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.03);
    }
    #roomtype .rooms div:nth-child(4n){
        margin: 0 0 22px 0;
    }
}


#roomtype .rooms>div>dl{
    width: calc(100% - 116px);
    min-height: 180px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms>div>dl{
        width: 100%;
    }
}

#roomtype .rooms>div ul{
    width: 116px;
    background-color: #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms>div ul{
        width: 100%;
        background-color: inherit;
    }
}
#roomtype .rooms>div li{
    height: calc(100% / 3);
    background-image: url(../img/common_img/ic_arrow_wh.png);
    background-size: auto 10px;
    background-position: 2px center;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms>div li{
        height: 24px;
        margin: 7px 0 0 0;
        background-position: 5px center;
        background-color: #54aeac;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.75s; *//*easeOutQuint*/
    }
    #roomtype .rooms>div li:hover{
        background-color: rgba(84, 175, 173, 0.60);
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 1s; *//*easeOutQuint*/
    }
}

#roomtype .rooms>div li a{
    height: 100%;
    margin: 0 8px;
    font-size: 13rem;
    letter-spacing: 0;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: solid 1px rgba( 255, 255, 255, 0.40 );
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms>div li a{
        margin: 0;
        letter-spacing: 0.25rem;
    }
    #roomtype.win .rooms>div li a{
        padding: 2px 0 0 0;
    }
}

/* #roomtype .rooms .sold{
    display: none;
}
@media print, screen and (min-width: 768px) {
#roomtype .rooms .sold{
    width: 342px;
    margin: 0 0 13px 0;
    outline: 2px solid #1a5032;
    outline-offset: -2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 30rem;
    letter-spacing: 1rem;
    color: #7fa8b4;
}
} */

#roomtype .rooms dt.type{
    margin: 12px 0 7px;
    font-size: 11rem;
    line-height: 11rem;
	font-weight: normal;
    color: #54aeac;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dt.type{
        padding: 0 0 4px;
        font-size: 14rem;
    }
    #roomtype.win .rooms dt.type{
        padding: 0;
    }
}

#roomtype .rooms dt.type b{
    margin: 0 4px 0 22rem;
    font-size: 60rem;
    line-height: 40rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dt.type b{
        margin: 0 4px 0 28rem;
        font-family: "AvenirNextLTPro-Regular";
        font-size: 72rem;
    }
}

#roomtype .rooms dt.layout{
    margin: 0 10px;
    padding: 5px 0 4px;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 26rem;
    line-height: 26rem;
    font-weight: normal;
    text-align: center;
    border-top: solid 1px #54aeac;
    border-bottom: solid 1px #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomtype .rooms dt.layout{
    margin: 0;
    padding: 8px 0 7px;
    font-size: 38rem;
    line-height:38rem;
}
#roomtype.win .rooms dt.layout{
    padding: 10px 0 0;
}
}

#roomtype .rooms dd.space dl{
    margin: 5px 10px 15px;
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: -0.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomtype .rooms dd.space dl{
    margin: 12px 0 0;
    font-size: 13rem;
}
}

#roomtype .rooms dd.space dt{
    width: 40%;
    margin: 8px 0 0 -4px;
    white-space: nowrap;
    transform: scale(0.9);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dd.space dt{
        margin: 5px 0 0 0;
        line-height: 22rem;
        transform: scale(1);
    }
}
#roomtype .rooms dd.space dt:first-child{
    font-size: 14rem;
    letter-spacing: 0rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dd.space dt:first-child{
        font-size: 13rem;
    }
}

#roomtype .rooms dd.space dd{
    width: 60%;
	margin: 7px 0 0 0;
	font-family: "AvenirNextLTPro-Regular";
	font-size: 13rem;
    text-align: right;
    white-space: nowrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dd.space dd{
        margin: 5px 0 0 0;
        font-size: 20rem;
        line-height: 20rem;
    }
}

#roomtype .rooms dd.space dd small{
    font-size: 11rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dd.space dd small{
        font-size: 14rem;
    }
}

#roomtype .rooms dd.space dd b{
    font-size: 19rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms dd.space dd b{
        font-size: 28rem;
    }
}

#roomtype .rooms dd.readmore{
    width: 100%;
    padding: 8px 0;
    font-size: 11rem;
    line-height: 11rem;
    color: #f2f2f2;
    text-align: center;
    background-color: #54aeac;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomtype .rooms dd.readmore{
    width: auto;
    margin: 0 18px;
    padding: 7px 0 7px 7px;
    font-size: 12rem;
    line-height: 12rem;
    bottom: 18px;
}
#roomtype.win .rooms dd.readmore{
    padding: 8px 0 7px 7px;
}
#roomtype .rooms a:hover dd.readmore{
    background-color: #038989;
    transition: all 0.25s ease-in;
}
}

#roomtype .rooms dd.readmore img{
    width: 10px;
    height: auto;
    margin: 0 0 0 4px
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype.win .rooms dd.readmore img{
        vertical-align: text-top;
    }
}

#roomtype .rooms ul.note{
    width: 100%;
    margin: -8px 0 70px 0;
    font-size: 12rem;
    line-height: 18rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms ul.note{
        display: flex;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .rooms ul.note li{
        margin: 0 18px 0 0;
    }
}
#roomtype .select{
    padding: 30px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select,
    #roomtype .equip{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select dl,
    #roomtype .equip dl{
        width: 490px;
    }
}

#roomtype .select h4,
#roomtype .equip h4{
    margin: 85px 0 0 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 36rem;
    line-height: 40rem;
    font-weight: normal;
    color: #54afad;
    border-bottom: solid 1px #666666;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select h4,
    #roomtype .equip h4{
        width: 100%;
        margin: 65px 0 0 0;
        padding: 0 0 6px 0;
    }
}

#roomtype .select h4 span{
    padding: 11px 0;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 16rem;
    color: #333333;
    border-top: solid 1px #666666;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select h4 span{
        margin: 0 0 0 15px;
        padding: 8px 0 8px 15px;
        font-size: 18rem;
        border-left: solid 1px #989898;
        border-top: none;
        display: inline;
        vertical-align: 6px;
    }
}

#roomtype .select dt{
    margin: 15px 0 10px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 20rem;
    color: #657983;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select dt{
        font-size: 24rem;
        margin: 18px 0 6px 0;
    }
}

#roomtype .select .ic{
    width: 120px;
    display: flex;
    flex-wrap: wrap;
    font-size: 13rem;
    line-height: 13rem;
    font-weight: normal;
    border: solid 1px #b83948;
}

#roomtype .select .ic span{
    width: 50%;
    padding: 4px 0 2px;
    text-align: center;
    white-space: nowrap;
}

#roomtype .select .ic span:first-child{
    color: #ffffff;
    background-color: #b83948;
}

#roomtype .select .ic span:last-child{
    color: #b83948;
    background-color: #ffffff;
}

#roomtype .select h5{
    width: 100%;
    padding: 2px 4px;
    font-family: "NewCezannePro-DB";
    font-size: 14rem;
    font-weight: normal;
    letter-spacing: 0;
    color: #ffffff;
    background-color: #b83948;
    display: flex;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select h5{
        padding: 4px 4px;
        font-size: 17rem;
        justify-content: center;
    }
}

#roomtype .select h5 .ex{
    width: 20px;
    height: 20px;
    margin: 0 2px 0 0;
    line-height: 20rem;
    color: #b83948;
    text-align: center;
    background-color: #ffffff;
    border-radius: 10px;
    display: inline-block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select h5 .ex{
        width: 24px;
        height: 24px;
        line-height: 24rem;
        border-radius: 12px;
    }
}

#roomtype .select .gas_ih{
    margin: 0 0 50px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .gas_ih{
        margin: 0 0 15px 0;
    }
}

#roomtype .select .gas_ih dd{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-image: url(../img/roomplan_img/ic_tri.png);
    background-size: 12px auto;
    background-position: center 20vw;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .gas_ih dd{
        background-size: 19px auto;
        background-position: center 86px;
    }
}

#roomtype .select .gas_ih figure{
    width: calc(50% - 9px);
    margin: 12px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .gas_ih figure{
        width: 220px;
        margin: 12px 0 0 0;
    }
}

#roomtype .select .gas_ih figcaption{
    font-size: 14rem;
    line-height: 16rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .gas_ih figcaption{
        margin: 10px 0 0 0;
        font-size: 15rem;
        line-height: 18rem;
        text-align: left;
        display: flex;
        align-items: center;
    }
}

#roomtype .select .gas_ih figcaption strong{
    margin: 8px 0;
    padding: 3px 0;
    line-height: 13rem;
    font-weight: normal;
    text-align: center;
    background-color: #c6d3da;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .gas_ih figcaption strong{
        margin: -2px 8px 0 0;
        padding: 2px 0 0 0;
        width: 52px;
        height: 46px;
        line-height: 16rem;
        letter-spacing: -0.25rem;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#roomtype .select .color{
    margin: 0 0 12px 0;
}

#roomtype .select .color dd{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#roomtype .select .color figure{
    width: calc(50% - 5px);
    margin: 0 0 10px;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .color figure{
        width: calc(50% - 7px);
        margin: 0 0 14px;
    }
}

#roomtype .select .color figcaption{
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    text-align: center;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 11rem;
    line-height: 11rem;
    color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .color figcaption{
        font-size: 13rem;
    }
}

#roomtype .select .color figcaption b{
    margin: 3px 0 4px 0;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 14rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .color figcaption b{
        margin: 6px 0 8px 0;
        font-size: 16rem;
    }
}

#roomtype .select .color dd strong{
    margin: auto;
    font-size: 14rem;
    line-height: 22rem;
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .color dd strong{
        font-size: 16rem;
    }
}

#roomtype .select .color .note{
    width: 100%;
    margin: -5px 0 10px;
    text-align: right;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .color .note{
        margin: -10px 0 10px;
    }
}

#roomtype .select .notice{
    margin: 0 0 0 11rem;
    font-size: 11rem;
    line-height: 14rem;
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .notice{
        display: flex;
        margin: 0 0 0 -11rem;
    }
}

#roomtype .select .notice li::first-letter{
    margin: 0 0 0 -11rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .select .notice li::first-letter{
        margin: 0 0 0 11rem;
    }
}

#roomtype .equip dl{
    margin: 24px 0 48px;
}

#roomtype .equip dt{
    margin: 0 0 10px 0;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 20rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .equip dt{
        margin: 0 0 15px 0;
        font-size: 18rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .equip .glass{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
    }
}

#roomtype .equip .glass .ph{
    width: 100%;
    margin: 10px 0 0 0;
    padding: 3px 0 10px;
    background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .equip .glass .ph{
        width: 240px;
        margin: 5px 0 0 0;
        padding: 18px 15px 24px;
    }
}

#roomtype .equip .glass img{
    width: 240px;
    margin: auto;
    display: block;
}
#roomtype .equip .key img{
    margin: 20px auto;
    display: block;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .equip .glass img{
        width: 100%;
    }
    #roomtype .equip .key img{
        width: 416px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomtype .equip .glass .txt{
        width: 200px;
    }
    #roomtype .equip .key .txt{
        letter-spacing: 0;
    }
}

/*各間取り*/
#roomplan .nav_tab{
    width: calc(100% - 20px);
    margin: 22px auto 0;
    display: flex;
    justify-content: space-between;
    /*opacity: 0;*/
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .nav_tab{
        width: 1050px;
        margin: 45px auto 0;
    }
}

#roomplan .nav_tab div{
    
}

#roomplan .nav_tab button{
    width: calc(100% / 3) !important;
    padding: 0;
    appearance: none;
    background-color: inherit;
    border: none;
    border-bottom: solid 2px #54aeac;
    position: relative;
}
#roomplan .nav_tab button:nth-child(2),
#roomplan .nav_tab button:nth-child(3){
    padding: 0 0 0 2px;
}

#roomplan .nav_tab button span{
    height: 100%;
    height: 45px;
    padding: 6px 0 0 0;
    font-family: "NewCezannePro-M";
    font-size: 16rem;
    line-height: 18rem;
    text-align: center;
    color: #808080;
    background-color: #e5e5e5;
    display: block;
    clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
    cursor: pointer;
    transition: all 300ms 0s ease;
}
#roomplan .nav_tab button:nth-child(2) span,
#roomplan .nav_tab button:nth-child(3) span{
    letter-spacing: -0.75rem;
}

@media print, screen and (min-width: 768px) {/*PC*/
#roomplan .nav_tab button:nth-child(2) span,
#roomplan .nav_tab button:nth-child(3) span{
    letter-spacing: 0.25rem;
}
    #roomplan .nav_tab button span{
        font-size: 18rem;
        line-height: 18rem;
    }
}

#roomplan .nav_tab button:hover span{
    background-color: #d2d2d2;
    transition: all 300ms 0s ease;
}
#roomplan .nav_tab .swiper-slide-thumb-active span{
    color: #ffffff !important;
    background-color: #54aeac !important;
}

#roomplan .nav_tab button span small{
    font-family: "AvenirNextLTPro-Medium";
    line-height: 15rem;
    letter-spacing: 0.5rem;
    color: #bfbfbf;
    display: block;
    transform: scale(0.75);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .nav_tab button span small{
    line-height: 19rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .nav_tab button:nth-child(2) span small,
    #roomplan .nav_tab button:nth-child(3) span small{
        margin: 0 0 -4rem 0;
    }
    #roomplan.win .nav_tab button:nth-child(2) span small,
    #roomplan.win .nav_tab button:nth-child(3) span small{
        margin: 0 0 -1rem 0;
    }
}

#roomplan .nav_tab .swiper-slide-thumb-active span small{
    color: #bbdfde !important;
}

#roomplan .nav_tab button span b{
    font-family: "AvenirNextLTPro-Medium";
    font-size: 18rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .nav_tab button span b{
        font-family: "AvenirNextLTPro-Regular";
        font-size: 30rem;
        vertical-align: -1px;
    }
}


#roomplan .nav_tab button.active::after{
    content: "";
    width: 30px;
    margin: auto;
    height: 15px;
    display: block;
    background-color: #54aeac !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -15px;
    z-index: 9999;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .fig{
        position: relative;
    }
}

#roomplan .fig .main-swiper .swiper-slide{
    background-color: #f1f6f5;
}

#roomplan main h3{
    min-height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-weight: normal;
    border-bottom: solid 2px rgba(84, 175, 173, 0.40);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3{
        width: 410px;
        height: auto;
        margin: 50px auto 0;
        padding: 0 640px 0 0;
        flex-wrap: wrap;
        border-bottom: inherit;
    }
}

#roomplan main h3 .type{
    margin: 0 0 -10px 0;
    padding: 0 6px 0 0;
    font-size: 18rem;
    white-space: nowrap;
    background-color: #f1f6f5;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .type{
        margin: 0;
        font-size: 25rem;
    }
}

#roomplan main h3 .type small{
    font-family: "AvenirNextLTPro-Medium";background-color: #f1f6f5;
    font-size: 16rem;
    line-height: 16rem;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .type small{
        margin: 0;
        font-size: 20rem;
        display: inline;
    }
}

#roomplan main h3 .type b{
    font-size: 78rem;
    line-height: 62rem;
    font-weight: normal;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .type b{
        padding: 0 10px 0 0;
        font-family: "AvenirNextLTPro-Regular";
        font-size: 90rem;
        font-weight: normal;
    }
    #roomplan.win main h3 .type b{
        line-height: 68rem;
    }
}
#roomplan main h3 .title-swiper{
    width: 100%;
    
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .title-swiper{
        height: auto;
    }
}

#roomplan main h3 .title-swiper li{
    height: 60px;
    padding: 0 0 4px 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 36rem;
    line-height: 36rem;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
    overflow: hidden;
    background-color: #f0f5f4;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .title-swiper li{
        width: 100%;
        height: auto;
        padding: 8px 0 0 0;
        font-family: "AvenirNextLTPro-Regular","NewCezannePro-M";
        font-size: 44rem !important;
        line-height: 44rem !important;
        text-align: left;
        justify-content: flex-start;
        align-items: flex-start;
        border-top: solid 2px rgba(84, 175, 173, 0.40);
    }
    #roomplan.win main h3 .title-swiper li{
        padding: 12px 0 0 0;
    }
    #roomplan.d_type main h3 .title-swiper li{
        font-size: 38rem;
        letter-spacing: -2rem;
    }
}

#roomplan.a_type main h3 .tt1,
#roomplan.a_type main h3 .tt2,
#roomplan.b_type main h3 .tt1,
#roomplan.b_type main h3 .tt2,
#roomplan.c_type main h3 .tt1,
#roomplan.d_type main h3 .tt1,
#roomplan.d_type main h3 .tt2,
#roomplan.e_type main h3 .tt2,
#roomplan.f_type main h3 .tt1,
#roomplan.f_type main h3 .tt2,
#roomplan.g_type main h3 .tt1,
#roomplan.g_type main h3 .tt2{
    font-size: 28rem;
    line-height: 28rem;
}

#roomplan main h3 .title-swiper span.jpn{
    font-size: 25rem;
    letter-spacing: -1rem;
    display: inline !important;
}
#roomplan.d_type main h3 .title-swiper span.jpn{
    letter-spacing: -2.5rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main h3 .title-swiper span.jpn{
    font-size: 40rem;
    letter-spacing: -1rem;
    }
    #roomplan.d_type.win main h3 .title-swiper span.jpn{
    margin: -5px 0 0 0;
    letter-spacing: -1rem;
}
}

#roomplan .spec{
    margin: 0 23px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec{
        width: 414px !important;
        margin: auto;
        position: absolute;
        left: calc((100% - 1050px) / 2);
        z-index: 999;
        background-color: #f0f5f4;
    }
}

#roomplan .spec dl{
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14rem;
}

#roomplan .spec dt{
    width: 5%;
    line-height: 30rem;
    border-bottom: solid 1px #b2b2b2;
    white-space: nowrap;
}
#roomplan .spec dt:first-child{
    font-size: 17rem;
}

#roomplan .spec dd{
    width: 95%;
    padding: 9px 0 0 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 24rem;
    text-align: right;
    border-bottom: solid 1px #b2b2b2;
    white-space: nowrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec dd{
        padding: 18px 0 0 0;
    }
}

#roomplan .spec dd b{
    vertical-align: bottom;
    font-size: 36rem;
    line-height: 41rem;
    font-weight: normal;
}


#roomplan .spec dd small{
    font-size: 18rem;
    line-height: 28rem;
}

#roomplan .spec dt.price{
    padding: 12px 0 0 0;
    font-size: 12rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec dt.price{
    font-size: 14rem;
    border-bottom: none;
}
}

#roomplan .spec dt.price b{
    padding: 3px 7px 4px 7px;
    font-weight: normal;
    line-height: 14rem;
    color: #ffffff;
    background-color: #b92039;
    border-radius: 3px;
    vertical-align: 5px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec dt.price b{
        padding: 3px 10px 3px 10px;
    }
    #roomplan.win .spec dt.price b{
        padding: 4px 10px 2px 10px;
    }
}

#roomplan .spec dd.price{
    font-family: "NewCezannePro-DB";
    font-size: 15rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec dd.price{
        padding: 12px 0 0 0;
        font-family: "NewCezannePro-M";
        font-size: 16rem;
        border-bottom: none;
    }
}

#roomplan .spec dd.price b{
    font-family: "AvenirNextLTPro-Regular";
    font-size: 32rem;
    letter-spacing: 0;
    color: #b92039;
    vertical-align: -1px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .spec dd.price b{
        font-size: 40rem;
    }
}


#roomplan .fig{
    overflow: hidden;
}

#roomplan .fig figure.plan{
    position: relative;
    padding: 20px 0 50px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .fig figure.plan{
        width: 550px;
        padding: 55px 0 80px 500px;
    }
}

#roomplan .fig figure.plan img.north{
    width: auto;
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .fig figure.plan img.north{
        right: 0;
    bottom: 30px;
}
}

#roomplan .notice{
    margin: -20px 0 0 0;
    display: flex;
    flex-wrap: wrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .notice{
        margin: 0 0 15px 0;
    }
}

#roomplan .notice li{
    margin: 0 10px 10px 0;
    font-size: 13rem;
    line-height: 13rem;
    display: flex;
}


#roomplan .notice li.txt{
    width: 100%;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .notice li.txt{
        width: auto;
        margin: 0 0 0 5px;
    }
}

#roomplan .notice img{
    width: 28px;
    height: 10px;
    margin: 2px 4px 0 0;
}

#roomplan .fig .point{
    margin: 45px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .fig .point{
        width: 396px;
        padding: 0 0 5px 20px;
        border-left: solid 1px #b2b2b2;
        border-bottom: solid 1px #b2b2b2;
        position: absolute;
        bottom: 107px;
    }
}

#roomplan .fig .point dt{
    margin: 0 0 14px;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 26rem;
    letter-spacing: 1rem;
    color: rgba(84, 175, 173, 0.70);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .fig .point dt{
        margin: 0 0 20px;
    }
}

#roomplan .fig .point dd{
    margin: 0 0 18px 11rem;
    font-size: 14rem;
    line-height: 18rem;
}

#roomplan .fig .point dd::first-letter{
    margin: 0 0 0 -11rem;
    font-size: 11rem;
    color: rgba(84, 175, 173, 0.50);
    vertical-align: 1rem;
}

#roomplan main nav.page{
    margin: 40px 23px -10px 23px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 999;
}
@media print, screen and (min-width: 768px) {/*PC*/
#roomplan main nav.page{
    width: 1050px;
    margin: 0 auto -30px;
}
}

#roomplan main nav.page a{
    color: #4d4d4d;
    transition: all 400ms 0s ease;
}
#roomplan main nav.page a:hover{
    color: #54aeac;
    transition: all 400ms 0s ease;
}
		
#roomplan main nav.page .prev,
#roomplan main nav.page .next{
    font-size: 11rem;
    background-size: 10px 9px;
    background-repeat: no-repeat;
    border-top: solid 2px rgba(84, 175, 173, 1);
}


#roomplan main nav.page .prev b,
#roomplan main nav.page .next b{
    font-family: "AvenirNextLTPro-Regular";
    font-size: 28rem;
    vertical-align: -5px;
    font-weight: normal;
}


#roomplan main nav.page .prev{
    padding: 8px 0 0 15px;
    background-image: url(../img/common_img/ic_prev.png);
    background-position: left 16px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main nav.page .prev{
	padding: 10px 0 0 25px;
    }
}

#roomplan main nav.page .next{
    padding: 8px 15px 0 0;
    background-image: url(../img/common_img/ic_next.png);
    background-position: right 16px;
    text-align: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main nav.page .next{
	padding: 10px 25px 0 0;
    }
}

#roomplan main nav.page .back{
    padding: 8px 3px 10px 0;
    font-size: 12rem;
    white-space: nowrap;
    text-align: center;
    background-image: url(../img/common_img/ic_back.png);
    background-size: 11px 7px;
    background-position: center 29px;
    background-repeat: no-repeat;
    border-top: solid 2px #999999;
    flex-grow: 1;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan main nav.page .back{
        font-size: 14rem;
        background-position: center 32px;
    }
}

.block {
    margin: 0 -23px;
    padding: 0 23px;
    position: relative;
    overflow: hidden;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .block {
        width: 515px;
        margin: auto;
}
}
#roomplan .block{
    height: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #roomplan .block{
        width: 360px;
        height: auto;
        margin: 45px auto 0;
    }
}

.block figcaption{
    width: 30vw;
    height: 28px;
    margin: auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .block figcaption{
        width: 160px;
        height: 40px;
    }
    #roomplan .block figcaption{
        width: 120px;
        height: 30px;
    }
}

.block ul{
    display: flex;
}

.block a{
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.75s; *//*easeOutQuint*/
}
.block a:hover{
    filter: saturate(2) brightness(0.95);
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 1s; *//*easeOutQuint*/
}

.block>img:last-child{
    width: 20px;
    position: absolute;
    top: 36vw;
    left: 2px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .block>img:last-child{
        top: inherit;
        bottom: 0;
    }
}

.folddown,
.foldup {
    font-size: 15rem;
    line-height: 15rem;
    color: #54afad;
}
.foldup{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .folddown,
    .foldup {
        display: none;
    }
}

.folddown img,
.foldup img{
    width: 16px;
    height: 12px;
    margin: 16px 4px 26px 0;
    vertical-align: -27px;
}



/*/// 設備・仕様 ///*/
/* 共通 */
#equipment .equip_nav{
    margin: 22px -13px 35px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip_nav{
    margin: 40px -50px 40px;
    padding: 0 50px 0;
    flex-wrap: nowrap;
}
}

#equipment .equip_nav a{
    width: 25%;
    height: 50px;
    margin: 0 0 5px 0;
    font-size: 12rem;
    line-height: 12rem;
    letter-spacing: -1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e5e5e5;
    box-sizing: border-box;
    background-image: url(../img/common_img/hr_select.png);
    background-size: 1px 40px;
    background-position: right center;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip_nav a{
    height: 60px;
    padding: 15px 6px 17px 5px;
    font-size: 13rem;
    letter-spacing: 0;
    white-space: nowrap;
    background-size: 1px 50px;
    flex-wrap: wrap;
    position: relative;
    transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.75s; *//*easeOutQuint*/
    }
    #equipment .equip_nav a:nth-child(8){
        background-image: none !important;
    }
    #equipment .equip_nav a:hover{
        color: inherit;
        background-color: #dcdcdc;
        transition: all cubic-bezier(0.23, 1, 0.32, 1) 1s; *//*easeOutQuint*/
    }
}

#equipment .equip_nav a:nth-child(1),
#equipment .equip_nav a:nth-child(5){
    border-radius: 3px 0 0 3px;
}
#equipment .equip_nav a:nth-child(4),
#equipment .equip_nav a:nth-child(8){
    border-radius: 0 3px 3px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #equipment .equip_nav a:nth-child(4),
    #equipment .equip_nav a:nth-child(5){
        border-radius: 0;
    }
}

#equipment .equip_nav a:nth-child(1),
#equipment .equip_nav a:nth-child(5){
    border-left:none;
}
#equipment .equip_nav a:nth-child(5),
#equipment .equip_nav a:nth-child(6),
#equipment .equip_nav a:nth-child(7),
#equipment .equip_nav a:nth-child(8){
    border-bottom:none;
}
#equipment .equip_nav a:nth-child(7),
#equipment .equip_nav a:nth-child(8){
    padding: 15px 0 17px 10rem;
    letter-spacing: 10rem;
}

#equipment .equip_nav small{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip_nav small{
    width: 100%;
    display: block;
    margin: 0 0 2px 0;
    font-size: 10rem;
    letter-spacing: 1rem;
    color: #bfbfbf;
    transform: scale(0.77);
}
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip_nav a:nth-child(7) small,
#equipment .equip_nav a:nth-child(8) small{
    margin: 0 0 2px -11rem;
}
}

#equipment.kitchen .equip_nav a:nth-child(1),
#equipment.bath .equip_nav a:nth-child(2),
#equipment.powder .equip_nav a:nth-child(3),
#equipment.toilet .equip_nav a:nth-child(4),
#equipment.eco .equip_nav a:nth-child(5),
#equipment.security .equip_nav a:nth-child(6),
#equipment.equipments .equip_nav a:nth-child(7),
#equipment.structure .equip_nav a:nth-child(8){
    margin: 0 0 0 -1px;
    color: #ffffff;
    background-color: #54aeac;
    background-image: url(../img/common_img/ic_select.png);
    background-size: 10px 5px;
    background-position: center 40px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #equipment.kitchen .equip_nav a:nth-child(1),
    #equipment.bath .equip_nav a:nth-child(2),
    #equipment.powder .equip_nav a:nth-child(3),
    #equipment.toilet .equip_nav a:nth-child(4),
    #equipment.eco .equip_nav a:nth-child(5),
    #equipment.security .equip_nav a:nth-child(6),
    #equipment.equipments .equip_nav a:nth-child(7),
    #equipment.structure .equip_nav a:nth-child(8){
        background-image: none;
    }
    #equipment.kitchen .equip_nav a:nth-child(1) small,
    #equipment.bath .equip_nav a:nth-child(2) small,
    #equipment.powder .equip_nav a:nth-child(3) small,
    #equipment.toilet .equip_nav a:nth-child(4) small,
    #equipment.eco .equip_nav a:nth-child(5) small,
    #equipment.security .equip_nav a:nth-child(6) small,
    #equipment.equipments .equip_nav a:nth-child(7) small,
    #equipment.structure .equip_nav a:nth-child(8) small{
        color: #bbdfde;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #equipment.kitchen .equip_nav a:nth-child(1)::after,
    #equipment.bath .equip_nav a:nth-child(2)::after,
    #equipment.powder .equip_nav a:nth-child(3)::after,
    #equipment.toilet .equip_nav a:nth-child(4)::after,
    #equipment.eco .equip_nav a:nth-child(5)::after,
    #equipment.security .equip_nav a:nth-child(6)::after,
    #equipment.equipments .equip_nav a:nth-child(7)::after,
    #equipment.structure .equip_nav a:nth-child(8)::after{
        content: url(../img/common_img/ic_select_pc.png);
        position: absolute;
        bottom: -24px;
        left: 0;
        right: 0;
        transform: scale(0.5,0.5);
    }
    }


@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .top,
.bath .top,
.powder .top,
.toilet .top{
    position: relative;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .top>figure{
    width: 628px;
}
.bath .top>figure{
    width: 660px;
}
.powder .top>figure{
    width: 504px;
}
.toilet .top>figure{
    width: 504px;
}
}

.kitchen .top figure.main img,
.bath .top figure.main img,
.powder .top figure.main img,
.toilet .top figure.main img{
    width: calc(100% + 46px);
    height: auto;
    margin: 0 -23px 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .top figure.main img,
.powder .top figure.main img,
.toilet .top figure.main img{
    width: 100%;
    height: auto;
    margin: 0;
}
.kitchen .top figure.main img:nth-child(1){
    width: 628px;
    height: 417px;
    object-fit: cover;
}
}

.kitchen .top figure.main img:nth-child(2){
    width: 100%;
    margin: 20px 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .top figure.main img:nth-child(2){
        width: 570px;
        margin: 50px auto 0;
        display: block;
    }
}

#equipment main h3{
    margin: 0 -13px;
    padding: 0 0 8px 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 39rem;
    line-height: 39rem;
    letter-spacing: 3rem;
    font-weight: normal;
    text-align: center;
    color: #54aeac;
    border-bottom: solid 2px #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment main h3{
    margin: 0;
    font-size: 50rem;
    line-height: 50rem;
    letter-spacing: 5rem;
    text-align: left;
    border: none;
}
}

#equipment.eco main h3{
    margin: 50px 10px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment.eco main h3{
    margin: 0;
}
}

#equipment main h4.top{
    margin: 5px 0 22px 0;
    font-family: "NewCezannePro-M";
    font-weight: normal;
    font-size: 16rem;
    line-height: 24rem;
    letter-spacing: 1rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment main h4.top{
    margin: 0 0 40px 0;
    font-size: 20rem;
    text-align: left;
}
}

#equipment .note{
    margin: 4px 0 0 0;
    padding-left:10rem;
	text-indent:-10rem;
    font-size: 10rem;
    line-height: 14rem;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
    display: block;
}

#equipment .note2{
    margin: 4px 0 0 0;
    font-size: 10rem;
    line-height: 14rem;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
    display: block;
}

#equipment .free{
    width: 100px !important;
    height: 24px;
}

#equipment .free_rt{
    width: 95px !important;
    height: 24px !important;
    position: absolute;
    top: 0;
    right: 0;
}

#equipment .ph{
    position: relative;
}

@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: solid 1px #b3b3b3;
}
#equipment .equip_tp{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: solid 1px #b3b3b3;
    border-bottom: solid 1px #b3b3b3;
    clear: both;
}
#equipment .equip_bt{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
}

#equipment .equip dl,
#equipment .equip_tp dl,
#equipment .equip_bt dl{
    margin: 40px 0;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #b3b3b3;
}
#equipment.structure .equip dl,
#equipment.structure .equip_tp dl,
#equipment.structure .equip_bt dl{
    border-top: solid 1px #b3b3b3;
    border-bottom: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment .equip dl{
    width: 231px;
    margin: 35px 0 35px;
    padding: 0;
    border-bottom: none;
}
#equipment .equip_tp dl{
    width: 231px;
    margin: 35px 0 35px;
    padding: 0;
    border-bottom: none;
}
#equipment .equip_bt dl{
    width: 231px;
    margin: 35px 0 35px;
    padding: 0;
    border-bottom: none;
}
#equipment.kitchen .equip dl,
#equipment.kitchen .equip_tp dl,
#equipment.kitchen .equip_bt dl{
    margin: 30px 0 30px;
}
#equipment.structure .equip dl,
#equipment.structure .equip_tp dl,
#equipment.structure .equip_bt dl{
    border-top: none;
}
}

#equipment .equip dt,
#equipment .equip_tp dt,
#equipment .equip_bt dt{
    margin: 12px 0 6px 0;
    font-size: 16rem;
    line-height: 19rem;
    letter-spacing: -1rem;
    color: #1c354d;
}
#equipment.structure .equip dt,
#equipment.structure .equip_tp dt,
#equipment.structure .equip_bt dt{
    margin: 26px 0 6px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment.structure .equip dt,
#equipment.structure .equip_tp dt,
#equipment.structure .equip_bt dt{
    margin: 0px 0 6px 0;
}
}

#equipment .equip dd,
#equipment .equip_tp dd,
#equipment .equip_bt dd{
    line-height: 23rem;
    letter-spacing: 0.5rem;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
}

#equipment .equip .ph img,
#equipment .equip_tp .ph img,
#equipment .equip_bt .ph img{
    width: 100%;
}

#equipment h5.line,
#equipment h6.line{
    margin: 10px -13px -20px;
    padding: 0 13px 6px;
    font-weight: normal;
    font-size: 16rem;
    line-height: 18rem;
    background-color: #ffffff;
}

#equipment h6.line{
    color: #54afad;
    background-color: #e6e6e6;
}
#equipment.eco h6.line{
    margin: 13px 0 10px;
    padding: 0 0 5px 10px;
    font-family: "NewCezannePro-M";
    font-weight: normal;
    color: #333333;
    background-color: rgba( 255, 255, 255, 0.70 );
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment h5.line,
#equipment h6.line{
    margin: 10px 0 15px;
    padding: 7px 0 6px 0;
    font-size: 17rem;
    line-height: 17rem;
    text-align: left;
    background-color: rgba( 255, 255, 255, 0.50 );
    outline: solid 1px #d2d7da;
    outline-offset: -1px;
    overflow: hidden;
}
#equipment.eco h6.line{
    padding: 9px 0 9px 0;
    font-size: 16rem;
    list-style: 16rem;
    outline: solid 1px #54afad;
    background-color: #ffffff;
    overflow: hidden;
}
#equipment.win h5.line,
#equipment.win h6.line{
    padding: 9px 0 7px 0;
}
}

#equipment h5.line strong,
#equipment h6.line strong{
    margin: 0 -13px 5px;
    padding: 0 0 0 13px;
    display: block;
    color: #ffffff;
}
#equipment h5.line strong{
    font-family: "AvenirNextLTPro-Regular";
    font-weight: normal;
    font-size: 11rem;
    background-color: #54afad;
}
#equipment h6.line strong{
    font-size: 14rem;
    background-color: #54afad;
}
#equipment.eco h6.line strong{
    margin: 0 0 3px -10px;
    padding: 0 0 0 10px;
    font-family: "NewCezannePro-M";
    font-weight: normal;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
#equipment h5.line strong,
#equipment h6.line strong{
    margin: 0 12px 0 0;
    display: inline;
    color: #ffffff;
    text-align: left;
    background-color: #54afad;
    border-bottom: none;
}
#equipment h5.line strong{
    padding: 10px 15px 10px 15px;
    font-size: 10rem;
    line-height: 12rem;
    vertical-align: 3px;
}
#equipment h6.line strong{
    padding: 8px 15px 8px 15px;
    font-size: 17rem;
}
#equipment.eco h6.line strong{
    margin: 0 15px 0 0;
    padding: 9px 15px 10px 15px;
}
#equipment.win h5.line strong{
    padding: 12px 15px 10px 15px; 
}
}

#equipment .top figure.main{
    position: relative;
}

#equipment .top figure.main figcaption{
    position: absolute;
    bottom: 40px;
    left: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #equipment .top figure.main figcaption{
        left: 15px;
        bottom: 15px;
    }
}
#equipment.kitchen .top figure.main figcaption {
    position: relative;
    margin: 20px 0;
    bottom: 10px;
    left: 5px;
}

@media print, screen and (min-width: 768px) {/*PC*/
#equipment .top figure.main figcaption ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
}
#equipment .top figure.main figcaption li {
    margin: -3px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #equipment .top figure.main figcaption li {
        margin: 0 3px;
    }
    }

#equipment .top figure.main figcaption .op {
    margin: 0;
    padding: 2px 8px;
    font-family: "NewCezannePro-M";
    font-size: 12rem;
    line-height: 12rem;
    letter-spacing: 0rem;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.4);
    border: solid 1px rgba(255, 255, 255, 0.5);
}

#equipment .top figure.main figcaption .note{
    margin: 1px 0 0 0;
}
#equipment.powder .top figure.main figcaption .note{
    color: #ffffff;
}

#equipment a.readmore{
    width: 115px;
    height: auto;
    margin: 7px 0 0 0;
    transition: all 300ms 0s ease-in-out;
}

#equipment .readmore img{
    width: 100%;
    height: 100%;
}

#equipment a.readmore:hover{
    opacity: 0.7;
    transition: all 150ms 0s ease-in-out;
}

a.readmore{
    width: 118px;
    height: 16px;
    display: block;
}

.readmore img{
    width: 100%;
    height: 100%;
}

.underline{
    text-decoration: underline #a63141;
}

/* キッチン */
.kitchen .space{
    margin: 0 0 60px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .space{
    position: absolute;
    top: 0;
    right: 0;
    width: 380px;
    margin: 0;
}
}

.kitchen .space h5,
.kitchen .cock h5{
    margin: 0 0 14px 0;
    padding: 8px 0 8px;
    font-size: 15rem;
    line-height: 15rem;
    color: #ffffff;
    text-align: center;
    background-color: #00657f;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .space h5,
    .kitchen .cock h5{
        margin: 0 0 8px 0;
        padding: 5px 0 5px;
        font-size: 15rem;
        line-height: 15rem;
    }
    .win.kitchen .space h5,
    .win.kitchen .cock h5{
        margin: 0 0 8px 0;
        padding: 7px 0 3px;
        font-size: 15rem;
        line-height: 15rem;
    }
}

.kitchen .space figure{
    position: relative;
}

.kitchen .space figure>img{
    width: 100%;
    height: 39vw;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .space figure>img{
        height: 154px
    }
    .kitchen .space figure.sub>img{
        width: 280px;
        height: 120px;
        margin: auto;
        display: block;
    }
}

.kitchen .space figcaption,
.kitchen .cock figcaption{
    width: 74px;
    position: absolute;
    top: 4px;
    right: 4px;
}

.kitchen .space p{
    padding: 15px 0 15px;
    line-height: 23rem;
    
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .space p{
    padding: 6px 0 12px;
    letter-spacing: 0;
}
}

.kitchen .cock{
    margin: 20px 0 40px 0;
    padding: 0 0 40px;
    position: relative;
    border-bottom: solid 1px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .cock{
    position: absolute;
    top: 450px;
    right: 0;
    width: 380px;
    border: none;
}
}

.kitchen .cock figure{
    width: 50%;
    margin: 0 0 12px 0;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .cock figure{
    width: 198px;
    margin: 0 0 10px 0;
}
}

.kitchen .cock img{
    width: 100%;
    height: auto;
}

.kitchen .cock p{
    width: 50%;
    display: block;
    font-family: "NewCezannePro-M";
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .cock p{
    width: 198px;
}
}

.kitchen .cock ul{
    width: 48%;
    position: absolute;
    top: 42px;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .cock ul{
    width: 170px;
    top: 34px;
}
}

.kitchen .cock li{
    margin: 0 0 10px 0;
}


.kitchen .raku{
    margin: 40px 0 40px 0;
    padding: 0 0 10px 0;
    border-bottom: double 4px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku{
    margin: 70px 0 40px 0;
    padding: 0 0 10px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: solid 1px #b3b3b3;
}
}

.kitchen .raku h5{
    margin: 0 -23px 20px;
    padding: 2px 20px 6px;
    background-color: #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku h5{
    width:calc(100% - 25px);
    margin: 0 auto 20px;
    padding: 2px 0 8px 25px;
}
}

.kitchen .raku h5 img{
    width: 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku h5 img{
    width: 310px;
}
}

.kitchen .raku h6{
    padding: 6px 0 6px 12px;
    font-size: 17rem;
    line-height: 18rem;
    color: #ffffff;
    background-color: #54aeac;
    margin: 12px 0 18px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku h6{
    margin: 0px 0 24px 0;
}
.win.kitchen .raku h6{
    padding: 8px 0 4px 12px;
}
}

.kitchen .raku h6 img{
    width: 53px;
    margin: -14px 0 -10px 3px;
    vertical-align:-2px;
}

.kitchen .raku div{
    margin: 0 0 30px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku div{
    width: 304px;
    margin: 0 0 0 0;
}
}

.kitchen .raku div.raku01{
    margin: -10px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku div.raku01{
    width: 560px;
    margin: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku>figure{
    width: 450px;
    margin: 0;
}
}

.kitchen .raku figure img{
    width: 100%;
    margin: 0 0 20px 0;
}

.kitchen .raku figure.top img{
    height: 65vw;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .raku figure.top img{
        height: 260px;
        margin: 0 0 40px 0;
    }
}

.kitchen .raku dl{
    margin: 0 0 18px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku dl{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
}

.kitchen .raku dt{
    margin: 0 0 6px 0;
    font-size: 16rem;
    line-height: 19rem;
    color: #54aeac;
}

.kitchen .raku dd{
    line-height: 23rem;
    letter-spacing: 0rem;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku dd{
    margin: 0 0 25px 0;
}
}

.kitchen .raku dl.box01{
    margin: -5px 0 0 0;
}

.kitchen .raku dl.box01,
.kitchen .raku dl.box02,
.kitchen .raku dl.box03{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

.kitchen .raku dl.box01 dt,
.kitchen .raku dl.box02 dt{
    width: 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku dl.box01 dt{
    width: auto;
    position: absolute;
    left: 140px;
    letter-spacing: 0;
}
}

.kitchen .raku dl.box01 img{
    width: 140px;
    margin: 5px 0 25px 0;
}
.kitchen .raku dl.box01:nth-child(2) img{
    /* height: 120px */
    height: auto;
}
.kitchen .raku dl.box01:nth-child(3) img{
    height: 86px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku dl.box01 img{
    width: 125px;
    margin: 0;
}
}

.kitchen .raku dl.box01 .txt{
    width: calc(100% - 158px);
    margin: 0 0 20px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .raku dl.box01 .txt{
    width: calc(100% - 140px);
    margin: 24px 0 0 0;
}
}

.kitchen .raku dl.box02 img{
    width: 160px;
	height: 99px;
    margin: 5px 0 10px 0;
}

.kitchen .raku dl.box02 .txt{
    width: calc(100% - 180px);
}

.kitchen .raku dl.box03 img{
    width: 160px;
	height: auto;
    margin: 5px 0 10px 0;
}

.kitchen .raku dl.box03 .txt{
    width: calc(100% - 170px);
}

.kitchen .equip dt{
    margin: 12px 0 10px 0 !important;
}

.kitchen .equip .ph{
    margin: 0 0 10px 0 !important;
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .gas{
    width: 504px !important;
    margin: 0 0 35px 0 !important;
    position: relative;
}
}

.kitchen .gas .ph{
    position: relative;
    margin: 0 0 10px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .gas .ph{
    width: 250px;
    margin: 0 0 20px 0;
}
}

.kitchen .gas .ph .func{
    margin: 5px 0 0 0;
    display: flex;
    
    justify-content: space-between;
    align-items: flex-start;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .gas .ph .func{
        margin: 8px 0 0 0;
    }
}

.kitchen .gas .ph .func li{
    width: 49%;
    margin: 8px 0 0;
    font-size: 12rem;
    color: #ffffff;
    text-align: center;
    background-color: #00657f;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .gas .ph .func li{
        width: 123px;
        margin: 0;
        padding: 2px 0;
        letter-spacing: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .gas dt{
    width: 100%;
    margin: 0 0 10px 0!important;
    white-space: nowrap;
}
}

.kitchen .gas dt small{
    font-size: 14rem;
}

.kitchen .gas .sub{
    margin: 10px 0 0 0;
    padding: 35px 0 0 0;
    display: flex;
    justify-content: space-between;
    background-image: url(../img/equipment_img/ic_tri_bt.png);
    background-size: 44px 22px;
    background-position: center top;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .gas .sub{
    width: 170px;
    margin: 0 42px 0 0;
    padding: 0 0 0 38px;
    display: block;
    position: absolute;
    top: 30px;
    right: 0;
    background-image: url(../img/equipment_img/ic_tri_rt.png);
    background-size: 22px 44px;
    background-position: 8px 53px;
}
}
.kitchen .gas .sub li{
    font-size: 13rem;
    line-height: 18rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .gas .sub li{
        font-size: 12rem;
        line-height: 16rem;
    }
}
.kitchen .gas .sub li.ic{
    margin: 0 0 10px 0;
    height: 24px;
    line-height: 0;
    text-align: center;
    background-color: #f7b52c;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .gas .sub li.ic{
        margin: 0 0 5px 0;
    }
}

.kitchen .gas .sub li img{
    margin: 0 0 5px 0;
}

.kitchen .gas .sub img{
    width: 177px;
    margin: 0 15px 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .gas .sub img{
    width: 170px;
    margin: 0 0 5px 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .gas .sub .note2{
        margin: 0 !important;
        white-space: nowrap;
    }
    }

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .fan{
    width: 504px !important;
    margin: 0 0 35px 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .fan dt{
    margin: 0 0 10px 0 !important;
}
}

.kitchen .fan .ph{
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .fan .ph{
    width: 231px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .fan .ph img{
        width: 100%;
        height: auto;
    }
    }

.kitchen .fan .sel{
    margin: 10px 0 0 0;
    padding: 35px 0 0 0;
    background-image: url(../img/equipment_img/ic_tri_bt.png);
    background-size: 44px 22px;
    background-position: center top;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .fan .sel{
        margin: 0;
        padding: 0 0 0 40px;
        background-image: url(../img/equipment_img/ic_tri_rt.png);
        background-size: 22px 44px;
        background-position: 9px 55px;
    }
}

.kitchen .fan p{
    padding: 9px 0 0 0;
}

.kitchen .fan .free{
    position: absolute !important;
    top: 35px;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .fan .free{
        top: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .counter{
    width: 504px !important;
    min-height: 215px;
    position: relative;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.kitchen .counter .ph{
    margin: -35px 0 2px 0 !important;
}
}

.kitchen .counter dt{
    margin: 0 0 -10px 0 !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .counter dt{
        margin: 12px 0 0 0 !important;
    }
}

.kitchen .wash{
    position: relative;
}

.kitchen .wash .ph{
    margin: 0 0 15px 0;
}

.kitchen .wash ul{
    margin: 0 0 12px 0;
}

.kitchen .wash li{
    margin: 6px 0;
    padding: 1px 0;
    color: #ffffff;
    letter-spacing: 0;
    text-align: center;
    background-color: #f7b52c;
    border-radius: 2px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .wash li{
        font-size: 11rem;
        letter-spacing: 0rem;
        white-space: nowrap;
    }
}


.kitchen .sink{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: none !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink{
        width: 100% !important;
        min-height: 380px;
        position: relative;
        display: block;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dt{
        width: 100%;
    }
}

.kitchen .sink dt.sub{
    margin: 2px 0 8px 0!important;
    font-size: 14rem !important;
    line-height: 16rem !important;
    letter-spacing: 0.5rem !important;
}

.kitchen .sink dd.ph img{
    width: 85% !important;
    height: auto;
    margin: 20px auto 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.ph{
        width: 240px;
        margin: 0;
        position: absolute !important;
        top: 70px;
        left: 233px;
    }
    .kitchen .sink dd.ph img{
        width: 100% !important;
        margin: 0;
    }
    .kitchen .sink dd.img_br::after{
        position: absolute !important;
        bottom:2px;
        right: -27px;

    }
}

.kitchen .sink dd.ph2{
    width: 48vw;
    margin: 25px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.ph2{
        width: 220px;
        margin: 0;
        position: absolute;
        top: 70px;
    }
}

.kitchen .sink dd.ph3{
    position: relative;
    margin: 0 0 9px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.ph3{
        width: 318px;
        position: absolute;
        top: 188px;
        right: 0;
    }
}

.kitchen .sink dd.ph2 img,
.kitchen .sink dd.ph3 img,
.kitchen .sink .pop{
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink .txt{
        width: 700px !important;
        position: absolute;
        top: 320px;
    }
}

.kitchen .sink dd.ph img.ic{
    width: 60px !important;
    height: 60px;
    position: absolute;
    top: -15px;
    right: 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.ph img.ic{
        top: -3px;
        right: -25px;
    }
}

.kitchen .sink dd.ph3 img.ic{
    width: 60px !important;
    height: 60px;
    position: absolute;
    top: -15px;
    right: -10px;
}

.kitchen .sink dd.txt{
    width: calc(100% - 48vw - 15px);
    margin: 25px 0 0 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.txt2{
        width: 318px;
        position: absolute;
        top: 100px;
        right: 0;
    }
}

.kitchen .sink dd.box{
    margin: 30px 0 35px 0;
    padding: 15px 10px 15px 7px;
    background-color: #ffffff;
    border: solid 1px #bababa;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.box{
        width: 430px;
        height: 124px;
        padding: 8px 17px;
        margin: 0;
        position: absolute;
        top: 192px;
        left: 233px;
    }
}

.kitchen .sink dd.box strong{
    font-size: 15rem;
    letter-spacing: 0;
    display: block;
}

.kitchen .sink dd.box strong small{
    font-size: 11rem;
    vertical-align: 5rem;
}

.kitchen .sink dd.box p{
    line-height: 20rem;
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.box p{
        width: 230px !important;
        line-height: 21rem;
    }
}

.kitchen .sink dd.box>img{
    width: 200px;
    margin: 15px 5px 0 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.box>img{
        width: 186px;
        height: 124px;
        margin: 0;
        position: absolute;
        top: 8px;
        right: 15px;
    }
}

.kitchen .sink dd.box .pop{
    width: 33px;
    height: 30px;
    margin: 0;
    display: block;
    position: absolute;
    top: -30px;
    right: 30vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .kitchen .sink dd.box .pop{
        right: 170px
    }
}

/* バスルーム */
@media print, screen and (min-width: 768px) {/*PC*/
.bath{
    position: relative;
}
}

.bath .bubble{
    margin: 40px 0 0 0;
    border-bottom: double 4px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble{
    margin: 55px 0 0 0;
    border-bottom: none;
}
}

.bath .bubble h5{
    margin: 0 -23px;
    padding: 5px 0 5px 12px;
    font-size: 17rem;
    line-height: 18rem;
    color: #ffffff;
    text-align: center;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble h5{
    margin: 0;
    padding: 9px 0 9px 20px;
    text-align: left;
}
.win.bath .bubble h5{
    padding: 11px 0 7px 20px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble div{
    margin: 18px 0 40px;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.bath .bubble div.point{
    align-items: flex-start;
    justify-content: space-between;
}
}

.bath .bubble figure>img{
    margin: 18px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble figure img{
    width: 364px;
    margin: 0 26px 5px 0;
}
}

.bath .bubble figcaption{
    margin: 12px 0 8px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble figcaption{
    margin: 0;
    position: absolute;
    top: 105px;
    left: 392px;
}
}

.bath .bubble figcaption img{
    width: 140px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble figcaption img{
    width: 150px;
}
}

.bath .bubble figure.sub{
    width: 90%;
    margin: 10px auto 40px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble figure.sub{
    width: 320px;
    max-width: inherit;
    margin: 0;
}
.bath .bubble figure.sub img{
    width: 100%;
}
}

.bath .bubble p,
.bath .bubble dd{
    line-height: 23rem;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble p{
    width: 295px;
    margin: 0 44px 0 0;
}
}

.bath .bubble dl{
    margin: 0 0 40px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bubble dl{
    width: 320px;
    margin: 0;
}
}

.bath .bubble  dt{
    height: 32px;
    font-size: 15rem;
    line-height: 15rem;
    color: #ffffff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
   .win.bath .bubble  dt{
       height: 28px;
       padding: 4px 0 0 0;
    }
}

.bath .bubble .ph img{
    width: 100%;
    margin: 14px 0 14px 0;
    display: block;
}
.bath .bubble .point3 .ph img{
    margin: 14px 0 34px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .bubble .point1 .ph img{
        width: 294px;
        margin: 14px 0 20px 26px;
    }
    .bath .bubble .point2 .ph img{
        width: 294px;
        margin: 8px 16px 18px 10px;
    }
    .bath .bubble .point3 .ph img{
        width: 276px;
        margin: 8px 25px 40px 19px;
    }
}

.bath .bubble dd.sub img{
    width: 55%;
    margin: -22px 15px 5px 0;
    float: left;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .bubble dd.sub img{
        width: 170px;
    }
}

.bath .bubble .note{
    margin: -25px 0 35px !important;
    text-align: right;
    display: block;
}

.bath .dry,
.bath .hotwater{
    margin: 40px 0 0 0;
    padding: 0 0 20px 0;
}
.bath .dry{
    margin: 60px 0 70px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}

.bath .dry h5,
.bath .hotwater h5{
    margin: 0 -23px;
    padding: 6px 15px 6px;
    font-size: 16rem;
    line-height: 18rem;
    color: #ffffff;
    background-color: #00657f;
    text-align: center;
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry h5,
.bath .hotwater h5{
    width: calc(100% - 25px);
    margin: 0;
    padding: 9px 0 9px 25px;
    font-size: 18rem;
    text-align: left;
}
.win.bath .dry h5,
.win.bath .hotwater h5{
    padding: 11px 0 7px 25px;
}

}

@media print, screen and (min-width: 768px) {/*PC*/
    .bath .thermo{
        width: 350px !important;
        margin: 0 !important;
        position: absolute;
        top: 410px;
        right: 0;
    }
    }

.bath .thermo dt{
    margin: 0 0 10px 0!important;
    padding: 6px 15px 6px;
    letter-spacing: 0.5rem;
    color: #ffffff !important;
    background-color: #00657f;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .win.bath .thermo dt{
        padding: 8px 15px 4px;
    }
}

.bath .thermo .ph{
    margin: 15px 0 0 0;
    border: solid 1px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .thermo .ph{
        margin: 0;
        padding: 8px 0;
        background-color: #ffffff;
    }
}

.bath .thermo .readmore{
    margin: 5px 15px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .thermo dd a{
        margin: 12px 0 0 0 !important;
    }
}

.bath .dry img{
    width: 100%;
}

.bath .dry div{
    width: 100%;
    margin: 15px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry div{
    width: 320px;
    align-content: flex-start;
}
.bath .dry div:nth-child(2){
    margin: 25px 0 0 0;
}
.bath .dry div:nth-child(4){
    margin: 25px 0 0 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater div{
    width: 504px;
    margin: 25px 0 0 0;
}
}

.bath .dry .topic{
    width: calc(100% - 50px);
    margin: 20px 0 25px;
    padding: 15px 25px 25px;
    background-color: #00657f;
    color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry div.topic{
    width: 294px;
    margin: 25px auto 0;
    padding: 15px 25px 0;
}
}

.bath .dry p{
    padding: 13px 0 0;
    line-height: 23rem;
}

.bath .dry p{
    width: calc(100% - 150px);
    padding: 16px 0 0 0;
}
.bath .dry .topic p{
    width: calc(100% - 150px);
    padding: 12px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry p{
    width: calc(100% - 130px);
    padding: 12px 0 0 0;
}
.bath .dry .topic p{
    width: calc(100% - 133px);
    padding: 16px 0 0 0;
}
}

.bath .dry .note2,
.bath .dry figcaption{
    color: #ffffff !important;
}

.bath .dry figure.sub{
    width: 130px;
    margin: 19px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry figure.sub{
    width: 116px;
    margin: 17px 0 0 0;
}
.bath .dry .topic figure.sub{
    width: 116px;
    margin: 20px 0 0 0;
}
}

.bath .dry h6{
    margin: auto;
    font-size: 20rem;
    line-height: 24rem;
    text-align: center;
}
.bath .dry h6 img{
    margin: 10px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry h6{
    line-height: 24rem;
}
.bath .dry h6 img{
    margin: 10px 0 10px 0;
}
}

.bath .dry .topic span.point{
    width: 100%;
    margin: 12px 0 0 0;
    padding: 4px 0 4px;
    font-size: 20rem;
    text-align: center;
    background-color: #f7b52c;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .win.bath .dry .topic span.point{
    padding: 8px 0 2px;
    }
}

.bath .dry .topic span.point b{
    font-size: 40rem;
    line-height: 40rem;
    vertical-align: -1px;
}

.bath .dry figcaption{
    margin: 4px 0 0 0;
    font-size: 10rem;
    line-height: 12rem;
    text-align: center;
}

.bath .dry .fig{
    margin: 0 0 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry .fig{
    margin: 0 0 15px 0;
}
}

.bath .dry dl{
    margin: 2px 0;
    display: flex;
    align-items: flex-start;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .dry dl{
    margin: 2px 0 0 0;
}
}

.bath .hotwater{
    position: relative;
}

.bath .hotwater .readmore{
    position: absolute;
    top: 65px;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater .readmore{
    top: 2px;
    left: 450px;
    right: inherit;
}
}

.bath .hotwater dl{
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater dl{
}
.bath .hotwater dl.top{
    width: 100%;
    margin: 23px 0x 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
}

.bath .dry dt{
    width: 130px;
    margin: 6px 4px 0 0;
    padding: 4px 6px 4px;
    white-space: nowrap;
    background-color: #f7b52c;
    font-family: "NewCezannePro-M", sans-serif;
    font-size: 14rem;
    line-height: 14rem;
    color: #ffffff;
    text-align: center;
}

.bath .hotwater dt{
width: 100%;
    margin: 14px 0 12px;
    font-size: 16rem;
    line-height: 18rem;
    letter-spacing: -1rem;
}

.bath .dry dd{
    width: calc(100% - 130px);
    padding: 6px 0 0 0;
    font-family: "NewCezannePro-M";
    font-size: 10rem;
    line-height: 11rem;
}

.bath .hotwater dd{
    font-family: "NewCezannePro-M", sans-serif;
    line-height: 23rem;
}

.bath .hotwater dd.ph img{
    width: 85%;
    margin: 25px auto 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater dd.ph img{
    width: 320px;
    margin: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater .txt{
    width: 200px;
    float: left;
}
}

.bath .hotwater dd.fig img{
    width: 100%;
    margin: 20px auto 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater dd.fig{
        width: 242px;overflow: hidden;float: right;
}
.bath .hotwater dd.fig img{
    margin: 0;
}
.bath .hotwater dl.top dd.fig{
    width: 596px;
}
.bath .hotwater dl.top dd.fig img{
    width: 100%;
    margin: 20px 0 0 0;
}
}

.bath .hotwater dd.ic{
    margin: 15px 0 10px;
    /*text-align: right;*/
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater dd.ic{
    position: absolute;
    top: 0;
    right: 0;
}
}

.bath .hotwater dd.ic img{
    width: 105px;
    height: auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater dd.ic img{
    width: 135px;
}
}

.bath .hotwater h6{
    margin: 30px 0 10px 0;
    padding: 4px 10px 4px;
    background-color: #00657f;
    font-size: 16rem;
    line-height: 16rem;
    color: #ffffff;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater h6{
    margin: 0 0 10px 0;
}
.win.bath .hotwater h6{
    padding: 5px 10px 2px;
}
}

.bath .hotwater h6 img{
    position: absolute;
    top: 28px;
    right: 10px;
    width: 60px;
    height: 54px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .hotwater h6 img{
        position: absolute;
        top: -21px;
        right: 10px;
        width: 71px;
        height: 65px;
    }
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater ul{
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
    margin: 12px 0 0 0;
}
}

.bath .hotwater li{
    margin: 0 0 5px 0;
    background-color: #f7b52c;
    color: #ffffff;
    text-align: center;
    border-radius: 3px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .hotwater li{
    width: 48.5%;
    margin: 0 0 10px 0;
}
}

.bath .bathtab{
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.bath .bathtab{
    width: 350px !important;
    margin: 0 !important;
    position: absolute;
    top: 0;
    right: 0;
}
}

.bath .bathtab .ph{
    border: solid 1px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .bathtab .ph{
        padding: 8px 0;
        background-color: #ffffff;
    }
}

.bath .bathtab .free{
    position: absolute;
    right: 0;
    top: 0;
}

.bath .drain .ph{
    border: solid 1px #b3b3b3;
    }


.bath .drain .ph img{
}
@media print, screen and (min-width: 768px) {/*PC*/
    .bath .drain .ph img{
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.bath .drain dt{
    clear: both;
}
}

.bath .kireidoor{
    border-bottom: none !important;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .bath .kireidoor{
        padding: 0 273px 0 0 !important;
    }
}

/*パウダールーム*/
@media print, screen and (min-width: 768px) {/*PC*/
    .powder div.top{
        padding: 0 0 35px 0;
        border-bottom: solid 1px #b3b3b3;
    }
}

.powder figure.main img{
    height: 133.333vw !important;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder figure.main img{
        height: auto !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .powder .pocket{
        position: absolute;
        bottom: -340px;
    }
}
.powder .pocket dt{
    margin: 0 0 10px 0 !important;
    padding: 6px 15px;
    color: #ffffff !important;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .pocket dt{
        margin: 0 0 6px 0 !important;
        padding: 6px 12px;
    }
    .win.powder .pocket dt{
        padding: 8px 12px 4px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .powder .equip{
        padding: 0 0 0 273px;
    }
}

.powder .cock{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .cock{
        position: absolute;
        top: 335px;
        left: 546px;
    }
}

.powder .cock .txt{
    width: calc(100% - 150px);
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .cock .txt{
        width: 100%;
    }
    .powder .cock .txt span{
        width: 85px;
        padding: 5px 0 0 0;
    }
}

.powder .cock .fig{
    width: 140px;
    margin: -20px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .cock .fig{
        margin: -80px 0 0 100px;
    }
}

.powder .cock .fig img{
    width: 100%;
}

.powder .mirror{
    overflow: hidden;
}
@media print, screen and (min-width: 768px) {/*PC*/
.powder .mirror{
    width: 504px !important;
    margin: 0 !important;
    padding: 0 0 30px 0 !important;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: solid 1px #c9d6dd !important;
}
}

.powder .mirror .ph{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 10rem;
    line-height: 14rem !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
.powder .mirror .ph{
    width: 360px;
    float: left;
}
}

.powder .mirror .ph_sub ul{
    margin: 10px 0 22px 0;
    font-size: 11rem;
    line-height: 15rem !important;
    display: flex;
    justify-content: space-between;
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .mirror .ph_sub{
    width: 128px;
    float: right;
}
.powder .mirror .ph_sub ul{
    margin: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
}

.powder .mirror .ph_sub li{
    width: 45%;
    margin: 0 0 5px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .mirror .ph_sub li{
        width: 100%;
        margin: 0 0 5px 0;
    }
}

.powder .mirror .ph_sub img{
    width: 100%;
    height: auto;
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .mirror dt{
    padding: 12px 0 0 0;
    clear: both;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .mirror dd.txt{
    width: 100%;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .drawer{
    position: absolute;
    top: 335px;
    right: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .drawer .ph{
    width: 231px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .powder .drawer dd.txt span{
        padding: 10px 0 0 0;
    }
}

.powder .drawer .free,
.powder .cock .free{
    position: absolute;
    bottom: 0;
    right: 0;
}

.powder .linen{
    min-height: 320px;
    border-bottom: none !important;
}

.powder .linen .ph{
    margin: 4px 0 0 20px;
    float: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .powder .linen .ph{
    margin:0 0 0 18px;
}
}

.powder .linen .ph img{
    width:120px !important;
    height:320px;
}

@media print, screen and (min-width: 768px) {/*PC*/
.powder .linen dt{
    margin: 105px 0 6px 0!important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .powder .equip{
        
    }
}

.powder .poket{
    margin: 40px 0 0 0;
    /*border: solid 1px #00446b;*/
    outline: solid 1px #00446b;
    outline-offset: -1px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.powder .poket{
    width: 231px;
    margin: 72px 0 0 0;
    position: absolute;
    left: 0;
}
}

.powder .poket h5{
    padding: 6px 0 6px 15px;
	font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 16rem;
    color: #ffffff;
    background-color: #00446b;
}

.powder .poket img{
    width: 100%;
}

.powder .poket p{
    padding: 12px 20px 15px;
    font-family: "NewCezannePro-M", sans-serif;
	color: #505050;
    line-height: 23rem;
    
}
@media print, screen and (min-width: 768px) {/*PC*/
.powder .poket p{
    padding: 8px 15px 10px;
}
}

/* トイレ */
.toilet .top>figure{
    position: relative; 
}
@media print, screen and (min-width: 768px) {/*PC*/
.toilet .top>figure{
    margin: 0 0 55px 0;
}
}

.toilet figure.main>img{
    height: 133.333vw !important;
    object-fit: cover;
    object-position: 50% 60%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .toilet figure.main>img{
        height: auto !important;
    }
}

.toilet .top>figure span{
    margin: 0 -23px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .top>figure span{
        margin: 0;
        justify-content: flex-start;
    }
}

.toilet .top>figure span a,
.toilet .top>figure span a img{
    margin: 0 !important;
}

.toilet .top>figure img.eco5{
    width: 180px;
    margin: 0 10px 3px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.toilet .top>figure img.eco5{
    width: 186px;
    margin: 0 15px 0 0;
}
}

.toilet .bowl{
    margin: 40px 0 0 0;
    padding: 0 0 40px 0;
    border-bottom: solid 1px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
.toilet .bowl{
    width: 504px;
    margin: 0;
    padding: 0 0 30px 0;
    position: absolute;
    top: 0;
    right: 0;
}
}

.toilet .bowl h5{
    margin: 0 0 8px 0;
    padding: 6px 0 6px 15px;
    font-size: 16rem;
    line-height: 16rem;
    color: #ffffff;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .win.toilet .bowl h5{
        padding: 8px 0 4px 15px;
    }
}

.toilet .bowl .ph{
    margin: 8px 0 -6px 0;
    display: flex;
    justify-content: space-between;
}

.toilet .bowl figure{
    width: 32%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .bowl figure{
        width: 148px;
    }
}

.toilet .bowl figcaption{
    font-size: 12rem;
    text-align: center;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .top .equip{
        width: 504px;
        position: absolute;
        top: 345px;
        right: 0;
    }
    }

@media print, screen and (min-width: 768px) {/*PC*/
.toilet .top .equip_bt{
    width: 504px;
    position: absolute;
    top: 664px;
    right: 0;
    /* width: 380px;
    position: absolute;
    top: 400px;
    right: 0;
    display: block !important; */
}
}


@media print, screen and (min-width: 768px) {/*PC*/
.toilet .top dl.kirei{
    width: 380px !important;
    margin: 35px 0 !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .top dl.nozzle{
        width: 357px !important;
        margin: 35px 0 !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .top dl.forme .ph img{
        width: 231px;
        height: 172px;
        object-fit: cover;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .toilet main article>.equip_bt{
        min-height: 400px;
        position: relative;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.toilet .rimless .ph img,
.toilet .liftup .ph img,
.toilet .basin .ph img{
    width: 231px;
    height: 150px;
    object-fit: cover;
}
}

.toilet .handrail{
    min-height: 255px;
    margin: 0 !important;
    padding: 0 0 25px 0 !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .toilet .handrail{
        position: absolute;
        top: 200px;
        right: 0;
    }
}

.toilet .handrail .ph{
    width:100px;
    height:auto;
    margin: 0 0 0 20px;
    float: right;
}

@media print, screen and (min-width: 768px) {/*PC*/
.toilet .handrail dt{
    margin: 0 0 6px 0 !important;
}
}

.toilet .handrail{
    border-bottom: none !important;
}

.toilet .forme .ph,
.toilet .fullauto .ph{
    border: solid 1px #b3b3b3;
    overflow: hidden;
}

/* エコロジー＆エコノミー */
@media print, screen and (min-width: 768px) {/*PC*/
.eco main section:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    }
}

.eco main h5{
    margin: 75px 0 0 0;
    font-size: 16rem;
    line-height: 16rem;
    font-weight: normal;
    font-family: "NewCezannePro-DB";
    color: #54b0ad;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco main h5{
    width: 100%;
    margin: 45px 0 0 0;
    font-size: 16rem;
    line-height: 20rem;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
}

.eco main h5 span{
    margin: 6px 0 0 0;
    padding: 6px 0 6px 0;
    border-top: solid 1px #a9c1b5;
    border-bottom: solid 1px #a9c1b5;
    font-family: "NewCezannePro-M";
    font-size: 14rem;
    line-height: 20rem;
    font-weight: normal;
    color: #333333;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco main h5 span{
    padding: 0;
    border: none;
    font-family: "NewCezannePro-M", sans-serif;
    font-size: 16rem;
	text-align: left !important;
    order: -1;
}
}

.eco main h5 img{
    padding: 10px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco main h5 img{
    margin: 0 0 -5px 0 !important;
    padding: 0;
}
}

.eco main p{
    font-family: "NewCezannePro-M", sans-serif;
    line-height: 23rem;
}

.eco main figure{
    margin: 0 0 10px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco main{
    background-image: url(../img/equipment_img/bg_eco_pc.jpg);
    background-size: auto 525px;
    background-position: center 390px;
    background-repeat: no-repeat;
}
}

.eco .lead{
    margin: 0 -23px;
    background-image: url(../img/equipment_img/bg_eco_sp.jpg);
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .lead{
        margin: 0;
        background-image: none;
    }
}

.eco .lead h4.zeh{
    width: 77vw;
    margin: 42vw auto 20vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .lead h4.zeh{
        width: 366px;
        margin: 160px auto 80px ;
    }
}

.eco .lead p{
    padding: 0 23px;
    text-align: center;
    color: #ffffff;
    text-shadow: 0 0 12px rgba( 33, 55, 22, 0.60 );
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .lead p{
        font-size: 17rem;
        line-height: 27rem;
        text-shadow: 0 0 8px rgba( 33, 55, 22, 0.60 );
}
}

.eco .lead p strong{
    margin: 0 0 6px 0;
    font-size: 18rem;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .lead p strong{
        margin: 0 0 12px 0;
        font-size: 20rem;
    }
}

.eco .scheme a{
        width: 230px;
    margin: 10px auto 10px;
    padding: 2px 0;
    color: #ffffff;
    font-size: 14rem;
    text-align: center;
    background-image: url(../img/common_img/ic_arrow_wh.png);
    background-size: 10px auto;
    background-position: 95% center;
    background-repeat: no-repeat;
    background-color: #54aeac;
    border-radius: 14px;
    display: block;
    /* backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); */
    transition: all 0.15s ease-in;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme a{
        width: 240px;
        padding: 2px 0;
        font-size: 16rem;
        border-radius: 16px;
    }
    
    .eco .scheme a:hover {
        background-color: #01b1ad;
        transition: all 0.25s ease-in;
    }
}



.eco .lead::after{
    margin: 0 8px 0 0;
    content: "image";
    font-size: 10rem;
    line-height: 20rem;
    color: #ffffff;
    text-align: right;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .lead::after{
        margin: 20px 0 0 0;
        visibility: visible;
    }
}

.eco .scheme{
    margin: 36px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme{
        margin: 90px 0 90px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.eco .scheme figcaption{
    margin: 4px 0 0 0;
    font-size: 10rem;
    line-height: 14rem;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme .label{
        width: 410px;
    }
}

.eco .scheme .fig{
    margin: 40px -3vw 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme .fig{
        width: 610px;
        height: 306px;
        margin: 0;
        background-color: rgba( 255, 255, 255, 0.85 );
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme .fig img{
        width: 473px;
        margin: 26px auto 0;
        display: block;
    }
}

.eco .scheme .fig figcaption{
    text-align: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme .fig figcaption{
        margin: 8px 8px 0 0;
    }
}

.eco .scheme h4{
    width: 100%;
    margin: 30px 0 0 0;
    font-family: "NewCezannePro-DB";
    font-size: 19rem;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme h4{
        margin: 25px 0 5px 0;
        font-size: 24rem;
        letter-spacing: 2rem;
    }
}

.eco .scheme .note{
    width: 100%;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .scheme .note{
        font-size: 14rem !important;
    }
}

.eco .value{
    width: 36px;
    position: absolute;
    right: -12px;
}
@media print, screen and (min-width: 414px) {/*PC*/
.eco .value{
    width: 46px;
}
.eco .bathtab .value{
    top: -46px;
}
}

.eco .share h5 img{
    width: 175px;
    height: 35px;
}

.eco .share .fig_01{
    margin: 14px 0 14px 0;
    padding: 0 10px 5px;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .share .fig_01{
    width: 626px;
    margin: 25px 27px 10px 0;
    padding: 0 0 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    position: relative;
    float: left;
}
}

.eco .share .fig_01 .past{
    width: auto;
    height: 224px;
}

.eco .share .fig_01 .sp{
    width: 32px;
    margin: 12px auto 8px;
}
.eco .share .fig_01 .pc{
    width: 32px;
    height: 30px;
    margin: 130px auto 0;
}

.eco .share .fig_01 .new{
    width: auto;
    height: 242px;
}

.eco .share .fig_01 figcaption{
    margin: 0 0 0 -15px;
    font-family: "NewCezannePro-M";
    font-size: 11rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .share .fig_01 figcaption{
    margin: 0;
    position: absolute;
    bottom: -3px;
    left: 0;
}
}

.eco .share .fig_02{
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .share .fig_02{
    width: 383px;
    margin: 25px 0 0 0;
    float: right;
}
}

.eco .share .value{
    bottom: 22px;
}

.eco .share p.note2{
    letter-spacing: -0.25rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .share p.note2{
    letter-spacing: 0;
    display: block;
    clear: both;
}
}

.eco .share .sub{
    margin: 30px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .share .sub{
    display: flex;
    justify-content: space-between;
    clear: both;
}
}

.eco .sub dl{
    margin: 15px 0 30px;
    padding: 0 0 0 12px;
    border-left: solid 4px #54afad;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .share .sub dl:nth-child(1){
        width: 375px;
    }
    .eco .share .sub dl:nth-child(2){
        width: 220px;
    }
    .eco .share .sub dl:nth-child(3){
        width: 320px;
       
    }
}

.eco .sub dt{
    margin: 0 0 8px 0;
    font-size: 16rem;
    line-height: 21rem;
    color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .sub dt{
    width: 100%;
    margin: 0 0 5px 0;
    line-height: 20rem;
}
}

.eco .sub dd{
    line-height: 23rem;
}

.eco .share .sub .ph1{
    width: 94px;
    margin: 0 0 0 10px;
    float: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .share .sub .ph1{
        width: 133px;
        
    }
}

.eco .share .sub .ph3{
    width: 77px;
    margin: -10px 0 0 10px;
    float: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .share .sub .ph3{
        width: 72px;
        margin: 0 0 0 18px;
    }
}

.eco .share .sub .ph3.img_br::after{
    margin: -4rem -2rem 0 0;
    transform: scale(0.9);
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .eco5{
    position: relative;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .wash{
    position: relative;
}
}

.eco .wash .ph{
    margin: 8px 0 30px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .wash .ph{
        margin: 15px 0 0 0;
        float: left;
    }
    .eco .wash .ph img{
        width: 216px;
        height: 232px;
        object-fit: cover;
}
}

.eco .wash .fig{
    margin: 0 0 20px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .wash .fig{
        width: 310px;
        margin: 20px 0 0 0;
        float: left;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .wash div{
        width: 280px;
        margin: 0 20px;
        float: left;
        letter-spacing: -1rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .wash div dl{
        margin: 15px 0 25px;
    }
}

.eco .wash .sub small{
    font-size: 10rem;
    color: #333333;
    vertical-align: 5px;
    transform: scale(0.9);
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .wash .note2{
        width: 180px;
        margin: -48px 0 0 0 !important;
        float: right;
    }
    }


@media print, screen and (min-width: 768px) {/*PC*/
.eco .eco5{
    
}
}

.eco .eco5 h5 img{
    width: 175px;
    height: 36px;
    margin: auto;
    display: block;
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .eco5 p{
    width: 285px;
    text-align: left;
    letter-spacing: -0.4rem;
    float: left;
}
}

.eco .eco5 figure{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .eco5 figure{
    width: 750px;
    padding: 6px 0 0 0;
    flex-wrap: nowrap;
    align-items: flex-end;
    float: right;
}
}
.eco .eco5 figure img.ph,
.eco .eco5 figure img.fig1{
    width: 43vw;
    margin: 30px 0 15px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .eco5 figure img.ph{
        width: 170px;
        margin: 0;
    }
    .eco .eco5 figure img.fig1{
        width: 162px;
        margin: 0;
    }
    .eco .eco5 figure img.fig2{
        width: 388px;
        margin: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .eco5 ul.note2{
    width: 285px;
    position: absolute;
    left: 0;
    top: 258px;
    line-height: 11rem !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab p.note2{
    width: 100%;
    clear: both;
}
}

.eco .shower h5 img{
    width: 137px;
    height: auto;
    margin: -10px auto -5px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .shower h5 img{
        width: 160px;
        margin: 0 0 -12px !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .shower div{
        width: 500px;
        position: relative;
    }
}

.eco .shower .ph{
    width: 36vw;
    height: 38vw;
    margin: 4px 0 25px 15px;
    object-fit: cover;
    float: right;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .shower .ph{
        width: 165px;
        height: auto;
        margin: 2px 0 0 0;
        position: absolute !important;
        top: 4px;
        right: -185px;
        float: none;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .eco .shower .fig1{
        margin: 20px 0 0 0;
    }
    .eco .shower .fig2{
        width: 220px;
        margin: 5px 0 0 0;
    }
}

.eco .shower .fig3{
    margin: 15px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .shower .fig3{
        width: 353px;
        position: absolute;
        top: -15px;
        right: -550px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .shower p.note2{
    width: 810px;
    margin: -53px 0 0 0 !important;
    display: inline-block;
    float: right;
}
}

.eco .ecojyozu h5 img{
    width: 108px;
    height: auto;
    margin: -3px auto 0;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .eco .ecojyozu h5 img{
        width: 122px;
    }
}
.eco .ecojyozu figure img{
    margin: 25px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .ecojyozu figure img:first-child{
    width: 482px;
    margin: 20px 58px 0 0;
}
.eco .ecojyozu figure img:last-child{
    width: 504px;
    margin: 20px 0 0 0;
}
}

.eco .ecojyozu  .note2{
    text-align:left;
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab{
    position: relative;
}
}

.eco .bathtab h5 img{
    width: 133px;
    height: 44px;
    margin: -3px auto -3px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab h5 img{
    width: 122px;
    margin: 0px 0 -10px !important;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab p{
    width: 220px;
    float: left;
}
}

.eco .bathtab figure{
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab figure{
    width: 830px;
    float: right;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
}

.eco .bathtab figure img{
    margin: 22px auto 0;
}

.eco .bathtab figure img.mechanism{
    width: 65%;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab figure img.mechanism{
    width: 227px;
    margin: 5px 0 0 20px;
}
.eco .bathtab figure img.graph{
    width: 364px;
    margin: 10px 0 0 0;
}
.eco .bathtab figure img.pc{
    width: 182px;
    margin: 10px 0 0 0;
}
}

.eco .bathtab figure img.ic{
    width: 25vw;
    height: auto;
    margin: 0;
    position: absolute;
    top: 40vw;
    left: -5px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab figure img.ic{
    width: 124px;
    top: 145px;
    left: -120px;
}
}

.eco .bathtab figure img.value{
    bottom: 8px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab figure img.value{
    bottom: 200px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab ul.note2{
    width: 182px;
    position: absolute;
    top: 150px;
    right: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.eco .bathtab p.note2{
    width: 100%;
    clear: both;
}
}

/*セキュリティ*/
.security .equip .ph,
.security .equip_bt .ph,
.security #keysystem .ph{
    position: relative;
}

.security .equip .img_b::after,
.security .equip_bt .img_b::after,
.security #keysystem .img_b::after{
    content: "image";
    font-size: 10rem;
    line-height: 10rem;
    color: #333333;
    width: auto;
    position: absolute;
}

.security .h24 .img_b::before{
    content: "image";
    font-size: 10rem;
    line-height: 10rem;
    color: #333333;
    width: auto;
    position: absolute;
    top:37%;
    left: 1%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .h24 .img_b::before{
    top: 248px;
    left: 180px;
}
}

.security .h24 .img_b::after{
    bottom: 2%;
    left: 1%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .h24 .img_b::after{
    top: 248px;
    bottom: inherit;
    left: inherit;
    right: 23px;
}
}

.security .camera .img_b::after{
    bottom: 0;
    right: 0;
}

.security .monitor .img_b::after{
    bottom: 0;
    right: -20%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .monitor .img_b::after{
    bottom: 0;
    right: -28px;
}
}

.security .tv .img_b::after{
    bottom: -3.5%;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .tv .img_b::after{
    bottom: 25px;
    right: 0;
}
}

.security .door .img_b::after{
    bottom: -3.5%;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .door .img_b::after{
    bottom: -12px;
    right: 7px;
}
}

.security .key{
    border-bottom: none !important;
}

.security .key .img_b::after{
    bottom: 0;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .key .img_b::after{
    bottom: -17px;
    right: 0;
}
}

.security #keysystem .img_b::after{
    bottom: 16%;
    right: 3%;
}
.security #keysystem div dl:nth-child(2) .img_b::after{
    bottom: 3%;
    right: 3%;
}


.security .lock .ph{
    width: 80%;
    margin: auto;
}

.security .camera .ph{
    width: 90%;
    margin: auto;
}

.security .monitor .ph{
    width: 50%;
    margin: auto;
}

.security .key .ph{
    width: 80%;
    margin: auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .key .ph{
    width: 100%;
    margin: auto;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .tv .ph{
    margin: 35px 0 0 0 !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .h24{
    width: 100% !important;
    margin: 0 0 35px 0 !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .h24 dt,
.security .h24 dd.txt{
    width: 323px;
}
.security .h24 dt{
    margin: 0 0 6px 0!important;
}
.security .h24 dd.txt{
    float: left;
}
}

.security .h24 dd.ph{
    margin: 10px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .h24 dd.ph{
    width: 702px;
    margin: -44px 0 0 0;
    float: right;
}
}

.security .lock dd.ph,
.security .camera dd.ph,
.security .monitor dd.ph,
.security .tv dd.ph,
.security .door dd.ph,
.security .key dd.ph{
    margin: 10px auto 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .lock{
    width: 504px !important;
}
.security .lock dt{
    margin: 0 0 6px 0!important;
}
.security .lock dd.txt{
    width: 212px;
    float: left;
}
.security .lock dd.ph{
    width: 260px;
    margin: -10px 0 0 0;
    float: right;
}
}

.security .camera dd.ph{
    width: 80%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .camera dd.ph{
    width: 220px;
    margin: 30px auto 0;
}
}

.security .monitor dd.ph{
    width: 40%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security .monitor dd.ph{
    width: 95px;
    margin: 6px auto 0;
}
}

.security .monitor .img_b::after{
    right: -25%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security .monitor .img_b::after{
        right: -35px;
    }
}

.security .monitor dd.note{
    width: 100%;
    margin: 8px 0 0 0 !important;
    line-height: 12rem !important;
    text-align: center;
    order: 1;
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .tv{
    width: 504px !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.security .camera,
.security .monitor,
.security .tv,
.security .door,
.security .key{
    display: flex;
    flex-wrap: wrap;
}
.security .camera .ph,
.security .monitor .ph,
.security .tv .ph,
.security .door .ph,
.security .key .ph{
    order: 1;
    margin: 10px auto 0;
}
.security .camera dt,
.security .monitor dt,
.security .tv dt,
.security .door dt,
.security .key dt{
    margin: 0 0 6px 0!important;
}
}

.security #keysystem{
    margin: 0 0 40px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem{
    margin: 0 0 60px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
}

.security #keysystem h5{
    margin: 0 -23px;
    padding: 6px 0 6px 12px;
    font-size: 17rem;
    line-height: 18rem;
    color: #ffffff;
    text-align: center;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem h5{
    width: calc(100% - 25px);
    margin: 45px 0 0 0;
	padding: 6px 0 6px 25px;
    text-align: left;
}
.win.security #keysystem h5{
	padding: 8px 0 4px 25px;
}
}

.security #keysystem div.outline{
    margin: 18px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem div.outline{
        width: 550px;
        margin: 20px 0 0 0;
    }
}

.security #keysystem figure.knob{
    width: 57%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem figure.knob{
        width: 340px;
    }
}
.security #keysystem figure.key{
    width: 41%;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem figure.key{
        width: 200px;
        margin: 0 0 5px 0;
    }
}

.security #keysystem figure img{
    width: 100%;
    height: auto;
}
.security #keysystem figure.key img{
    margin: 0 0 18px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem figure.key img{
        margin: 0;
    }
}
.security #keysystem figure.key figcaption{
    position: absolute;
    top: -6px;
    right: 4px;
    font-family: "NewCezannePro-M";
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem figure.key figcaption{
        top: inherit;
        bottom: 0;
        left: 44px;
        font-size: 14rem;
        line-height: 14rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem figure.key::after{
        position: absolute;
        bottom: -24px;
        right: -10px;
    }
}

.security #keysystem p{
    margin: 18px 0 0 0;
    font-family: "NewCezannePro-M", sans-serif;
    letter-spacing: -0.5rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem p{
    margin: 28px 35px 0 0;
    letter-spacing: 0.5rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem div.step{
    width: 480px;
    margin: 15px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}

.security #keysystem dl{
    padding: 8px 0 22px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem dl{
    width: 220px;
    padding: 0 0 20px 0;
    display: block;
}
}

.security #keysystem dl.step1{
    background-image: url(../img/equipment_img/ic_tri_bt.png);
    background-size: 30px 15px;
    background-position: 28% bottom;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .security #keysystem dl.step1{
        padding: 0 40px 20px 0;
        background-image: url(../img/equipment_img/ic_tri_rt.png);
        background-size: 25px 50px;
        background-position: 228px 90px;
    }
}

.security #keysystem dt{
    margin: 0 0 3px 0;
    font-size: 16rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem dt{
    margin: 0;
    font-size: 15.5rem;
    letter-spacing: -0.5rem;
}
}

.security #keysystem dt img{
    width: 19px;
    margin: 0 4px 0 0;
    vertical-align: -3px;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem dt img{
    margin: 0 2px 0 0;
}
}

.security #keysystem .ph{
    width: 57%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem .ph{
    width: 100%;
}
}

.security #keysystem .ph img{
    width: 100%;
}

.security #keysystem .txt{
    width: 40%;
    margin: -2px 0 0 0;
    font-family: "NewCezannePro-M", sans-serif;
    line-height: 20rem;
    letter-spacing: -0.5rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.security #keysystem .txt{
    width: 100%;
    margin: 5px 0 0 0;
    letter-spacing: 0.5rem;
}
}

/*設備*/
.equipments .storage{
    padding: 40px 0 40px 0 !important;
    border-top: dotted 1px #00446b;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .storage{
        padding: 0 !important;
        border-top: none;
    }
}

.equipments .storage .ph{
    position: relative;
}

.equipments .storage .ph span{
    width: 100%;
    padding: 4px 0 4px;
    position: absolute;
    bottom: 0;
    display: block;
    background-color: rgba( 0, 0, 0, 0.60 );
    font-family: "NewCezannePro-M";
    font-size: 14rem;
    line-height: 14rem;
    color: #ffffff;
    text-align: center;
}

.equipments .door .ph{
    background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .door .ph{
        width: 231px !important;
        height: 270px;
        padding: 0;
    }
}

.equipments .door .ph img{
    height: 230px !important;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .door .ph img{
        height: 270px !important;
        object-position: -90px 100%;
    }
}
.equipments .door ul{
    display: flex;
}
@media print, screen and (min-width: 768px) {/*PC*/
.equipments .door ul{
    display: inherit;
}
.equipments .door li{
    padding: 0 12px 0 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .stock .ph img{
        width: 231px !important;
        height: 270px !important;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .height .ph{
        width: 231px !important;
        height: 270px;
    }
}

.equipments .height .ph img{
    height: 230px !important;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .height .ph img{
        height: 270px !important;
        object-position: -70px 0;
    }
}

.equipments .box{
    border-bottom: none !important;
}

.equipments .box .ph{
    width: 65vw;
    margin: auto;
    padding: 0 0 0 15vw;
    text-align: center;
    position: relative;
}

.equipments .box .ph::after{
    position: absolute;
    bottom: 0px;
    right: 15vw;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .box{
        width: 504px !important;
    }
    .equipments .box .ph{
        width: 246px;
        margin: -15px 10px 0 0;
        padding: 0 0 0 15px;
        float: left;
        position: relative;
    }
    .equipments .box .ph img{
        width: 100%;
        height: auto !important;
    }
    .equipments .box .ph::after{
        position: absolute;
        bottom: 10px;
        left: 170px;
        right: inherit;
    }
}

.equipments .height .ph,
.equipments .door .ph,
.equipments .flooring .ph{
    border: solid 1px #b3b3b3;
    overflow: hidden;
}

.equipments .flooring .ph::after{
    position: absolute;
    right: 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
.equipments .equip .ph img,
.equipments .equip_bt .ph img{
    width: 231px;
    height: 190px;
    object-fit: cover;
}
}

.equipments .ftth{
    margin: 0 0 25px 0;
}
.equipments .glass{
    margin: 0 0 40px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth,
    .equipments .glass{
        width: 504px;
        margin: 0 0 35px 0;
    }
    .equipments .ftth{
        float: left;
    }
    .equipments .glass{
        float: right;
    }
}

.equipments .ftth h5,
.equipments .glass h5{
    padding: 6px 0 6px 0;
    font-size: 17rem;
    line-height: 18rem;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    background-color: #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
.equipments .ftth h5,
.equipments .glass h5{
    margin: 0;
    padding: 12px 0 11px 15px;
    text-align: left;
}
.win.equipments .ftth h5,
.win.equipments .glass h5{
    padding: 14px 0 9px 15px;
}
}

.equipments .ftth dl{
    padding: 0 0 20px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.equipments .ftth dl{
    padding: 0;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}
}
.equipments .ftth dt{
    margin: 18px 0 18px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth dt{
        width: 100%;
        margin: 40px 0 28px;
        order: -2;
    }
}

.equipments .ftth dt img{
    width: 130px;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth .ph{
        margin: -75px 0 0 0;
    }
}

.equipments .ftth .ph img.fig{
    width: calc(100% + 4vw);
    margin: 0 -4vw 18px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.equipments .ftth .ph img.fig{
    width: 320px;
    margin: 0 -12px 0 0;
}
}

.equipments .ftth .ph img.sub{
    width: 120px;
    position: absolute;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth .ph img.sub{
        top: -20px;
    }
}

.equipments .ftth .ph::before{
    content: "image";
    font-size: 10rem;
    line-height: 10rem;
    color: #ffffff;
    position: absolute;
    top: 66px;
    left: 3px;
    z-index: 999;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth .ph::before{
        top: 46px;
    }
}

.equipments .ftth .ph::after{
    margin: -16rem 0 0 0 ;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .ftth .ph::after{
        margin: 0 ;
    }
}

.equipments .ftth .txt{
    margin: 12px 0 8px 0;
    line-height: 23rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.equipments .ftth .txt{
    width: 170px;
    margin: 0;
    order: -1;
    letter-spacing: -0.25rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.equipments .ftth .note2{
    width: calc(308px / 0.9);
    position: absolute;
    top: 210px;
    right: 0px;
    transform: scale(0.9);
    transform-origin: top right;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .glass div{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
    }
}

.equipments .glass .fig1{
    margin: 18px 0 15px 0;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .glass .fig1{
        width: 248px;
        margin: 18px 0 0 0;
        padding: 10px 0;
        background-color: #ffffff;
    }
}

.equipments .glass .fig2{
    margin: 12px auto 25px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .glass .fig2{
        width: 248px;
        margin: 18px 0 0 0;
        padding: 10px 0;
        background-color: #ffffff;
    }
}

.equipments .glass .fig1 figcaption{
    padding: 2px 3px;
    position: absolute;
    top: 10px;
    left: 10px;
    line-height: 13rem;
    border: solid 1px #666666;
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .glass .img_br::after{
        margin: 0 4rem -10px 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    .equipments .glass p{
        margin: 15px 0 10px;
    }
}

.equipments .glass img{
    width: 100%;
}

.equipments .img_b::after{
    margin: -15rem 0 0 5rem;
    text-align: left;
}

/* 構造 */
@media print, screen and (min-width: 768px) {/*PC*/
    .structure .lead{
        width: 100%;
    }
}
    
.structure h5.line {
    margin: 50px 0 -5px 0 !important;
}

@media print,
screen and (min-width: 768px) {/*PC*/
    .structure h5.line {
        margin: 70px 0 -15px 0 !important;
    }
}
    
.structure h4 + h5.line{
    margin: 0 0 16px 0 !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure h4 + h5.line{
    margin: 0 !important;
}
}

.structure .lead h6{
    margin: 0 0 10px 0;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    color: #1c354d;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .lead h6{
    margin: 20px 0 13px 0;
    font-size: 17rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .lead p{
    font-size: 14rem;
}
}

.structure figure.main img{
    width: 100%;
    margin: 15px 0 0;
    padding: 0 0 20px 0;
    /*border-bottom: solid 1px #7fa1b5;*/
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure figure.main img{
    width: 521px;
    margin: 55px 0 0;
    border-bottom: none;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .equip .top{
    width: 500px;
    padding: 90px 0 10px 0;
}
}

.structure .equip dl,
.structure .equip_bt dl{
    margin: 5px 0 5px 0 !important;
    display: flex;
    flex-wrap: wrap;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .equip dl,
.structure .equip_bt dl{
    margin: 45px 0 0px 0 !important;
}
}
.structure .equip .ph,
.structure .equip_bt .ph{
    order: 1
}

.structure .top dt img{
    width: 24px;
    margin: 0 5px 0 0;
    vertical-align: -5px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .structure .top dt img{
        vertical-align: -6px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .ph{
    width: 100% !important;
    padding: 0 !important;
}
}

.structure .rebar .ph{
    width: 80%;
    margin: 10px auto 0;
}

.structure .thickness .ph{
    width: 85%;
    margin: 10px auto 0;
    padding: 0 0 0 8%;
}

.structure .wall .ph{
    width: 80%;
    margin: 10px auto 0;
    padding: 0 0 0 10%;
}

.structure .floor .ph{
    width: 90%;
    margin: 15px 0 0 7vw;
    padding: 0 5% 0 0 0;
}

.structure .void .ph{
    width: 100%;
    margin: 15px auto 0;
}

.structure .ratio .ph{
    width: 80%;
    margin: 10px auto 0;
}

.structure .roof .ph{
    width: 90%;
    margin: 10px auto 0;
    padding: 0 0 0 5%;
}

.structure .slit .ph{
    width: 90%;
    margin: 10px auto 0;
}

.structure .noise .ph{
    width: 100%;
    margin: 30px auto 10px;
}

.structure .sash .ph{
    width: 75%;
    margin: 10px auto 10px;
}

.structure .alminium .ph{
    width: 65%;
    margin: 10px auto 0;
}

.structure .double .ph{
    width: 85%;
    margin: 10px auto 0;
}

.structure .sickhouse .ph{
    margin: 15px auto 5px;
}

.structure .spile .ph{
    margin: 15px 25px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .spile,
.structure .ratio{
    margin: 35px 0 0 0 !important;
}
.structure .alminium{
    position: absolute;
    top: 270px;
    right: 0;
}
.structure .freeplan{
    position: absolute;
    top: 200px;
    left: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .equip,
.structure .equip_bt{
    position: relative;
}
.structure .equip dl,
.structure .equip_bt dl{
    width: 504px !important;
    display: block;
}
.structure .equip .ph,
.structure .equip_bt .ph{
    float: right;
}
.structure .top dl{
    margin: 40px 0 40px 0 !important;
}
.structure .top dt,
.structure .top dd{
    width: 240px !important;
}
.structure .top .floor dd{
    width: 180px !important;
    margin: 0;
}
.structure .top .ph{
    width: 264px;
}

.structure .top .floor .ph{
    width: 299px !important;
}

.structure .top .void dt,
.structure .top .void dd{
    width: 184px !important;
}
.structure .top .void .ph{
    width: 300px !important;
    margin: 0 0 0 0;
}
.structure .spile dt,
.structure .spile dd{
    width: 170px !important;
}
.structure .spile .ph{
    width: 305px !important;
    margin: 0 0 50px 0;
}
.structure .ratio dt,
.structure .ratio dd{
    width: 256px !important;
}
.structure .ratio .ph{
    width: 228px !important;
    margin: 18px 0 0 0;
}
.structure .roof dt,
.structure .roof dd{
    width: 220px !important;
}
.structure .roof .ph{
    width: 270px !important;
    margin: 20px -10px 0 0;
}
.structure .slit dt,
.structure .slit dd{
    width: 173px !important;
}
.structure .slit .ph{
    width: 311px !important;
    margin: -3px 0 0 0;
}
.structure .noise{
    height: 390px;
}
.structure .sash dt,
.structure .sash dd{
    width: 235px !important;
}
.structure .sash .ph{
    width: 254px !important;
    margin: 0;
}
.structure .alminium dt,
.structure .alminium dd{
    width: 235px !important;
}
.structure .alminium .ph{
    width: 224px !important;
    margin: -54px 20px 0 0;
}
.structure .double dt,
.structure .double dd{
    width: 206px !important;
}
.structure .double .ph{
    width: 254px !important;
    margin: 5px 20px 0 0;
}
.structure .rebar .ph{
    margin: -65px auto 0 !important;
}
.structure .wall .ph{
    margin: -15px auto 0 !important;
}
.structure .sickhouse .ph{
    margin: 15px auto 10px !important;
}
}

.structure .img_br::after{
    width: auto;
    position: absolute;
    right: 0;
}

.structure .wall .img_br::after{
    right: 70%;
    bottom: 4%;
}

.structure .floor .img_br::after{
    right: 67%;
    bottom: 0%;
}

.structure .void .img_br::after{
    right: -1%;
    bottom: -9%;
}

.structure .rebar .img_br::after{
    bottom: -4%;
    right: -6%;
}

.structure .thickness .img_br::after{
    bottom: 24%;
    right: 16%;
}

.structure .spile .img_br::after{
    right: -3rem;
    bottom: -22rem;
}

.structure .ratio .img_br::after{
    right: -5rem;
    bottom: 1rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .structure .ratio .img_br::after{
        bottom: -4rem;
    }
}

.structure .slit .img_br::after{
    bottom: 11%;
}

.structure .noise .img_br::after{
    right: 1%;
    bottom: 2%;
}

.structure .sash .img_br::after{
    right: 15%;
}

.structure .alminium .img_br::after{
    right: 12%;
    bottom: -6%;
}

.structure .double .img_br::after{
    right: 37%;
    bottom: 2%;
}

.structure dd.note,
.structure dd.note2{
    line-height: 12rem !important;
    order: 2;
    clear: both;
}

.structure .sickhouse {
    border-bottom: inherit !important;
}

.structure .flat35{
    margin: 50px 0 0 0;
    padding: 0 0 8px 0;
    border-top: solid 3px #b3b3b3;
    border-bottom: solid 3px #b3b3b3;
    font-family: "NewCezannePro-M", sans-serif;
    color: #505050;
    line-height: 20rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .flat35{
    margin: 70px 0 50px 0;
    padding: 0;
    border: solid 1px #b3b3b3;
    display: flex;
    align-items: center;
}
}

.structure .flat35 dt{
    margin: 0 0 10px 0;
    padding: 8px 0 8px;
    border-bottom: solid 1px #b3b3b3;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .flat35 dt{
    margin: 0;
    border: none;
}
}

.structure .flat35 dt img{
    width: 80%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .flat35 dt img{
    width: 280px;
    padding: 0 20px 0 20px;
    border-right: solid 1px #b3b3b3;
    line-height: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .flat35 dd{
    padding: 10px 20px 5px 15px; 
}
}

.structure .guarantee,
.structure .maintenance{
    margin: 20px 0 0 0;
    padding: 15px 15px 25px 15px;
    background-color: #e7edf0;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee,
.structure .maintenance{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 35px 30px 35px;
}
}

.structure .guarantee h5,
.structure .maintenance h5{
    font-family: "NewCezannePro-DB";
    font-size: 21rem;
    text-align: center;
}

.structure .guarantee h5 small,
.structure .maintenance h5 small{
    font-size: 14rem;
    line-height: 20rem;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee h5,
.structure .maintenance h5,
.structure .guarantee h5 small,
.structure .maintenance h5 small{
    width: 100%;
    line-height: 23rem;
    text-align: left;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee h5 .pc{
    display: inline !important;
    font-size: 21rem;
    vertical-align: 0rem;
    color: #4d4d4d;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee dl{
    width: 820px;
}
}

.structure .guarantee dt{
    margin: 20px 0 5px 0;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    border-bottom: solid 1px #b3b3b3;
}

.structure .guarantee dd,
.structure .maintenance dd{
    line-height: 23rem;
    letter-spacing: -0.25rem;
}

.structure .guarantee ul{
    margin: 15px 0 0 0;
    display: flex;
    justify-content: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee ul{
    width: 134px;
    display: block;
    margin: 45px 0 0 0;
}
}

.structure .guarantee li{
    text-align: center;
}

.structure .guarantee li img{
    width: 90%;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .guarantee li img{
    width: 100%;
    margin: 0 0 18px 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .maintenance figure{
    width: 300px;
    margin: 35px 0 0 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .maintenance div{
    width: 650px;
}
}

.structure .maintenance h6{
    margin: 20px 0 5px 0;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 18rem;
    color: #87001a;
    text-align: left;
}

.structure .maintenance p{
    line-height: 23rem;
    letter-spacing: -0.25rem;
}

.structure .maintenance dl{
    padding: 10px 0 10px 0;
    border-bottom: dotted 1px #b3b3b3;
}

.structure .maintenance dt{
    margin: 10px 0 0 0;
    padding: 12px 0 0 0;
    font-family: "NewCezannePro-DB";
    font-size: 15rem;
    letter-spacing: -0.75rem;
    color: #4f8893;
    border-top: dotted 1px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
.structure .maintenance dt{
    margin: 8px 0 4px 0;
    line-height: 16rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
.structure .maintenance dd{
    line-height: 20rem;
}
}

.structure .maintenance figure img{
    width: 94%;
    margin: 20px auto 10px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    .structure .maintenance figure img{
        margin: 50px auto 0;
    }
}



/*/// 物件概要 ///*/
#outline article table{
    margin: 45px 0 0 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #outline article table{
        width: 1050px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #outline article tr{
        display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }
}

#outline article th{
    width: 100%;
    display:block;
    padding: 0 0 2px 0;
    line-height: 18rem;
	font-family: "NewCezannePro-DB";
    border-bottom: solid 1px #54afad;
    }
@media print, screen and (min-width: 768px) {/*PC*/
#outline article th{
    width: 210px;
    /* height: 18px; */
    margin: 0 0 20px 0;
    padding: 0 0 3px 10px;
    font-size: 14rem;
	background-image: none;
	border-bottom: solid 1px #54afad;
    }
}

#outline article td{
    width: 100%;
    display:block;
    padding: 2px 0 12px 0px;
    line-height: 18rem;
    }
    
@media print, screen and (min-width: 768px) {/*PC*/
#outline article td{
    width: calc(100% - 238px);
    /* height: 18px; */;
    margin: 0 0 20px 0;
    padding: 0 0 3px 15px;
    font-size: 14rem;
    background-image: none;
	/* border-bottom: solid 1px rgba(84, 175, 173, 50%); */
    border-bottom: solid 1px rgba(90, 155, 170, 50%);
    }
}

#outline article .note{
    line-height: 14rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
#outline article .note{
    font-size: 13rem;
    margin: -8px 0 0 8px;
}
}


/*/// セレクトプラン ///*/
#selectplan .title,
#optionplan .title{
    position: relative;
}

#selectplan .title h2,
#optionplan .title h2{
    padding: 28px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .title h2,
    #optionplan .title h2{
        padding: 58px 0 0 0;
    }
}

#selectplan .title h2 strong{
    letter-spacing: 0;
}

#selectplan .title .ic{
    width: 140px;
    margin: 0 auto;
    display: flex;
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
}
#optionplan .title .ic{
    width: 80px;
    margin: 0 auto;
    display: flex;
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .title .ic{
        width: 150px;
        top: 25px;
        transform: scale(1);
    }
    #optionplan .title .ic{
        width: 90px;
        position: absolute;
        top: 25px;
        transform: scale(1);
    }
}

#selectplan .title .ic li{
    padding: 4px 0 2px;
    line-height: 10rem;
    color: #ffffff;
    text-align: center;
}
#selectplan .title .ic li:nth-child(1){
    width: 50%;
    letter-spacing: 0;
    background-color: #999999;
}
#selectplan .title .ic li:nth-child(2){
    width: calc(48% - 10rem);
    padding: 4px 0 3px 10rem;
    letter-spacing: 10rem;
    background-color: #d15669;
}
#optionplan .title .ic li{
    width: 100%;
    padding: 4px 0 2px 10rem;
    line-height: 10rem;
    color: #ffffff;
    text-align: center;
    letter-spacing: 10rem;
    background-color: #547b99;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan.win .title .ic li{
        padding: 5px 0 3px;
    }
    #selectplan .title .ic li:nth-child(2){
        padding: 5px 0 3px 10rem;
    }
    #optionplan .title .ic li{
        padding: 4px 0 4px 10rem;
        color: #ffffff;
        background-color: #86adb5;
    }
    #optionplan.win .title .ic li{
        padding: 5px 0 3px 10rem;
    }
}

#selectplan main section{
    margin: 70px 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan main section{
    margin: 90px 0 0;
    overflow: hidden;
}
}

#selectplan .top h3{
    font-size: 17rem;
    font-weight: normal;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .top h3{
    font-size: 24rem;
}
}

#selectplan .top{
    margin: 40px 0 0 0;
}

#selectplan .top p{
    margin: 20px 0 35px 0;
    letter-spacing: -1rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top p{
    margin: 20px 0 40px 0;
    font-size: 14rem;
    line-height: 26rem;
    text-align: center;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top .step{
    display: flex;
    justify-content: space-between;
}
}

#selectplan .top .step dl{
    margin: 0 0 14px 0;
    display: flex;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top .step dl{
    width: 150px;
    flex-wrap: wrap;
}
}

#selectplan .top .step dl::after{
    content: '';
    position: absolute;
    bottom: -12px;
    left: 0;
    right: 0;
    width: 20px;
    height: 16px;
    margin: auto;
    background-image: url(../img/select_img/bg_tri_down.png);
    background-size: 20px 16px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top .step dl::after{
    content: '';
    position: absolute;
    bottom: 60px;
    right: -168px;
    width: 18px;
    height: 24px;
    background-image: url(../img/select_img/bg_tri_right.png);
    background-size: 18px 24px;
}
}

#selectplan .top .step dl:last-child::after{
    content: none;
}

#selectplan .top .step dt{
    width: 50px;
    height: 22px;
    padding: 7px 0 5px 9px;
    font-size: 10rem;
    color: #ffffff;
    background-color: #54afad;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top .step dt{
    width: 100%;
    height: 75px;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 21rem;
    line-height: 30rem;
    color: #808080;
    background-color: #e5e5e5;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
}

#selectplan .top .step dt b{
    margin: 0 0 0 3px;
    font-size: 24rem;
    font-weight: normal;
    vertical-align: -2rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .top .step dt b{
    margin: 0 6px 2px 3px;
    font-size: 75rem;
    line-height: 55rem;
}
}

#selectplan .top .step dd{
    width: calc(100% - 62px);
    height: 22px;
    padding: 9px 0 3px 10px;
    font-size: 16rem;
    line-height: 16rem;
    letter-spacing: 2rem;
    color: #666666;
    background-color: #e5e5e5;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .top .step dd{
    width: 100%;
    height: 48px;
    padding: 12px 0 0 10px;
    font-size: 15rem;
    line-height: 20rem;
    color: #ffffff;
    background-color: #54afad;
    order: -1;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt,
#selectplan .tt2{
    position: relative;
}
}

#selectplan .tt h4,
#selectplan .tt2 h4{
    font-size: 16rem;
    font-weight: normal;
    border-bottom: solid 1px #b3b3b3;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt h4,
#selectplan .tt2 h4{
    display: flex;
    align-items: flex-end;
}
#selectplan .kitchen .tt2 h4{
    width: 445px;
}
#selectplan .powder .tt2 h4{
    width: 635px;
}
#selectplan .tt h4 span,
#selectplan .tt2 h4 span{
    margin: 0 0 8px 2px;
    display: block;
    font-weight: normal;
    font-size: 15rem;
    line-height: 22rem;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt h4 span,
#selectplan .tt2 h4 span{
    font-size: 21rem;
    line-height: 24rem;
    color: #333333;
}
#selectplan .tt2 h4 span{
    position: absolute;
    top: 57px;
}
#selectplan.win .tt h4 span,
#selectplan.win .tt2 h4 span{
    line-height: 20rem;
}
#selectplan.win .tt2 h4 span{
    top: 55px;
}
}

#selectplan .tt h4 b,
#selectplan .tt2 h4 b{
    margin: 6px 0 10px -2px;
    display: block;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 41rem;
    font-weight: normal;
    color: #54aeac;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt h4 b,
#selectplan .tt2 h4 b{
    margin: 0 18px 0 0;
    order: -1;
    font-size: 40rem;
    line-height: 50rem;
    white-space: nowrap;
}
#selectplan.win .tt h4 b,
#selectplan.win .tt2 h4 b{
    line-height: 42rem;
}
}

#selectplan .tt ul,
#selectplan .tt2 ul{
    display: flex;
    font-size: 10rem;
    line-height: 18rem;
}
#selectplan .tt li:nth-child(2),
#selectplan .tt2 li:nth-child(2){
    margin: 0 0 0 12px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt ul{
    display: block;
    line-height: 14rem;
    position: absolute;
    bottom: 37px;
    right: 0;
}
#selectplan .tt2 ul{
    display: block;
    line-height: 14rem;
    position: absolute;
    top: 15px;
}
#selectplan .kitchen .tt2 ul{
    left: 333px;
}
#selectplan .powder .tt2 ul{
    left: 525px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan.win .kitchen .tt2 ul,
    #selectplan.win .powder .tt2 ul{
    top: 8px;
}
}

#selectplan .tt ul li,
#selectplan .tt2 ul li{
    text-align: right;
}
}

#selectplan .tt p{
    margin: 15px 0 8px;
    font-size: 12rem;
    line-height: 18rem;
}
#selectplan .tt2 p{
    margin: 0 0 40px;
    font-size: 13rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tt p{
    margin: 10px 0 15px;
    font-size: 14rem;
    text-align: left;
}
#selectplan .tt2 p{
    margin: 50px 0 10px;
    font-size: 14rem;
    line-height: 28rem;
    text-align: left;
}
}

/*床・建具・玄関シミュレーション*/
#selectplan .roomcolor .simulator{
    padding: 0 0 10px 0;
    border-bottom: double 3px #b3b3b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .simulator{
    padding: 0 0 12px 0;
    border-bottom: none;
}
}

#selectplan .roomcolor .swiper-container{
    position: relative;
}

#selectplan .roomcolor .thumbs-swiper{
    position: absolute;
    top: 60vw;
    width: 100%;
    overflow: inherit !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .roomcolor .thumbs-swiper{
        position: inherit;
        top: inherit;
        background-color: #f1f6f5;
    }
}

#selectplan .roomcolor .button{
    display: flex;
    background-color: #f1f6f5;
}

#selectplan .roomcolor .button li{
    width: 25%;
    height: 52px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button li{
    height: auto;
    /* background-size: 1px auto;
    background-position: left 60px;
    background-repeat: no-repeat;
    background-image: url(../img/common_img/vt_dot.png); */
}/*
#selectplan .roomcolor .button li.bw{
    background-image: none;
} */
}

#selectplan .roomcolor .button dl{
    opacity: 0.3;
    cursor:pointer
}
.swiper-slide-thumb-active dl,
.swiper-slide-thumb-active img.model{
    opacity: 1 !important;
}

#selectplan .roomcolor img.model{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -26px;
    left: 3px;
    z-index: 999;
    opacity: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor img.model{
    width: 40px;
    height: 40px;
    top: -18px;
    left: 210px;
}
}

#selectplan .roomcolor .button a.active img.model{
    opacity: 1;
}

#selectplan .roomcolor .button dl>dt.sp{
    position: relative;
    padding: 14px 0 10px;
    font-size: 11rem;
    line-height: 14rem;
    letter-spacing: -0.75rem;
    color: #ffffff;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dl>dt.pc{
    position: relative;
    margin: 0;
    padding: 15px 0 13px;
    font-size: 11rem;
    line-height: 11rem;
	letter-spacing: 1rem;
    color: #ffffff;
    text-align: center;
}
}

#selectplan .roomcolor .button dl>dt>b{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dl>dt>b{
    margin: 0 0 4px 0;
    font-size: 17rem;
    line-height: 17rem;
	letter-spacing: 0.25rem;
    font-weight: normal;
    display: block;
}
}

#selectplan .roomcolor .button .thumb1>dl>dt{
    background-color: #250100;
}
#selectplan .roomcolor .button .thumb2>dl>dt{
    background-color: #542f00;
}
#selectplan .roomcolor .button .thumb3>dl>dt{
    background-color: #957460;
}
#selectplan .roomcolor .button .thumb4>dl>dt{
    background-color: #c3ad9b;
}

#selectplan .roomcolor .swiper-slide-thumb-active dt::after{
    content: "";
    width: 25px;
    height: 15px;
    margin: auto;
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    z-index: 999;
    clip-path: polygon(50% 100%,100% 0,0 0);
}
#selectplan .roomcolor .swiper-slide-thumb-active.thumb1>dl>dt::after{
    background-color: #250100;
}
#selectplan .roomcolor .swiper-slide-thumb-active.thumb2>dl>dt::after{
    background-color: #542f00;
}
#selectplan .roomcolor .swiper-slide-thumb-active.thumb3>dl>dt::after{
    background-color: #957460;
}
#selectplan .roomcolor .swiper-slide-thumb-active.thumb4>dl>dt::after{
    background-color: #c3ad9b;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dt.sp,
#selectplan .roomcolor .thumb_sp{
    display: none !important;
}
}

#selectplan .roomcolor .thumb_sp{
    margin: 54px 0 0 0;
    padding: 13px 0 0 0;
    display: flex;
    justify-content: center;
    background-size: 25% 12px;
    background-repeat: no-repeat;
    background-color: #f1f6f5;
}

#selectplan .roomcolor .thumb_sp dl{
    width: 24vw;
}

#selectplan .roomcolor .thumb_sp dt{
    font-size: 10rem;
    line-height: 10rem;
    text-align: center;
    background-color: #f1f6f5;
}
#selectplan .roomcolor .thumb_sp dt.name{
    height: 20rem;
}

#selectplan .roomcolor .thumb_sp dd{
    width: 17vw;
    margin: 2px auto 2px;
}

#selectplan .roomcolor .button dd.thumb_pc{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dd.thumb_pc{
    padding: 12px 35px 0;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;
    border-left: dotted 1px #666666;
}
#selectplan .roomcolor .button li:last-child dd.thumb_pc{
    border-right: dotted 1px #666666;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dd.thumb_pc dl{
    width: 89px;
}
#selectplan .roomcolor .button dd.thumb_pc dd{
    width: 74px;
    margin: 0 auto 3px;
}
#selectplan.win .roomcolor .button dd.thumb_pc dd{
    margin: 0 auto 5px;
}
#selectplan .roomcolor .button dd.thumb_pc dd img{
    width: 74px;
}
}

#selectplan .roomcolor .thumb_sp dt.part{
    font-family: "NewCezannePro-DB";
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}
#selectplan .roomcolor .thumb_sp dt.name{
    font-size: 10rem;
    line-height: 11rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .button dt.part{
    font-family: "NewCezannePro-M";
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}
#selectplan .roomcolor .button dt.name{
    margin: 0 0 10px 0;
    font-size: 10rem;
    line-height: 11rem;
    letter-spacing: -0.3rem;
    text-align: center;
}
}

/*バスルームシミュレーション*/
#selectplan .bath .simulator{
    padding: 0 0 5px 0;
    border-bottom: dotted 1px #333333;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .simulator{
    padding: 0 0 12px 0;
    border-bottom: none;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .bath .simulator .swiper-slide{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

#selectplan .bath .simulator .swiper-slide>img{
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .bath .simulator .main-swiper2 .swiper-slide>img{
    width: 525px;
}
}

#selectplan .bath .swiper-container{
    position: relative;
}

#selectplan .bath .thumbs-swiper2{
    position: absolute;
    top: 127vw;
    width: 100%;
    overflow: inherit !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .bath .thumbs-swiper2{
        position: inherit;
        top: inherit;
        background-color: #f1f6f5;
    }
}

#selectplan .bath .button2{
    display: flex;
    background-color: #f1f6f5;
}

#selectplan .bath .button2 li{
    width: 25%;
    height: 60px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 li{
    height: auto;
    /* background-size: 1px auto;
    background-position: left 60px;
    background-repeat: no-repeat;
    background-image: url(../img/common_img/vt_dot.png); */
}
/* #selectplan .bath .button2 li.bw{
    background-image: none;
} */
}

#selectplan .bath .button2 dl{
    opacity: 0.3;
    cursor:pointer
}
.swiper-slide-thumb-active dl,
.swiper-slide-thumb-active img.model{
    opacity: 1 !important;
}

#selectplan .bath img.model{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -26px;
    left: 3px;
    z-index: 999;
    opacity: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath img.model{
    width: 40px;
    height: 40px;
    top: -18px;
    left: 210px;
}
}

#selectplan .bath .button2 a img.model{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -26px;
    left: 3px;
    z-index: 9999;
    opacity: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 a img.model{
    width: 40px;
    height: 40px;
    top: -25px;
    left: 210px;
}
}
#selectplan .bath .button2 a.active img.model{
    opacity: 1;
}

#selectplan .bath .button2 dl>dt.sp{
    position: relative;
    padding: 17px 0 18px;
    font-size: 11rem;
    line-height: 14rem;
    letter-spacing: -0.75rem;
    color: #ffffff;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dl>dt.pc{
    position: relative;
    margin: 0;
    padding: 15px 0 13px;
    font-size: 13rem;
    line-height: 13rem;
	letter-spacing: 1rem;
    color: #ffffff;
    text-align: center;
}
}

#selectplan .bath .button2 dl>dt>b{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dl>dt>b{
    margin: 0 0 4px 0;
    font-size: 17rem;
    line-height: 17rem;
	letter-spacing: 0.25rem;
    display: block;
}
}

#selectplan .bath .button2 .thumb1>dl>dt{
    background-color: #250100;
}
#selectplan .bath .button2 .thumb2>dl>dt{
    background-color: #542f00;
}
#selectplan .bath .button2 .thumb3>dl>dt{
    background-color: #957460;
}
#selectplan .bath .button2 .thumb4>dl>dt{
    background-color: #c3ad9b;
}

#selectplan .bath .swiper-slide-thumb-active dt::after{
    content: "";
    width: 25px;
    height: 15px;
    margin: auto;
    display: block;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    z-index: 999;
    clip-path: polygon(50% 100%,100% 0,0 0);
}
#selectplan .bath .swiper-slide-thumb-active.thumb1>dl>dt::after{
    background-color: #250100;
}
#selectplan .bath .swiper-slide-thumb-active.thumb2>dl>dt::after{
    background-color: #542f00;
}
#selectplan .bath .swiper-slide-thumb-active.thumb3>dl>dt::after{
    background-color: #957460;
}
#selectplan .bath .swiper-slide-thumb-active.thumb4>dl>dt::after{
    background-color: #c3ad9b;
}


@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dt.sp,
#selectplan .bath .thumb_sp{
    display: none !important;
}
}

#selectplan .bath .thumb_sp{
    margin: 54px 0 0 0;
    padding: 13px 0 0 0;
    display: flex;
    justify-content: center;
    background-color: #f1f6f5;
}

#selectplan .bath .thumb_sp dl{
    width: 25%;
}

#selectplan .bath .thumb_sp dt{
    font-size: 10rem;
    line-height: 10rem;
    text-align: center;
    background-color: #f1f6f5;
}
#selectplan .bath .thumb_sp dt.name{
    height: 20rem;
}

#selectplan .bath .thumb_sp dd{
    width: calc(100% - 6px);
    margin: 2px 3px 2px 3px;
}

#selectplan .bath .thumb_sp dd img{
    width: 100%;
    height: 14vw !important;
    object-fit: cover;
}

#selectplan .bath .button2 dd.thumb_pc{
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dd.thumb_pc{
    padding: 12px 20px 0 21px;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;
    border-left: dotted 1px #666666;
}
#selectplan .bath .button2 li:last-child dd.thumb_pc{
    padding: 12px 20px 0 20px;
    border-right: dotted 1px #666666;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dd.thumb_pc dl{
    width: 103px;
}
#selectplan .bath .button2 dd.thumb_pc dd{
    width: 103px;
    margin: 0 auto 3px;
}
#selectplan.win .bath .button2 dd.thumb_pc dd{
    margin: 0 auto 5px;
}
#selectplan .bath .button2 dd.thumb_pc dd img{
    width: 103px;
}
}

#selectplan .bath .thumb_sp dt.part{
    font-family: "NewCezannePro-M";
    font-size: 10rem;
    line-height: 10rem;
    letter-spacing: -1rem;
    text-align: center;
    white-space: nowrap;
}

#selectplan .bath .thumb_sp dl:nth-child(2) dt.part{
    margin: 0 0 3px -2px;
}

#selectplan .bath .thumb_sp dt.name{
    font-size: 10rem;
    line-height: 11rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bath .button2 dt.part{
    margin: 10px 0 0 0;
    font-family: "NewCezannePro-DB";
    font-size: 11rem;
    line-height: 11rem;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
}
#selectplan .bath .button2 dt.name{
    
    font-size: 10rem;
    line-height: 11rem;
    letter-spacing: -0.3rem;
    text-align: center;
}
}

/*キッチン*/
#selectplan .kitchen figure{
    margin: 12px 0 12px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .kitchen figure{
    width: 570px;
    height: 450px;
    margin: -50px 0 30px 0;
    float: right;
}
}

#selectplan .powder figure{
    margin: 12px 0 12px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .powder figure{
    width: 380px;
    height: 520px;
    margin: -50px 0 30px 0;
    float: right;
}
}

#selectplan main div:not(.thum)>h5{
    width: calc(100% - 10px);
    margin: 0 0 12px 0;
    padding: 3px 4px 3px 6px;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 16rem;
    font-weight: normal;
    letter-spacing: -0.25rem;
    text-align: left;
    color: #ffffff;
    background-color: #54afad;
}
@media print, screen and (min-width: 375px) {/*スマホ4.7″以上*/
#selectplan main div:not(.thum)>h5{
    width: calc(100% - 18px);
    padding: 6px 6px 5px 10px;
    font-family: "NewCezannePro-DB";
    font-size: 16rem;
    line-height: 16rem;
    letter-spacing: 0;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan main div:not(.thum)>h5{
    width: calc(100% - 22px);
    padding: 6px 6px 5px 16px;
    font-size: 18rem;
    line-height: 18rem;
    letter-spacing: 1rem;
}
#selectplan.win main div:not(.thum)>h5{
    padding: 7px 6px 4px 16px;
}
}

#selectplan main div:not(.thum)>h5 small{
    font-size: 14rem;
    font-family: "AvenirNextLTPro-Regular";
}
@media print, screen and (min-width: 375px) {/*スマホ4.7″以上*/
#selectplan main div:not(.thum)>h5 small{
    font-size: 14rem;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan main div:not(.thum)>h5 small{
    font-size: 16rem;
}
}

#selectplan main div:not(.thum)>h5 span{
    opacity: 0.5;
}

#selectplan main div dt{
    margin: 0 0 3px 0;
    font-size: 16rem;
    line-height: 18rem;
    position: relative;
}

#selectplan main div dd.txt{
    margin: 10px 0 0 0;
    line-height: 23rem;
}

#selectplan main dd.ph img{
    width: 100%;
}

#selectplan main .note{
    font-size: 10rem;
    line-height: 10rem;
    letter-spacing: -0.5rem;
}

#selectplan main .note2{
    margin: -8px 0 12px;
    font-size: 12rem;
    line-height: 12rem;
    letter-spacing: -0.5rem;
    color: #5e94b3;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan main .note2{
        margin: -33px 0 21px;
        padding: 0 12px 0 0;
        font-size: 13rem;
        line-height: 12rem;
        letter-spacing: -0.5rem;
        color: #ffffff;
        text-align: right;
    }
}

#selectplan main p{
    margin: 15px 0 0 0;
    line-height: 23rem;
}

#selectplan main .or{
    margin: 10px 0 0 0;
    background-image: url(../img/select_img/ln_dot_hr.png);
    background-position: center center;
    background-repeat: repeat-x;
    display: flex;
}

#selectplan main .or2{
    margin: 10px 0 0 0;
    background-image: url(../img/select_img/ln_dot_hr.png);
    background-position: center center;
    background-repeat: repeat-x;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan main .or{
        background-image: none;
    }
#selectplan main .or2{
    margin: 0;
    background-image: url(../img/select_img/ln_dot_vt.png);
    background-position: center center;
    background-repeat: repeat-y;
    display: flex;
    }
}

#selectplan main .or img,
#selectplan main .or2 img{
    width: 40px;
    height: 46px;
    margin: 0 auto 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan main .or img,
#selectplan main .or2 img{
    width: 60px;
    height: 52px;
    margin: auto;
}
}

#selectplan .list{
    margin: 0 0 30px 0;
}
#selectplan .select,
#selectplan .range_pannel,
#selectplan .kitchen_pannel,
#selectplan .height,
#selectplan .handle,
#selectplan .cabinet,
#selectplan .tap{
    margin: 0 0 45px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .height{
    margin: 0 0 30px 0;
}
#selectplan .bath_color{
    
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .accent li img,
#selectplan .bathcounter li img,
#selectplan .floor li img{
    margin: 0 0 3px 0 !important;
}
#selectplan.win .accent li img,
#selectplan.win .bathcounter li img,
#selectplan.win .floor li img{
    margin: 0 0 5px 0 !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .list{
   clear: both;
}
}

#selectplan .powerhandle{
    margin: 0 0 60px 0;
}

#selectplan .tatami{
    margin: 15px 0 0 0;
}


#selectplan .tatami ul{
    width: calc(50% - 7px);
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .floor,
#selectplan .bathcounter{
    width: calc(25% - 7px);
}
#selectplan .tatami ul{
    width: 380px;
}
}

#selectplan .list .thumb,
#selectplan .list .thumb_w,
#selectplan .list .thumb_w2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#selectplan .floor .thumb,
#selectplan .bathcounter .thumb{
    justify-content: flex-start;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .floor .thumb,
#selectplan .bathcounter .thumb{
    justify-content: space-between;
}
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .list .thumb_w{
    justify-content: flex-start;
}
}

#selectplan .list .thumb li{
    width: calc(25% - 10px);
    margin: 0 0 12px 0;
    text-align: center;
    font-size: 10rem;
    line-height: 11rem;
    letter-spacing: -1rem;
    position: relative;
}
#selectplan .list .thumb_w li{
    width: calc(33.33333333% - 10px);
    margin: 0 0 12px 0;
    text-align: center;
    font-size: 10rem;
    line-height: 11rem;
    letter-spacing: -1rem;
    position: relative;
}

#selectplan .list .thumb_w2 li{
    width: 40vw;
    margin: 0 0 25px 0;
    text-align: center;
    font-size: 10rem;
    line-height: 11rem;
    position: relative;
}

#selectplan .tatami .thumb li{
    width: calc(50% - 6.5px) !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tatami .thumb li{
    width: 110px !important;
}
}

#selectplan .list .thumb li img,
#selectplan .list .thumb_w li img{
    width: 100%;
    height: 50px;
    object-fit: cover;
    margin: 0 auto 3px auto;
    display: block;
}

#selectplan .list .thumb_w2 li img{
    width: 100%;
    margin: 0 auto 3px auto;
    display: block;
}
#selectplan.win .list .thumb li img,
#selectplan.win .list .thumb_w li img,
#selectplan.win .list .thumb_w2 li img{
    margin: 0 auto 5px auto;
}

#selectplan .list .thumb_w2 li img.large{
    position: absolute;
    top: 0;
    right: 0;
    width: 33px;
    height: 15px;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .list .thumb li{
    width: 12.5%;
    height: 74px;
    margin: 0 0 40px 0;
    font-size: 12rem;
    line-height: 13rem;
}
#selectplan .list .thumb li:nth-child(1),
#selectplan .list .thumb li:nth-child(9){
    width: 110px;
    height: 74px;
    margin: 0 11px 40px 0;
}
#selectplan .list .thumb li:nth-child(8),
#selectplan .list .thumb li:nth-child(16){
    width: 110px;
    height: 74px;
    margin: 0 0 40px 11px;
}
#selectplan .list .thumb li img{
    width: 110px;
    height: 74px;
}
#selectplan .list .thumb_w li{
    width: 244px;
    height: 74px;
    margin: 0 22px 40px 0;
    font-size: 12rem;
    line-height: 13rem;
}
#selectplan .list .thumb_w li img{
    width: 244px;
    height: 74px;
}
#selectplan .list .thumb_w2 li{
    width: 218px;
    height: 140px;
    margin: 0 0 40px 0;
    font-size: 12rem;
    line-height: 13rem;
}
#selectplan .list .thumb_w li img{
     /*width: 218px;
   height: 140px;*/
}
}

#selectplan .roomcolor .thumb li{
    width: calc(50% - 6.5px) !important;
}
#selectplan .floor .thumb li,
#selectplan .bathcounter .thumb li{
    margin: 0 4% 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .roomcolor .thumb li,
#selectplan .accent .thumb li,
#selectplan .accent .thumb li:nth-child(1),
#selectplan .accent .thumb li:nth-child(4),
#selectplan .floor .thumb li:nth-child(1),#selectplan .floor .thumb li:nth-child(2),#selectplan .floor .thumb li:nth-child(3){
    width: 98px !important;
    height: 74px;
    margin: 0 0 40px 0 !important;
}
#selectplan .accent li img:not(.ic),
#selectplan .floor li img:not(.ic){
    width: 98px !important;
    height: 74px;
}
#selectplan .powder .list .thumb li .ic{
    right: 0;
}
}

#selectplan .list li img.bd{
    border: solid 1px #e6e6e6;
    box-sizing: border-box;
}

#selectplan .list .thumb li .ic,
#selectplan .list .thumb_w li .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -10px;
    right: -5px;
}
#selectplan .list .thumb_w2 li .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -9px;
    left: -5px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .list .thumb li .ic,
#selectplan .list .thumb_w li .ic{
    width: 38px;
    height: 38px;
    top: -10px;
    right: -2px;
}
#selectplan .list .thumb_w2 li .ic{
    width: 38px;
    height: 38px;
    top: -10px;
    right: 183px;
}
}

#selectplan dt img.sel{
    width: 75px;
    height: 21px;
    margin: 0 0 6px 0;
    display: block;
}

#selectplan dd.ph{
    position: relative;
}

#selectplan .bath_color{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .range_pannel,
#selectplan .kitchen_pannel,
#selectplan .handle,
#selectplan .bath_color,
#selectplan .bathtab,
#selectplan .cabinet,
#selectplan .powerhandle,
#selectplan .tap,
#selectplan .japanese{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#selectplan .height{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
}

#selectplan .range_pannel dl,
#selectplan .kitchen_pannel dl{
    width: 80%;
    margin: auto;
}
#selectplan .range_pannel dl.si{
    margin: 0 auto -10px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .range_pannel dl,
#selectplan .kitchen_pannel dl{
    width:268px;;
    margin: 0;
}
#selectplan .range_pannel dl.si{
    margin: 0
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .range_pannel p,
#selectplan .kitchen_pannel p{
    width:376px;;
    margin: 44px 0 0 0;
}
}

#selectplan .range_pannel span.note,
#selectplan .kitchen_pannel span.note{
    margin: 8px 0 0 0;
    line-height: 14rem !important;
    display: block;
}

#selectplan .range_pannel .ic,
#selectplan .kitchen_pannel .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -10px;
    right: -20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .range_pannel .ic,
#selectplan .kitchen_pannel .ic{
    width: 38px;
    height: 38px;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .kitchen_pannel .or{
        padding: 50px 0 0 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .height{
        display: flex;
        justify-content: space-between;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .height p{
    width: 348px;
    margin: 17px 0 10px 0;
}
}
#selectplan .height figure{
    position: relative;
}

#selectplan .height figure .fig1{
    width: 80%;
    height: auto;
    margin: 20px auto 15px auto;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .height figure{
    width: 680px;
    height: auto;
    margin: 0;;
    display: flex;
    align-items: flex-end;
}
#selectplan .height figure .fig1{
    width: 315px !important;
    margin: 0 0 10px 0;
}
#selectplan .height figure .fig2{
    width: 365px !important;
}
}

#selectplan .height .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    right: 120px;
    bottom: 62vw;
    
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .height .ic{
    width: 38px;
    height: 38px;
    bottom: 80px;
    right: 470px;
}
}

#selectplan .handle figure{
    width: 80%;
    margin: 0 auto 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .handle figure{
    width: 318px !important;
    height: auto;
    margin: 0 70px 0 0;
}
}
#selectplan .handle dl{
    width: 80%;
    margin: auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .handle dl{
    width: 268px;
    margin: 18px 0 0 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .handle dd.ph{
    width: 100%;
    margin: 10px auto;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .handle .or{
        padding: 60px 0 0 0;
    }
}

#selectplan p.mid{
    margin: 40px 0 26px 0;
    padding: 12px 0 12px 0;
    font-size: 15rem;
    line-height: 24rem;
    text-align: center;
    background-color: #cce1e4;
    display: block;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan p.mid{
    margin: 70px 0 35px;
    padding: 8px 0 8px 0;
    font-size: 16rem;
    letter-spacing: 0;
}
}

#selectplan p.mid::after{
    content: "";
    width: 40px;
    height: 17px;
    margin: auto;
    display: block;
    position: absolute;
    bottom: -17px;
    left: 0;
    right: 0;
    z-index: 999;
    background-color: #cce1e4;
    clip-path: polygon(50% 100%,100% 0,0 0);
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan p.mid::after{
    
}
}

#selectplan .accent,
#selectplan .floor,
#selectplan .bathcounter{
    width: 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .accent{
    width: 437px;
}
#selectplan .floor{
    width: 324px;
}
/* #selectplan .bathcounter{
    width: 213px;
} */
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .bathcounter{
        width: 233px;
    }

    #selectplan main div.bathcounter:not(.thum)>h5{
        width: calc(100% - 12px);
        padding: 8px 0 4px 8px;
        letter-spacing: -1rem;
        white-space: nowrap;
    }

    #selectplan main div.bathcounter:not(.thum)>h5 small{
        letter-spacing: .5rem !important;
    }
    
    #selectplan .bathcounter .thumb li{
        width: 108px !important;
    }
    #selectplan .bathcounter .thumb li:nth-child(2){
        margin: 0 0 40px 0;
    }
}

#selectplan .bathtab{
    width: 100% !important;
    margin: 0 0 45px 0;
    position: relative;
    top: inherit;
    right: inherit;
}

#selectplan .bathtab dl{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bathtab dl{
    width: 260px;
    display: block;
}
}

#selectplan .bathtab dt{
    width: 100%;
}

#selectplan .bathtab dd.ph{
    width: 62%;
    margin: 0 0 10px 0;
    border: none;
}

#selectplan .bathtab .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -15px;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bathtab .ic{
    width: 38px;
    height: 38px;
    position: absolute;
    top: -45px;
    right: -5px;
}
}

#selectplan .bathtab dd.txt,
#selectplan .bathtab dd.txt2,
#selectplan .bathtab dd.txt3,
#selectplan .bathtab dd.txt4{
    width: 35%;
    font-size: 12rem;
    line-height: 18rem;
    letter-spacing: -0.25rem;
}
#selectplan .bathtab dd.txt{
    margin: -3px 0 10px 0;
}
#selectplan .bathtab dd.txt2{
    margin: 22px 0 10px 0;
}
#selectplan .bathtab dd.txt3{
    margin: 15px 0 10px 0;
}
#selectplan .bathtab dd.txt4{
    margin: 35px 0 10px 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .bathtab dd{
    width: 100% !important;
    margin: 0 0 5px 0 !important;
    padding: 0;
}
#selectplan .bathtab dd.txt{
    width: 100% !important;
    margin: 0 0 15px 0 !important;
}
}

#selectplan .bathtab dd.note{
    margin: 0  !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .bathtab dd.note{
        margin: 20px 0 0 0 !important;
        line-height: 14rem;
    }
}

#selectplan .cabinet h5 + span.note{
    margin: -8px 0 14px 0;
    display: block;
    width: 100%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .cabinet h5 + span.note{
        text-align: right;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .cabinet dl{
    width: 439px;
}
}

#selectplan .handle .ic{
    width: 36px;
    height: 36px;
    position: absolute;
    top: -20px;
    right: -20px;
}
#selectplan .cabinet .ic,
#selectplan .powerhandle .ic{
    width: 36px;
    height: 36px;
    margin: -11px 0 0 5px;
    right: inherit;
    position: relative;
}
#selectplan .tap .standard .ic{
    width: 36px;
    height: 36px;
    margin: -28px 0 0 4px;
    right: inherit;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .cabinet .ic,
#selectplan .powerhandle .ic,
#selectplan .handle .ic,
#selectplan .tap .standard .ic{
    width: 38px;
    height: 38px;
    margin: -11px 0 0 4px;
}
#selectplan.win .cabinet .ic,
#selectplan.win .powerhandle .ic,
#selectplan.win .handle .ic,
#selectplan.win .tap .standard .ic{
    margin: -14px 0 0 4px;
}
}

#selectplan .powerhandle figure{
    width: 80%;
    margin: 0 auto 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .powerhandle figure{
    width: 244px;
    height: auto;
    margin: 0;
}
}

#selectplan .powerhandle dl{
    width: 258px;
    margin: auto;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .powerhandle dl{
    width: 258px;
}
#selectplan .powerhandle dl:last-child{
    width: 258px;
    margin: 0 150px 0 20px;
}
}

#selectplan .powerhandle dd.ph{
    width: 80%;
    margin: 0 auto;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .powerhandle dd.ph{
    width: 100%;
    margin: 10px auto;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap{
    /*align-items: flex-start;*/
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap dl{
    width: 480px;
}
}



#selectplan .tap .standard .ic1{
    width: 60px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 5px;
    right: 2vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .tap .standard .ic1{
        width: 65px;
        height: 18px;
        margin: auto;
        position: absolute;
        top: 10px;
        right: inherit;
        left: 110px;
    }
}

#selectplan .tap .select .ic2{
    width: 135px;
    height: 18px;
    position: absolute;
    top: 20px;
    right: -20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .ic2{
    top: -37px;
    left: 0;
    right: inherit;
}
}

#selectplan .tap .standard{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard{
    margin: 0 !important;
    padding: 0 !important;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard dt{
    width: 100%;
}
}

#selectplan .tap .standard .ph{
    width: 48%;
    margin: 10px auto 0;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .ph{
    width: 175px;
    margin: 0;
}
}

#selectplan .tap .standard .txt{
    letter-spacing: -.5rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .txt{
    width: 244px;
    margin: 35px 0 0 0;
}
}

#selectplan .tap .standard .txt img{
    width: calc(42vw + 20px);
    margin: 5px 10px 0 0;
    float: left;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .txt img{
    width: 100%;
    margin: 0 0 5px 0;
}
}

#selectplan .tap .standard .sub dl{
    margin: 20px 0 0 0;
    padding: 20px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .sub dl{
    width: 440px;
    margin: 22px 0 0 0;
}
}

#selectplan .tap .standard .sub dd.ph{
    width: 42vw;
    margin: 3px 0 20px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .sub dd.ph{
    width: 158px;
    margin: 9px 0 10px 0;
}
}

#selectplan .tap .standard .sub dd.fig1{
    width: 42vw;
}
#selectplan .tap .standard .sub dd.fig2{
    width: 32vw;
}

@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .tap .standard .sub dd.fig1{
        width: 132px;
    }
    #selectplan .tap .standard .sub dd.fig2{
        width: 100px;
        font-size: 11rem;
        line-height: 16rem;
        letter-spacing: 0;
        text-align: left;
    }
}

#selectplan .tap .standard .sub dd.fig2 img{
    margin: 0px 0 10px 0 !important;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #selectplan .tap .standard .sub dd.fig2 img{
        margin: 0px 0 11px 0 !important;
    }
}

#selectplan .tap .standard .sub dd.txt{
    width: 32vw;
    margin: 0;
    line-height: 22rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .standard .sub dd.txt{
    width: 100%;
    order: 1;
}
}

#selectplan .tap .select{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select{
    margin: 0;
}
}

#selectplan .tap .select>.ph{
    width: 80%;
    margin: 15px auto 6vw;
    padding: 0 0 0 8vw;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select>.ph{
    width: 290px;
    margin: 60px 0 0 0;
    padding: 0;
}
}

#selectplan .tap .select .txt{
    margin: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select>.txt{
    width: 280px;
    position: absolute;
    top: 67px;
    right: 0;
}
}

#selectplan .tap .select .txt img{
    width: calc(48vw + 20px);
    margin: 5px 10px 0 0;
    float: left;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .txt img{
    width: 160px;
    margin: 0;
    position: absolute;
    top: 90px;
    right: 0;
}
}

#selectplan .tap .select .sub dl{
    margin: 20px 0 0 0;
    padding: 20px;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .sub dl{
    width: 438px;
    margin: 33px 0 0 0;
}
}

#selectplan .tap .select .sub dd.ph{
    width: 48vw;
    margin: 6px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .sub dd.ph{
    width: 100%;
    margin: 3px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
}

#selectplan .tap .select .sub dd.ph img{
    margin: 5px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .sub dd.ph img{
    width: 49%;
    margin: 0;
}
}

#selectplan .tap .select .sub dd.txt{
    width: 26vw;
    margin: 7px 0 0 0;
    line-height: 22rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tap .select .sub dd.txt{
    width: 100%;
    margin: 10px 0 0 0;
}
}

#selectplan .tap img{
    width: 100%;
    height: auto;
}


@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .japanese .tt2{
    width: 400px;
    margin: 5px 0 0 0;
}
}

#selectplan .tatami{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tatami{
    width: 592px;
}
}

#selectplan .tatami figure{
    width: 48%;
    height: 126px;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tatami figure{
    width: 190px;
    height: 190px;
}
}

#selectplan .tatami figure img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#selectplan .tatami figcaption{
    font-size: 10rem;
    line-height: 18rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tatami figcaption{
    font-size: 12rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#selectplan .tatami .thumb li:nth-child(1){
    margin: 0 0 40px 0;
}
}

/*/// オプションプラン　///*/
#optionplan .lead p{
    margin: 40px 0 35px 0;
    line-height: 28rem;
    text-align: center;
}

@media print, screen and (min-width: 768px) {/*PC*/
#optionplan .lead p{
    margin: 40px 0 60px 0;
    font-size: 15rem;
    line-height: 28rem;
    letter-spacing: 1rem;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
#optionplan section{
    position: relative;
    min-height: 2550px;
}
#optionplan section div,
#optionplan section .column,
#optionplan section .main_ph{
    position: absolute;
}
}

#optionplan section h4{
    margin: 60px 0 12px 0;
    padding: 6px 8px 6px 10px;
    font-family: "NewCezannePro-DB";
    font-size: 15rem;
    line-height: 15rem;
    color: #ffffff;
    background-color: #47817f;
}
#optionplan section div:nth-child(1) h4,
#optionplan section div:nth-child(8) h4,
#optionplan section div:nth-child(9) h4{
    margin: 0 0 12px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan section div:nth-child(2) h4{
        width: 100%;
    }
}

#optionplan section h5{
    margin: 0 0 5px 0;
    font-size: 15rem;
    line-height: 18rem;
}

#optionplan section figure{
    margin: 0 0 18px 0;
}

#optionplan section figure.main_ph{
    margin: 60px 0 35px 0;
}

#optionplan section figure img{
    width: 100%;
}

#optionplan section figcaption{
    margin: 3px 0 5px 0;
    font-size: 13rem;
    line-height: 14rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan.win section figcaption{
        margin: 6px 0 5px 0;
    }
}

#optionplan section p{
    margin: -10px 0 25px 0;
    font-size: 12rem;
    line-height: 20rem;
}

#optionplan .column{
    margin: 12px 0 0 0;
    padding: 20px 25px 20px 25px;
    background-color: #ffffff;
    clear: both;
}

#optionplan .column dt{
    font-size: 16rem;
    line-height: 30rem;
}

#optionplan .column .ph img{
    width: 100%;
    height: auto;
}

#optionplan .column .txt{
    margin: 10px 0 0 0;
    font-size: 12rem;
    line-height: 20rem;
}

#optionplan .ecocut{
    margin: 60px 0 0 0;
}

#optionplan .main_ph{
    width: 100%;
}

#optionplan .main_ph img{
    width: 100vw;
    height: 100vw;
    object-fit: cover;
    object-position: 20% 100%;
    margin: 0 -23px;
}

#optionplan .main_ph p{
    margin: 20px 0 0 0;
    font-size: 14rem;
    line-height: 28rem;
}

#optionplan .living_op figure.main img{
    width: 100%;
    height:62vw;
    object-fit: cover; 
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .living_op figure.main img{
        width: 685px;
        height:340px;
    }
}

#optionplan .living_op figure.sub img{
    width: 100%;
    height: 58vw;
    margin: auto;
    display: block;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .living_op figure.sub img{
        width: 320px;
        height: 340px;
    }
}

#optionplan .living_op figure.sub{
    position: relative;
    margin: 0 30px 70px 30px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .living_op figure.sub{
    margin: 0 0 70px 0;
}
}

#optionplan .living_op figcaption{
    
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .living_op figcaption{
        left: 0;
        bottom: -22px;
    }
}

#optionplan .board_op figure{
    margin: 0 0 30px 0;
}

#optionplan .board_op p{
    margin: 15px 0 0 0;
}

@media print, screen and (min-width: 768px) {/*PC*/
#optionplan .living_op{
    width: 100%;
}
#optionplan .living_op figure:nth-child(2){
    width: 685px;
}
#optionplan .living_op figure:nth-child(3){
    width: 320px;
    position: absolute;
    top: 40px;
    right: 0;
}
#optionplan .living_op figure:nth-child(4){
    width: 320px;
    position: absolute;
    bottom: 0;
    right: 0;
}
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .western_op{
        width: 685px;
        top: 380px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    #optionplan .western_op figure{
        width: 320px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .laundry{
        width: 270px;
        height: 254px;
        padding: 12px 25px 0 25px;
        top: 428px;
        right: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .ecocut{
        width: 500px;
        height: 215px;
        padding: 25px 25px 25px 25px;
        top: 700px;
        right: 0;
    }
    #optionplan .ecocut .ph{
        width: 265px;
        margin: 0 20px 0 0;
        float: left;
    }
    #optionplan .ecocut dt{
        width: calc(100% - 265px - 20px);
        margin: 85px 0 5px 0;
        display: block;
        text-align: left;
        float: right;
    }
    #optionplan .ecocut dd.txt{
        display: block;
    }
}

#optionplan .apploach_op{
    width: 34%;
    float: left;
}
#optionplan .apploach_op img{
    width: 100%;
    height: 62vw;
    object-fit: cover;
    object-position: 0% 50%;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .apploach_op{
        width: 150px;
        top: 700px;
        float: inherit;
    }
    #optionplan .apploach_op img{
        width: 100%;
        height: 226px;
        object-position: 50% 50%;
    }
}

#optionplan .cloth_op{
    width: calc(66% - 23px);
    float: right;
}

#optionplan .cloth_op img{
    width: 100%;
    height: 62vw;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .cloth_op{
        width: 260px;
        top: 700px;
        left: 195px;
        float: inherit;
    }
    #optionplan .cloth_op img{
        width: 100%;
        height: 226px;
        object-position: 50% 50%;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .main_ph{
        width: 1050px;
        top: 1060px;
    }
    
    #optionplan .main_ph img{
        width: 100%;
        height: auto;
        object-fit: contain;
        margin: 0;
    }
    
    #optionplan .main_ph p{
        width: 450px;
        margin: 0;
        padding: 25px;
        font-size: 14rem;
        line-height: 32rem;
        letter-spacing: 0;
        text-align: left;
        position: absolute;
        top: 85px;
        right: 0;
        background-color: rgba(255,255,255,0.7);
        font-size: 13rem;
        white-space: nowrap;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .shink_op{
        width: 395px;
        top: 1270px;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .kitchen_op{
        width: 685px;
        top: 1805px;
        left: 0;
    }
    #optionplan .kitchen_op div.w_sink{
        width: 320px;
        /*top: 99px;*/
    }
    #optionplan .kitchen_op div.kirei{
        width: 320px;
        /*top: 99px;*/
        right: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .worktop_op{
        width: 320px;
        top: 1805px;
        right: 0;
    }
}

#optionplan .board_op div h5{
        line-height: 22rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #optionplan .board_op{
        width: 100%;
        top: 2180px;
    }
    
    #optionplan .board_op p{
        margin: 0 0 -5px 0;
    }
    
    #optionplan .board_op figure{
        width: 320px;
        position: absolute;
        top: 120px;
    }
    #optionplan .board_op figure:nth-child(3){
        left: 365px;
    }
    
    #optionplan .board_op div{
        width: 320px;
        height: 226px;
        position: absolute;
        top: 132px;
        right: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        
    }
    
    #optionplan .board_op div h5{
        margin: 50px 0 -10px 0;
    }
}


/*/// ZEH-M　///*/
#zeh article{
    font-family: "TsukuMinPr6N-D";
    letter-spacing: 1rem;
}

#zeh .title::after,
#zeh #reduce .title2::after,
#zeh #life .title2::after{
    content: "image";
    font-size: 10rem;
    line-height: 10rem;
    color: #ffffff;
    position: absolute;
    bottom: 6px;
    right: 10px;
}
#zeh .title::after{
    color: #666666;
    bottom: 12px;
}

#zeh .lead figure img,
#zeh .about h3,
#zeh .about .bels img,
#zeh .insulation h4,
#zeh .saving h4,
#zeh #reduce dt{
    filter: drop-shadow(0 0 15px rgba( 0, 0, 0, 0.20 ));
}
#zeh #life dl{
    filter: drop-shadow(0 0 10px rgba( 0, 0, 0, 0.20 ));
}

#zeh .img_br::after{
    margin: -10rem 4rem 5rem 0;
    line-height: 10rem;
    color: #888888;
}

#zeh .title{
    height: 77vw;
    background-image: url(../img/zeh_img/ph_zeh_sp.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f1f6f5;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title{
        height: 33vw;
        background-image: url(../img/zeh_img/ph_zeh_pc.jpg);
    }
}

#zeh .title h2 img{
    width: 25vw;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title h2 img{
        width: 12vw;
        top: 45%;
        bottom: 55%;
    }
}

#zeh .title p{
    position: absolute;
    bottom: 11vw;
    left: 0;
    right: 0;
    font-family: "TsukuMinPr6N-D";
    font-size: 26rem;
    letter-spacing: 3rem;
    color: #ffffff;
    text-shadow: 0 0 4px #357b2b,0 0 4px #357b2b,0 0 4px #357b2b;
    text-align: center;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title p{
        bottom: 100px;
        font-size: 36rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

#zeh .lead p{
    margin: 30px -5px 0;
    font-size: 13rem;
    line-height: 26rem;
    letter-spacing: 0;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead p{
        width: 100%;
        margin: 30px -5px 90px;
        font-size: 18rem;
        line-height: 36rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead div{
        width: 480px;
    }
}

#zeh .lead h3{
    margin: 50px 0 10px 0;
    font-size: 19rem;
    line-height: 30rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead h3{
        margin: 70px 0 20px 0;
        font-size: 26rem;
        line-height: 44rem;
        text-align: left;
    }
}

#zeh .lead h3 small{
    font-size: 12rem;
    line-height: 20rem;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead h3 small{
        font-size: 14rem;
        line-height: 28rem;
    }
}

#zeh .lead h3 + .note{
    font-size: 11rem;
    line-height: 14rem;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead h3 + .note{
    font-size: 11rem;
    line-height: 16rem;
    }
}

#zeh .lead figure{
    margin: 20px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .lead figure{
        width: 360px;
    }
}

#zeh .lead figure figcaption{
    margin: 10px 0 0 0;
    font-size: 11rem;
    line-height: 14rem;
}

#zeh .about{
    margin: 50px 0 120px 0;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about{
        margin: 0 0 180px;
    }
}

#zeh .about h3{
    margin: 70px auto 0;
    padding: 12px 18px;
    font-size: 21rem;
    color: #ffffff;
    text-align: center;
    background-image: url(../img/zeh_img/bg_tt.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about h3{
        margin: 120px auto 0;
        padding: 20px 60px 18px;
        font-size: 30rem;
    }
}

#zeh .about h4{
    margin: 24px 0 0;
    font-family: "AvenirNextLTPro-Regular";
    font-size: 20rem;
    color: #006934;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about h4{
        margin: 60px 0 0;
        font-size: 40rem;
    }
}

#zeh .about h5{
    margin: 20px -10px;
    font-size: 15rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about h5{
        margin: 40px 0 25px;
        font-size: 20rem;
        line-height: 38rem;
    }
}

#zeh .about p{
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about p{
        font-size: 14rem;
        line-height: 28rem;
    }
}

#zeh .about .zeh_concept{
    margin: 15px -10px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about .zeh_concept{
        width: 700px;
        margin: 70px auto 0;
    }
}

#zeh .about .bels{
    width: 100%;
    margin: 0 auto;
    padding: 11vw 0;
    background-image: url(../img/zeh_img/bg_bels_sp.png);
    background-position: center top;
    background-size: auto 110%;
    background-repeat: no-repeat;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .about .bels{
        width: 445px;
        margin: 15px auto;
        padding: 70px 0 50px;
        background-image: url(../img/zeh_img/bg_bels_pc.png);
    }
}

#zeh .about .bels span{
    display: block;
    background: none;
}

#zeh .about .bels img{
    background-color: transparent;
}

#zeh .anchor a{
    margin: 10px auto 22px;
    padding: 6px 0 10px;
    color: #006934;
    text-align: center;
    border: solid 1px #006934;
    background-image: url(../img/zeh_img/ic_down.png);
    background-position: calc(100% - 10px) center;
    background-size: 22px;
    background-repeat: no-repeat;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .anchor a{
        width: 600px;
        padding: 18px 20px 12px 0;
        font-size: 18rem;
        background-position: calc(100% - 20px) center;
        background-size: 28px;
    }
}
#zeh #reduce .anchor a:first-child{
    background-image: url(../img/zeh_img/ic_up.png);
}
#zeh #life .anchor a{
    background-image: url(../img/zeh_img/ic_up.png);
}

#zeh .anchor a strong{
    font-size: 21rem;
    font-weight: normal;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .anchor a strong{
        padding: 0 0 0 8px;
        font-size: 30rem;
        display: inline;
    }
}

#zeh .title2{
    height: 280px;
    margin: 0 -23px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title2{
        width: 100vw;
        height: 320px;
        margin: 0 calc(((100vw - 1050px) /2) * -1);
       
    }
}
#zeh #reduce .title2{
    background-image: url(../img/zeh_img/bg_forest.jpg);
}
#zeh #life .title2{
    background-image: url(../img/zeh_img/bg_chair.jpg);
}

#zeh .title2 h3{
    width: 100%;
    margin: 23px;
    padding: 6px 0 10px;
    text-align: center;
    color: #ffffff;
    border: solid 1px #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title2 h3{
        width: 600px;
        padding: 18px 20px 12px 0;
        font-size: 18rem;
    }
}

#zeh .title2 h3 strong{
    font-size: 21rem;
    font-weight: normal;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .title2 h3 strong{
        padding: 0 0 0 8px;
        font-size: 30rem;
        display: inline;
    }
}

#zeh #reduce section{
    margin: 0 0 90px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce section{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce div:not(.title2):not(.anchor){
        width: 500px;
        margin: 30px 0 0 0px;
    }
}

#zeh #reduce h4{
    margin: 50px 0 0;
    padding: 8px 0;
    font-size: 22rem;
    letter-spacing: 1rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce h4{
        width: 100%;
        padding: 14px 0 12px;
        font-size: 28rem;
        letter-spacing: 2rem;
    }
}
#zeh .insulation h4{
    background-color: rgba( 245, 205, 92, 0.90 );
}
#zeh .saving h4{
    background-color: rgba( 137, 205, 198, 0.90 );
}

#zeh #reduce h5{
    margin: 18px 0 14px;
    font-size: 18rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce h5{
        font-size: 21rem;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce p{
        font-size: 15rem;
        line-height: 30rem;
    }
}

#zeh #reduce figure{
    margin: 35px -10px 60px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure{
        width: 366px;
        margin: 130px 0 0 0;
    }
}

#zeh #reduce figure.compare{
    margin: 35px 0 20px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.compare{
        width: 100%;
        margin: -180px 0 40px 0;
        display: flex;
    }
}

#zeh #reduce figure.compare img{
    margin: 0 0 40px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.compare img{
        width: 300px;
        height: auto;
        margin: 0 30px 0 0;
    }
}

#zeh #reduce figure.room{
    margin: 0 -23px;
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.room{
        width: 680px;
        margin: -290px 350px 30px 0;
    }
}
#zeh #reduce figure.room div{
    overflow-x: scroll;;
    -ms-overflow-style: none;/*IE・Edge*/
    scrollbar-width: none;/*Firefox*/
}
#zeh #reduce figure.room div::-webkit-scrollbar{
    display:none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.room div{
        width: 100% !important;
    }
}

#zeh #reduce figure.room div img{
    width: 700px;
    margin: 0 23px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.room div img{
    width: 100%;
    margin: 0 0;
}
}

#zeh #reduce figure.room span{
    width: 40px;
    height: 40px;
    background-color: #89ccc6;
    border-radius: 3px;
    display: block;
    position: absolute;
    bottom: 45px;
    left: 23px;
    opacity: 0.9;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.room span{
        display: none;
    }
}

#zeh #reduce figure.room span img{
    width: 36px;
    height: 36px;
    margin: 2px;
}

#zeh #reduce figure.room figcaption{
    margin: 10px 23px;
    font-family: "NewCezannePro-M";
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce figure.room figcaption{
        margin: 10px 0;
    }
}

#zeh #reduce dl{
    margin: 28px 0 0 0;
    padding: 20px 20px 16px;
    border: solid 1px #888888;
    background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce dl{
        width: 288px;
        position: relative;
    }
    #zeh .saving dl{
        min-height: 270px;
    }
}

#zeh #reduce dt{
    margin: 0 -20px 12px -20px;
    font-size: 15rem;
}
#zeh .insulation dt{
    padding: 5px 10px 5px 20px;
    background-color: rgba( 245, 205, 92, 0.80 );
}
#zeh .saving dt{
    padding: 5px 10px 5px 18px;
    background-color: rgba( 137, 205, 198, 0.80 );
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce dt{
    padding: 0px 10px 0px 20px !important;
    }
}

#zeh .saving dt b{
    width: 18px;
    height: 20px;
    border-radius: 10px;
    margin: 2px 3px 0 0;
    padding: 0 0 0 1px;
    font-family: "NewCezannePro-M";
    font-size: 16rem;
    line-height: 20rem;
    color: rgba( 255, 255, 255, 0.85 );
    font-style: normal;
    text-align: center;
    background-color: #0098b4;
    background-color: #22a4b3;
    display: block;
    float: left;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .saving dt b{
        margin: 1px 4px 0 0;
    }
}

/* #zeh .saving dt::first-letter{
    margin: 0 2px 0 0;
    font-family: "NewCezannePro-M";
    font-size: 21rem;
    vertical-align: -2rem;
    color: #01a7b6;
} */

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce dt{
        min-height: 50px;
        padding: 2px 12px 0;
        font-size: 17rem;
        line-height: 20rem;
        display: flex;
        align-items: center;
    }
}

#zeh #reduce .txt{
    letter-spacing: 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce .txt{
        margin: 0 0 10px 0;
        font-size: 14rem;
}
}

#zeh #reduce .ph2{
    position: relative;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce .ph1{
        width: 210px;
        margin: 0 0 0 auto;
        display: block;
    }
    #zeh #reduce .ph2{
        width: 230px;
        margin: -60px auto 0 -20px;
        mix-blend-mode: multiply;
        display: block;
    }
}

#zeh #reduce .ph2 span{
    padding: 2px 6px;
    font-family: "NewCezannePro-M";
    font-size: 12rem;
    line-height: 12rem;
    border: solid 1px #888888;
    display: inline-block;
    position: absolute;
    top: 3vw;
    left: 6vw;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce .ph2 span{
        top: 0;
        left: 20px;
    }
}

#zeh #reduce .ph1 img,
#zeh #reduce .ph2 img{
    height: 220px;
    object-fit: cover;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce .ph1 img,
    #zeh #reduce .ph2 img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
}

#zeh #reduce .ph{
    margin: 12px 0 0 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .insulation .ph{
        width: 288px;
        margin: auto !important;
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
    }
    #zeh .saving .ph{
        width: 288px;
        margin: auto !important;
        position: absolute;
        bottom: 16px;
        left: 0;
        right: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .insulation .ph img{
        width: 260px;
        margin: 0 auto 20px;
        display: block;
    }
    #zeh .insulation dl:last-child .ph img{
        margin: 0 auto 40px;
    }
}

#zeh #reduce .logo{
    padding: 15px 25px 0;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #reduce .logo{
        padding: 0 50px 0;
        position: absolute;
        bottom: 60px;
        left: 0;
        right: 0;
    }
}

#zeh .benefit{
    margin: 90px 0 90px 0;
    padding: 23px 23px;
    background-color: #006934;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit{
        width: 986px;
        margin: 80px auto 180px;
        padding: 14px 32px 32px;
    }
}

#zeh .benefit h4{
    padding: 0 0 6px 0;
    font-family: "TsukuMinPr6N-D";
    font-size: 22rem;
    line-height: 34rem;
    font-weight: normal;
    color: #ffffff;
    text-align: center;
    border-bottom: solid 1px rgba( 255, 255, 255, 0.70 );
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit h4{
        width: 880px;
        margin: auto;
        font-size: 24rem;
    }
}

#zeh .benefit button{
    width: 100%;
    display: block;
    font-family: "AvenirNextLTPro-Medium";
    font-size: 12rem;
    color: #ffffff;
    background-size: 20px 16px;
    background-repeat: no-repeat;
    opacity: 0.8;
}
#zeh .benefit button#openAct{
    margin: auto;
    padding: 6px 0 18px 0;
    background-image: url(../img/zeh_img/ic_tri_rev.png);
    background-position: center bottom;
    display: block;
}
#zeh .benefit button#closeAct{
    margin: 12px 0 0 0;
    padding: 18px 0 0 0;
    background-image: url(../img/zeh_img/ic_tri.png);
    background-position: center top;
    display: none;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit button{
        background-size: 16px 12px;
    }
    #zeh .benefit button#openAct{
        padding: 3px 0 12px 0;
    }
    #zeh .benefit button#closeAct{
        padding: 12px 0 0 0;
    }
}


#zeh .benefit div{
    /* height: 0; */
    background-color: #ffffff;
    overflow: hidden;
}

#zeh .benefit dl{
    margin: 32px 22px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit dl{
        margin: 25px 35px 0 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

#zeh .benefit dt{
    height: 100px;
    font-family: "NewCezannePro-DB";
    font-size: 24rem;
    line-height: 29rem;
    text-align: center;
    color: #006934;
    border: solid 4px #006934;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit dt{
        width: 300px;
        height: 100px;
    }
}

#zeh .benefit dt img{
    width: 170px;
    margin: 0 0 6px 0;
}

#zeh .benefit dd{
    margin: 14px 0 40px 0;
    font-family: "NewCezannePro-DB";
    font-size: 19rem;
}
#zeh .benefit .env dd,
#zeh .benefit .tax dd{
    font-size: 18rem;
    line-height: 24rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit dd{
        width: 590px;
        margin: 0;
        font-size: 26rem;
    }
    #zeh .benefit .env dd{
        font-size: 22rem;
        line-height: 28rem;
    }
    #zeh .benefit .tax dd{
        font-size: 22rem;
    }
}

#zeh .benefit dd b{
    font-size: 36rem;
    line-height: 39rem;
}
#zeh .benefit .tax dd b{
    font-size: 32rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit dd b{
        font-size: 44rem;
    }
    #zeh .benefit .tax dd b{
        font-size: 34rem;
    }
}

#zeh .benefit .note{
    margin: 10px 0 0 0;
    display: block;
}
#zeh .benefit div>.note{
    margin: 10px 22px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .benefit div>.note{
        text-align: right;
    }
}

#zeh #life h4{
    margin: 30px auto 24px;
    font-size: 24rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life h4{
        margin: 70px auto 25px;
        font-size: 32rem;
    }
}

#zeh #life section{
    margin: 0 0 90px 0;
}

#zeh #life section>p{
    line-height: 26rem;
    text-align: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life section>p{
        margin: 0 0 60px 0;
        font-size: 14rem;
        line-height: 28rem;
    }
}

#zeh #life dl{
    margin: 23px 0;
    padding: 12px 0 22px;
    position: relative;
    background: linear-gradient(90deg, #fdf3ed 0%, #fce7db 45%, #f8ceb9 100%);
}
#zeh #life dl:nth-of-type(2n){
    background: linear-gradient(90deg, #fdecd7 0%, #fbe1c2 45%, #f9ca92 100%);
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dl{
        min-height: 170px;
        margin: 32px 0;
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

#zeh #life dt{
    width: 50px;
    height: 50px;
    margin: 0 0 6px 22px;
    border-radius: 25px;
    font-size: 35rem;
    line-height: 50rem;
    color: #717171;
    text-align: center;
    background-color: #ffffff;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dt{
        width: 80px;
        height: 80px;
        margin: 0 35px;
        border-radius: 40px;
        font-size: 48rem;
        line-height: 80rem;
    }
}

#zeh #life dd.txt{
    padding: 0 12px;
    font-size: 16rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.txt{
        width: 700px;
        padding: 0 0 10px;
        font-size: 16rem;
    }
}

#zeh #life dd.txt strong{
    min-height: 50px;
    padding: 0 10px 10px;
    font-size: 22rem;
    line-height: 26rem;
    letter-spacing: 0;
    border-bottom: solid 1px #231815;
    display: flex;
    align-items: center;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.txt strong{
        padding: 0;
    }
}

#zeh #life dd.txt p{
    padding: 20px 10px 18px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.txt p{
        padding: 10px 0;
    }
}

#zeh #life dd.txt .note{
    padding: 0 10px;
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.txt .note{
        padding: 0;
    }
}

@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.fig{
        width: 180px;
        text-align: center;
    }
}

#zeh #life dd.fig img{
    width: auto;
    height: 120px;
    position: absolute;
    top: 10px;
    right: 20px;
    mix-blend-mode: multiply;
}
#zeh #life dl:nth-child(1) dd.fig img{
    height: 100px;
    top: 25px;
    right: 10px;
}
#zeh #life dl:nth-child(2) dd.fig img{
    right: 10px;
}
#zeh #life dl:nth-child(5) dd.fig img{
    height: 90px;
    top: 30px;
    right: 30px;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh #life dd.fig img{
        height: 160px;
        position: relative;
        top: inherit !important;
        right: inherit !important;
    }
    #zeh #life dl:nth-child(1) dd.fig img{
        height: 140px;
    }
    #zeh #life dl:nth-child(5) dd.fig img{
        height: 130px;
    }
}

#zeh .refer{
    margin: 80px 23px -50px;
    font-size: 12rem;
    line-height: 18rem;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .refer{
        width: 1050px;
        margin: 50px auto -50px;
    }
}

#zeh .refer dt{
    font-size: 14rem;
}

#zeh .refer dd{
    margin: 8px 0 0 0;
}

#zeh .refer a{
    display: block;
}
@media print, screen and (min-width: 768px) {/*PC*/
    #zeh .refer a{
        display: inline;
    }
}