@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, 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-style:normal;
  font-weight: normal;
  font-size: 100%;
  vertical-align: baseline;
}

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

html{
    overflow-y: scroll;
}

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;
}

a:focus {
  outline:none;
}

.clearfix:after {
  content: "."; 
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
}

.inline_block {  
  display: inline-block;  
  *display: inline;  
  *zoom: 1;  
}

img{
  vertical-align:bottom;
}


.sp{
display:none;
}
body{
font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}
img{
width:100%;
}

.main_img{
width:100%;
}


.news_box{
margin-bottom:70px;
background:#ede8dc;
}

/****** 新着情報　PC ******/
.news {
display: flex;
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding: 0;
max-width: 1080px;
height: 60px;
color: #333;
}

.news_tit{
background:#e58558;
width:140px;
display:flex;
align-items:center;
justify-content:center;
}
.news_tit img{
width:auto;
}
.ticker ul {
width: 100%;
position: relative;
background: #fff;
font-size: 15px;
font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.ticker ul li {
padding-top: 20px;
width: 900px;
display: none;
}
.ticker ul li span {
margin-right: 30px;
margin-left: 30px;
}
.ticker ul br {
display: none;
}


.btn_area{
margin-bottom:200px;
}
.btn_area p{
max-width:940px;
margin:0 auto 120px;
text-align:center;
fon-size:16px;
line-height:2.5em;
}
.nav_btn{
max-width:940px;
margin:0 auto;
display:flex;
justify-content:space-between;
}
.nav_btn li{
width:14%;
}


h3{
text-align:center;
width:138px;
margin:0 auto;
}
h3 img{
max-width:100%;
}


#design{
margin-bottom:150px;
}
.design_box{
background:url(../img/design_bg.png);
background-size: cover;
padding:120px 0;
margin:-62px auto 0;
}
.design_box_inner{
max-width:940px;
margin:0 auto;
}


#plan{
margin-bottom:160px;
}
#plan h3{
margin-bottom:90px;
}
#plan .torikago{
max-width:420px;
margin:0 auto 90px;
}
#plan .plan_wrap{
max-width:940px;
margin:0 auto 30px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
#plan .plan_box{
margin-bottom:70px;
background:#ede8dc;
width:445px;
border-top:5px solid #804f21;
}
#plan .plan_box img{
max-width:100%;
}
#plan .plan_info{
display:flex;
align-items:flex-end;
margin-bottom:30px;
}
#plan .plan_box:nth-child(1)  .plan_info{
margin-bottom:0;
}
#plan .type{
margin-right:30px;
}
#plan .info{
font-size:17px;
}
#plan .info li{
margin-top:20px;
}
#plan .info span{
background:#804f21;
width:110px;
display:inline-block;
margin-right:10px;
color:#fff;
paddig:3px;
text-align:center;
}
#plan .plan_box:nth-child(1) .info{
margin-bottom:30px;
}
#plan .plan_img{
text-align:center;
margin-bottom:100px;
padding:0 20px;
}

/*
#plan .plan_photo{
width:100%;
}
#plan .plan_photo .plan_info{
align-items:center;
}
#plan .plan_photo .info{
display:flex;
gap:50px;
}
#plan .plan_photo .plan_img{
max-width:80%;
margin:0 auto 30px;
}
*/
/*
#plan .vr{
width:90%;
margin:0 auto 30px;}
#plan .vr p{
background:transparent;
}
#plan .vr a{
color:#fff;
text-decoration:none;
}
*/
.plan_link{
}
.plan_link a{
background:#b18046;
padding:10px;
display:block;
text-align:center;
}
.plan_link a img{
width:auto;
}


.sample_box{
background:url(../img/c_example_bg.png);
background-size: cover;
padding:120px 0;
}
.sample_box .inner{
max-width: 940px;
margin: 0 auto;
}
.sample_box h4{
font-size:25px;
text-align:center;
margin-bottom:20px;
position: relative;
text-align: center;
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.sample_box h4:before,
.sample_box h4:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 40%;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.sample_box h4:before {
  left: 0;
}

.sample_box h4:after {
  right: 0;
}

.sample_list_box{
display:flex;
justify-content:space-between
}
.sample_list{
width:100%;
max-width:420px;
}
.sample_list p{
font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
color:#fff;
background:#003851;
padding:5px 0;
width:100%;
text-align:center;
font-size:28px;
margin-bottom:15px;
}
.sample_list ul{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.sample_list li{
margin-bottom:15px;
position:relative;
}
.sample_list li.half{
width:48%;
}
.sample_list li a:before{
content: url(../img/plus.png);
position: absolute;
top:0;
right:0;
width:44px;
height:44px;
}

.sample_box .slide_box{
max-width:940px;
margin:0 auto;
}
.sample_box .swiper_wrap{
max-width:940px;
margin:0 auto 30px;
overflow:hidden;
}
.sample_box .slider-thumbnail_wrap{
max-width:940px;
margin:0 auto;
position:relative;
}
.sample_box .slider-thumbnail{
max-width:830px;
margin:0 auto;
overflow:hidden;
}
.sample_box .swiper-button-next, .sample_box .swiper-rtl .swiper-button-prev{
}
.sample_box .swiper-button-next{
position:absolute;
right:10px;
top:50%;
}
.sample_box .swiper-button-prev{
position:absolute;
left:10px;
top:50%;
}


#equip{
margin-bottom:180px;
}
.equip_area{
padding:120px 0;
margin:-62px auto 0;
background:#f2ebe7;
}
.equip_wrap{
max-width:940px;
margin:0 auto 30px;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}

.equip_box{
width:30%;
background:#fff;
font-size:18px;
}
.equip_box h5{
font-size:18px;
text-align:center;
margin:15px auto 40px;
}
.equip_box p{
width:95%;
margin:0 auto 30px;
}
/*
.equip_box ul{
width:85%;
margin:0 auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;z
}
.equip_box li{
width:49%;
margin-bottom:20px;
}
*/
.equip1{
border-top:4px solid #e58558;
color:#e58558;
}
.equip2{
border-top:4px solid #804f21;
color:#804f21;
}
.equip3{
border-top:4px solid #c69e62;
color:#c69e62;
}

#outline{
margin-bottom:180px;
}
#outline h3{
margin-bottom:90px;
}
.outline_box{
max-width:980px;
margin:0 auto;
display:flex;
justify-content:space-between;
}
.outline_box div{

}
.outline_left{
width:49%;
}
.outline_right{
width:49%;
}
.outline_box dl{
display:flex;
margin-bottom:35px;
font-size:18px;
}
.outline_box dt{
width:30%;
color:#e58558;

}
.outline_box dt:before{
content:"";
border-left:4px solid #e58558;
padding-left:10px;
}
.outline_box dd{
width:70%;
}

.notice{
margin-top:50px;
}
.notice h6{
border:1px solid #333;
font-size:22px;
padding:3px;
text-align:center;
margin-bottom:15px;
}
.notice{
}

#progress{
margin-bottom:90px;
}
.progress_area{
padding:120px 0;
margin:-62px auto 0;
background:#ede8dc;
}
.progress_box{
max-width:940px;
margin:0 auto 60px;
}
.progress_box h6{
background:#fff;
font-size:18px;
text-align:center;
padding:5px;
margin-bottom:20px;
}
.progress_box ul{
display:flex;
/*justify-content:center;*/
flex-wrap: wrap;
/*justify-content:flex-start;*/
gap:3.5%;
}
.progress_box li{
width:31%;
/*margin-left:3.5%;*/
margin-bottom:20px;
}
/*.progress_box li:nth-child(3n+1){
margin-left:0%;
}*/
.wide_progress{
}
.wide_progress li{
width:48.25%;
/*margin-left:3.5%;*/
margin-bottom:20px;
}

.progress2202 ul,.progress2204 ul,.progress2205 ul,
.progress2206 ul,.progress2209 ul,.progress2210 ul,
.progress2211 ul{
justify-content:center;
}
.progress2203 ul.progress2208 ul,
.progress2212 ul,.progress2301 ul{
justify-content:flex-start;
}
.progress2302 ul{
justify-content:flex-start;
flex-wrap:wrap;
}
.progress2302 li.half{
width:48.25%;
}
.progress2302 li.quarter{
width:22.37%;
}


.quick{
max-width:940px;
margin:110px auto 0;
}


#map{
padding:120px 0 140px;
margin:-62px auto 0;
background:#f2ebe7;
/*margin-bottom:110px;*/
}
#map h3{
margin-bottom:80px;
}
.map_img{
max-width:940px;
margin:0 auto 70px;
}

.page_top{
width:110px;
margin:0 auto;
}

.contect{
background:#e58558;

}
.contect ul{
max-width:940px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
padding:70px 0;
}


footer{
text-align:center;
padding:50px;
}
.f_logo{
width:300px;
margin:0 auto 10px;
}
.f_info{
margin-bottom:40px;
}


.swiper-button-next, .swiper-button-prev{
color:#999!important;
}

@media screen and (max-width: 769px){
.pc{
display:none;
}
.sp{
display:block;
}



.news_box{
margin-bottom:10%;
}

/****** 新着情報 SP ******/
.news {
display: flex;
margin-top: 0;
background: #fff;
margin-left: auto;
margin-right: auto;
height: auto;
color: #333;
z-index: 1;
}
.news_tit{
background:#e58558;
width:17%;
height:60px;
display:flex;
align-items:center;
justify-content:center;
}
.news_tit img{
width:90%;
margin:0 auto;
}
.ticker {
flex: 4;
}
.ticker ul {
width: 100%;
position: relative;
background: #fff;
font-size: 13px;
font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
.ticker ul li {
padding: 3%;
width: 100%;
display: none;
box-sizing:border-box;
}
.ticker ul li span {
margin-left: 0;
margin-right: 0;
padding-left: 0;
}


.btn_area{
margin-bottom:15%;
}
.btn_area p{
max-width:90%;
margin:0 auto 10%;
text-align:center;
fon-size:16px;
line-height:1.5em;
}
.nav_btn{
max-width:90%;
margin:0 auto;
flex-wrap:wrap;
justify-content:center;
gap:5%;
}
.nav_btn li{
width:30%;
margin-bottom:5%;
}


h3{
text-align:center;
width:30%;
margin:0 auto;
}
h3 img{
max-width:100%;
}


#design{
margin-bottom:15%;
}
.design_box{
background-size: cover;
padding:20% 0;
margin:-13% auto 0;
}
.slide_box{
max-width:940px;
margin:0 auto;
}
.design_box_inner{
max-width:90%;
margin:0 auto;
}

#plan{
margin-bottom:15%;
}
#plan h3{
margin-bottom:5%;
}
#plan .torikago{
width:80%;
margin:0 auto 10%;
}

#plan .plan_wrap{
max-width:90%;
margin:0 auto 5%;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
#plan .plan_box{
margin-bottom:10%;
width:100%;
}
#plan .plan_box img{
max-width:100%;
}
#plan .plan_info{
display:flex;
align-items:flex-start;
margin-bottom:3%;
}
#plan .type{
width:55%;
margin-right:5%;
}
#plan .info{
width:40%;
font-size:17px;
}
#plan .info li{
margin-top:3%;
width:90%;
text-align:center;
}
#plan .info span{
width:100%;
display:inline-block;
margin-right:10px;
paddig:3px;
text-align:center;
}
#plan .plan_img{
text-align:center;
margin-bottom:10%;
}
/*
#plan .plan_photo{
width:100%;
}
#plan .plan_photo .plan_info{
display:flex;
align-items:flex-start;
margin-bottom:3%;
}
#plan .plan_photo .info{
display:block;
width:40%;
font-size:17px;
}
#plan .plan_photo .plan_img{
max-width:90%;
margin:0 auto 10%;
}
*/

.plan_link{
/*display:flex;*/
/*justify-content:flex-end;*/
}


.sample_box{
background-size: cover;
padding:15% 0;
}
.sample_box h4{
font-size:20px;
margin-bottom:20px;
}
.sample_box h4:before,
.sample_box h4:after {
  position: absolute;
  top: calc(50% - 3px);
  width: 20%;
  height: 6px;
  content: '';
  border-top: solid 2px #000;
  border-bottom: solid 2px #000;
}

.sample_box h4:before {
  left: 0;
}

.sample_box h4:after {
  right: 0;
}

.swiper_wrap{
max-width:90%;
margin:0 auto 30px;
overflow:hidden;
position:relative;
}
.sample_box .slider-thumbnail_wrap{
max-width:100%;
margin:0 auto;
position:relative;
}
.sample_box .slider-thumbnail{
max-width:80%;
margin:0 auto;
overflow:hidden;
}
.sample_box .swiper-button-next{
position:absolute;
right:0%;
top:50%;
}
.sample_box .swiper-button-prev{
position:absolute;
left:0%;
top:50%;
}


.sample_list_box{
display:block;
justify-content:space-between
}
.sample_list{
max-width:90%;
margin:0 auto;
}
.sample_list p{
font-size:28px;
margin-bottom:5%;
}
.sample_list ul{
}
.sample_list li{
margin-bottom:5%;
}
.sample_list li.half{
}
.sample_list li:before{
content: url(../img/plus.png);
position: absolute;
top:0;
right:0;
}


#equip{
margin-bottom:15%;
}
.equip_area{
padding:20% 0;
margin:-12% auto 0;
background:#e2e7e7;
}
.equip_wrap{
max-width:90%;
margin:0 auto 5%;
display:block;
}

.equip_box{
width:100%;
background:#fff;
font-size:18px;
margin-bottom:10%;
}
.equip_box h5{
font-size:16px;
text-align:center;
margin:5% auto 10%;
}
.equip_box p{
width:95%;
margin:0 auto;
padding-bottom:10%;
}

/*
.equip_box ul{
width:85%;
margin:0 auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
}
.equip_box li{
width:49%;
margin-bottom:20px;
}
*/
.equip1{
}
.equip2{
}
.equip3{
}

#outline{
margin-bottom:15%;
}
#outline h3{
margin-bottom:10%;
}
.outline_box{
max-width:90%;
margin:0 auto;
display:block;
}
.outline_box div{
width:100%;
margin-bottom:3%;
}
.outline_box dl{
display:block;
margin-bottom:5%;
font-size:19px;
}
.outline_box dt{
width:100%;
}
.outline_box dt:before{
content:"";
padding-left:10px;
}
.outline_box dd{
width:100%;
}

#progress{
margin-bottom:10%;
}
.progress_area{
padding:10% 0;
margin:12% auto 0;
}
.progress_box{
max-width:90%;
margin:0 auto 5%;
}
.progress_box h6{
background:#fff;
font-size:18px;
text-align:center;
padding:5px;
margin-bottom:20px;
}
.progress_box ul{
display:flex;
justify-content:center;
flex-wrap: wrap;
justify-content:space-between;
}
.progress_box li{
width:48%;
margin-left:0;
margin-bottom:20px;
}
.progress_box li:nth-child(3n+1){
margin-left:0%;
}
.progress2202 ul{
justify-content:space-between;
}
.wide_progress{
display:block;
}
.wide_progress li{
width:100%;
margin-left:0;
margin-bottom:5%;
}
.progress2302 ul{
justify-content:space-between;
flex-wrap:wrap;
}
.progress2302 li.half{
width:100%;
}
.progress2302 li.quarter{
width:48%;
}
.quick{
max-width:90%;
margin:10% auto 0;
}


#map{
padding:10% 0;
margin:12% auto 0;
}
#map h3{
margin-bottom:5%;
}
.map_img{
max-width:90%;
margin:0 auto 10%;
}

.page_top{
width:30%;
margin:0 auto 15%;
}

.contect{
background:#003851;

}
.contect ul{
max-width:90%;
margin:0 auto;
display:block;
padding:5% 0;
}
.contect li{
margin-bottom:5%;
}
.contect li:last-child{
margin-bottom:0;
}


footer{
text-align:center;
padding:5%;
}
.f_logo{
width:80%;
margin:0 auto 3%;
}
.f_info{
margin-bottom:5%;
}

.swiper-button-next:after{
font-size:20px!important;
font-weight:bold;
text-align:left;
}
.swiper-button-prev:after{
font-size:20px!important;
font-weight:bold;
text-align:right;
}

}