@charset "utf-8";

/*-------------------------------------------------------------- */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;margin:0;outline:0;padding:0;vertical-align:baseline;scroll-behavior: smooth;}
:focus{outline:0;}
html{scroll-behavior: smooth;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{font-weight:normal;text-align:left;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"";}
img{max-width:100%;height:auto;vertical-align:bottom;-webkit-backface-visibility: hidden;}
a img{max-width:100%;height:auto;border:0;}
a:hover img{opacity: 0.8; filter: alpha(opacity=80); -moz-opacity: 0.8; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; /*animation:fadeIn 1s ease 0s 1 normal;*/}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{font:20px/1.75 "a-otf-ryumin-pr6n","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;color:#444444;animation:fadeIn 2s ease 0s 1 normal;font-weight: 300; letter-spacing: 0.25rem; }
/*"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;*/
/*::after{ display: block; clear: both; content: '';}*/

/* リンク設定
------------------------------------------------------------*/
a{text-decoration:none;outline:0;vertical-align:baseline;color:#444444;}
a:hover,a:active{color:#444444;}


/* 汎用クラス
*****************************************************/
.pcDisp{display:block;}
.spDisp{display:none;}
.fixedMenu{display:none;}
.line{ position: fixed; right: 50px; top: 100px; width: 100px; z-index: 100;}

/* ヘッダー
------------------------------------------------------------*/
header{position: relative;z-index: 100;}
header h1{ width: 340px; float: left; margin: 30px 0 0 45px;}
header ul{ width: 330px; float: right; margin: 40px 95px 0 0; display: flex;}
header ul li{ width: 100%;}
header ul li:first-child{ background: url(../img/icon1.png) no-repeat center left; background-size: 15px auto; }
header ul li:last-child{ background: url(../img/icon2.png) no-repeat center left; background-size: 28px auto; }
header ul li:first-child a{ font-size: 16px; padding-left: 25px; display: block;}
header ul li:last-child a{ font-size: 16px; padding-left: 35px; display: block;}

@media only screen and (max-width:644px){
header h1{ width: 35%; margin: 15px;}
header ul{ display: none;}
.line{ right: 15px; top: 50px; width: 50px;}
}

/* メイン画像
*****************************************************/
#kv{ position: relative; z-index: 99; height: 2000px;}
#kv .copy{ position: absolute; left: 45%; top: 100px; font-size:40px; writing-mode: vertical-rl; letter-spacing: 0.5rem; }
#kv .slide1{ width: 40%;position: absolute; left: 0; top: 0;}
#kv .slide2{ width: 40%;position: absolute; right: 0; top: 230px;}
#kv .slide3{ width: 35%;position: absolute; left: 0; bottom: 230px;}
#kv .slide4{ width: 50%;position: absolute; right: 0; bottom: 100px;}

@media only screen and (max-width:644px){
#kv{ height: 1100px;}
#kv .copy{ font-size: 20px;z-index: 99; left: 40%;}
#kv .slide1{ width: 100%;}
#kv .slide2{ width: 40%; right: auto; left: 0; top: 500px;}
#kv .slide3{ width: 55%; left: auto; right: 0; bottom: auto; top: 530px;}
#kv .slide4{ width: 96%;position: absolute; right: 0; bottom: 0;}
}

/* コンテンツ
*****************************************************/
#ie{ position: relative; padding-bottom: 100px;}
#ie::before{ position: absolute; background: #fbfbfb; width: 80%; top: 0; left: 0; height: 950px; content: ''; z-index: -1;}
#ie .box::after{ display: block; clear: both; content: '';}
#ie .box img{ width: 55%; float: right;}
#ie .box .lft{ padding-left: 50px; width: 45%; box-sizing: border-box; float: left;}
#ie .box p{ margin-bottom: 50px;}

@media only screen and (max-width:644px){
#ie::before{ width: 100%; height: 850px;}
#ie .box img,#ie .box .lft{ width: 100%; float: none;}
#ie .box img{ margin-bottom: 20px;}
#ie .box .lft{ padding: 0 15px;}
#ie .box p{ margin-bottom: 20px;}
}

#works .slider{ margin: 0 50px 100px;}
#works .box{ position: relative; padding-bottom: 50px;}
#works .box::before{ position: absolute; background: #fbfbfb; width: 55%; bottom: 0; right: 0; height: 500px; content: ''; z-index: -1;}
#works .box::after{ display: block; clear: both; content: '';}
#works .box img{ width: 55%; float: right; margin-right: 50px;}
#works .box .no{ font-size: 40px; margin-bottom: 30px;}
#works .box .no span{ margin-left: 25px; font-size: 20px; width: 250px; text-align: center; color: #fff; height: 30px; border-radius: 30px; background: #989069; padding: 0 50px; margin-bottom: 50px;}
#works .box h3{  margin-bottom: 20px;}
#works .tag{ margin-bottom: 20px;}
#works .tag span{ margin-right: 25px; font-size: 20px; width: 250px; text-align: center; color: #fff; height: 30px; border-radius: 30px; background: #a7a7a7; padding: 0 20px;white-space: nowrap;}
#works dl{ margin-bottom: 50px;}
#works dl dt{ width: 100px; float: left; height: 100px;}
#works .btm{ padding: 100px 50px; background: #fbfbfb; margin-bottom: 100px;}
#works .btm ul{  margin-bottom: 100px;}
#works .btm ul::after{ display: block; clear: both; content: '';}
#works .btm ul li{ width: 32%; margin-right: 2%; float: left;}
#works .btm ul li:last-child{ margin-right: 0;}
#works .btm ul li img{ margin-bottom: 20px;}
#works .tag.small span{ margin-right: 15px; font-size: 16px; width: 200px; height: 25px; border-radius: 25px; padding: 0 10px;white-space: nowrap;}
#works .btm dl{ margin-bottom: 20px;}
#works .btm dl dt,#works .btm dl dd{ font-size: 16px;}
#works .btm dl dt{ width: 100px; height: 50px;}

@media only screen and (max-width:644px){
#works .slider{ margin: 0 0 50px;}
#works .box{ padding-bottom: 25px;}
#works .box::before{ width: 100%; height: 380px;}
#works .box img{ width: 100%; float: none; margin-right: 0;}
#works .box .txt{ padding: 0 15px;}
#works .box .no { font-size: 30px; margin-bottom: 20px;}
#works .box .no span { margin-left: 10px; font-size: 15px; padding: 0 20px;}
#works .tag span { margin-right: 10px; font-size: 14px; padding: 0 10px;}
#works dl dt,#works .btm dl dt { width: 70px; height: 60px;}
#works .btm{ padding: 50px 15px; margin-bottom: 0;}
#works .btm ul{ display: block; margin-bottom: 0;}
#works .btm ul li{ margin-bottom: 30px; margin-right: 0; width: 100%; float: none;}
#works .tag.small span{ margin-right: 10px; font-size: 14px;}
#works .btm dl dt,#works .btm dl dd{ font-size: 14px;}
}

#lots .tit{ margin-bottom: 0;}
#lots .main{ position: relative; margin-bottom: 100px;}
#lots .main::after{ display: block; clear: both; content: '';}
#lots .main::before{ position: absolute; background: #fbfbfb; width: 100%; bottom: 0; right: 0; height: 480px; content: ''; z-index: -1;}
#lots .main img{ float: right; padding-right: 50px; width: 60%; box-sizing: border-box;}
#lots .main .txt{ float: left; padding-left: 50px; width: 40%; box-sizing: border-box;}
#lots h3{ margin-bottom: 20px; padding-top: 90px;}
#lots h3 span{ font-size: 16px;}
#lots .add{ margin-bottom: 20px;}
#lots p{ font-size: 16px; margin-bottom: 50px;}
#lots .btm{ padding:0 50px; margin-bottom: 100px;}
#lots .btm ul{ display: flex;}
#lots .btm ul li{ width: 100%; margin-right: 20px;}
#lots .btm ul li:last-child{ margin-right: 0;}
#lots .btm ul li img{ margin-bottom: 20px;}
#lots .btm ul li h3{ padding-top: 0;}
#lots .btm ul li p{ font-size: 14px; margin-bottom: 20px;}

@media only screen and (max-width:644px){
#lots .main{ margin-bottom: 50px;}
#lots .main img,#lots .main .txt{ width: 100%; float: none;}
#lots .main img{ padding-right: 0;}
#lots .main .txt{ padding: 0 15px 1px;}
#lots h3 { padding-top: 20px;}
#lots h3 span{ font-size: 12px;}
#lots p { font-size: 12px; margin-bottom: 20px;}
#lots .btm{ padding:0 15px; margin-bottom: 0;}
#lots .btm ul{ display: block;}
#lots .btm ul li{ margin-right: 0; margin-bottom: 50px;}
#lots .btm ul li p{ font-size: 12px;}
#lots h3{ font-size: 20px;}
}

#chouse{ background: #fbfbfb; padding: 100px 0 50px;}
#chouse .slider{ margin: 0 50px 100px;}
#chouse .box{ position: relative; padding-bottom: 50px;}
#chouse .box::before{ position: absolute; background: #fbfbfb; width: 55%; bottom: 0; right: 0; height: 500px; content: ''; z-index: -1;}
#chouse .box::after{ display: block; clear: both; content: '';}
#chouse .box img{ width: 55%; float: right;}
#chouse h3{ font-size: 20px; margin-bottom: 30px;}
#chouse h3 span{ font-size: 40px; margin-right: 15px;}
#chouse .tag{ margin-bottom: 20px;}
#chouse .tag span{ margin-right: 25px; font-size: 20px; width: 250px; text-align: center; color: #fff; height: 30px; border-radius: 30px; background: #a7a7a7; padding: 0 20px;white-space: nowrap;}
#chouse .btm{ padding:0 50px;}
#chouse .btm ul{ display: flex; margin-bottom: 50px;}
#chouse .btm ul li{ width: 100%; margin-right: 20px;}
#chouse .btm ul li:last-child{ margin-right: 0;}
#chouse .btm h3{ font-size: 14px; margin-bottom: 15px;}
#chouse .btm h3 span{ font-size: 20px;}

@media only screen and (max-width:644px){
#chouse{ padding: 0 0 15px;}
#chouse .slider{ margin: 0 15px 50px;}
#chouse .box img{ width: 100%; float: none;}
#chouse h3 span{ font-size: 30px; margin-right: 10px;}
#chouse .tag span { margin-right: 10px; font-size: 14px; padding: 0 10px;}
#chouse .btm{ padding:0 15px;}
#chouse .btm ul{ display: block; margin-bottom: 50px;}
#chouse .btm ul li{ margin-right: 0; margin-bottom: 30px;}
#chouse .tag.small span{ margin-right: 10px; font-size: 14px;}
}

#info .box{ margin: 0 50px 50px;}
#info .box::after{ display: block; clear: both; content: '';}
#info .box .index{ float: left; width: 25%;}
#info .box .index ul li{ margin-bottom: 20px;}
#info .box .index ul li a{ font-size: 16px; text-align: center; box-sizing: border-box; width: 250px; height: 50px; line-height: 50px; background: #fff; border: 1px solid #ccc; transition: 0.5s; display: block; border-radius: 10px;}
#info .box .index ul li a:hover{ background: #ccc;}
#info .box .rgt{ width: 75%; float: right;}
#info .box .rgt ul.large{ display: flex; margin-bottom: 100px;}
#info .box .rgt ul.large li{ width: 100%;}
#info .box .rgt ul.large li:first-child{ margin-right: 20px;}
#info .box .rgt ul.large li img{ margin-bottom: 30px;}
#info .box .rgt ul li .date{ font-size: 14px; color: #989068; margin-bottom: 20px;}
#info .box .rgt ul.small li{ border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px;}
#info .box .rgt ul.small li::after{ display: block; clear: both; content: '';}
#info .box .rgt ul.small li img{ width: 20%; float: left;}
#info .box .rgt ul.small li .txt{ width: 75%; float: right; padding-top: 30px;}
#info .btn1.rgt{ margin-right: 50px;}

@media only screen and (max-width:644px){
#info .box{ margin: 0 15px 25px;}
#info .box .index,#info .box .rgt{ float: none; width: 100%;}
#info .box .index{ margin-bottom: 30px;}
#info .box .index::after{ display: block; clear: both; content: '';}
#info .box .index ul li{ float: left; width: 30%; margin-right: 3%; margin-bottom: 10px;}
#info .box .index ul li a{ font-size: 12px; width: 100%; height: 25px; line-height: 25px;}
#info .box .rgt ul.large{ display: block; margin-bottom: 0;}
#info .box .rgt ul.large li{ margin-bottom: 30px; margin-right: 0;}
#info .box .rgt ul li .date{ font-size: 12px; margin-bottom: 10px;}
#info .box .rgt ul.small li .txt{font-size: 12px; padding-top: 0; width: 65%;}
#info .box .rgt ul.small li img{ width: 30%; }
#info .btn1.rgt{ margin-right: 15px;}
}

/* 共通エリア
*****************************************************/
main{display:block;box-sizing:border-box; padding-bottom: 100px;}
section::after{ display: block; clear: both; content: '';}

.tit{ margin: 0 50px 100px;}
.tit .copy{ padding:20px 0; width: 100%; box-sizing: border-box; border-bottom: #707070 2px solid;}
h2{ font-size: 50px; padding: 50px 0 0 0;}
.btn1 a{ width: 230px; height: 55px; display: block; font-size: 22px; transition: 0.5s; line-height: 50px; font-weight: bold;}
.btn1 a span { display: inline-block; vertical-align: middle; color: #444; line-height: 1; position: relative; width: 50px; height: 50px; border: 1px solid #ccc; background: #fff; border-radius: 50%; box-sizing: content-box; margin-left: 10px;}
.btn1 a span::before { content: ''; color: #444; width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 10px 15px; border-left-color: #444; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.btn1 a:hover{ opacity: 0.5;}
.btn1.small a{ width: 200px; height: 30px; font-size: 16px; line-height: 30px;}
.btn1.small a span {width: 30px; height: 30px;}
.btn1.small a span::before { border-width: 5px 10px;}
.btn1.rgt{ float: right;}

@media only screen and (max-width:644px){
main{ padding-bottom: 50px;}

.tit{ margin: 0 15px 20px; text-align: center;}
.tit .copy{ padding:10px 0;}
h2{ font-size: 30px; padding: 30px 0 0 0;}
.btn1 a,.btn1.small a{ width: 200px; height: 25px; font-size: 16px; line-height: 25px; }
.btn1 a span,.btn1.small a span { width: 25px; height: 25px; margin-left: 5px;}
.btn1 a span::before,.btn1.small a span::before { border-width: 5px 8px;}
.btn1.rgt a{ width: 140px;}
}

.btn2 a{ width: 230px; height: 55px; display: block; font-size: 22px; transition: 0.5s; line-height: 50px; font-weight: bold; color:#fff; text-decoration:none;}
.btn2 a span { display: inline-block; vertical-align: middle; color: #444; line-height: 1; position: relative; width: 50px; height: 50px; border: 1px solid #ccc; background: #fff; border-radius: 50%; box-sizing: content-box; margin-left: 10px;}
.btn2 a span::before { content: ''; color: #444; width: 0; height: 0; border-style: solid; border-color: transparent; border-width: 10px 15px; border-left-color: #444; border-right: 0; transform: translateX(15%); position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
.btn2 a:hover{ opacity: 0.5;}
.btn2.small a{ width: 200px; height: 30px; font-size: 16px; line-height: 30px;}
.btn2.small a span {width: 30px; height: 30px;}
.btn2.small a span::before { border-width: 5px 10px;}
.btn2.rgt{ float: right;}

@media only screen and (max-width:644px){
  .btn2 a,.btn2.small a{ width: 200px; height: 25px; font-size: 16px; line-height: 25px; }
  .btn2 a span,.btn2.small a span { width: 25px; height: 25px; margin-left: 5px;}
  .btn2 a span::before,.btn2.small a span::before { border-width: 5px 8px;}
  .btn2.rgt a{ width: 140px;}
}


/* フッター
*****************************************************/
footer { background: #000; color: #f5f5f5; font-size: 14px;}

footer #cta { position: relative; background-image: url('../img/cta.jpg'); background-size: cover; background-position: center; color: #fff;padding: 100px 20px; text-align: center;}
footer #cta .contact { max-width: 1000px; margin: 0 auto; }
footer #cta .contact h2 { font-size: 50px; letter-spacing: 0.1em; margin-bottom: 10px;}
footer #cta .contact .subtitle { font-size: 20px; margin-bottom: 30px;}
footer #cta .contact p { line-height: 1.8; margin-bottom: 20px; font-size: 25px;}
footer #cta .contact .phone { font-size: 40px; font-weight: bold; background: url(../img/free1.png) no-repeat left center; padding-left: 50px; width: 350px; margin: 0 auto 50px; background-size: 50px auto; letter-spacing: 0.5rem;}
footer #cta .contact .time { font-size: 14px; display: inline-block; margin-left: 10px;}
footer #cta ul { max-width: 800px; margin: 0 auto; display: flex; width: 100%;}
footer #cta ul li{width: 100%;}
footer #cta ul li a {width: 100%; background-color: rgba(255, 255, 255, 0.7); color: #000; text-align: center; padding: 20px; margin: 5px; font-weight: bold; text-decoration: none; transition: background-color 0.3s; display: block; box-sizing: border-box; font-size: 20px;}
footer #cta ul li a:hover { background-color: rgba(255, 255, 255, 1);}
footer #cta a.red { background-color: rgba(244, 67, 54, 0.7); color: #fff;}
footer #cta a.red:hover { background-color: #e53935;}

footer #foot { background-color: #484848; color: #fff; font-size: 14px; padding: 60px 20px;}
footer #foot .inner { display: flex; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; gap: 40px;}
footer #foot .info { flex: 1 1 540px;}
footer #foot .logo { font-size: 30px; margin-bottom: 20px;}
footer #foot .nav { display: flex; flex: 2 1 600px; flex-wrap: wrap;}
footer #foot .col{ width: 45%;}
footer #foot .col ul { list-style: none; padding: 0; margin: 0;}
footer #foot .col li { margin-bottom: 8px;}
footer #foot .col a { color: #fff; text-decoration: none;}
footer #foot .col a:hover { text-decoration: underline;}
footer #foot .coltit { font-weight: bold; margin-bottom: 12px; width: 100%; font-size: 25px;}

@media only screen and (max-width:644px){
footer #cta { padding: 50px 20px;}
footer #cta .contact h2 { font-size: 35px; padding-top: 0;}
footer #cta .contact .subtitle { font-size: 16px;}
footer #cta .contact p {font-size: 16px;}
footer #cta .contact .phone { font-size: 30px; width: 80%;}
footer #cta ul { display: block;}
footer #foot{ padding-bottom: 70px;}
footer #foot .col{ width: 100%;}
footer #foot .logo { font-size: 25px;}
}

/* スマホサイズ
------------------------------------------------------------*/
@media only screen and (max-width:644px){
.pcDisp{display:none;}
.spDisp{display:block;}
body{font:14px/1.75 "a-otf-ryumin-pr6n","ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","游明朝",YuMincho,"HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;color:#444444;animation:fadeIn 2s ease 0s 1 normal;font-weight: 300; letter-spacing: 0.25rem; }

.fixedMenu{display:block; position: fixed; width: 100%; bottom: 0; background: #fff; z-index: 100;}
.fixedMenu ul{ display: flex;}
.fixedMenu ul li{ width: 100%;}
.fixedMenu ul li:first-child{ background: url(../img/icon1.png) no-repeat center left 41px; background-size: 15px auto; }
.fixedMenu ul li:last-child{ background: url(../img/icon2.png) no-repeat center left 37px; background-size: 23px auto; }
.fixedMenu ul li a{font-size: 16px;display: block; text-align: center; padding: 15px 0;}
.fixedMenu ul li:first-child a{  padding-left: 25px; }
.fixedMenu ul li:last-child a{ padding-left: 35px;}
}



/*スライダー
------------------------------------------------------------*/
.slider {position:relative;z-index: 1;}
.slick-prev,.slick-next {display: none;}
.slick-dots {position: relative; z-index: 3; text-align:right;	margin:10px 0 0 0;}
.slick-dots li {  display:inline-block;	margin:0 5px;}
.slick-dots button { color: transparent; outline: none; width:25px; height:5px;	border: 1px solid #444; display:block; border-radius:20px; background:#fff;}
.slick-dots .slick-active button{ background:#444;}

/*下層ページKV
------------------------------------------------------------*/
.kv { width: 100%; position: relative;}
.kv__media img { width: 100%;margin-top: -90px;}
.kv__veil { position: absolute; inset: 0; background: #fff; opacity: .56;}
.kv__title { font-size: clamp(20px, 6vw, 64px); line-height: 1.2; font-weight: 600; margin: 0; text-align: center; position: absolute; top: 45%; width: 100%;}
.kv__lead { font-size: clamp(14px, 2vw, 20px); line-height: 1.8; margin-top: 0.5em; opacity: 0.9;}

/*家づくり
------------------------------------------------------------*/
#ie .intro{ padding:100px 20px;}
#ie .intro__card{ background:#fff; overflow:hidden; display:grid; gap:0; grid-template-columns: 1fr 600px;}
#ie .intro__body{padding:28px 28px 28px 32px;}
#ie .intro__body p{ margin-bottom: 20px;}
#ie .intro__media{position:relative}
#ie .intro__media img{width:100%; height:100%; object-fit:cover}
@media (max-width: 900px){
#ie .intro__card{grid-template-columns:1fr}
#ie .intro{margin:20px auto 40px;padding:0 20px;}
}
/* ===== フルワイドセクション（共通） */
.iefeature{position:relative; min-height:700px; display:grid; place-items:center; overflow:hidden;}
.iefeature.inpage{ width: 100%;}
.iefeature + .iefeature{margin-top:16px;}
.iefeature .feature__media{position:absolute; inset:0; margin-bottom: 0;}
.iefeature .feature__media img{width:100%; height:100%; object-fit:cover}
.iefeature .feature__veil{position:absolute; inset:0; background:#4a4a4a; opacity:.56;}
.iefeature .feature__wrap{ position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns: 3fr 1fr; gap:28px; align-items:center; color:#fff;margin-top: 100px;box-sizing: border-box;}
.iefeature .feature__textblock{ max-width:590px;}
.iefeature .feature__heading{font-size:30px; margin:0 0 14px; letter-spacing:.06em;}
.iefeature .feature__body{ line-height:1.9; margin:0 0 18px; opacity:.95}
.iefeature .feature__title{ font-size: clamp(48px, 12vw, 140px); line-height: .95; font-weight: 500; letter-spacing:.04em; justify-self:end; white-space:nowrap;margin-right: -130px;}
.iefeature.feature--alt .feature__wrap{ grid-template-columns: 1fr 3fr;}
.iefeature.feature--alt .feature__title{ order: 1; justify-self:start; margin-left: -130px;}
.iefeature.feature--alt .feature__textblock{ order: 2; justify-self:end;}

/* レスポンシブ */
@media (max-width: 960px){
.iefeature{min-height:420px}
.iefeature .feature__heading{ font-size: 20px;}
.iefeature .feature__wrap,.iefeature.feature--alt .feature__wrap{grid-template-columns:1fr; gap:14px;margin: 50px auto;}
.iefeature .feature__title{justify-self:start; font-size: clamp(20px, 16vw, 88px);}
.iefeature.feature--alt .feature__title{ margin-left: 0;}
.iefeature.feature--alt .feature__textblock{justify-self:start;}
}
.ieinpage{ margin-bottom: 100px;}
.ieinpage .intro{ text-align: center; margin: 100px 0;}
.ieinpage .intro p{ margin-bottom: 20px;}
.ieinpage .box{ max-width: 1200px;  margin: 0 auto; padding: 0 20px;}
.ieinpage h3{ font-size: 35px; text-align: center; letter-spacing: .12em; margin: 0 0 8px;}
.ieinpage h4{ font-size: 18px; text-align: center; color: #666; margin: 0 0 24px;}
.ieinpage .top{ display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; margin-bottom: 28px;}
.ieinpage .top .img{ order: 1; }
.ieinpage .top .txt{ order: 2; }
.ieinpage.even .top .img{ order: 2; }
.ieinpage.even .top .txt{ order: 1; }
.ieinpage .top .img img{ width: 100%; height: auto; display: block; animation: fadeUp .8s ease both;}
.ieinpage .top .txt{ color: #333; line-height: 2; animation: fadeUp .8s ease .1s both;}
.ieinpage .top .txt p{ margin: 0 0 15px; font-size: 16px; }
.ieinpage .smallimg1,.ieinpage .smallimg2,.ieinpage .smallimg3{ display:block; width: min(46%, 520px); text-align:right; opacity: 0;  transform: translateY(50px);  transition: all 0.7s ease;}
.smallimg1.inview,.smallimg2.inview,.smallimg3.inview{ opacity: 1; transform: none;}
.ieinpage .smallimg1 img,.ieinpage .smallimg2 img,.ieinpage .smallimg3 img{ width:100%; height:auto;display:block;}
.ieinpage .smallimg1 p,.ieinpage .smallimg2 p,.ieinpage .smallimg3 p{ margin:.6em 0 0; font-size:14px; color:#555; line-height:1.6;}
.ieinpage .smallimg1{ margin: 12px 0 24px auto; animation-delay:.08s;}
.ieinpage .smallimg2{ margin: -300px auto 24px 0; animation-delay:.18s;}
.ieinpage .smallimg3{ margin: 12px 6% 28px auto; animation-delay:.28s;}
.ieinpage p span{ font-weight: bold; font-size: 25px;}
@media (max-width: 960px){
.ieinpage .top{grid-template-columns: 1fr; gap: 18px;}
}
@media (max-width: 640px){
.ieinpage{ padding: 36px 0 44px; margin-bottom: 0; }
.ieinpage h3{ font-size: 24px; }
.ieinpage h4{ font-size: 16px; }
.ieinpage .smallimg1,.ieinpage .smallimg2,.ieinpage .smallimg3{width:100%;margin:14px 0;}
}
/* ===== コンセプト（一覧セクション） ===== */
.ieconcepttit { max-width: 1200px; width: 100%; margin: 0 auto 30px; border-bottom: 1px solid #ccc; padding-bottom: 20px;}
.ieconcepttit h2{ font-size: 30px;}
#works.ieconcept .btm{ background: none; padding: 50px 0;max-width: 1200px; width: 100%; margin: 0 auto;}
#works.ieconcept .btm h1{ margin:0 0 20px; font-size:30px; text-align:center;}