@charset "shift_jis";

/* CSS Document */


/* ----------------------------------------
　ロード画面
---------------------------------------- */
#splash {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background:#FFF;
  text-align:center;
  color:#fff;
  top:0;
}
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  dotlottie-player{    width:auto; height: auto;}
}
#splash_logo img {
  width:160px;
}


.load_fadein{
    animation-name: load_fadein;
    animation-duration: 1s;
}
@keyframes load_fadein{
    from{
    opacity: 0;
    transform: translatesy(0px);
    }
    to{
    opacity: 1;
    transform: translatey(0);
    }
}

/* =========================================================
reset
========================================================= */
html,body,div,span,applet,object,iframe,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight:normal;
	vertical-align: baseline;
}
html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}
body{
    overflow: hidden;
}
a{text-decoration: none;}
blockquote,q {
	quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
	content: '';
	content: none;
}
input,textarea {
	margin: 0;
	padding: 0;
}
ol,ul {
	list-style: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
	vertical-align: middle;
}
a:focus {
	outline: none;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
/* =========================================================
custom_properties
var(propertie) or var(propertie,substitute)
========================================================= */
body{
	--main-color:#000000;
	--sub-color:#092354;
	--font-small-size:clamp(12px, 3.5vw, 14px);
	--font-middle-size:clamp(16px, 4vw, 18px);
	--font-large-size:clamp(20px, 5.5vw, 24px);
	--font-midashi-size:clamp(36px, 7vw, 40px);
	font-family: "Zen Maru Gothic", serif;
	font-weight: 400;
	font-style: normal;
}
/* =========================================================
base
========================================================= */
h1{
    font-size: clamp(10px, 3vw, 12px);
    z-index: 5;
}
header{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    z-index: 10;
	background: #fff9;
	padding: 10px 0;
    div:first-child{
        width: 250px;
        display: inline-flex;
        align-items: center;
        margin-left: 2%;
        a>img{
            transition: 1.5s;
        }
        
    }
    div:first-child>a>img:hover{
        filter:unset;
    }
    ul{
        display: flex;
        justify-content: space-evenly;
        flex-wrap: nowrap;
        margin-right: 5%;
        margin-left: auto;
        li{
            width: fit-content;
            padding: 0 1em;
            display: inline-flex;
            align-items: center;
            a{
                font-size: var(--font-small-size);
                color: #399D26;
                text-decoration: none;
                text-align: center;
                width: fit-content;
		font-weight: bold;
                span{
                    display: block;
                    font-size: clamp(7px, 2.5vw, 8px);
                }
            }
        }
        li:hover>a{color: #b9ba9a; transition : 0.5s;}
    }
    div:last-child{
        display: block;
        width: 20%;
        a{
	    width: 200px;
            background-color: #399D26;
            border-radius: 30px;
            font-size: var(--font-small-size);
            color: white;
            text-decoration: none;
            text-align: center;
            display: block;
            padding: 0.5em 1em 0.6em 1em;
            line-height: 1.5em;
            box-sizing: border-box;
            margin: 30px auto;
            span{
                display: block;
                font-size: clamp(7px, 2.5vw, 8px);
            }
        }
    }
    div:last-child>a:hover{background: #444; transition : 0.5s;}
}
@media (min-width: 768px){
    .t_header, .h_navi_s, nav.globalMenuSp{
        display: none;
    }
}
/* =========================================================
smartphone header
========================================================= */
@media (max-width: 768px){
    header{display: none;}
    .t_header{
        position: fixed;
        z-index: 10;
        margin: 3%;
        width: 60%;
    }
    .t_header .t_h_logo{
        width: 75%;
        margin: 1% 3%;
    }
    .t_header .t_h_logo a img{
        width:100%;
    }
    /* ----------------------------------------
    　固定ナビ
    ---------------------------------------- */
    .h_navi_s{
        position: fixed;
        right: 3%;
        top: 2%;
        z-index:30;
    }

    /*　ハンバーガーボタン　*/
    .hamburger {
        display : block;
        width : 40px;
        height: 40px;
        cursor: pointer;
        text-align: center;
        background-color: #399d26;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom:5px;
        transition: all 0.3s ease-out;
    }
    .hamburger.active {
        background-color:#fff;
        span{color:#444; background: #444;}
    }
    .hamburger span {
        display : block;
        width   : 20px;
        height  : 2px;
        background : #fff;
        -webkit-transition: 0.3s ease-in-out;
        -moz-transition   : 0.3s ease-in-out;
        transition        : 0.3s ease-in-out;
        margin: 3px 0;
    }

    .g_nav_contact {
        width:40px;
    }
    .g_nav_contact ul li{
        margin-bottom:5px;
    }
    .g_nav_contact ul li a{
        text-align: center;
        background-color:#092354;
        border-radius:3px;
        height:40px;
        display:block;
        padding: 7px 0;
        box-sizing: border-box;
    }
    .g_nav_contact ul li a:hover{
        background-color:#092354;
    }
    .g_nav_contact ul li a img{
        width:25px;
    }
    /* ナビ開いてる時のボタン */
    .hamburger.active span:nth-child(1) {
        -webkit-transform: translate3d(0,.6rem,0) rotate(225deg);
        transform: translate3d(0,5px,0) rotate(225deg);
    }

    .hamburger.active span:nth-child(2) {
        -webkit-transform: translate3d(0,-.4rem,0) rotate(-45deg);
        transform: translate3d(0,-3px,0) rotate(-45deg);
    }

    nav.globalMenuSp {
    position: fixed;
    z-index : 20;
    top  : 0;
    right : 0;
    color: #399D26;
    transform: translateX(100%);
    transition: all 0.6s;
    width: 100%;
    padding:15% 8% 10% 9%;
    box-sizing:border-box;
    background-color:#ffffffe7;
    height:100%;
    }
    .global_nav_logo{
        margin-bottom: 3em;
    }
    .global_nav_logo>img{
        width: 80%;
    }
    .global_nav_in{

    }

    .global_nav_in2{
        margin-top: 4em;
        margin-right: auto;
        margin-left: 0;
        display: block;
        width: 80%;
        p{
            font-size: 3vw;
            span{
                display: block;
            }
        }
        a.a_hgl_inqbox{
            display: block;
            background-color: #399d26;
            color: #ffffff;
            text-align: center;
            font-size: var(--font-small-size);
            width: 100%;
            padding: 1em 0;
            border-radius: 30px;
            font-weight: bold;
            margin: 1em auto;
        }
    }


    nav.globalMenuSp ul {
        padding: 0;
        margin-bottom: 5%;
        margin-top: 10%;
    }

    nav.globalMenuSp ul li {
        list-style-type: none;
        padding: 0;
        width: 100%;
        line-height: 1.5em;
        margin: 2vh auto;
    }
    nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom:0;
    }
    nav.globalMenuSp ul li:hover{
    }

    nav.globalMenuSp ul li a {
        display: block;
        color: #399D26;
        text-decoration: none;
        font-size: 5vw;
        line-height: 2em;
        position: relative;
        padding-left: 1.3em;
        font-weight: bold;
    }

    nav.globalMenuSp ul li a::before {
    position: absolute;
    content: "";
    top: 50%;
    width: 3%;
    height: 1px;
    background-color: #399D26;
    left:0;
    }

    nav.globalMenuSp ul li a>span {
        font-size: 3vw;
        font-family: "Radio Canada Big";
        display: block;
        margin: 0;
        line-height: 1em;
    }

    .gloval_nav_contact{
    }
    .gloval_nav_contact ul{
        width:100% !important;
    }
    .gloval_nav_contact ul li{
        color:#333;
        text-align:center;
        margin-bottom:20px;
    }
    .gloval_nav_contact ul li i{
        margin-right:10px;
    }
    .gloval_nav_contact ul li p{
        font-size:5.5vw;
        margin:0 0 2% 0;
        font-weight:bold;
    }
    .gloval_nav_contact ul li span{
        font-size:3vw;
        line-height:1.5em;
    }
    .gloval_nav_contact ul li a{
        padding:5% 0 5% 0 !important;
        border:1px solid #223f9a;
        font-weight:bold;
        font-size:4vw !important;

    }
    .gloval_nav_contact ul li a::before{
        display:none;
    }
    .gloval_nav_contact ul li a::after{
        display:none;
    }
    .gloval_nav_contact ul li a:hover{
        background-color:#FFF;
        color:#333;
    }


    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
    transform: translateX(0%);
    }
    #gNav_bg .open {
        right: 100px;
    }
    #gNav_bg::before {
        content: "";
        z-index: 19;
        display: block;
        background: #333;
        opacity: 0;
        position: fixed;
        width: 100vw;
        height: 100vh;
        top: 0;
        left: 0;
        pointer-events: none;
        transition: all 0.3s ease;
    }
    #gNav_bg.open:before {
        opacity: 0.5;
        pointer-events: auto;
    }

}/*@media=end*/



footer{
    background: url(/loftpia/katsura_ikejiri/img/f_bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: block;
    background-color: #FAF8F4;
    width: 1100px;
    margin: 5vh auto 0 auto;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.f_menu_wrap{
    display: flex;
    width: 1000px;
    margin: auto;
    padding: 7vh 0 5vh 0;
    > div:first-child{
        display: block;
        width: 70%;
        margin: auto;
        div{
            margin-bottom: 5vh;
            a{
                img{width: 238px;}
            }
        }
        ul{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		width: 95%;
            li{
                a{
                    color: #399D26;
                    font-weight: bold;
                    font-size: var(--font-small-size);
                    text-decoration: unset;
                    line-height: 3em;
                    display: flex;
                    transition : 0.5s;
                    width: fit-content;
                    span{
                        font-size: clamp(7px, 2.5vw, 8px);
                        text-indent: 2em;
                        display: inline-block;
                        color: #b6b6b6;
                    }
                }
                a:hover{
                    color: #b9ba9a;
                    span{color: #b9ba9a;}
                }
            }
        }
    }
    > div:nth-child(2){
        display: block;
        width: 30%;
        margin: 0 auto;
        padding-top: 0vh;
        div:first-child{
            p{
                font-size: clamp(12px, 3.5vw, 14px);
                text-align: center;
		color: #444;
                font-weight: bold;
                span{
			color: #399D26;
			font-weight: bold;
                    display: block;
                    margin-top: 1em;
                }
            }
            a{
                margin: auto;
                display: block;
                width:75%;
                img{
                    min-width: 238px;
                }
            }
        }
        div:nth-child(2){
            a{
		width: 200px;
		background-color: #399D26;
		border-radius: 30px;
		font-size: var(--font-small-size);
		color: white;
		text-decoration: none;
		text-align: center;
		display: block;
		padding: 0.5em 1em 0.6em 1em;
		line-height: 2.5em;
		box-sizing: border-box;
		margin: 10px auto;
                span{
                    display: block;
                    font-size: clamp(7px, 2.5vw, 8px);
                }
            }
            a:hover{background-color: #b9ba9a;}
        }
    }
}
.f_under_wrap{
    min-width: 1000px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-top:1px solid #CCC;
    padding-top: 1em;
    padding-bottom: 1em;
    a{
        font-size: var(--font-small-size);
	color: #399d26;
        font-weight: bold;
        position: relative;
        display: block;
        padding-left: 2em;
        line-height: 1.5em;
        transition : 0.5s;
    }
    a::before{
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        background: url(/loftpia/katsura_ikejiri/img/f_corsor.png) no-repeat 0 0;
        background-size: cover;
        height: 18px;
        width: 18px;
        color: #399d26;
    }
    a:hover{color: #b9ba9a;}
	div img{width: 70%;}
}
/* =========================================================
smartphone footer
========================================================= */
@media (max-width: 768px){
footer{
    width: 90%;
    .f_menu_wrap{
        width: 100%;
        flex-wrap: wrap;
        > div:first-child {
            width: 90%;
            div{
                a{
                    display: block;
                    margin: auto;
                    width: 80%;
                    img{width: 100%;}
                }
            }
            p{
                span{margin-top: 1em;}
            }
            ul{
                width: fit-content;
                margin: auto;
                flex-wrap: wrap;
                li{
                    width: 100%;
                }
            }
        }
        > div:nth-child(2) {
            width: 100%;
            padding-top: 2vh;
        }
    }
    .f_under_wrap{
        min-width: 90%;
        width: 90%;
        flex-wrap: wrap;
        padding-top: 1em;
        padding-bottom: 1em;
        a{    width: 100%;}
        div{
            width: 30%;
            padding-top: 1em;
        }
    }
}
}/*media end*/

.a_inq{
    width: fit-content;
    display: block;
    line-height: 2.5em;
    padding: 0 2em;
    text-align: center;
    margin-right: 0;
    margin-left: auto;
}

.a_more {
    transition: .5s ease-in-out .1s;/*テキストは0.1遅れて色が変わる*/
    border: 2px solid #399D26;
    background: #ffffff;
    color: #399D26;
    height: 2.5em;
    font-weight: bold;
    font-size: 14px;
    border-radius: 30px;
}

.a_more:hover {
    color: #fff;
    background: #399D26;
}

.a_reserve {
    transition: .5s ease-in-out .1s;/*テキストは0.1遅れて色が変わる*/
    border: 1px solid #C10808;
    background: #C10808;
    color: #399D26;
}

.a_reserve:hover {
    background: #399d26;
    border: 1px solid #399d26;
}


/* === slick === */
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}
.slick-prev, .slick-next{
  bottom: -50px!important;
  top: unset!important;
}

.slick-prev, .slick-next {
    width: fit-content;
    height: auto;
}
.slick-prev{right: 150px!important; left: unset!important;}
.slick-next{right: 80px!important;}
.slick-prev:before, .slick-next:before {
    font-family: "Shippori Mincho", serif;
    font-size:var(--font-small-size);
    line-height: 1;
    opacity: .75;
    /* color: white; */
    /* -webkit-font-smoothing: antialiased; */
    -moz-osx-font-smoothing: grayscale;
}
.slick-prev:before {
    content: '< prev';
}
.slick-next:before{
    content: 'next >';
}
/* === slick === */

.pan_wrap{
    width: 80%;
    display: flex;
    flex-wrap: nowrap;
    font-size:var(--font-small-size);
    margin:2em auto 2em 15%;
    >div{
        a{
            color: #111;
        }
        a::after{
            content: '　>　';
        }
    }
}

/* =========================================================
in_pages
========================================================= */
.in_pages{
    background-color: #fff;
    background-image: url(/loftpia/katsura_ikejiri/img/all_bg_on.png);
	color: #444;
    h1{
	position: absolute;
	top: 415px;
	left: auto;
	right: 15%;
	color: #399d26;
	font-weight: normal;
    }
    .main{
        display: flex;
        width: 100%;
        height: 420px;
        position: relative;
        >div:first-child{
            width: 100%;
            padding-top: 0;
            background-color: unset;
            text-align: center;
            height: auto;
            >div{
		display: block;
                color: #FFF;
                width: 100%;
                font-size: clamp(20px, 6vw, 45px);
                font-weight: bold;
                letter-spacing: 0.3em;
                padding: 0px;
                text-align: center;
                margin: auto;
                border: none;
                margin-top: 240px;
            }
            p{
                font-size: clamp(18px, 4vw, 20px);
                line-height: 1em;
                font-weight: bold;
                color: #FFF;
                text-align: center;
                display: block;
                width: 100%;
            }
        }
    }
    .main::before{
	content: "";
	position: absolute;
	top: 140px;
	right: 50%;
	left: 50%;
	transform: translateX(-50%);
	height: 280px;
	width: 70%;
	border-radius: 10px;
	color: white;
	z-index: -1;
    }
    .main::after{
        content: "";
        display: block;
        width: 40%;
        max-width: 550px;
        height: 32vh;
        background-image: url(/loftpia/katsura_ikejiri/img/logo-mark_bg.png);
        background-size: contain;
        background-position: right bottom;
        background-repeat: no-repeat;
        position: absolute;
        bottom: 10%;
        right: 0%;
        z-index: 0;
        opacity: 0.4;
    }
}

section.inq_form_link {
    ul {
        width: 800px;
        margin: 10vh auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        li {
            margin: 0 0 1vh 0;
            width: 48%;
            a {
                display: block;
                width: 100%;
                box-sizing: border-box;
                color: #fff;
                font-size: clamp(18px, 5vw, 20px);
                text-align: center;
                line-height: 3em;
                padding: 0 3em 0 0.5em;
                border: 1px solid #399d26;
                background-color: #399d26;
                position: relative;
                border-radius: 40px;
            }
            a::after {
                content: " →";
                position: absolute;
                top: 0;
                right: 1em;
            }
            a:hover {color: #399D26; background-color: #fff; transition: 0.5s;}
            a:hover::after {color: #399D26; right: 0.5em; transition: 0.5s;}
        }
        li:nth-child(2)>a {
		color: #ffffff;
		border: 1px solid #FF9800;
		background: #FF9800;
        }
        li:nth-child(2)>a:hover {color: #FF9800; background: #fff; border: 1px solid #FF9800; transition: 0.5s;}
        li:nth-child(2)>a:hover::after {color: #FF9800; right: 0.5em; transition: 0.5s;}
    }
}
/* =========================================================
top
========================================================= */
.css_top{

h1{
    position: absolute;
    top: 90vh;
    right: 1em;
    color: #399d26;
    font-weight: normal;
}
section.main {
	position: relative;
	height: 95vh;
	overflow: hidden;
	color: white;
	background:none;
    div:first-child{
		position: absolute;
		top: 35%;
		text-align: left;
		left: 25%;
                line-height: 2em;
		transform: translate(-50%, -50%);
		color: #399d26;
        h2 {
		font-size: clamp(24px, 5vw, 26px);
                padding-bottom: 0;
                font-weight: bold;
                line-height: 1.7em;
        }
        p {
		font-size: var(--font-middle-size);
		font-weight: bold;
        }
    }
	div:last-child{
        position: absolute;
        bottom: 12vh;
        right: 0;
        /* padding-right: 5%; */
        width: 435px;
        height: 140px;
        background-repeat: no-repeat;
        background-image: url(/loftpia/katsura_ikejiri/img/);
		img {
            width: 314px;
            margin: 20px 0 0 60px;
            display: block;
		}
	}
}
section.main::after {
        content: "";
        display: block;
        width: 300px;
        height: 300px;
        background: url(/loftpia/katsura_ikejiri/img/main_sub_img.jpg) no-repeat 0 0;
        background-size: cover;
        background-position: center;
        border-radius: 10px;
        position: absolute;
        bottom: 2em;
        left: 5%;
        z-index: -3;
}

section.main::before {
        content: "";
        display: block;
        width: 55%;
        max-width: none;
        height: 500px;
        background-image: url(/loftpia/katsura_ikejiri/img/main_big_img.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: absolute;
        top: 130px;
        right: 0;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        z-index: 0;
}
section.info_sec {
	width: 1000px;
	background: #399d26;
	margin: 3em auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-evenly;
	color: white;
	height: 60px;
	border-radius: 30px;
	div:first-child {
	        text-align: center;
	        display: inline-block;
	        margin: auto;
	        width: auto;
	}
	ul {
		display: block;
		border-left: none;
		border-right: none;
		padding: 0.5em 1em;
		width: 70%;
		height: 40px;
		margin: auto;
        div{
            width: 100% !important;
            text-align: left !important;
            li {
		        height:auto;
                a {
                    font-size: var(--font-small-size);
                    color: #111;
			font-weight:normal;
                    span {
                        position: relative;
                    }
                }
            }
            li:first-child>a>span {
                padding-right: 3em;
            }
            li:first-child>a>span::after {
                content: "NEW";
                position: absolute;
                right: 0.5em;
                color: red;
                font-size: clamp(10px, 3vw, 12px);
                line-height: 26px;
            }
        }
	}
    >div:last-child{
        text-align: center;
        display: inline-block;
        margin: auto;
        width: auto;
        font-size: var(--font-small-size);
        text-align: center;
		a {
		    color: white;
		    line-height: 1.7em;
		    border-bottom: none;
		    padding: 0.2em 1.5em;
		    transition: 0.5s;
		    border: 1px solid white;
		    border-radius: 30px;
		    font-weight: bold;
		}
        a:hover {
		border-bottom: unset;
		background: white;
		color: #399d26;
		border: 1px solid white;
		}
    }
}

.section_title{
        font-size: 14px;
        font-weight: bold;
        color: #4C4C4C;
        margin: auto;
        margin-bottom: 30px;
        letter-spacing: 0.2em;
	display: block;
	width: fit-content;
}

section.concept_sec {
	width: 100%;
	height: 100vh;
	margin: 15vh auto;
	color: #399D26;
	text-align: center;
	display: block;
	position: relative;
	div:first-child{width: auto;}
        p {
                font-size: var(--font-middle-size);
		line-height:300%;
		font-weight: bold;
        }
}
section.concept_sec::before {
	content: "";
	position: absolute;
	background: url(/loftpia/katsura_ikejiri/img/con_bg_left.png);
	background-repeat: no-repeat;
        background-position: bottom right;
        background-size: cover;
        top: 50px;
        left: 0;
        width: 34%;
        height: 600px;
}
section.concept_sec::after {
	content: "";
	position: absolute;
	background: url(/loftpia/katsura_ikejiri/img/con_bg_right.png);
	background-repeat: no-repeat;
        background-position: bottom left;
        background-size: cover;
        top: 50px;
        right: 0;
        width: 34%;
        height: 600px;
}




section.plan_sec {
    width: 100%;
    margin: 10vh auto 0vh auto;
    padding: 5vh 0;
    position: relative;
        background: #FAF8F4;
    display: block;
	div.plan_intro {
		display: block;
		width: 480px;
		margin: 5em 50% 5em auto;
		padding-bottom: 16em;
		text-align: center;
		position: relative;
		z-index: 1;
	        img{
	            width: 494px;
	            margin-right: 4em;
	        }
		h2{
			font-size: var(--font-middle-size);
			color: #399D26;
			line-height: 2em;
			font-weight: bold;
			text-align: center;
		}
		p {
			font-size: 14px;
			line-height: 2em;
			margin-top: 1em;
		}
		a {
			margin: 3em auto auto auto;
		}


	}
	div.plan_intro::after {
            content: "";
            display: block;
            background-image: url(/loftpia/katsura_ikejiri/img/plan_bg_point.png);
            background-size: contain;
            background-position: left;
            background-repeat: no-repeat;
            width: 420px;
            height: 355px;
            position: absolute;
            bottom: -1em;
            left: 70px;
            z-index: -1;
	}
}

section.plan_sec::before {
        content: "";
        display: block;
        background-image: url(/loftpia/katsura_ikejiri/img/plan_img.png);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        width: 540px;
        height: 620px;
        position: absolute;
        top: 80px;
        left: 50%;
}





section.modelhouse_sec {
    width: 100%;
    margin: 0vh auto 10vh auto;
    padding: 5vh 0;
    position: relative;
        background: #FAF8F4;
    display: block;
	div.modelhouse_intro {
		display: block;
		width: 480px;
		margin: 5em auto 5em 50%;
		padding-bottom: 16em;
		text-align: center;
		position: relative;
		z-index: 1;
	        img{
	            width: 494px;
	            margin-right: 4em;
	        }
		h2{
			font-size: var(--font-middle-size);
			color: #399D26;
			line-height: 2em;
			font-weight: bold;
			text-align: center;
		}
		p {
			font-size: 14px;
			line-height: 2em;
			margin-top: 1em;
		}
		a {
			margin: 3em auto auto auto;
		}


	}

}
section.modelhouse_sec::before {
	content: "";
        display: block;
        background-image: url(/loftpia/katsura_ikejiri/img/modelhouse_img.png);
        background-size: contain;
        background-position: left;
        background-repeat: no-repeat;
        width: 545px;
        height: 591px;
        position: absolute;
        top: 5em;
        left: auto;
        right: 50%;
        z-index: 1;
}


section.modelhouse_sec::after {content: unset;}













section.location_sec {
    width: 100%;
    margin: 10vh auto;
    padding: 5vh 0;
    position: relative;
    display: block;
	div{margin-bottom: 30px;}
	div.slide-animation {
	position: absolute;
	z-index: -1;
	top: 140px;
	display: block;
	margin: auto;
	width: 100%;
	ul.slide-contents {
		width: max-content;
		height: 300px;
		margin: auto;
	    li {width: 100%; margin-right: 1.5%;
	        img {
			max-width: unset;
			height: 300px;
	        }
	    }
	}
	}
	h2 {
		font-size: var(--font-middle-size);
		color: #399D26;
		line-height: 2em;
		font-weight: bold;
		text-align: center;
	}

	ul{
            width: 630px;
            margin: 300px auto 0 auto;
		li{
                width: 45%;
			span{
	                    width: fit-content;
	                    background-color: #399D26;
	                    border-radius: 20px;
	                    font-size: 12px;
	                    font-weight: bold;
	                    color: white;
	                    text-decoration: none;
	                    text-align: center;
	                    display: block;
	                    padding: 0.2em 1em;
	                    line-height: 1.5em;
	                    box-sizing: border-box;
	                    margin: 0 auto 10px 0;
			}
			h3{
				color: #399D26;
				font-size: 16px;
				font-weight: bold;
			}

			p{
				font-size: 14px;
				line-height: 2em;
				margin-top: 1em;
			}
			a{
	                    color: #399D26;
	                    font-size: var(--font-small-size);
	                    margin: 1em 0 0 auto;
	                    text-decoration: underline;
	                    text-align: right;
	                    display: block;
			}
			a:hover{
	                    color: #333;
			}
		}

	}

}

section.location_sec::after {
    content: "";
    display: block;
    background-image: url(/loftpia/katsura_ikejiri/img/location_side_bg.png);
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    width: 353px;
    height: 265px;
    position: absolute;
        bottom: -15vh;
        left: 5%;
    z-index: -1;
}





section.freeplan_sec {
	display: block;
	margin: 10vh 0 20vh 0;
	position: relative;
	width: 100%;
	text-align: center;
	padding: 0;
    h2 {
	font-size: var(--font-middle-size);
	color: #399D26;
	line-height: 2em;
	font-weight: bold;
	text-align: center;
    }
    p {
        font-size: var(--font-small-size);
        margin: 2em auto;
        line-height: 2em;
    }
    div.freeplan_img {
            position: relative;
            width: 850px;
            margin: 3em auto;
        img {
                border-radius: 20px;
        }
    }
    div.freeplan_img::before {
            content: "";
            display: block;
            background-image: url(/loftpia/katsura_ikejiri/img/freeplan_accent_img.png);
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            width: 368px;
            height: 353px;
            position: absolute;
            top: 165px;
            right: 0%;
            z-index: 1;
	}
}
section.freeplan_sec::before {content: unset;}




section.access_sec {
	width: 1100px;
	margin: 10vh auto 20vh auto;
	div{
	display: block;
	    h2 {
		font-size: var(--font-middle-size);
		color: #399D26;
		line-height: 2em;
		font-weight: bold;
		text-align: center;
	    }
	    p {
	        font-size: var(--font-small-size);
	        margin: 2em auto;
	        line-height: 2em;
		text-align: center;
	    }
	}


	div.acc_contents {
		width: 800px;
		display: block;
		position: relative;
		margin: 3em auto;
			div:nth-child(1) {
	                width: 100%;
	                padding-top: 7vh;
				h3 {
					font-size: var(--font-middle-size);
					font-weight:bold;
					margin-bottom: 0em;
					color: #F4A021;
					line-height: 2.5em;
					span {
					    font-size: clamp(20px, 5.5vw, 30px);
					}
				}
				p {
					font-size: var(--font-small-size);
					text-align: left;
                    			margin: 2em 0;
				}
	        	}
			ul{
				display: flex;
				flex-wrap: nowrap;
				justify-content: left;
				gap: 1em;
				li{}
			}
	}

	div.acc_contents::before {
		content: "";
            display: block;
            background-image: url(/loftpia/katsura_ikejiri/img/access_accent_img.png);
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            width: 402px;
            height: 354px;
            position: absolute;
            bottom: -7em;
            right: 0%;
            z-index: 1;
	}


	div.googlemap_contents {
		margin: auto;
		display: block;
		width: 800px;
		iframe {
			width: 100%;
			height: 400px;
			border-radius: 10px;
		}
		p {
			width: 100%;
			padding: 0em;
			font-size: 12px;
			box-sizing: border-box;
		}
	}
}
}

/* =========================================================
modelhouse
========================================================= */

.css_modelhouse{
    section.main::before{
        background: url(/loftpia/katsura_ikejiri/img/mo_main_bg.jpg);
        background-size: cover;
        background-position: bottom;
    }
    section.introduction::after {
        content: "";
        display: block;
        width: 300px;
        height: 282px;
        background-image: url(/loftpia/kamikatsura_maekawa/img/mo_wloftimg.png);
        background-size: contain;
        position: absolute;
        top: 180px;
        right: 37%;
        z-index: -1;
    }
    h2{
	font-size: clamp(20px, 5.5vw, 22px);
	margin-bottom: 2em;
        font-weight: bold;
    span{
        display: block;
        font-size: var(--font-small-size);
        color: #399d26;
        font-weight: bold;
        font-family: "Radio Canada Big";
        margin-bottom: 0.5em;
        }
    }
    section.introduction {
        width: 1100px;
        margin: 10vh auto 20vh auto;
        text-align: center;
        position: relative;
        h2{
            font-size: 40px;
            padding-bottom: 380px;
        }
        p {
            font-size: var(--font-small-size);
	width: 100%;
        }
        ul {
            margin: 7vh 0 0 auto;
            display: flex;
            justify-content: space-evenly;
            li {
                margin: 0 0 1vh 0;
                a {
                    display: block;
                    width: fit-content;
                    color: #399d26;
                    font-weight: bold;
                    line-height: 2em;
                    padding: 0 3em 0 0.5em;
                    border-bottom: 1px solid #399d26;
                    position: relative;
                }
                a:hover {color: #b9ba9a; border-bottom: 1px solid #b9ba9a; transition: 0.5s;}
                a::after {
                    content: " →";
                    position: absolute;
                    top: 0;
                    right: 0.5em;
                }
                a:hover::after {color: #b9ba9a; right: 0em; transition: 0.5s;}
            }
        }
    }

    section.model_plan_access {
        width: 1100px;
        margin: 10vh auto 20vh auto;
        text-align: center;
        ul {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            text-align: left;
            li {
                width: 48%;
                img {
                    display: block;
                    margin: 0 auto;
                }
                img:nth-child(2) {
                    background: #FFF;
                    border-radius: 5px;
                    padding: 10px;
                }
                h3 {
                    font-size: clamp(20px, 5.5vw, 22px);
                    margin: 1em auto;
                    color: #444;
                }
                h4 {
                    font-size: var(--font-middle-size);
                    line-height: 3em;
                    margin-top: 1.5em;
                }
                p {
                    font-size: var(--font-middle-size);
                }
                iframe {
                    width: 100%;
                    height: 50vh;
                }
            }
        }
    }

    section.model_pick_list {
        width: 1100px;
        margin: 10vh auto 20vh auto;
        text-align: center;
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 23%;
                img {
			border-radius: 15px;
                }
                div {
                    span {
                        color: #399d26;
                        font-size: clamp(10px, 3vw, 10px);
                        font-family: "Radio Canada Big";
                        font-weight: bold;
                    }
                    h3 {
                        font-size: var(--font-middle-size);
                        margin-bottom: 5vh;
                    }
                }
            }
        }
    }
    section.model_vr, section.model_roomtour{
        width: 1100px;
        margin: 10vh auto 10vh auto;
        text-align: center;
        iframe{
		width: 80%;
		height: 500px;
		border-radius: 20px;
        }
    }
}


/* =========================================================
location
========================================================= */

.css_location{
    section.main::before{
        background: url(/loftpia/katsura_ikejiri/img/lo_main_bg.jpg);
        background-size: cover;
        background-position: bottom;
    }
    section.introduction {
        width: 1000px;
        overflow: hidden;
        margin: 15vh auto;
        div {
            position: relative;
            text-align: center;
            h2 {
		font-size: clamp(22px, 7vw, 24px);
                color: #399D26;
                padding-top: 165px;
                padding-bottom: 80px;
                font-weight: bold;
            }
            p {
                font-size: var(--font-small-size);
                line-height: 3em;
                font-weight: bold;
            }
            div.slide-animation {
                position: absolute;
                z-index: -1;
                top: 0;
                ul.slide-contents {
                    li {
                        img {
                            max-width: unset;
                        }
                    }
                }
            }
        }
        div::before {
		content: "";
		display: block;
		background-image: url(/loftpia/katsura_ikejiri/img/location_side_bg.png);
		background-size: contain;
		background-position: left;
		background-repeat: no-repeat;
		width: 341px;
		height: 227px;
		position: absolute;
		top: -47px;
		left: 36%;
		z-index: 1;
	}
    }
    section.loc_main_list {
        width: 90%;
        margin: 15vh auto;
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 1000px;
            margin: auto;
            li {
                width: 100%;
                display: flex;
                margin-bottom: 1.5em;
                img {
			width: 45%;
			border-radius: 20px;
                }
                div {
                    width: 48%;
                    position: relative;
                    background: unset;
                    margin: auto;
                    h3 {
                        font-size: var(--font-middle-size);
			color: #399d26;
                    }
                    p {
                        font-size: var(--font-small-size);
                        margin-top: 0.5em;
                        line-height: 2em;
                    }
                }
            }
        }
    }
    section.loc_sub_list {
        width: 1100px;
        margin: 15vh auto 20vh auto;
        h2{
        font-size: clamp(20px, 5.5vw, 30px);
        margin-bottom: 2em;
        text-align: center;
        span{
            display: block;
            color: #399d26;
            font-size: clamp(10px, 3vw, 14px);
            font-weight: bold;
            margin-bottom: 0.5em;
            }
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: 23%;
                margin-bottom: 6vh;
                img {
                }
                div {
                    span {
                        color: #399d26;
                        font-weight: bold;
                        font-size: 10px;
                    }
                    h3 {
                        font-size: clamp(14px, 4vw, 16px);
                        margin-bottom: 1em;
                    }
                    p {
                        font-size: var(--font-small-size);
                    }
                }
            }
        }
        div.loc_line_map {
            width: 1000px;
            margin: 10vh auto auto auto;
            div:first-child{
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-around;
                h2 {
                    color: #399d26;
                    font-size: clamp(20px, 5.5vw, 22px);
                    padding:0;
                    span{
                        color: #399d26;
                        font-size: clamp(34px, 6.5vw, 36px);
                        display: inline-block;
                    }
                }
                div {
                    h3 {
                    }
                    p {
                        font-size: var(--font-middle-size);
                        line-height: 2em;
                        text-align: left;
                        span{
                            color: #399d26;
                        }
                    }
                }
                img {
                }
                p {
                }
            }
            div:last-child>p{text-align: center;}
        }
    }
    section.loc_map {
        width: 1000px;
        margin: 15vh auto 20vh auto;
        h2{
        font-size: clamp(20px, 5.5vw, 22px);
        margin-bottom: 2em;
        span{
            color: #399d26;
            font-size: clamp(10px, 3vw, 16px);
            font-weight: bold;
            display: block;
            margin-bottom: 0.5em;
            }
        }
        div {
            img {
            }
        }
        p {
            margin: 1em auto;
        }
    }
}


/* =========================================================
plan
========================================================= */

.css_plan{
    section.main::before{
        background: url(/loftpia/katsura_ikejiri/img/pl_main_bg.jpg);
        background-size: cover;
        background-position: bottom;
    }
    section.introduction {
        width: 100%;
        overflow: hidden;
        margin: 15vh auto;
        position: relative;
        div {
            text-align: center;
            img{}
            h3 {
                font-size: 30px;
                color: #399d26;
                position: relative;
                font-weight: bold;
                padding-bottom: 300px;
		position: relative;
                span {
                    font-size:  clamp(58px, 9vw, 60px);
                }
            }
	        h3::after {
	            content: "";
	            display: block;
	            background-image: url(/loftpia/katsura_ikejiri/img/plan_bg_point.png);
	            background-size: contain;
	            background-repeat: no-repeat;
			width: 400px;
			height: 340px;
			position: absolute;
			top: 2em;
			left: 50%;
			transform: translate(-50%);
	            z-index: 2;
	        }
            h4{
                font-size:  clamp(20px, 7vw, 34px);
                line-height: 3em;
                span{
                    margin-right: 1em;
                    font-size: clamp(14px, 4vw, 18px);
                }
            }
		>a {
                display: inline-block;
                background-color: #ffffff;
                border: 1px solid #bbb;
                border-radius: 5px;
                padding: 0.4em 1em;
                line-height: 1em;
                color: #333;
                width: 9em;
                font-size: 20px;
                margin-top: 50px;
		}
            p{
                width: 1100px;
                margin: auto;
            }
            ul.circle_catch {
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-around;
                width: fit-content;
                margin: auto;
                >li {
                    align-items: center;
                    display: inline-grid;
                    font-size: clamp(18px, 5vw, 20px);
                    color: #399d26;
                    border-radius: 50%;
                    border: 2px solid #399d26;
                    height: 9em;
                    width: 9em;
                    text-align: center;
                    margin: 1em;
                    >span {
                        font-size:  clamp(26px, 5.5vw, 27px);
                        display: contents;
                    }
                }
            }
            ul.plan_list {
                display: flex;
                flex-wrap: wrap;
                width: 1100px;
                margin: 5vh auto 0 auto;
                border-bottom: 1px solid #bbb;
                border-top: 1px solid #bbb;
                >li {
                    align-items: center;
                    display: inline-flex;
                    justify-content: space-between;
                    font-size: clamp(15px, 4vw, 18px);
                    letter-spacing: 1px;
                    width: 46%;
                    text-align: left;
                    padding: 0.5em 1em;
                    border-bottom: 1px solid #bbb;
                    >span {
                        display: inline-block;
                        background-color: #bbb;
                        border: 1px solid #bbb;
                        border-radius: 5px;
                        padding: 0.4em 1em;
                        line-height: 1em;
                        text-align: center;
                        color: #fff;
                        width: 6em;
                    }
                    >a {
                        display: inline-block;
                        background-color: #399d26;
                        border: 1px solid #399d26;
                        border-radius: 5px;
                        padding: 0.4em 1em;
                        line-height: 1em;
                        text-align: center;
                        color: #FFF;
                        width: 6em;
                    }
                    >a:hover {
			background-color: #fff;
                        border: 1px solid #399D26;
                        color: #399D26;
                        transition: 0.5s;
                    }
                }
                >li:last-child {
                    border-bottom: none;
                }
            }
        }
        div.slide-animation {
            position: absolute;
            z-index: -1;
            top: 0;
            >ul.slide-contents {
                >li {
                    >img {
                        max-width: unset;
                    }
                }
            }
        }
    }

    section.recomended {
        width: 1000px;
        margin: 15vh auto 20vh auto;
        position: relative;
        div {
            position: relative;
            text-align: center;
            span {
                display: block;
                color: #399d26;
                font-size: clamp(10px, 3vw, 14px);
                font-weight: bold;
                font-family: "Radio Canada Big";
                margin-bottom: 0.5em;
            }
            h3 {
                font-size: clamp(20px, 5.5vw, 30px);
                margin: 1em auto;
            }
            p {
                font-size: var(--font-middle-size);
                width: 100%;
            }
        }
        div:before {
            content: none;
	}
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            width: fit-content;
            margin: 10vh auto;
            li {
                width: 30%;
                margin-bottom: 2em;
                a {
                    position: relative;
                    display: block;
                    img {
			width: 300px;
                        height: 200px;
                        object-fit: cover;
                        border-radius: 10px;
                    }
                }
                a::after {
                    content: "";
                    position: absolute;
                    background: url(/loftpia/katsura_ikejiri/img/pl_roupe_icon.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    bottom: -12px;
                    right: -12px;
                    width: 30px;
                    height: 30px;
                }
                a:hover::after {filter: invert(1); transition: 0.5s;}
                span {
                    display: block;
                    color: #399d26;
                    font-size: clamp(10px, 3vw, 14px);
                    font-weight: bold;
                    font-family: "Radio Canada Big";
                    margin: 1em auto;
                }
                h4 {
                    font-size: clamp(14px, 4vw, 16px);
                    margin-bottom: 1em;
                }
            }
        }
    }
}


/* =========================================================
equipment
========================================================= */

.css_equipment{
    section.main::before{
        background: url(/loftpia/katsura_ikejiri/img/eq_main_bg.jpg);
        background-size: cover;
        background-position: center;
    }
    
    section.introduction {
        width: 1000px;
        margin: 15vh auto 20vh auto;
        position: relative;
        h2{
        font-size: clamp(34px, 6.5vw, 36px);
        margin-bottom: 2em;
        text-align: center;
        span{
            display: block;
            color: #399d26;
            font-size: clamp(10px, 3vw, 14px);
            font-weight: bold;
            font-family: "Radio Canada Big";
            margin-bottom: 0.5em;
            }
        }
        p {
            text-align: center;
        }
        ul {
            margin: 7vh auto 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 650px;
            li {
                margin: 0 0 1vh 0;
                width: 30%;
                a {
			display: block;
			width: fit-content;
			color: #399d26;
			font-size: var(--font-small-size);
			line-height: 2em;
			padding: 0 3em 0 0.5em;
			border-bottom: 1px solid #399d26;
			position: relative;
			font-weight: bold;
                }
                a:hover {color: #b9ba9a; border-bottom: 1px solid #b9ba9a; transition: 0.5s;}
                a::after {
                    content: " →";
                    position: absolute;
                    top: 0;
                    right: 0.5em;
                }
                a:hover::after {color: #b9ba9a; right: 0em; transition: 0.5s;}
            }
        }
        div{position: absolute;}
        div.intro_img1{
            top: 0;
            right: 10%;
            z-index: 5;
        }
        div.intro_img2{
            top: 5em;
            right: 18%;
            z-index: 3;
        }
        div.intro_img3{
            top: 2em;
            right: -5%;
            z-index: 0;
        }
    }
    section.introduction::after{
        content: "";
        position: absolute;
        /* background-size: contain; */
        background: url(/loftpia/katsura_ikejiri/img/eq_sketch.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: -110px;
        left: 55%;
        width: 700px;
        height: 700px;
        z-index: 1;
        opacity: 0.2;
    }
    section.equip_item {
        width: 1000px;
        margin: 15vh auto 20vh auto;
        ul {
            display: flex;
            flex-wrap: wrap;
            li {
                span {
                    font-size: clamp(14px, 3vw, 16px);
                    color: #399d26;
                    font-weight: bold;
                    font-family: "Radio Canada Big";
                }
                h3 {
                    font-size: clamp(24px, 5vw, 30px);
                    margin: 1em auto 2em auto;
                }
                p {
                    font-size: clamp(18px, 5vw, 22px);
                    line-height: 1.7em;
                }
                a.catalog_dl_link {
		display: block;
                    width: fit-content;
                    box-sizing: border-box;
                    font-size: var(--font-small-size);
                    text-align: center;
                    line-height: 3em;
                    padding: 0 3em 0 5em;
                    border: 1px solid #399D26;
                    position: absolute;
                    bottom: 0;
                    color: #FFF;
                    background-color: #399D26;
                    border-radius: 30px;
                }
                a.catalog_dl_link::before {
			content: "";
                    position: absolute;
                    background: url(/loftpia/katsura_ikejiri/img/pdf_icon.png);
                    background-repeat: no-repeat;
                    background-size: contain;
                    top: 0.8em;
                    left: 2em;
                    width: 1.5em;
                    height: 1.5em;
                    filter: invert(1);
                }
                a.catalog_dl_link:hover::before {filter: invert(0);}
                a.catalog_dl_link:hover {color: #399D26; background-color: #fff; transition: 0.5s;}
            }
            li:first-child {
                width: 60%;
                margin-right: 5%;
                img{width:100%; border-radius: 20px;}
            }
            li:last-child {
                position: relative;
                padding: 0 1em;
                width: 35%;
                box-sizing: border-box;
            }
        }
        h4 {
            font-size: var(--font-middle-size);
            font-weight: bold;
            line-height: 3em;
            margin-top: 2em;
		color: #399d26;
        }
        p {
            font-size: clamp(14px, 4vw, 16px);
            line-height: 1.7em;
        }
    }
    .equip_item:nth-child(odd) >ul{
        flex-direction: row-reverse;
        li:first-child {
                margin-right: 0%;
        }
        li:last-child {
                margin-right: 5%;
        }
    }
}



/* =========================================================
overview
========================================================= */

.css_overview{
    section.main::before{
        background: url(/loftpia/katsura_ikejiri/img/ov_main_bg.jpg);
        background-size: cover;
        background-position: center;
    }
    section.overview_date{
        width: 1000px;
        margin: 10vh auto 20vh auto;
        h2{
		font-size: clamp(20px, 5.5vw, 30px);
		display: block;
		width: 850px;
		margin: auto;
		font-weight: bold;
		color: #399d26;
            span{
                color: #333;
                font-size: clamp(10px, 3vw, 14px);
                font-weight: bold;
                font-family: "Radio Canada Big";
                display: block;
                margin-bottom: 0.5em;
                }
        }
        table{
            width: 850px;
            font-size: clamp(14px, 4vw, 16px);
            margin: 4vh auto;
            border-bottom: #bcbcbc 1px solid;
            tbody{
                tr{
                    th{
                        border-top: #bcbcbc 1px solid;
                        padding: 2em 0;
                        width: 25%;
                        text-indent: 1em;
                        color: #399d26;
                    }
                    td{
                        border-top: #bcbcbc 1px solid;
                        padding: 2em 0;
                        width: 75%;
                    }
                }
            }
        }
        p{
            width: 850px;
            margin: 0 auto 20vh auto;
        }
        h3{
            font-size: clamp(20px, 5.5vw, 30px);
            display: block;
            width: 850px;
            margin: auto;
		font-weight: bold;
            color: #399d26;
        }

    }
    section.shop_date{
        width: 850px;
        margin: 10vh auto 20vh auto;
        h2{
		font-size: clamp(20px, 5.5vw, 30px);
		display: block;
		width: 850px;
		margin: auto;
		font-weight: bold;
		color: #399d26;
                margin-bottom: 1em;
            span{
                display: block;
                color: #333;
                font-size: clamp(10px, 3vw, 14px);
                font-weight: bold;
                font-family: "Radio Canada Big";
                margin-bottom: 0.5em;
                }
        }
        >div{
            width: 100%;
            margin: 0 auto 10vh auto;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            >img{width: 50%;}
            >div{
                width: 45%;
                img{}
                h3{font-size: var(--font-middle-size); line-height: 3em;}
                p{font-size: var(--font-small-size); line-height: 2em;}
            }
        }
        >h3{
            font-size: clamp(20px, 5.5vw, 22px);
            width: 100%;
            margin: auto;
            line-height: 3em;
            display: block;
        }
        iframe{
            width: 100%;
            height: 400px;
            margin: auto;
            display: block;
        }
        >a{
            width: 100%;
            display: block;
            font-size: var(--font-small-size);
            text-align: center;
            line-height: 3em;
            text-decoration: none;
        }
    }
}
.fix_inq{
    display: none;
}
/* =========================================================
smartphone
========================================================= */
@media (max-width: 768px){
h1 {
    color: #626262;
    font-weight: normal;
}
.fix_inq{
    display: block;
    a{
        position: fixed;
        bottom: 1%;
        right: 2%;
        display: block;
        background-color: #399d26;
        color: white;
        line-height: 2em;
        padding: 0.5em 3em;
        font-size: 3.5vw;
    }
}
.css_top{
    h1 {
        bottom: 20vh;
        top: 77vh;
        right: 0.5em;
        font-weight: normal;
    }
    section.main {
        height: 80vh;
        div:first-child {
		top: 40vh;
		left: 50%;
		width: 80%;
            h2 {
                font-size: clamp(16px, 4.5vw, 26px);
                padding-bottom: 1em;
            }
            p>br{display: none;}
        }
        div:last-child {
		display: none;
/*
            bottom: 5vh;
            right: -1%;
            width: 70%;
            height: 10vh;
            background-size: cover;
            left: unset;
            text-align: right;
*/
            img {
                width: 70%;
                object-fit: contain;
                object-position: right;
		margin: 1vh 3vh 1vh auto;
            }
        }
    }
    section.main::before {
	width: 90%;
	right: 50%;
	left: 50%;
	top: 20vh;
	height: 15vh;
	border-radius: 15px;
	transform: translate(-50%, -50%);
    }
    section.main::after {
	content: "";
	display: block;
	width: 60%;
	height: 25vh;
	background: url(/loftpia/katsura_ikejiri/img/main_sub_img.jpg) no-repeat 0 0;
	background-size: cover;
	background-position: center;
	border-radius: 15px;
	position: absolute;
	bottom: 2em;
	left: auto;
	right: 5%;
	z-index: -3;
    }
    section.info_sec {
            width: 96%;
            height: auto;
            flex-wrap: wrap;
            box-sizing: border-box;
            padding: 1em;
            margin: 1em auto;
        div:first-child {
            text-align: left;
            width: 100%;
        }
            ul {
                display: block;
                border-top: 1px solid #cccccc;
                border-bottom: 1px solid #cccccc;
                border-left: none;
                border-right: none;
                padding: 0;
                margin: 0.8em auto;
                width: 100%;
                height: 4em;
                box-sizing: border-box;
		        & li{height: 4em!important;}
            }
        >div:last-child {
            width: 100%;
            text-align: right;
        }
    }
    section.concept_sec {
        width: 100%;
	height: auto;
	p{line-height: 200%;}
        div:first-child {
            margin-bottom: 5vh;
            & h2.section_title {
                font-size: clamp(19px, 7vw, 30px);
                span {font-size: var(--font-large-size);}
                }
        }
        div:nth-child(2) {
            font-size: clamp(19px, 7vw, 30px);
            p{font-size: clamp(14px, 3.5vw, 19px); margin: 4em auto;}
        }
        img {
		margin: 8vh auto 0 auto;
		z-index: 5;
		position: relative;
		width: 75%;
        }
    }
	section.concept_sec::before{
	    top: 25vh;
	    right: 0;
	    width: 35%;
	    height: 30vh;
	}
	section.concept_sec::after{
	    top: 25vh;
	    right: 0;
	    width: 35%;
	    height: 30vh;
	}
    section.modelhouse_sec {
            margin: auto;
            width: 100%;
            height: auto;
            padding: 30vh 0px 10vh 0px;


	div.modelhouse_intro {
	    display: block;
		width: 86%;
		margin: 0em auto;
	    padding-bottom: 0em;
	    text-align: center;
	    position: relative;
	    z-index: 1;
	}

    }
    section.modelhouse_sec::before {
            width: 40%;
            height: 23vh;
            top: 5vh;
            left: 50%;
            transform: translate(-50%);
    }
    section.modelhouse_sec::after {
        width: 45%;
        height: 20vh;
        top: 17em;
        right: unset;
    }
    section.plan_sec{
            padding-bottom: 23vh;
        div.plan_intro {
                display: block;
                width: 90%;
                margin: auto;
                top: 30vh;
            & div {
                width: auto;
                h3 {
                    font-size: clamp(20px, 5.5vw, 30px);
                    position: relative;
                    width: fit-content;
                }
                p {
                    margin: 2em auto 2em auto;
                }
            }
        }
	div.plan_intro::after {
                content: "";
                display: block;
                background-image: url(/loftpia/katsura_ikejiri/img/plan_bg_point.png);
                background-size: contain;
                background-position: left;
                background-repeat: no-repeat;
                width: 88%;
                height: 30vh;
                position: absolute;
                bottom: 6em;
                transform: translate(-50%);
                z-index: -1;
        }


    }
    section.plan_sec::before {
        content: "";
        display: block;
            background-image: url(/loftpia/katsura_ikejiri/img/plan_img.png);
            background-size: cover;
            background-position: left;
            background-repeat: no-repeat;
            width: 70%;
            height: 30vh;
            border-radius: 15px;
            position: absolute;
            top: 2em;
            left: 50%;
            transform: translate(-50%);
    }



    section.equipment_sec {
        flex-wrap: wrap;
        width: 80%;
        margin: 25vh auto 10vh auto;
        div.equipment_intro {
            flex-wrap: wrap;
            width: 100%;
            p{
                margin: auto auto 5vh auto;
                line-height: 2em;
            }
        }
        .slider-container {
            position: relative;
            width: 100%;
            height: 30vh;
            overflow: hidden;
        }
    }
    section.equipment_sec::before {
        width: 90%;
        height: 40vh;
        left: -2%;
    }
    section.freeplan_sec {
        padding-left: 0;
        width: 100%;
        margin: 10vh 0;
        h2.section_title {
            text-align: center;
        }
        h3{
            width: 80%;
            margin: auto;
            display: block;
        }
        p{width: 80%;}
        & div.freeplan_img {
		    width:80%;
            img {
                border-radius: 20px;
            }
        }
        div.freeplan_img::before {
            width: 145px;
            height: 132px;
            position: absolute;
            top: auto;
            bottom: -3em;
        }
        & div.slide-animation {
            & > ul.slide-contents {
                & > li {
                    >img {
                        max-width: unset;
                        height: 15vh;
                    }
                }
            }
        }
    }

    section.purewater_sec {
        padding-right: 0;
        width: 100%;
        margin: 10vh 0 20em 0;
        h2.section_title {
            text-align: center;
        }
        h3{
            width: 80%;
            margin: auto;
            display: block;
        }
        p{width: 80%;}
	a{margin-left:10%;}
    }
    section.purewater_sec::before {
        width: 80%;
        height: 16vh;
        top: 30em;
        left: 10%;
    }
    section.location_sec {
        margin: 10vh auto;
        width: 100%;
        .section_title{
                margin: auto auto 6vh auto;
                text-align: center;
                display: block;
        }
	    h2{}
        div.slide-animation {
            top: 9em;
            ul.slide-contents {
                width: max-content;
                height: 300px;
                margin: auto;
                li{
                    width: auto;
                    img{height: 15em;}
                }
            }
        }
        div.location_intro {
            display: block;
            width: 90%;
            margin: auto;
            position: absolute;
            top: 40vh;
            right: 5%;
            div {
                width: auto;
                h2.section_title {
                    margin: 2em 0;
                }
                p{
                    width: 100%;
                    margin-bottom: 2em;
                }
            }
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            margin: 14em auto auto auto;
            width: 90%;
            li {
                width: 100%;
                margin: 1.5em auto;
                img {
                    width: 100%;
                    height: 13em;
                    object-fit: cover;
                }
                h3 {
                    font-size: var(--font-middle-size);
                    line-height: 2em;
                }
                p {
                    font-size: var(--font-small-size);
                }
            }
        }
    }
    section.location_sec::before {
        content: "";
        display: block;
        width: 90%;
        height: 33vh;
        position: absolute;
        top: 0;
        left: 0;
    }
    section.location_sec::after {
        width: 63%;
        height: 35vh;
    }


    section.access_sec {
        margin: 10vh auto;
        width: 100%;
        div {
            display: block;
            margin: auto;
            width: auto;
            p{
                width: 80%;
                margin-bottom: 2em;
            }
        }
        div.section_title {
            margin: 2em 0px;
            text-align: center;
        }
        div.acc_contents {
            display: flex;
            flex-wrap: wrap;
            justify-content: left;
            width: 90%;
            div:nth-child(1) {
                width: 100%;
                padding-top: 7vh;
                h3 {
                    margin-bottom: 1em;
                    font-size: 4.5vw;
                }
            }
            div:nth-child(2) {
                width: 100%;
            }
        }
        div.acc_contents::before {
            width: 140px;
            height: 167px;
            bottom: 0;
        }
        div.googlemap_contents {
            margin: auto;
            width: 84%;
            p{padding: 1em 0;}
            iframe {
                width: 100%;
                height: 30vh;
            }
        }

    }

}
.pan_wrap {
    width: 94%;
    margin: 1em auto;
}
section.inq_form_link {
    ul {
        width: 80%;
        margin: 6vh auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
            width: 100%;
        }
    }
}
.in_pages {
    h1{
        top: 10vh;
        width: 100%;
        left: 2%;
    }
    .main {
        display: flex;
        width: 100%;
        height: 40vh;
        position: relative;
        >div:first-child {
                padding-top: 15vh;
                bottom: unset;
                right: unset;
                width: 100%;
                min-width: unset;
                position: relative;
            >div {
                font-size: 8vw;
                line-height: 1.5em;
                text-align: center;
                color: white;
                margin: 1.5em auto auto auto;
                left: auto;
            }
            p {
                font-size: 5.5vw;
                text-align: center;
                color: white;
                margin: auto;
                left: auto;
            }
        }
    }
    .main::before {
        width: 80%;
        height: 20vh;
    }
    .main::after {
        content: unset;
    }
}
.css_modelhouse{
    section.introduction {
        margin: 10vh auto;
        width: 94%;
        p {
            width: 100%;
        }
        h2 {font-size: 8vw; padding-bottom: 0; padding-top: 5em;}
        ul {
            flex-wrap: wrap;
            li{
                width: 80%;
                a{
                    margin: auto;
                }
            }
        }
    }
    section.introduction::after {
        content: "";
        display: block;
        width: 50%;
        height: 11em;
        background-size: contain;
        position: absolute;
        background-repeat: no-repeat;
        top: 7vh;
        right: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        z-index: -1;
    }
    section.model_plan_access {
        margin: 10vh auto;
        width: 94%;
        ul{
            flex-wrap: wrap;
            li {
                width: 100%;
            }
        }
    }
    section.model_pick_list {
        margin: 10vh auto;
        width: 94%;
        & ul {
            li {
                width: 48%;
		div{
			h3{font-size: var(--font-small-size);}
		}
            }
        }
    }
    section.model_vr, section.model_roomtour {
        margin: 10vh auto;
        width: 94%;
    }
    section.model_vr>iframe {
            width: 100%;
            height: 70vh;
    }
    section.model_roomtour>iframe {
            width: 100%;
            height: 19em;
    }


}
.css_plan{
    section.introduction {
        width: 100%;
        margin: 10vh auto;
        & div {
            h2 {
                font-size: clamp(20px, 6vw, 30px);
                color: #444;
                padding-top: 1em;
            }
            h3 {
                font-size: 5vw;
                span {
                    font-size: clamp(38px, 9vw, 60px);
                }
            }
            h3::after{
                width:80%;
            }
            ul.circle_catch {
                li {
                    align-items: center;
                    display: inline-grid;
                    font-size: clamp(16px, 4vw, 20px);
                    color: #399d26;
                    border-radius: 50%;
                    border: 2px solid #399d26;
                    height: 6.5em;
                    width: 6.5em;
                    text-align: center;
                    margin: 0.5em;
                    span {
                        font-size:clamp(18px, 5vw, 19px);
                    }
                }
            }
            p{
                font-size: 3.5vw;
                width: 94%;
                margin: 2em auto;
                line-height: 1.7em;
            }
            ul.plan_list {
                width: 95%;
                li {
                    align-items: center;
                    font-size: clamp(13px, 3.5vw, 14px);
                    padding: 0.5em;
                    width: 100%;
                }
            }
        }
        & div.slide-animation {
            & > ul.slide-contents {
                & > li {
                    >img {
                        max-width: unset;
                        height: 7em;
                    }
                }
            }
        }
    }
    section.recomended {
        width: 94%;
        & div {
            h3 {
                font-size: clamp(20px, 5.5vw, 22px);
                margin: 1em auto 1em auto;
            }
            p {
                font-size: var(--font-middle-size);
                width: 100%;
            }
        }

        ul {
                margin: 5vh auto;
            li {
                width: 45%;
                & a {
                    img {
                        width: 11em;
                        height: 11em;
                        object-fit: cover;
                    }
                }
                a::after {
                    background-size: contain;
                    width: 2em;
                    height: 2em;
                }
            }
        }
    }
    
}
.css_location{
    section.introduction {
        padding-top: 10vh;
        width: 100%;
        margin: 10vh auto;
        & div {
            h2 {
                font-size: clamp(13px, 5vw, 16px);
                color: #399d26;
                padding-top: 1.8em;
            }
            h3 {
                font-size: 5vw;
                span {
                    font-size: clamp(18px, 5vw, 19px);
                }
            }
            p {
                width: 80%;
                margin: auto;
                line-height: 2em;
            }
        }
        div::before{
            width: 200px;
            height: 150px;
            position: absolute;
            top: -12vh;
            left: 50%;
            transform: translate(-50%);
        }
    }
    section.loc_main_list {
        width: 90%;
        margin: 10vh auto;
        & ul {
            width:100%;
            li {
                width: 100%;
                position: relative;
                margin-bottom: 3.5em;
                flex-wrap: wrap;
                img {
                    height: 20vh;
                    object-fit: cover;
                    width: 100%;
                }
                div{
                    padding: 0.5em 0.5em 0.5em 0em;
                    width: auto;
                    h3{}
                    p{line-height: 1.5em;}
                }
            }
        }
    }
    section.loc_sub_list {
        width: 90%;
        margin: 10vh auto;
        ul {
            li {
                width: 48%;
                margin-bottom: 6vh;
            }
        }
        div.loc_line_map {
            width: 100%;
            margin: 10vh auto auto auto;
            div:first-child {
                flex-wrap: wrap;
                justify-content: left;
                & h2 {
                    font-size: 4vw;
                    padding: 0em 0;
                    margin-bottom: 2em;
                    span {
                        font-size: 6vw;
                    }
                }
                & div {
                    p {
                        text-align: left;
                    }
                }
            }
        }
        
    }
    section.loc_map {
        width: 90%;
        margin: 10vh auto;
    }
    
    
}
.css_equipment{
    section.introduction {
        width: 90%;
        margin: 1vh auto 10vh auto;
        h2{font-size: 8vw;}
        p{font-size: 3.5vw;}
        div {
            width: 40%;
            img{
                width: 100%;
            }
        }
        div.intro_img1 {
            top: -6em;
            left: 36%;
            z-index: 5;
            width: 33%;
        }
        div.intro_img2 {
            top: -4em;
            left: 5%;
            z-index: 3;
        }
        div.intro_img3 {
            top: -4em;
            left: 58%;
            z-index: 0;
        }
        ul {
            width: 100%;
            li{width: fit-content;}
        }
    }
    section.introduction::after {
        content: "";
        position: absolute;
        /* background-size: contain; */
        background: url(/loftpia/katsura_ikejiri/img/eq_sketch.png);
        background-repeat: no-repeat;
        background-size: contain;
        top: 0vh;
        left: 5%;
        width: 100%;
        height: 26vh;
        z-index: 1;
        opacity: 0.4;
    }
    section.equip_item {
        width: 90%;
        margin: 2vh auto 10vh auto;
            ul {
            display: flex;
            flex-wrap: wrap;
            & li {
                span {
                    font-size: clamp(16px, 4.5vw, 18px);
                }
                h3 {
                    margin: 1em auto;
                }
                p{
                    margin-bottom: 3em;
                    font-size: 3.5vw;
                    width: 100%;
                }
                a.catalog_dl_link {right: 0%;}
            }
            li:first-child {
                width: 85%;
            }
            li:last-child {
                width: 100%;
                padding: 1em;
            }
        }
        h4 {
            width: 90%;
            margin: 3em auto 1em auto;
            line-height: 1.5em;
        }
        p {
            width: 90%;
            margin: auto;
        }
    }
    .equip_item:nth-child(odd) >ul {
        flex-direction: unset;
    }
}
.css_overview{
    section.overview_date {
        margin: 5vh auto 20vh auto;
        width: 90%;
        h2 {
            margin-left: 0;
        }
        h3 {
            margin: 0em auto;
            font-weight: bold;
        }
        table {
            width: 100%;
            tbody {
                & tr {
                    th {
                        border-top: #bcbcbc 1px solid;
                        padding: 1em 0 0 0;
                        line-height: 2em;
                        width: 100%;
                        color: #399d26;
                        display: block;
                        text-indent: 0;
                    }
                    td {
                        border-top: none;
                        padding: 0 0 1em 0;
                        width: 100%;
                        display: block;
                    }
                }
            }
        }
        & p {
            width: 100%;
        }
    }
    section.shop_date {
        width: 90%;
        margin: auto;
            div {
                flex-wrap: wrap;
                img{width: 100%;}
                div {
                    width: 100%;
                    img {
                    width: fit-content;
                    }
                }
            }
    }

}
.scroll {
    bottom: 15.5vh !important;
}
}/*@media=end*/

/* =========================================================
scroll-efects
========================================================= */
.fadein {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-left{
      transform: translate(-30px,0);
  }
  &.fadein-right{
      transform: translate(30px,0);
  }
  &.fadein-up{
      transform: translate(0,-30px);
  }
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}
.fadein2 {
    opacity: 0;
    transform: translate(0,0);
    transition: all 1.5s;
  &.fadein-bottom{
      transform: translate(0,30px);
  }
  &.scrollin{
    opacity: 1 !important;
    transform: translate(0, 0) !important;
  }
}

/* スクロールダウンの位置 */
.scroll {
    position: absolute;
    left: 1%;
    font-size: clamp(10px, 3vw, 10px);
    bottom: 15vh;
    color: #399D26;
    font-family: "Radio Canada Big";
    writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #6d6d6d;
    bottom: -65px;
    content: "";
    height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  z-index: 2;
}
/* 線の背景色 */
.scroll::after {
  background-color: #cecece;
    bottom: -65px;
    content: "";
    height: 50px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

.slide-animation {
    display: flex;
    width: 100%;
    gap: 0px;
    overflow: hidden;
}
.slide-animation li {
    width: fit-content;
}
.slide-contents {
    display: flex;
    gap: 0px;
    animation: loopAnimation 150s linear;
    animation-iteration-count:infinite;
}
@keyframes loopAnimation {
    0% {
    transform: translateX(0%);
    }
    100% {
    transform: translateX(-65%);
    }
}

@keyframes zoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.2);
    }
}

@keyframes slideAnime {
    0%, 100% {
        opacity: 0;
    }/* スライドの非表示タイミング */
    50% {
        opacity: 1;
    }/* スライドの表示タイミング */
}