@charset "UTF-8";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated:  2010-09-17
Author:  Richard Clark - http: //richclarkdesign.com
Twitter:  @rich_clark
*/
@import url("https://fonts.googleapis.com/css2?family=Cantarell:wght@700&family=Oswald:wght@400;500;700&display=swap");
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-variant-ligatures: none;
          font-variant-ligatures: none;
  -webkit-text-size-adjust: 100%;
}

html {
 overflow-y: scroll;
}

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

body {
  line-height: 1;
  margin-top: 140px!important;
}

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

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
  color: #000;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

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

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

main {
  display: block;
}

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

img[src$=".svg"] {
  display: block;
  width: 100%;
  height: auto;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* FONT
***************************************************************/



/* 会社概要リンクリスト
***************************************************************/
.companyMenuBox {
  padding-top: 74px;
}

.companyMenuList {
  width: 1200px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.companyMenuList li {
  width: calc(100% / 6);
}

.companyMenuList li a {
  display: block;
  font-size: 15px;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
  padding-bottom: 15px;
  position: relative;
}

.companyMenuList li a::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 3px;
  background: #335167;
}

.companyMenuList li.ls0 a {
  letter-spacing: 0;
}

@media all and (min-width: 681px) {
  .companyMenuList li.act a::before {
    width: 100%;
  }
  .companyMenuList li a::before {
    -webkit-transition: right 0.3s, left 0.3s, width 0.3s;
    transition: right 0.3s, left 0.3s, width 0.3s;
  }
  .companyMenuList li a:hover::before {
    right: auto;
    left: 0;
    width: 100%;
  }
}

@media all and (max-width: 680px) {
  .companyMenuBox {
    padding-top: 0;
  }
  .companyMenuList {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    border-top: 1px solid #DEDEDE;
  }
  .companyMenuList li {
    width: calc(100% / 2);
    height: 50px;
    border-bottom: 1px solid #DEDEDE;
  }
  .companyMenuList li:nth-child(odd) {
    border-right: 1px solid #DEDEDE;
  }
  .companyMenuList li.act {
    background: #335167;
  }
  .companyMenuList li.act a {
    color: #fff;
  }
  .companyMenuList li.act a::before {
    content: none;
  }
  .companyMenuList li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    font-size: 14px;
    line-height: 1.3;
    padding-bottom: 0;
  }
  .companyMenuList li a::before {
    content: '';
    position: absolute;
    bottom: auto;
    right: 7px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    width: 7px;
    height: 7px;
    background: none;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
  }
}

/* 会社概要リンクリスト
***************************************************************/



/* 共通タイトル
***************************************************************/
.profileTitle {
  font-size:230%;
  font-family: 'Yu Gothic UI Semibold'; 
  letter-spacing: 0.3em;
  font-weight: 500;
  color: #f5f5f5;
  text-align: center;
  margin-bottom: 60px;
 /* border-bottom: 1px solid #ccc;*/
  width:500px; 
  margin:0 auto 2% auto;
  position: relative;
  /*padding: 1rem 2rem calc(1rem + 10px);*/
  padding:calc(0.1rem + 5px) 2rem 0.8rem  ;  
  background: #708090;
}

.profileTitle:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #000;
}

.profileTitle span {
  display: inline-block;
  padding-bottom: 19px;
  position: relative;
}


/*.profileTitle span::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #335167;
}*/

.profileTitle2 {
  font-size:180%;
/*  font-family: 'Yu Gothic UI Semibold'; */
  letter-spacing: 0.1em;
  font-weight: 600;
  width:1100px; 
  margin:0 auto;
  text-align: center;
  line-height:2;
}

.profileTitle2  span{
  font-size:240%;
/*  font-family: 'Yu Gothic UI Semibold'; */
  letter-spacing: 0.1em;
  margin:0 0 0 0;
  color:#ab050f;
}
.profileTitle2  span2{
  color:#ab050f;
  font-size:140%;    
}



.gaiyou {
	color:#1e1c1c;
	font-size:70%;
	line-height:1em;
	text-align:left;
	padding: 0 3%;
}  



/* 共通タイトル
***************************************************************/



/* 共通タイトルsp
***************************************************************/
@media all and (max-width: 680px) {
    
    
.profileTitle {
  font-size: 140%;
/*  font-family: 'Yu Gothic UI Semibold'; */
  letter-spacing: 0.2em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
 /* border-bottom: 1px solid #ccc;*/
  line-height: 2.5;

  width:70%; 
  margin-left: 3%;
  margin:0 auto;
  position: relative;
  padding:calc(0.1rem + 1px) 0.5rem 0.1rem ;
}
/*
.profileTitle:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #000;
}
*/


.profileTitle span {
  display: inline-block;
  padding-bottom: 10px;
  position: relative;
}

    
.profileTitle2 {
  font-size:150%;
  width:100%; 
  margin:3% auto 0 auto;
  text-align: center;
  line-height:1.5;
}   


.gaiyou {
	color:#1e1c1c;
	font-size:70%;
	line-height:1em;
	text-align:left;
	padding:1% 2%;
}  

 
    
    
    
}
/* 共通タイトルsp
***************************************************************/




/* Sec01
***************************************************************/

.sec01{
    margin:  0;
}


.sec01 .bg001{
  background:rgb(249 250 251 / var(--tw-bg-opacity, 1));
  padding: 6% 0 6% 0;
}


.sec01 .inner {
  width: 1100px;
  margin: auto;
}


.sec01 .inner h1{
  font-size:100%;  
}
.sec01 .inner p{
  font-size:100%;  
}


.sec01 .inner .tochi_text {
  width: 100%;
}

.sec01 .inner .tochi_text p{
  font-size:100%;
  line-height: 1.5;
  margin:0 auto 0 auto;    
}

.sec01 .inner .area_title{
    width: 100%;
    margin: 0 0 3% 0;
}
.sec01 .inner .area_title .eg01{
    color: rgb(142 112 38 / var(--tw-text-opacity, 1));
    font-size: 160%;
    text-align: center;
    font-family: "Great Vibes", cursive;
}
.sec01 .inner .area_title .subtitle01{
    font-size: 200%;
    text-align: center;
    font-weight: 600;
    margin:0 0 1% 0;
}
.sec01 .inner .area_title .sub_text01{
    font-size: 100%;
    text-align: center;
    line-height: 1.6;
}


.sec01 .inner .tochi_area{
    width: 21.5%;
    display: inline-block;
    margin: 1% 1.5% 2% 1.5%;
    border: solid 2px rgb(197 160 71 / var(--tw-border-opacity, 1));
    color:rgb(197 160 71 / var(--tw-border-opacity, 1));
    padding: 0.5% 0 0.6% 0;
    border-radius: 10px;
    text-align: center;
    background: #fff;
}
.sec01 .inner .tochi_area:hover{
    border: solid 2px rgb(197 160 71 / var(--tw-border-opacity, 1));
    color:#fff;
    background: rgb(197 160 71 / var(--tw-border-opacity, 1));
}




.sec01 .inner .loc01{
    height:200px;
    /*background:#F5F7F6;*/
    background: rgba(255,255,255,0.6);
    margin:20% auto;
    
    
}

.sec01 .inner .loc01 .loc01_left250{
    width:40%;
    float:left;
    display: inline-block;
    margin: 3% 0 0 0;
}


.sec01 .inner .loc01 .loc01_titile{
    font-size:180%;
    text-align: center;
    color: #708090;
    line-height: 2;
}


.sec01 .inner .loc01 .explan01{
    font-size:110%;
    text-align: center; 
    line-height: 1.8;
}

.sec01 .inner .loc01 .loc01_photo{
    width:60%;
    float:right;
    display: inline-block;
       
}

.sec01 .inner .loc01 .loc01_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
 overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc01 .photo01 {
  position: absolute;
  top: -210px; /* 上に20pxはみ出させる */
  right: -100px; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
  transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc01 .photo01.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}

.sec01 .inner .station_time{
    width: 100%;
    margin:-18% 0 0 0; 
}


.sec01 .inner .loc02{
    width:1100px;
    height: 200px;
    /*background:#F5F7F6;*/
    background: rgba(255,255,255,0.6);
    margin:30% auto;
    
    
}

.sec01 .inner .loc02 .loc02_left250{
    width:40%;
    float:right;
    display: inline-block;
    margin: 3% 0 0 0;
}


.sec01 .inner .loc02 .loc02_titile{
    font-size:180%;
    text-align: center;
    color: #708090;
    line-height: 2;
}

.sec01 .inner .loc02 .explan01{
    font-size:110%;
    text-align: center; 
    line-height: 1.8;
}

.sec01 .inner .loc02 .loc02_photo{
    width:60%;
    float:left;
    display: inline-block;
       
}

.sec01 .inner .loc02 .loc02_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc02 .photo02 {
  position: absolute;
  top: -210px; /* 上に20pxはみ出させる */
  left: -100px; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(-30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc02 .photo02.show {
 opacity: 1;
  transform: translateX(0);  /* 位置を元に戻す */
 
}


.sec01 .inner .loc03{
    width:1100px;
    height: 200px;
    /* background:#F5F7F6;*/
    background: rgba(255,255,255,0.6);
    margin:15% auto;
  }

.sec01 .inner .loc03 .loc03_left250{
    width:40%;
    float:left;
    display: inline-block;
    margin: 3% 0 0 0;
}


.sec01 .inner .loc03 .loc03_titile{
    font-size:180%;
    text-align: center;
    color: #708090;
    line-height: 2;
}

.sec01 .inner .loc03 .explan01{
    font-size:110%;
    text-align: center; 
    line-height: 1.8;
}


.sec01 .inner .loc03 .loc03_photo{
    width:60%;
    float:right;
    display: inline-block;
       
}

.sec01 .inner .loc03 .loc03_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc03 .photo03 {
  position: absolute;
  top: -210px; /* 上に20pxはみ出させる */
  right: -100px; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc03 .photo03.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}


.sec01 .inner .loc04{
    width:1100px;
    height: 200px;
    /* background:#F5F7F6;*/
    background: rgba(255,255,255,0.6);
    margin:30% auto 15% auto; 
}

.sec01 .inner .loc04 .loc04_left250{
    width:40%;
    float:right;
    display: inline-block;
    margin: 3% 0 0 0;
}


.sec01 .inner .loc04 .loc04_titile{
    font-size:180%;
    text-align: center;
    color: #708090;
    line-height: 2;
}


.sec01 .inner .loc04 .explan01{
    font-size:110%;
    text-align: center; 
    line-height: 1.8;
}

.sec01 .inner .loc04 .loc04_photo{
    width:60%;
    float:left;
    display: inline-block;     
}


.sec01 .inner .loc04 .loc04_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc04 .photo04 {
  position: absolute;
  top: -210px; /* 上に20pxはみ出させる */
  left: -100px; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(-30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc04 .photo04.show {
 opacity: 1;
  transform: translateX(0);  /* 位置を元に戻す */
 
}


.sec01 .inner .loc05{
    width:1100px;
    height: 200px;
    /* background:#F5F7F6;*/
    background: rgba(255,255,255,0.6);
    margin:30% auto 15% auto;
  }

.sec01 .inner .loc05 .loc05_left250{
    width:40%;
    float:left;
    display: inline-block;
    margin: 3% 0 0 0;
}


.sec01 .inner .loc05 .loc05_titile{
    font-size:180%;
    text-align: center;
    color: #708090;
    line-height: 2;
}

.sec01 .inner .loc05 .explan01{
    font-size:110%;
    text-align: center; 
    line-height: 1.8;
}


.sec01 .inner .loc05 .loc05_photo{
    width:60%;
    float:right;
    display: inline-block;
       
}

.sec01 .inner .loc05 .loc05_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc05 .photo05 {
  position: absolute;
  top: -210px; /* 上に20pxはみ出させる */
  right: -100px; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc05 .photo05.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}


.sec01 .inner .map_tit{
    font-size:180%;
    text-align: center; 
    margin: 0 0 2% 0;
    letter-spacing: 0.2rem;
}


.sec01 .inner .heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 150%;
	text-align: center;
    margin: 3% 0% 0% 0%;
}

.sec01 .inner .heading04::before,
.sec01 .inner .heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #708090;
}

.sec01 .inner .heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.sec01 .inner .heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}









/* 1箱に収めるラッパ */
.sec01 .inner .slider3-box{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;     /* ← はみ出しを防止 */
}

/* スライド各コマを絶対配置の基準にする */
#slider3 > div{ position: relative; }

/* 画像のはみ出し＆行間隙間を抑止 */
#slider3 img{ display:block; width:100%; height:auto; }

/* bxSliderのビューポートを親幅にフィット＆隠す */
.bx-wrapper, .bx-viewport{ width:100% !important; }
.bx-viewport{ overflow:hidden !important; }

/* （キャプションがある場合）帯が枠外に出ないように */
#slider3 div p{
  position:absolute; left:0; right:0; bottom:0;
}

/* サムネの左右矢印が重なってもはみ出さない */
.thumbs-wrap .bx-wrapper{ margin:0 48px !important; }

/* サムネがUL/LIの場合の基本（既に同等の定義があるなら不要） */
.bxslider_thumbnail3{ list-style:none; margin:0; padding:0; }
.bxslider_thumbnail3 > li{ padding:0 4px; }
.bxslider_thumbnail3 > li > a{ display:block; position:relative; padding-top:75%; }
.bxslider_thumbnail3 > li > a > img{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  max-width:100%; max-height:100%;
}








/* ラッパと矢印 */
.thumbs-wrap { position: relative; }
.thumb-prev, .thumb-next {
  position: absolute; top: 40%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5)!important;
  display: inline-block;
  z-index:100;
}
.thumb-prev { left: -8px; }
.thumb-next { right: -8px; }

/* くの字アイコン（白チート線） */
.thumb-prev::after, .thumb-next::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 50%;
  left: 50%;
}
.thumb-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.thumb-next::after { transform: translate(-65%, -50%) rotate(45deg); }

/* bx のラッパに左右余白（矢印と重ならないように） */
.thumbs-wrap .bx-wrapper { margin: 0 48px !important; }







.venue-bar {
      background-color: #001d37;   /* 画像のようなブルーグレー */
      color: #ffffff;
      padding:1.5% 0 1.3% 0;
      font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
      font-size: 130%;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      /* 横いっぱいにしたくない場合は inline-block にする */
      display: block;
    }



    .feature-wrapper {
      max-width: 100%;
      margin: 0 auto;
/*      padding: 10px 0; */
    }

    .feature-box {
      background: #fff;
      border-radius: 24px;
      padding: 20px 50px 15px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
	  margin: 2% 5%;
    }

    .feature-title {
      font-size: 26px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-align: center;
    }

.feature-title span{
    color:red;
    font-size: 20px;
    margin-left:1%;
}

    .feature-content {
      display: flex;
      gap: 20px;
      align-items: flex-end;
	  flex-wrap: nowrap;          /* 横並びを強制 */
    }

.feature-interior{
	width: 65%;
}


/* タイトルと画像を横並びに */
.feature-header {
  display: flex;
  align-items: center;
  gap: 20px; /* 画像とタイトルの間の余白 */
  margin-bottom: 5px;
}

/* 画像サイズを調整（必要に応じて変更可能） */
.feature-header-img img {
  width: 100px; 
  height: auto;
  border-radius: 8px; /* 写真が角丸の場合 */
}




	

/* 左カラム：スライダー */
.feature-interior-slider {
  flex: 7;
  overflow: visible;   /* ← もしくは この行を削除でもOK */
  width: 100%;
  position: relative;   /* ★これを追加 */
}


.feature-interior-slider img{
	width: 100%;
}
.feature-interior-slider2 {
  flex: 7;
  overflow: visible;   /* ← もしくは この行を削除でもOK */
  width: 100%;
  position: relative;   /* ★これを追加 */
}


.feature-interior-slider2 img{
	width: 100%;
}

/* 右カラム */
.feature-exterior {
  flex: 3;
  padding: 0 0 2% 0;
}
	
	
/*
    .feature-interior,
    .feature-exterior {
      flex: 1;
	  width:70%;
    }*/

.feature-interior img,
.feature-exterior img {
      width: 100%;
      display: block;
    }
.feature-interior2 img {
      width: 100%;
      display: block;
    }


    .plan-btn {
      display: inline-block;
      margin: 24px 0 0 15%;
      padding: 14px 40px;
      background: #000;
      color: #fff;
      border-radius: 999px;
      text-decoration: none;
      font-size: 16px;
      text-align: center;
      border: thin solid #000; 
    }
   .plan-btn:hover {
      background: #fff;
      color: #000; 
   }
	.plan-btn a{
	color:#fff;
	}
	.plan-btn a:hover{
	color: #000;
	}



.three_dimensional_btn {
  width: 80%;
  margin: 5% 10% 1% 10%;
  font-size: 120%;
  text-align: center;
  display: inline-block;
  padding: 0.8em 3em;
  background-color: #942343; /* 背景色 */
  box-shadow: 0 5px 0 #6c2735; /* 影の太さ・色 */
  border-radius: 60px;
  color: #fff;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
}
.three_dimensional_btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}




/* スライダー本体だけ横幅100%にする */
.feature-interior-slider {
  width: 100%;
}

/* 画像はカラム幅にフィットさせる */
.feature-interior-slider img {
  width: 100%;
  height: auto;
  display: block;
}



/* bxSlider の数字 1,2,3 をシンプルなドットに変える */

/* ページャ全体の位置・横並び */
.bx-wrapper .bx-pager {
  text-align: center;
  padding-top: 12px;
}

.bx-wrapper .bx-pager-item {
  display: inline-block;
}

/* ドット本体（aタグ） */
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  display: inline-block;
  background: #d6d6d6;   /* 非アクティブ色 */
  border-radius: 50%;
  text-indent: -9999px;  /* ← 「1,2,3」の数字を画面外に隠す */
  overflow: hidden;
}

/* アクティブなドット */
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #333;      /* アクティブ色 */
}


/* feature 内スライダーのドットをシンプルに表示 */
.feature-interior-slider .slick-dots {
  position: static;              /* 画像のすぐ下に並べる */
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 3px;
}

.feature-interior-slider .slick-dots li {
  margin: 0;
}

.feature-interior-slider .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d6d6d6;           /* 通常のドット色 */
  font-size: 0;                  /* 数字を消す */
  line-height: 0;
}

/* アクティブなドット */
.feature-interior-slider .slick-dots li.slick-active button {
  background: #333;              /* アクティブ色 */
}

/* slick のデフォルト疑似要素を殺す */
.feature-interior-slider .slick-dots li button:before {
  content: none;
}


/* ===== feature 内スライダーの矢印位置調整 ===== */

.feature-interior-slider .slick-prev,
.feature-interior-slider .slick-next {
  position: absolute !important;
  top: 50%;                      /* 上下中央 */
  transform: translateY(-50%);   /* 完全中央揃え */
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 左矢印を左端に */
.feature-interior-slider .slick-prev {
  left: -20px;
}

/* 右矢印を右端に */
.feature-interior-slider .slick-next {
  right: -20px;
}


/* ボタン本体（丸グレー）はそのままでOK */
.feature-interior-slider .slick-prev,
.feature-interior-slider .slick-next {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;          /* 「Previous」「Next」の文字を消す */
}

/* 中の白いくの字矢印を border で描く */
.feature-interior-slider .slick-prev::after,
.feature-interior-slider .slick-next::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 50%;
  left: 50%;
}

/* ←（左矢印） */
.feature-interior-slider .slick-prev::after {
  transform: translate(-35%, -50%) rotate(-135deg);
}

/* →（右矢印） */
.feature-interior-slider .slick-next::after {
  transform: translate(-65%, -50%) rotate(45deg);
}

/* 丸の左右位置 */
.feature-interior-slider .slick-prev { left: -20px; }
.feature-interior-slider .slick-next { right: -20px; }






/* スライダー本体だけ横幅100%にする */
.feature-interior-slider2 {
  width: 100%;
  margin: 0 auto 50px; /* 下に余裕を持たせてドットを見せる */
  position: relative;
  overflow: visible !important; /* 矢印を見せるために必須 */
}

/* 画像はカラム幅にフィットさせる */
.feature-interior-slider2 img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- スライド間の隙間を作る設定 --- */
.feature-interior-slider2 .slick-slide {
  margin: 0 10px; /* 画像と画像の間の隙間 */
  transition: opacity 0.3s;
}

/* 中央にないスライドを少し暗く・薄くする場合（任意） */
.feature-interior-slider2 .slick-slide:not(.slick-center) {
  opacity: 0.6;
}

/* bxSlider の数字 1,2,3 をシンプルなドットに変える */

/* ページャ全体の位置・横並び */
.bx-wrapper .bx-pager {
  text-align: center;
  padding-top: 12px;
}

.bx-wrapper .bx-pager-item {
  display: inline-block;
}

/* ドット本体（aタグ） */
.bx-wrapper .bx-pager.bx-default-pager a {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  display: inline-block;
  background: #d6d6d6;   /* 非アクティブ色 */
  border-radius: 50%;
  text-indent: -9999px;  /* ← 「1,2,3」の数字を画面外に隠す */
  overflow: hidden;
}

/* アクティブなドット */
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #333;      /* アクティブ色 */
}


/* feature 内スライダーのドットをシンプルに表示 */
.feature-interior-slider2 .slick-dots {
  position: static;              /* 画像のすぐ下に並べる */
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 3px;
}

.feature-interior-slider2 .slick-dots li {
  margin: 0;
}

.feature-interior-slider2 .slick-dots li button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d6d6d6;           /* 通常のドット色 */
  font-size: 0;                  /* 数字を消す */
  line-height: 0;
}

/* アクティブなドット */
.feature-interior-slider2 .slick-dots li.slick-active button {
  background: #333;              /* アクティブ色 */
}

/* slick のデフォルト疑似要素を殺す */
.feature-interior-slider2 .slick-dots li button:before {
  content: none;
}


/* ===== feature 内スライダーの矢印位置調整 ===== */

.feature-interior-slider2 .slick-prev,
.feature-interior-slider2 .slick-next {
  position: absolute !important;
  top: 50%;                      /* 上下中央 */
  transform: translateY(-50%);   /* 完全中央揃え */
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}



/* ボタン本体（丸グレー）はそのままでOK */
.feature-interior-slider2 .slick-prev,
.feature-interior-slider2 .slick-next {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;          /* 「Previous」「Next」の文字を消す */
}

/* 中の白いくの字矢印を border で描く */
.feature-interior-slider2 .slick-prev::after,
.feature-interior-slider2 .slick-next::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  top: 50%;
  left: 50%;
}

/* ←（左矢印） */
.feature-interior-slider2 .slick-prev::after {
  transform: translate(-35%, -50%) rotate(-135deg);
}

/* →（右矢印） */
.feature-interior-slider2 .slick-next::after {
  transform: translate(-65%, -50%) rotate(45deg);
}

/* 丸の左右位置 */
.feature-interior-slider2 .slick-prev { left: 1%; }
.feature-interior-slider2 .slick-next { right: 1%; }




/* --- 2つのBOXを横並びに配置 --- */
.house-box-wrap {
  display: flex;
  justify-content: center;
  gap: 40px;               /* BOX同士の間隔 */
  padding: 0 0 20px 0;
}

/* --- 各BOXのデザイン --- */
.house-box {
  background: #fff;
  width: 43%;            /* BOXの幅（調整可） */
  padding: 20px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 3px 16px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;  /* 中身を縦並びにする */
  gap: 15px;
}


/* タイトル左に画像を置くコンテナ */
.house-header {
  display: flex;
  align-items: flex-start;   /* 上揃え */
  gap: 12px;                 /* 画像とタイトルの間 */
  margin-bottom: 10px;
}

/* 左側に置く画像（アイコン） */
.house-header-icon {
  width: 100px;        /* お好みで調整可能 例: 50〜80px */
  height: auto;
  flex-shrink: 0;     /* 画像が縮まないように */
}


/* タイトル（あなたの画像のフォントデザインに寄せた） */
.house-title {
  font-size: 20px;
  line-height: 1.8;
  font-weight: 500;
}

/* 外観画像 */
.house-img img {
  width: 80%;
  height: auto;
  border-radius: 10px;
}

/* --- ボタン --- */
.house-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 14px 40px;
  margin: 0 15%;
  border-radius: 999px;
  font-size: 18px;
  text-decoration: none;
  margin-top: auto;        /* ボタンを下寄せ */
}


.kaijyo{
width:100%;
margin: 10px auto;
padding:2% 5%;
display:flex;	
}

.kaijyo .ggmap{
width:55%;
display:flex;
}


.kaijyo .modelpop{
width: 45%;	
padding: 1% 2%;
}

.kaijyo .modelpop h1{
  text-align: center;
  font-size: 120%;
  line-height: 1.8;
  font-weight: 600;
}

.kaijyo .modelpop p{
  text-align: left;
  font-size: 100%;
  line-height: 1;
  font-weight: 500;
  padding: 2.5% 0 2.5% 4%; 
}


.kaijyo .modelpop hr {
  margin: 2% auto 2% auto;
  width: 100%;
  border: 0;
  border-top: 1.5px solid #000;
}

.kaijyo .tochi_text3 p{
  font-size:20px;
  line-height: 2;
  margin:0 auto;    
  text-align: center; 
}


.kaijyo .tochi_text3 h1{
  font-size:20px;
  line-height: 2; 
  text-align: center;
  margin-bottom:0; 
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, /* Mac用 */ 'Yu Mincho', /* Windows用 */ serif;
font-weight:100;  
}

.kaijyo .tochi_text3 h1 span{
  font-size:30px;
  line-height: 2; 
  text-align: center;   
  color:#ba2636; 
font-weight:600;   
}




/* Sec01
***************************************************************/

/* Sec01 sp
***************************************************************/

@media all and (max-width: 680px) {

.sec01 {
  padding: 0 0 0% 0;
}
    
.sec01 .bg001{
  padding: 6% 0 6% 0;
}    
    
.sec01 .inner {
  width: 98%!important;
  margin: auto;
}
    
    
.sec01 .inner .area_title{
    width: 100%;
    margin: 0 0 5% 0;
}
.sec01 .inner .area_title .eg01{
    font-size: 120%;
    text-align: center;
}
.sec01 .inner .area_title .subtitle01{
    font-size: 150%;
    text-align: center;
    margin:0 0 1% 0;
}
.sec01 .inner .area_title .sub_text01{
    font-size: 90%;
    text-align: center;
    line-height: 1.6;
}    
  

.sec01 .inner .tochi_area{
    width: 45.5%;
    display: inline-block;
    margin: 1% 1.5% 2% 1.5%;
    padding: 0.8% 0 1% 0;
    border-radius: 10px;
    text-align: center;
}

    
    
    
.sec01 .inner .loc01{
    width:90%;
    height:310px;
    margin:5% auto 5% auto;  
    
}

.sec01 .inner .loc01 .loc01_left250{
    width:98%;
   
}


.sec01 .inner .loc01 .loc01_titile{
    font-size:110%;
    text-align: center;
    padding:0;    
}


.sec01 .inner .loc01 .explan01{
    font-size:90%;
    text-align: center; 
    line-height: 1.8;
}

 
.sec01 .inner .loc01 .loc01_photo{
   width:90%;
   margin: 0 5% 0 5%;
          
}



.sec01 .inner .loc01 .loc01_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc01 .photo01 {
  position: absolute;
  top:0; /* 上に20pxはみ出させる */
  right: 0; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc01 .photo01.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}
    
    
.sec01 .inner .station_time{
    width: 100%;
    margin:-1% 0 0 0; 
}    
    
  
.sec01 .inner .loc02{
     width:90%;
     height:310px;
     margin:5% auto 5% auto;   
}

.sec01 .inner .loc02 .loc02_left250{
    width:98%;
}


.sec01 .inner .loc02 .loc02_titile{
    font-size:110%;
    text-align: center;
    padding:0;
}

.sec01 .inner .loc02 .explan01{
    font-size:90%;
    text-align: center; 
    line-height: 1.8;
}

.sec01 .inner .loc02 .loc02_photo{
    width:90%;
   margin: 0 5% 0 5%;
}

.sec01 .inner .loc02 .loc02_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc02 .photo02 {
  position: absolute;
  top: 0; /* 上に20pxはみ出させる */
  left: 0; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(-30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc02 .photo02.show {
 opacity: 1;
  transform: translateX(0);  /* 位置を元に戻す */
 
}


.sec01 .inner .loc03{
     width:90%;
     height:310px;
    margin:5% auto 5% auto;
 
}

.sec01 .inner .loc03 .loc03_left250{
    width:98%;
   
}

.sec01 .inner .loc03 .loc03_titile{
    font-size:110%;
    text-align: center;
    padding:0;
}

.sec01 .inner .loc03 .loc03_titile span{
    font-size:70%;
      
}


.sec01 .inner .loc03 .explan01{
    font-size:90%;
    text-align: center; 
    line-height: 1.8;
}


.sec01 .inner .loc03 .loc03_photo{
    width:90%;
   margin: 0 5% 0 5%;
   
}



.sec01 .inner .loc03 .loc03_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc03 .photo03 {
  position: absolute;
  top: 0; /* 上に20pxはみ出させる */
  right: 0; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc03 .photo03.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}


.sec01 .inner .loc04{
    width:90%;
    height:310px;
    margin:5% auto 5% auto;
    
    
}

.sec01 .inner .loc04 .loc04_left250{
    width:98%;
    
}

.sec01 .inner .loc04 .loc04_titile{
    font-size:110%;
    text-align: center;
    padding:0;
}


.sec01 .inner .loc04 .explan01{
    font-size:90%;
    text-align: center; 
    line-height: 1.8;
}


.sec01 .inner .loc04 .loc04_photo{
    width:90%;
   margin: 0 5% 0 5%;
       
}


.sec01 .inner .loc04 .photo04 {
  position: absolute;
  top:0px; /* 上に20pxはみ出させる */
  left: 0; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(-30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc04 .photo04.show {
 opacity: 1;
  transform: translateX(0);  /* 位置を元に戻す */
 
}
   
    
    
.sec01 .inner .loc05{
     width:90%;
     height:310px;
    margin:5% auto 5% auto;
 
}

.sec01 .inner .loc05 .loc05_left250{
    width:98%;
   
}

.sec01 .inner .loc05 .loc05_titile{
    font-size:110%;
    text-align: center;
    padding:0;
}

.sec01 .inner .loc05 .loc05_titile span{
    font-size:70%;
      
}


.sec01 .inner .loc05 .explan01{
    font-size:90%;
    text-align: center; 
    line-height: 1.8;
}


.sec01 .inner .loc05 .loc05_photo{
    width:90%;
   margin: 0 5% 0 5%;
   
}



.sec01 .inner .loc05 .loc05_photo{
  position: relative;
 /* 親要素の幅 */
 /* 親要素の高さ */
    
  overflow: visible; /* 枠外に出る内容を表示する */
}

.sec01 .inner .loc05 .photo05 {
  position: absolute;
  top: 0; /* 上に20pxはみ出させる */
  right: 0; /* 左に20pxはみ出させる */
  height: auto;
 /* transform: rotate(10deg); /* 角度を付けて配置 */
  border: 5px solid #fff; /* 白い枠線を追加 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 軽い影を追加 */   
   transition: transform 0.6s ease, opacity 0.6s ease; /* フェードインのトランジション */
  opacity: 0;
  transform: translateX(30px); /* 初期位置を右にずらす */
}

.sec01 .inner .loc05 .photo05.show {
  opacity: 1;
  transform: translateX(0); /* 位置を元に戻す */
 
}       
    
.sec01 .inner .map_tit{
    font-size:120%;
       text-align: center;  
    margin-top: 10%;
}
    

.sec01 .inner .heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 120%;
	text-align: center;
}

.sec01 .inner .heading04::before,
.sec01 .inner .heading04::after {
	content: '';
	width: 3px;
	height: 30px;
}

.sec01 .inner .heading04::before {
	margin-right: 5%;
	transform: rotate(-25deg)
}
.sec01 .inner .heading04::after {
	margin-left: 5%;
	transform: rotate(25deg)
}  




.secTochi .inner .slick-img img{
  height: auto;
  width: 100%;
}




.venue-bar {
      padding: 10px 20px;
      font-size: 120%;
      letter-spacing: 0.08em;
      text-align: center;
      /* 横いっぱいにしたくない場合は inline-block にする */
      display: block;
    }


  .feature-wrapper {
    max-width: 100%;
    margin: 0 auto;
  }

  .feature-box {
    padding: 20px 10px 15px;
  }

  .feature-title {
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.1em;
	text-align:left;
  }

 .feature-title span{
    color:red;
    font-size: 12px;
    margin-left:0;
    letter-spacing: 0.01em; 
     
}   
    
    
    
    
    
    
  .feature-content {
    display: block;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: nowrap;
  }

  .feature-interior {
    width: 100%;
  }


/* タイトルと画像を横並びに */
.feature-header {
  display: flex;
  align-items: center;
  gap: 2px; /* 画像とタイトルの間の余白 */
  margin-bottom: 5px;
}

/* 画像サイズを調整（必要に応じて変更可能） */
.feature-header-img img {
  width: 100px; 
  height: auto;
  border-radius: 8px; /* 写真が角丸の場合 */
}


/* 左側に置く画像（アイコン） */
.house-header-icon {
  width: 60px;        /* お好みで調整可能 例: 50〜80px */
  height: auto;
  flex-shrink: 0;     /* 画像が縮まないように */
}


	

/* 左カラム：スライダー */
.feature-interior-slider {
  flex: 7;
  overflow: visible;   /* ← もしくは この行を削除でもOK */
  width: 100%;
  position: relative;   /* ★これを追加 */
}


.feature-interior-slider img{
	width: 100%;
}


/* 右カラム */
.feature-exterior {
  flex: 3;
  padding: 0 0 2% 0;
}
	
	
/*
    .feature-interior,
    .feature-exterior {
      flex: 1;
	  width:70%;
    }*/

    .feature-interior img,
    .feature-exterior img {
      width: 70%;
      display: block;
	  margin: 10px auto 0;

    }

    .plan-btn {
        width: 80%;
        text-align: center;
		margin: 10px 30px 0;
      }
	
	.plan-btn a{
	color: white;
	}
    
    
    
.three_dimensional_btn {
  width: 80%;
  margin: 5% 10% 1% 10%;
  font-size: 110%;
  text-align: center;
  display: inline-block;
  padding: 0.8em 3em;
  border-radius: 60px;
  cursor: pointer;
  text-decoration: none; /* 文字の下線を消す */
}
.three_dimensional_btn:hover {
  box-shadow: none;
  transform: translateY(5px);
}
    
	

/* スライダー本体だけ横幅100%にする */
.feature-interior-slider {
  width: 100%;
}

/* 画像はカラム幅にフィットさせる */
.feature-interior-slider img {
  width: 100%;
  height: auto;
  display: block;
}




  .house-box-wrap {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 20px 0;
  }

  .house-box {
    width: 90%;
    padding: 15px;
  }


/* タイトル左に画像を置くコンテナ */
.house-header {
  display: flex;
  align-items: flex-start;   /* 上揃え */
  gap: 5px;                 /* 画像とタイトルの間 */
  margin-bottom: 10px;
}

/* 左側に置く画像（アイコン） */
.house-header-icon {
  width: 70px;        /* お好みで調整可能 例: 50〜80px */
  height: auto;
  flex-shrink: 0;     /* 画像が縮まないように */
}



/* タイトル（あなたの画像のフォントデザインに寄せた） */
.house-title {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.1em;
	text-align:left;
	padding: 2px 0 0 0;
  }



/* --- ボタン --- */
.house-btn {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 14px 40px;
  margin: 0 8%;
  border-radius: 999px;
  font-size: 16px;
  text-decoration: none;
  margin-top: auto;        /* ボタンを下寄せ */
}




.sec01 .kaijyo{
width:100%;
margin: 10px auto;
padding:2% 5%;
display:block;	
}

.sec01 .kaijyo .ggmap{
width:100%;
display:flex;
}


.sec01 .kaijyo .modelpop{
width: 100%;	
padding: 7% 2%;
}

.sec01 .kaijyo .modelpop h1{
  text-align: center;
  font-size: 110%;
  line-height: 1.8;
}

.sec01 .kaijyo .modelpop p{
  text-align: left;
  font-size: 100%;
  line-height: 1.8;
  padding: 0 0 0 5%; 
}


.sec01 .kaijyo .modelpop hr {
  margin: 5px auto;
  width: 100%;

}

.sec01 .kaijyo .tochi_text3 p{
  font-size:20px;
  line-height: 2;
  margin:0 auto;    
  text-align: center; 
}


.sec01 .kaijyo .tochi_text3 h1{
  font-size:20px;
  line-height: 2; 
  text-align: center;
  margin-bottom:0; 
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, /* Mac用 */ 'Yu Mincho', /* Windows用 */ serif;
font-weight:100;  
}

.sec01 .kaijyo .tochi_text3 h1 span{
  font-size:30px;
  line-height: 2; 
  text-align: center;   
  color:#ba2636; 
font-weight:600;   
}



}
/* Sec01 sp
***************************************************************/



/* Sec011
***************************************************************/

.sec011 .bottomsen{
    border-bottom: 1px solid gray;
    padding-bottom: 5%;
}


.sec011 {
  background:#cde5bf;
  padding: 3% 0 1% 0;
}

.sec011 .inner {
  width: 1100px;
  margin: auto;
}


.sec011 .inner h1{
  font-size:100%;  
}
.sec011 .inner p{
  font-size:100%;  
}

/* 1箱に収めるラッパ */
.sec011 .inner .slider3-box{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;     /* ← はみ出しを防止 */
}

.sec011 .kaijyo .modelpop{
width: 100%;	
padding: 3% 2%;
}

.sec011 .kaijyo .modelpop h1{
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 600;
}

.sec011 .kaijyo .modelpop p{
  text-align: left;
  font-size: 18px;
  line-height: 1.8;
  font-weight: 600;
  padding: 0 0 0 15%; 
}


.sec011 .kaijyo .modelpop hr {
  margin: 12px auto;
  width: 90%;
  border: 0;
  border-top: 2px solid #000;
}




/* Sec011
***************************************************************/


/* Sec011 sp
***************************************************************/
@media all and (max-width: 680px) {
	
.sec011 {
  padding: 8% 0 0% 0;
}
    
.sec011 .inner {
  width: 98%!important;
  margin: auto;
}
  

.sec011 .kaijyo{
width:100%;
margin: 10px auto;
padding:2% 5%;
display:block;	
}

.sec011 .kaijyo .ggmap{
width:100%;
height:300px;
display:flex;
}


.sec011 .kaijyo .modelpop{
width: 100%;	
padding: 7% 2%;
}

.sec011 .kaijyo .modelpop h1{
  text-align: center;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
}

.sec011 .kaijyo .modelpop p{
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
  padding: 0 0 0 5%; 
}


.sec011 .kaijyo .modelpop hr {
  margin: 5px auto;
  width: 90%;
  border: 0;
  border-top: 2px solid #000;
}

.sec011 .kaijyo .tochi_text3 p{
  font-size:20px;
  line-height: 2;
  margin:0 auto;    
  text-align: center; 
}


.sec011 .kaijyo .tochi_text3 h1{
  font-size:20px;
  line-height: 2; 
  text-align: center;
  margin-bottom:0; 
font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, /* Mac用 */ 'Yu Mincho', /* Windows用 */ serif;
font-weight:100;  
}

.sec011 .kaijyo .tochi_text3 h1 span{
  font-size:30px;
  line-height: 2; 
  text-align: center;   
  color:#ba2636; 
font-weight:600;   
}







}
/* Sec011 sp
***************************************************************/



/* Sec012
***************************************************************/


.sec012 {
  margin: 1% 0 1% 0;
}

.sec012 .inner {
  width: 1100px;
  margin: auto;
}


.sec012 .inner h1{
  font-size:100%;  
}
.sec012 .inner p{
  font-size:100%;  
}

/* グリッドレイアウト */

.sec012 .inner .tochi_layout{
    width: 30%;
    display: inline-block;
}
.sec012 .inner .tochi-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* カード単体 */
.sec012 .inner .tochi-card {
    background: #fff;
    /*width: calc(33.333% - 14px);*/ /* 3カラム */
    width: calc(50% - 14px); /* 2カラム */
    border: 1px solid #e5e7eb;
    border-top: 5px solid #c5a047; /* 金色のアクセントライン */
    border-radius: 8px;
    padding: 1.5%;
    position: relative;
    transition: transform 0.3s ease;
    /*display: flex;*/
    flex-direction: column;
}
.sec012 .inner .tochi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sec012 .inner .tochi-card .landplan_imgbox{
    width: 49.5%;
    display: inline-block;
}
.sec012 .inner .tochi-card .tochi_cardbox{
    width: 49%;
    display: inline-block;
}


.sec012 .inner .tochi-card .card-tag {
    background: #4c4c4c;
    color: #fff;
    font-size:90%;
    padding: 1% 2%;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 2.5%;
    width: fit-content;
}

.sec012 .inner .tochi-card h4 {
    font-size: 100%;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
    /*height: 3em;*/ /* 高さを揃える */
}
.sec012 .inner .tochi-card h4 span{
    font-size: 70%;      
}

.sec012 .inner .tochi-card .card-info .tochi_kakaku {
    font-size: 100%;
    color: #000;
    margin:0 0 1% 0;
    text-align: center;
}
.sec012 .inner .tochi-card .card-info .tochi_kakaku span {
    font-size: 160%;
    font-weight: 700;
    color: #ab050f; /* チラシに合わせて赤色 */
    margin: 0;
    line-height: 1.5;
}

.sec012 .inner .tochi-card .card-info .access {
    font-size: 90%;
    color: #666;
    margin: 0 0 0 0;
    line-height: 1.6;
}

.sec012 .inner .tochi-card .card-point {
    font-size:90%;
    font-weight: 600;
    color: #8e7026;
    border: 1px solid #8e7026;
    text-align: center;
    padding: 1% 2%;
    margin:0 0 2.5% 0; 
    border-radius: 4px;
    width: fit-content;
    display: inline-block;
}

.sec012 .inner .tochi-card .card-btn {
    display: block;
    background: #0b419b;
    color: #fff;
    text-align: center;
    padding:1% 0 1.5% 0;
    margin: 2% 0 0 0;
    border-radius: 4px;
    font-weight: 600;
    font-size: 110%;
    transition: background 0.3s;
}
.sec012 .inner .tochi-card .card-btn:hover {
    background: #335167;
}


.sec012 .inner .tochi-card2 {
    /*background: #fff;*/
    width: calc(32.2% - 14px); /* 3カラム */
    /*width: calc(50% - 14px);*/ /* 2カラム */
    /*border: 1px solid #e5e7eb;*/
    /*border-top: 5px solid #c5a047;*/ /* 金色のアクセントライン */
    /*border-radius: 8px;*/
    /*padding: 1.5%;*/
    position: relative;
    transition: transform 0.3s ease;
    /*display: flex;*/
    flex-direction: column;
    margin: 3% 1% 5% 1%;
    display: inline-block;
}
.sec012 .inner .tochi-card2 .popimg{
    position: relative;
    border: solid #666 thin;
    border-radius: 6px; 
}
.sec012 .inner .tochi-card2 .popimg img{
    border-radius: 6px; 
}

.sec012 .inner .tochi-card2 .popimg .card-tag {
    background: #4c4c4c;
    color: #fff;
    font-size:90%;
    padding: 1% 2%;
    display: inline-block;
    border-radius: 4px;
    position: absolute;
    width: fit-content;
    top:0;
    left: 0;
}
.sec012 .inner .tochi-card2 .popimg .card-point {
    font-size:90%;
    font-weight: 600;
    color: #8e7026;
    border: 1px solid #8e7026;
    background: #fff;
    text-align: center;
    padding: 0.5% 2% 0.5% 2%;
    border-radius: 4px;
    width: fit-content;
    position: absolute;
    bottom:0;
    right: 0;
}
.sec012 .inner .tochi-card2 h4 {
    font-size: 100%;
    font-weight: 600;
    line-height: 1.2;
    margin:3.5% 0 3.5% 0;
    /*height: 3em;*/ /* 高さを揃える */
    text-align: left;
}
.sec012 .inner .tochi-card2 h4 span{
    font-size: 70%;      
}


.sec012 .inner .tochi-card2 .card-info .access01 {
    font-size: 90%;
    color: #666;
    line-height: 1.5;
    border: solid #666 thin;
    border-radius: 6px;
    width: 30%;
    display: inline-block;
    text-align: center;
     margin: 1.5% 0 2% 0;
}
.sec012 .inner .tochi-card2 .card-info .access02 {
    font-size: 90%;
    color: #666;
    line-height: 1.5;
    width: 68%;
    display:inline-block;
     margin: 1.5% 0 2% 0;
}
.sec012 .inner .tochi-card2 .card-btn {
    display: block;
    background: #3f3f3f;
    border: solid thin #3f3f3f;
    color: #fff;
    text-align: center;
    padding:1% 0 1.5% 0;
    margin: 3% 15% 0 15%;
    border-radius: 4px;
    font-weight: 600;
    font-size: 90%;
    transition: background 0.3s;
    width: 70%;
}
.sec012 .inner .tochi-card2 .card-btn:hover {
    background: #fff;
    color: #3f3f3f;
}







.sec012 .inner .area_title{
    width: 100%;
    margin: 1% 0 0 0;
}
.sec012 .inner .area_title .eg02{
    color: rgb(142 112 38 / var(--tw-text-opacity, 1));
    font-size: 160%;
    text-align: center;
    font-family: "Great Vibes", cursive;
}
.sec012 .inner .area_title .subtitle02{
    font-size: 200%;
    text-align: center;
    font-weight: 600;
    margin:0 0 1% 0;
}
.sec012 .inner .area_title .sub_text02{
    font-size: 100%;
    text-align: center;
    line-height: 1.6;
}


/* Sec012
***************************************************************/


/* Sec012 sp
***************************************************************/
@media all and (max-width: 680px) {
	
.sec012 {
  margin: 1% 0 1% 0;
}
    
.sec012 .inner {
  width: 98%!important;
  margin: auto;
}
  

/* グリッドレイアウト */

.sec012 .inner .tochi_layout{
    width: 30%;
    display: inline-block;
}
.sec012 .inner .tochi-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

/* カード単体 */
.sec012 .inner .tochi-card {
    background: #fff;
    /*width: calc(33.333% - 14px);*/ /* 3カラム */
    width: calc(50% - 14px); /* 2カラム */
    border: 1px solid #e5e7eb;
    border-top: 5px solid #c5a047; /* 金色のアクセントライン */
    border-radius: 8px;
    padding: 1.5%;
    position: relative;
    transition: transform 0.3s ease;
    /*display: flex;*/
    flex-direction: column;
}
.sec012 .inner .tochi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.sec012 .inner .tochi-card .landplan_imgbox{
    width: 49.5%;
    display: inline-block;
}
.sec012 .inner .tochi-card .tochi_cardbox{
    width: 49%;
    display: inline-block;
}


.sec012 .inner .tochi-card .card-tag {
    background: #4c4c4c;
    color: #fff;
    font-size:90%;
    padding: 1% 2%;
    display: inline-block;
    border-radius: 4px;
    margin-bottom: 2.5%;
    width: fit-content;
}

.sec012 .inner .tochi-card h4 {
    font-size: 100%;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 15px;
    /*height: 3em;*/ /* 高さを揃える */
}
.sec012 .inner .tochi-card h4 span{
    font-size: 70%;      
}

.sec012 .inner .tochi-card .card-info .tochi_kakaku {
    font-size: 100%;
    color: #000;
    margin:0 0 1% 0;
    text-align: center;
}
.sec012 .inner .tochi-card .card-info .tochi_kakaku span {
    font-size: 160%;
    font-weight: 700;
    color: #ab050f; /* チラシに合わせて赤色 */
    margin: 0;
    line-height: 1.5;
}

.sec012 .inner .tochi-card .card-info .access {
    font-size: 90%;
    color: #666;
    margin: 0 0 0 0;
    line-height: 1.6;
}

.sec012 .inner .tochi-card .card-point {
    font-size:90%;
    font-weight: 600;
    color: #8e7026;
    border: 1px solid #8e7026;
    text-align: center;
    padding: 1% 2%;
    margin:0 0 2.5% 0; 
    border-radius: 4px;
    width: fit-content;
    display: inline-block;
}

.sec012 .inner .tochi-card .card-btn {
    display: block;
    background: #0b419b;
    color: #fff;
    text-align: center;
    padding:1% 0 1.5% 0;
    margin: 2% 0 0 0;
    border-radius: 4px;
    font-weight: 600;
    font-size: 110%;
    transition: background 0.3s;
}
.sec012 .inner .tochi-card .card-btn:hover {
    background: #335167;
}


.sec012 .inner .tochi-card2 {
    /*width: calc(32.2% - 14px);*/ /* 3カラム */
    width: 80%;
    position: relative;
    transition: transform 0.3s ease;
    flex-direction: column;
    margin: 5% 10% 10% 10%;
    display: inline-block;
}
.sec012 .inner .tochi-card2 .popimg{
    position: relative;
}

.sec012 .inner .tochi-card2 .popimg .card-tag {
    font-size:90%;
    padding: 1% 2%;
    display: inline-block;
    border-radius: 4px;
    position: absolute;
    width: fit-content;
    top:0;
    left: 0;
}
.sec012 .inner .tochi-card2 .popimg .card-point {
    text-align: center;
    padding: 0.5% 3% 0.5% 3%;
    border-radius: 4px;
    width: fit-content;
    position: absolute;
    bottom:0;
    right: 0;
}
.sec012 .inner .tochi-card2 h4 {
    font-size: 105%;
    line-height: 1.2;
    margin:3.5% 0 3.5% 0;
    /*height: 3em;*/ /* 高さを揃える */
    text-align: left;
}
.sec012 .inner .tochi-card2 h4 span{
    font-size: 70%;      
}


.sec012 .inner .tochi-card2 .card-info .access01 {
    font-size: 90%;
    line-height: 1.5;
    width: 30%;
    display: inline-block;
    text-align: center;
    padding: 0.5% 0 1% 0;
    margin: 1.5% 1% 2% 0;
}
.sec012 .inner .tochi-card2 .card-info .access02 {
    font-size: 95%;
    line-height: 1.5;
    width: 67.5%;
    display:inline-block;
    margin: 1.5% 0 2% 0;
}
.sec012 .inner .tochi-card2 .card-btn {
    display: block;
    text-align: center;
    padding:1% 0 1.5% 0;
    margin: 3% 15% 0 15%;
    font-size: 100%;
    transition: background 0.3s;
    width: 70%;
}



.sec012 .inner .area_title{
    width: 100%;
    margin: 1% 0 0 0;
}
.sec012 .inner .area_title .eg02{
    font-size: 120%;
    text-align: center;
}
.sec012 .inner .area_title .subtitle02{
    font-size: 150%;
    text-align: center;
    margin:0 0 0 0;
}
.sec012 .inner .area_title .sub_text02{
    font-size: 90%;
    text-align: center;
    line-height: 1.6;
}








}
/* Sec012 sp
***************************************************************/






/* Sec02
***************************************************************/

.sec02 {
 /* background:#fff;*/
  padding: 2% 0 0 0;
}

.sec02 .inner {
  width: 1100px;
  margin: auto;
}


.sec02 .inner .profileTitle:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 3px solid #000;
}

.sec02 .inner .profileTitle span {
  display: inline-block;
  padding-bottom: 19px;
  position: relative;
}

.sec02 .inner .place{
  font-size: 120%;
  text-align: left;
  margin: 0% auto 0% 28%;
}

.sec02 .inner .place2{
  font-size: 120%;
  text-align: left;
  margin: 0% auto 0% 28%;
}


.sec02 .inner .heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 150%;
	text-align: center;
    margin: 3% 0% 0% 0%;
}

.sec02 .inner .heading04::before,
.sec02 .inner .heading04::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #708090;
}

.sec02 .inner .heading04::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.sec02 .inner .heading04::after {
	margin-left: 30px;
	transform: rotate(35deg)
}



.sec02 .inner .night-tour{
  margin: 2% 0 2% 0;
  padding: 2.5% 1% 1% 1%;
  background:#191970 ;  
}
.sec02 .inner .night-tour .leftside{
  float: left;
  width:29%;
  margin: 0 1% 0 0;
  
}
.sec02 .inner .night-tour .rightside{
  float:right;
  width:69%;
  margin: 0 0 0 1%;      
}
.sec02 .inner .night-tour h1{
  font-size: 150%;
  color: #ffff00;
  text-align: center;
  border: 2px solid #ffff00;
  padding: 4% 1% 5% 1% ;
 }
.sec02 .inner .night-tour p{
  font-size: 130%;
  color: #fff;
    padding: 2.5% 0 2% 0 ;
 }


.sec02 .inner ul{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}


.sec02 .inner ul li{
  width: 30%;
  margin:1.5%;
}


.sec02 .inner ul li {
  cursor: pointer;
  max-width: 380px;
  overflow: hidden;
  width: 100%;
}
.sec02 .inner ul li img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.sec02 .inner ul li:hover img {
  transform: scale(1.1); /* 拡大 */
}


.sec02 .inner .outlook{
  width: 19.5%;
  margin: 1% 0 2% 0;
  display: inline-block;
}



.sec02 .inner .furniture{
  width: 100%;
  margin: 3% 0 3% 0;
}









/* Sec02
***************************************************************/



/* Sec02 sp
***************************************************************/
@media all and (max-width: 680px) {

.sec02 {
  padding: 1% 0 0 0;
}

.sec02 .inner {
  width: 98%;
  margin: auto;
}
    
.sec02 .inner .heading04 {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 120%;
	text-align: center;
}

.sec02 .inner .heading04::before,
.sec02 .inner .heading04::after {
	content: '';
	width: 3px;
	height: 30px;
}

.sec02 .inner .heading04::before {
	margin-right: 5%;
	transform: rotate(-25deg)
}
.sec02 .inner .heading04::after {
	margin-left: 5%;
	transform: rotate(25deg)
}    
    
.sec02 .inner .night-tour{
  margin: 2% 3% 2% 3%;
  padding: 2.5% 1% 1% 1%;
  width:94%;    
}
.sec02 .inner .night-tour .leftside{
  float: left;
  width:96%;
  margin: 0 2% 1% 2%;
  
}
.sec02 .inner .night-tour .rightside{
  float:right;
  width:96%;
  margin: 0 2% 0 2%;      
}
.sec02 .inner .night-tour h1{
  font-size: 120%;
  text-align: center;
  border: 2px solid #ffff00;
  padding: 3% 1% 3% 1% ;
 }
.sec02 .inner .night-tour p{
  font-size: 100%;
  padding: 2.5% 0 2% 0 ;
  line-height: 1.5;
  text-align: center;
 }    
    

.sec02 .inner ul{
  width: 98%;
  margin: auto;
  display:contents;
  justify-content: center;
  align-items: center;    
}


.sec02 .inner ul li{
  margin:2% 10% 2% 10%;
  float:left;
  cursor: pointer;
  overflow: hidden;
  width:80%;
}
.sec02 .inner ul li img {
  height: auto;
  transition: transform .6s ease; /* ゆっくり変化させる */
}
.sec02 .inner ul li:hover img {
  transform: scale(1.1); /* 拡大 */
}


.sec02 .inner　.profileTitle {
  font-size: 140%;
  font-family: 'Yu Gothic UI Semibold'; 
  letter-spacing: 0.2em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
 /* border-bottom: 1px solid #ccc;*/
  line-height: 2.5;

  width:70%; 
  margin-left: 3%;
  margin:0 auto;
  position: relative;
  padding:calc(0.1rem + 1px) 0.5rem 0.1rem ;
}

.sec02 .inner .place{
  font-size: 120%;
  text-align: left;
  margin: 0% auto 0% 12%;
}

.sec02 .inner .place2{
  font-size: 120%;
  text-align: left;
  margin: 0% auto 0% 12%;
}

    
.sec02 .inner .outlook{
  width: 30.5%;
  margin: 1% 1% 2% 1%;
  display: inline-block;
}



.sec02 .inner .furniture{
  width: 100%;
  margin: 3% 0 3% 0;
}    
    
    

}
/* Sec02 sp
***************************************************************/


/* Sec03
***************************************************************/
.sec03 {
  background:#f7f6fb;
  padding: 5% 0 5% 0;
}

.sec03 .inner {
  width: 1100px;
  margin: auto;
}



.sec03 .post_text01 {
  display: inline-block;
  width:100%;
  text-align: center;
  font-size:150%;
  color:#746228;
  font-weight:bold;
  border-top: solid 3px #746228;
  border-bottom: solid 3px #746228;
  margin: 0 auto 3% auto;
  padding: 15px 5px 15px 5px;
}

 .bottom_sen{
    padding-bottom:2%;
    margin-bottom: 4%;
    border-bottom:thin gray dotted;
}    


.model_title {
	font-size: 180%;
}

.model_title span {
	display: flex;
	align-items: center;
	font-size:90%;
	text-transform: uppercase;
    line-height: 2.5;
}

.model_title span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 3px;
	background-color: #000;
}




.sec03 .inner p.model_exam {
    position: relative;
    margin:5% 0;
    font-size:100%;
    text-align:center;
}



.sec03 .inner .modelphoto{
    width:100%;
    margin: 2% 0 3% 0;
    }
.sec03 .inner .modelphoto h1{
    font-size: 120%;
    text-align:left;
    line-height: 1.8;
    }
.sec03 .inner .modelphoto p{
    font-size: 100%;
    line-height: 1.2;
    text-align:left;
    }
.sec03 .inner .modelphoto2{
    width:45.5%;
    margin: 3% 2% 3% 2%;
    display: inline-block;
}
.sec03 .inner .modelphoto2 h1{
    font-size: 120%;
    line-height: 1.8;
    }
.sec03 .inner .modelphoto2 p{
    font-size: 100%;
    line-height: 1.2;
    text-align:left;
    }	    


.kakaku{
    width:100%;
}


    
.price-2{ 
   width:100%;
   margin:2% 0 2% 0;
   display:inline-block;
       
  display: flex;
  align-items: center;   /* ← 縦中央揃え */
  justify-content: center;
  gap: 20px;   
   }

.title-2{
    margin:0;
    border: solid 1px;
    padding:1% 0 1% 0 ;
    width:30%;
    text-align: center;
    font-size:85%!important;
    background: #000000;
    color:#ffffff;
    display: inline-block;
 }


.nijiu{
  position: relative;
}
.nijiu::before,
.nijiu::after {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(0);
  background-color: red;
  width: 100%;
  height: 2px;
  left: 0;
}
.nijiu::before {
  top: 55%;
}
.nijiu::after {
  top: 42%;
}


.old_price{
    font-size:100%!important;
    display: inline-block;
    text-align: center;
    margin:0 ;
    line-height: 1.3;
    position: relative;
}


.old_price span{
    font-size:200%;
}


.new_price::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.7em 0 0;
  border:11px solid transparent;
  border-right: 0 solid transparent;
  border-left: 15px solid #000;
  vertical-align: middle;  
}


.new_price{
    color:red;
    font-size:250%!important;
    display: inline-block;
    line-height:0.4;
    /*margin-bottom: 2%;
    padding-top: 1%;*/
    text-align: right;
}

.new_price span{
    color:#000000;
    font-size:37%;
    margin-bottom: 1%;
}


.price{
    color:red;
    font-size:250%!important;
    text-align: center;
    float:left;
    display: inline-block;
    margin-bottom: 2%;
    padding-top: 5%;
}

.price span{
    color:#000000;
    font-size:40%;
    margin-bottom: 1%;
    padding-top: 5%;
    display: inline-block;
}





.price_right{
    width:45%; 
    border: solid 1px;
    display:inline-block;
    margin:2% 0;
}


.price_right2{
    width:45%; 
    display:inline-block;
    margin:2% 0;
}

.price_right3{
    width:98%; 
    margin-top:10%;
    border: solid 1px;
    display:inline-block;
  
}



.price_ex{
    width:100%;
    background: #000000;
    color:#fff;
    padding:2%;
    margin:0 auto 3% auto;
    text-align: center;
    font-size: 110%;
}
    
.sec03 .inner .kingaku{
    width:100%;
    margin:0 auto;
}
 
.sec03 .inner .kingaku dl{
    border-bottom: thin dashed gray;
    margin-bottom: 5%;
}    
    
    
.sec03 .inner .kingaku dt{
    width:15%;
    font-size:110%;
    display:inline-block;
    text-align: right;
    line-height: 1.2;
}

.sec03 .inner .kingaku dd{
    width:30%;
    font-size:120%;
    display:inline-block;
     text-align: right;
    line-height: 1.2;
    vertical-align: bottom;
}
.sec03 .inner .kingaku dd span{
   font-size:150%;
}

.sec03 .inner .kingaku dt2{
    width:35%;
    font-size:110%;
    display:inline-block;
    text-align: right;
    line-height: 1.2;
}

.sec03 .inner .kingaku dd2{
    width:10%;
    font-size:120%;
    display:inline-block;
     text-align: right;
    line-height: 1.2;
    vertical-align: bottom;
}

.sec03 .inner .kingaku dd2 span2{
   font-size:100%;
}



    
.sec03 .inner .ka_tx{
    width:90%;
    margin:1% auto;
    font-size:80%;
    line-height:1.5;
}    
       
 .sec03 .inner .point{
    width:100%;
    margin:5% 0 5% 0; 
}

.sec03 .inner .point p.catch {
  display: flex;  
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  font-size:150%;
  margin: 0 0 2% 0;
}
.sec03 .inner .point p.catch:before, .point p.catch:after {
  border-top: 1px solid;
  content: "";
  width:4em; /* 線の長さ */
}
.sec03 .inner .point p.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.sec03 .inner .point p.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}

.sec03 .inner ul {
    width:100%;
	display: flex;
    margin:0 auto;
	justify-content: space-between;
}
.sec03 .inner li {
	width: 32%;
    margin:1% ;
    padding:10px 0;
    text-align: center;
    display:inline-block;
	box-sizing: border-box;
	position: relative;
    background:#6e7c84;
    color:#ffffff;
    border-radius:3px;
    font-size: 100%;
}



.model_other {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 180%;
	text-align: center;
}

.model_other::before,
.model_other::after {
	content: '';
	width: 3px;
	height: 40px;
	background-color: #000;
}

.model_other::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.model_other::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

.sec03 .inner .modelselect{
    width:39.5%;
    margin: 2% 5% 3% 5%;
    display: inline-block;    
    background: #000;
    
}
.sec03 .inner .modelselect .modelselectimg{
    width:100%;
    position: relative;
    margin-bottom: 1%;
}
.sec03 .inner .modelselect .modelselectimg .modelselect_text{
    position: absolute;
    bottom: 2%;
    left: 1%;
    color:#ffffff;
    font-size: 120%;
 /*   border-top: 1.5px solid gray;*/
    border-bottom: 1.5px solid #fff;
    padding: 2% 5%;
}
.sec03 .inner .modelselect .modelselect_text2{
    font-size: 100%;
    text-align: center;
    color:#ffffff;
    padding:0 4%;
    line-height:1.6;
    margin: 2%;
}



.kakaku2{
    width:100%;
    margin: 0 0 1% 0;
}


    
.price-3{ 
  width:50%;
  margin:2% 1% 2% 1%;
  float:left;
  display:inline-block;
   }

.title-3{
    margin:1% 5% 0.5% 5%;
    border: solid 2px;
    padding:5px 4px;
    width:150px;
    text-align: center;
    float:left;
    font-size:120%!important;
    background: #ffffff;
    color:#000;
 
 }

.tochi_price{
    font-size:350%;
    font-weight: 600;
    color:red;
    padding-left:2%;
}

.tochi_price span{
    font-size:70%;
}



.scall {
  position: relative;
  padding-top:20px;
  padding-right: 100px;
  font-size:200%;
  text-align: right; /* 文字の中央寄せ */
}
.scall::before {
  background-color: #000; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  content: "";
  height: 3px; /* 線の高さ */
  left:68%; /* 線の中央寄せ */
  position: absolute;
  top: 10px; /* 線の位置 */
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 140px; /* 線の長さ */
}

.scall  span{
  font-size:70%;
  text-align: right; /* 文字の中央寄せ */
}



.price-co{
  width:40%;
  margin:2% 1% 2% 1%;
  float:left;
  display:inline-block;
   }


.txt_bb{
  font-size:350%;
  font-family: "Kaisei Tokumin", serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
}
.txt_bb2{
  font-size:350%;
  font-family: "Kaisei Tokumin", serif;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.2rem;
  padding: 0 0 1% 0;
  border-bottom: thin solid gray;
}
.txt_bb2 span{
  font-size:50%;
  margin:0 0 0 2% ;
}

.txt_ss{
    width:62%;
    margin:0 auto;
    padding-top:5%;
    font-size:100%;
    line-height: 1.8;
}

.top-zone03 {
    margin:7% 0;
	width: 100%;
	height: 350px;
	background: url(../img/work_img.jpg) center center repeat-x;
	background-size: auto 100%;
	position: relative;
	overflow: hidden;
	-webkit-animation: fadeAnimations 1000s linear infinite;
    -moz-animation: fadeAnimations 1000s linear infinite;
    -ms-animation: fadeAnimations 12000s linear infinite;
    animation: fadeAnimations 3000s linear infinite;
}



@-webkit-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}

@-moz-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}
@-ms-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}
@keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}



.sec03 .inner .outline_text{
   font-size: 80%;
   line-height: 1.1;
   margin:  0 0 0 0;
}



/* Sec03
***************************************************************/



/* Sec03 sp
***************************************************************/

@media all and (max-width: 680px) {

  

.sec03 {
  padding: 10% 0 10% 0;
}

.sec03 .inner {
  width: 98%;
  margin: auto;
}



.sec03 .post_text01 {
  display: inline-block;
  width:100%;
  text-align: center;
  font-size:120%;
  margin: 0 auto 5%;
  padding: 15px 5px 15px 5px;
}

.bottom_sen{
    padding-bottom:2%;
    margin-bottom: 4%;
    border-bottom:thin gray dotted;
}    


.model_title {
	font-size: 100%;
    margin: 0 0 3% 0
}

.model_title span {
	display: flex;
	align-items: center;
	font-size:90%;
	text-transform: uppercase;
    line-height: 2.5;
}

.model_title span::before {
	content: '';
	display: inline-block;
	margin-right: 20px;
	width: 40px;
	height: 3px;
}




.sec03 .inner p.model_exam {
    position: relative;
    margin:5% 0 5% 10%;
    font-size:90%;
    text-align:left;
    line-height: 1.3;
}



.sec03 .inner .modelphoto{
    width:96%;
    margin: 3% 2% 5% 2%;
    }
.sec03 .inner .modelphoto h1{
    font-size: 95%;
    text-align:left;
    line-height: 1.8;
    }
.sec03 .inner .modelphoto p{
    font-size: 82%;
    line-height: 1.2;
    text-align:left;
    }
.sec03 .inner .modelphoto2{
    width:96%;
    margin: 2% 2% 3% 2%;
    display: inline-block;
}
.sec03 .inner .modelphoto2 h1{
    font-size: 95%;
    line-height: 1.8;
    }
.sec03 .inner .modelphoto2 p{
    font-size: 82%;
    line-height: 1.2;
    text-align:left;
    }	    


.kakaku{
    width:100%;
}


    
.price-2{ width:98%;
  margin:2% 0 2% 0;
  display:inline-block;
   }

.title-2{
    margin:3% 0 2% 3%;
    border: solid 1px;
    padding:1% 3% 1.5% 3%;
    width:70%;
    text-align: center;
    font-size:85%!important;
    background: #000000;
    color:#ffffff;
 
 }


.nijiu{
  position: relative;
}
.nijiu::before,
.nijiu::after {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(0);
  background-color: red;
  width: 100%;
  height: 2px;
  left: 0;
}
.nijiu::before {
  top: 55%;
}
.nijiu::after {
  top: 42%;
}



.old_price{
    font-size:78%!important;
    display: inline-block;
    text-align: center;
    margin:0 0 1% 0;
    position: relative;
}




.old_price span{
    font-size:150%;
}




.new_price::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 0.2em 0 0;
  border:8px solid transparent;
  border-right: 0 solid transparent;
  border-left: 8px solid #000;
  vertical-align: middle;  
}


.new_price{
    color:red;
    font-size:160%!important;
    display: inline-block;
    line-height:0.4;
    margin-bottom: 2%;
    padding-top: 1%;
}

.new_price span{
    color:#000000;
    font-size:46%;
    margin-bottom: 1%;
}

.price_right{
    width:90%; 
    border: solid 1px;
    display:inline-block;
    margin:2% 5%;
}
.price_ex{
    width:100%;
    background: #000000;
    color:#fff;
    padding:2%;
    margin:0 auto 3% auto;
    text-align: center;
    font-size: 110%;
}
    
.sec03 .inner .kingaku{
    width:100%;
    margin:0 auto;
}
 
.sec03 .inner .kingaku dl{
    border-bottom: thin dashed gray;
    margin-bottom: 5%;
}    
    
    
.sec03 .inner .kingaku dt{
    width:13%;
    font-size:90%;
    display:inline-block;
    text-align: right;
    line-height: 1.2;
}

.sec03 .inner .kingaku dd{
    width:35%;
    font-size:120%;
    display:inline-block;
     text-align: right;
    line-height: 1.2;
    vertical-align: bottom;
}
.sec03 .inner .kingaku dd span{
   font-size:120%;
}

.sec03 .inner .kingaku dt2{
    width:35%;
    font-size:90%;
    display:inline-block;
    text-align: right;
    line-height: 1.2;
}

.sec03 .inner .kingaku dd2{
    width:10%;
    font-size:100%;
    display:inline-block;
     text-align: right;
    line-height: 1.2;
    vertical-align: bottom;
}

.sec03 .inner .kingaku dd2 span2{
   font-size:90%;
}



    
.sec03 .inner .ka_tx{
    margin-top:3%;
    font-size:75%;
    line-height:1.5;
}    
       
 .sec03 .inner .point{
    width:100%;
}

.sec03 .inner .point p.catch {
  display: flex;  
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  font-size:100%;
  margin-top:30px;
    
}
.sec03 .inner .point p.catch:before, .point p.catch:after {
  border-top: 1px solid;
  content: "";
  width:4em; /* 線の長さ */
}
.sec03 .inner .point p.catch:before {
  margin-right: 1em; /* 文字の右隣 */
}
.sec03 .inner .point p.catch:after {
  margin-left: 1em; /* 文字の左隣 */
}

.sec03 .inner ul {
    width:100%;
	display:inline-block;
    margin:0 auto;
	/*justify-content: space-between;*/
}
.sec03 .inner li {
	width: 48%;
    margin:1% 1%;
    float:left;
    padding:10px 0;
    text-align: center;
    display:inline-block;
	box-sizing: border-box;
	position: relative;
    background:#6e7c84;
    color:#ffffff;
    border-radius:3px;
    font-size: 70%;
}


.sec03 .inner .modelselect{
    width:48%;
    margin: 2% 0.5% 3% 0.5%;
    display: inline-block;        
}
.sec03 .inner .modelselect .modelselectimg{
    width:100%;
    position: relative;
    margin-bottom: 2%;
}
.sec03 .inner .modelselect .modelselectimg .modelselect_text{
    position: absolute;
    bottom: 0.5%;
    left: 1%;
    font-size: 90%;
 /*   border-top: 1.5px solid gray;*/
    padding: 2% 5%;
}
.sec03 .inner .modelselect .modelselect_text2{
    font-size: 80%;
    text-align: center;
    padding:0 1% 2% 1%;
    line-height:1.6;
    margin: 0;
}


.model_other {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:100%;
	text-align: center;
}

.model_other::before,
.model_other::after {
	content: '';
	width: 3px;
	height: 40px;
}

.model_other::before {
	margin-right: 30px;
	transform: rotate(-35deg)
}
.model_other::after {
	margin-left: 30px;
	transform: rotate(35deg)
}

    
    
    
.kakaku2{
    width:100%;
}


    
.price-3{ width:98%;
  margin:2% 1% 2% 1%;
  float:left;
    display:inline-block;
   }

.title-3{
    border: solid 2px;
    padding:5px 4px;
    width:25%;
    text-align: center;
    float:left;
    font-size:100%!important;
    background: #ffffff;
    color:#000;
 
 }

.tochi_price{
    font-size:250%;
    font-weight: 600;
    color:red;
    padding-left:5%;
    margin-left:5%;
}

.tochi_price span{
    font-size:70%;
   
}



.scall {
  position: relative;
    padding-top:20px;
    padding-right: 100px;
    font-size:200%;
  text-align: right; /* 文字の中央寄せ */
}
.scall::before {
  background-color: #000; /* 線の色 */
  border-radius: 5px; /* 線の両端を丸く */
  content: "";
  height: 3px; /* 線の高さ */
  left:68%; /* 線の中央寄せ */
  position: absolute;
  top: 10px; /* 線の位置 */
   left:60%; 
  transform: translateX(-50%); /* 線の中央寄せ */
  width: 140px; /* 線の長さ */
}

.scall  span{
    font-size:70%;
  text-align: right; /* 文字の中央寄せ */
}

.price-co{ width:98%;
  margin:2% 1% 2% 1%;
  float:left;
    display:inline-block;
   }


.txt_bb{
    font-size:320%;
    font-style: normal;
    text-align: center;
}
    
.txt_bb2{
  font-size:200%;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.2rem;
  padding: 0 0 1% 0;
  border-bottom: none;
  line-height: 0.7;    
}
.txt_bb2 span{
  font-size:45%;
  margin:0 0 0 0 ;
}
    

.txt_ss{
    width:80%;
    margin:0 auto;
    padding-top:5%;
    font-size:90%;
    line-height: 1.8;
}
    
    
  .price_right2{
    width:98%; 
    display:inline-block;
    margin:2% 0;
}

.price_right3{
    width:98%; 
    margin:3%;
    border: solid 1px;
    display:inline-block;
  
}  
    
    

.price{
    color:red;
    font-size:180%!important;
    text-align: center;
    float:left;
    display: inline-block;
    margin-bottom: 2%;
    padding-top: 1%;
}

.price span{
    color:#000000;
    font-size:45%;
    margin-bottom: 1%;
    padding-top: 1%;
    display: inline-block;
}    
  
.sec03 .inner .outline_text{
   font-size: 70%;
   line-height: 1.1;
}    
    
    
    
}
/* Sec03 sp
***************************************************************/


    
/* Sec04
***************************************************************/


.sec04 {
  background:#fff;
  padding: 50px 0 20px;
}

.sec04 .inner {
  width: 1000px;
  margin: auto;
}


.loc-title{
  width:100%;
  display: inline-block;
  font-weight:bold;
    text-align: left;
  border-left: solid 5px #000;
  margin: 0 auto 50px;
  padding: 5px 0 5px 5px;

}



.sec04 .inner .loc{
  width: 30%;
  float:left;
    margin:1%;
}

.sec04 .inner .loc p{
  font-size:110%;
    line-height: 1.7;
}

.booking_place{
    position: relative;
}
.booking_place .booking_free{
    position: absolute;
    top:12%;
    left:22%;
    width:13%;
}
.booking_btn {
  display: inline-block;
  width: 60%;
  margin:7% auto;
  margin-left:20%;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
   font-size:110%;
    box-shadow: 0px 0px 0px 7px #ed6d35;
    border: solid 1px white;  
    
  color: #fff;
  background-color: #ed6d35;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.booking_btn:hover {
  transform: scale(1.1,1.1);
}





/* Sec04
***************************************************************/



    
    

/* Sec04 sp
***************************************************************/

@media all and (max-width: 680px) {

 .sec04 {
  background:#fff;
  padding: 50px 0 20px;
}

.sec04 .inner {
  width: 100%;
  margin: auto;
}


.loc-title{
  width:100%;
  font-size:100%;   
  display: inline-block;
  font-weight:bold;
    text-align: left;
  border-left: solid 5px #000;
  margin: 0 5px;
  padding: 5px 0 5px 5px;

}



.sec04 .inner .loc{
  width:48%;
  float:left;
    margin:1% 1% 1% 1%;
}

.sec04 .inner .loc p{
  font-size:85%;
    line-height: 1.7;
}   
    
    
.booking_place{
    position: relative;
}
.booking_place .booking_free{
    position: absolute;
    top:15%;
    left:0%;
    width:18%;
}    
    
.booking_btn {
  display: inline-block;
  width:80%;
  margin:7% 10%;
  font-size: 100%; 
  line-height: 40px;
}
    

    
    
    
    
    
    
}

/* Sec04 sp
***************************************************************/









/* mv
***************************************************************/
/*.mv img{width:100%;
     background: url(../../files/img/mv.png) no-repeat bottom center;
 background-size: cover;
}*/

.mv .crossimg{
    position: relative;
}

.mv .mv_text p{
  font-size:80%;
  line-height:1.1;
  /*margin:0 auto 5% auto;*/    
  text-align:left;    
  padding: 0 5% 0 5%;    
}

   /* 背景画像を持つコンテナ */
        .mv {
            position: relative;
            width: 100%;
            /*
            height:720px; / コンテナの高さ /
            background-image: url('../../files/img/mv.png'); / 背景画像を指定 /
            background-size: cover;
            background-position: center;
            overflow: hidden; / コンテナ外の要素を隠す /
            */
        }

     .mv img{
         width: 100%;
     }

          /* 動く画像のスタイル */
        .moving-image {
            position: absolute;
            top: 78%; /* 垂直方向の中央 */
            transform: translate(-50%, -50%); /* 垂直方向の中央調整 */
            width: 385px; /* 画像の幅 */
            height: auto; /* 高さは自動 */
            animation: float 3s ease-in-out infinite; /* アニメーションを設定 */
        }

          /* アニメーションの定義 */
        @keyframes float {
            0% {
                transform: translate(-50%, -50%) translateY(0); /* 初期位置 */
            }
            50% {
                transform: translate(-50%, -50%) translateY(-20px); /* 上にふわっと */
            }
            100% {
                transform: translate(-50%, -50%) translateY(0); /* 元の位置に戻る */
            }
        }

        /* 回転を加えたアニメーション */
        @keyframes float-and-rotate {
            0% {
                transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 初期位置、回転なし */
            }
            50% {
                transform: translate(-50%, -50%) translateY(-20px) rotate(10deg); /* 上にふわっと、少し回転 */
            }
            100% {
                transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 元の位置に戻る */
            }
        }

        /* 各画像に異なるアニメーションの遅延を設定 */
        .image1 {
            left: 10%; /* 1枚目の画像位置 */
            animation-delay: 0s; /* すぐに動く */
        }

        .image2 {
            left: 35%; /* 2枚目の画像位置 */
            animation: float-and-rotate 3s ease-in-out infinite; /* 回転するアニメーションを適用 */
            animation-delay: 0.5s; /* 0.5秒遅れて動く */
        }

        .image3 {
            left: 60%; /* 3枚目の画像位置 */
            animation-delay: 1s; /* 1秒遅れて動く */
        }


.popup-banner {

  padding: 20px;
  overflow: hidden;
  position: relative;
  align-items: center;
  justify-content: center;
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 270px; 
  /*  box-shadow: 0 4px 8px rgba(0,0,0,0.1);*/
    z-index:999; 
}
.target {
  display: block;
  max-width: 300px;
  width: 60%;
  height: auto;
}

/* Animation */
.target {
  animation: floating-y 1.1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(2%);
  }
}

.popup-banner img {
    width: 100%;
    height: auto;
}

.close-button5 {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    color:#fff;
}

.mv .band{
    --tw-bg-opacity: 1;
    background-color: rgb(142 112 38 / var(--tw-bg-opacity, 1));
    overflow: hidden;
    padding: 0.5% 0 0.5% 0;
    color:#fff;
}
.mv .band .white-space{
    white-space: nowrap;
}
/* 無限ループスライダーの設定 */
.textslide {
  display: inline-block;
  padding-left: 100%; /* 初期位置を右端に設定 */
  white-space: nowrap;
  animation: marquee 30s linear infinite; /* 30秒で一周（速度はここで調整） */
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 親要素の調整 */
.band {
  overflow: hidden; /* はみ出た文字を隠す */
  width: 100%;
}


.mv .crossimg .mv_70an{
    position: absolute;
    top: 80%;           /* 上から50%の位置に配置 */
    left: 50%;          /* 左から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 要素自身のサイズの半分だけ戻して完全に中央合わせ */
    width: 45%;
}

/* 紙吹雪の土台 */
.mv .crossimg .mv_70an {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.confetti-wrap {
    position: absolute;
    top: -50px;
    width: 30%;  /* 舞う範囲の幅 */
    height: 100%; /* 舞う範囲の高さ */
    overflow: hidden;
    pointer-events: none; /* 下の要素のクリックを邪魔しない */
}

.confetti-wrap.left { left: -100px; }
.confetti-wrap.right { right: -100px; }

/* 紙吹雪の破片（共通設定） */
.confetti-wrap span {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 12px;
    background-color: #ffd700; /* 基本は金 */
    opacity: 0;
    animation: confetti-fall 4s linear infinite;
}

/* 動きと色のランダム化（nth-childで個別に設定） */
.confetti-wrap span:nth-child(2n) { background-color: #ff4500; width: 8px; } /* 赤 */
.confetti-wrap span:nth-child(3n) { background-color: #ffffff; width: 12px; } /* 白 */
.confetti-wrap span:nth-child(4n) { background-color: #1e90ff; width: 7px; }  /* 青 */

.confetti-wrap span:nth-child(1) { left: 10%; animation-delay: 0s; }
.confetti-wrap span:nth-child(2) { left: 30%; animation-delay: 1.5s; animation-duration: 5s; }
.confetti-wrap span:nth-child(3) { left: 50%; animation-delay: 0.5s; animation-duration: 3s; }
.confetti-wrap span:nth-child(4) { left: 70%; animation-delay: 2.5s; animation-duration: 4.5s; }
.confetti-wrap span:nth-child(5) { left: 90%; animation-delay: 1s; }
.confetti-wrap span:nth-child(6) { left: 20%; animation-delay: 3s; animation-duration: 6s; }
.confetti-wrap span:nth-child(7) { left: 40%; animation-delay: 0.2s; }
.confetti-wrap span:nth-child(8) { left: 60%; animation-delay: 1.8s; }
.confetti-wrap span:nth-child(9) { left: 80%; animation-delay: 0.7s; }
.confetti-wrap span:nth-child(10) { left: 15%; animation-delay: 2.2s; }

/* 落ちながら回転・左右に揺れるアニメーション */
@keyframes confetti-fall {
    0% {
        top: -10%;
        transform: translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        top: 100%;
        transform: translateX(30px) rotate(720deg);
        opacity: 0;
    }
}






@media all and (max-width: 680px) {
.mv .crossimg{
    position: relative;
}       
.mv .mv_text p{
  font-size:70%;
  line-height: 1;
  text-align:left;    
}
    
    
    
   /* 背景画像を持つコンテナ */
        .mv {
            width: 100%!important;
           /*
            height: 385px;
            background-image: url('../../files/img/mv_sp.png'); / 背景画像を指定 /
         */
        }

          /* 動く画像のスタイル */
        .moving-image {
            position: absolute;
            top: 87%; /* 垂直方向の中央 */
            transform: translate(-50%, -50%); /* 垂直方向の中央調整 */
            width: 110px; /* 画像の幅 */
            height: auto; /* 高さは自動 */
            animation: float 3s ease-in-out infinite; /* アニメーションを設定 */
        }

          /* アニメーションの定義 */
        @keyframes float {
            0% {
                transform: translate(-50%, -50%) translateY(0); /* 初期位置 */
            }
            50% {
                transform: translate(-50%, -50%) translateY(-20px); /* 上にふわっと */
            }
            100% {
                transform: translate(-50%, -50%) translateY(0); /* 元の位置に戻る */
            }
        }

        /* 回転を加えたアニメーション */
        @keyframes float-and-rotate {
            0% {
                transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 初期位置、回転なし */
            }
            50% {
                transform: translate(-50%, -50%) translateY(-20px) rotate(10deg); /* 上にふわっと、少し回転 */
            }
            100% {
                transform: translate(-50%, -50%) translateY(0) rotate(0deg); /* 元の位置に戻る */
            }
        }

        /* 各画像に異なるアニメーションの遅延を設定 */
        .image1 {
            left: 15%; /* 1枚目の画像位置 */
            animation-delay: 0s; /* すぐに動く */
        }

        .image2 {
            left: 50%; /* 2枚目の画像位置 */
            animation: float-and-rotate 3s ease-in-out infinite; /* 回転するアニメーションを適用 */
            animation-delay: 0.5s; /* 0.5秒遅れて動く */
        }

        .image3 {
            left: 85%; /* 3枚目の画像位置 */
            animation-delay: 1s; /* 1秒遅れて動く */
        }
  
    
    

    
    
    
  .top-zone03 {
	width: 100%;
	height: 200px!important;
	background: url(../img/work_img_sp.jpg) center center repeat-x;
	background-size: auto ;
	position: relative;
	overflow: hidden;
		 -webkit-animation: fadeAnimations 7000s linear infinite !important;
    -moz-animation: fadeAnimations 7000s linear infinite !important;
    -ms-animation: fadeAnimations 7000s linear infinite!important;
    animation: fadeAnimations 12000s linear infinite!important;
}



@-webkit-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}

@-moz-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}
@-ms-keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}
@keyframes fadeAnimations {
 0% {
	 background-position:0 center;
}
 100% {
	 background-position:44400% center;
}
}
   
       
.mv .crossimg .mv_70an{
    position: absolute;
    top: 80%;           /* 上から50%の位置に配置 */
    left: 50%;          /* 左から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 要素自身のサイズの半分だけ戻して完全に中央合わせ */
    width: 95%;
}
    .confetti-wrap {
        width: 25%;
        height: 100%;
    }
    .confetti-wrap.left { left: -5%; }
    .confetti-wrap.right { right: -5%; }
    .confetti-wrap span { width: 6px; height: 8px; }
    
    
}

/* mv
***************************************************************/



/* 70周年のあいさつ
***************************************************************/
.sec70an{
    margin: 0 0 0 0;
    position: absolute;
    top: 92%;           /* 上から50%の位置に配置 */
    left: 50%;          /* 左から50%の位置に配置 */
    transform: translate(-50%, -50%); /* 要素自身のサイズの半分だけ戻して完全に中央合わせ */
    z-index: 2;
}

.sec70an .inner {
  width: 1100px;
  margin: auto;
}

.sec70an .inner h1{
  font-size:100%;  
}
.sec70an .inner p{
  font-size:100%;  
}

.sec70an .greet70{
    width:100%;
}

.sec70an .greet70 h1{
    font-size: 150%;
    text-align: center;
    line-height: 1.5;
     -webkit-text-stroke: 4px white; /* 縁取りを厚くする */
    paint-order: stroke fill; /* 縁取りの後に文字を描画 */
}
.sec70an .greet70 p{
    font-size: 100%;
    text-align: center;
    -webkit-text-stroke: 3px white; /* 縁取りを厚くする */
    paint-order: stroke fill; /* 縁取りの後に文字を描画 */
}




@media all and (min-width: 681px) {
    
    
}

@media all and (max-width: 680px) {

    
.sec70an {
  width: 98%!important;
  margin: auto;
}
    
.sec70an .greet70{
    width:100%;
}

.sec70an .greet70 h1{
    font-size: 100%;
    text-align: center;
}
.sec70an .greet70 p{
    font-size: 90%;
    text-align: center;
    line-height: 1.6;
}    
    
    
}
 


/* 70周年のあいさつ
***************************************************************/
    

/* キャンペーン内容
***************************************************************/
.secCampaign{
    margin: 0 0 0 0;
}

.secCampaign .bg001{
   padding: 4% 0 6% 0;
   background: repeating-linear-gradient(-45deg, #fffaf0, #fffaf0 20px, #fff5e0 20px, #fff5e0 40px);
}

.secCampaign .inner {
  width: 1100px;
  margin: auto;
}

.secCampaign .inner h1{
  font-size:100%;  
}
.secCampaign .inner p{
  font-size:100%;  
}

.secCampaign .inner .campaign_title{
    width: 100%;
    margin: 0 0 2% 0;
}
.secCampaign .inner .campaign_title h1{
    text-align: center;
    font-size: 250%;
    color:rgb(197 160 71 / var(--tw-text-opacity, 1));
    letter-spacing: 0.5rem;
    text-shadow: 1.5px 1.5px 1px #4c4c4c;
}
.secCampaign .inner .campaign_title p{
    text-align: center;
    font-size: 100%;
    background: #4c4c4c;
    color:#fff;
    padding: 0 0 0.2% 0;
    width: 40%;
    margin: 0 30% 0 30%;
}

.secCampaign .inner .course_title{
    width: 100%;
    margin: 2% 0 4% 0;
    border-top:thin solid #4c4c4c;
    border-bottom:thin solid #4c4c4c;
    background: rgba(255, 255, 255, 0.6); /* 真っ白から少し透けた白に変更 */
}
.secCampaign .inner .course_title .bobox01{
    width: 100%;
    padding:1% 2% 1% 2%;
}
.secCampaign .inner .course_title .bobox01 .eg01{
    color: rgb(142 112 38 / var(--tw-text-opacity, 1));
    font-size: 160%;
    text-align: center;
    font-family: "Great Vibes", cursive;
}
.secCampaign .inner .course_title .bobox01 .subtitle01{
    font-size: 200%;
    text-align: center;
    font-weight: 600;
    color:red;
    margin:0 0 1% 0;
}
.secCampaign .inner .course_title .bobox01 .sub_text01{
    font-size: 100%;
    text-align: center;
    line-height: 1.6;
}

.secCampaign .inner .course_origin{
    margin: 2% 0 3% 0;
    display: flex;           /* ★Flexboxを適用 */
    justify-content: center; /* 中央寄せ */
    align-items: stretch;    /* ★子要素の高さを揃える */
    gap: 3%;
}

.secCampaign .inner .course01{
    width: 31%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    background-image: linear-gradient(to bottom, #fef2f2, #fff);/* 背景：上から下へ #fef2f2 から #fff へのグラデーション */
    border-radius: 1rem;
    border: 8px solid #fff;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-shadow: 2px 2px 5px #4c4c4c;
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
}
.secCampaign .inner .course01 .select{
    text-align: center;
    font-size: 120%;
    color: rgb(255 154 158);
    font-weight: 600;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course01 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
    font-weight: 500;
}
.secCampaign .inner .course01 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course01 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
    font-weight: 400;
}
.secCampaign .inner .course01 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course01 .img70manyen{
    position: absolute;
    top: 0;
    left: -12%;
    width: 40%;
    transform: rotate(-15deg);
}

.secCampaign .inner .course02{
    width: 31%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    background-image: linear-gradient(to bottom, #fff7ed, #fff);/* 背景：上から下へ #fef2f2 から #fff へのグラデーション */
    border-radius: 1rem;
    border: 8px solid #fff;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-shadow: 2px 2px 5px #4c4c4c;
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
}
.secCampaign .inner .course02 .select{
    text-align: center;
    font-size: 120%;
    color: rgb(249 115 22 / var(--tw-text-opacity, 1));
    font-weight: 600;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course02 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
    font-weight: 500;
}
.secCampaign .inner .course02 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course02 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
    font-weight: 400;
}
.secCampaign .inner .course02 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course02 .img70manyen{
    position: absolute;
    top: 0;
    left: -12%;
    width: 40%;
    transform: rotate(-15deg);
}

.secCampaign .inner .course03{
    width: 31%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    background-image: linear-gradient(to bottom, #ecfeff, #fff);/* 背景：上から下へ #fef2f2 から #fff へのグラデーション */
    border-radius: 1rem;
    border: 8px solid #fff;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-shadow: 2px 2px 5px #4c4c4c;
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
}
.secCampaign .inner .course03 .select{
    text-align: center;
    font-size: 120%;
    color: rgb(6 182 212 / var(--tw-text-opacity, 1));
    font-weight: 600;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course03 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
    font-weight: 500;
}
.secCampaign .inner .course03 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course03 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
    font-weight: 400;
}
.secCampaign .inner .course03 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course03 .img70manyen{
    position: absolute;
    top: 0;
    left: -12%;
    width: 40%;
    transform: rotate(-15deg);
}


.secCampaign .inner .course01,
.secCampaign .inner .course02,
.secCampaign .inner .course03 {
  transition: transform 0.3s ease-in-out;
}

.secCampaign .inner .course01:hover,
.secCampaign .inner .course02:hover,
.secCampaign .inner .course03:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}



@media all and (min-width: 681px) {
    
    
}

@media all and (max-width: 680px) {
.secCampaign{
  padding: 0 0 0 0;
}
.secCampaign .bg001{
  padding: 8% 0 8% 0;
}    
.secCampaign .inner {
  width: 98%!important;
  margin: auto;
}
    
    
    
.secCampaign .inner .campaign_title{
    width: 100%;
    margin: 0 0 2% 0;
}
.secCampaign .inner .campaign_title h1{
    text-align: center;
    font-size: 220%;
    letter-spacing: 0.5rem;
    line-height: 1.5;
}
.secCampaign .inner .campaign_title p{
    text-align: center;
    font-size: 90%;
    padding: 0 0 0.2% 0;
    width: 70%;
    margin: 5% 15% 10% 15%;
}

.secCampaign .inner .course_title{
    width: 100%;
    margin: 2% 0 8% 0;
}
.secCampaign .inner .course_title .bobox01{
    width: 100%;
    padding:2% 3% 2% 3%;
}
.secCampaign .inner .course_title .bobox01 .eg01{
    font-size: 120%;
    text-align: center;
}
.secCampaign .inner .course_title .bobox01 .subtitle01{
    font-size: 150%;
    text-align: center;
    margin:0 0 1% 0;
}
.secCampaign .inner .course_title .bobox01 .sub_text01{
    font-size: 90%;
    text-align: center;
    line-height: 1.6;
}

.secCampaign .inner .course_origin{
    margin: 2% 0 3% 0;
    display: block;           /* ★Flexboxを適用 */
    /*justify-content: center;*/ /* 中央寄せ */
    align-items: stretch;    /* ★子要素の高さを揃える */
    /*gap: 3%;*/
}

.secCampaign .inner .course01{
    width: 80%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    border-radius: 1rem;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
    margin: 6% 10% 6% 10% ;
}
.secCampaign .inner .course01 .select{
    text-align: center;
    font-size: 120%;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course01 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
}
.secCampaign .inner .course01 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course01 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
}
.secCampaign .inner .course01 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course01 .img70manyen{
    position: absolute;
    top: 0;
    left: -15%;
    width: 40%;
    transform: rotate(-15deg);
}

.secCampaign .inner .course02{
    width: 80%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    border-radius: 1rem;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
    margin: 6% 10% 6% 10% ;
}
.secCampaign .inner .course02 .select{
    text-align: center;
    font-size: 120%;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course02 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
}
.secCampaign .inner .course02 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course02 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
}
.secCampaign .inner .course02 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course02 .img70manyen{
    position: absolute;
    top: 0;
    left: -15%;
    width: 40%;
}

.secCampaign .inner .course03{
    width:80%;
    display: flex;           /* ★内部もFlexにして中身を縦に並べる */
    flex-direction: column;  /* 縦並び */
    border-radius: 1rem;
    padding: 2% 1% 2% 1%;
    vertical-align: top; /* 横並び時のズレ防止に追加 */
    box-sizing: border-box;  /* パディングを含めたサイズ計算 */
    position: relative;
    margin: 6% 10% 6% 10% ;
}
.secCampaign .inner .course03 .select{
    text-align: center;
    font-size: 120%;
    letter-spacing: 0.3rem;
}
.secCampaign .inner .course03 .mei{
    text-align: center;
    font-size: 140%;
    margin: 1% 0 2% 0;
}
.secCampaign .inner .course03 .naiyo{
    width: 100%;
    margin: 1% 0 1% 0;
    flex-grow: 1;
}
.secCampaign .inner .course03 .naiyo h1{
    font-size: 110%;
    text-align: center;
    margin: 2% 0 2.5% 0;
}
.secCampaign .inner .course03 .naiyo p{
    font-size: 90%;
    line-height:1.3;
}
.secCampaign .inner .course03 .img70manyen{
    position: absolute;
    top: 0;
    left: -15%;
    width: 40%;
}


.secCampaign .inner .course01,
.secCampaign .inner .course02,
.secCampaign .inner .course03 {
  transition: transform 0.3s ease-in-out;
}

.secCampaign .inner .course01:hover,
.secCampaign .inner .course02:hover,
.secCampaign .inner .course03:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}    
    
 
    
    
}
 


/* キャンペーン内容
***************************************************************/



/* みらいエコ住宅セクション
***************************************************************/

.secEcoSupport {
    padding: 4% 0 4% 0;
}

.secEcoSupport .inner {
    width: 1100px;
    margin: auto;
}

.eco_banner {
    border: 3px solid #1a5d3b; /* 深いグリーンで信頼感を演出 */
    border-radius: 20px;
    padding: 2%;
    background: #f4faf7; /* 非常に薄いグリーン背景 */
    text-align: center;
    position: relative;
}

.eco_label {
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translateX(-50%);
    background: #e6b422; /* キャンペーンの金系 */
    color: #fff;
    padding: 0.5% 5%;
    border-radius: 50px;
    font-weight: bold;
    font-size: 120%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.eco_title {
    font-size:140%;
    color: #1a5d3b;
    font-weight: bold;
    margin: 1% 0 0 0;
    line-height: 1.4;
}

.eco_title .small { 
    font-size:100%;
    vertical-align: middle;
}
.eco_title .large {
    font-size:200%;
    margin: 0 5px;
    vertical-align: middle;
}

.eco_lead {
    font-size: 100%;
    line-height: 1.8;
    margin: 0 0 1% 0;
}

.eco_grid {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 1% 0;
}

.eco_item {
    background: #fff;
    border-radius: 12px;
    padding: 1%;
    width: 48%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e0e0e0;
}

.item_head {
    font-size: 110%;
    font-weight: bold;
    color: #fff;
    background: #1a5d3b;
    padding: 0.5% 0 1% 0;
    border-radius: 5px;
    margin:0 0 1% 0;
}

.item_price {
    font-size: 130%;
    font-weight: bold;
    color: #d11010; /* 金額は赤で強調 */
}

.item_price span {
    font-size: 200%;
    margin:0 0.5% 0 0.5%;
}

.item_detail {
    font-size: 90%;
    line-height: 1.5;
    color: #666;
}

.eco_note {
    font-size: 80%;
    color: #666;
    margin: 0 0 1% 0;
}

.eco_btn {
    display: inline-block;
    background: #1a5d3b;
    color: #fff;
    padding: 1% 5%;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: 0.3s;
    font-size: 120%;
}

.eco_btn:hover {
    background: #0b419b; /* ホバー時は昭和住宅様のメインカラーへ */
    transform: translateY(-3px);
}

/* スマホ対応 */
@media all and (max-width: 680px) {
    
.secEcoSupport {
    padding: 10% 0 8% 0;
}

.secEcoSupport .inner {
   width: 98%!important;
   margin: auto;
}

.eco_banner {
    padding:5% 2% 4% 2%;
    text-align: center;
    position: relative;
}

.eco_label {
    position: absolute;
    top: -6%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5% 5%;
    border-radius: 50px;
    font-size: 110%;
    width: 80%;
}    
    
.eco_title {
    font-size:110%;
    margin: 1% 0 0 0;
    line-height: 1.4;
}

.eco_title .small { 
    font-size:100%;
}
.eco_title .large {
    font-size:150%;
}

.eco_lead {
    font-size: 90%;
    line-height: 1.5;
    margin: 0 0 1% 0;
    text-align: left;
}

.eco_grid {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 0 0 1% 0;
    flex-direction: column;
}

.eco_item {
    padding: 2%;
    width: 100%;
    display: flex; 
    align-items: center; 
    text-align: left;
}
    
.item_head {
    font-size: 110%;
    padding: 0.5% 0 1% 0;
    border-radius: 5px;
    margin:0 1% 0 0;
    width:39%; 
    text-align: center;
}

.item_price {
    font-size: 130%;
    margin: 0;
    width: 60%;
    line-height: 1;
}

.item_price span {
    font-size: 180%;
}

.item_detail {
    display: none;
}

.eco_note {
    font-size: 80%;
    margin: 0 0 2% 0;
    text-align: left;
}

.eco_btn {
    display: inline-block;
    padding: 1% 10%;
    border-radius: 50px;
    transition: 0.3s;
    font-size: 110%;
}    
    
   
    
    
   
    
}



/* みらいエコ住宅セクション
***************************************************************/



/* model_merit
***************************************************************/


.model_merit .inner {
  width: 1000px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.model_merit {
 background:#232946;
  padding: 50px 0 20px;
}

.model_merit .inner {
  width: 1000px;
  margin: auto;
}

.model_merit_point{
   width:100%;
   margin: 1% 0;
   border:thin solid gray ;
   font-size: 14px;
  
}


.model_merit2 {
 background:#fff;
  padding: 50px 0 20px;
}

.model_merit2 .inner {
  width: 1000px;
  margin: auto;
}


.model_merit2 .merit_text p{
  font-size:26px;
  line-height: 2;
  margin:1% auto 2% auto;    
  text-align: center;
  font-weight:600;
  background:#232946 ;
  color:#fff;
  padding: 1% 0 1% 0;
}



.accordion-container .accordion-merit_title {
  display: block;
  position: relative;
    width:70%;
  margin: 0 auto;
  padding: 0.8em 0.625em 0.8em 2em;
  font-size: 25px;
  font-weight: bold;
  color: #000;
  background: #fff;
  cursor: pointer;
  text-align: center;    
}

.accordion-container .accordion-merit_title:hover,
.accordion-container .accordion-merit_title:active,
.accordion-container .content-entry.open .accordion-merit_title {
  background-color:#ffff00;
  color:#000000;
}

.accordion-container .accordion-merit_title:hover i:before,
.accordion-container .accordion-merit_title:hover i:active,
.accordion-container .content-entry.open i {
  color: #000000;
}

.accordion-merit_title{
  position: relative;
    margin:0 auto;
}

.accordion-merit_title:after {
  content: "";
  position: absolute;
  right:50px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width:12px;
  height:12px;
  border-top: solid 2px #232946;
  border-right: solid 2px #232946;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-merit_title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}




.accordion-container .accordion-merit_title2 {
  display: block;
  position: relative;
  width:70%;
  margin: 0 auto;
  padding: 0.8em 0.625em 0.8em 2em;
  font-size: 25px;
  font-weight: bold;
  color: #232946;
  background: #fff;
  cursor: pointer;
  text-align: center;    
  border: 1px #232946 solid;
}

.accordion-container .accordion-merit_title2:hover,
.accordion-container .accordion-merit_title2:active,
.accordion-container .content-entry.open .accordion-merit_title {
  background-color:#ffff00;
  color:red;
}

.accordion-container .accordion-merit_title2:hover i:before,
.accordion-container .accordion-merit_title2:hover i:active,
.accordion-container .content-entry.open i {
  color: #000000;
}

.accordion-merit_title2{
  position: relative;
    margin:0 auto;
}

.accordion-merit_title2:after {
  content: "";
  position: absolute;
  right:50px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width:12px;
  height:12px;
  border-top: solid 2px #232946;
  border-right: solid 2px #232946;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-merit_title2 .open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}



.model_merit_point2 li{
   width:31.9%;
   margin: 1% 0.5% 3% 0.5%;
   border:thin solid gray ;
   font-size: 14px;
    display: inline-block;
    background: #ffffff;
  
}

.kome{
    font-size:80%;
    /*color:#ffffff;*/
    margin-bottom: 10px;} 

    
@media all and (max-width: 680px) {
 
.model_merit .inner {
  width: 100%;
  margin: auto;
  position: relative;
  z-index: 1;
}

.model_merit {
 background:#232946;
  padding: 3px 0 20px;
}

.model_merit .inner {
  width: 100%;
  margin: auto;
}

.model_merit2 {
 background:#fff;
 padding: 3px 0 20px;
}

.model_merit2 .inner {
  width: 96%;
  margin: auto 2% auto 2%;
}    
    
.model_merit2 .merit_text p{
  font-size:14px;
  line-height: 1;
  margin:1% auto 2% auto;    
  text-align: center; 
}     
    
    
    
.model_merit_point{
   width:96%;
   margin: 1% auto;
   border:thin solid gray ;
   font-size: 14px;
  
}

.accordion-container .accordion-merit_title {
  display: block;
  position: relative;
    width:96%;
  margin: 0 auto;
  padding: 0.8em 0.625em 0.8em 2em;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  background: #fff;
  cursor: pointer;
  text-align: center;    
}

.accordion-container .accordion-merit_title:hover,
.accordion-container .accordion-merit_title:active,
.accordion-container .content-entry.open .accordion-merit_title {
  background-color:#ffff00;
  color:#000000;
}

.accordion-container .accordion-merit_title:hover i:before,
.accordion-container .accordion-merit_title:hover i:active,
.accordion-container .content-entry.open i {
  color: #000000;
}

.accordion-merit_title{
  position: relative;
    margin:0 auto;
}

.accordion-merit_title:after {
  content: "";
  position: absolute;
  right:10px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width:12px;
  height:12px;
  border-top: solid 2px #232946;
  border-right: solid 2px #232946;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-merit_title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-container .accordion-merit_title2 {
  display: block;
  position: relative;
  width:100%;
  margin: 0 auto;
  padding: 0.8em 0.625em 0.8em 2em;
  font-size: 13px;
  font-weight: bold;
  color: #000;
  background: #fff;
  cursor: pointer;
  text-align: center;    
}

.accordion-container .accordion-merit_title2:hover,
.accordion-container .accordion-merit_title2:active,
.accordion-container .content-entry.open .accordion-merit_title2 {
  background-color:#ffff00;
  color:#000000;
}

.accordion-container .accordion-merit_title2:hover i:before,
.accordion-container .accordion-merit_title2:hover i:active,
.accordion-container .content-entry.open i {
  color: #000000;
}

.accordion-merit_title2{
  position: relative;
    margin:0 auto;
}

.accordion-merit_title2:after {
  content: "";
  position: absolute;
  right:10px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width:12px;
  height:12px;
  border-top: solid 2px #232946;
  border-right: solid 2px #232946;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-merit_title2.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}    
    
    

.model_merit_point2 li{
   width:98%;
   margin: 1% 0.5% 3% 0.5%;
   border:thin solid gray ;
   font-size: 14px;
    display: inline-block;
    background: #ffffff;
  
}   
    
 .kome{
     font-size:10px;
    /*color:#ffffff;*/
    margin-bottom: 3%;}   
    
    
    
    
}



/* model_merit
***************************************************************/





/* arrow
***************************************************************/





.arrowbun .inner {
  width: 1000px;
  margin: auto;
  position: relative;
  z-index: 1;
}

.arrowbun .listTextBox{
    width:44%;
    margin:0 2% 0 2%;
    display: inline-block;
}




.arrowbun .listTextBox a{
  /*padding: 20px 18px 0;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
    /*width: 330px;*/
    height: 50px;
    background: #335167;
    padding: 1px 0 1px 0;
    -webkit-transition: background 0.3s;
  transition: background 0.3s;
    /*margin: 2% auto;*/
    border-radius: 10px;
    
}


.arrowbun .listTextBox a::after {
    border: 1px solid #335167;
    background: #fff;
}



.arrowbun .listTextBox2{
    width:44%;
    margin:0 2% 0 2%;
    display: inline-block;
}

.arrowbun .listTextBox2 a{
  /*padding: 20px 18px 0;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
    /*width: 330px;*/
    height: 50px;
    background: #ed6d35;
    padding: 1px 0 1px 0;
    -webkit-transition: background 0.3s;
  transition: background 0.3s;
    /*margin: 2% auto;*/
    border-radius: 10px;
    
}


.arrowbun .listTextBox2 a::after {
    border: 1px solid #ed6d35;
    background: #fff;
}



.arrowbun .listTextBox3{
    width:100%;
    margin-top:1%;
}

.arrowbun .listTextBox3 a{
  /*padding: 20px 18px 0;*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
    /*width: 330px;*/
    height: 40px;
    background: #335167;
    padding: 1px 0 1px 0;
    -webkit-transition: background 0.3s;
  transition: background 0.3s;
    /*margin: 2% auto;*/
    border-radius: 10px;
    
}


.arrowbun .listTextBox3 a::after {
    border: 1px solid #335167;
    background: #fff;
}




.arrowbun .arrow {
  display: block;
  position: relative;
  width: 48px;
  height: 48px;
  /*border-radius: 50%;*/
  background: #335167;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
    border-radius: 15px;
}

.arrowbun .arrow::before, .arrowbun .arrow::after {
  content: '';
  position: absolute;
  height: 1px;
  background: #fff;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
}

.arrowbun .arrow::before {
  width: 18px;
  top: 50%;
  right: calc((100% - 18px)/2);
   
}

.arrowbun .arrow::after {
  width: 7px;
  top: calc((100% - 5px)/2);
  right: calc((100% - 21px)/2);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
    
}

.arrowbun .listTitle {
  width: calc(100% - 58px);
  padding-left: 18px;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
/*  margin-bottom: 6px;*/    
}

.arrowbun .listTitle::after {

  color: #335167;
  
}



.arrowbun .arrow2 {
  display: block;
  position: relative;
  width: 48px;
  height: 48px;
  /*border-radius: 50%;*/
  background: #ed6d35;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
    border-radius: 15px;
}

.arrowbun .arrow2::before, .arrowbun .arrow2::after {
  content: '';
  position: absolute;
  height: 1px;
  background: #fff;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
}

.arrowbun .arrow2::before {
  width: 18px;
  top: 50%;
  right: calc((100% - 18px)/2);
   
}

.arrowbun .arrow2::after {
  width: 7px;
  top: calc((100% - 5px)/2);
  right: calc((100% - 21px)/2);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
    
}

.arrowbun .listTitle2 {
  width: calc(100% - 58px);
  padding-left: 18px;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
/*  margin-bottom: 6px;    */
}

.arrowbun .listTitle2::after {

  color: #ed6d35;
  
}



.arrowbun .arrow3 {
  display: block;
  position: relative;
  width: 58px;
  height: 38px;
  /*border-radius: 50%;*/
  background: #335167;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
    border-radius: 15px;
}

.arrowbun .arrow3::before, .arrowbun .arrow3::after {
  content: '';
  position: absolute;
  height: 1px;
  background: #fff;
  -webkit-transition: right 0.3s;
  transition: right 0.3s;
}

.arrowbun .arrow3::before {
  width: 18px;
  top: 50%;
  right: calc((100% - 18px)/2);
   
}

.arrowbun .arrow3::after {
  width: 7px;
  top: calc((100% - 5px)/2);
  right: calc((100% - 21px)/2);
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
    
}

.arrowbun .listTitle3 {
  width: calc(100% - 58px);
  padding-left: 18px;
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
/*  margin-bottom: 6px;*/    
}

.arrowbun .listTitle3::after {

  color: #335167;
  
}


.sale{font-size:16px;
     border: 1px solid red;
    width:100px;
    padding:10px;
     color:red;
}


@media all and (min-width: 681px) {
  .arrowbun {
    margin: 0 30px 10px 0;
  }
    
   
    
.arrowbun .listTextBox a:hover{
    border: 1px solid #335167;
    background: #fff;
    }    
.arrowbun .listTextBox a:hover::before, .arrowbun a:hover .listTextBox::after {
    background: #335167;
}
    
.arrowbun .listTextBox2 a:hover{
    border: 1px solid #ed6d35;
    background: #fff;
    }    
.arrowbun .listTextBox2 a:hover::before, .arrowbun a:hover .listTextBox::after {
    background: #ed6d35;
}    
    
.arrowbun .listTextBox3 a:hover{
    border: 1px solid #335167;
    background: #fff;
    }    
.arrowbun .listTextBox3 a:hover::before, .arrowbun a:hover .listTextBox::after {
    background: #335167;
}    
    
  .arrowbun a:hover .arrow {
    background: #fff;
  }
  .arrowbun a:hover .arrow::before, .arrowbun a:hover .arrow::after {
    background: #335167;
  }
  .arrowbun  a:hover .arrow::before {
    right: calc((100% - 37px)/2);
  }
  .arrowbun  a:hover .arrow::after {
    right: calc((100% - 40px)/2);
  }
    
    
  .arrowbun a:hover .arrow2 {
    background: #fff;
  }
  .arrowbun a:hover .arrow2::before, .arrowbun a:hover .arrow2::after {
    background:#ed6d35;
  }
  .arrowbun  a:hover .arrow2::before {
    right: calc((100% - 37px)/2);
  }
  .arrowbun  a:hover .arrow2::after {
    right: calc((100% - 40px)/2);
  }    
    
    
  .arrowbun a:hover .arrow3 {
    background: #fff;
  }
  .arrowbun a:hover .arrow3::before, .arrowbun a:hover .arrow3::after {
    background: #335167;
  }
  .arrowbun  a:hover .arrow3::before {
    right: calc((100% - 37px)/2);
  }
  .arrowbun  a:hover .arrow3::after {
    right: calc((100% - 40px)/2);
  }    
    
    
    
.arrowbun a:hover .listTitle{
  color: #335167;
}    
.arrowbun a:hover .listTitle::before, .arrowbun a:hover .listTitle::after {
  color: #fff;
}   
    
.arrowbun a:hover .listTitle2{
  color: #ed6d35;
}    
.arrowbun a:hover .listTitle2::before, .arrowbun a:hover .listTitle2::after {
  color: #fff;
}    
    
  
.arrowbun a:hover .listTitle3{
  color: #335167;
}    
.arrowbun a:hover .listTitle3::before, .arrowbun a:hover .listTitle3::after {
  color: #fff;
}       
    
    
}

@media all and (max-width: 680px) {
  .arrowbun {
    padding: 0 0 2%;
  }

  .arrowbun .inner {
   width: 93.75%;
  }

.arrowbun .listTextBox{
    width:80%;
    margin:2% 10% 2% 10%;
    display: inline-block;
}     
    
    
  .arrowbun .listTextBox a{
    /*width: 80%; */
    height:40px;    
  }
    
.arrowbun .listTextBox2{
    width:80%;
    margin:2% 10% 2% 10%;
    display: inline-block;
}     
    
.arrowbun .listTextBox2 a{
    /*width: 80%; */
    height:40px;    
  }    
    
    
.arrowbun .listTextBox3{
    width:80%;
    margin:2% 10% 2% 10%;
    display: inline-block;
}     
    
    
  .arrowbun .listTextBox3 a{
    /*width: 80%; */
    height:40px;    
  }    
    
    
.arrowbun .arrow {
    width: 38px;
    height: 38px;
    /*background: #fff;
    border-radius: 50%;*/
  }
.arrowbun .arrow::before {
    width: 10px;
    right: calc((100% - 10px)/2);
  }
.arrowbun .arrow::after {
    width: 5px;
    top: calc((100% - 3px)/2);
    right: calc((100% - 11px)/2);
  }
.arrowbun .listTitle {
    width: calc(100% - 38px);
    padding-left: 10px;
    font-size: 14px;
  }
.arrowbun .listTitle .jp {
    font-size: 14px;
    margin-bottom: 4px;
  }

    
.arrowbun .arrow2 {
    width: 38px;
    height: 38px;
    /*background: #fff;
    border-radius: 50%;*/
  }
.arrowbun .arrow2::before {
    width: 10px;
    right: calc((100% - 10px)/2);
  }
.arrowbun .arrow2::after {
    width: 5px;
    top: calc((100% - 3px)/2);
    right: calc((100% - 11px)/2);
  }
.arrowbun .listTitle2 {
    width: calc(100% - 38px);
    padding-left: 10px;
    font-size: 14px;
  }
.arrowbun .listTitle2 .jp {
    font-size: 14px;
    margin-bottom: 4px;
  }    
    
    
.arrowbun .arrow3 {
    width: 38px;
    height: 38px;
    /*background: #fff;
    border-radius: 50%;*/
  }
.arrowbun .arrow3::before {
    width: 10px;
    right: calc((100% - 10px)/2);
  }
.arrowbun .arrow3::after {
    width: 5px;
    top: calc((100% - 3px)/2);
    right: calc((100% - 11px)/2);
  }
.arrowbun .listTitle3 {
    width: calc(100% - 38px);
    padding-left: 10px;
    font-size: 14px;
  }
.arrowbun .listTitle3 .jp {
    font-size: 14px;
    margin-bottom: 4px;
  }    
    
    
    
}

/* arrow
***************************************************************/




/*アコーディオンCSS
***************************************************************/

.secCreate {
  padding: 20px 0 100px;
}

.secCreate .inner {
  width: 1000px;
  margin: auto;
}


.secCreate h1{
  font-size:20px;
  margin-bottom: 2%;
  text-align: left;   
}

.secCreate .create_text {
  width: 100%;
 /* margin:2% auto;*/
}

.secCreate .create_text p{
  font-size:15px;
  line-height: 2;
  margin:0 auto 0 auto;    
}
.secCreate .create_text2 p{
  font-size:20px;
  line-height: 2.5;
  margin:0 auto 0 auto;   
  text-align: center;
  color:red;
  background: yellow;
  font-weight: 600;
}

.secCreate .boxbox{
align-items: stretch;
    display: flex;

}

.secCreate .mimodel{
  width:47.5%;
  margin: 1% 1% 2% 1%;
  display: inline-block;
  border: 1px gray solid;
  padding: 1%;

}

.secCreate .mimodel h1{
    font-size: 18px;
    line-height: 1.5;
}
.secCreate .mimodel h2{
    font-size: 16px;
    line-height: 2;
    font-weight: 600;
    text-align: center;
}
.secCreate .mimodel h5{
    font-size: 15px;
    line-height: 2;
    font-weight: 600;
    color: red;
    background: yellow;
    padding: 0.5% 4% 0.5% 4%;
    bottom:0;
    right:0;
    position: absolute;
}

.secCreate .mimodel p{
    font-size: 15px;
}
.secCreate .mimodel .day{
    font-size: 15px;
    color: red;
    line-height: 1.5;
}
.secCreate .mimodel .day span{
    font-size: 15px;
    color: #fff;
    line-height: 1.5;
    background: #0b419b;
    margin-left: 1%;
    padding:0.5% 2% 1% 2%;
}
.secCreate .mimodel .day2{
    width:100%;
    font-size: 110%;
    color: red;
    line-height: 1.5;
    background: yellow;
    margin-bottom: 1%;
    padding:1% 2% 1% 2%;
    text-align: center;
}


.secCreate .mimodel .fix{
    position: relative;
}


.secCreate .mimodel dl{
    width: 100%;
}
.secCreate .mimodel dt{
    width: 25%;
    padding: 1% 0 1% 0;
    text-align: center;
    display: inline-block;
    font-size:15px;
    border-bottom:1px gray dotted ;
    border-right:1px gray dotted ;
}
.secCreate .mimodel dd{
    width: 72%;
    padding: 1% 0 1% 2%;
    display: inline-block;
    font-size:15px;
    border-bottom:1px gray dotted ;
}


.accordion-container {
  position: relative;
  width: 100%;
  /*border: 1px solid #0079c1;*/
  border-top: none;
  outline: 0;
  /*cursor: pointer；*/
}

.accordion-container .accordion-title {
  display: block;
  position: relative;
  margin: 0;
  /*padding: 0.625em 0.625em 0.625em 2em;*/
  padding: 2em 2em 2em 4em;  
  font-size: 20px;
  font-weight: normal;
  color: #fff;
  background: #000;
  cursor: pointer;
  text-align: center;    
}

.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #335167;
  color: white;
}

.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}

.accordion-title{
  position: relative;
}

.accordion-title:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-content {
  display: none;
  padding:1.5% 0 1.5% 0;
 
}

/* CSS for CodePen */
.accordion-container {
  width: 100%;
  margin: 1.875em auto;
}




@media all and (min-width: 681px) {
    
    
}

@media all and (max-width: 680px) {
.secCreate {
  padding: 2% 0 10% 0;
}

.secCreate .inner {
  width: 94%;
  padding: 0 3% 0 3%;
}

.secCreate h1{
  font-size:16px;
  margin-bottom: 2%;
  text-align: left;   
}

.secCreate .create_text {
  width: 100%;
  margin:0 auto 4% auto;
}
.secCreate .create_text p{
  font-size:14px;
  line-height: 2;
}
.secCreate .create_text2 p{
  font-size:16px;
  line-height: 2;
}
    
    
.secCreate .boxbox{
    align-items: stretch;
    display: block;

}    
    
    
.secCreate .mimodel{
  width:100%;
  margin: 1% 0 2% 0;
  display: inline-block;
}

.secCreate .mimodel h1{
    font-size: 16px;
    line-height: 1.5;
}
.secCreate .mimodel h2{
    font-size: 3vw;
    line-height: 2;
    font-weight: 600;
    text-align: center;
}
    
.secCreate .mimodel h5{
    font-size: 15px;
    position: relative;
    text-align: center;
}    
    
.secCreate .mimodel p{
    font-size: 14px;
}
.secCreate .mimodel .day{
    font-size: 14px;
    line-height: 1.5;
}
.secCreate .mimodel .day span{
    font-size: 14px;
    line-height: 1.5;
    margin-left: 1%;
    padding:0.5% 2% 1% 2%;
}
.secCreate .mimodel dl{
    width: 100%;
}
.secCreate .mimodel dt{
    width: 25%;
    padding: 1% 0 1% 0;
    text-align: center;
    display: inline-block;
    font-size:14px;
}
.secCreate .mimodel dd{
    width: 72%;
    padding: 1% 0 1% 2%;
    display: inline-block;
    font-size:14px;
}


.accordion-container {
  position: relative;
  width: 100%;
  /*border: 1px solid #0079c1;*/
  border-top: none;
  outline: 0;
  /*cursor: pointer；*/
}

.accordion-container .accordion-title {
  display: block;
  position: relative;
  margin: 0;
  padding: 1em 0.625em 1em 0.625em;
  font-size: 15px;
  font-weight: normal;
  color: #fff;
  background: #000;
  cursor: pointer;
  text-align: left;    
}

.accordion-container .accordion-title:hover,
.accordion-container .accordion-title:active,
.accordion-container .content-entry.open .accordion-title {
  background-color: #335167;
  color: white;
}

.accordion-container .accordion-title:hover i:before,
.accordion-container .accordion-title:hover i:active,
.accordion-container .content-entry.open i {
  color: white;
}

.accordion-title{
  position: relative;
}

.accordion-title:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.accordion-title.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}

.accordion-content {
  display: none;
  padding:1.5% 0 1.5% 0;

}

/* CSS for CodePen */
.accordion-container {
  width: 100%;
  margin: 1.875em auto;
}    
    
    
    
    
    
    
    
    
}



/*アコーディオン
***************************************************************/







/* contact
***************************************************************/
	
.secContact .inner {
  width: 1000px;
  margin: 1% auto 5% auto;

}

.cf h3{
    font-size: 160%;
    line-height: 2;
    text-align: center;
    }    
.cf p{
    font-size: 110%;
    text-align: center;
    } 
.sheet01{
	max-width: 960px;
	width:100%;
	margin:0 auto 30px auto;
	background:#fff;
}
.summary_01{
	width:30%;
}
.summary_02{
	width:70%;
}
.sheet01 th,
.sheet01 td{
	border-bottom:dotted 1px #B5B5B5;
	padding:40px 20px 40px;
	font-size: 16px;
	line-height: 30px;
}
.sheet01 th{
	/*background:#F1F9FD;
	color:#005BAB;*/
	background:#f8fbf8;
    font-weight:bold;
	width:33%;
	text-align:left;
}
.sheet01 td{
	width:70%;
	text-align:left;
    padding:10px 20px;
}
.sheet01 td input{
	/*height:25px;*/
    padding: 2px;
}

.sheet01 td span2{
    color: #dc143c;
}
.sheet01 td select{
	height:25px;
}
.sheet01 td input.width200 {
	width:200px;
}       
.sheet01 td input.width270 {
	width:270px;
}
.sheet01 td input.width300 {
	width:300px;
}
.sheet01 td input.width360 {
	width:360px;
}
.sheet01 td input.width450 {
	width:450px;
}
.sheet01 td input.width480 {
	width:480px;
} 
    
.sheet01 td li {
	float: left;
}
.sheet01 td li:first-child {
	margin-right: 5px;
}
.sheet01 td li span {
	display: inline-block;
	width: 60px;
	text-align: right;
	margin-right: 0px;
}
.sheet01 td textarea.width120{
    width: 120px;
    height: 18px;
}
.sheet01 td textarea{
    width: 480px;
    height: 100px;
}
button {
    margin-right: 7px;
    background: #0b419b;
    color: #fff;
    font-weight: bold;
    padding: 7px 10px;
    font-size: 18px;
    display: inline-block;
    border: 1px solid #0b419b;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    width: 170px;
}
button[type="submit"] {
	margin-right: 7px;
    background: #0b419b;
    color: #fff;
    font-weight: bold;
    padding: 7px 30px;
    font-size: 18px;
    display: inline-block;
}
button:hover,
button[type="submit"]:hover {
	background: #fff;
	color: #0b419b;
}
p.tCenter {
    text-align: center;
}
input#name1,
input#name2,
input#kana1,
input#kana2 {
    width: 200px;
    margin-left: 5px;
}
a.tel_bnr {
    display: block;
    margin: 0 auto 50px auto;
    max-width: 403px;
    width: 100%;
  }
a.tel_bnr img{
    display: block;
    width: 100%;
}
.table_a .subtxt {
    text-align: center;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 25px;
}
input#zip1 {
    margin-bottom: 7px;
}
textarea.large {
    margin-top: 5px;
}
.bt_js_bnr{text-align: center; margin: 60px 0;}
.bt_js_bnr p{margin-top: 10px; }
footer {
    margin-top: 0;
}

    
    
.linehightshikaku{
     line-height:3 ;
    margin-left:2%;      
        
    }
    
    
.linehighthp{
    line-height:3 ;
    margin-right:1% ;  
    margin-left:1% 
    }    

.red{
    color:red;
}
.arianame{
    line-height: 2;
    background:#a0a0a0; 
    color:white;    
    padding-left:2% ;
    margin:3% 0 1% 0 ;
}
.arianame:first-child{
    margin-top:0 ;
}

@media screen and (max-width:737px){
    
    
    
.secContact {
  padding: 2% 0 10% 0;
}

.secContact .inner {
  width: 93.75%;
}    
.cf h3{
    font-size: 90%;
    line-height: 2;
    }    
.cf p{
    font-size: 85%;
    }  
    
 .summary_01{
	width:100%;
}
.summary_02{
	width:100%;
}

.sheet01{
  width:100%;
  padding:0;
  margin-bottom:10px;
}
.sheet01 th,
.sheet01 td{
  display:block;
 /* border-top:solid 1px #B5B5B5;
  border-right:solid 1px #B5B5B5;
  border-left:solid 1px #B5B5B5;*/
  padding:5px;
  font-size:85%;
  text-align:left;
  width: 100%;
      box-sizing: border-box;
}
.sheet01 th{
 /* background:#F1F9FD;
    color:#005BAB;*/
background:#f8fbf8;    
  font-weight:bold;
  text-align:left;
  border-top:solid 1px #B5B5B5;
  border-bottom: none;

}
input[type=text],
input[type=email],
textarea{
  width:100% !important;
  padding:3px 0;
  box-sizing: border-box;
}
.sheet01 td textarea.width120{
    height: 18px;
}
.sheet01 td textarea{
    height: 180px;
}
.sheet01 td li {
    float: none;
}
input#name1, input#name2, input#kana1, input#kana2 {
    width: 170px;
    margin-left: 5px;
    /*width: 100%!important;*/
    box-sizing: border-box;
    margin: 0;
}
.sheet01 td li span {
    display: inline-block;
    width:100%;
    text-align: left;
    margin-right: 0px;
}
.sheet01 td li:first-child {
    margin-right: 0;
}
.table_a table tr td:first-child, .table_a table tr td:last-child {
    border-bottom: none;
    padding: 15px 10px;
}
.table_a table tr:last-child td:last-child{
  border-bottom: 1px solid #0b419b;
}
.sheet01 td input.width300 {
    width: 100%;
}
button {
    font-size: 15px;
    width: 130px;
    padding: 7px 10px;
}
button[type="submit"] {
    font-size: 15px;
    padding: 7px 10px;
}
.bt_js_bnr {
    margin: 60px 0 20px 0;
}
a.tel_bnr {
    display: block;
    margin: 0 auto 30px auto;
    max-width: 403px;
    width: 85%;
}
}   



/* contact
***************************************************************/


/* チェックボックス
***************************************************************/
 /*input[type="checkbox"]{
    display: none;
}
/ チェックボックスの代わりを成すラベル /
 input[type="checkbox"]+label{
    display: none;
    cursor: pointer;
    display: inline-block;
    position: relative;
    padding-left: 25px;
    padding-right: 10px;
}
/ ラベルの左に表示させる正方形のボックス□ /
 input[type="checkbox"]+label::before{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    left: 0;
    top: 50%;
    border: 1px solid;
    border-color:  #585753; / 枠の色変更 お好きな色を /
    background-color: #fff; / 背景の色変更 お好きな色を /
}
/ チェックが入った時のレ点 /
 input[type="checkbox"]:checked+label::after{
    content: "";
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 18px;
    height: 9px;
    margin-top: -9px;
    top: 50%;
    left: 3px;
    transform: rotate(-45deg);
    border-bottom: 3px solid;
    border-left: 3px solid;
    border-color: #585753; / チェックの色変更 お好きな色を /
    
}

 input[type="checkbox"]:checked+label::before{

    background-color:#ffff00; / 背景の色変更 お好きな色を /
}
*/
/* チェックボックス
***************************************************************/




/*透過*/
.hover{-webkit-transition: .3s;
	transition: .3s;}
.hover:hover {
 	opacity: 0.7;
	-khtml-opacity: .70;
	-moz-opacity: .70;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
 	}

.hover img:hover {
 	filter: alpha(opacity=60);/* IE lt 8 */
	-ms-filter: "alpha(opacity=60)"; /* IE 8 */
 	}
/*透過*/



/*ふわっと出現
***************************************************************/
/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
}

/*----------------------------
scroll_left ｜左から出現
----------------------------*/
.scroll_left {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(-30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_left.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}

/*----------------------------
scroll_right ｜右から出現
----------------------------*/
.scroll_right {
    -webkit-transition: 0.8s ease-in-out;
    -moz-transition: 0.8s ease-in-out;
    -o-transition: 0.8s ease-in-out;
    transition: 0.8s ease-in-out;
    transform: translateX(30px);
    opacity: 0;
    filter: alpha(opacity=0);
    -moz-opacity: 0;
}
.scroll_right.on {
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    transform: translateX(0);
}
/*ふわっと出現
***************************************************************/